/**
 * Carrito — layout móvil (≤767px): cada línea del carrito se pinta como tarjeta.
 *
 * Contexto: la tabla la genera woo-custom-templates/cart/cart-items.php dentro
 * de la plantilla Bricks "Carrito" (145196). En móvil, la CSS de integración
 * Woo de Bricks (woocommerce-layer.min.css, @media ≤767px) apila cada celda
 * como fila suelta con etiqueta "Cantidad:/Precio:/Subtotal:" y pone la
 * miniatura a width:100% (imagen gigante). Este fichero la sustituye por una
 * tarjeta compacta por producto:
 *
 *   ┌───────────────────────────────────┐
 *   │ [img]  Nombre del producto    🗑  │
 *   │ [img]                             │
 *   │ [ − 1 + ]                 5,31€   │
 *   └───────────────────────────────────┘
 *
 * La MARCA (.product-brand) se oculta en móvil; solo se ve en desktop.
 *
 * Va SIN @layer a propósito: las reglas de Bricks viven en una cascade layer,
 * así que cualquier regla sin layer les gana sin necesidad de !important
 * (solo se usa contra las que ya llevan !important o estilos base de Woo).
 */

@media (max-width: 767px) {

	/* La tabla deja de comportarse como tabla */
	.woocommerce-cart-form table.shop_table {
		border: none;
		display: block;
	}
	.woocommerce-cart-form table.shop_table > tbody {
		display: block;
	}

	/* ===== Tarjeta por producto ===== */
	.woocommerce-cart-form tbody tr.cart_item {
		display: grid;
		grid-template-areas:
			"thumb name   remove"
			"qty   qty    subtotal";
		grid-template-columns: 88px minmax(0, 1fr) max-content;
		grid-template-rows: auto auto;
		column-gap: 12px;
		row-gap: 8px;
		align-items: start;
		background: #fff;
		border: none;
		border-radius: 12px;
		box-shadow: 0 1px 2px rgba(53, 49, 47, 0.06);
		padding: 12px;
		margin-bottom: 12px;
	}

	/* Sin etiquetas "Producto:/Cantidad:/Subtotal:" — el layout ya es semántico.
	   (la de Precio se reactiva más abajo) */
	.woocommerce-cart-form tbody tr.cart_item td::before,
	.woocommerce-cart-form tbody tr.cart_item th::before {
		content: none;
	}

	/* Los wrappers de celda (estilizados solo en desktop ≥991px) desaparecen
	   como caja para que el grid gobierne directamente el contenido */
	.woocommerce-cart-form tbody tr.cart_item .td-wrapper {
		display: contents;
	}

	/* Miniatura: tamaño fijo (Bricks la pone a width:100% en móvil) */
	.woocommerce-cart-form tbody tr.cart_item td.product-thumbnail {
		grid-area: thumb;
		display: block;
		padding: 0;
	}
	.woocommerce-cart-form tbody tr.cart_item td.product-thumbnail img {
		width: 88px !important;
		height: 88px;
		object-fit: cover;
		border-radius: 10px;
		display: block;
	}

	/* Nombre (la marca solo se muestra en desktop) */
	.woocommerce-cart-form tbody tr.cart_item th.product-name {
		grid-area: name;
		display: block;
		padding: 0;
		text-align: left;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.35;
	}
	.woocommerce-cart-form tbody tr.cart_item th.product-name .product-brand {
		display: none;
	}
	.woocommerce-cart-form tbody tr.cart_item th.product-name a {
		color: inherit;
		text-decoration: none;
	}
	/* Meta de variación (dl.variation de Woo) compacta bajo el nombre */
	.woocommerce-cart-form tbody tr.cart_item th.product-name dl.variation {
		margin: 4px 0 0;
		font-size: 12px;
		font-weight: 400;
		color: #767676;
	}

	/* Precio unitario fuera: con el subtotal se leían "dos precios" (feedback
	   2026-07-07). La cantidad la muestra el pill y el subtotal ya es qty×precio. */
	.woocommerce-cart-form tbody tr.cart_item td.product-price {
		display: none;
	}

	/* Cantidad (el pill verde +/- ya viene estilizado desde la plantilla Bricks) */
	.woocommerce-cart-form tbody tr.cart_item td.product-quantity {
		grid-area: qty;
		display: flex;
		align-items: center;
		padding: 0;
	}

	/* Subtotal de línea, protagonista */
	.woocommerce-cart-form tbody tr.cart_item td.product-subtotal {
		grid-area: subtotal;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0;
		font-size: 16px;
		font-weight: 700;
	}

	/* Papelera arriba a la derecha, con área táctil decente */
	.woocommerce-cart-form tbody tr.cart_item td.ol-product-remove-row {
		grid-area: remove;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 0;
	}
	.woocommerce-cart-form tbody tr.cart_item td.ol-product-remove-row a.remove {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px;
		margin: -6px -6px 0 0;
	}

	/* ===== Fila de acciones (Actualizar carrito) ===== */
	.woocommerce-cart-form tbody tr:not(.cart_item) {
		display: block;
		border: none;
	}
	.woocommerce-cart-form tbody td.actions {
		display: block;
		padding: 4px 0 0;
	}
	.woocommerce-cart-form tbody td.actions button[name="update_cart"] {
		width: 100%;
	}
}