/* BackiPhone - Mejoras de la tienda */

/* ---- Fotos en WebP --------------------------------------------------------------------------
   Las fotos van envueltas en <picture> para poder ofrecer la copia ligera (inc/webp.php). Sin esto,
   <picture> monta una caja propia por el medio: la tarjeta le daba el ancho al <picture> y la foto,
   que mide "el 100 % de su padre", se quedaba en 0 — tarjetas vacías y fotos deformadas. Con
   `display: contents` el <picture> no pinta caja y la foto queda donde estaba a efectos de diseño,
   así que todo el CSS de las tarjetas sigue valiendo igual. */
picture {
	display: contents;
}

/* ---- Avisos de WooCommerce ------------------------------------------------------------------
   El bloque de avisos no viene en el HTML: lo crea el JavaScript al arrancar, y aunque no tenga
   ningún aviso ocupa 50 px. Al aparecer empujaba la ficha entera hacia abajo (era casi todo el
   salto de diseño de la ficha). Mientras su caja esté vacía no ocupa; en cuanto WooCommerce mete
   un aviso dentro —«añadido al carrito», un error— deja de estarlo y se ve con su separación. */
.wp-block-woocommerce-store-notices:has(.woocommerce-notices-wrapper:empty) {
	display: none;
}

/* ---- Carrito vacío --------------------------------------------------------------------------
   Cuando el carrito está vacío, WooCommerce enseña su rejilla de «Nuevo en la tienda» y la encoge
   al 75 %: en el móvil los nombres, los precios y los botones se quedaban en 10,7 px, que no se
   leen. Que usen el tamaño de su alrededor. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product .wp-block-button__link {
	font-size: 14px;
}

/* ---- Precio de lanzamiento y ahorro -------------------------------------------------------
   Va dentro del precio de WooCommerce, que cada zona (tarjetas, carrusel, ficha) pinta con su
   propio tamaño y color: la línea de lanzamiento y la etiqueta de ahorro fijan los suyos. */
.bp-precio {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	max-width: 100%;
}

.bp-precio .bp-precio__lanzamiento {
	display: block;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	color: #64748b !important;
	white-space: normal;
}

.bp-precio .bp-precio__actual {
	display: block;
	line-height: 1.1;
}

.bp-precio .bp-precio__ahorro {
	display: inline-block; /* inline-flex se come el espacio de "Ahorras 394 €" */
	padding: 3px 10px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
}

/* El importe dentro de las dos líneas pequeñas no hereda el tamaño grande del precio. */
.bp-precio .bp-precio__lanzamiento .woocommerce-Price-amount,
.bp-precio .bp-precio__lanzamiento bdi,
.bp-precio .bp-precio__ahorro .woocommerce-Price-amount,
.bp-precio .bp-precio__ahorro bdi {
	font: inherit !important;
	color: inherit !important;
	letter-spacing: inherit !important;
}

/* En la ficha de producto el precio es más grande: la línea de lanzamiento también. */
.single-product .bp-precio .bp-precio__lanzamiento,
.single-product .bp-precio .bp-precio__ahorro {
	font-size: 14px !important;
}
.single-product .related .bp-precio .bp-precio__lanzamiento,
.single-product .related .bp-precio .bp-precio__ahorro,
.single-product .wc-block-product-template .bp-precio .bp-precio__lanzamiento,
.single-product .wc-block-product-template .bp-precio .bp-precio__ahorro {
	font-size: 13px !important;
}

/* ---- Ficha: selector de capacidad y batería -----------------------------------------------
   Va dentro del bloque de compra oscuro del tema: textos claros y acento verde del botón. */
.bp-config {
	display: grid;
	gap: 14px;
	margin: 0 0 16px;
}

.bp-config__titulo {
	margin: 0 0 8px;
	font-size: 0.94rem;
	font-weight: 700;
	color: #0f172a;
}

.bp-config__opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bp-config__opcion {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 84px;
	padding: 8px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 14px;
	background: #fff;
	color: #0f172a;
	text-decoration: none !important;
	line-height: 1.25;
	transition: border-color 0.15s ease, background 0.15s ease;
}

a.bp-config__opcion:hover,
a.bp-config__opcion:focus-visible {
	border-color: #64748b;
	background: #f8fafc;
	color: #0f172a;
}

.bp-config__opcion.is-actual {
	border: 2px solid #4ebf74;
	padding: 7px 11px;
	background: #f0fdf4;
}

.bp-config__opcion.is-agotada {
	border-style: dashed;
	background: #f8fafc;
	color: #94a3b8;
	cursor: not-allowed;
}

.bp-config__nombre {
	font-size: 0.95rem;
	font-weight: 700;
}

.bp-config__precio {
	font-size: 0.8rem;
	color: #64748b;
}

/* ---- Ficha: garantía, envío, devolución, pago y Klarna bajo el botón --------------------- */
.bp-confianza {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	flex-basis: 100%;
}

.bp-confianza__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.85rem;
	color: #334155;
}

.bp-confianza__item .bp-icono {
	flex: none;
	color: #16a34a;
}

/* ---- Ficha: desplegables en lugar de pestañas --------------------------------------------- */
.bp-desplegables {
	display: grid;
	gap: 10px;
}

.bp-desplegable {
	border: 1px solid rgba(148, 163, 184, 0.24);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
}

.bp-desplegable > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	font-weight: 700;
	color: #0f172a;
	cursor: pointer;
	list-style: none;
}

.bp-desplegable > summary::-webkit-details-marker {
	display: none;
}

.bp-desplegable > summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-3px);
	transition: transform 0.2s ease;
}

.bp-desplegable[open] > summary::after {
	transform: rotate(-135deg) translateY(-3px);
}

.bp-desplegable__contenido {
	padding: 0 20px 18px;
	color: #334155;
	line-height: 1.6;
}

.bp-desplegable__contenido > :first-child {
	margin-top: 0;
}

/* «Qué recibes y qué comprobamos» (tanda 2): dos subtítulos y la lista de lo que se comprueba. */
.bp-desplegable__subtitulo {
	margin: 16px 0 4px;
	font-weight: 700;
	color: #0f172a;
}

.bp-desplegable__subtitulo + p {
	margin-top: 0;
}

.bp-desplegable__lista {
	margin: 0;
	padding-left: 1.2em;
}

.bp-desplegable__lista li {
	margin: 4px 0;
}

.bp-config__agotado {
	margin: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fef3c7;
	color: #92400e;
	font-size: 0.9rem;
	font-weight: 600;
}

.bp-config__nota {
	margin: -4px 0 0;
	font-size: 0.85rem;
	color: #15803d;
}

.bp-confianza__item a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit !important;
	text-decoration: none !important;
}

.bp-confianza__item a:hover span,
.bp-confianza__item a:focus-visible span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bp-desplegable {
	scroll-margin-top: 90px;
}

/* ---- Carrito sencillo (mejora 5) ----------------------------------------------------------- */
/* La descripción larga del producto no aporta en el carrito: capacidad, color y batería ya van en
   la línea. */
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
	display: none;
}

.bp-carrito-confianza {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: #475569;
	text-align: center;
}

.bp-carrito-confianza .bp-icono {
	flex: none;
	color: #16a34a;
}

/* ---- Sugerencias de otros modelos en la ficha ---------------------------------------------- */
#bp-sugerencias {
	scroll-margin-top: 90px;
}

/* ---- Móvil: barra fija de compra (mejora 7) ----------------------------------------------- */
.bp-barra-compra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(12px);
}

.bp-barra-compra[hidden] {
	display: none;
}

.bp-barra-compra__boton {
	display: block;
	width: 100%;
	min-height: 50px;
	border: 0;
	border-radius: 999px;
	background: #4ebf74; /* el mismo verde que el botón de la ficha */
	color: #fff;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(78, 191, 116, 0.3);
}

/* Que la barra no tape el final de la página. */
body.bp-con-barra-compra {
	padding-bottom: 76px;
}

/* ---- Home (mejora 9) ---------------------------------------------------------------------- */
.bp-home-confianza,
.bp-home-seccion {
	box-sizing: border-box;
	width: min(1170px, calc(100% - 32px));
	margin: 24px auto 0;
}

/* En rejilla, cada casilla medía lo mismo y las frases se partían por donde caía ("12 meses de /
   garantía", "Envío gratis en 24/48 / h"). En fila, cada una ocupa lo que mide: en escritorio caben
   las cinco de una línea, y si no caben salta la frase entera, no una palabra suelta. */
.bp-home-confianza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 18px;
	padding: 16px 18px;
	list-style: none;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.bp-home-confianza li {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	margin: 0;
	font-weight: 600;
	color: #0f172a;
	text-wrap: balance;
}

.bp-home-confianza .bp-icono {
	flex: none;
	color: #16a34a;
}

.bp-home-seccion {
	padding: 28px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

.bp-home-seccion h2 {
	margin: 0 0 18px;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.15;
	color: #0f172a;
}

.bp-home-seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
}

.bp-enlace {
	font-weight: 700;
	color: #15803d !important;
	text-decoration: none !important;
}

.bp-destacados__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.bp-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 22px;
	background: #f8faf9;
}

.bp-card__imagen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 16px;
	background: #fff;
}

.bp-card__titulo {
	margin: 4px 0 0;
	font-size: 1.1rem;
}

.bp-card__titulo a {
	color: #0f172a !important;
	text-decoration: none !important;
}

.bp-card__detalle {
	margin: 0;
	font-size: 0.85rem;
	color: #475569;
}

.bp-card__precio {
	flex: 1;
	font-size: 1.6rem;
	font-weight: 800;
	color: #15803d;
}

.bp-card__boton {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	background: #0f172a;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.bp-comparativa {
	background: linear-gradient(140deg, #0f172a 0%, #152237 60%, #194a35 100%);
	color: #e2e8f0;
}

.bp-comparativa h2 {
	color: #fff;
}

.bp-comparativa__fila {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: stretch;
	gap: 14px;
}

.bp-comparativa__caja {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
}

.bp-comparativa__caja strong {
	margin-top: 6px;
	font-size: 2rem;
	line-height: 1;
	color: #fff;
}

.bp-comparativa__caja--nuevo strong {
	color: #cbd5e1;
}

.bp-comparativa__caja--backi {
	border: 2px solid #4ade80;
}

.bp-comparativa__quien {
	font-weight: 800;
	color: #fff;
}

.bp-comparativa__nota {
	font-size: 0.85rem;
	color: #94a3b8;
}

.bp-comparativa__ahorro {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 22px;
	border-radius: 20px;
	background: #4ade80;
	color: #052e16;
	font-size: 1.3rem;
	font-weight: 800;
	text-align: center;
}

.bp-comparativa__puntos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 18px 0;
	padding: 0;
	list-style: none;
}

.bp-comparativa__puntos li::before {
	content: "✓ ";
	color: #4ade80;
	font-weight: 800;
}

.bp-comparativa .bp-card__boton {
	background: #fff;
	color: #0f172a !important;
}

.bp-encuentra__grupo + .bp-encuentra__grupo {
	margin-top: 18px;
}

.bp-encuentra h3 {
	margin: 0 0 10px;
	font-size: 1rem;
	color: #475569;
}

.bp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 999px;
	background: #fff;
	color: #0f172a !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.bp-chip:hover,
.bp-chip:focus-visible {
	border-color: #16a34a;
	background: #f0fdf4;
}

.bp-chip__cuenta {
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcfce7;
	color: #166534;
	font-size: 0.8rem;
}

@media (max-width: 700px) {
	.bp-home-seccion {
		padding: 20px 16px;
		border-radius: 22px;
	}

	.bp-comparativa__fila {
		grid-template-columns: 1fr 1fr;
	}

	.bp-comparativa__ahorro {
		grid-column: 1 / -1;
	}

	.bp-comparativa__caja strong {
		font-size: 1.5rem;
	}

	.bp-destacados__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.bp-card {
		padding: 10px;
	}

	.bp-card__precio {
		font-size: 1.15rem;
	}
}

.bp-destacados__tienda {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: fit-content;
	min-width: min(320px, 100%);
	margin: 22px auto 0;
	padding: 14px 28px;
	font-size: 1.05rem;
}

/* ---- Buscador de la cabecera -------------------------------------------------------------- */
.bp-buscador-cabecera {
	display: flex;
	align-items: center;
	flex: 0 1 560px;
	gap: 6px;
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--20, 12px) 0 0 8px;
	padding: 4px 4px 4px 18px;
	border: 1px solid rgba(78, 191, 116, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.bp-buscador-cabecera:focus-within {
	border-color: rgba(78, 191, 116, 0.7);
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1), 0 0 0 5px rgba(78, 191, 116, 0.14);
}

.bp-buscador-cabecera input {
	flex: 1;
	min-width: 0;
	min-height: 36px;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	color: #0f172a;
}

.bp-buscador-cabecera input::placeholder {
	color: #6b7280;
	opacity: 1;
}

.bp-buscador-cabecera button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
	cursor: pointer;
}

/* La tienda ya tiene su buscador en vivo en ese sitio (la Home también lleva apple-shop-page). */
body:has(.apple-shop-search-dock) .bp-buscador-cabecera {
	display: none;
}

@media (max-width: 781px) {
	header.wp-block-template-part:has(.bp-buscador-cabecera) {
		flex-wrap: wrap;
	}

	.bp-buscador-cabecera {
		order: 10;
		flex: 1 1 100%;
		margin: 10px 16px 12px;
	}
}

/* ---- Menú principal (mejora 19) ----------------------------------------------------------- */
header.wp-block-template-part:has(.bp-menu) {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bp-menu {
	position: relative;
	z-index: 1000;
	margin-top: var(--wp--preset--spacing--20, 12px);
}

.bp-menu__desplegable > summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
	color: #0f172a;
	cursor: pointer;
	list-style: none;
}

.bp-menu__desplegable > summary::-webkit-details-marker {
	display: none;
}

.bp-menu__icono {
	width: 18px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.bp-menu__desplegable[open] > summary {
	background: #0f172a;
	color: #fff;
}

.bp-menu__lista {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.bp-menu__lista a {
	display: block;
	padding: 11px 14px;
	border-radius: 12px;
	color: #0f172a !important;
	font-weight: 600;
	text-decoration: none !important;
}

@media (max-width: 781px) {
	/* El logo trae un margen derecho grande: el botón se pega a él para no pisar el buscador flotante. */
	.bp-menu {
		margin-left: calc(-6px - var(--wp--preset--spacing--30, 24px));
	}

	.bp-menu__desplegable > summary {
		width: 38px;
		height: 38px;
	}

	.bp-menu__lista {
		position: fixed;
		top: 76px;
		left: 16px;
		right: 16px;
		min-width: 0;
	}
}

.bp-menu__lista a:hover,
.bp-menu__lista a:focus-visible,
.bp-menu__lista a[aria-current="page"] {
	background: #f0fdf4;
	color: #15803d !important;
}

/* ---- Comparador de modelos (mejora 14) ---------------------------------------------------- */
.bp-comparador__elegir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.bp-comparador__elegir select {
	flex: 1 1 200px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid rgba(148, 163, 184, 0.45);
	border-radius: 14px;
	background: #fff;
	font: inherit;
	font-weight: 700;
}

.bp-comparador__elegir span {
	font-weight: 800;
	color: #64748b;
}

.bp-comparador__elegir button {
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bp-comparador__tabla {
	overflow-x: auto;
}

.bp-comparador table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.bp-comparador th,
.bp-comparador td {
	padding: 12px 10px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.25);
	vertical-align: top;
	text-align: left;
}

.bp-comparador thead th {
	font-size: 1.1rem;
	color: #0f172a;
}

.bp-comparador tbody th {
	width: 28%;
	color: #475569;
	font-weight: 700;
}

/* La capacidad bajo el precio: <small> se queda en 11,7 px en el móvil y Google avisa por debajo
   de 12. */
.bp-comparador small {
	font-size: 13px;
}

/* La foto de cada modelo, encima de su nombre en la cabecera de la tabla. */
.bp-comparador__foto {
	display: block;
	margin: 0 auto 10px;
	max-width: 170px;
	padding: 10px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(248, 250, 249, 0.95), rgba(236, 242, 238, 0.9));
}

.bp-comparador__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.bp-comparador__modelo {
	display: block;
}

@media (max-width: 700px) {
	.bp-comparador__foto {
		max-width: 110px;
		padding: 6px;
		border-radius: 14px;
	}
}

.bp-comparador__ahorro {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-weight: 800;
}

/* «En pocas palabras»: las diferencias explicadas para quien no sabe de móviles, encima de la
   tabla, que es lo primero que se lee. */
.bp-comparador__pocas {
	margin: 22px 0 26px;
	padding: 22px;
	border-radius: 22px;
	background: linear-gradient(160deg, #f0fdf4 0%, #f8fafc 100%);
	border: 1px solid #dcfce7;
}

.bp-comparador__pocas h2 {
	margin: 0 0 6px;
	font-size: 1.3rem;
}

.bp-comparador__resumen-frase {
	margin: 0 0 16px;
	font-size: 1.05rem;
	font-weight: 600;
	color: #0f172a;
}

.bp-comparador__veredictos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.bp-comparador__veredicto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.bp-comparador__etiqueta {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bp-comparador__quien {
	font-size: 1.1rem;
	color: #0f172a;
}

.bp-comparador__veredicto p {
	margin: 0;
	line-height: 1.55;
	color: #334155;
}

@media (max-width: 700px) {
	.bp-comparador__pocas {
		padding: 16px;
	}

	.bp-comparador__veredictos {
		grid-template-columns: 1fr;
	}
}

.bp-comparador__nota {
	margin: 14px 0 0;
	font-size: 0.8rem;
	color: #64748b;
}

.bp-sugerencias__comparar {
	display: inline-block;
	margin: -6px 0 16px;
}

@media (max-width: 700px) {
	.bp-comparador th,
	.bp-comparador td {
		padding: 10px 6px;
		font-size: 0.88rem;
	}
}

.bp-comparador__titulo {
	margin: 0 0 6px;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	line-height: 1.1;
	color: #0f172a;
}

.bp-comparador__intro {
	margin: 0 0 20px;
	color: #475569;
}

@media (max-width: 700px) {
	.bp-comparador .bp-card__boton {
		min-height: 38px;
		padding: 0 12px;
		font-size: 0.85rem;
	}
}

/* En la página de preguntas, al ancho de su portada y sus preguntas. */
.apple-faq-shell .bp-reacondicionado {
	width: min(960px, calc(100% - 32px));
}

.bp-reacondicionado__intro {
	margin: -6px 0 18px;
	color: #475569;
}

.bp-reacondicionado__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}

.bp-reacondicionado__tarjeta {
	padding: 18px;
	border-radius: 20px;
	background: #f0fdf4;
}

.bp-reacondicionado__tarjeta h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	color: #14532d;
}

.bp-reacondicionado__tarjeta p {
	margin: 0;
	color: #334155;
	line-height: 1.55;
}

/* ---- Opiniones verificadas (mejora 10) ---------------------------------------------------- */
.bp-estrellas {
	color: #f59e0b;
	letter-spacing: 1px;
}

.bp-estrellas__texto {
	font-size: 0.85rem;
	color: #475569;
}

.bp-opiniones__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-opinion {
	padding: 14px 0;
	border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.bp-opinion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 6px;
}

.bp-opinion__cabecera time {
	font-size: 0.85rem;
	color: #64748b;
}

.bp-opinion__verificada {
	padding: 2px 8px;
	border-radius: 999px;
	background: #dcfce7;
	color: #166534;
	font-size: 0.78rem;
	font-weight: 700;
}

.bp-opiniones__aviso {
	color: #475569;
}

/* ---- Páginas de la marca: Cómo trabajamos, Contacto, Mi cuenta ---------------------------- */
body.bp-pagina-marca {
	background:
		radial-gradient(circle at top left, rgba(198, 230, 219, 0.55), transparent 34%),
		radial-gradient(circle at top right, rgba(209, 226, 255, 0.42), transparent 28%),
		linear-gradient(180deg, #f7faf7 0%, #eef3ee 100%) !important;
}

body.bp-pagina-marca main,
body.bp-pagina-marca .wp-block-post-content {
	background: transparent;
}

.bp-pagina > * {
	box-sizing: border-box;
	width: min(960px, calc(100% - 32px)) !important;
	max-width: none !important;
	margin: 22px auto 0 !important;
}

.bp-pagina > .bp-pagina__hero {
	margin-top: 0 !important;
	padding: clamp(30px, 4vw, 48px);
}

.bp-pagina__hero h1,
.bp-pagina__hero p {
	max-width: 40rem;
}

.bp-pagina__cierre {
	padding: clamp(36px, 5vw, 52px) 24px;
}

.bp-pagina__cierre .apple-hero-actions {
	justify-content: center;
	margin-top: 0;
}

.bp-pasos__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-paso {
	margin: 0;
	padding: 22px;
	border-radius: 20px;
	background: #f0fdf4;
}

.bp-paso__numero {
	display: block;
	margin-bottom: 8px;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
	color: #4ebf74;
}

.bp-paso h3 {
	margin: 0 0 6px;
	font-size: 1.1rem;
	color: #0f172a;
}

.bp-paso p {
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.bp-distribuidores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
}

.bp-distribuidores > div {
	flex: 1 1 360px;
}

.bp-distribuidores h2 {
	margin-bottom: 8px;
}

.bp-distribuidores p {
	margin: 0;
	color: #475569;
}

/* Contacto */
.bp-pagina > .bp-contacto {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}

.bp-contacto > * {
	width: auto;
	margin: 0;
}

.bp-contacto__otras {
	display: grid;
	gap: 12px;
}

.bp-contacto__via {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
	color: #0f172a !important;
	text-decoration: none !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bp-contacto__via:hover,
.bp-contacto__via:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1), 0 0 0 2px rgba(78, 191, 116, 0.5);
}

.bp-contacto__icono {
	flex: none;
	padding: 10px;
	border-radius: 14px;
	background: #f0fdf4;
	color: #16a34a;
}

.bp-contacto__via span {
	display: grid;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
	color: #475569;
}

.bp-contacto__via strong {
	color: #0f172a;
}

.bp-contacto__nota {
	padding: 16px 20px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.7);
	color: #475569;
	line-height: 1.55;
}

.bp-contacto__nota strong {
	color: #0f172a;
}

.bp-contacto__otras .bp-enlace {
	padding: 4px 20px;
}

/* Formularios (WPForms en Contacto, acceso de WooCommerce en Mi cuenta) con el aspecto de la tienda */
.bp-pagina .wpforms-container {
	margin: 0 !important;
}

.bp-pagina .wpforms-field {
	padding: 0 0 14px !important;
}

.bp-pagina .wpforms-field-label,
.bp-pagina .woocommerce-form label {
	margin-bottom: 6px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

.bp-pagina .wpforms-field input,
.bp-pagina .wpforms-field textarea,
.bp-pagina .woocommerce-form input.input-text {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	min-height: 48px;
	padding: 10px 16px !important;
	border: 1px solid rgba(148, 163, 184, 0.45) !important;
	border-radius: 14px !important;
	background: #fff !important;
	font: inherit;
	color: #0f172a;
}

.bp-pagina .wpforms-field textarea {
	min-height: 150px;
}

.bp-pagina .wpforms-field input:focus,
.bp-pagina .wpforms-field textarea:focus,
.bp-pagina .woocommerce-form input.input-text:focus {
	border-color: #4ebf74 !important;
	outline: 0;
	box-shadow: 0 0 0 4px rgba(78, 191, 116, 0.16) !important;
}

.bp-pagina .wpforms-submit,
.bp-pagina .woocommerce-form button[type="submit"] {
	min-height: 48px;
	padding: 12px 28px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #4ebf74 !important;
	color: #fff !important;
	font: inherit;
	font-weight: 700 !important;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(78, 191, 116, 0.28);
}

.bp-pagina .wpforms-submit:hover,
.bp-pagina .woocommerce-form button[type="submit"]:hover {
	background: #43a967 !important;
}

.bp-pagina .wpforms-confirmation-container {
	margin: 0;
	padding: 16px 18px;
	border: 0;
	border-radius: 16px;
	background: #f0fdf4;
	color: #166534;
	font-weight: 600;
}

.bp-pagina .wpforms-confirmation-container p {
	margin: 0;
}

/* Mi cuenta */
.bp-pagina__tarjeta {
	padding: clamp(22px, 4vw, 36px);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

/* Mi cuenta llega con su envoltorio de contenido, que trae margen interior propio. */
.bp-pagina__tarjeta > .wp-block-post-content {
	padding: 0 !important;
}

.bp-pagina__tarjeta .woocommerce {
	max-width: none !important;
	margin: 0 !important;
}

.bp-pagina__tarjeta .woocommerce-form-login {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.bp-pagina__tarjeta h2 {
	margin-top: 0;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

@media (max-width: 781px) {
	.bp-pagina > .bp-contacto {
		grid-template-columns: 1fr;
	}

	.bp-pasos__lista {
		grid-template-columns: 1fr;
	}

	.bp-pagina__hero h1 {
		max-width: none;
	}
}

/* ---- Páginas legales ---------------------------------------------------------------------- */
.bp-legal {
	color: #334155;
	line-height: 1.7;
}

.bp-legal > :first-child {
	margin-top: 0;
}

.bp-legal h2 {
	margin: 34px 0 12px;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	line-height: 1.25;
	color: #0f172a;
}

.bp-legal h3 {
	margin: 24px 0 10px;
	font-size: 1.05rem;
	color: #0f172a;
}

.bp-legal p,
.bp-legal ul,
.bp-legal ol {
	margin: 0 0 14px;
}

.bp-legal ul,
.bp-legal ol {
	padding-left: 1.3em;
}

.bp-legal li + li {
	margin-top: 6px;
}

.bp-legal a {
	color: #15803d;
	font-weight: 600;
}

.bp-legal table {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.93rem;
}

.bp-legal th,
.bp-legal td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.25);
	text-align: left;
	vertical-align: top;
}

.bp-legal th {
	background: #f0fdf4;
	color: #0f172a;
	white-space: nowrap;
}

.bp-legal__formulario {
	list-style: none;
	padding: 16px 20px !important;
	border-radius: 16px;
	background: #f8fafc;
}

@media (max-width: 700px) {
	/* Tablas legales como fichas: cada fila un bloque, con la columna delante de cada dato. */
	.bp-legal table,
	.bp-legal tbody,
	.bp-legal tr,
	.bp-legal td {
		display: block;
		width: auto;
	}

	.bp-legal thead {
		display: none;
	}

	.bp-legal tr {
		margin-bottom: 10px;
		padding: 12px 14px;
		border-radius: 14px;
		background: #f8fafc;
	}

	.bp-legal td {
		padding: 3px 0;
		border: 0;
	}

	.bp-legal td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #15803d;
	}
}

/* ---- Aviso de cookies --------------------------------------------------------------------- */
.bp-cookies {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 100000;
	box-sizing: border-box;
	width: min(460px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 20px 22px;
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
	color: #334155;
	font-size: 0.93rem;
	line-height: 1.55;
}

.bp-cookies[hidden] {
	display: none;
}

.bp-cookies__titulo {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 800;
	color: #0f172a;
}

.bp-cookies__texto {
	margin: 0 0 14px;
}

.bp-cookies__texto a {
	color: #15803d;
	font-weight: 700;
}

.bp-cookies__opciones {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
}

.bp-cookies__opciones[hidden] {
	display: none;
}

.bp-cookies__categoria {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 14px;
	background: #f8fafc;
	cursor: pointer;
}

.bp-cookies__categoria input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #4ebf74;
}

.bp-cookies__categoria span {
	display: grid;
	gap: 2px;
}

.bp-cookies__categoria strong {
	color: #0f172a;
}

.bp-cookies__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bp-cookies__boton {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	background: #fff;
	color: #0f172a;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bp-cookies__boton[hidden] {
	display: none;
}

.bp-cookies__boton--aceptar {
	border-color: #4ebf74;
	background: #4ebf74;
	color: #fff;
}

.bp-cookies__boton:hover {
	border-color: #4ebf74;
}

.bp-cookies__boton--aceptar:hover {
	background: #43a967;
}

.bp-cookies__boton:focus-visible,
.bp-cookies__categoria:focus-within {
	outline: 3px solid rgba(78, 191, 116, 0.45);
	outline-offset: 2px;
}

/* ---- Páginas de categoría (taxonomy-product_cat) ------------------------------------------- */
.bp-categoria-pagina {
	box-sizing: border-box;
	width: min(1170px, calc(100% - 32px));
	margin: 0 auto 48px;
	padding-top: 24px;
}

.bp-categoria {
	margin: 0 0 24px;
}

.bp-categoria__titulo {
	margin: 0 0 10px;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.bp-categoria__texto {
	max-width: 62ch;
	margin: 0;
	color: #475569;
	line-height: 1.6;
}

.bp-categoria__descripcion {
	max-width: 62ch;
	color: #475569;
}

/* Tarjetas del listado: mismo aire que las de la Home. */
.bp-categoria-pagina .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-categoria-pagina .wc-block-product-template > li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 14px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

.bp-categoria-pagina .wc-block-components-product-image {
	margin: 0;
}

.bp-categoria-pagina .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 16px;
	background: #f8fafc;
}

.bp-categoria-pagina .wp-block-post-title {
	margin: 0;
	font-size: 1.05rem !important;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.bp-categoria-pagina .wp-block-post-title a {
	color: #0f172a;
	text-decoration: none;
}

.bp-categoria-pagina .apple-product-specs {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
	color: #475569;
}

.bp-categoria-pagina .apple-product-specs li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
}

.bp-categoria-pagina .wc-block-components-product-price {
	margin-top: auto;
	font-size: 1.2rem;
	font-weight: 800;
	color: #15803d;
}

.bp-categoria-pagina .wc-block-components-product-button {
	margin: 0;
}

.bp-categoria-pagina .wc-block-components-product-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

.bp-categoria-pagina .wc-block-components-product-button .wp-block-button__link:hover {
	background: #1e293b;
}

.bp-categoria__pie {
	margin-top: 32px;
}

.bp-categoria__pie .apple-hero-actions {
	justify-content: center;
	margin-top: 0;
}

.bp-categoria-pagina .wp-block-query-pagination {
	margin-top: 28px;
}

@media (max-width: 700px) {
	.bp-categoria-pagina .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
	}

	.bp-categoria-pagina .wc-block-product-template > li {
		padding: 10px;
	}
}

/* La categoría trae su propio listado: el panel de filtros del tema sobra (y lo monta JavaScript). */
body:has(.bp-categoria-pagina) .apple-shop-controls,
body:has(.bp-categoria-pagina) .apple-filter-shell,
body:has(.bp-categoria-pagina) [data-product-filters],
body:has(.bp-categoria-pagina) .apple-shop-filter-toggle,
body:has(.bp-categoria-pagina) .apple-shop-sidebar-toggle {
	display: none !important;
}

body:has(.bp-categoria-pagina) .wp-block-post-content,
body:has(.bp-categoria-pagina) .entry-content {
	display: block !important;
}

/* ---- Páginas de garantía y batería --------------------------------------------------------- */
.bp-garantia__columnas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.bp-garantia__columna {
	padding: 20px 22px;
	border-radius: 20px;
	background: #f8fafc;
}

.bp-garantia__columna--si {
	background: #f0fdf4;
}

.bp-garantia__columna h3 {
	margin: 0 0 12px;
	font-size: 1.05rem;
	color: #0f172a;
}

.bp-garantia__columna ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-garantia__columna li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 24px;
	color: #475569;
	line-height: 1.55;
}

.bp-garantia__columna li::before {
	content: "✕";
	position: absolute;
	left: 0;
	font-weight: 800;
	color: #94a3b8;
}

.bp-garantia__columna--si li::before {
	content: "✓";
	color: #16a34a;
}

/* Comparar dos opciones válidas (batería nueva o revisada): ninguna es un inconveniente. */
.bp-garantia__columna--neutra li::before {
	content: "•";
	color: #16a34a;
}

/* ---- Entrada de la tienda: elegir generación ---------------------------------------------- */
.bp-generacion {
	box-sizing: border-box;
	width: min(1170px, calc(100% - 32px));
	margin: 0 auto 28px;
	padding: 28px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

/* La tarjeta va centrada en su hueco. Mientras el navegador lee el HTML aún es corta, y quedaba
   280 px más abajo; al completarse subía de golpe (0,29 de salto de diseño en móvil). Con esta
   altura, algo menor que la real en cada tramo, nace ya en su sitio y su tamaño final no cambia. */
.bp-generacion--entrada {
	min-height: 460px;
}

@media (max-width: 700px) {
	.bp-generacion--entrada {
		min-height: 555px;
	}
}

@media (min-width: 1100px) {
	.bp-generacion--entrada {
		min-height: 530px;
	}
}

/* Con listado, esto es solo el titular de la página: la tienda de siempre, con su barra de filtros
   a la izquierda. Sin tarjeta blanca ni cuadrados, que tapaban el catálogo. */
.bp-generacion--generacion,
.bp-generacion--todo {
	width: auto;
	margin: 0 0 18px;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bp-generacion--generacion .bp-generacion__titulo,
.bp-generacion--todo .bp-generacion__titulo {
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
}

.bp-generacion--generacion .bp-generacion__texto,
.bp-generacion--todo .bp-generacion__texto {
	margin-bottom: 14px;
}

.bp-generacion--generacion .bp-generacion__acciones,
.bp-generacion--todo .bp-generacion__acciones {
	margin-top: 0 !important;
}

.bp-generacion__titulo {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.bp-generacion__texto {
	max-width: 60ch;
	margin: 0 0 22px;
	color: #475569;
	line-height: 1.6;
}

.bp-generacion__cuadros {
	display: grid;
	/* Siempre cuatro: con auto-fit, el contenedor de avisos de WooCommerce impedía que las
	   columnas sobrantes se plegaran y los cuadrados quedaban estrechos. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.bp-generacion__cuadro {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
	border: 2px solid transparent;
	border-radius: 22px;
	background: #f0fdf4;
	color: #0f172a !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bp-generacion__cuadro:hover,
.bp-generacion__cuadro:focus-visible {
	transform: translateY(-2px);
	border-color: #4ebf74;
	box-shadow: 0 14px 30px rgba(78, 191, 116, 0.22);
}

.bp-generacion__cuadro--elegida {
	border-color: #0f172a;
	background: #0f172a;
	color: #fff !important;
}

.bp-generacion__cuadro--elegida .bp-generacion__precio,
.bp-generacion__cuadro--elegida .bp-generacion__cuantos {
	color: rgba(255, 255, 255, 0.82);
}

.bp-generacion__cuadro--elegida::after {
	content: "✕  quitar";
	margin-top: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.72);
}

.bp-generacion__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 10px;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
}

/* Las fotos vienen de todos los tamaños y proporciones: que todas quepan en el mismo cuadrado y
   ninguna descoloque su cuadro (el tema le pone height:auto a todas las imágenes). */
.bp-generacion__imagen {
	width: 100%;
	height: 100% !important;
	max-height: 100%;
	min-height: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.bp-generacion__cuadro--elegida .bp-generacion__foto {
	background: rgba(255, 255, 255, 0.92);
}

.bp-generacion__nombre {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.1;
}

.bp-generacion__precio {
	font-weight: 700;
	color: #15803d;
}

.bp-generacion__cuantos {
	font-size: 0.85rem;
	color: #64748b;
}

.bp-generacion__acciones {
	margin-top: 22px !important;
}

/* ---- La entrada de la tienda, a pantalla completa ----------------------------------------- */
/* Al entrar en la tienda no hay nada que leer ni que cargar: un fondo difuminado y, en grande, las
   cuatro generaciones con la foto del móvil, el botón de ver todo y el buscador de la barra. */
/* La entrada ocupa la pantalla entera: nada más que el buscador de arriba, los cuatro cuadrados y
   el botón. Sin pie, sin banner y sin nada que obligue a bajar. */
/* Del pie solo se queda la línea legal, que tiene que estar en todas las páginas. */
body:has(.bp-generacion--entrada) .apple-home-footer__grid,
body:has(.bp-generacion--entrada) .apple-home-footer__modelos,
body:has(.bp-generacion--entrada) .apple-shop-message-banner {
	display: none !important;
}

body:has(.bp-generacion--entrada) footer {
	padding: 0 !important;
	background: none !important;
}

body:has(.bp-generacion--entrada) .apple-home-footer__shell {
	padding-top: 0 !important;
	padding-bottom: 8px !important;
}

body:has(.bp-generacion--entrada) .apple-home-footer__bottom,
body:has(.bp-generacion--entrada) .apple-home-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 14px;
	margin-top: 0 !important;
	padding-top: 0 !important;
	border: 0 !important;
	font-size: 0.78rem;
	text-align: center;
}

/* La página entera mide una pantalla: la barra de arriba y, debajo, la entrada ocupando el resto.
   Así no hace falta saber cuánto mide la cabecera ni dejar márgenes a ojo. */
body:has(.bp-generacion--entrada) .wp-site-blocks {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 100svh;
}

body:has(.bp-generacion--entrada) .wp-site-blocks > * {
	margin-block: 0 !important;
}

body:has(.bp-generacion--entrada) .wp-site-blocks > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.bp-entrada {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	position: relative;
	isolation: isolate;
	min-height: 0;
	width: 100%;
	padding: 16px 0;
}

.bp-entrada::before {
	content: "";
	position: fixed;
	z-index: -1;
	inset: -10vh -10vw;
	/* Manchas de color muy difuminadas: pesan cero y dan fondo sin cargar ninguna imagen. */
	background:
		radial-gradient(34% 34% at 16% 26%, rgba(52, 168, 98, 0.62) 0%, transparent 70%),
		radial-gradient(36% 36% at 84% 20%, rgba(56, 170, 233, 0.5) 0%, transparent 72%),
		radial-gradient(40% 40% at 66% 84%, rgba(110, 231, 183, 0.6) 0%, transparent 70%),
		radial-gradient(32% 34% at 10% 80%, rgba(129, 178, 253, 0.5) 0%, transparent 70%);
	filter: blur(90px);
	pointer-events: none;
}

.bp-generacion--entrada {
	max-width: 1040px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 40px 36px 36px;
	text-align: center;
	border-radius: 34px;
	/* Cristal esmerilado sobre el fondo difuminado. */
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(24px) saturate(140%);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.bp-generacion--entrada .bp-generacion__texto {
	max-width: none;
	margin-bottom: 30px;
	font-weight: 600;
	color: #334155;
}

.bp-generacion--entrada .bp-generacion__cuadros {
	gap: 20px;
}

.bp-generacion--entrada .bp-generacion__cuadro {
	padding: 18px 18px 22px;
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.78);
	text-align: center;
}

.bp-generacion--entrada .bp-generacion__foto {
	margin-bottom: 14px;
	background: transparent;
}

.bp-generacion--entrada .bp-generacion__nombre {
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}

.bp-generacion--entrada .bp-generacion__precio {
	font-size: 1.05rem;
}

.bp-generacion--entrada .bp-generacion__acciones {
	justify-content: center;
	margin-top: 30px !important;
}

.bp-generacion--entrada .bp-generacion__acciones .apple-pill-button {
	padding: 15px 34px;
	font-size: 1.05rem;
}

/* El buscador en vivo del tema filtra el listado, y en la entrada no hay listado que filtrar. Aquí
   manda el buscador de la barra, que lleva a la tienda buscando (?q=) y funciona igual en móvil. */
body:has(.bp-generacion--entrada) .apple-shop-search-dock {
	display: none !important;
}

body:has(.bp-generacion--entrada) .bp-buscador-cabecera {
	display: flex;
}

/* En el móvil todo se aprieta para que los cuatro cuadrados quepan en una pantalla. */
@media (max-width: 700px) {
	.bp-generacion--entrada {
		padding: 18px 14px 16px;
		border-radius: 28px;
	}

	.bp-generacion--entrada .bp-generacion__titulo {
		margin-bottom: 10px;
		font-size: 1.2rem;
	}

	/* Las fotos son verticales: con la caja un poco más baja el móvil se sigue viendo entero y
	   caben los cuatro cuadrados sin bajar. */
	.bp-generacion--entrada .bp-generacion__foto {
		aspect-ratio: 5 / 4;
	}

	.bp-generacion--entrada .bp-generacion__cuadros {
		gap: 12px;
	}

	.bp-generacion--entrada .bp-generacion__cuadro {
		padding: 12px 12px 14px;
		border-radius: 20px;
	}

	.bp-generacion--entrada .bp-generacion__foto {
		margin-bottom: 8px;
	}

	.bp-generacion--entrada .bp-generacion__nombre {
		font-size: 1.1rem;
	}

	.bp-generacion--entrada .bp-generacion__precio {
		font-size: 0.95rem;
	}

	.bp-generacion--entrada .bp-generacion__acciones {
		margin-top: 14px !important;
	}

	.bp-generacion--entrada .bp-generacion__acciones .apple-pill-button {
		padding: 12px 24px;
		font-size: 1rem;
	}

	.bp-entrada {
		margin: 0 !important;
		padding: 6px 0;
	}

	/* En el móvil, del pie solo queda la línea de enlaces legales, en pequeño. */
	body:has(.bp-generacion--entrada) .apple-home-footer__bottom > p {
		display: none;
	}

	body:has(.bp-generacion--entrada) .apple-home-footer__legal {
		gap: 0 10px;
		font-size: 0.72rem;
	}
}

/* En la entrada no hay listado que filtrar: sobra el panel de filtros del tema. Sus contenedores no
   se ocultan del todo porque dentro vive el botón flotante del carrito, que sí tiene que verse. */
body:has(.bp-generacion--entrada) .apple-shop-controls,
body:has(.bp-generacion--entrada) .apple-filter-shell,
body:has(.bp-generacion--entrada) [data-product-filters] {
	display: contents !important;
}

body:has(.bp-generacion--entrada) .apple-filter-panel,
body:has(.bp-generacion--entrada) .apple-filter-sidebar,
body:has(.bp-generacion--entrada) .apple-filter-sidebar-toggle {
	display: none !important;
}

@media (max-width: 700px) {
	.bp-generacion {
		padding: 20px 16px;
		border-radius: 22px;
	}

	.bp-generacion__cuadros {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.bp-generacion__cuadro {
		padding: 16px 14px;
	}
}

/* En la entrada no hay barra de filtros: su hueco no debe reservarse. */
body:has(.bp-generacion--entrada) .wp-block-woocommerce-product-collection,
body:has(.bp-generacion--entrada) .apple-shop-grid,
body:has(.bp-generacion--entrada) .wp-block-query-pagination {
	padding-left: 0 !important;
}

/* WooCommerce mete su contenedor de avisos dentro de la rejilla: que ocupe la fila entera y no
   una casilla, que empujaba los cuadrados a la derecha. */
.bp-generacion__cuadros > :not(.bp-generacion__cuadro) {
	grid-column: 1 / -1;
}

/* ---- Carrusel de destacados --------------------------------------------------------------- */
/* La foto del modelo se enseña siempre, haya vídeo de fondo o no: el vídeo es genérico y lo que el
   cliente quiere ver es el móvil que está mirando. (La portada traía su propia copia de estas
   reglas dentro de la plantilla, así que hay que ganarle en especificidad.) */
.apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__media {
	display: flex;
	/* En la maqueta la foto va al final, debajo de los botones, que queda raro: se sube arriba del
	   todo, que es donde se mira primero. */
	order: -1;
	margin-bottom: 4px;
	/* Solo el móvil, sin caja detrás: la foto es la copia sin fondo (inc/sinfondo.php). */
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__image {
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

/* Al final de la tienda, los destacados son una sugerencia («esto es lo más elegido»), no la
   portada: el titular baja de tamaño y sobra el botón, que devolvía al principio de esta misma
   página. */
.bp-destacados {
	margin-top: 40px;
}

.bp-destacados .apple-shop-showcase__copy h2 {
	font-size: clamp(1.4rem, 2.4vw, 2rem) !important;
	line-height: 1.12;
}

.bp-destacados .apple-shop-showcase__copy p {
	max-width: 56ch;
}

.bp-destacados .apple-hero-actions {
	display: none;
}

/* ---- Enlaces a los modelos ---------------------------------------------------------------- */
/* Las páginas de cada modelo son las que captan «comprar iPhone 15 Pro Max reacondicionado». Estas
   listas son la manera de llegar a ellas desde dentro de la web (y de que Google las tenga en
   cuenta: a una página que no enlaza nadie apenas la mira). */
.bp-modelos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin: 0 0 16px;
	font-size: 0.95rem;
}

.bp-modelos__titulo {
	font-weight: 700;
	color: #475569;
}

.bp-modelos__enlace {
	padding: 5px 12px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	color: #0f172a !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.bp-modelos__enlace:hover,
.bp-modelos__enlace:focus-visible {
	border-color: #4ebf74;
	background: #f0fdf4;
}

.bp-categoria__pie .bp-modelos {
	margin-bottom: 22px;
}

.apple-home-footer__modelos {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.apple-home-footer__modelos .bp-modelos {
	margin: 0;
	font-size: 0.88rem;
}

/* ---- Migas de pan de la categoría ---------------------------------------------------------- */
.bp-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-size: 0.85rem;
	color: #64748b;
}

.bp-migas a {
	color: #475569 !important;
	text-decoration: none !important;
}

.bp-migas a:hover,
.bp-migas a:focus-visible {
	text-decoration: underline !important;
}

.bp-migas__sep {
	color: #94a3b8;
}

/* En una categoría no hay barra de filtros (el listado ya es de un solo modelo), así que su hueco
   no debe reservarse: dejaba un tercio de la pantalla en blanco y las fichas estrechas. */
body:has(.bp-categoria) .wp-block-woocommerce-product-collection,
body:has(.bp-categoria) .wp-block-query-pagination,
body:has(.bp-categoria) .apple-shop-grid {
	padding-left: 0 !important;
}

/* El panel de filtros se pinta suelto arriba y el guion lo mueve luego a la barra de la izquierda:
   durante el primer segundo ocupaba media pantalla y empujaba el listado hacia abajo. Hasta que no
   está en su sitio no se enseña (sin JavaScript no filtra igualmente). */
body.apple-shop-page .apple-shop-controls:not(:has(.apple-filter-shell--sidebar)) {
	display: none !important;
}

.bp-modelos-pie {
	margin: 26px 0 0;
}

/* Los enlaces a los modelos y los destacados van detrás del listado, fuera de su contenedor, así
   que no heredaban el hueco que deja la barra de filtros: en escritorio la barra les tapaba los
   primeros enlaces. */
@media (min-width: 1100px) {
	body.apple-shop-page.apple-shop-sidebar-ready.apple-shop-sidebar-open .bp-modelos-pie,
	body.apple-shop-page.apple-shop-sidebar-ready.apple-shop-sidebar-open .bp-destacados {
		padding-left: calc(var(--apple-shop-sidebar-width) + var(--apple-shop-sidebar-gap));
	}
}


/* ---- Pop-up al añadir al carrito ------------------------------------------------------------
   Como el de fonestore.es, con los colores de BackiPhone: banda oscura con el móvil añadido,
   cuatro sugerencias con «Añadir», y en el móvil sube desde abajo (inc/cartel.php). */
.bp-cartel {
	--bp-cartel-tinta: #0f172a;
	--bp-cartel-marca: #4ebf74;
	--bp-cartel-texto: #1e293b;
	--bp-cartel-suave: #64748b;
	--bp-cartel-borde: #e2e8f0;
	--bp-cartel-fondo: #f8fafc;
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* por encima de la cabecera y del carrito flotante */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.bp-cartel[hidden] {
	display: none !important;
}

html.bp-cartel-abierto {
	overflow: hidden;
}

.bp-cartel__fondo {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bp-cartel__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(940px, 100%);
	max-height: calc(100dvh - 48px);
	overflow: auto;
	border-radius: 22px;
	background: #fff;
	color: var(--bp-cartel-texto);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bp-cartel.is-visible .bp-cartel__fondo {
	opacity: 1;
}

.bp-cartel.is-visible .bp-cartel__caja {
	opacity: 1;
	transform: none;
}

.bp-cartel__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.bp-cartel__cerrar:hover {
	background: rgba(255, 255, 255, 0.2);
}

.bp-cartel__cerrar:focus-visible {
	outline: 2px solid var(--bp-cartel-marca);
	outline-offset: 2px;
}

/* Banda oscura de arriba: qué se ha añadido. */
.bp-cartel__cabecera {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 64px 20px 24px;
	background: var(--bp-cartel-tinta);
	color: #fff;
}

.bp-cartel__check {
	position: relative;
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bp-cartel-marca);
	color: var(--bp-cartel-tinta);
	font-size: 20px;
	font-weight: 800;
}

/* Mientras el carrito responde, el círculo gira en lugar de la marca. */
.bp-cartel__cabecera.is-anadiendo .bp-cartel__check {
	color: transparent;
}

.bp-cartel__cabecera.is-anadiendo .bp-cartel__check::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 3px solid var(--bp-cartel-tinta);
	border-right-color: transparent;
	border-radius: 50%;
	animation: bp-cartel-gira 0.7s linear infinite;
}

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

.bp-cartel__quien {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.3;
}

.bp-cartel__estado {
	font-size: 17px;
	color: #fff;
}

.bp-cartel__producto {
	font-size: 15px;
	color: #e2e8f0;
}

.bp-cartel__producto:empty {
	display: none;
}

.bp-cartel__producto-opciones {
	font-size: 13px;
	color: #94a3b8;
}

.bp-cartel__producto-opciones[hidden] {
	display: none;
}

/* Las sugerencias. */
.bp-cartel__cuerpo {
	padding: 22px 24px 8px;
}

.bp-cartel__cuerpo[hidden] {
	display: none;
}

.bp-cartel__titulo {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bp-cartel-tinta);
}

.bp-cartel__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-cartel__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--bp-cartel-borde);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.bp-cartel__item.is-anadido {
	border-color: var(--bp-cartel-marca);
	box-shadow: 0 0 0 1px var(--bp-cartel-marca);
}

/* Huecos que se ven mientras llegan las sugerencias. */
.bp-cartel__hueco {
	min-height: 290px;
	border-color: transparent;
	background: linear-gradient(100deg, #f1f5f9 30%, #f8fafc 50%, #f1f5f9 70%);
	background-size: 300% 100%;
	animation: bp-cartel-carga 1.2s linear infinite;
}

@keyframes bp-cartel-carga {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: 0 0;
	}
}

.bp-cartel__imagen {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--bp-cartel-fondo);
}

.bp-cartel__imagen img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 12px;
	object-fit: contain;
}

.bp-cartel__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
}

.bp-cartel__nombre {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bp-cartel-tinta);
	text-decoration: none;
}

.bp-cartel__nombre:hover {
	text-decoration: underline;
}

.bp-cartel__opciones {
	font-size: 13px;
	line-height: 1.35;
	color: var(--bp-cartel-suave);
}

.bp-cartel__precio {
	margin-top: auto;
	padding-top: 4px;
}

/* El precio con el de lanzamiento y el ahorro, más compacto que en la tienda. */
.bp-cartel__precio .bp-precio__actual {
	font-size: 18px !important;
}

.bp-cartel__precio .bp-precio__lanzamiento {
	font-size: 12px !important;
}

.bp-cartel__anadir.apple-pill-button {
	width: 100%;
	min-height: 44px;
	margin-top: 6px;
	justify-content: center;
	font-size: 14px;
}

.bp-cartel__item.is-anadido .bp-cartel__anadir {
	background: var(--bp-cartel-marca);
	border-color: var(--bp-cartel-marca);
	color: var(--bp-cartel-tinta);
}

.bp-cartel__ver {
	align-self: center;
	padding: 4px;
	font-size: 13px;
	color: var(--bp-cartel-texto);
	text-decoration: underline;
}

/* Abajo: seguir o ir al carrito. */
.bp-cartel__pie {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 24px 22px;
}

.bp-cartel__seguir,
.bp-cartel__carrito {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.bp-cartel__seguir {
	border: 1px solid var(--bp-cartel-borde);
	background: #fff;
	color: var(--bp-cartel-tinta);
}

.bp-cartel__seguir:hover {
	background: var(--bp-cartel-fondo);
}

.bp-cartel__carrito {
	border: 0;
	background: var(--bp-cartel-tinta);
	color: #fff;
}

.bp-cartel__carrito:hover {
	background: #1e293b;
}

.bp-cartel__seguir:focus-visible,
.bp-cartel__carrito:focus-visible {
	outline: 2px solid var(--bp-cartel-marca);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.bp-cartel__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Móvil: sube desde abajo, ocupa el ancho y los botones se quedan fijos abajo. */
@media (max-width: 640px) {
	.bp-cartel {
		align-items: flex-end;
		padding: 0;
	}

	.bp-cartel__caja {
		width: 100%;
		max-height: 92dvh;
		border-radius: 20px 20px 0 0;
	}

	.bp-cartel__cabecera {
		padding: 16px 56px 16px 16px;
	}

	.bp-cartel__cuerpo {
		padding: 16px 16px 4px;
	}

	.bp-cartel__lista {
		gap: 10px;
	}

	.bp-cartel__info {
		padding: 10px;
	}

	.bp-cartel__nombre {
		font-size: 14px;
	}

	.bp-cartel__pie {
		position: sticky;
		bottom: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--bp-cartel-borde);
		background: #fff;
	}

	.bp-cartel__seguir,
	.bp-cartel__carrito {
		flex: 1 1 0;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bp-cartel__fondo,
	.bp-cartel__caja {
		transition: none;
	}

	.bp-cartel__hueco,
	.bp-cartel__cabecera.is-anadiendo .bp-cartel__check::after {
		animation: none;
	}
}

/* El aviso pequeño del tema («se ha añadido a tu carrito») dice lo mismo que la banda del pop-up:
   mientras este está abierto, sobra. */
html.bp-cartel-abierto .apple-cart-toast {
	display: none !important;
}

.bp-cartel__precio .bp-precio__actual {
	font-weight: 800 !important;
	color: var(--bp-cartel-tinta) !important;
}

/* ---- Ficha: el bloque de compra, en claro ---------------------------------------------------
   Era un rectángulo azul marino casi negro de 650 px en medio de una página blanca: se veía como
   un pegote. Ahora es una tarjeta blanca con borde suave, como el resto de la ficha, y el verde
   queda solo para lo que importa: la opción elegida y el botón de comprar. */
body .apple-product-detail__purchase-card {
	border: 1px solid #e2e8f0;
	background: linear-gradient(165deg, #ffffff 0%, #f7faf8 100%);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
	color: #0f172a;
}

body.single-product .apple-product-detail__purchase-card form.cart,
body.single-product .apple-product-detail__purchase-card .wp-block-woocommerce-add-to-cart-form,
body.apple-product-page .apple-product-detail__purchase-card form.cart,
body.apple-product-page .apple-product-detail__purchase-card .wp-block-woocommerce-add-to-cart-form {
	color: #0f172a;
}

.apple-product-detail__purchase-card h2,
.apple-product-detail__purchase-card h3,
.apple-product-detail__purchase-card h4,
.apple-product-detail__purchase-card label,
.apple-product-detail__purchase-card legend,
.apple-product-detail__purchase-card .label,
.apple-product-detail__purchase-card th {
	color: #0f172a !important;
}

.apple-product-detail__purchase-card .apple-product-detail__availability-empty {
	color: #64748b;
}

/* Cantidad. */
.apple-product-detail__purchase-card input.qty,
.apple-product-detail__purchase-card .quantity input {
	border: 1px solid #cbd5e1 !important;
	background: #fff !important;
	color: #0f172a !important;
	box-shadow: none !important;
}

/* ---- Financiación con Klarna, bien visible en toda la web (inc/financiacion.php) -------------
   El rosa de Klarna y letra negra, como sus propios carteles. En la ficha va debajo del precio con
   la cuota; en portada, categorías y carrito, el mensaje general. */
.bp-financiacion {
	display: flex;
	font-weight: 400; /* en la ficha va dentro del precio, que es negrita */
	align-items: center;
	gap: 12px 14px;
	max-width: 100%;
	margin: 14px 0;
	padding: 12px 18px;
	border-radius: 16px;
	background: #ffb3c7;
	color: #17120f;
	box-shadow: 0 10px 24px rgba(255, 105, 150, 0.18);
	box-sizing: border-box;
}

.bp-financiacion__marca {
	flex: none;
	padding: 6px 12px;
	border-radius: 10px;
	background: #17120f;
	color: #ffb3c7;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	/* Sin apretar las letras: con espaciado negativo «Klarna.» se leía «Klama.» */
	letter-spacing: 0;
}

.bp-financiacion__texto {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	font-size: 15px;
	line-height: 1.35;
}

.bp-financiacion__texto strong {
	font-size: 17px;
	font-weight: 800;
	color: #17120f;
}

/* En la ficha, la cuota es lo que se mira: un poco más grande. */
.bp-financiacion--cuota .bp-financiacion__texto strong {
	font-size: 19px;
}

.bp-financiacion--cuota .bp-financiacion__texto > span {
	font-size: 14px;
	color: #3b2a30;
}

/* En la ficha va dentro del precio, que aprieta las letras: aquí no, que «Klarna» se leía «Klama». */
.bp-financiacion,
.bp-financiacion * {
	letter-spacing: normal !important;
}

/* En portada y categorías, con su aire alrededor y centrado. */
.bp-home-confianza + .bp-financiacion,
.bp-categoria .bp-financiacion {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.bp-categoria .bp-financiacion {
	margin-top: 18px;
}

@media (max-width: 600px) {
	.bp-financiacion {
		padding: 12px 14px;
	}

	.bp-financiacion__texto strong {
		font-size: 16px;
	}

	.bp-financiacion--cuota .bp-financiacion__texto strong {
		font-size: 17px;
	}
}

/* Y la píldora de la tienda, con el mismo aspecto (antes rosa pálido). */
body.apple-shop-page .apple-shop-message-banner {
	border: 0;
	background: #ffb3c7;
	box-shadow: 0 10px 24px rgba(255, 105, 150, 0.18);
}

body.apple-shop-page .apple-shop-message-banner__brand {
	background: #17120f;
	color: #ffb3c7;
	font-size: 15px;
	letter-spacing: 0;
}

body.apple-shop-page .apple-shop-message-banner__icon {
	border-color: #17120f;
	background: transparent;
}

body.apple-shop-page .apple-shop-message-banner__title,
body.apple-shop-page .apple-shop-message-banner__text {
	color: #17120f;
	font-size: 18px;
	letter-spacing: 0;
}

body.apple-shop-page .apple-shop-message-banner__title strong {
	color: #17120f;
}

/* ---- Carrusel de los más elegidos: tarjeta más baja ------------------------------------------
   Con la foto encima del texto medía 684 px de alto. En pantallas anchas la foto va a la izquierda
   del nombre, las opciones y el color, y el precio y los botones debajo a todo lo ancho: 436 px.
   El bloque de texto se «disuelve» (display: contents) para que cada pieza ocupe su sitio en la
   rejilla de la tarjeta. Con body.apple-shop-page delante porque el tema tiene reglas más
   específicas para esta tarjeta (una sola columna, el bloque de texto en flex). */
@media (min-width: 781px) {
	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card {
		grid-template-columns: 150px minmax(0, 1fr);
		grid-template-areas:
			"foto marca"
			"foto nombre"
			"foto chips"
			"foto color"
			"pie pie";
		grid-template-rows: auto auto auto 1fr auto;
		column-gap: 22px;
		row-gap: 0;
		padding: 22px;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__copy {
		display: contents;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__media {
		grid-area: foto;
		align-self: center;
		margin: 0;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__eyebrow {
		grid-area: marca;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__copy > h2,
	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__copy > h3 {
		grid-area: nombre;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-product-meta {
		grid-area: chips;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-card-color-picker {
		grid-area: color;
		margin-top: 8px;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__footer {
		grid-area: pie;
		margin-top: 16px;
		gap: 12px 16px;
		align-items: flex-end;
	}

	body.apple-shop-page .apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__image {
		max-height: 190px;
	}
}

/* En el móvil sigue encima, pero más pequeña. */
@media (max-width: 780px) {
	.apple-shop-showcase .apple-shop-carousel .apple-shop-featured-card__image {
		max-height: 150px;
	}
}

/* ---- Guías para elegir iPhone (guias.php) -------------------------------------------------- */
/* Las mismas piezas que garantía y comparador: secciones blancas, cajas grises claras y el verde de
   la marca. Lo propio de las guías es la respuesta corta arriba, los tramos de precio y la tabla
   de dos modelos, que en el móvil pasa a una fila por dato. */
.bp-guia {
	color: #334155;
	line-height: 1.6;
}

/* Títulos largos («iPhone 13 o iPhone 14 reacondicionado: …»): sin palabras sueltas en una línea. */
.bp-pagina--guia .bp-pagina__hero h1 {
	text-wrap: balance;
}

.bp-guia strong {
	color: #0f172a;
}

.bp-guia h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: #0f172a;
}

.bp-guia__lista a,
.bp-guia__puntos a,
.bp-guia--corta a {
	color: #15803d !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bp-guia__lista,
.bp-guia__puntos {
	margin: 0;
	padding-left: 1.2em;
}

.bp-guia__lista > li,
.bp-guia__puntos > li {
	margin: 0 0 10px;
}

.bp-guia__lista > li:last-child,
.bp-guia__puntos > li:last-child {
	margin-bottom: 0;
}

.bp-guia__puntos ul {
	margin: 6px 0 0;
	padding-left: 1.2em;
}

.bp-guia__puntos p {
	margin: 6px 0 0;
}

/* La respuesta corta es lo primero que se lee: el mismo fondo verde suave que «En pocas palabras». */
.bp-guia--corta {
	border: 1px solid #dcfce7;
	background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 70%);
}

.bp-guia--corta > p {
	margin: 0 0 12px;
	font-weight: 600;
	color: #0f172a;
}

.bp-guia__tramos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.bp-guia__tramo {
	padding: 18px 20px;
	border-radius: 20px;
	background: #f8fafc;
}

.bp-guia__tramo p {
	margin: 0 0 12px;
	font-size: 0.95rem;
}

.bp-guia__modelos {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-guia__modelo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	background: #fff;
	color: #0f172a !important;
	text-decoration: none !important;
}

a.bp-guia__modelo:hover,
a.bp-guia__modelo:focus-visible {
	border-color: #4ebf74;
	background: #f0fdf4;
}

.bp-guia__modelo strong {
	flex: none;
	font-size: 0.9rem;
	color: #15803d;
	white-space: nowrap;
}

.bp-guia__nota {
	margin: 14px 0 0;
	font-size: 0.9rem;
	color: #64748b;
}

.bp-guia__tabla table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.bp-guia__tabla th,
.bp-guia__tabla td {
	padding: 12px 10px;
	border-bottom: 1px solid rgba(148, 163, 184, 0.25);
	vertical-align: top;
	text-align: left;
}

.bp-guia__tabla thead th {
	font-size: 1.1rem;
}

.bp-guia__tabla thead a {
	color: #0f172a !important;
	text-decoration: none !important;
}

.bp-guia__tabla tbody th {
	width: 28%;
	color: #475569;
	font-weight: 700;
}

/* La última fila es el precio de hoy. */
.bp-guia__tabla tbody tr:last-child td {
	font-weight: 700;
	color: #0f172a;
}

/* Las comprobaciones son cortas y la garantía es el texto entero de la ficha: más ancho para ella,
   y cada caja con su altura. */
.bp-guia__columnas {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: start;
}

.bp-guia__condiciones p {
	margin: 0 0 10px;
	color: #475569;
	line-height: 1.55;
}

.bp-guia__condiciones p:last-child {
	margin-bottom: 0;
}

.bp-guia__mas {
	margin: 16px 0 0;
}

.bp-guias__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.bp-guias__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
	border: 1px solid transparent;
	border-radius: 20px;
	background: #f8fafc;
	color: #475569 !important;
	text-decoration: none !important;
	line-height: 1.5;
}

.bp-guias__tarjeta strong {
	font-size: 1.05rem;
	line-height: 1.3;
	color: #0f172a;
}

.bp-guias__tarjeta:hover,
.bp-guias__tarjeta:focus-visible {
	border-color: #4ebf74;
	background: #f0fdf4;
}

@media (max-width: 781px) {
	.bp-guia__columnas {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.bp-guia__tramos {
		grid-template-columns: 1fr;
	}

	.bp-guia__tramo {
		padding: 16px;
	}

	/* La tabla, una fila por dato: el dato arriba y cada modelo debajo, con su nombre. */
	.bp-guia__tabla thead {
		display: none;
	}

	.bp-guia__tabla table,
	.bp-guia__tabla tbody {
		display: block;
	}

	.bp-guia__tabla tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 14px;
		padding: 12px 0;
		border-bottom: 1px solid rgba(148, 163, 184, 0.25);
	}

	.bp-guia__tabla th,
	.bp-guia__tabla td {
		padding: 0;
		border: 0;
	}

	.bp-guia__tabla tbody th {
		grid-column: 1 / -1;
		width: auto;
	}

	.bp-guia__tabla td::before {
		content: attr(data-modelo);
		display: block;
		font-size: 0.8rem;
		font-weight: 700;
		color: #15803d;
	}
}