/* ==========================================================================
   AMARELO PETS · Tienda con filtros
   Colores de marca: #633D98 morado · #2A1844 oscuro · #EDE9FF lila
                     #FFF105 amarillo · #FF0000 oferta
   ========================================================================== */

.amt-wrap {
	--amt-morado: #633D98;
	--amt-oscuro: #2A1844;
	--amt-lila:   #EDE9FF;
	--amt-amarillo: #FFF105;
	--amt-oferta: #FF0000;
	--amt-borde:  #ECE7F3;
	--amt-cols:   4;

	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 32px;
	align-items: start;
	max-width: 1400px;
	margin: 0 auto;
	color: var(--amt-oscuro);
}

/* ------------------ OCULTAR EL TÍTULO "TIENDA" DEL TEMA ------------------
   La página necesita un título en WordPress, pero no hace falta mostrarlo.  */
body.amt-pagina-tienda .entry-title,
body.amt-pagina-tienda .page-title,
body.amt-pagina-tienda .entry-header > h1,
body.amt-pagina-tienda .elementor-widget-theme-page-title,
body.amt-pagina-tienda .elementor-page-title {
	display: none !important;
}

/* ---------------------------- TIRA DE ESPECIES ---------------------------
   Las dos imágenes de fondo son las mismas que usa la portada.
   Si algún día cambian, se cambian aquí y ya.                              */
.amt-wrap {
	--amt-especie-fondo: url("https://amarelopets.com/wp-content/uploads/2022/05/bg-service-normal.png");
	--amt-especie-fondo-activo: url("https://amarelopets.com/wp-content/uploads/2022/05/bg-service-hover.png");
}

.amt-especies { grid-column: 1 / -1; margin: 28px 0 26px; }

.amt-especies-titulo {
	font-size: 16px;
	font-weight: 700;
	color: var(--amt-morado);
	margin: 0 0 12px;
	text-align: center;
}

.amt-especies-fila {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	padding-bottom: 6px;
}

.amt-wrap .amt-especie {
	background: none !important;
	border: 0 !important;
	padding: 6px !important;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: auto !important;
	flex: none;
}

.amt-especie-img {
	display: grid;
	place-items: center;
	width: 110px;
	height: 110px;
	background-image: var(--amt-especie-fondo);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	transition: transform .18s ease;
}

.amt-especie-img img {
	width: 82%;
	height: 82%;
	object-fit: contain;
	position: relative;
}

.amt-especie-nombre {
	font-size: 15px;
	font-weight: 800;
	color: var(--amt-morado);
	font-family: var(--amt-fuente, inherit);
}

.amt-especie:hover .amt-especie-img,
.amt-especie.activa .amt-especie-img {
	background-image: var(--amt-especie-fondo-activo);
	/* Si el archivo del hover no existiera, queda el amarillo de respaldo */
	background-color: transparent;
}

.amt-especie:hover .amt-especie-img { transform: translateY(-3px); }

.amt-especie.activa .amt-especie-nombre { color: var(--amt-oscuro); }

/* ------- BLINDAJE: anula los estilos de botón que impone el tema --------- */
.amt-wrap button,
.amt-toast button {
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0 !important;
	line-height: 1.3;
	font-family: inherit;
}

.amt-wrap .amt-grupo-titulo,
.amt-wrap .amt-limpiar,
.amt-wrap .amt-cerrar-filtros {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0;
	margin: 0;
	width: auto;
}

/* ---------------------------- PANEL DE FILTROS --------------------------- */
.amt-filtros {
	background: transparent;
	border: 0;
	padding: 0 8px 0 0;
	position: sticky;
	top: 20px;
}

.amt-filtros-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--amt-borde);
}

.amt-filtros-head h2 {
	font-size: 16px !important;
	font-weight: 800;
	margin: 0;
	color: var(--amt-oscuro);
	flex: 1;
	line-height: 1.2;
	letter-spacing: .01em;
}

.amt-wrap .amt-limpiar {
	color: var(--amt-morado) !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
}

.amt-wrap .amt-cerrar-filtros {
	display: none;
	font-size: 26px !important;
	line-height: 1;
	cursor: pointer;
	color: var(--amt-oscuro) !important;
}

.amt-grupo { border-bottom: 1px solid var(--amt-borde); }

.amt-wrap .amt-grupo-titulo {
	width: 100% !important;
	padding: 15px 0 !important;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--amt-morado) !important;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.amt-grupo-titulo span {
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--amt-morado);
	border-bottom: 2px solid var(--amt-morado);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
	flex: none;
}

.amt-grupo.abierto .amt-grupo-titulo span {
	transform: rotate(225deg) translate(-2px, -2px);
}

.amt-grupo-cuerpo { display: none; padding-bottom: 14px; }
.amt-grupo.abierto .amt-grupo-cuerpo { display: block; }

.amt-lista { list-style: none; margin: 0; padding: 0; }
.amt-lista .amt-lista { margin-left: 16px; }
.amt-lista li.oculta,
.amt-lista li.filtrada { display: none; }

/* Las mascotas se eligen arriba en las fotos, no aquí. */
.amt-grupo[data-tax="product_cat"] .amt-nivel-0 > li > label { display: none; }
.amt-grupo[data-tax="product_cat"] .amt-nivel-0 > li > .amt-lista { margin-left: 0; }

.amt-pista {
	font-size: 12px;
	line-height: 1.4;
	color: #9a95a6;
	margin: 0 0 8px;
}

.amt-wrap .amt-buscar-term {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--amt-borde) !important;
	border-radius: 8px !important;
	padding: 8px 10px !important;
	font-size: 13px;
	margin-bottom: 10px;
	background: #fff !important;
	color: var(--amt-oscuro);
}

.amt-lista label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.3;
	padding: 5px 0;
	cursor: pointer;
	color: var(--amt-oscuro);
}

.amt-lista label span { flex: 1; }
.amt-lista label em { font-style: normal; font-size: 12px; color: #9a95a6; }
.amt-lista input { accent-color: var(--amt-morado); width: 16px; height: 16px; margin: 0; }

.amt-logo {
	width: 30px;
	height: 30px;
	object-fit: contain;
	border-radius: 5px;
	background: #fff;
	flex: none;
}

/* ---------------------------- SLIDER DE PRECIO --------------------------- */
.amt-slider { position: relative; height: 34px; margin: 10px 8px 0; }

/* El tema suele poner marco y fondo a todos los input: aquí los quitamos. */
.amt-wrap .amt-slider-input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	outline: none;
}

.amt-slider-track {
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--amt-lila);
	border-radius: 4px;
}

.amt-slider-fill {
	position: absolute;
	height: 100%;
	background: var(--amt-morado);
	border-radius: 4px;
}

.amt-slider-input {
	position: absolute;
	top: 6px;
	left: 0;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	height: 22px;
}

.amt-slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--amt-morado);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(42, 24, 68, .35);
	cursor: pointer;
}

.amt-slider-input::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--amt-morado);
	border: 3px solid #fff;
	cursor: pointer;
}

.amt-slider-valores {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--amt-oscuro);
	text-align: center;
}

/* ------------------------------- BARRA ----------------------------------- */
.amt-barra {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.amt-conteo { font-size: 14px; color: #6c6779; flex: 1; }

.amt-barra-derecha { display: flex; gap: 10px; flex-wrap: wrap; }

.amt-buscar,
.amt-orden {
	border: 1px solid var(--amt-borde);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fff;
	color: var(--amt-oscuro);
	max-width: 100%;
}

.amt-buscar { min-width: 200px; }

.amt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.amt-wrap .amt-chip {
	background: var(--amt-lila) !important;
	color: var(--amt-oscuro) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: auto !important;
	margin: 0;
}

.amt-wrap .amt-chip:hover { background: #DED6F0 !important; }

.amt-chip::after { content: " ✕"; opacity: .6; }

/* ------------------------------ CUADRÍCULA -------------------------------- */
.amt-grid {
	display: grid;
	grid-template-columns: repeat(var(--amt-cols), minmax(0, 1fr));
	gap: 20px;
}

.amt-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--amt-lila);
	border-radius: 14px;
	padding: 14px 14px 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(42, 24, 68, .05);
	transition: transform .18s ease, box-shadow .18s ease;
}

.amt-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(99, 61, 152, .18);
}

.amt-oferta {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--amt-oferta);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 11px;
	z-index: 2;
}

.amt-thumb { display: block; margin-bottom: 12px; }

.amt-thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
	transition: opacity .15s ease;
}

.amt-marca {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9a95a6;
	margin-bottom: 4px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.amt-titulo {
	font-family: var(--amt-fuente, inherit);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--amt-oscuro);
	text-decoration: none;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
	text-align: left;
}

.amt-titulo:hover { color: var(--amt-morado); }

.amt-precio {
	font-family: var(--amt-fuente, inherit);
	font-size: 17px;
	font-weight: 700;
	color: var(--amt-morado);
	margin-bottom: 2px;
	text-align: left;
}

.amt-precio del { opacity: .45; font-weight: 500; margin-right: 6px; font-size: 14px; }
.amt-precio ins { text-decoration: none; }

/* Precio por kilo: el argumento que empuja al bulto grande */
.amt-unidad {
	font-size: 12px;
	color: #8b8697;
	min-height: 1.2em;
	margin-bottom: 4px;
	text-align: left;
}

/* Señal de escasez */
.amt-stock {
	font-size: 12px;
	font-weight: 600;
	min-height: 1.3em;
	margin-bottom: 10px;
	text-align: left;
}

.amt-stock-poco { color: #C47A00; }
.amt-stock-poco::before { content: "◷ "; }
.amt-stock-cero { color: #8b8697; }

/* Etiquetas de filtro: limpiar todo */
.amt-wrap .amt-limpiar-todo {
	background: none !important;
	border: 0 !important;
	color: var(--amt-morado) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 6px 4px !important;
	width: auto !important;
}

/* ------------------------------ BURBUJAS ---------------------------------- */
.amt-burbujas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.amt-especie-num {
	font-size: 12px;
	color: #9a95a6;
	margin-top: -4px;
}

/* Girito de carga */
.amt-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--amt-lila);
	border-top-color: var(--amt-morado);
	border-radius: 50%;
	animation: amt-gira .7s linear infinite;
	vertical-align: -3px;
	margin-right: 6px;
}

@keyframes amt-gira { to { transform: rotate(360deg); } }

.amt-wrap .amt-burbuja {
	background: var(--amt-lila) !important;        /* #EDE9FF */
	border: 1.5px solid #C9B8E8 !important;
	color: var(--amt-morado) !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	line-height: 1.3;
	margin: 0;
	width: auto !important;
}

.amt-wrap .amt-burbuja:hover {
	background: #E0D6F7 !important;
	border-color: var(--amt-morado) !important;
	color: var(--amt-morado) !important;
}

.amt-wrap .amt-burbuja.activa {
	background: var(--amt-morado) !important;   /* #633D98 */
	border-color: var(--amt-morado) !important;
	color: #fff !important;
}

/* Agotadas: se ven, se tachan, no se pueden elegir */
.amt-wrap .amt-burbuja.agotada {
	background: #fff !important;
	border-color: #ECE7F3 !important;
	color: #B5B0BF !important;
	text-decoration: line-through;
	cursor: not-allowed;
}

.amt-wrap .amt-burbuja.agotada:hover {
	border-color: #ECE7F3 !important;
	color: #B5B0BF !important;
}

.amt-burbujas.pide-eleccion .amt-burbuja {
	animation: amt-latido .4s ease 2;
	border-color: var(--amt-oferta);
}

@keyframes amt-latido {
	50% { transform: scale(1.06); }
}

/* ------------------------------- BOTÓN ------------------------------------ */
.amt-wrap .amt-comprar {
	margin-top: auto;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--amt-morado) !important;
	color: #fff !important;
	font-family: var(--amt-fuente, inherit);
	font-size: 15px;
	font-weight: 700;
	padding: 13px 10px;
	border: 0;
	border-radius: 12px !important;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease;
}

.amt-wrap .amt-comprar:hover { background: var(--amt-oscuro) !important; color: #fff !important; }

.amt-wrap .amt-comprar.cargando { opacity: .65; pointer-events: none; }

.amt-wrap .amt-comprar.listo { background: #2e9e5b !important; }

.amt-wrap .amt-agotado {
	background: #ECE7F3 !important;
	color: #8b8697 !important;
	cursor: default;
}

/* ------------------------- ESTADOS Y BOTÓN "MÁS" -------------------------- */
.amt-cargando,
.amt-vacio {
	display: none;
	text-align: center;
	padding: 40px 20px;
	color: #6c6779;
	font-size: 15px;
}

.amt-wrap.cargando .amt-cargando { display: block; }
.amt-wrap.vacio .amt-vacio { display: block; }

.amt-mas-wrap { text-align: center; margin-top: 28px; display: none; }
.amt-mas-wrap.visible { display: block; }

.amt-mas {
	background: #fff;
	border: 2px solid var(--amt-morado);
	color: var(--amt-morado);
	border-radius: 999px;
	padding: 12px 34px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: all .18s ease;
}

.amt-mas:hover { background: var(--amt-morado); color: #fff; }

/* --------------------------------- AVISO ---------------------------------- */
.amt-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	background: var(--amt-oscuro);
	color: #fff;
	border-radius: 12px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	box-shadow: 0 12px 30px rgba(42, 24, 68, .35);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	max-width: calc(100vw - 40px);
}

.amt-toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.amt-toast.error { background: var(--amt-oferta); }

.amt-toast-texto::before { content: "✓ "; color: var(--amt-amarillo); font-weight: 700; }
.amt-toast.error .amt-toast-texto::before { content: "! "; }

.amt-toast-link {
	color: var(--amt-amarillo);
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.amt-toast.error .amt-toast-link { display: none; }

/* -------------------------------- MÓVIL ----------------------------------- */
.amt-abrir-filtros {
	display: none;
	background: var(--amt-morado);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px;
	font-size: 15px;
	font-weight: 700;
	width: 100%;
	cursor: pointer;
	margin-bottom: 16px;
}

@media (max-width: 1024px) {
	.amt-wrap { --amt-cols: 3 !important; }
	/* El número de columnas va escrito en la propia etiqueta de la
	   cuadrícula, así que aquí hay que mandarle directo a ella. */
	.amt-wrap .amt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
	.amt-wrap { grid-template-columns: 1fr; gap: 0; }
	.amt-abrir-filtros { display: block; }
	.amt-wrap .amt-cerrar-filtros { display: block; }

	.amt-especie-img { width: 84px; height: 84px; border-radius: 20px; }
	.amt-especie-nombre { font-size: 13px; }

	.amt-filtros {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 88%;
		max-width: 340px;
		z-index: 100000;
		overflow-y: auto;
		border-radius: 0;
		background: #fff !important;   /* si no, se ve la página por detrás */
		padding: 20px 18px 40px !important;
		transform: translateX(-102%);
		transition: transform .25s ease;
		box-shadow: 0 0 40px rgba(42, 24, 68, .3);
	}

	.amt-filtros.abierto { transform: translateX(0); }

	/* Capa oscura detrás del panel */
	.amt-capa {
		position: fixed;
		inset: 0;
		background: rgba(42, 24, 68, .5);
		z-index: 99999;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}

	.amt-capa.visible { opacity: 1; pointer-events: auto; }

	body.amt-filtros-abiertos { overflow: hidden; }

	.amt-lista { max-height: none; }
}

@media (max-width: 760px) {
	.amt-wrap { --amt-cols: 2 !important; }
	.amt-wrap .amt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
	}

	.amt-card { padding: 12px 10px 14px; border-radius: 12px; }

	.amt-marca { font-size: 10px; letter-spacing: .04em; }
	.amt-titulo { font-size: 13px; min-height: 2.6em; }
	.amt-precio { font-size: 15px; line-height: 1.3; }
	.amt-precio del { display: block; margin: 0; }
	.amt-unidad, .amt-stock { font-size: 11px; }

	.amt-wrap .amt-burbuja {
		padding: 5px 10px !important;
		font-size: 11px;
	}

	.amt-wrap .amt-comprar {
		font-size: 13px;
		padding: 11px 6px !important;
		max-width: 100%;
		min-width: 0 !important;
		white-space: nowrap;
	}

	.amt-buscar { min-width: 0; flex: 1; }
	.amt-barra-derecha { width: 100%; }
	.amt-orden { flex: 1; }
}

/* Teléfonos angostos: una sola columna antes que apretar las tarjetas */
@media (max-width: 370px) {
	.amt-wrap .amt-grid { grid-template-columns: 1fr !important; }
}

.amt-grid { overflow-anchor: none; }