/* ==========================================
   WRAPPER DE WOOCOMMERCE
   ------------------------------------------
   Al declarar add_theme_support('woocommerce'), WooCommerce envuelve sus
   páginas en `<div id="primary" class="content-area"><main id="main"
   class="site-main">`. Ese wrapper no tiene ancho máximo propio, así que se
   le da el mismo comportamiento que `.container` del tema para que la
   tienda, la ficha y las categorías queden alineadas con el resto del sitio.
========================================== */

#primary.content-area {
    width: 100%;
    max-width: var(--max-page-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
}


/* ==========================================
   MIGAS DE PAN
   ------------------------------------------
   Aparecen con el wrapper. Antes no se renderizaban porque
   woocommerce_before_main_content no llegaba a dispararse.
========================================== */

.woocommerce-breadcrumb {
    margin: 0 0 24px;
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.5;
}

.woocommerce-breadcrumb a {
    color: var(--bazinga-text-secondary);
    transition: color .2s ease;
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus-visible {
    color: var(--bazinga-gold);
}

/* ==========================================
   CONTROLES DE WOOCOMMERCE
   ------------------------------------------
   WooCommerce estiliza sus campos y botones con selectores de alta
   especificidad (`.woocommerce form .form-row input.input-text`,
   `.woocommerce a.button`…), que ganan al sistema base del tema. Aquí se
   mapean esos controles al mismo sistema para que carrito, checkout y Mi
   cuenta dejen de mostrar cajas blancas y botones grises.

   No se usa !important: basta con igualar la especificidad del plugin.
========================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce .select2-container .select2-selection--single {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    background: var(--bazinga-dark);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--body-size);
    line-height: 1.4;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--bazinga-text-secondary);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.woocommerce form .form-row {
    margin-bottom: var(--space-5);
}

.woocommerce .required {
    color: var(--bazinga-color-agotado);
    text-decoration: none;
}

/* Botones: misma apariencia que .btn--primary del sistema. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce .button.alt,
.woocommerce button.button.alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-6);
    border: 1px solid var(--bazinga-purple);
    border-radius: var(--radius-md);
    background: var(--bazinga-purple);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--bazinga-electric-purple);
    border-color: var(--bazinga-electric-purple);
    color: var(--bazinga-light);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Tablas de carrito, pedidos y direcciones. */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    width: 100%;
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-md);
    border-collapse: collapse;
    color: var(--bazinga-light);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: var(--space-4);
    border-color: var(--bazinga-border-color);
    font-family: var(--body-font);
    font-size: var(--small-text);
}

.woocommerce table.shop_table th {
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Bloques con borde: login, cupón, totales, métodos de pago. */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce .cart_totals,
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce .woocommerce-order-details,
.woocommerce .woocommerce-customer-details {
    padding: var(--space-6);
    border: 1px solid var(--bazinga-border-color);
    border-radius: var(--radius-lg);
    background: var(--bazinga-medium-surface);
}

.woocommerce-checkout #payment {
    background: var(--bazinga-medium-surface);
}

.woocommerce-checkout #payment div.payment_box {
    background: var(--bazinga-dark);
    color: var(--bazinga-text-secondary);
    border-radius: var(--radius-md);
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--bazinga-dark);
}

/*
 * La navegación de Mi cuenta se estilaba aquí como una fila de pastillas.
 * Ese bloque se retiró al construir el área de cuenta del Épico 3: ahora es
 * una barra lateral en escritorio y una fila de pestañas desplazable en
 * móvil, y vive entera en assets/css/account.css, que solo se carga en esas
 * pantallas. Mantener las dos versiones significaba una batalla de
 * especificidad por cada propiedad.
 */

.page-title {
    margin: 0;
    font-size: var(--h2-size);
    font-family: var(--header-font);
    color: var(--bazinga-light);
    text-transform: uppercase;
    line-height: 1.1;
}

/* ==========================================
   CHECKOUT Y CARRITO DE BLOQUES
   ------------------------------------------
   Los fondos, bordes y colores de texto los resuelve el modo nativo
   `has-dark-controls`, que activa inc/woocommerce/blocks.php. Aquí solo se
   alinean radios y tipografía con el sistema del tema, sin duplicar lo que
   el plugin ya hace.
========================================== */

.wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
    border-radius: var(--radius-md);
    font-family: var(--body-font);
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
    font-family: var(--header-font);
}

.wc-block-components-button:not(.is-link) {
    min-height: 44px;
    border-radius: var(--radius-md);
    background: var(--bazinga-purple);
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wc-block-components-button:not(.is-link):hover {
    background: var(--bazinga-electric-purple);
}

.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-components-notice-banner {
    border-radius: var(--radius-lg);
}

/* Avisos de los bloques: el plugin los pinta con fondos claros y, sobre el
   texto claro del tema, quedaban ilegibles. */
.wc-block-components-notice-banner {
    border: 1px solid var(--bazinga-border-color);
    border-left-width: 3px;
    background: var(--bazinga-medium-surface);
    color: var(--bazinga-light);
}

.wc-block-components-notice-banner.is-error {
    background-color: var(--bazinga-color-agotado);
    border-left-color: var(--bazinga-color-agotado);
}

.wc-block-components-notice-banner.is-success {
    border-left-color: var(--bazinga-color-new);
}

.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
    border-left-color: var(--bazinga-electric-purple);
}

.wc-block-components-notice-banner>svg {
    fill: currentColor;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
    color: var(--bazinga-light);
    font-family: var(--body-font);
    font-size: var(--small-text);
}