/* ==========================================================================
   KNOCKOUT – carrito, checkout, pedido recibido y mi cuenta.
   Mismo lenguaje visual que la landing: negro carbón, rojo ring, Anton.
   ========================================================================== */

body.kb-tienda {
	--kb-rojo: #e60000;
	--kb-rojo-cl: #ffb4a8;
	--kb-rojo-os: #930000;
	--kb-negro: #0f0f0f;
	--kb-carbon: #1b1c1c;
	--kb-humo: #26262d;
	--kb-borde: #393939;
	--kb-hueso: #e4e2e1;
	--kb-gris: #a9a7a6;
	--kb-verde: #12b34a;

	--kb-display: Anton, "Arial Narrow", Impact, sans-serif;
	--kb-texto: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--kb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	font-family: var(--kb-texto);
	color: var(--kb-hueso);
	background: var(--kb-negro);
}

/* El tema pinta sus contenedores en claro; aquí se neutralizan. */
body.kb-tienda .wp-site-blocks,
body.kb-tienda .entry-content,
body.kb-tienda main,
body.kb-tienda .wp-block-group {
	background: transparent;
}

/* La cabecera del tema en estas páginas: fondo oscuro para que no deslumbre
   al pasar de la landing al pago. */
body.kb-tienda .wp-site-blocks > header.wp-block-template-part,
body.kb-tienda .wp-site-blocks > footer.wp-block-template-part {
	color: var(--kb-hueso);
	background: #131313;
	border-bottom: 1px solid var(--kb-borde);
}

body.kb-tienda .wp-site-blocks > header.wp-block-template-part a,
body.kb-tienda .wp-site-blocks > footer.wp-block-template-part a {
	color: var(--kb-hueso);
}

/* --------------------------------------------------------------- Títulos */

body.kb-tienda .wp-block-post-title,
body.kb-tienda h1,
body.kb-tienda h2,
body.kb-tienda h3 {
	font-family: var(--kb-display);
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .01em;
}

body.kb-tienda .woocommerce-billing-fields h3,
body.kb-tienda #order_review_heading,
body.kb-tienda .woocommerce-additional-fields h3 {
	padding-bottom: .5rem;
	margin-bottom: 1.25rem;
	font-size: 1.25rem;
	border-bottom: 2px solid var(--kb-rojo);
}

/* -------------------------------------------------------------- Formulario */

body.kb-tienda label {
	font-family: var(--kb-mono);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--kb-gris);
	text-transform: uppercase;
}

body.kb-tienda .required {
	color: var(--kb-rojo-cl);
	text-decoration: none;
}

body.kb-tienda input[type="text"],
body.kb-tienda input[type="email"],
body.kb-tienda input[type="tel"],
body.kb-tienda input[type="password"],
body.kb-tienda input[type="number"],
body.kb-tienda textarea,
body.kb-tienda select,
body.kb-tienda .select2-container .select2-selection--single {
	width: 100%;
	padding: .875rem .75rem;
	/* 16px como mínimo: por debajo, Safari en iOS hace zoom al enfocar. */
	font-family: var(--kb-texto);
	font-size: 1rem;
	color: var(--kb-hueso);
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
	border-radius: 6px;
	box-shadow: none;
}

body.kb-tienda input:focus,
body.kb-tienda textarea:focus,
body.kb-tienda select:focus {
	border-color: var(--kb-rojo);
	outline: 2px solid rgba(230, 0, 0, .25);
	outline-offset: 0;
}

body.kb-tienda ::placeholder {
	color: #6e6e78;
}

body.kb-tienda .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

body.kb-tienda .form-row {
	margin-bottom: 1.125rem;
}

body.kb-tienda .description,
body.kb-tienda .woocommerce-privacy-policy-text,
body.kb-tienda .woocommerce-terms-and-conditions-wrapper {
	font-size: .875rem;
	line-height: 1.6;
	color: var(--kb-gris);
}

/* ---------------------------------------------------------------- Botones */

body.kb-tienda .button,
body.kb-tienda button.button,
body.kb-tienda input.button,
body.kb-tienda a.button,
body.kb-tienda #place_order,
body.kb-tienda .wc-block-components-button {
	padding: 1rem 2rem;
	font-family: var(--kb-display);
	font-size: 1.0625rem;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	background: linear-gradient(to bottom, var(--kb-rojo), var(--kb-rojo-os));
	border: 2px solid var(--kb-rojo);
	border-radius: 2px;
	box-shadow: 0 0 24px rgba(230, 0, 0, .35);
	transition: transform .2s ease, border-color .2s ease;
}

body.kb-tienda .button:hover,
body.kb-tienda #place_order:hover {
	color: #fff;
	border-color: #fff;
	background: linear-gradient(to bottom, var(--kb-rojo), var(--kb-rojo-os));
	transform: translateY(-2px);
}

/* Botones secundarios: actualizar carrito, aplicar cupón. */
body.kb-tienda .actions .button[name="update_cart"],
body.kb-tienda .coupon .button {
	font-family: var(--kb-mono);
	font-size: .75rem;
	font-weight: 700;
	background: var(--kb-humo);
	border-color: var(--kb-borde);
	box-shadow: none;
}

/* ----------------------------------------------------------------- Tablas */

body.kb-tienda table.shop_table,
body.kb-tienda .woocommerce-checkout-review-order-table,
body.kb-tienda .woocommerce-table {
	width: 100%;
	overflow: hidden;
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
}

body.kb-tienda table.shop_table th,
body.kb-tienda table.shop_table td {
	padding: .875rem 1rem;
	color: var(--kb-hueso);
	border-bottom: 1px solid var(--kb-humo);
}

body.kb-tienda table.shop_table th {
	font-family: var(--kb-mono);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--kb-gris);
	text-transform: uppercase;
}

body.kb-tienda table.shop_table tfoot th,
body.kb-tienda table.shop_table .order-total th,
body.kb-tienda table.shop_table .order-total td {
	font-family: var(--kb-display);
	font-size: 1.125rem;
	color: #fff;
	text-transform: uppercase;
}

body.kb-tienda .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* El lugar de cada boleto, que WooCommerce imprime como meta de la línea. */
body.kb-tienda .variation,
body.kb-tienda .wc-item-meta {
	padding: 0;
	margin: .375rem 0 0;
	font-family: var(--kb-mono);
	font-size: .8125rem;
	color: var(--kb-rojo-cl);
	list-style: none;
}

body.kb-tienda .variation dt,
body.kb-tienda .wc-item-meta strong {
	display: inline;
	font-weight: 700;
}

body.kb-tienda .variation dd,
body.kb-tienda .wc-item-meta p {
	display: inline;
	margin: 0;
}

/* --------------------------------------------------------------- Bloques */

body.kb-tienda #payment,
body.kb-tienda .woocommerce-checkout #payment {
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
	border-radius: 10px;
}

body.kb-tienda #payment ul.payment_methods {
	padding: 1.25rem;
	border-bottom: 1px solid var(--kb-humo);
}

body.kb-tienda #payment div.form-row {
	padding: 1.25rem;
}

body.kb-tienda #payment .payment_box {
	padding: 1rem;
	color: var(--kb-hueso);
	background: var(--kb-humo);
	border-radius: 8px;
}

body.kb-tienda #payment .payment_box::before {
	border-bottom-color: var(--kb-humo);
}

/* El campo de tarjeta lo dibuja Stripe en un iframe con su propio tema
   claro. Se le da un marco propio para que se lea como una pieza
   intencional dentro del bloque oscuro, no como algo sin estilar. */
body.kb-tienda .wc-stripe-upe-element,
body.kb-tienda #wc-stripe-upe-element {
	padding: 1rem;
	background: #f4f2ef;
	border-radius: 8px;
}

/* ---------------------------------------------------------------- Avisos */

body.kb-tienda .woocommerce-message,
body.kb-tienda .woocommerce-info,
body.kb-tienda .woocommerce-error,
body.kb-tienda .woocommerce-notice {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: .9375rem;
	color: var(--kb-hueso);
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
	border-left: 4px solid var(--kb-rojo);
	border-radius: 8px;
}

body.kb-tienda .woocommerce-message {
	border-left-color: var(--kb-verde);
}

body.kb-tienda .woocommerce-error {
	background: rgba(230, 0, 0, .12);
	border-left-color: var(--kb-rojo);
}

body.kb-tienda .woocommerce-message a,
body.kb-tienda .woocommerce-info a {
	font-weight: 700;
	color: var(--kb-rojo-cl);
}

/* --------------------------------------------------- Pedido recibido */

body.kb-tienda .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.25rem;
	margin: 1.5rem 0;
	list-style: none;
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
	border-radius: 10px;
}

body.kb-tienda .woocommerce-order-overview li {
	flex: 1 1 9rem;
	font-family: var(--kb-mono);
	font-size: .6875rem;
	letter-spacing: .08em;
	color: var(--kb-gris);
	text-transform: uppercase;
	border: 0;
}

body.kb-tienda .woocommerce-order-overview li strong {
	display: block;
	margin-top: .375rem;
	font-family: var(--kb-texto);
	font-size: 1rem;
	letter-spacing: 0;
	color: #fff;
	text-transform: none;
}

/* ------------------------------------------------------------ Mi cuenta */

body.kb-tienda .woocommerce-MyAccount-navigation ul {
	padding: 0;
	list-style: none;
}

body.kb-tienda .woocommerce-MyAccount-navigation li {
	margin-bottom: .375rem;
}

body.kb-tienda .woocommerce-MyAccount-navigation a {
	display: block;
	padding: .75rem 1rem;
	font-family: var(--kb-mono);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--kb-hueso);
	text-decoration: none;
	text-transform: uppercase;
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
	border-radius: 6px;
}

body.kb-tienda .woocommerce-MyAccount-navigation .is-active a {
	color: #fff;
	background: var(--kb-rojo);
	border-color: var(--kb-rojo);
}

/* ------------------------------------------------------------- Carrito */

body.kb-tienda .cart_totals h2,
body.kb-tienda .cross-sells h2 {
	font-size: 1.25rem;
}

body.kb-tienda .product-remove a.remove {
	color: var(--kb-rojo-cl) !important;
	background: transparent !important;
}

body.kb-tienda .quantity input {
	width: 4.5rem;
	text-align: center;
}

body.kb-tienda .cart-collaterals,
body.kb-tienda .cart_totals table {
	color: var(--kb-hueso);
}

/* ---------------------------------------------------- Pases con QR */

/* El pase se deja en blanco a propósito: es lo que la gente va a mostrar en
   la puerta desde el celular, y el contraste alto ayuda al lector de QR
   cuando la pantalla está a bajo brillo. */
body.kb-tienda .kb-pases__titulo {
	font-family: var(--kb-display);
	font-size: 1.5rem;
	color: #fff;
	text-transform: uppercase;
}

body.kb-tienda .kb-pases__intro {
	color: var(--kb-gris);
}

body.kb-tienda .kb-pase {
	border-color: var(--kb-rojo);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

body.kb-tienda .kb-pase__zona {
	color: var(--kb-rojo-os);
}

body.kb-tienda .kb-pase__lugar {
	font-family: var(--kb-mono);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: #0f0f0f;
}

body.kb-tienda .kb-pase__lugar-txt {
	font-size: .875rem;
	color: #555;
}

body.kb-tienda .kb-pases__evento {
	color: var(--kb-gris);
	border-top-color: var(--kb-borde);
}

body.kb-tienda .kb-acompanantes {
	color: var(--kb-hueso);
	background: var(--kb-carbon);
	border: 1px solid var(--kb-borde);
}

body.kb-tienda .kb-acompanantes > p {
	color: var(--kb-gris);
}

body.kb-tienda .kb-acompanantes__codigo {
	color: var(--kb-rojo-cl);
}

body.kb-tienda .kb-aviso {
	color: var(--kb-hueso);
	background: var(--kb-carbon);
	border-left-color: var(--kb-rojo);
}

/* Enlaces generales dentro de la tienda. */
body.kb-tienda a:not(.button):not(.kb-btn) {
	color: var(--kb-rojo-cl);
}

body.kb-tienda a:not(.button):not(.kb-btn):hover {
	color: #fff;
}