/* ===========================================================================
   Carrito — cargada solo en is_cart(). Scoping .woocommerce-cart.
   Paridad PROD: tabla 5 col, cupón visible, totals derecha, botones rojo/ink.
   =========================================================================== */

/* Contenedor: el cap de lectura de .bf-entry__content (theme.css, vía
   page.php) estruja el split 65/32 del carrito. Ancho completo en cart y
   checkout (mismo origen del bug; checkout previene la fase siguiente). */
.woocommerce-cart .bf-entry__content { max-width: none; }
.woocommerce-checkout .bf-entry__content { max-width: none; }

/* Stepper */
.woocommerce-cart .bf-checkout-steps ol { display: flex; flex-wrap: wrap; gap: var(--bf-space-2) var(--bf-space-5); list-style: none; margin: 0 0 var(--bf-space-7); padding: 0; }
.woocommerce-cart .bf-checkout-steps__step { color: var(--bf-color-body); font-size: .8125rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); text-transform: uppercase; }
.woocommerce-cart .bf-checkout-steps__step.is-current { color: var(--bf-color-ink); }
.woocommerce-cart .bf-checkout-steps__step.is-current::after { content: " —"; }

/* Tabla */
.woocommerce-cart table.shop_table { border: var(--bf-border-thin); border-collapse: collapse; font-family: var(--bf-font-primary); }
.woocommerce-cart table.shop_table th { font-size: .8125rem; letter-spacing: var(--bf-ls-wide); padding: var(--bf-space-3); text-align: left; text-transform: uppercase; }
.woocommerce-cart table.shop_table td { border-top: var(--bf-border-thin); padding: var(--bf-space-4) var(--bf-space-3); vertical-align: top; }
.woocommerce-cart .bf-cart-product { display: flex; gap: var(--bf-space-4); }
.woocommerce-cart .bf-cart-product__thumb img { height: auto; width: 90px; }
.woocommerce-cart .bf-cart-product__info { display: flex; flex-direction: column; gap: var(--bf-space-2); }
.woocommerce-cart .bf-cart-product__info a { color: var(--bf-color-ink); font-weight: 700; text-decoration: none; }
/* Paridad PROD: "Eliminar" como enlace subrayado tinta. Woo core pinta el
   rojo con `.woocommerce a.remove{color:var(--wc-red)!important}` → el color
   necesita !important para ganar (underline y peso ya los resolvía la
   especificidad). El token body es gris medio, no el casi-negro de PROD →
   se usa ink. */
.woocommerce-cart .bf-cart-product__info a.remove.bf-cart-remove { color: var(--bf-color-ink) !important; font-weight: 400; text-decoration: underline; }
.woocommerce-cart .product-sku { color: var(--bf-color-body); font-size: .8125rem; }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal { white-space: nowrap; }
.woocommerce-cart td.product-quantity input.qty { border: 0; border-bottom: var(--bf-border-medium); font-family: var(--bf-font-primary); padding: var(--bf-space-2); width: 4.5rem; }

/* Cupón (fila propia) + limpiar (fila actions) */
.woocommerce-cart table.shop_table td.actions { padding: var(--bf-space-4); }
/* El flex vive en el wrapper interno, NUNCA en el td: display:flex sobre la
   celda invalida el colspan="5" (celda anónima de una columna → 441px). */
.woocommerce-cart .bf-coupon-row td { padding: var(--bf-space-4); }
.woocommerce-cart .bf-coupon-row__inner { align-items: center; display: flex; flex-wrap: wrap; gap: var(--bf-space-3); justify-content: space-between; }
.woocommerce-cart .bf-coupon-row .coupon { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); }
/* Ronda 4: sin esto el input ocupaba todo el ancho y el botón OK bajaba de
   línea. flex:1 1 auto + width:auto + min-width:0 deja input y OK en UNA
   línea (1440 y 390); el notice sigue bajando solo por su flex-basis:100%. */
.woocommerce-cart .bf-coupon-row .coupon .input-text { border: 0; border-bottom: var(--bf-border-medium); flex: 1 1 auto; font-family: var(--bf-font-primary); min-height: 44px; min-width: 0; padding: var(--bf-space-2); width: auto; }
/* Notice de error del cupón (AJAX apply_coupon): el core scopea sus reglas a
   `td.actions .coupon` y nuestra fila no lleva esa clase → se replica el
   patrón inline de Woo 11 con la variable de color del core (--wc-red; sin
   hex nuevo). flex-basis:100% + wrap del .coupon lo baja a su propia línea,
   bajo el input (paridad ronda 1: 12px rojo + borde rojo del input). */
.woocommerce-cart .bf-coupon-row .coupon-error-notice { color: var(--wc-red); display: block; flex-basis: 100%; font-size: .75rem; margin: var(--bf-space-2) 0 0; text-align: left; }
.woocommerce-cart .bf-coupon-row .input-text.has-error { border-color: var(--wc-red); }
.woocommerce-cart td.actions .button, .woocommerce-cart .bf-coupon-row .button { background: var(--bf-color-ink); border: 0; color: var(--bf-color-paper); cursor: pointer; font-family: var(--bf-font-primary); font-size: .875rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); min-height: 44px; padding: var(--bf-space-3) var(--bf-space-5); text-transform: uppercase; }
/* Botón negro "Limpiar carrito de compras" (paridad PROD). margin-left:auto
   lo mantiene a la derecha también cuando los cupones están desactivados. */
.woocommerce-cart .bf-cart-clear { align-items: center; background: var(--bf-color-ink); color: var(--bf-color-paper); cursor: pointer; display: inline-flex; flex: none; font-family: var(--bf-font-primary); font-size: .875rem; font-weight: 700; gap: var(--bf-space-2); letter-spacing: var(--bf-ls-wide); margin-left: auto; min-height: 44px; padding: var(--bf-space-3) var(--bf-space-5); text-decoration: none; text-transform: uppercase; }
.woocommerce-cart .bf-cart-clear__icon { flex: none; height: 14px; width: 14px; }

/* Botones principales */
.woocommerce-cart .bf-cart-continue { background: var(--bf-color-ink); color: var(--bf-color-paper); display: inline-block; font-size: .875rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); min-height: 44px; padding: var(--bf-space-3) var(--bf-space-5); text-decoration: none; text-transform: uppercase; }
.woocommerce-cart .checkout-button { background: var(--bf-color-accent) !important; border: 0; color: var(--bf-color-paper) !important; display: inline-block; font-family: var(--bf-font-primary); font-size: .875rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); min-height: 44px; padding: var(--bf-space-3) var(--bf-space-5); text-decoration: none; text-transform: uppercase; width: 100%; }
.woocommerce-cart td.actions .button:focus-visible, .woocommerce-cart .bf-coupon-row .button:focus-visible, .woocommerce-cart .bf-cart-clear:focus-visible, .woocommerce-cart .bf-cart-continue:focus-visible, .woocommerce-cart .checkout-button:focus-visible { outline: var(--bf-focus-outline); outline-offset: var(--bf-focus-offset); }

/* Alineación de columnas (paridad 02-desktop-cart.png): precio/SKU/cantidad
   centrados, total parcial a la derecha. Fuera del media query móvil a
   propósito: las reglas de td del bloque <767 (especificidad 0,2,4) siguen
   ganando y mantienen su text-align:right. */
.woocommerce-cart table.shop_table th.product-price, .woocommerce-cart table.shop_table th.product-sku, .woocommerce-cart table.shop_table th.product-quantity { text-align: center; }
.woocommerce-cart table.shop_table th.product-subtotal { text-align: right; }
.woocommerce-cart td.product-price, .woocommerce-cart td.product-sku, .woocommerce-cart td.product-quantity { text-align: center; }
.woocommerce-cart td.product-subtotal { text-align: right; }

/* Totals */
/* Woo core (woocommerce-layout.css) fija .woocommerce .cart-collaterals
   .cart_totals { float:right; width:48% } → dentro de nuestra columna de 32%
   la caja quedaba en 209px y "IR AL PAGO" se partía en 2 líneas. Mismo
   specificity (0-3-0) y el CSS del tema se encola después: el reset gana por
   orden de cascada. El core no añade margin aquí, no hay que neutralizar más. */
.woocommerce-cart .cart-collaterals .cart_totals { border: var(--bf-border-thin); float: none; padding: var(--bf-space-5); width: 100%; }
.woocommerce-cart .cart_totals h2 { font-size: 1.1rem; }
.woocommerce-cart .cart_totals table.shop_table { border: 0; }
.woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { border: 0; padding: var(--bf-space-2) 0; text-transform: none; }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { border-top: var(--bf-border-medium); font-size: 1.05rem; }
.woocommerce-cart .shipping-calculator-button { color: var(--bf-color-body); text-decoration: underline; }
.woocommerce-cart .shipping-calculator-form { border: var(--bf-border-thin); margin-top: var(--bf-space-2); padding: var(--bf-space-3); }
.woocommerce-cart .shipping-calculator-form .button { background: var(--bf-color-ink); border: 0; color: var(--bf-color-paper); cursor: pointer; font-family: var(--bf-font-primary); min-height: 44px; padding: var(--bf-space-2) var(--bf-space-4); }

/* Carrito vacío (cart-empty.php) */
/* Heading "TU CARRITO ESTÁ VACÍO" en mayúsculas (paridad PROD). */
.woocommerce-cart .cart-empty { font-size: 1.5rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.woocommerce-cart .bf-cart-empty-line { color: var(--bf-color-body); text-align: center; }
.woocommerce-cart .return-to-shop { text-align: center; }
/* PROD pinta el botón de vacío en ROJO (prod-cart/04-mobile-empty-cart.png);
   !important neutraliza el fondo de a.button del core, igual que la regla de
   .checkout-button. */
.woocommerce-cart .return-to-shop .button { background: var(--bf-color-accent) !important; border: 0; color: var(--bf-color-paper); display: inline-block; font-family: var(--bf-font-primary); font-size: .875rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); min-height: 44px; padding: var(--bf-space-3) var(--bf-space-5); text-decoration: none; text-transform: uppercase; }

/* Bloque de confianza compartido por la ficha y el carrito. */
.bf-trust-payments { margin-top: var(--bf-space-6); }
.bf-trust-payments__title { font-size: .8125rem; font-weight: 700; letter-spacing: var(--bf-ls-wide); margin: 0 0 var(--bf-space-2); text-transform: uppercase; }
/* Acento verde PROD en "SEGURO"/"100% seguro" (token en tokens.css). */
.bf-trust-payments__accent { color: var(--bf-color-success); }
.bf-trust-payments__list { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); list-style: none; margin: 0; padding: 0; }
.bf-trust-payments__list li { display: flex; }
/* Tile de marca real (SVG flat → assets/images/payments/). Borde/redondez/fondo
   en el <img class="bf-trust-payments__icon"> compartido con ficha y footer del
   funnel. height:31px + width:auto = aspect 780:500 de los SVG → CLS-safe.
   Cero hex nuevos (bg/borde = tokens; radius 4px = PROD). */
.bf-trust-payments__icon { background: var(--bf-color-paper); border: var(--bf-border-thin); border-radius: 4px; display: block; height: 31px; width: auto; }
.bf-trust-payments__list img.bf-trust-payments__icon,
.bf-checkout-footer img.bf-trust-payments__icon { width: 48px; height: 31px; max-width: none; }
/* Subtítulo solo en carrito (paridad PROD): discreto, bajo los badges. */
.woocommerce-cart .bf-trust-payments__subtitle { color: var(--bf-color-body); font-size: .8125rem; font-weight: 700; margin: var(--bf-space-3) 0 0; text-align: center; }
/* Ronda 4 (paridad 02-desktop-cart.png): en el carrito el bloque se presenta
   como tarjeta con borde y contenido centrado; la ficha conserva su
   presentación aprobada en 0.4.0 (por eso el scope .woocommerce-cart).
   Ronda 5: la tarjeta vive ahora DENTRO de .cart-collaterals (hook
   woocommerce_cart_collaterals p20, bajo cart_totals). El gap con la caja de
   totals se fija explícito en la regla scoped: medido en PROD a 1440 es
   ~26px (prod-cart/02-desktop-cart.png), coherente con --bf-space-6; se
   hereda del valor base pero se ancla aquí para que futuros ajustes del
   margen en la ficha no muevan el gap del carrito. */
.woocommerce-cart .bf-trust-payments { border: var(--bf-border-thin); margin-top: var(--bf-space-6); padding: var(--bf-space-5); text-align: center; }
.woocommerce-cart .bf-trust-payments__list { justify-content: center; }

/* Layout desktop: tabla izquierda + totals derecha */
@media (min-width: 1024px) {
	.woocommerce-cart .woocommerce-cart-form { float: left; width: 65%; }
	.woocommerce-cart .cart-collaterals { float: right; width: 32%; }
	.woocommerce-cart .cart-collaterals::after, .woocommerce-cart .woocommerce-cart-form::after { clear: both; content: ""; display: table; }
	/* Ronda 6: el clearfix debe ir en el contenedor QUE ENVUELVE los floats, no
	   en .woocommerce-cart (esa púa resolvía contra el ::after del body y no
	   impedía que el footer se solapara sobre actions/totals/tarjeta).
	   Doble red de seguridad: .bf-entry__content = wrapper de page.php;
	   .woocommerce = wrapper del shortcode del carrito. */
	.woocommerce-cart .bf-entry__content::after, .woocommerce-cart .woocommerce::after { clear: both; content: ""; display: table; }
}

/* Móvil: apilado con data-title */
@media (max-width: 767px) {
	.woocommerce-cart table.shop_table tbody tr td { display: block; text-align: right; }
	.woocommerce-cart table.shop_table tbody tr td::before { color: var(--bf-color-body); float: left; font-weight: 700; }
	.woocommerce-cart table.shop_table tbody tr td.product-thumbnail, .woocommerce-cart table.shop_table thead { display: none; }
	/* Fila cupón+limpiar: el apilado en columna pasa al wrapper interno; el td
	   vuelve a ser celda (block genérico móvil) y conserva su colspan. La
	   especificidad (0,3,2) gana el text-align:left al block genérico. */
	.woocommerce-cart table.shop_table .bf-coupon-row td { text-align: left; }
	.woocommerce-cart .bf-coupon-row__inner { align-items: stretch; flex-direction: column; }
	.woocommerce-cart .bf-cart-clear { justify-content: center; margin-left: 0; }
	.woocommerce-cart .bf-coupon-row .coupon .input-text { flex: 1 1 auto; }
	.woocommerce-cart .checkout-button { width: 100%; }
}