/* ==========================================================================
   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;
}

/* Cabecera y pie del tema fuera. Antes solo se les cambiaba el color, así que
   en el carrito seguían apareciendo el nombre de la plantilla («Twenty
   Twenty-Five»), un «Diseñado con WordPress» y un menú de ejemplo con Blog,
   FAQs, Patrones y Autores. En la pantalla donde se paga, eso delata la
   plataforma y no lleva a ninguna parte. El plugin pone los suyos. */
body.kb-tienda .wp-site-blocks > header.wp-block-template-part,
body.kb-tienda .wp-site-blocks > footer.wp-block-template-part {
	display: none;
}

/* Sitio para la cabecera fija propia. */
body.kb-tienda {
	padding-top: 72px;
}

/* --------------------------------------------------------------- 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;
}