/*
=========================================================
CHECKOUT
---------------------------------------------------------
La tienda usa el checkout CLÁSICO —el del shortcode—, no el de bloques. Esto
no es un detalle: el marcado de los dos no se parece en nada, y una hoja
escrita para `.wc-block-components-*` no toca ni un píxel del clásico. Hubo una
primera versión apuntando a los bloques que no hacía nada en producción.

Referencia rápida del marcado con el que se trabaja aquí:

  form.checkout
    #customer_details
      .col2-set > .col-1 (facturación) + .col-2 (envío y notas)
    #order_review_heading
    #order_review
      table.shop_table  ·  #payment > ul.payment_methods  ·  #place_order

Se carga solo en carrito y checkout (ver inc/enqueue.php).
=========================================================
*/

/* =========================================================
   CABECERA REDUCIDA
   ========================================================= */

/*
 * Se repite la clase para pasar de `header.bazinga-header`, que trae el
 * `position: sticky` y gana a un selector de una sola clase. Quedarse fija
 * mientras se rellena el formulario solo roba alto, y aquí no hay nada que
 * mantener a la vista: ni buscador, ni menú, ni carrito.
 */
header.bazinga-header.bazinga-header--checkout {
    position: static;
    border-bottom: 1px solid var(--bazinga-border-color);
    background: var(--bazinga-dark-surface);
}

/*
 * Tres columnas con el logotipo en la del medio. Centrarlo con la rejilla y
 * no con posicionamiento absoluto deja que el enlace de vuelta ocupe su sitio
 * real: si algún día el texto crece, empuja en lugar de solaparse.
 */
.bz-checkout-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    max-width: var(--max-page-width);
    margin-inline: auto;
    padding: var(--space-4) var(--padding-x);
}

.bz-checkout-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-self: start;
    /* Mismo mínimo táctil que el resto de controles del sitio. */
    min-height: 44px;
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
}

.bz-checkout-header__back:hover,
.bz-checkout-header__back:focus-visible {
    color: var(--bazinga-light);
}

.bz-checkout-header__back svg {
    display: block;
    flex: 0 0 auto;
}

.bz-checkout-header__logo {
    display: block;
    grid-column: 2;
    justify-self: center;
}

/*
 * Más grande que en el resto del sitio, y a propósito: en esta pantalla es lo
 * único que dice de quién es la tienda justo cuando se piden los datos de la
 * tarjeta. Al no haber barra de avisos ni menú, hay alto de sobra.
 */
.bz-checkout-header__logo .bazinga-logo {
    display: block;
    width: auto;
    height: 76px;
}

@media (max-width: 600px) {

    .bz-checkout-header {
        gap: var(--space-2);
        padding-block: var(--space-3);
    }

    .bz-checkout-header__logo .bazinga-logo {
        height: 56px;
    }

    /*
     * El texto se retira y queda la flecha: a 390px, «Seguir comprando»
     * empujaba el logotipo fuera del centro. El nombre accesible se conserva
     * en el atributo, así que para un lector de pantalla no cambia nada.
     */
    .bz-checkout-header__back span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}


/* =========================================================
   MAQUETACIÓN DEL CHECKOUT CLÁSICO
   ---------------------------------------------------------
   WooCommerce apila: facturación y envío en dos columnas flotadas al 50%, y
   el pedido entero a lo ancho debajo. En una pantalla de 1600px eso deja los
   campos de dirección en cajas de 745px —tres veces lo que necesita una
   comuna— y manda el importe total a 1200px de scroll, donde ya no acompaña
   a la decisión.

   Aquí el formulario va a la izquierda y el pedido a la derecha, fijo al
   hacer scroll: lo que se rellena y lo que se paga, a la vista a la vez.
   ========================================================= */

/*
 * La rejilla es del contenedor, no del formulario.
 *
 * El cupón de WooCommerce es un `<form>` propio que se imprime ANTES del
 * formulario de checkout y como hermano suyo. Meterlo en la columna derecha
 * anidando formularios no es una opción: el navegador descarta el interior y
 * el botón de aplicar acabaría enviando el pedido.
 *
 * Así que la rejilla se monta en el contenedor que ya los agrupa a los dos, y
 * el formulario de checkout se declara `display: contents` para que sus
 * bloques —datos, pedido, confianza— participen en esa misma rejilla. El
 * formulario sigue existiendo y enviándose igual; solo deja de dibujar caja.
 */
.woocommerce-checkout .woocommerce {
    /*
     * Separación del título de la página. La daba la franja del cupón, que
     * ocupaba el ancho justo debajo; al moverla a la columna derecha,
     * «Detalles de facturación» se quedó pegado a «Finalizar compra».
     */
    margin-top: var(--space-6);

    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    /*
     * Cinco filas de contenido y una última que absorbe el sobrante:
     *
     *   1  avisos               3  formulario de cupón
     *   2  aviso del cupón      4  título «Tu pedido»
     *                           5  la caja del pedido
     *
     * Cada una se ajusta a su contenido y colapsa a cero cuando está vacía
     * —el formulario de cupón empieza oculto—. La última se queda con el
     * hueco: sin eso, la columna izquierda —mucho más alta— repartía su
     * altura entre todas y dejaba 70px de aire entre «Tu pedido» y su caja.
     */
    grid-template-rows: auto auto auto auto 1fr;
    gap: var(--space-5) var(--space-8);
    align-items: start;
}

.woocommerce-checkout form.checkout {
    display: contents;
}

/*
 * Cada bloque declara su celda en lugar de confiar en el orden del marcado.
 * WooCommerce y sus extensiones insertan cosas en medio y cualquiera de ellas
 * desplazaría de columna al resto. Es el mismo problema que ya se resolvió así
 * en la página de Mi cuenta.
 *
 * Los avisos ocupan el ancho completo y van los primeros: un error de
 * validación no puede quedar escondido en una columna estrecha ni por debajo
 * del formulario.
 *
 * La segunda regla es consecuencia del `display: contents`: WooCommerce
 * inserta sus errores DENTRO de `form.checkout` con JavaScript, y sin caja
 * propia del formulario esos avisos pasan a ser celdas sueltas de esta
 * rejilla. Sin colocarlos, el error de «faltan campos obligatorios» aterrizaba
 * en una celda cualquiera.
 */
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-checkout form.checkout > .woocommerce-error,
.woocommerce-checkout form.checkout > .woocommerce-message,
.woocommerce-checkout form.checkout > .woocommerce-info,
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
}

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

/*
 * El aviso del cupón y su formulario van en filas distintas. En la misma se
 * solapaban: al desplegarlo, el campo se pintaba encima del texto que invita
 * a introducirlo.
 */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
    grid-column: 2;
    grid-row: 2;
}

.woocommerce-checkout form.checkout_coupon {
    grid-column: 2;
    grid-row: 3;
}

.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 2 / -1;
}

.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
}

.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 5;
    align-self: start;
    position: sticky;
    top: var(--space-6);
}

/*
 * Facturación y envío, uno debajo del otro.
 *
 * `.col2-set` los pone al 50% cada uno, que en la columna estrecha de este
 * diseño deja los campos a 190px. Son dos bloques que se rellenan en orden,
 * no dos cosas que se comparen.
 */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none;
    width: auto;
}

.woocommerce-checkout .col2-set .col-2 {
    margin-top: var(--space-6);
}


/* =========================================================
   CAMPOS
   ========================================================= */

/*
 * Rejilla de dos columnas en lugar de los floats al 47% de WooCommerce.
 *
 * Con floats, un campo que un plugin marque como `form-row-wide` en medio de
 * un par rompe la fila y el siguiente se sube. Con rejilla cada fila declara
 * dónde va y da igual el orden en que lleguen, que es justo lo que hace falta
 * en una tienda con campos añadidos —Rut, Región, Comuna—.
 */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.woocommerce-checkout .form-row {
    grid-column: 1 / -1;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/*
 * El ancho también se declara aquí. WooCommerce reparte el par con
 * `width: 47%` y un selector que gana al de arriba, así que dentro de una
 * celda de 542px los campos salían a 255 y quedaban dos islas con medio
 * formulario vacío al lado.
 */
.woocommerce-checkout form .form-row-first,
.woocommerce-checkout form .form-row-last,
.woocommerce-checkout form .form-row-wide {
    width: auto;
    float: none;
}

.woocommerce-checkout form .form-row-first {
    grid-column: 1;
}

.woocommerce-checkout form .form-row-last {
    grid-column: 2;
}

#customer_details .form-row label {
    display: block;
    margin-bottom: var(--space-2);
}

/* El asterisco de obligatorio, con color propio y sin el subrayado del UA. */
.woocommerce-checkout .required {
    color: var(--bazinga-gold);
    text-decoration: none;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select {
    width: 100%;
    min-height: 48px;
}

.woocommerce-checkout .form-row textarea.input-text {
    min-height: 96px;
    padding-top: var(--space-3);
}

/*
 * Colores propios en los campos del checkout.
 *
 * WooCommerce pinta `.input-text` con `var(--wc-form-color-background, #fff)`
 * y un selector de la misma especificidad que el del tema, así que decidía el
 * orden de carga y ganaba el plugin: el área de notas del pedido salía blanca
 * sobre fondo negro y el texto que se escribiera dentro habría sido invisible.
 *
 * Se redefinen sus propias variables además de poner los colores a mano. Así
 * lo que el plugin pinte por su cuenta —hoy o en una versión futura— sale ya
 * con los colores del tema en lugar de tener que perseguirlo regla a regla.
 */
.woocommerce-checkout {
    --wc-form-color-background: var(--bazinga-dark-surface);
    --wc-form-color-text: var(--bazinga-light);
    --wc-form-border-color: var(--bazinga-border-color);
}

.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
    background: var(--bazinga-dark-surface);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-sm, 8px);
    color: var(--bazinga-light);
    font-family: inherit;
    font-size: 15px;
}

.woocommerce-checkout form .form-row .input-text::placeholder,
.woocommerce-checkout form .form-row textarea::placeholder {
    color: var(--bazinga-text-secondary);
}

.woocommerce-checkout form .form-row .input-text:focus-visible,
.woocommerce-checkout form .form-row select:focus-visible,
.woocommerce-checkout form .form-row textarea:focus-visible {
    outline: 2px solid var(--bazinga-electric-purple);
    outline-offset: 1px;
}

/*
 * Cuando la tienda vende a un solo país, WooCommerce imprime el nombre en un
 * <strong> en lugar de un desplegable. Sin esto quedaba pegado a la etiqueta.
 */
.woocommerce-checkout .form-row .woocommerce-input-wrapper > strong {
    display: inline-block;
    padding-top: var(--space-1);
}


/* =========================================================
   EL PEDIDO
   ========================================================= */

.woocommerce-checkout #order_review_heading {
    font-family: var(--header-font);
    font-size: var(--h4-size);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.woocommerce-checkout #order_review {
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bazinga-medium-surface);
    overflow: hidden;
}

.woocommerce-checkout table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    font-size: var(--small-text);
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--bazinga-border-color);
    vertical-align: top;
}

.woocommerce-checkout table.shop_table thead th {
    color: var(--bazinga-text-secondary);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Los importes, a la derecha y con cifras de ancho fijo para que cuadren. */
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table tfoot td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.woocommerce-checkout table.shop_table .product-name {
    color: var(--bazinga-light);
}

/* La cantidad acompaña al título; no compite con él. */
.woocommerce-checkout table.shop_table .product-quantity {
    color: var(--bazinga-text-secondary);
}

.woocommerce-checkout table.shop_table tfoot th {
    color: var(--bazinga-text-secondary);
    font-weight: 600;
}

.woocommerce-checkout table.shop_table tfoot .order-total th,
.woocommerce-checkout table.shop_table tfoot .order-total td {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 0;
    color: var(--bazinga-light);
    font-size: var(--h5-size, 18px);
}

.woocommerce-checkout table.shop_table tfoot .order-total td {
    font-weight: 700;
}


/* =========================================================
   MEDIOS DE PAGO
   ========================================================= */

.woocommerce-checkout #payment {
    background: none;
    border-radius: 0;
    padding: var(--space-5);
    border-top: 1px solid var(--bazinga-border-color);
}

.woocommerce-checkout #payment ul.payment_methods {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

/*
 * Cada método es una caja entera, no solo su círculo.
 *
 * WooCommerce imprime un radio de 13px con la etiqueta al lado; con cuatro
 * pasarelas eso son cuatro objetivos diminutos en fila. La caja completa mide
 * lo que hay que medir para el dedo.
 */
/*
 * El radio y la etiqueta son hermanos, no anidados: en bloque, el círculo caía
 * en una línea y el nombre del método en la siguiente.
 *
 * Flex y no rejilla. Con `grid-template-columns: auto minmax(0,1fr)` las
 * columnas salían medidas al revés —217px la primera y 108 la segunda, con el
 * radio estirado a 92px de ancho— porque el «auto» se resolvía contra el
 * contenido equivocado. Con flex, el radio ocupa lo suyo, la etiqueta el
 * resto, y la descripción salta de línea por su `flex-basis: 100%`.
 */
.woocommerce-checkout #payment ul.payment_methods > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-sm, 8px);
    background: var(--bazinga-dark-surface);
    overflow: hidden;
}

.woocommerce-checkout #payment ul.payment_methods > li > label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    margin: 0;
    color: var(--bazinga-light);
    cursor: pointer;
}

/*
 * `width: auto` explícito: alguna regla del plugin lo estiraba a 92px y el
 * círculo dejaba de parecer un círculo.
 */
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] {
    flex: 0 0 auto;
    width: auto;
    /* El margen derecho separa el círculo de su texto: el `gap` de la etiqueta
       reparte entre los hijos de la etiqueta, no entre ella y el radio. */
    margin: 0 var(--space-3) 0 var(--space-4);
}

/* La descripción cuelga bajo los dos, no al lado del círculo. */
.woocommerce-checkout #payment ul.payment_methods > li > div.payment_box {
    flex: 1 1 100%;
}

/* El logotipo que algunas pasarelas añaden a su etiqueta. */
.woocommerce-checkout #payment ul.payment_methods > li label img {
    max-height: 28px;
    width: auto;
    margin-left: auto;
    float: none;
}

.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) {
    border-color: var(--bazinga-electric-purple);
    background: rgba(124, 58, 237, .12);
}

/* La descripción, dentro de su caja y no flotando en la página. */
.woocommerce-checkout #payment div.payment_box {
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-radius: 0;
    background: none;
    border-top: 1px dashed var(--bazinga-border-color);
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
}

/* WooCommerce le pone un triángulo apuntando al radio; dentro de la caja sobra. */
.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
    margin-top: var(--space-4);
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
}

/*
 * El botón de pagar, a lo ancho y con el alto de los demás botones grandes
 * del sitio. WooCommerce lo deja del tamaño de su texto y alineado a la
 * derecha: la acción final de la compra no puede ser el elemento más pequeño
 * de la pantalla.
 */
.woocommerce-checkout #payment #place_order {
    display: block;
    width: 100%;
    min-height: 56px;
    margin-top: var(--space-4);
    float: none;
    border-radius: 14px;
    background: var(--bazinga-purple);
    color: var(--bazinga-light);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.woocommerce-checkout #payment #place_order:hover {
    background: var(--bazinga-electric-purple);
}


/* =========================================================
   CUPÓN
   ========================================================= */

/* En una columna de 600px el aviso del cupón ya no necesita ser una franja. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--small-text);
}

.woocommerce-checkout form.checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px dashed var(--bazinga-border-color);
    border-radius: var(--radius-lg, 12px);
    background: var(--bazinga-medium-surface);
}

.woocommerce-checkout form.checkout_coupon p {
    margin: 0;
}

.woocommerce-checkout form.checkout_coupon .form-row {
    width: auto;
}

.woocommerce-checkout form.checkout_coupon .form-row .input-text {
    min-width: 0;
    min-height: 48px;
}

/* El campo se lleva el ancho y el botón lo que necesite. */
.woocommerce-checkout form.checkout_coupon .form-row-first {
    flex: 1 1 160px;
}


/* =========================================================
   MÓVIL
   ---------------------------------------------------------
   Una sola columna, y el pedido deja de ser fijo: en una pantalla de 844px de
   alto, un bloque pegado que ocupa la mitad no deja ver los campos.
   ========================================================= */

@media (max-width: 1024px) {

    .woocommerce-checkout .woocommerce {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .woocommerce-checkout .woocommerce-form-coupon-toggle,
    .woocommerce-checkout form.checkout_coupon,
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        grid-column: 1;
        grid-row: auto;
    }

    .woocommerce-checkout #order_review {
        position: static;
    }
}

@media (max-width: 600px) {

    /* Nombre y apellidos también se apilan: a 390px no caben dos campos. */
    .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Repite `form` igual que las reglas de escritorio. Sin eso perdía por
     * especificidad y `.form-row-last` seguía pidiendo la columna 2, que en
     * una rejilla de una sola columna se crea igual: los dos campos volvían a
     * salir en la misma fila, a 72px cada uno.
     */
    .woocommerce-checkout form .form-row-first,
    .woocommerce-checkout form .form-row-last {
        grid-column: 1;
    }

    .woocommerce-checkout table.shop_table th,
    .woocommerce-checkout table.shop_table td {
        padding-inline: var(--space-4);
    }

    .woocommerce-checkout #payment {
        padding: var(--space-4);
    }
}


/* =========================================================
   CONEXIÓN SEGURA
   ---------------------------------------------------------
   Una línea bajo el botón de pagar. Discreta a propósito: acompaña a la
   acción, no compite con ella.
   ========================================================= */

.bz-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
    /* En una columna estrecha la frase parte en dos y hay que centrar ambas. */
    text-align: center;
}

.bz-secure__icon {
    display: flex;
    /*
     * El candado no se centra con el bloque: se queda a la altura de la
     * primera línea. Cuando el texto parte en dos, un icono a media altura
     * queda flotando entre renglones y deja de leerse como parte de la frase.
     * 1.5 es la interlínea heredada, así que la mitad es el centro del primer
     * renglón; los 8px de la mitad del icono lo suben a su sitio.
     */
    align-self: flex-start;
    margin-top: calc(0.75em - 8px);
    color: var(--bazinga-electric-purple);
}

.bz-secure__icon svg {
    display: block;
}


/* =========================================================
   PIE REDUCIDO
   ---------------------------------------------------------
   Solo la franja inferior: copyright, medios de pago y enlaces legales. El
   marcado de las columnas ni siquiera se imprime (ver footer.php); esto solo
   ajusta lo que queda.
   ========================================================= */

.bazinga-footer--checkout {
    margin-top: var(--space-10);
}

/*
 * El relleno del pie está calculado para las cuatro columnas de enlaces: 70px
 * arriba, más 60 de separación de la franja inferior, más 25 de su propio
 * relleno. Sin columnas eso son 155px de nada entre el borde superior y el
 * copyright, que era casi todo el alto que ganaba el recorte.
 */
.bazinga-footer--checkout .container {
    padding-block: var(--space-6);
}

/*
 * Y sin nada encima, la línea de la franja inferior queda a un palmo del
 * borde del propio pie: dos separadores seguidos para separar una cosa.
 */
.bazinga-footer--checkout .footer-bottom {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--small-text);
}

.footer-legal a {
    color: var(--bazinga-text-secondary);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--bazinga-light);
    text-decoration: underline;
}


/* =========================================================
   BOTÓN DE WHATSAPP
   ---------------------------------------------------------
   Se queda: en el momento de pagar, una duda resuelta por WhatsApp evita más
   abandonos de los que provoca la distracción. Pero se aparta.

   El plugin lo suelta a 60px del borde derecho, que en una pantalla de 390px
   no es una esquina: es media pantalla adentro, justo sobre el centro de
   «Realizar el pedido». Llevado a los 16px de rigor pasa a solaparse con la
   punta del botón en lugar de con su centro, y deja de leerse como algo que
   se interpone.

   Los valores van en línea en el marcado del plugin, así que hay que marcar
   estas declaraciones para ganarles; no hay otra forma. `max()` respeta la
   franja del indicador de inicio del iPhone.
   ========================================================= */

@media (max-width: 768px) {

    .woocommerce-checkout .ht-ctc {
        right: var(--space-4) !important;
        bottom: max(var(--space-4), env(safe-area-inset-bottom)) !important;
    }
}