/**
 * El carrito, el pago y la confirmación del pedido.
 *
 * En estas páginas no se carga la hoja de WooCommerce (ver inc/woocommerce.php).
 * Aquí va lo que ella resolvía para el marcado de Woo —campos del formulario,
 * cupón, avisos, la página del carrito y la confirmación— con el sistema de
 * diseño. La composición del pago (pasos, "Su pedido", forma de pago) es del
 * plugin: llr-core/assets/css/checkout-page.css.
 */

/* ============================== Campos de Woo ============================== */

.woo .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
}

.woo .form-row label {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--llr-tinta);
}

.woo .form-row .required {
	color: var(--llr-rojo);
	text-decoration: none;
	border: 0;
}

.woo .form-row .optional {
	font-weight: 500;
	color: var(--llr-tinta-3);
}

.woo .form-row .input-text,
.woo .form-row textarea,
.woo .form-row select {
	width: 100%;
}

.woo .form-row textarea {
	min-height: 96px;
	padding-top: 12px;
	resize: vertical;
}

.woo .form-row.woocommerce-invalid .input-text,
.woo .form-row.woocommerce-invalid select {
	border-color: var(--llr-error);
}

@media (min-width: 600px) {
	.woo .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}

	.woo .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}

	.woo .woocommerce-billing-fields__field-wrapper > .form-row-first {
		grid-column: 1;
	}

	.woo .woocommerce-billing-fields__field-wrapper > .form-row-last {
		grid-column: 2;
	}
}

.woo .col2-set .col-1,
.woo .col2-set .col-2 {
	width: 100%;
	float: none;
}

.woo .woocommerce-shipping-fields {
	display: none;
}

.woo .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ============================== Avisos, cupón e ingreso ============================== */

.woo .woocommerce-notices-wrapper:empty {
	display: none;
}

.woo .woocommerce-info,
.woo .woocommerce-message,
.woo .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 16px;
	padding: 14px 18px;
	border: 0;
	border-radius: 16px;
	background: var(--llr-blanco);
	color: var(--llr-tinta);
	font-size: 15px;
	list-style: none;
}

.woo .woocommerce-error {
	background: var(--llr-rojo-suave);
}

.woo .woocommerce-info::before,
.woo .woocommerce-message::before,
.woo .woocommerce-error::before {
	content: none;
}

.woo .woocommerce-info a,
.woo .woocommerce-message a {
	font-weight: 700;
}

.woo .woocommerce-message .button {
	order: 2;
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
}

.woo form.checkout_coupon,
.woo form.woocommerce-form-login {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	margin: -6px 0 20px;
	padding: 18px;
	border: 0;
	border-radius: 20px;
	background: var(--llr-blanco);
}

.woo form.checkout_coupon p:not(.form-row) {
	flex-basis: 100%;
	margin: 0;
	font-size: 14px;
	color: var(--llr-tinta-2);
}

.woo form.checkout_coupon .form-row {
	flex: 1 1 200px;
	margin: 0;
}

.woo form.checkout_coupon .form-row-last {
	flex: 0 0 auto;
}

.woo .clear {
	display: none;
}

/* ============================== El carrito ============================== */

.woocommerce-cart .woo > .woocommerce {
	display: grid;
	gap: 20px;
}

@media (min-width: 1024px) {
	.woocommerce-cart .woo > .woocommerce {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
		column-gap: 48px;
		align-items: start;
	}

	.woocommerce-cart .woo > .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .woo > .woocommerce > .wc-empty-cart-message,
	.woocommerce-cart .woo > .woocommerce > .return-to-shop {
		grid-column: 1 / -1;
	}

	.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: 140px;
	}
}

.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart table.shop_table.cart thead {
	display: none;
}

.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	grid-template-areas:
		"foto nombre quitar"
		"foto cantidad subtotal";
	align-items: start;
	gap: 8px 14px;
	margin-bottom: 10px;
	padding: 14px;
	border-radius: 22px;
	background: var(--llr-blanco);
}

.woocommerce-cart table.shop_table.cart td {
	display: block;
	padding: 0;
	border: 0;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail {
	grid-area: foto;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 16px;
}

.woocommerce-cart table.shop_table.cart td.product-name {
	grid-area: nombre;
	font-size: 16px;
	font-weight: 800;
}

.woocommerce-cart table.shop_table.cart td.product-name a {
	color: var(--llr-tinta);
	text-decoration: none;
}

/* Lo elegido: las piezas del cajón (plantilla del plugin, Cart\LineDetails) */
.woocommerce-cart table.shop_table.cart td.product-name .llr-linea {
	display: grid;
	justify-items: start;
	gap: 6px;
	margin-top: 4px;
	font-weight: 500;
}

.woocommerce-cart table.shop_table.cart td.product-remove {
	grid-area: quitar;
	justify-self: end;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--llr-lienzo);
	color: var(--llr-tinta) !important;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover {
	background: var(--llr-rojo-suave);
	color: var(--llr-rojo) !important;
}

.woocommerce-cart table.shop_table.cart td.product-price {
	display: none; /* el subtotal ya dice cuánto es */
}

.woocommerce-cart table.shop_table.cart td.product-quantity {
	grid-area: cantidad;
	align-self: end;
}

.woocommerce-cart table.shop_table.cart .quantity .qty {
	width: 72px;
	min-height: 44px;
	padding: 0 8px;
	border: 2px solid var(--llr-linea);
	border-radius: 14px;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
}

.woocommerce-cart table.shop_table.cart td.product-subtotal {
	grid-area: subtotal;
	align-self: end;
	font-size: 17px;
	font-weight: 900;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* La fila del cupón y "Actualizar carrito" */
.woocommerce-cart table.shop_table.cart tr:not(.cart_item) {
	display: block;
}

.woocommerce-cart table.shop_table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 4px 0 0;
}

.woocommerce-cart td.actions .coupon {
	display: flex;
	flex: 1 1 280px;
	gap: 8px;
}

.woocommerce-cart td.actions .coupon .input-text {
	flex: 1;
	min-height: 48px;
}

.woocommerce-cart td.actions .coupon .button,
.woocommerce-cart td.actions > .button {
	min-height: 48px;
	padding: 0 18px;
	border: 2px solid var(--llr-linea);
	background: transparent;
	color: var(--llr-tinta);
	font-size: 14.5px;
}

.woocommerce-cart td.actions .button:hover:not(:disabled) {
	border-color: var(--llr-tinta);
	background: transparent;
	color: var(--llr-tinta);
}

.woocommerce-cart td.actions .button:disabled {
	opacity: .45;
}

/* Resumen del pedido */
.woocommerce-cart .cart_totals {
	padding: 22px;
	border-radius: 26px;
	background: var(--llr-blanco);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 8px;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals tbody {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart .cart_totals tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1.5px solid var(--llr-linea);
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	display: block;
	padding: 0;
	border: 0;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}

.woocommerce-cart .cart_totals td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce-cart .cart_totals tr.llr-envio-al-pagar {
	grid-template-columns: 1fr;
	gap: 4px;
}

.woocommerce-cart .cart_totals tr.llr-envio-al-pagar td {
	text-align: left;
	font-size: 14px;
	color: var(--llr-tinta-2);
}

.woocommerce-cart .cart_totals tr.order-total {
	border-bottom: 0;
	padding-top: 16px;
}

.woocommerce-cart .cart_totals tr.order-total th {
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
}

.woocommerce-cart .cart_totals tr.order-total .amount {
	font-size: 30px;
	font-weight: 900;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding-top: 8px;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	min-height: 58px;
	border-radius: 999px;
	font-size: 17px;
}

/* El carrito vacío */
.wc-empty-cart-message .cart-empty {
	font-size: 18px;
	font-weight: 700;
}

.return-to-shop .button {
	min-height: 54px;
	padding: 0 28px;
}

/* ============================== La confirmación ============================== */

.woocommerce-order {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 860px;
}

.woocommerce-order .woocommerce-notice--success,
.woocommerce-thankyou-order-received {
	margin: 0;
	padding: 0;
	background: none;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.woocommerce-order ul.order_details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.woocommerce-order ul.order_details {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.woocommerce-order ul.order_details li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 18px;
	background: var(--llr-blanco);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--llr-tinta-2);
}

.woocommerce-order ul.order_details li strong {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--llr-tinta);
	overflow-wrap: anywhere;
}

.woocommerce-order-details,
.woocommerce-customer-details {
	padding: 22px;
	border-radius: 26px;
	background: var(--llr-blanco);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 900;
	text-transform: uppercase;
}

.woocommerce-order-details table,
.woocommerce-order-details tbody,
.woocommerce-order-details tfoot {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-order-details thead {
	display: none;
}

.woocommerce-order-details tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1.5px solid var(--llr-linea);
}

.woocommerce-order-details th,
.woocommerce-order-details td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
	font-size: 15px;
}

.woocommerce-order-details td:last-child {
	text-align: right;
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
}