/*
 * Carrito, checkout y cuenta.
 *
 * WooCommerce trae su propio estilo para estas pantallas: campos finitos,
 * avisos con barra azul, el recuadro de pago en lila. Acá se lleva todo a la
 * marca. Cada regla va con .pipol-compra adelante —la clase que el tema pone
 * en el body de estas páginas— para ganarle a woocommerce.css sin !important.
 */

/* ---------- Contenedor ---------- */

.pipol-pagina--compra .pipol-pagina__encabezado,
.pipol-pagina--compra .pipol-pagina__cuerpo {
	max-width: calc(1120px + var(--pipol-margen) * 2);
}

.pipol-pagina--compra .pipol-pagina__cuerpo {
	font-size: 15px;
	line-height: 1.6;
	color: var(--pipol-texto);
}

.pipol-pagina--compra .pipol-pagina__cuerpo a {
	text-decoration: none;
}

.pipol-compra h2,
.pipol-compra h3 {
	font-family: var(--pipol-serif);
	font-weight: 400;
	color: var(--pipol-texto);
	letter-spacing: -0.01em;
}

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

.pipol-compra .woocommerce-message,
.pipol-compra .woocommerce-info,
.pipol-compra .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 20px;
	padding: 16px 20px 16px 48px;
	border: 0;
	border-radius: var(--pipol-radio);
	background: var(--pipol-fondo-suave);
	color: var(--pipol-texto);
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
	outline: 0;
}

.pipol-compra .woocommerce-message::before,
.pipol-compra .woocommerce-info::before,
.pipol-compra .woocommerce-error::before {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	color: var(--pipol-tinta);
	font-size: 16px;
}

.pipol-compra .woocommerce-error {
	color: var(--pipol-alerta);
	background: #fbf1f1;
}

.pipol-compra .woocommerce-error::before {
	color: var(--pipol-alerta);
}

.pipol-compra .woocommerce-error li {
	margin: 0;
	width: 100%;
}

.pipol-compra .woocommerce-message .button,
.pipol-compra .woocommerce-info .button {
	order: 2;
	margin-left: auto;
	float: none;
	padding: 8px 18px;
	font-size: 13px;
}

.pipol-compra .woocommerce-info a:not(.button),
.pipol-compra .woocommerce-message a:not(.button) {
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Los avisos reciben el foco para los lectores de pantalla: sin contorno. */
.pipol-compra [tabindex="-1"]:focus {
	outline: 0;
}

/* ---------- Campos ---------- */

.pipol-compra .woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.pipol-compra .woocommerce form .form-row label {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce form .form-row label.checkbox,
.pipol-compra .woocommerce form .form-row .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pipol-texto);
	cursor: pointer;
}

.pipol-compra .woocommerce form .form-row .required {
	color: var(--pipol-texto-secundario);
	text-decoration: none;
	border: 0;
}

.pipol-compra .woocommerce form .form-row .optional {
	text-transform: none;
	letter-spacing: 0;
}

.pipol-compra .woocommerce form .form-row input.input-text,
.pipol-compra .woocommerce form .form-row textarea,
.pipol-compra .woocommerce form .form-row select,
.pipol-compra .woocommerce .select2-container .select2-selection--single,
.pipol-compra .woocommerce .coupon input.input-text,
.pipol-compra .woocommerce form.checkout_coupon input.input-text {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--pipol-texto);
	background: var(--pipol-papel);
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
	box-shadow: none;
}

.pipol-compra .woocommerce form .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

.pipol-compra .woocommerce form .form-row input.input-text::placeholder,
.pipol-compra .woocommerce form .form-row textarea::placeholder {
	color: var(--pipol-gris-tenue);
}

.pipol-compra .woocommerce form .form-row input.input-text:focus,
.pipol-compra .woocommerce form .form-row textarea:focus,
.pipol-compra .woocommerce form .form-row select:focus,
.pipol-compra .woocommerce .coupon input.input-text:focus {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 1px;
	border-color: var(--pipol-tinta);
}

.pipol-compra .woocommerce form .form-row.woocommerce-invalid input.input-text,
.pipol-compra .woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--pipol-alerta);
}

.pipol-compra .woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--pipol-linea-control);
}

/* El desplegable de departamentos que arma select2. */
.pipol-compra .woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
	padding: 0 14px;
}

.pipol-compra .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 46px;
	color: var(--pipol-texto);
}

.pipol-compra .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--pipol-tinta);
}

.select2-dropdown {
	border-color: var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
	overflow: hidden;
}

/* Casillas y opciones en negro. */
.pipol-compra input[type="checkbox"],
.pipol-compra input[type="radio"] {
	accent-color: var(--pipol-tinta);
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
}

/* Contraseña con el ojito para mostrarla. */
.pipol-compra .woocommerce form .password-input {
	display: block;
	position: relative;
}

.pipol-compra .woocommerce form .show-password-input {
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
}

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

.pipol-compra.woocommerce-cart .pipol-pagina__cuerpo > .woocommerce {
	display: grid;
	gap: 24px;
}

.pipol-compra.woocommerce-cart .woocommerce-notices-wrapper:empty {
	display: none;
}

.pipol-compra .woocommerce table.shop_table {
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.pipol-compra .woocommerce table.shop_table th {
	padding: 0 12px 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
	border: 0;
}

.pipol-compra .woocommerce table.shop_table td {
	padding: 20px 12px;
	border: 0;
	border-top: 1px solid var(--pipol-borde);
	vertical-align: middle;
}

.pipol-compra .woocommerce table.cart td.product-thumbnail {
	width: 96px;
}

.pipol-compra .woocommerce table.cart td.product-thumbnail img {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-sm);
	mix-blend-mode: multiply;
}

.pipol-compra .woocommerce table.cart td.product-name a {
	font-size: 15px;
	font-weight: 500;
	color: var(--pipol-texto);
	text-decoration: none;
}

.pipol-compra .woocommerce table.cart td.product-name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipol-compra .woocommerce table.cart td.product-price,
.pipol-compra .woocommerce table.cart td.product-subtotal {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.pipol-compra .woocommerce table.cart td.product-subtotal {
	font-weight: 600;
}

/* La cruz de quitar: gris y redonda, no roja. */
.pipol-compra .woocommerce table.cart td.product-remove {
	width: 40px;
	padding-left: 0;
	padding-right: 0;
}

.pipol-compra.pipol-compra .woocommerce a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	color: var(--pipol-texto-secundario) !important;
	background: transparent;
}

.pipol-compra.pipol-compra .woocommerce a.remove:hover {
	color: var(--pipol-tinta) !important;
	background: var(--pipol-fondo-suave);
}

.pipol-compra .woocommerce .quantity .qty {
	width: 72px;
	min-height: 44px;
	padding: 8px 10px;
	font: inherit;
	font-size: 15px;
	text-align: center;
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
}

/* Fila de cupón y actualizar. */
.pipol-compra .woocommerce table.cart td.actions {
	padding-top: 20px;
	padding-bottom: 0;
}

.pipol-compra .woocommerce table.cart td.actions .coupon {
	display: flex;
	gap: 8px;
	align-items: center;
	float: left;
	margin: 0;
}

.pipol-compra .woocommerce table.cart td.actions .coupon .input-text {
	width: 220px;
	min-height: 44px;
	margin: 0;
	float: none;
}

.pipol-compra .woocommerce table.cart td.actions .coupon .button,
.pipol-compra .woocommerce table.cart td.actions > .button {
	min-height: 44px;
	padding: 0 22px;
	font-size: 14px;
	float: none;
}

.pipol-compra .woocommerce table.cart td.actions > .button {
	float: right;
}

.pipol-compra .woocommerce table.cart td.actions > .button:disabled,
.pipol-compra .woocommerce table.cart td.actions > .button[disabled] {
	opacity: .45;
	padding: 0 22px;
}

/* Totales: la tarjeta de la derecha. */
.pipol-compra .woocommerce .cart-collaterals {
	width: 100%;
}

.pipol-compra .woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	padding: 28px;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg);
	box-sizing: border-box;
}

.pipol-compra .woocommerce .cart_totals h2 {
	margin: 0 0 16px;
	font-size: 28px;
}

.pipol-compra .woocommerce .cart_totals table.shop_table th,
.pipol-compra .woocommerce .cart_totals table.shop_table td {
	padding: 14px 0;
	border-top: 1px solid var(--pipol-linea-fuerte);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pipol-texto);
	background: transparent;
	vertical-align: top;
}

.pipol-compra .woocommerce .cart_totals table.shop_table th {
	width: 36%;
	font-weight: 500;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce .cart_totals tr.order-total td,
.pipol-compra .woocommerce .cart_totals tr.order-total th {
	font-size: 17px;
	color: var(--pipol-texto);
}

.pipol-compra .woocommerce .cart_totals tr.order-total td strong {
	font-weight: 600;
}

.pipol-compra .woocommerce .includes_tax,
.pipol-compra .woocommerce .tax_label {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce .shipping-calculator-button {
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipol-compra .woocommerce .shipping-calculator-button::after {
	display: none;
}

.pipol-compra .woocommerce .wc-proceed-to-checkout {
	padding: 20px 0 0;
}

.pipol-compra .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin: 0;
	padding: 0 24px;
	font-size: 15px;
}

.pipol-compra .woocommerce .cart_totals .pipol-nota-cuenta {
	margin: 14px 0 0;
	padding: 0;
	background: none;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--pipol-texto-secundario);
}

/* Métodos de envío, en el carrito y en el checkout. */
.pipol-compra .woocommerce ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pipol-compra .woocommerce ul#shipping_method li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	text-indent: 0;
}

.pipol-compra .woocommerce ul#shipping_method li input {
	margin-top: 2px;
}

.pipol-compra .woocommerce ul#shipping_method li label {
	display: inline;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--pipol-texto);
}

.pipol-compra .woocommerce .woocommerce-shipping-destination {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--pipol-texto-secundario);
}

/* Carrito vacío. */
.pipol-compra .woocommerce .cart-empty.woocommerce-info {
	padding: 32px 24px;
	justify-content: center;
	font-size: 16px;
}

.pipol-compra .woocommerce .cart-empty.woocommerce-info::before {
	display: none;
}

.pipol-compra .woocommerce .return-to-shop {
	text-align: center;
}

.pipol-compra .woocommerce .return-to-shop .button {
	min-height: 50px;
	padding: 0 32px;
	display: inline-flex;
	align-items: center;
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

/* ---------- Checkout ---------- */

/* Los dos avisos de arriba, más discretos: son atajos, no alertas. */
.pipol-compra .woocommerce-form-login-toggle .woocommerce-info,
.pipol-compra .woocommerce-form-coupon-toggle .woocommerce-info {
	margin-bottom: 10px;
	padding: 14px 20px;
	background: transparent;
	border: 1px solid var(--pipol-borde);
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce-form-login-toggle .woocommerce-info::before,
.pipol-compra .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.pipol-compra .woocommerce form.checkout_coupon,
.pipol-compra .woocommerce form.woocommerce-form-login {
	margin: 0 0 20px;
	padding: 20px;
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio);
}

.pipol-compra .woocommerce form.checkout {
	margin-top: 28px;
}

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

.pipol-compra .woocommerce-checkout .woocommerce .col2-set .col-2 {
	margin-top: 12px;
}

.pipol-compra .woocommerce-billing-fields > h3,
.pipol-compra .woocommerce-additional-fields > h3,
.pipol-compra #order_review_heading,
.pipol-compra .woocommerce-account-fields > h3 {
	margin: 0 0 20px;
	font-size: 28px;
	line-height: 1.15;
}

.pipol-compra #ship-to-different-address {
	margin: 8px 0 20px;
	font-family: var(--pipol-sans);
	font-size: 15px;
}

.pipol-compra #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	cursor: pointer;
}

/* El resumen del pedido, en una tarjeta. */
.pipol-compra #order_review_heading {
	margin: 0;
	padding: 28px 28px 8px;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg) var(--pipol-radio-lg) 0 0;
}

.pipol-compra #order_review {
	padding: 8px 28px 28px;
	background: var(--pipol-fondo-suave);
	border-radius: 0 0 var(--pipol-radio-lg) var(--pipol-radio-lg);
}

.pipol-compra .woocommerce-checkout-review-order-table th,
.pipol-compra .woocommerce-checkout-review-order-table td {
	padding: 14px 0 !important;
	border-top: 1px solid var(--pipol-linea-fuerte) !important;
	font-size: 14px;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--pipol-texto) !important;
	background: transparent !important;
	vertical-align: top;
}

.pipol-compra .woocommerce-checkout-review-order-table thead {
	display: none;
}

.pipol-compra .woocommerce-checkout-review-order-table tbody tr:first-child td {
	border-top: 0 !important;
}

.pipol-compra .woocommerce-checkout-review-order-table td.product-total,
.pipol-compra .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

/*
 * El importe no se parte, pero el aviso del cobro en guaraníes sí: con la
 * línea entera sin cortes, la tabla se hacía más ancha que la pantalla y el
 * checkout se movía de lado en el celular.
 */
.pipol-compra .woocommerce-checkout-review-order-table td.product-total {
	white-space: nowrap;
}

.pipol-compra .pipol-cobro,
.pipol-compra .includes_tax {
	white-space: normal;
}

.pipol-compra .woocommerce-checkout-review-order-table tfoot th {
	font-weight: 500;
	color: var(--pipol-texto-secundario) !important;
}

.pipol-compra .woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce-checkout-review-order-table tr.order-total th,
.pipol-compra .woocommerce-checkout-review-order-table tr.order-total td {
	font-size: 17px;
	color: var(--pipol-texto) !important;
}

.pipol-compra .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
	text-align: left;
	white-space: normal;
}

/* Medios de pago. */
.pipol-compra.pipol-compra .woocommerce-checkout #payment {
	margin-top: 8px;
	background: transparent;
	border-radius: 0;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment ul.payment_methods li {
	margin: 0 0 8px;
	padding: 14px 16px;
	background: var(--pipol-papel);
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio-sm);
	line-height: 1.4;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--pipol-tinta);
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment ul.payment_methods li > input {
	margin: 0 10px 0 0;
	vertical-align: -3px;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment ul.payment_methods li > label {
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 0;
	padding: 0 0 0 28px;
	background: transparent;
	font-size: 13px;
	line-height: 1.55;
	color: var(--pipol-texto-secundario);
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment div.payment_box p {
	margin: 0;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment div.form-row {
	margin: 16px 0 0;
	padding: 0;
}

.pipol-compra .woocommerce-privacy-policy-text p {
	margin: 0 0 16px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce-privacy-policy-text a {
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipol-compra.pipol-compra .woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	min-height: 54px;
	font-size: 15px;
}

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

.pipol-compra .woocommerce form.login,
.pipol-compra .woocommerce form.register,
.pipol-compra .woocommerce form.lost_reset_password {
	margin: 0 0 20px;
	padding: 28px;
	border: 0;
	border-radius: var(--pipol-radio-lg);
	background: var(--pipol-fondo-suave);
}

.pipol-compra.woocommerce-account .pipol-pagina__cuerpo > .woocommerce {
	max-width: 520px;
}

.pipol-compra.woocommerce-account.logged-in .pipol-pagina__cuerpo > .woocommerce {
	max-width: none;
}

.pipol-compra .woocommerce form.login .form-row:last-of-type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.pipol-compra .woocommerce form.login .button,
.pipol-compra .woocommerce form.lost_reset_password .button,
.pipol-compra .woocommerce-MyAccount-content form .button {
	min-height: 48px;
	padding: 0 32px;
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-compra .woocommerce form.login .button {
	order: 2;
	width: 100%;
	margin: 0;
}

.pipol-compra .woocommerce form.login .woocommerce-form-login__rememberme {
	order: 1;
}

.pipol-compra .woocommerce .lost_password a {
	font-size: 13px;
	color: var(--pipol-texto-secundario);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipol-compra .woocommerce-MyAccount-navigation ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pipol-compra .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-pastilla);
	font-size: 14px;
	color: var(--pipol-texto);
}

.pipol-compra .woocommerce-MyAccount-navigation .is-active a {
	background: var(--pipol-tinta);
	border-color: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-compra .woocommerce-MyAccount-content a:not(.button) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.pipol-compra .woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 32px;
	padding: 20px;
	list-style: none;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio);
}

.pipol-compra .woocommerce ul.order_details::before,
.pipol-compra .woocommerce ul.order_details::after {
	display: none;
}

.pipol-compra .woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pipol-texto);
}

.pipol-compra .woocommerce .woocommerce-thankyou-order-received {
	font-family: var(--pipol-serif);
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 24px;
}

.pipol-compra .woocommerce .woocommerce-customer-details address {
	padding: 20px;
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio);
	font-style: normal;
	line-height: 1.7;
}

/* ---------- Escritorio ---------- */

@media (min-width: 861px) {

	/* Carrito: los productos a la izquierda y la tarjeta de totales a la derecha. */
	.pipol-compra.woocommerce-cart .pipol-pagina__cuerpo > .woocommerce {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 24px 56px;
		align-items: start;
	}

	.pipol-compra.woocommerce-cart .pipol-pagina__cuerpo > .woocommerce > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	.pipol-compra.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: calc(var(--pipol-barra) + 24px);
	}

	/* Checkout: datos a la izquierda y el resumen, fijo, a la derecha. */
	.pipol-compra .woocommerce form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		/*
		 * Tres filas: los avisos, el título del resumen y el resumen. La última
		 * se lleva todo el alto sobrante; si no, la columna de los datos
		 * —que ocupa dos filas— lo repartía entre las dos y el resumen quedaba
		 * flotando bien por debajo de su propio título.
		 */
		grid-template-rows: auto auto 1fr;
		column-gap: 64px;
		align-items: start;
	}

	.pipol-compra .woocommerce form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.pipol-compra .woocommerce form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 2 / span 2;
	}

	.pipol-compra .woocommerce form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}

	.pipol-compra .woocommerce form.checkout > #order_review {
		grid-column: 2;
		grid-row: 3;
		position: sticky;
		top: calc(var(--pipol-barra) + 24px);
	}

	.pipol-compra .woocommerce-form-login-toggle,
	.pipol-compra .woocommerce-form-coupon-toggle,
	.pipol-compra.woocommerce-checkout .woocommerce form.checkout_coupon,
	.pipol-compra.woocommerce-checkout .woocommerce form.woocommerce-form-login {
		max-width: calc(100% - 484px);
	}

	.pipol-compra .woocommerce ul.order_details {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 24px 28px;
	}
}

/* ---------- Celular ---------- */

@media (max-width: 768px) {

	/*
	 * WooCommerce convierte la tabla del carrito en tarjetas apiladas con la
	 * etiqueta de cada celda al costado. Se ordena para que se lea como una
	 * lista: foto y nombre arriba, el resto debajo.
	 */
	.pipol-compra .woocommerce table.shop_table_responsive tr {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr) 36px;
		column-gap: 14px;
		padding: 16px 0;
		border-top: 1px solid var(--pipol-borde);
	}

	.pipol-compra .woocommerce table.shop_table_responsive tr td {
		padding: 4px 0;
		border: 0;
		background: transparent !important;
		text-align: left !important;
	}

	.pipol-compra .woocommerce table.shop_table_responsive tr td::before {
		display: none;
	}

	.pipol-compra .woocommerce table.cart td.product-thumbnail {
		display: block !important;
		grid-column: 1;
		grid-row: 1 / span 4;
		width: auto;
	}

	.pipol-compra .woocommerce table.cart td.product-remove {
		grid-column: 3;
		grid-row: 1;
		width: auto;
	}

	.pipol-compra .woocommerce table.cart td.product-name,
	.pipol-compra .woocommerce table.cart td.product-price,
	.pipol-compra .woocommerce table.cart td.product-quantity,
	.pipol-compra .woocommerce table.cart td.product-subtotal {
		grid-column: 2;
	}

	.pipol-compra .woocommerce table.cart td.product-name {
		grid-row: 1;
	}

	.pipol-compra .woocommerce table.cart td.product-price {
		display: none !important;
	}

	.pipol-compra .woocommerce table.cart td.actions {
		display: block;
		grid-column: 1 / -1;
	}

	.pipol-compra .woocommerce table.cart td.actions .coupon {
		display: flex;
		float: none;
		margin-bottom: 12px;
	}

	/* Totales: la etiqueta arriba y el valor abajo, a todo el ancho. */
	.pipol-compra .woocommerce .cart_totals table.shop_table_responsive tr {
		display: block;
		padding: 14px 0;
		border-top: 1px solid var(--pipol-linea-fuerte);
	}

	.pipol-compra .woocommerce .cart_totals table.shop_table_responsive tr td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left !important;
	}

	.pipol-compra .woocommerce .cart_totals table.shop_table_responsive tr td::before {
		display: block;
		float: none;
		margin-bottom: 6px;
		content: attr(data-title);
		font-size: 12px;
		font-weight: 500;
		color: var(--pipol-texto-secundario);
	}

	.pipol-compra .woocommerce table.cart td.actions .coupon .input-text {
		flex: 1;
		width: auto;
	}

	.pipol-compra .woocommerce table.cart td.actions > .button {
		float: none;
		width: 100%;
	}

	.pipol-compra .woocommerce .cart-collaterals .cart_totals {
		padding: 22px 20px;
	}

	.pipol-compra #order_review_heading {
		margin-top: 12px;
		padding: 22px 20px 6px;
	}

	.pipol-compra #order_review {
		padding: 6px 20px 22px;
	}

	.pipol-compra .woocommerce form .form-row-first,
	.pipol-compra .woocommerce form .form-row-last {
		float: none;
		width: 100%;
	}

}

/* ---------- Pago con tarjeta: formulario de Bancard ---------- */

.pipol-compra .woocommerce ul.order_details + .pipol-bancard,
.pipol-bancard {
	max-width: 560px;
	margin: 0 auto;
	padding: 28px;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg);
}

.pipol-bancard__encabezado {
	margin-bottom: 16px;
}

.pipol-bancard__titulo {
	margin: 0 0 4px;
	font-family: var(--pipol-serif);
	font-size: 28px;
	line-height: 1.15;
}

.pipol-bancard__monto {
	margin: 0;
	font-size: 15px;
	color: var(--pipol-texto-secundario);
}

.pipol-bancard__monto .amount {
	font-weight: 600;
	color: var(--pipol-texto);
}

/* El iframe de Bancard pide un mínimo de 320 píxeles de ancho. */
.pipol-bancard__formulario {
	min-width: 300px;
	min-height: 360px;
	overflow: hidden;
	background: var(--pipol-papel);
	border-radius: var(--pipol-radio);
}

.pipol-bancard__formulario iframe {
	display: block;
	width: 100%;
	border: 0;
}

.pipol-bancard__nota {
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--pipol-texto-secundario);
}

.pipol-bancard__nota a {
	display: inline-block;
	margin-top: 4px;
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipol-bancard__aviso,
.pipol-bancard--error .pipol-bancard__detalle {
	font-size: 13px;
	color: var(--pipol-alerta);
}

.pipol-bancard--error .button {
	margin: 8px 8px 0 0;
}

/* Resumen del pago en la página de gracias. */
.pipol-bancard-resumen {
	margin: 0 0 28px;
	padding: 24px 28px;
	border: 1px solid var(--pipol-tinta);
	border-radius: var(--pipol-radio-lg);
}

.pipol-bancard-resumen--rechazado {
	border-color: var(--pipol-alerta);
}

.pipol-bancard-resumen--espera {
	border-style: dashed;
	border-color: var(--pipol-linea-control);
}

.pipol-bancard-resumen h2 {
	margin: 0 0 12px;
	font-size: 26px;
}

.pipol-bancard-resumen p {
	margin: 0;
	color: var(--pipol-texto-secundario);
}

.pipol-bancard-resumen dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	margin: 0 0 8px;
}

.pipol-bancard-resumen dt {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-bancard-resumen dd {
	margin: 2px 0 0;
	font-size: 15px;
	color: var(--pipol-texto);
}

.pipol-bancard-resumen .button {
	margin-top: 12px;
}

@media (min-width: 861px) {

	.pipol-bancard-resumen dl {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Aviso del cobro en guaraníes ---------- */

/*
 * Los importes se muestran en dólares. Esta línea, debajo del total, dice qué
 * monto va a aparecer en el resumen de la tarjeta, que sale en guaraníes.
 */
.pipol-cobro {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pipol-texto-secundario);
}

.pipol-compra .woocommerce .cart_totals .includes_tax,
.pipol-compra .woocommerce-checkout-review-order-table .includes_tax {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--pipol-texto-secundario);
}

/* ---------- Mapa de entrega ---------- */

.pipol-mapa {
	margin: 24px 0 8px;
	padding: 20px;
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio-lg);
}

.pipol-mapa__titulo {
	margin: 0 0 6px;
	font-size: 22px;
}

.pipol-mapa__ayuda {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--pipol-texto-secundario);
}

.pipol-mapa__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.pipol-mapa__acciones .pipol-boton-borde {
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
}

.pipol-mapa__buscador {
	display: flex;
	gap: 8px;
	flex: 1 1 260px;
	/* Sin esto, el campo no se deja achicar y la página se va de ancho. */
	min-width: 0;
}

.pipol-mapa__acciones > * {
	min-width: 0;
}

.pipol-compra .pipol-mapa__buscador input {
	flex: 1;
	min-height: 44px;
	padding: 10px 14px;
	font: inherit;
	font-size: 15px;
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
}

/* El pin va fijo en el centro: se mueve el mapa, no el pin. */
.pipol-mapa__caja {
	position: relative;
	border-radius: var(--pipol-radio);
	overflow: hidden;
}

.pipol-mapa__lienzo {
	height: 300px;
	background: var(--pipol-fondo-suave);
}

.pipol-mapa__pin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -22px 0 0 -11px;
	border: 3px solid var(--pipol-papel);
	border-radius: 50% 50% 50% 0;
	background: var(--pipol-tinta);
	transform: rotate(-45deg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	pointer-events: none;
	/* Por encima de las capas del mapa y por debajo de sus controles. */
	z-index: 600;
}

.pipol-mapa__resultado {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pipol-texto);
}

/* Guardado: fondo claro y una tilde, para que se note que ya está hecho. */
.pipol-mapa__resultado.esta-listo,
.pipol-mapa__resultado.esta-fuera {
	padding: 10px 14px;
	border-radius: var(--pipol-radio-sm);
	background: var(--pipol-fondo-suave);
}

.pipol-mapa__resultado.esta-listo::before {
	content: "✓";
	margin-right: 8px;
	font-weight: 700;
}

.pipol-mapa__resultado.esta-fuera {
	background: #fbf1f1;
	color: var(--pipol-alerta);
}

.pipol-envio-aviso {
	font-size: 13px;
}

.pipol-envio-whatsapp {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 861px) {

	.pipol-mapa__lienzo {
		height: 340px;
	}
}

/* ==========================================================================
   Dirección escrita, al lado del punto del mapa
   ========================================================================== */

/*
 * La sección entera se esconde con el atributo «hidden» cuando el envío
 * elegido es un retiro en local. Hace falta decirlo: el display:flex de los
 * componentes de alrededor le gana a «hidden», que sólo vale display:none.
 */
.pipol-mapa[hidden] {
	display: none;
}

.pipol-mapa__direccion {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 16px 0 0;
}

.pipol-mapa__direccion label {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-mapa__direccion input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
	background: var(--pipol-papel);
	font: inherit;
	font-size: 15px;
}

.pipol-mapa__direccion input:focus-visible {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 1px;
}

.pipol-mapa__nota {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--pipol-texto-secundario);
}

/* ==========================================================================
   Libreta de direcciones de envío
   ========================================================================== */

.pipol-libreta__intro,
.pipol-libreta__aparte {
	margin: 0 0 10px;
	max-width: 62ch;
	line-height: 1.6;
}

.pipol-libreta__aparte {
	font-size: 13.5px;
	color: var(--pipol-texto-secundario);
	margin-bottom: 24px;
}

.pipol-libreta__lista {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.pipol-libreta__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--pipol-linea);
	border-radius: var(--pipol-radio-sm);
	background: var(--pipol-papel);
}

/* La habitual se distingue por el borde y no por un color: la marca es en
   blanco y negro, y un color acá sería el único de toda la pantalla. */
.pipol-libreta__item.es-preferida {
	border-color: var(--pipol-tinta);
}

.pipol-libreta__texto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
	line-height: 1.5;
}

.pipol-libreta__texto strong {
	font-size: 15px;
}

.pipol-libreta__marca {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.pipol-libreta__referencia,
.pipol-libreta__mapa {
	color: var(--pipol-texto-secundario);
	font-size: 13px;
}

.pipol-libreta__mapa {
	margin-top: 4px;
	width: fit-content;
}

.pipol-libreta__botones {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.pipol-enlace-boton {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pipol-texto-secundario);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.pipol-enlace-boton:hover {
	color: var(--pipol-tinta);
}

.pipol-libreta__form {
	margin-top: 22px;
	padding: 22px;
	border: 1px solid var(--pipol-linea);
	border-radius: var(--pipol-radio);
	background: var(--pipol-fondo-suave);
}

.pipol-libreta__form[hidden] {
	display: none;
}

.pipol-libreta__form h3 {
	margin: 0 0 16px;
}

.pipol-libreta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0;
}

.pipol-libreta__aviso:empty {
	display: none;
}

.pipol-libreta__aviso {
	margin: 12px 0 0;
	font-size: 13.5px;
	color: var(--pipol-texto-secundario);
}

.pipol-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.pipol-campo label {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-campo input[type="text"],
.pipol-campo select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
	background: var(--pipol-papel);
	font: inherit;
	font-size: 15px;
}

.pipol-campo__nota {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--pipol-texto-secundario);
}

/* La casilla y su texto van en una línea, sin el tratamiento de etiqueta
   suelta en versalitas que llevan los demás campos. */
.pipol-campo--casilla label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	line-height: 1.5;
	cursor: pointer;
}

.pipol-campo--casilla input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.pipol-mapa__guardar [data-pipol-nombre-guardar][hidden] {
	display: none;
}

.pipol-mapa__guardar input[type="text"] {
	margin-top: 8px;
	max-width: 260px;
}

/* ==========================================================================
   El mapa sin marcar, cuando se intenta terminar la compra
   ========================================================================== */

/*
 * Mismo color de alerta que WooCommerce usa en sus campos obligatorios, para
 * que el cliente reconozca el aviso sin tener que aprender nada nuevo.
 *
 * Va como sombra interior y no como borde: la caja del mapa recorta su
 * contenido con overflow, y un borde de verdad empujaría el lienzo dos píxeles
 * justo cuando aparece el error. Es el mismo recurso que usa la miniatura
 * activa de la galería.
 */
.pipol-mapa.tiene-error .pipol-mapa__caja {
	box-shadow: inset 0 0 0 2px var(--pipol-alerta);
}

.pipol-mapa.tiene-error .pipol-mapa__titulo {
	color: var(--pipol-alerta);
}

/* ==========================================================================
   Datos de facturación en la página de gracias y en «ver pedido»
   ========================================================================== */

.pipol-datos-factura {
	margin: 28px 0 0;
}

.pipol-datos-factura h2 {
	margin: 0 0 10px;
	font-size: 16px;
}

.pipol-datos-factura ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.7;
}

/* La etiqueta en versalitas, como el resto de los rótulos de la compra. */
.pipol-datos-factura li span {
	display: inline-block;
	min-width: 130px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

/* ==========================================================================
   Aviso de la búsqueda de RUC
   ========================================================================== */

.pipol-ruc-aviso:empty {
	display: none;
}

.pipol-ruc-aviso {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--pipol-texto-secundario);
}

/* Encontrado: una tilde, sin color. El verde del sitio es sólo de WhatsApp. */
.pipol-ruc-aviso.esta-listo::before {
	content: "✓";
	margin-right: 6px;
	font-weight: 700;
}

/* Suspendido o bloqueado en el padrón: eso sí se marca. */
.pipol-ruc-aviso.esta-ojo {
	color: var(--pipol-alerta);
}