/**
 * Bocause Nutrition — componentes.
 *
 * Regla del archivo: ni un solo valor de color literal. Todo sale de la capa
 * semántica de bocause-tokens.css (var(--bc-primario), var(--bc-texto)…),
 * nunca de la paleta cruda ni de un hex escrito a mano.
 *
 * De momento contiene las dos piezas transversales:
 *   1. Bloque "etiqueta nutricional" (.bc-etiqueta)
 *   2. Tarjeta de producto (.bc-producto)
 */

/* ==========================================================================
   Base
   ========================================================================== */

a {
	color: var(--bc-marca);
}

a:hover,
a:focus {
	color: var(--bc-marca-hover);
}

/* ==========================================================================
   Bloque "etiqueta nutricional"
   ==========================================================================
   La regla gruesa superior, el hairline entre filas y la de 3px bajo la
   última son la firma visual del proyecto. No tocar sin motivo.
   ========================================================================== */

.bc-etiqueta__titulo {
	margin: 0 0 12px;
	font-family: var(--bc-fuente-display);
	font-size: 20px;
	font-weight: var(--bc-peso-fuerte);
	line-height: 1.2;
	color: inherit;
}

.bc-etiqueta__lista {
	margin: 0;
	padding-top: 12px;
	border-top: var(--bc-regla) solid var(--bc-texto);
}

.bc-etiqueta__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--bc-linea);
}

.bc-etiqueta__fila--ultima {
	border-bottom: 3px solid var(--bc-texto);
}

.bc-etiqueta__clave {
	margin: 0;
	font-family: var(--bc-fuente-texto);
	font-size: 16px;
	font-weight: var(--bc-peso-medio);
}

.bc-etiqueta__valor {
	margin: 0;
	font-family: var(--bc-fuente-dato);
	font-size: 14.5px;
	text-align: right;
}

.bc-etiqueta__nota {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--bc-texto-3);
}

/* Variante: regla en color de marca. Usada en "Cómo tomarla" de la PDP. */

.bc-etiqueta--regla-marca .bc-etiqueta__lista {
	border-top-color: var(--bc-marca);
}

/* Variante: sobre fondo oscuro. Invierte reglas y texto. */

.bc-etiqueta--regla-claro {
	color: var(--bc-texto-inv);
}

.bc-etiqueta--regla-claro .bc-etiqueta__lista {
	border-top-color: var(--bc-texto-inv);
}

.bc-etiqueta--regla-claro .bc-etiqueta__fila {
	border-bottom-color: var(--bc-linea-inv);
}

.bc-etiqueta--regla-claro .bc-etiqueta__fila--ultima {
	border-bottom-color: var(--bc-texto-inv);
}

.bc-etiqueta--regla-claro .bc-etiqueta__nota {
	color: var(--bc-texto-inv-2);
}

@media (max-width: 599px) {

	.bc-etiqueta__fila {
		padding: 11px 0;
	}
}

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

.bc-producto {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	list-style: none;
	background-color: var(--bc-superficie);
	border: var(--bc-borde-fuerte);
	border-radius: var(--bc-r-l);
	transition: box-shadow var(--bc-trans) ease;
}

/* focus-within para que el recorrido por teclado se vea igual que el hover. */

.bc-producto:hover,
.bc-producto:focus-within {
	box-shadow: var(--bc-sombra-hover);
}

/* --- Media ---------------------------------------------------------------- */

.bc-producto__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 210px;
	/* El relleno es lo que separa la foto del titular. Sin él, un bote alto
	   ocupa el hueco de borde a borde y el nombre queda pegado a la imagen. */
	padding: 18px 18px 22px;
	background-color: var(--bc-fondo-alt);
}

.bc-producto__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bc-producto__sello,
.bc-producto__video {
	position: absolute;
	left: 10px;
	padding: 5px 8px;
	font-family: var(--bc-fuente-dato);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--bc-r-xs);
}

.bc-producto__sello {
	top: 10px;
	color: var(--bc-sobre-marca);
	background-color: var(--bc-marca);
}

.bc-producto__video {
	bottom: 10px;
	color: var(--bc-texto-inv);
	background-color: var(--bc-fondo-oscuro);
}

/* --- Cuerpo --------------------------------------------------------------- */

.bc-producto__cuerpo {
	flex: 1 1 auto;
	padding: 16px;
}

.bc-producto__nombre {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-family: var(--bc-fuente-texto);
	font-size: 17px;
	font-weight: var(--bc-peso-fuerte);
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.bc-producto__nombre a {
	color: var(--bc-texto);
	text-decoration: none;
}

/* Extiende el enlace del titular a toda la tarjeta: una sola zona clicable
   sin envolver el botón de compra en un <a>. El botón se eleva por encima. */

.bc-producto__nombre a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bc-producto__tecnico {
	margin: 8px 0 0;
	font-family: var(--bc-fuente-dato);
	font-size: 11.5px;
	color: var(--bc-texto-3);
}

/* --- Pie ------------------------------------------------------------------ */

.bc-producto__pie {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 16px 16px;
}

/* La fila del precio se separa del cuerpo con un hairline: da un punto de
   apoyo visual y hace que el bloque de compra se lea como una unidad. */

.bc-producto__precios {
	padding-top: 14px;
	border-top: 1px solid var(--bc-linea);
}

.bc-producto__precio {
	display: block;
	font-family: var(--bc-fuente-display);
	font-size: 28px;
	font-weight: var(--bc-peso-display);
	line-height: 1;
	color: var(--bc-texto);
}

/* WooCommerce mete su propio marcado dentro de get_price_html(). */

.bc-producto__precio del {
	font-size: 15px;
	font-weight: var(--bc-peso-medio);
	color: var(--bc-texto-3);
}

.bc-producto__precio ins {
	text-decoration: none;
}

.bc-producto__dosis {
	display: block;
	margin-top: 4px;
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	color: var(--bc-marca);
}

/* Los dos selectores son necesarios. WooCommerce pinta sus botones con
   ".woocommerce a.button", que tiene más peso que una sola clase, así que en
   la tienda hacía falta subir por encima o el botón salía gris. El primer
   selector cubre el resto de sitios donde aparece la tarjeta —la portada, por
   ejemplo— donde no existe el contexto .woocommerce. */

.bc-producto .bc-producto__boton,
.woocommerce ul.products li.product .bc-producto__boton {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	padding: 15px 16px;
	font-family: var(--bc-fuente-texto);
	font-size: 15px;
	font-weight: var(--bc-peso-fuerte);
	line-height: 1.2;
	letter-spacing: 0.06em;
	/* En mayúsculas por CSS y no en el texto: así sigue siendo traducible y un
	   lector de pantalla no lo deletrea letra a letra. */
	text-transform: uppercase;
	text-align: center;
	color: var(--bc-sobre-primario);
	text-decoration: none;
	background-color: var(--bc-primario);
	border: 0;
	border-radius: var(--bc-r-m);
	transition: background-color var(--bc-trans) ease, transform var(--bc-trans) ease;
}

.bc-producto .bc-producto__boton:hover,
.bc-producto .bc-producto__boton:focus,
.woocommerce ul.products li.product .bc-producto__boton:hover,
.woocommerce ul.products li.product .bc-producto__boton:focus {
	color: var(--bc-sobre-primario);
	background-color: var(--bc-primario-hover);
}

.bc-producto .bc-producto__boton:active {
	transform: scale(0.99);
}

/* Enlace "Ver carrito" que WooCommerce inyecta tras añadir por AJAX. */

.bc-producto .added_to_cart {
	position: relative;
	z-index: 2;
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	color: var(--bc-marca);
}

@media (max-width: 599px) {

	.bc-producto__media {
		height: 150px;
		padding: 12px 12px 14px;
	}

	.bc-producto__cuerpo {
		padding: 12px;
	}

	.bc-producto__pie {
		padding: 0 12px 12px;
	}
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.bc-faq__titulo {
	margin: 0 0 4px;
	padding-top: 12px;
	font-family: var(--bc-fuente-display);
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: var(--bc-peso-display);
	line-height: 1.05;
	border-top: var(--bc-regla) solid var(--bc-texto);
}

.bc-faq__item {
	border-bottom: 1px solid var(--bc-linea);
}

.bc-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	font-family: var(--bc-fuente-texto);
	font-size: 17.5px;
	font-weight: var(--bc-peso-fuerte);
	color: var(--bc-texto);
	cursor: pointer;
	list-style: none;
}

.bc-faq__pregunta::-webkit-details-marker {
	display: none;
}

.bc-faq__pregunta::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--bc-fuente-display);
	font-size: 28px;
	line-height: 1;
	color: var(--bc-marca);
}

.bc-faq__item[open] .bc-faq__pregunta::after {
	content: "\2013";
}

.bc-faq__respuesta {
	max-width: 78ch;
	padding-bottom: 20px;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--bc-texto-2);
}

/* ==========================================================================
   Avatares
   ==========================================================================
   La foto sale del perfil del usuario (ver bocause_avatar_propio), así que
   puede venir con cualquier proporción. get_avatar() fuerza width y height
   iguales en el atributo, y sin object-fit una foto no cuadrada saldría
   estirada. Con esto se recorta centrada en lugar de deformarse.
   ========================================================================== */

.avatar {
	object-fit: cover;
	border-radius: var(--bc-r-pill);
}

/* ==========================================================================
   Pie de página
   ==========================================================================
   Réplica del prototipo: cuatro columnas en escritorio (marca y newsletter,
   Tienda, Bocause, Legal) y barra inferior con copyright y sellos de pago.
   Sustituye entero al pie de GeneratePress (ver inc/bocause-footer.php).
   ========================================================================== */

.site-footer {
	background-color: var(--bc-fondo-oscuro);
	color: var(--bc-texto-inv);
}

.bc-pie {
	padding-block: 56px 32px;
}

/* El pie sale en todas las páginas, así que no puede depender del ancho que
   define bocause-home.css, que solo se carga en algunas. */

.bc-pie__ancho {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: 32px;
}

.bc-pie__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
	gap: 36px;
}

.bc-pie a {
	color: var(--bc-texto-inv);
	text-decoration: none;
	transition: color var(--bc-trans) ease;
}

.bc-pie a:hover,
.bc-pie a:focus {
	color: var(--bc-primario);
}

/* --- Marca ----------------------------------------------------------------- */

.bc-pie__logo {
	display: inline-block;
	margin-bottom: 22px;
	line-height: 1;
}

.bc-pie__logo-nombre {
	display: block;
	font-family: var(--bc-fuente-display);
	font-size: 26px;
	font-weight: var(--bc-peso-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bc-texto-inv);
}

/* El punto era fresa en el prototipo; en esta paleta el acento es el
   amarillo, que sobre el navy sí se lee (10,6:1). */

.bc-pie__logo-punto {
	color: var(--bc-acento);
}

.bc-pie__logo-sub {
	display: block;
	margin-top: 4px;
	font-family: var(--bc-fuente-dato);
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bc-texto-inv-2);
}

.bc-pie__logo--imagen img {
	display: block;
	max-width: 180px;
	height: auto;
}

/* --- Newsletter ------------------------------------------------------------ */

.bc-pie__newsletter {
	padding-top: 14px;
	border-top: var(--bc-regla) solid var(--bc-texto-inv);
}

.bc-pie__newsletter-titulo {
	margin: 0 0 6px;
	font-family: var(--bc-fuente-texto);
	font-size: 19px;
	font-weight: var(--bc-peso-fuerte);
	line-height: 1.3;
	color: var(--bc-texto-inv);
}

.bc-pie__newsletter-texto {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--bc-texto-inv-2);
}

/* El formulario lo pone el plugin de newsletter, así que se estiliza por
   elemento y no por clase: no sabemos qué marcado va a traer. Campo y botón
   en línea, como en el diseño. */

.bc-pie__newsletter-form form,
.bc-pie__newsletter-form .mc4wp-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bc-pie__newsletter-form input[type="email"],
.bc-pie__newsletter-form input[type="text"] {
	flex: 1 1 180px;
	min-width: 0;
	padding: 13px;
	font-family: var(--bc-fuente-dato);
	font-size: 12.5px;
	color: var(--bc-texto-inv);
	background-color: var(--bc-campo-inv);
	border: 1.5px solid var(--bc-borde-inv);
	border-radius: var(--bc-r-s);
}

.bc-pie__newsletter-form input::placeholder {
	color: var(--bc-texto-inv-2);
}

.bc-pie__newsletter-form button,
.bc-pie__newsletter-form input[type="submit"] {
	flex: 0 0 auto;
	padding: 13px 18px;
	font-family: var(--bc-fuente-texto);
	font-size: 15px;
	font-weight: var(--bc-peso-fuerte);
	color: var(--bc-texto);
	background-color: var(--bc-texto-inv);
	border: 0;
	border-radius: var(--bc-r-s);
	cursor: pointer;
	transition: background-color var(--bc-trans) ease;
}

.bc-pie__newsletter-form button:hover,
.bc-pie__newsletter-form input[type="submit"]:hover {
	background-color: var(--bc-primario);
}

/* --- Columnas de enlaces --------------------------------------------------- */

.bc-pie__titulo {
	margin: 0 0 14px;
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bc-texto-inv-2);
}

.bc-pie__lista {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.bc-pie__lista li {
	margin: 0;
}

/* --- Barra inferior -------------------------------------------------------- */

.bc-pie__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--bc-linea-inv);
}

.bc-pie__copyright {
	margin: 0;
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bc-texto-inv-2);
}

.bc-pie__pagos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bc-pie__pagos li {
	margin: 0;
	padding: 5px 9px;
	font-family: var(--bc-fuente-dato);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bc-texto-inv-2);
	border: 1px solid var(--bc-borde-inv);
	border-radius: var(--bc-r-xs);
}

/* --- Adaptación ------------------------------------------------------------ */

@media (max-width: 899px) {

	.bc-pie__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bc-pie__marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599px) {

	.bc-pie {
		padding-block: 32px 20px;
	}

	.bc-pie__ancho {
		padding-inline: 16px;
	}

	/* Como en el prototipo móvil: newsletter arriba, Tienda y Legal a dos
	   columnas, y la columna Bocause fuera. */

	.bc-pie__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 22px;
	}

	.bc-pie__logo,
	.bc-pie__columna--bocause {
		display: none;
	}

	.bc-pie__titulo {
		font-size: 10px;
	}

	.bc-pie__lista {
		gap: 8px;
		font-size: 15px;
	}

	.bc-pie__newsletter-form form,
	.bc-pie__newsletter-form .mc4wp-form-fields {
		flex-direction: column;
	}

	.bc-pie__newsletter-form button,
	.bc-pie__newsletter-form input[type="submit"] {
		padding: 14px;
		font-size: 16px;
	}

	.bc-pie__barra {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 24px;
		padding-top: 16px;
	}

	.bc-pie__pagos {
		gap: 8px;
	}

	.bc-pie__pagos li {
		padding: 5px 8px;
		font-size: 10px;
	}
}