/*
 * Ficha de producto en teléfono — solo diseño.
 *
 * Esta hoja no agrega ni quita un solo bloque: reordena y reviste lo que la
 * ficha ya imprime. Vive aparte y solo se aplica a <=760px, así que la ficha
 * de escritorio queda intacta y volver atrás es borrar un archivo.
 *
 * El problema que resuelve: .cgpp-top es una rejilla de 3 columnas pensada
 * para escritorio. En el teléfono colapsaba a una sola columna y la barra
 * lateral —confianza, vendedor, envío, pagos: casi 1000px— caía al fondo,
 * mientras la tabla de Especificaciones quedaba ARRIBA del nombre del
 * producto. Se scrolleaba media pantalla para saber cómo se llamaba la cosa
 * y cuánto costaba.
 *
 * @since 3.215.0
 */

@media (max-width: 760px) {

	/* ---------- lienzo de borde a borde ---------- */
	.cgpp.cgpp-mov {
		padding: 0 0 92px !important;
		--mov-lado: 16px;   /* el respiro del texto; el resto pega al borde */
	}
	.cgpp-mov .cgpp-bc { padding: 10px var(--mov-lado) 6px; margin: 0; font-size: 12px; }

	/* ---------- orden de la columna ---------- */
	.cgpp-mov .cgpp-top { display: flex !important; flex-direction: column; gap: 0 !important; }
	.cgpp-mov .cgpp-gallery { order: 1; }
	.cgpp-mov .cgpp-summary { order: 2; }
	.cgpp-mov .cgpp-side    { order: 3; }
	/* En flex, un hijo sin `order` vale 0 y se iría ARRIBA de la galería.
	   La cola que arma el JS tiene que declarar su lugar. */
	.cgpp-mov .cgpp-movcola { order: 4; }

	/* La foto primero, las miniaturas debajo. Especificaciones se va al final
	   convertida en acordeón (lo mueve pdp-movil.js). */
	.cgpp-mov .cgpp-gallery { display: flex; flex-direction: column; padding: 0; margin: 0; }
	.cgpp-mov .cgpp-stage  { order: 1; }
	.cgpp-mov .cgpp-thumbs { order: 2; }
	.cgpp-mov .cgpp-galspec { order: 3; }

	/* ---------- 1. galería a sangre ---------- */
	.cgpp-mov .cgpp-stage {
		border-radius: 0 !important; margin: 0 !important;
		min-height: 0 !important; aspect-ratio: 1 / 1;
		background: #fff; position: relative; overflow: hidden;
	}
	.cgpp-mov .cgpp-stage img { width: 100%; height: 100%; object-fit: contain; }

	/* La hoja sube 20px sobre lo que tenga encima. Si eso son las miniaturas,
	   les tapa la mitad: se les da ese hueco de vuelta. */
	.cgpp-mov .cgpp-thumbs {
		display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--mov-lado) 28px;
		max-height: none; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
	}
	.cgpp-mov .cgpp-thumbs::-webkit-scrollbar { display: none; }
	.cgpp-mov .cgpp-thumb { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 10px; }

	/* ---------- 2. la hoja que sube sobre la foto ---------- */
	.cgpp-mov .cgpp-summary {
		position: relative; z-index: 4;
		margin: -20px 0 0 !important;
		background: #fff; border-radius: 20px 20px 0 0;
		box-shadow: 0 -6px 20px rgba(15,23,42,.06);
		padding: 18px var(--mov-lado) 0 !important;
		border: 0 !important;
	}

	.cgpp-mov .cgpp-title { font-size: 22px !important; line-height: 1.25; margin: 0 0 10px; font-weight: 700; }

	.cgpp-mov .cgpp-price {
		font-size: 30px !important; font-weight: 800; letter-spacing: -.5px; margin: 12px 0 2px;
	}
	.cgpp-mov .cgpp-price small { font-size: 12px; font-weight: 500; color: #64748B; }

	.cgpp-mov .cgpp-hr { margin: 14px calc(var(--mov-lado) * -1); border: 0; border-top: 1px solid #E8EBF0; }

	.cgpp-mov .cgpp-meta { margin: 0 0 4px; }
	.cgpp-mov .cgpp-rating { margin: 6px 0 10px; }

	/* Las señales sociales las pone el plugin de addons (.cgsp-*). No se mueven
	   —son de otro plugin y las inyecta su propio JS—, solo se compactan: de
	   tarjetas apiladas a líneas de una sola altura. Mismo texto, mismos
	   números, misma cuenta que sube y baja sola. */
	.cgpp-mov .cgsp-viewers,
	.cgpp-mov .cgsp-bought {
		margin: 8px 0 !important; padding: 8px 11px !important;
		border-radius: 10px !important; font-size: 12.5px !important;
		background: #F1F4F8 !important; border: 0 !important;
	}
	.cgpp-mov .cgsp-bought {
		display: flex; gap: 6px 14px; flex-wrap: wrap; background: transparent !important;
		padding: 0 !important;
	}
	.cgpp-mov .cgsp-bought > span {
		background: #F1F4F8; border-radius: 99px; padding: 7px 12px; white-space: nowrap;
	}

	/* ---------- variantes ---------- */
	.cgpp-mov .cgpp-variants { margin: 14px 0 4px; }
	.cgpp-mov .cgpp-axis-label { width: 100%; min-width: 0; font-size: 13px; font-weight: 700; color: #64748B; margin-bottom: 6px; }
	.cgpp-mov .cgpp-opt { padding: 10px 14px; font-size: 14px; border-radius: 11px; }

	/* ---------- 3. barra de compra fija, ordenada ---------- */
	/* ---------- 3. cantidad y botones, dentro de la hoja ---------- */
	/* Ya no es una barra fija: tiene todo el ancho, como en el diseño. Los
	   botones dejaron de salir cortados porque dejaron de competir por 390px
	   con la caja de cantidad. */
	.cgpp-mov .cgpp-buy .cgpp-buy-row {
		position: static !important;
		display: flex !important; flex-direction: column; gap: 10px !important;
		margin: 14px 0 4px !important; padding: 0 !important;
		background: none !important; border: 0 !important; box-shadow: none !important;
	}
	.cgpp-mov .cgpp-buy .cgpp-qty-regla { order: 1; margin: 0 !important; font-size: 12.5px; }
	.cgpp-mov .cgpp-buy .cgpp-qty {
		order: 2; display: flex !important; align-items: center; justify-content: space-between;
		width: 100%; height: 52px; border: 1.5px solid #E8EBF0; border-radius: 12px; padding: 0 6px;
	}
	.cgpp-mov .cgpp-buy .cgpp-qty input { text-align: center; font-size: 17px; font-weight: 700; }
	/* En el diseño "Comprar ahora" va arriba y en contorno; "Agregar" abajo y
	   sólido. En el HTML vienen al revés, así que se ordenan acá. */
	.cgpp-mov .cgpp-buynow { order: 3; width: 100%; min-height: 52px; font-size: 16px; }
	.cgpp-mov .cgpp-atc    { order: 4; width: 100%; min-height: 52px; font-size: 16px; }

	/* ---------- 4. la lateral se vuelve filas de info ---------- */
	.cgpp-mov .cgpp-side {
		position: static !important; display: block !important;
		padding: 0 var(--mov-lado) !important; margin: 0 !important;
	}
	.cgpp-mov .cgpp-side > div {
		border: 0 !important; border-radius: 0 !important; padding: 0 !important;
		margin: 0 !important; background: transparent !important;
	}
	.cgpp-mov .cgpp-trust-i {
		display: flex; align-items: center; gap: 12px;
		padding: 15px 0; border-bottom: 1px solid #E8EBF0; margin: 0;
	}
	.cgpp-mov .cgpp-trust-i:last-child { border-bottom: 0; }

	/* La tarjeta del vendedor sí se queda como tarjeta: es la firma de quién
	   te está vendiendo, y en el diseño de referencia también lo es. */
	/* Ojo con la especificidad: la regla de arriba es .cgpp-side > div (0,3,0).
	   Escrita como .cgpp-seller (0,2,0) perdía aunque llevara !important. */
	.cgpp-mov .cgpp-side > .cgpp-seller {
		border: 1px solid #E8EBF0 !important; border-radius: 14px !important;
		padding: 13px !important; margin: 14px 0 !important;
	}

	/* ---------- bandas grises entre secciones ---------- */
	.cgpp-mov .cgpp-movbanda { height: 8px; background: #F1F4F8; margin: 16px 0; }

	/* ---------- 5. acordeones ---------- */
	.cgpp-mov .cgpp-movacc {
		border-bottom: 1px solid #E8EBF0; margin: 0 var(--mov-lado);
	}
	.cgpp-mov .cgpp-movacc > summary {
		list-style: none; display: flex; align-items: center; justify-content: space-between;
		padding: 17px 0; font-size: 16px; font-weight: 700; cursor: pointer;
	}
	.cgpp-mov .cgpp-movacc > summary::-webkit-details-marker { display: none; }
	.cgpp-mov .cgpp-movacc > summary::after { content: "+"; font-size: 22px; font-weight: 400; color: #64748B; }
	.cgpp-mov .cgpp-movacc[open] > summary::after { content: "\2013"; }
	.cgpp-mov .cgpp-movacc > .cgpp-movacc-b { padding: 0 0 16px; }

	/* Especificaciones ya movida al acordeón: sin su marco de antes. */
	.cgpp-mov .cgpp-galspec {
		border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
		background: transparent !important;
	}
	.cgpp-mov .cgpp-galspec-h { display: none; }   /* el título lo pone el <summary> */

	/*
	 * Las pestañas (Descripción, Reseñas, Envío…) ya se vuelven acordeón solas
	 * en teléfono, pero con otro tipo de letra, otro color y una flechita, y
	 * al lado del acordeón de Especificaciones parecían dos sitios distintos.
	 * Se les pone la misma ropa. No se toca su funcionamiento.
	 */
	.cgpp-mov .cgacc-head {
		display: flex !important; align-items: center; justify-content: space-between;
		width: 100%; padding: 17px var(--mov-lado) !important;
		font-size: 16px !important; font-weight: 700 !important;
		color: #0F172A !important; background: none !important;
		border: 0 !important; border-bottom: 1px solid #E8EBF0 !important;
		border-radius: 0 !important; text-align: left;
	}
	.cgpp-mov .cgacc-ico { color: #64748B; font-weight: 400; }
	.cgpp-mov .cgpp-panel { padding: 0 var(--mov-lado) 16px !important; }
	.cgpp-mov .cgpp-tabnav { display: none; }   /* en teléfono manda el acordeón */

	/* ---------- bandas grises entre secciones, sin tocar el HTML ---------- */
	.cgpp-mov .cgpp-side,
	.cgpp-mov .cgpp-tabs,
	.cgpp-mov .cgpp-movcola {
		border-top: 8px solid #F1F4F8;
		padding-top: 14px;
	}

	/* ---------- precio y existencias en la misma línea ---------- */
	.cgpp-mov .cgpp-movprecio {
		display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
	}
	.cgpp-mov .cgpp-movprecio .cgpp-price { margin: 0; }
	.cgpp-mov .cgpp-movprecio .cgpp-stocklbl {
		margin: 0 0 4px !important; font-size: 13.5px; font-weight: 700;
		color: #047857; white-space: nowrap;
	}

	/* ---------- controles flotando sobre la foto ---------- */
	/*
	 * Los botones de favoritos y comparar YA traen su SVG (un corazón y una
	 * balanza). Acá se los estaba arruinando: con `font-size:0` y un
	 * `::first-letter` a 17px, lo que se dibujaba era el nodo de texto suelto
	 * del botón —un glifo raro— en vez del icono. El icono siempre estuvo
	 * bien; la culpa era de este archivo.
	 *
	 * Ahora: el texto se calla de verdad (queda para el lector de pantalla,
	 * que lee el aria-label), y manda el SVG.
	 */
	.cgpp-mov .cgpp-stage { position: relative; }

	.cgpp-mov .cgpp-movfab,
	.cgpp-mov .cgpp-movfabs > *,
	.cgpp-mov .cgz-abrir {
		width: 46px !important; height: 46px !important; min-width: 0 !important;
		padding: 0 !important; border-radius: 50% !important;
		display: inline-flex !important; align-items: center; justify-content: center;
		background: rgba(255,255,255,.92) !important;
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
		border: 1px solid rgba(15,23,42,.06) !important;
		box-shadow: 0 4px 14px rgba(15,23,42,.14), 0 1px 2px rgba(15,23,42,.06) !important;
		color: #0F172A !important;
		transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		z-index: 3;
	}
	.cgpp-mov .cgpp-movfab:active,
	.cgpp-mov .cgpp-movfabs > *:active,
	.cgpp-mov .cgz-abrir:active {
		transform: scale(.92);
		box-shadow: 0 2px 8px rgba(15,23,42,.16) !important;
	}

	/* El texto del botón no se borra: se calla. El aria-label sigue ahí. */
	.cgpp-mov .cgpp-movfabs > * { font-size: 0 !important; line-height: 0; }
	.cgpp-mov .cgpp-movfabs > * svg,
	.cgpp-mov .cgz-abrir svg {
		width: 21px !important; height: 21px !important; display: block;
		stroke-width: 1.7; stroke: currentColor; fill: none;
	}

	/* Guardado / en comparación: el propio botón ya dice aria-pressed. */
	.cgpp-mov .cgpp-movfabs > .is-wish[aria-pressed="true"] {
		background: #E11D48 !important; color: #fff !important;
		border-color: #E11D48 !important;
		box-shadow: 0 6px 18px rgba(225,29,72,.34) !important;
	}
	.cgpp-mov .cgpp-movfabs > .is-wish[aria-pressed="true"] svg { fill: currentColor; }
	.cgpp-mov .cgpp-movfabs > .is-cmp[aria-pressed="true"] {
		background: #1E73BE !important; color: #fff !important;
		border-color: #1E73BE !important;
		box-shadow: 0 6px 18px rgba(30,115,190,.34) !important;
	}

	/* La flecha de volver es texto, no SVG: se le da su tamaño aparte. */
	.cgpp-mov .cgpp-movatras {
		position: absolute; top: 12px; left: 12px;
		font-size: 24px !important; line-height: 1; padding-bottom: 3px !important;
	}
	.cgpp-mov .cgpp-movfabs {
		position: absolute; right: 12px; bottom: 12px; z-index: 3;
		display: flex; flex-direction: column; gap: 10px;
	}
	.cgpp-mov .cgpp-movcuenta {
		position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
		background: rgba(15,23,42,.72); color: #fff; border-radius: 99px;
		padding: 4px 12px; font-size: 12px; font-weight: 600; z-index: 3;
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	}
	.cgpp-mov .cgz-abrir { bottom: 12px !important; left: 12px !important; right: auto !important; }

	/* ---------- contexto bajo el título ---------- */
	/*
	 * Categoría a la izquierda, estrellas a la derecha.
	 *
	 * El plugin de addons cuelga su pastilla de "N personas viendo" justo
	 * detrás de .cgpp-rating. Como ahora esa fila es la nuestra, la pastilla
	 * caía DENTRO y aplastaba las dos cosas. No se le discute el sitio: se
	 * deja que baje sola a su propio renglón.
	 */
	.cgpp-mov .cgpp-movmeta {
		display: flex; align-items: center; gap: 10px;
		flex-wrap: wrap; margin: 0 0 6px;
	}
	.cgpp-mov .cgpp-movmeta .cgpp-cats {
		margin: 0; font-size: 14px; color: #64748B; flex: 0 1 auto; min-width: 0;
	}
	/* "Categorías:" sobra cuando ya se lee la categoría. */
	.cgpp-mov .cgpp-movmeta .cgpp-cats > span:first-child { display: none; }
	.cgpp-mov .cgpp-movmeta .cgpp-cats::before { content: "en "; }
	.cgpp-mov .cgpp-movmeta .cgpp-rating {
		margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
	}
	.cgpp-mov .cgpp-movmeta > .cgsp-viewers { flex: 1 0 100%; margin: 6px 0 0 !important; }
	.cgpp-mov .cgpp-movvend { margin: 0 0 8px; }
	.cgpp-mov .cgpp-movsku { margin: 2px 0 0; }
	.cgpp-mov .cgpp-movsku .cgpp-sku { margin: 0; font-size: 12.5px; color: #94A3B8; }
	/* Al sacar categoría y SKU de .cgpp-meta, ahí quedaba solo el logo del
	   vendedor dentro de una caja enorme y vacía. Se junta con la marca en
	   una sola línea. Sigue enlazando a la tienda igual. */
	.cgpp-mov .cgpp-brand { display: inline-flex; align-items: center; margin: 0; vertical-align: middle; }
	.cgpp-mov .cgpp-meta {
		display: inline-flex !important; align-items: center; vertical-align: middle;
		margin: 0 0 0 8px !important; padding: 0 !important; border: 0 !important;
	}
	.cgpp-mov .cgpp-vendor { width: 38px !important; height: 38px !important; flex: none; }
	.cgpp-mov .cgpp-meta-text:empty { display: none; }

	/* ---------- barra de abajo (llama al botón de verdad) ---------- */
	.cgpp-movbarra {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
		background: #fff; border-top: 1px solid #E8EBF0;
		padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
		display: flex; gap: 10px;
		transform: translateY(102%); transition: transform .2s ease;
	}
	.cgpp-movbarra.on { transform: none; }
	.cgpp-movbtn {
		flex: 1; min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 700;
		border: 2px solid #1E73BE; white-space: nowrap; padding: 0 8px;
	}
	.cgpp-movbtn-pri { background: #1E73BE; color: #fff; flex: 1.35; }
	.cgpp-movbtn-alt { background: #fff; color: #1E73BE; }

	/* ---------- 6. barra superior al hacer scroll ---------- */
	.cgpp-movtop {
		position: fixed; top: 0; left: 0; right: 0; z-index: 59;
		background: #fff; border-bottom: 1px solid #E8EBF0;
		display: flex; align-items: center; gap: 12px; padding: 9px 12px;
		transform: translateY(-102%); transition: transform .2s ease;
	}
	.cgpp-movtop.on { transform: none; }
	.cgpp-movtop .t { flex: 1; min-width: 0; }
	.cgpp-movtop .t .n { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.cgpp-movtop .t .p { font-size: 14px; font-weight: 800; }
	.cgpp-movtop button { background: none; border: 0; font-size: 20px; line-height: 1; color: #0F172A; padding: 4px 6px; }

	/* Con la barra de admin de WordPress arriba, correrla para no taparla. */
	.admin-bar .cgpp-movtop { top: 46px; }

	@media (prefers-reduced-motion: reduce) {
		.cgpp-movtop { transition: none; }
	}
}

/* Por encima de 760px no debe quedar ni rastro. */
@media (min-width: 761px) {
	.cgpp-movtop, .cgpp-movbanda { display: none !important; }
}