/* ==========================================================================
   shop.css — Archivo de tienda: header, sidebar de filtros, grid, product card
   ========================================================================== */

.esp-shop { padding-block: var(--esp-space-7) var(--esp-space-9); }
/* Shop hero — fondo rojo/negro + patrón de ajíes */
.esp-shop__hero {
	position: relative; text-align: center; margin-bottom: var(--esp-space-6);
	padding: var(--esp-space-8) var(--esp-space-5); border-radius: var(--radius-xl); overflow: hidden;
	background:
		radial-gradient(110% 120% at 80% 0%, rgba(159, 21, 21, 0.5), transparent 55%),
		linear-gradient(158deg, #2a0a08 0%, #160706 50%, #0a0605 100%);
	border: 1px solid rgba(255, 198, 46, 0.14);
}
.esp-shop__hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: url("../img/textures/chili-pattern.svg") repeat; background-size: 120px 120px; opacity: 0.06;
}
.esp-shop__hero > * { position: relative; z-index: 1; }
.esp-shop__title { font-size: var(--esp-fs-800); color: var(--color-cream); }
.esp-shop__sub { color: var(--esp-text-muted); margin-top: var(--esp-space-2); }
/* Fila de filtros visuales (pills por categoría) */
.esp-shop__filters-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-space-2); margin-bottom: var(--esp-space-6); }
.esp-filter-pill {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.05rem; border-radius: var(--esp-radius-pill);
	font-family: var(--font-body); font-weight: 600; font-size: var(--esp-fs-300); text-transform: uppercase; letter-spacing: var(--esp-tracking-caps);
	color: var(--esp-text-muted); background: var(--esp-surface); border: 1px solid var(--esp-border);
	transition: color var(--esp-dur) var(--esp-ease), border-color var(--esp-dur) var(--esp-ease), background var(--esp-dur) var(--esp-ease), transform var(--esp-dur) var(--esp-ease-emph);
}
.esp-filter-pill:hover { color: var(--color-cream); border-color: rgba(255, 198, 46, 0.4); transform: translateY(-2px); }
.esp-filter-pill.is-active { color: #fff; background: var(--color-red); border-color: var(--color-red); }

/* Tienda a ancho completo (los filtros van en pills arriba, no en sidebar). */
.esp-shop__layout { display: block; }
.esp-shop__main { width: 100%; }
/* Si en el futuro se activa un sidebar de widgets, vuelve a 2 columnas. */
.esp-shop__layout:has(.esp-shop__sidebar) { display: grid; grid-template-columns: 260px 1fr; gap: var(--esp-space-6); align-items: start; }

/* ---- Sidebar de filtros ---- */
.esp-shop__sidebar {
	position: sticky; top: calc(var(--esp-header-h) + var(--esp-space-4));
	background: var(--esp-surface); border: 1px solid var(--esp-border); border-radius: var(--esp-radius-lg); padding: var(--esp-space-5);
}
.esp-shop__filter-toggle { display: none; margin-bottom: var(--esp-space-4); }
.esp-widget { margin-bottom: var(--esp-space-6); }
.esp-widget:last-child { margin-bottom: 0; }
.esp-widget .widget-title {
	font-family: var(--esp-font-display); font-size: var(--esp-fs-500); text-transform: uppercase;
	letter-spacing: var(--esp-tracking-caps); color: var(--esp-dorado); margin-bottom: var(--esp-space-3);
}
.esp-widget ul li { padding: 0.3rem 0; }
.esp-widget a { color: var(--esp-text-muted); }
.esp-widget a:hover { color: var(--esp-dorado); }

/* Slider de precio WooCommerce */
.price_slider_wrapper { margin-top: var(--esp-space-2); }
.ui-slider { background: var(--esp-surface-3); height: 5px; border-radius: 999px; position: relative; }
.ui-slider .ui-slider-range { background: var(--esp-rojo); height: 5px; border-radius: 999px; position: absolute; }
.ui-slider .ui-slider-handle { background: var(--esp-dorado); width: 16px; height: 16px; border-radius: 50%; top: -6px; cursor: grab; }
.price_label { color: var(--esp-text-muted); font-size: var(--esp-fs-300); margin-top: var(--esp-space-3); }

/* ---- Toolbar ---- */
.esp-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-space-4); margin-bottom: var(--esp-space-5); flex-wrap: wrap; }
.woocommerce-result-count { color: var(--esp-text-muted); font-size: var(--esp-fs-300); margin: 0; }
.woocommerce-ordering select {
	width: auto; min-width: 210px; padding: 0.62rem 2.2rem 0.62rem 0.95rem; margin: 0;
	background-color: var(--esp-surface); color: var(--color-cream);
	border: 1px solid var(--esp-border); border-radius: var(--esp-radius-sm);
	font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23FFC62E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
	background-repeat: no-repeat; background-position: right 0.8rem center;
}
.woocommerce-ordering select:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 1px; }
/* Sin reviews aún: ocultar estrellas vacías en las cards para no ensuciar. */
.esp-card .star-rating { display: none; }

/* ---- Grid ---- */
ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: var(--esp-space-5); margin: 0; padding: 0; list-style: none; }
/* WooCommerce mete ::before/::after (clearfix de floats) que en un grid se vuelven
   CELDAS VACÍAS (el hueco de la esquina superior izq). Los eliminamos. */
ul.products::before, ul.products::after { content: none !important; display: none !important; }
/* WooCommerce por defecto pone li.product { float:left; width:22.05% } → rompe el grid
   (cards en tiras finas). Forzamos a que cada card llene su celda del grid. */
ul.products > li, ul.products > li.product, .woocommerce ul.products li.product {
	width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; float: none !important; clear: none !important;
}

/* ---- Product card ---- */
.esp-card { list-style: none; width: 100%; }
.esp-card__inner {
	display: flex; flex-direction: column; height: 100%; will-change: transform;
	background: var(--esp-surface); border: 1px solid var(--esp-border); border-radius: var(--esp-radius-lg); overflow: hidden;
	transition: transform 360ms var(--esp-ease-emph), border-color 280ms var(--esp-ease-emph), box-shadow 360ms var(--esp-ease-emph);
}
.esp-card__inner:hover {
	transform: translateY(-6px);
	border-color: var(--esp-border-strong);
	box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
.esp-card__inner:active { transform: translateY(-2px); transition-duration: var(--esp-press); }
/* Sin caja interna: la botella (PNG transparente) flota sobre la card, con un
   halo cálido sutil detrás. Misma superficie que la card = sin "box-in-box". */
.esp-card__media {
	position: relative; display: block; aspect-ratio: 1/1;
	background: radial-gradient(60% 50% at 50% 50%, rgba(255,198,46,.07), transparent 72%);
	overflow: visible;
}
.esp-card__media .esp-pill { position: absolute; top: var(--esp-space-3); right: var(--esp-space-3); z-index: 2; }
.esp-card__origin {
	position: absolute; top: var(--esp-space-3); left: var(--esp-space-3); z-index: 2;
	display: inline-flex; align-items: center; gap: 4px; padding: 0.28rem 0.55rem; border-radius: var(--esp-radius-pill);
	font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--color-gold); background: color-mix(in srgb, var(--color-black) 70%, transparent); border: 1px solid rgba(255, 198, 46, 0.4);
}
.esp-card__link { display: block; width: 100%; height: 100%; }
/* Video de sabor (hover desktop): overlay sobre la imagen, oculto por defecto. */
.esp-card__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
	padding: var(--esp-space-4) var(--esp-space-4) 0; opacity: 0; pointer-events: none; z-index: 1;
	transition: opacity 0.32s var(--esp-ease);
}
.esp-card:hover .esp-card__video { opacity: 1; }
/* Botella SIEMPRE flotando suave (vida premium, como el logo). Escalonada por card. */
.esp-card__link img {
	width: 100%; height: 100%; object-fit: contain; object-position: center; padding: var(--esp-space-3);
	filter: drop-shadow(0 16px 22px rgba(0,0,0,.55));
	animation: esp-float-bottle 4.5s ease-in-out infinite;
}
ul.products > li:nth-child(2n) .esp-card__link img { animation-delay: -1.2s; }
ul.products > li:nth-child(3n) .esp-card__link img { animation-delay: -2.4s; }
ul.products > li:nth-child(4n) .esp-card__link img { animation-delay: -0.6s; }
.esp-card__body { display: flex; flex-direction: column; gap: var(--esp-space-2); padding: var(--esp-space-4); flex: 1 1 auto; }
.esp-card__title-link { color: var(--esp-crema); }
.esp-card__title-link:hover { color: var(--esp-dorado); }
.woocommerce-loop-product__title {
	font-family: var(--esp-font-body); font-weight: 700; font-size: var(--esp-fs-500);
	text-transform: none; letter-spacing: 0; padding: 0; margin: 0; line-height: 1.25;
}
.esp-card .price { color: var(--esp-dorado) !important; font-weight: 700; font-size: var(--esp-fs-600); margin: 0; }
.esp-card .price del { color: var(--esp-text-dim); font-weight: 400; font-size: var(--esp-fs-400); margin-right: 0.4rem; }
.esp-card .price ins { text-decoration: none; }
.esp-card__foot { margin-top: auto; padding-top: var(--esp-space-3); }
/* !important para ganarle al CSS default de WooCommerce (botón gris .button) */
.esp-card__foot .button, .esp-card__foot .add_to_cart_button, .esp-card__foot .added_to_cart {
	display: inline-flex !important; align-items: center; justify-content: center; gap: var(--esp-space-2); width: 100% !important;
	font-family: var(--esp-font-body) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: var(--esp-tracking-caps);
	font-size: var(--esp-fs-300) !important; line-height: 1.2 !important; padding: 0.85rem 1rem !important; border-radius: var(--esp-radius-pill) !important;
	background: var(--esp-rojo) !important; background-color: var(--esp-rojo) !important; color: #fff !important; border: 0 !important; cursor: pointer; margin: 0 !important; will-change: transform;
	box-shadow: 0 6px 16px rgba(226,42,35,.28), inset 0 1px 0 rgba(255,255,255,.16);
	transition: background 160ms var(--esp-ease-emph), box-shadow 200ms var(--esp-ease-emph), transform var(--esp-press) var(--esp-press-ease);
}
.esp-card__foot .button:hover { background: #ef332c !important; background-color: #ef332c !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(226,42,35,.44), inset 0 1px 0 rgba(255,255,255,.2); }
.esp-card__foot .button:active { transform: translateY(0) scale(0.98); box-shadow: 0 3px 9px rgba(226,42,35,.4), inset 0 2px 5px rgba(0,0,0,.25); transition-duration: var(--esp-press); }
.esp-card__foot .added_to_cart { background: var(--esp-verde) !important; background-color: var(--esp-verde) !important; margin-top: var(--esp-space-2) !important; }
.esp-card__foot .button.loading, .esp-card__foot .button.esp-loading { opacity: .7; pointer-events: none; }
.esp-card__foot .button.esp-added { background: var(--esp-verde); }
.esp-card__view {
	display: block; text-align: center; margin-top: var(--esp-space-2);
	font-size: var(--esp-fs-300); font-weight: 600; color: var(--esp-text-muted); text-decoration: underline; text-underline-offset: 3px;
	transition: color var(--esp-dur) var(--esp-ease);
}
.esp-card__view:hover { color: var(--color-gold); }