/*
=========================================================
MI CUENTA
---------------------------------------------------------
Todo lo de aquí actúa sobre el marcado nativo de WooCommerce. El tema no
sobrescribe ninguna plantilla de `myaccount/`: la barra lateral, las pestañas
de móvil y las tarjetas de pedido salen de las clases y los atributos
`data-title` que WooCommerce ya imprime.

Se carga solo en las páginas de la cuenta (ver inc/enqueue.php).
=========================================================
*/

/* =========================================================
   LAYOUT
   ---------------------------------------------------------
   WooCommerce coloca la navegación y el contenido con `float` y anchos del
   30% y el 68%. Con la navegación en pastillas eso dejaba tres filas de
   pastillas apretadas a la izquierda y un hueco vertical enorme debajo.
========================================================= */

.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

/*
 * Colocación explícita en lugar de confiar en el auto-placement.
 *
 * WooCommerce puede insertar entre la navegación y el contenido nodos que no
 * controlamos (avisos, marcado de plugins), y cualquiera de ellos desplaza
 * los dos bloques principales de columna. Nombrar la celda de cada uno hace
 * que la barra lateral quede siempre a la izquierda, haya lo que haya en
 * medio, y de paso anula el `float` del plugin sin recurrir a !important.
 */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    grid-column: 1;
    grid-row: 2;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    grid-column: 2;
    grid-row: 2;
}

/* Los avisos y el formulario de acceso ocupan el ancho completo, en la fila
   de encima de las dos columnas. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .woocommerce-form-login,
.woocommerce-account .woocommerce > .woocommerce-form-register,
.woocommerce-account .woocommerce > .woocommerce-ResetPassword,
.woocommerce-account .woocommerce > .u-columns {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Sin avisos la primera fila no debe reservar el hueco del gap. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
    display: none;
}

/* Sin sesión no hay navegación: el formulario se centra en lugar de quedarse
   pegado a una columna vacía. */
.woocommerce-account:not(.logged-in) .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
}


/* =========================================================
   NAVEGACIÓN
   ---------------------------------------------------------
   Escritorio: barra lateral vertical.
   Móvil: pestañas horizontales con desplazamiento.

   Se eligió la pestaña horizontal frente al desplegable y al acordeón porque
   con seis o siete endpoints todas las opciones caben en dos gestos y siguen
   siendo enlaces reales: no hace falta JavaScript, funcionan con teclado sin
   añadir nada y no esconden el destino actual detrás de un control.
========================================================= */

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}

.woocommerce-MyAccount-navigation li a:hover {
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-light);
}

/*
 * Estado activo. El color no es la única señal: la barra lateral izquierda y
 * el peso de la tipografía lo acompañan, y el enlace lleva `aria-current`
 * desde la propia plantilla de WooCommerce.
 */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a[aria-current="page"] {
    position: relative;
    background: var(--bazinga-medium-surface);
    border-color: var(--bazinga-border-color);
    color: var(--bazinga-light);
    font-weight: 700;
}

.woocommerce-MyAccount-navigation li.is-active a::before,
.woocommerce-MyAccount-navigation li a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 22px;
    margin-top: -11px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bazinga-electric-purple);
}

/* Cerrar sesión se separa del resto: no es una sección, es una salida. */
.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--bazinga-border-color);
}


/* =========================================================
   ESCRITORIO DE LA CUENTA
========================================================= */

.woocommerce-MyAccount-content > p:first-child {
    color: var(--bazinga-text-secondary);
}

.bz-account-heading {
    margin: var(--space-8) 0 var(--space-4);
    font-family: var(--header-font);
    font-size: var(--h4-size);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.bz-account-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.bz-account-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-text-secondary);
    text-decoration: none;
    transition: border-color var(--transition-fast),
                transform var(--transition-fast);
}

.bz-account-action:hover,
.bz-account-action:focus-visible {
    border-color: var(--bazinga-purple);
    transform: translateY(-2px);
}

.bz-account-action__title {
    color: var(--bazinga-light);
    font-family: var(--header-font);
    font-size: 20px;
    text-transform: uppercase;
    line-height: 1.1;
}

.bz-account-action__text {
    font-family: var(--body-font);
    font-size: var(--small-text);
    line-height: 1.5;
}

.bz-account-more {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--bazinga-gold);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
}

.bz-account-more:hover,
.bz-account-more:focus-visible {
    text-decoration: underline;
}

/* Novedades sugeridas del escritorio. */

.bz-suggestions {
    margin-top: var(--space-8);
}

.bz-suggestions .bz-account-heading {
    margin-bottom: var(--space-1);
}

.bz-suggestions__why {
    margin: 0 0 var(--space-5);
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
}

/*
 * Rejilla propia y no `.products-grid`.
 *
 * La del catálogo va de cinco columnas a cuatro, tres y dos según el ancho, y
 * aquí se pintan cuatro tarjetas fijas: en el tramo de tres columnas la cuarta
 * se quedaba sola en una segunda fila. Con cuatro y dos, las cuatro cierran
 * fila entera en todos los anchos.
 */
.bz-suggestions__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1200px) {

    .bz-suggestions__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

/* Lista compacta de pedidos recientes del escritorio. */

.bz-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bz-order-list__item + .bz-order-list__item {
    border-top: 1px solid var(--bazinga-border-color);
}

.bz-order-list__item a {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.bz-order-list__item a:hover,
.bz-order-list__item a:focus-visible {
    background: var(--bazinga-dark);
}

.bz-order-list__number {
    color: var(--bazinga-light);
    font-weight: 700;
}

.bz-order-list__total {
    color: var(--bazinga-gold);
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   ESTADO DE PEDIDO
   ---------------------------------------------------------
   Los estados se agrupan por significado, no uno por color: pendiente y en
   espera comparten tratamiento, igual que cancelado y fallido.
========================================================= */

.bz-order-status {
    display: inline-block;
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-family: var(--body-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.7;
    text-transform: uppercase;
    white-space: nowrap;
}

.bz-order-status--completed {
    background: var(--bazinga-color-new);
    color: #0B2B16;
}

.bz-order-status--processing {
    background: var(--bazinga-electric-purple);
    color: var(--bazinga-light);
}

.bz-order-status--on-hold,
.bz-order-status--pending {
    background: var(--bazinga-color-preventa);
    color: #2B2205;
}

.bz-order-status--cancelled,
.bz-order-status--failed {
    background: var(--bazinga-color-agotado);
    color: var(--bazinga-light);
}

.bz-order-status--refunded {
    background: var(--bazinga-border-color);
    color: var(--bazinga-light);
}


/* =========================================================
   TABLA DE PEDIDOS
========================================================= */

.woocommerce-orders-table__cell-order-total .bz-order-total {
    display: block;
    color: var(--bazinga-gold);
    font-weight: 700;
}

.woocommerce-orders-table__cell-order-total .bz-order-items {
    display: block;
    color: var(--bazinga-text-secondary);
    font-size: 12px;
}

.woocommerce-orders-table__cell-order-actions {
    text-align: right;
}

.woocommerce-orders-table__cell-order-actions a + a {
    margin-left: var(--space-2);
}


/* =========================================================
   ESTADOS VACÍOS
========================================================= */

.bz-empty {
    padding: var(--space-8) var(--space-6);
    border: 1px dashed var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.bz-empty__title {
    margin: 0 0 var(--space-2);
    color: var(--bazinga-light);
    font-family: var(--header-font);
    font-size: 22px;
    text-transform: uppercase;
}

.bz-empty__text {
    margin: 0 0 var(--space-5);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

/*
 * WooCommerce imprime su propio «no hay pedidos» como aviso informativo con
 * un botón dentro. Se le da el mismo lenguaje que a bz-empty en lugar de
 * ocultarlo y duplicarlo: es un mensaje estándar del plugin y otros
 * componentes lo esperan.
 */
.woocommerce-MyAccount-content .woocommerce-message--info,
.woocommerce-MyAccount-content .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    border: 1px dashed var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: none;
    color: var(--bazinga-text-secondary);
    text-align: center;
}


/* =========================================================
   FORMULARIOS
========================================================= */

/* El navegador dibuja el fieldset de cambio de contraseña con su borde por
   defecto, que no pertenece a ningún sistema. */
.woocommerce-MyAccount-content fieldset {
    margin: var(--space-6) 0;
    padding: var(--space-6);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
}

.woocommerce-MyAccount-content fieldset legend {
    padding: 0 var(--space-3);
    color: var(--bazinga-light);
    font-family: var(--header-font);
    font-size: var(--h4-size);
    text-transform: uppercase;
}

/* El botón de mostrar contraseña de WooCommerce se superpone al campo. */
.woocommerce-password-hint,
.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
    color: var(--bazinga-text-secondary);
    font-size: var(--small-text);
}

.woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.woocommerce-LostPassword {
    margin-top: var(--space-4);
}

.woocommerce-LostPassword a {
    color: var(--bazinga-gold);
    font-size: var(--small-text);
}

.woocommerce-LostPassword a:hover,
.woocommerce-LostPassword a:focus-visible {
    text-decoration: underline;
}

/*
 * Direcciones: facturación y envío, una tarjeta cada una.
 *
 * Son siempre dos como mucho, así que la rejilla se declara con dos pistas y
 * no con `auto-fit`. Con `repeat(auto-fit, minmax(260px, 1fr))` el contenedor
 * de 1416px del escritorio generaba cuatro pistas para dos tarjetas: las dos
 * primeras quedaban vacías y las tarjetas se iban al centro de la fila.
 */
.woocommerce-Addresses.u-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

/* Con una sola dirección configurada, la tarjeta ocupa el ancho entero. */
.woocommerce-Addresses.u-columns:not(:has(.u-column2)) {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
    .woocommerce-Addresses.u-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * El reset del maquetado nativo necesita cuatro clases, no dos.
 *
 * WooCommerce declara `.woocommerce-page .col2-set .col-1 { float: left;
 * width: 48% }`, que son tres clases. Con dos, el `width: auto` de aquí
 * perdía y cada tarjeta se quedaba en el 48% de su pista: 161px de ancho en
 * una pista de 336px, con el título partido en tres líneas.
 *
 * El `float` lo ignora la rejilla, pero se anula igualmente para que el
 * bloque siga siendo legible sin rejilla.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 {
    float: none;
    width: auto;
}

/*
 * Y hay que retirar el clearfix, no solo los floats.
 *
 * `.col2-set` cierra sus floats con `::before` y `::after` en `display:
 * table`. En una rejilla esos dos pseudo-elementos dejan de ser un truco de
 * limpieza y pasan a ser celdas: el `::before` ocupaba la primera pista, así
 * que «Dirección de facturación» se iba a la segunda columna y «Dirección de
 * envío» bajaba a una segunda fila. Se veía como dos tarjetas descolocadas en
 * diagonal.
 */
.woocommerce-Addresses.u-columns.col2-set::before,
.woocommerce-Addresses.u-columns.col2-set::after,
.woocommerce-customer-details .woocommerce-columns.col2-set::before,
.woocommerce-customer-details .woocommerce-columns.col2-set::after {
    content: none;
}

.woocommerce-Addresses .u-column1,
.woocommerce-Addresses .u-column2 {
    padding: var(--space-6);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
}

.woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);

    /* El enlace de editar cae debajo del título si no caben en una línea. */
    flex-wrap: wrap;
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
    font-size: var(--h4-size);
    text-transform: uppercase;
}

/*
 * Sin `white-space: nowrap`. El texto que genera WooCommerce es «Editar
 * dirección de facturación», bastante más largo que el «Edit» del original,
 * y no dejarlo partir desbordaba la página hasta 81px a 320px de ancho.
 */
.woocommerce-Address-title .edit {
    color: var(--bazinga-gold);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 600;
}

.woocommerce-Address address {
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-style: normal;
    line-height: 1.7;
}


/* =========================================================
   DETALLE DE PEDIDO
========================================================= */

.woocommerce-order-details,
.woocommerce-customer-details {
    margin-bottom: var(--space-8);
}

.woocommerce-order-details__title,
.woocommerce-column__title {
    margin-bottom: var(--space-4);
    font-size: var(--h4-size);
    text-transform: uppercase;
}

/*
 * Facturación y envío del pedido: el mismo patrón nativo que las direcciones
 * de la cuenta, con los mismos dos problemas —el 48% gana por especificidad y
 * el clearfix ocupa una celda—, resueltos igual. El clearfix se retira arriba,
 * junto al de las direcciones.
 */
.woocommerce-customer-details .woocommerce-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

@media (max-width: 640px) {
    .woocommerce-customer-details .woocommerce-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.woocommerce-customer-details .woocommerce-columns.col2-set .col-1,
.woocommerce-customer-details .woocommerce-columns.col2-set .col-2 {
    float: none;
    width: auto;
}

.woocommerce-order .woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
}

.woocommerce-order .woocommerce-order-overview li {
    padding: var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--bazinga-light);
    font-size: var(--body-size);
    letter-spacing: 0;
    text-transform: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    /*
     * La navegación pasa a pestañas horizontales sobre el contenido. El
     * desplazamiento lateral se queda dentro de la barra: la página nunca
     * desborda.
     */
    .woocommerce-account .woocommerce {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    /*
     * Hay que deshacer la colocación explícita del escritorio. Con una sola
     * pista, `grid-column: 2` en el contenido crea una segunda columna
     * implícita a la derecha y el contenido se monta sobre las pestañas.
     */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        grid-column: 1;
        grid-row: 2;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        grid-column: 1;
        grid-row: 3;
    }

    .woocommerce-MyAccount-navigation {
        margin-inline: calc(var(--padding-x) * -1);
        padding-inline: var(--padding-x);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        gap: var(--space-2);
        width: max-content;
        min-width: 100%;
        padding-bottom: var(--space-2);
    }

    .woocommerce-MyAccount-navigation li a {
        border-color: var(--bazinga-border-color);
        border-radius: var(--radius-pill);
        white-space: nowrap;
    }

    /* En horizontal la barra lateral del activo se convierte en subrayado. */
    .woocommerce-MyAccount-navigation li.is-active a::before,
    .woocommerce-MyAccount-navigation li a[aria-current="page"]::before {
        left: var(--space-4);
        right: var(--space-4);
        top: auto;
        bottom: 4px;
        width: auto;
        height: 2px;
        margin-top: 0;
        border-radius: var(--radius-pill);
    }

    .woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        /* Separación visual sin romper la fila. */
        margin-left: var(--space-4);
    }
}

@media (max-width: 768px) {

    /*
     * La tabla de pedidos se convierte en tarjetas.
     *
     * WooCommerce ya trae su propio modo responsive (`shop_table_responsive`)
     * que pone las filas en `display: block` y saca el rótulo de cada celda
     * de su `data-title`. Aquí no se pelea con eso: se toma como base y se le
     * da forma de tarjeta. Los selectores replican la especificidad del
     * plugin (`.woocommerce table.shop_table_responsive tr`) porque si no, su
     * `display: block` gana al `display: grid` de aquí.
     */
    .woocommerce-orders-table {
        border: 0;
    }

    /*
     * La cabecera de la tabla la oculta woocommerce-smallscreen.css con
     * `display: none`. Se deja así a propósito y no se pelea con ello: en
     * modo tarjeta una fila de nombres de columna no aporta nada, y cada
     * celda lleva su propio rótulo desde `data-title`, que sí llega al árbol
     * de accesibilidad. El número de pedido conserva además su
     * `<th scope="row">`.
     */

    .woocommerce table.shop_table_responsive tbody tr.woocommerce-orders-table__row,
    .woocommerce-page table.shop_table_responsive tbody tr.woocommerce-orders-table__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding: var(--space-5);
        border: 1px solid var(--bazinga-border-color);
        border-radius: var(--radius-lg);
        background: var(--bazinga-medium-surface);
    }

    /*
     * `display: block` en el <th> deshace el `display: none` que
     * woocommerce-smallscreen.css aplica a `tbody th`: sin esto el número de
     * pedido, que es la celda de cabecera de la fila, desaparecía de la
     * tarjeta.
     *
     * El `!important` del alineado es deliberado y es el único del archivo.
     * El plugin declara `text-align: right !important` sobre estas celdas y
     * no hay especificidad que gane a un !important: la única forma de
     * alinear el texto a la izquierda es igualarlo.
     */
    .woocommerce table.shop_table_responsive tbody th.woocommerce-orders-table__cell,
    .woocommerce table.shop_table_responsive tbody td.woocommerce-orders-table__cell,
    .woocommerce-page table.shop_table_responsive tbody th.woocommerce-orders-table__cell,
    .woocommerce-page table.shop_table_responsive tbody td.woocommerce-orders-table__cell {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        text-align: left !important;
    }

    /* El rótulo de la columna. WooCommerce ya lo genera desde data-title; se
       reformatea con el lenguaje del tema. */
    .woocommerce table.shop_table_responsive tbody tr td::before,
    .woocommerce table.shop_table_responsive tbody tr th::before,
    .woocommerce-page table.shop_table_responsive tbody tr td::before,
    .woocommerce-page table.shop_table_responsive tbody tr th::before {
        content: attr(data-title);
        display: block;
        float: none;
        margin-bottom: 2px;
        color: var(--bazinga-text-secondary);
        font-family: var(--body-font);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .woocommerce-orders-table__cell-order-number {
        grid-column: 1 / -1;
    }

    .woocommerce-orders-table__cell-order-number a {
        color: var(--bazinga-light);
        font-family: var(--header-font);
        font-size: 20px;
    }

    .woocommerce-orders-table__cell-order-actions {
        grid-column: 1 / -1;
        text-align: left;
    }

    /* La fila de acciones no necesita rótulo: los botones se explican solos. */
    .woocommerce table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions::before,
    .woocommerce-page table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions::before {
        content: none;
    }

    .woocommerce-orders-table__cell-order-actions .button {
        width: 100%;
    }

    .bz-order-list__item a {
        grid-template-columns: 1fr auto;
        row-gap: var(--space-2);
    }
}

@media (max-width: 480px) {

    .woocommerce-orders-table__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .bz-account-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}