/*
Theme Name: Ecofertas
Template: twentytwentyfive
Description: Tema hijo de Twenty Twenty-Five para ECOFERTAS: escala tipográfica fija, colores del logo, encabezado con buscador y categorías, portada propia y pie.
Version: 1.4.0
Requires at least: 6.7
Requires PHP: 7.4
Author: ECOFERTAS
Text Domain: ecofertas
*/

:root {
	--ecof-azul: #0a5ba6;
	--ecof-azul-osc: #084a88;
	--ecof-naranja: #e8650f;
	--ecof-gris: #6b6b6b;
	--ecof-borde: #e6e8eb;
	--ecof-fondo: #f5f6f8;
}

/* Ancho de contenido común (encabezado, portada). */
.ecof-ancho {
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
	width: 100%;
}
.ecof-solo-compu { display: none !important; }
@media (min-width: 900px) {
	.ecof-solo-compu { display: revert !important; }
	.ecof-solo-celular { display: none !important; }
}

/* Fondo gris claro en portada y listados: las tarjetas blancas se distinguen mejor. */
body.home,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag,
body.search {
	background-color: var(--ecof-fondo);
}

/* ---------- Encabezado ---------- */
.ecof-cab { background: #fff; border-bottom: 1px solid var(--ecof-borde); }
.ecof-cab p { margin: 0; }

/*
 * Franja superior: envíos y promociones, "Seguí tu envío" (Mis pedidos, donde Andreani muestra el número de
 * seguimiento) e "Informá tu pago". El Botón de arrepentimiento va al pie por decisión del dueño (2026-10-31):
 * docs/diseno/TEMA-ECOFERTAS.md (la Disp. 954/2025 lo pide en el primer acceso).
 */
.ecof-franja { background: var(--ecof-azul-osc); color: #fff; font-size: 13px; }
.ecof-franja__in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.ecof-franja__msj b { font-weight: 700; }
.ecof-franja__links { display: flex; gap: 14px; white-space: nowrap; }
.ecof-franja a { color: #fff; text-decoration: none; opacity: 0.92; }
.ecof-franja a:hover, .ecof-franja a:focus { text-decoration: underline; opacity: 1; }
@media (max-width: 420px) { .ecof-franja__msj { display: none; } .ecof-franja__links { margin-left: auto; } }
/* Celular: la franja de avisos ocupa todo el ancho y los enlaces van en una segunda línea. */
@media (max-width: 600px) {
	.ecof-franja__in { flex-wrap: wrap; gap: 0 12px; padding-top: 4px; padding-bottom: 4px; }
	.ecof-franja__in .lb-franja { flex-basis: 100%; min-height: 24px; }
	.ecof-franja__links { width: 100%; justify-content: center; gap: 18px; font-size: 12px; padding: 2px 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); }
}

.ecof-cab__grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "logo cats iconos" "buscar buscar buscar";
	position: relative;
	align-items: center;
	gap: 10px 12px;
	padding-top: 10px;
	padding-bottom: 12px;
}
.ecof-cab__logo { grid-area: logo; margin: 0; }
.ecof-cab__logo img { width: 64px !important; height: auto; }
.ecof-cab__iconos { grid-area: iconos; justify-self: end; gap: 14px !important; }
.ecof-cab__buscar { grid-area: buscar; margin: 0; min-width: 0; }
.ecof-cab__cats { grid-area: cats; justify-self: end; }
.ecof-cab__buscar .wp-block-search__inside-wrapper {
	border: 2px solid var(--ecof-azul) !important;
	border-radius: 999px;
	padding: 0 !important;
	overflow: hidden;
	background: #fff;
}
.ecof-cab__buscar .wp-block-search__input {
	border: 0 !important;
	padding: 11px 16px !important;
	font-size: 15px;
	min-width: 0;
	background: transparent;
}
.ecof-cab__buscar .wp-block-search__button {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--ecof-azul) !important;
	color: #fff !important;
	padding: 0 18px !important;
}
.ecof-cab__buscar .wp-block-search__button svg { fill: #fff; width: 22px; height: 22px; }
@media (min-width: 900px) {
	.ecof-cab__grid {
		grid-template-columns: auto minmax(0, 640px) auto;
		grid-template-areas: "logo buscar iconos";
		justify-content: space-between;
		gap: 28px;
	}
	.ecof-cab__logo img { width: 80px !important; }
}

/* Barra de categorías (computadora). */
.ecof-nav { border-top: 1px solid var(--ecof-borde); }
.ecof-nav__in { display: flex; align-items: center; gap: 24px; position: relative; }
.ecof-nav .wp-block-navigation { gap: 26px; min-height: 46px; font-size: 15px; font-weight: 600; }
.ecof-nav .wp-block-navigation-item__content:hover { color: var(--ecof-azul); }
/* "Tienda" queda como acceso destacado suave: el botón azul ahora es "Categorías". */
.ecof-nav .ecof-nav__tienda .wp-block-navigation-item__content {
	background: #eef4fb;
	color: var(--ecof-azul) !important;
	padding: 6px 14px;
	border-radius: 8px;
}

/* Botón "Categorías" con lista desplegable (celular y computadora). */
.ecof-catmenu { position: relative; }
.ecof-catmenu__btn {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--ecof-azul);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
	user-select: none;
}
.ecof-catmenu__btn::-webkit-details-marker { display: none; }
.ecof-catmenu__btn:hover { background: var(--ecof-azul-osc); }
.ecof-catmenu__btn:focus-visible { outline: 3px solid var(--ecof-naranja); outline-offset: 2px; }
.ecof-catmenu__flecha { transition: transform 0.2s; }
.ecof-catmenu[open] .ecof-catmenu__flecha { transform: rotate(180deg); }
.ecof-catmenu__panel {
	position: absolute;
	z-index: 100;
	top: calc(100% + 8px);
	left: 0;
	width: min(92vw, 360px);
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	color: #1a1a1a;
	border: 1px solid var(--ecof-borde);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
	padding: 8px 0;
}
.ecof-catmenu__lista, .ecof-catmenu__lista ul { list-style: none; margin: 0; padding: 0; }
.ecof-catmenu__lista a {
	display: block;
	padding: 9px 18px;
	color: #1a1a1a !important;
	text-decoration: none !important;
	font-size: 14px;
}
.ecof-catmenu__lista a:hover, .ecof-catmenu__lista a:focus-visible { background: #eef4fb; color: var(--ecof-azul) !important; }
.ecof-catmenu__grupo { font-weight: 700; }
.ecof-catmenu__lista ul a { padding: 6px 18px 6px 32px; color: #444 !important; font-size: 13.5px; }
.ecof-catmenu__todo {
	display: block;
	margin: 6px 12px 4px;
	padding: 10px;
	border-radius: 8px;
	background: #eef4fb;
	color: var(--ecof-azul) !important;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	text-decoration: none !important;
}
/* Celular: el botón va en la primera fila y la lista se abre a todo el ancho, debajo del buscador. */
@media (max-width: 899px) {
	.ecof-catmenu { position: static; }
	.ecof-catmenu__btn { height: 38px; }
	.ecof-catmenu__panel { left: 16px; right: 16px; width: auto; top: 100%; }
}
@media (max-width: 340px) { .ecof-catmenu__btn span { display: none; } }
@media (min-width: 900px) {
	.ecof-catmenu__btn { height: 36px; padding: 0 14px; border-radius: 8px; }
	/* En computadora el panel se abre en columnas: cada categoría con sus marcas abajo. */
	.ecof-catmenu__panel { width: 780px; max-height: none; padding: 18px 10px 12px; }
	.ecof-catmenu__lista { columns: 3; column-gap: 8px; }
	.ecof-catmenu__lista > li { break-inside: avoid; margin-bottom: 6px; }
	.ecof-catmenu__lista a { padding: 7px 12px; border-radius: 6px; }
	.ecof-catmenu__lista ul a { padding: 4px 12px 4px 22px; }
	.ecof-catmenu__todo { display: inline-block; margin: 8px 12px 0; padding: 8px 16px; }
}

/* ---------- Portada ---------- */
.ecof-portada { padding-bottom: 24px; }
.ecof-portada > * { margin-top: 0 !important; margin-block-start: 0 !important; }
.ecof-titulo { font-size: 20px; font-weight: 700; margin: 0; }

.ecof-hero { padding: 16px 0 4px; }
.ecof-hero__in { display: grid; gap: 12px; }
.ecof-slide {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 12px;
	min-height: 210px;
	padding: 20px 20px 44px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(120deg, #0a5ba6 0%, #0d3f73 100%);
	color: #fff !important;
	text-decoration: none !important;
}
.ecof-slide__txt { display: flex; flex-direction: column; align-items: flex-start; }
.ecof-slide small {
	background: var(--ecof-naranja);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
}
.ecof-slide__titulo { margin: 10px 0 6px; font-size: 26px; line-height: 1.1; font-weight: 800; }
.ecof-slide__bajada { font-size: 14px; opacity: 0.95; margin-bottom: 14px; }
.ecof-slide__btn { background: #fff; color: var(--ecof-azul); font-weight: 700; padding: 10px 18px; border-radius: 8px; font-size: 14px; }
.ecof-slide:hover .ecof-slide__btn { background: #eef4fb; }
.ecof-slide img {
	width: 100%;
	max-height: 190px;
	object-fit: contain;
	background: #fff;
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
}
/* Foto sin fondo (PNG transparente): flota sobre el azul con sombra, sin el recuadro blanco. */
.ecof-slide img.lb-recorte {
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35));
}
.ecof-slide__legal { position: absolute; left: 20px; right: 20px; bottom: 10px; font-size: 10px; line-height: 1.3; opacity: 0.8; }

.ecof-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ecof-mini a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	min-height: 110px;
	padding: 14px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ecof-borde);
	color: #1a1a1a !important;
	text-decoration: none !important;
}
.ecof-mini b { font-size: 15px; line-height: 1.2; }
.ecof-mini span { font-size: 13px; color: var(--ecof-azul); font-weight: 700; }
.ecof-mini img { display: none; }
.ecof-mini a.ecof-mini--naranja { background: #fff4ec; border-color: #ffd9bf; }
.ecof-mini a.ecof-mini--naranja span { color: #b54a05; }

.ecof-benef { padding: 14px 0; }
.ecof-benef__in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ecof-benef__in > div {
	display: flex;
	gap: 10px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--ecof-borde);
	border-radius: 12px;
	padding: 12px;
	color: var(--ecof-azul);
}
.ecof-benef p { margin: 0; }
.ecof-benef svg { flex: none; width: 24px; height: 24px; }
.ecof-benef b { display: block; color: #1a1a1a; font-size: 13px; line-height: 1.25; }
.ecof-benef span { display: none; color: var(--ecof-gris); font-size: 12px; }

.ecof-cats { padding: 10px 0; }
.ecof-cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; margin-top: 14px; }
.ecof-cats__grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	color: #1a1a1a !important;
	text-decoration: none !important;
}
.ecof-cats__grid span {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ecof-borde);
	display: grid;
	place-items: center;
	overflow: hidden;
	transition: border-color 0.15s;
}
.ecof-cats__grid a:hover span { border-color: var(--ecof-azul); }
.ecof-cats__grid img { width: 78%; height: 78%; object-fit: contain; }

.ecof-fila { padding: 16px 0; }
.ecof-fila__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ecof-fila__cab a { font-size: 14px; font-weight: 700; color: var(--ecof-azul); text-decoration: none; white-space: nowrap; }
/* En celular, cada fila se desliza con el dedo. */
@media (max-width: 899px) {
	.ecof-fila .wc-block-product-template {
		grid-template-columns: none !important;
		grid-auto-flow: column;
		grid-auto-columns: 46%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
	}
	.ecof-fila .wc-block-product { scroll-snap-align: start; }
}

@media (min-width: 900px) {
	.ecof-hero__in { grid-template-columns: 2fr 1fr; }
	.ecof-slide { min-height: 330px; padding: 36px 44px 44px; }
	.ecof-slide__titulo { font-size: 40px; }
	.ecof-slide__bajada { font-size: 17px; }
	.ecof-slide img { max-height: 280px; }
	.ecof-mini { grid-template-columns: 1fr; }
	.ecof-mini a { padding: 22px 46% 22px 22px; }
	.ecof-mini b { font-size: 20px; }
	.ecof-mini img {
		display: block;
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		width: 40%;
		height: 80%;
		object-fit: contain;
	}
	.ecof-benef__in { grid-template-columns: repeat(4, 1fr); }
	.ecof-benef span { display: block; }
	.ecof-benef b { font-size: 14px; }
	.ecof-cats__grid { grid-template-columns: repeat(8, 1fr); }
	.ecof-cats__grid span { width: 104px; height: 104px; }
	.ecof-cats__grid a { font-size: 14px; }
}

/*
 * Efectos al pasar el mouse (pedido del dueño, como mebac.com.ar): la foto del banner se acerca despacio, las
 * tarjetas y las categorías se levantan. Solo con mouse y si el equipo no pide "reducir movimiento". En celular, al
 * tocar, la tarjeta se achica apenas para confirmar el toque.
 */
.ecof-slide img, .ecof-mini img, .ecof-cats__grid img { transition: transform 0.45s ease; }
.ecof-mini a, .ecof-cats__grid span { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.ecof-slide:hover img { transform: scale(1.06); }
	.ecof-mini a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(10, 40, 80, 0.12); }
	.ecof-cats__grid a:hover span { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(10, 91, 166, 0.18); }
	.ecof-cats__grid a:hover img { transform: scale(1.1); }
	.ecof-cats__grid a:hover { color: var(--ecof-azul) !important; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (min-width: 900px) {
	.ecof-mini a:hover img { transform: translateY(-50%) scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
	.ecof-mini a:active, .ecof-cats__grid a:active span { transform: scale(0.97); }
}
.ecof-slide:focus-visible, .ecof-mini a:focus-visible, .ecof-cats__grid a:focus-visible { outline: 3px solid var(--ecof-naranja); outline-offset: 3px; }

/* ---------- Tarjetas de producto (portada, tienda, categorías, búsqueda, relacionados) ---------- */
.wc-block-product {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ecof-borde);
	border-radius: 12px;
	padding: 10px 12px 14px;
	transition: box-shadow 0.15s;
}
.wc-block-product:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.wc-block-product .wp-block-post-title {
	font-size: 14px !important;
	font-weight: 500;
	line-height: 1.3 !important;
	min-height: 2.6em;
	margin: 8px 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wc-block-product .wp-block-post-title a { text-decoration: none; }
/* El botón queda abajo y a la misma altura en todas las tarjetas. */
.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto !important; margin-bottom: 0 !important; padding-top: 4px; }
.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link { width: 100%; margin-bottom: 0 !important; padding: 9px 12px; font-size: 14px !important; }

/* Selector "Ordenar" de la tienda: el tema lo deja con el estilo del navegador. */
select.orderby {
	font: inherit;
	font-size: 14px;
	padding: 0.45rem 2rem 0.45rem 0.75rem;
	border: 1px solid #cfcfcf;
	border-radius: 6px;
	background-color: #fff;
	color: #111;
}

/* Pie: fondo blanco (el logo tiene fondo blanco), línea arriba; enlaces sin subrayado, con subrayado al pasar. */
.ecofertas-pie {
	border-top-style: solid;
	background: #fff;
}
.ecofertas-pie a {
	text-decoration: none;
}
.ecofertas-pie a:hover,
.ecofertas-pie a:focus {
	text-decoration: underline;
}