/*
Theme Name: Hello Elementor Child - My Basket
Theme URI: https://elementor.com/hello-theme/
Description: Tema hijo a medida para el ecosistema B2B y B2C de My Basket.
Author: Brandelicious
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Añade tu CSS personalizado a partir de aquí */

/* ============================================================
   ALÉRGENOS — Estilo base (refinar por Ochi)
   ============================================================ */
.mb-alergenos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mb-alergeno {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 4rem;          /* unidad relativa, no px (regla Brandelicious) */
    text-align: center;
}

.mb-alergeno__icono {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;  /* el icono no se deforma */
}

.mb-alergeno__nombre {
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 0.25rem;
}

/* Variante solo-iconos: añade la clase mb-alergenos--solo-iconos
   al contenedor (o envuélvelo) para ocultar los nombres y dejar
   solo los iconos con tooltip. Útil en tarjetas compactas. */
.mb-alergenos--solo-iconos .mb-alergeno__nombre {
    display: none;
}

/* ============================================================
   CARRITO — Fix bloque WooCommerce (Cart block) desplazado fuera
   de la vista.
   ============================================================
   El bloque nativo de carrito de WooCommerce añade la clase
   "alignwide", pensada para temas de bloques a pantalla completa:
   aplica un margen negativo (~-80px a cada lado) para que el bloque
   "sangre" más ancho que el contenido. El layout de Hello Elementor
   no reserva ese espacio extra, así que el margen negativo empuja la
   columna izquierda (descripción del producto/menú y componentes)
   fuera del viewport por la izquierda.
   ============================================================ */
.wp-block-woocommerce-cart.alignwide {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* ============================================================
   CHECKOUT B2B — Oculta la cabecera "Detalles de facturación"
   cuando el fieldset de facturación va vacío (Dominio H, regla H2).
   ============================================================ */
.mb-h-checkout-sin-facturacion .woocommerce-billing-fields {
    display: none;
}

/* ============================================================
   MI CUENTA — Rediseño: fondo granate de marca, pestañas
   horizontales centradas, formulario "solo subrayado".
   Todo acotado a body.woocommerce-account: no afecta al resto
   del sitio (cabecera y pie quedan intactos).
   ============================================================ */

body.woocommerce-account .site-main {
    background-color: #541728;
    color: #FEFCF7;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 4rem 1.5rem 5rem;
    box-sizing: border-box;
}

body.woocommerce-account .page-header,
body.woocommerce-account .page-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

body.woocommerce-account .entry-title {
    text-align: center;
    font-family: "Old Standard TT", serif;
    color: #FEFCF7;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 2.5rem;
}

/* Navegación: de columna lateral (float) a fila horizontal centrada */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin-bottom: 3rem;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    color: #FEFCF7;
    text-decoration: none;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid transparent;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    border-bottom-color: #EF8EA3;
}

/* Contenido: a ancho completo, centrado, formulario compacto */
body.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}
body.woocommerce-account .woocommerce-MyAccount-content form {
    max-width: 460px;
    margin: 0 auto;
}

/* Inputs "solo subrayado": sin caja, borde inferior claro */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Input,
body.woocommerce-account .woocommerce-MyAccount-content select {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(254, 252, 247, 0.5);
    border-radius: 0;
    color: #FEFCF7;
    padding: 0.5rem 0;
    width: 100%;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Input:focus {
    outline: none;
    border-bottom-color: #EF8EA3;
}
body.woocommerce-account .woocommerce-MyAccount-content label {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #FEFCF7;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}
body.woocommerce-account .woocommerce-MyAccount-content .form-row {
    margin-bottom: 1.75rem;
}
body.woocommerce-account .woocommerce-MyAccount-content .required {
    display: none;
}

/* Oculta "Nombre a mostrar": no está en el mockup, se conserva su valor */
body.woocommerce-account #account_display_name,
body.woocommerce-account label[for="account_display_name"],
body.woocommerce-account #account_display_name_description {
    display: none;
}
body.woocommerce-account .woocommerce-MyAccount-content p:has(> #account_display_name) {
    display: none;
}

/* Fieldset de contraseña: sin caja del navegador, solo espaciado */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
    border: none;
    padding: 0;
    margin: 2rem 0 0;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #FEFCF7;
    opacity: 0.7;
    margin-bottom: 1rem;
    padding: 0;
}

/* Botón "Guardar datos": outline, ancho completo */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid #FEFCF7;
    color: #FEFCF7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
    background-color: #FEFCF7;
    color: #541728;
}

/* Tablas (Pedidos anteriores) y direcciones: legibles sobre fondo oscuro */
body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-MyAccount-content th,
body.woocommerce-account .woocommerce-MyAccount-content td {
    color: #FEFCF7;
    border-color: rgba(254, 252, 247, 0.25);
}
body.woocommerce-account .woocommerce-MyAccount-content a {
    color: #EF8EA3;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
    max-width: 460px;
    margin: 0 auto 2rem;
    text-align: center;
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a {
    display: inline-block;
    border: 1px solid #FEFCF7;
    padding: 0.4rem 1rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #FEFCF7;
}

/* Enlace "Cerrar sesión" centrado bajo el contenido */
body.woocommerce-account .mb-account-logout {
    text-align: center;
    margin-top: 3rem;
}
body.woocommerce-account .mb-account-logout a {
    color: #FEFCF7;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* Formulario de acceso/registro que WooCommerce muestra en "Mi cuenta"
   cuando NO hay sesión iniciada (myaccount/form-login.php). Mismo lenguaje
   visual que wp-login.php (inputs "solo subrayado", botón outline), sobre
   el mismo fondo granate que ya tiene esta pantalla — no se toca nada más
   del diseño de Mi Cuenta. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
    max-width: 460px;
    margin: 0 auto;
}
/* El <h2>"Acceder" hereda el color granate global del kit (h2 { color:
   var(--e-global-color-c44b665) } pensado para fondos claros del resto del
   sitio) — sobre este fondo granate queda invisible. Se acota a
   .page-content para no tocar los <h2> reales del footer (que sí deben
   seguir en granate, están sobre fondo claro). */
body.woocommerce-account .page-content h2 {
    color: #FEFCF7;
    font-family: "Old Standard TT", serif;
    font-size: 1.75rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1.5rem;
}
body.woocommerce-account #customer_login {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
}
body.woocommerce-account #customer_login .u-column1,
body.woocommerce-account #customer_login .u-column2 {
    flex: 1;
    min-width: 300px;
}
body.woocommerce-account .woocommerce-form-login label,
body.woocommerce-account .woocommerce-form-register label {
    display: block;
    color: #FEFCF7;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
body.woocommerce-account .woocommerce-form-login .woocommerce-Input,
body.woocommerce-account .woocommerce-form-register .woocommerce-Input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(254, 252, 247, 0.7);
    border-radius: 0;
    box-shadow: none;
    color: #FEFCF7;
    width: 100%;
    padding: 0.5rem 0;
}
body.woocommerce-account .woocommerce-form-login .woocommerce-Input:focus,
body.woocommerce-account .woocommerce-form-register .woocommerce-Input:focus {
    border-bottom-color: #FEFCF7;
    outline: none;
    box-shadow: none;
}
body.woocommerce-account .woocommerce-form-login .form-row,
body.woocommerce-account .woocommerce-form-register .form-row {
    margin-bottom: 1.5rem;
}
body.woocommerce-account .woocommerce-form-login .required,
body.woocommerce-account .woocommerce-form-register .required {
    display: none;
}
body.woocommerce-account .woocommerce-form-login__rememberme {
    color: #FEFCF7;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 1.25rem;
}
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid #FEFCF7;
    color: #FEFCF7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-register__submit:hover {
    background-color: #FEFCF7;
    color: #541728;
}
body.woocommerce-account .woocommerce-LostPassword {
    text-align: center;
    margin-top: 1.25rem;
}
body.woocommerce-account .woocommerce-LostPassword a {
    color: rgba(254, 252, 247, 0.8);
    font-size: 0.8rem;
    text-decoration: underline;
}

/* ============================================================
   CARRITO — Rediseño "Tu pedido" (carrito clásico [woocommerce_cart]).
   Todo acotado a body.woocommerce-cart.
   ============================================================ */

body.woocommerce-cart .site-main {
    background-color: #FEFCF7;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 4rem 1.5rem 5rem;
    box-sizing: border-box;
}

body.woocommerce-cart .page-header,
body.woocommerce-cart .page-content {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

body.woocommerce-cart .entry-title {
    font-family: "Old Standard TT", serif;
    color: #2B2B2B;
    font-size: 2.75rem;
    margin-bottom: 2.5rem;
}

/* Tabla: quitar apariencia por defecto del navegador */
body.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
}

/* Reordena visualmente las columnas al orden del mockup (Productos /
   Cantidad / Precio Ud. / Precio Total / papelera) sin tocar el HTML: el
   template clásico las genera en otro orden (papelera primero, precio
   antes que cantidad). display:contents en table/thead/tbody deja pasar
   las <tr> como items directos de un grid con columnas fijas; cada celda
   real se reubica por su clase via grid-column, así que sigue siendo
   HTML de tabla normal, solo se pinta en otro orden. */
body.woocommerce-cart table.shop_table.cart {
    display: grid;
}
body.woocommerce-cart table.shop_table.cart thead,
body.woocommerce-cart table.shop_table.cart tbody {
    display: contents;
}
body.woocommerce-cart table.shop_table.cart tr {
    display: grid;
    grid-template-columns: 90px 2.5fr 1fr 1fr 1fr 40px;
    align-items: center;
    grid-column: 1 / -1;
}
body.woocommerce-cart table.shop_table.cart .product-thumbnail { grid-column: 1; grid-row: 1; }
body.woocommerce-cart table.shop_table.cart .product-name      { grid-column: 2; grid-row: 1; }
body.woocommerce-cart table.shop_table.cart .product-quantity  { grid-column: 3; grid-row: 1; }
body.woocommerce-cart table.shop_table.cart .product-price     { grid-column: 4; grid-row: 1; }
body.woocommerce-cart table.shop_table.cart .product-subtotal  { grid-column: 5; grid-row: 1; }
body.woocommerce-cart table.shop_table.cart .product-remove    { grid-column: 6; grid-row: 1; }

body.woocommerce-cart table.shop_table thead th {
    text-align: left;
    text-transform: uppercase;
    font-family: "Figtree", sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #2B2B2B;
    padding: 0 0.75rem 0.75rem;
    /* !important: gana al reset general de más abajo (border:none!important
       en td/th), que a su vez necesita !important para ganarle al borde gris
       de fábrica de reset.css — ver comentario ahí. */
    border-bottom: 1px solid rgba(51, 109, 107, 0.3) !important;
}

body.woocommerce-cart table.shop_table tr.cart_item {
    border-bottom: 1px solid rgba(51, 109, 107, 0.2);
}
/* Dos reglas ajenas pintan un borde gris de fábrica en CADA celda de
   cualquier tabla: hello-elementor/assets/css/reset.css ("table td,table th
   {border:1px solid hsla(0,0%,50%,.502)}", pensado para tablas de contenido
   normales) y WooCommerce ("table.shop_table td{border-top:...}"). Ninguna
   de las dos se nota en una tabla de filas normales, pero al convertir la
   fila en CSS Grid ese borde por celda suelta se ve como una cuadrícula. Se
   fuerza a none con !important porque, pese a tener más especificidad, la
   regla de reset.css seguía ganando (confirmado inspeccionando
   document.styleSheets en vivo). */
body.woocommerce-cart table.shop_table td,
body.woocommerce-cart table.shop_table th {
    border: none !important;
    background: transparent;
}
body.woocommerce-cart table.shop_table td {
    padding: 1.25rem 0.75rem;
    vertical-align: middle;
}
body.woocommerce-cart td.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
}
body.woocommerce-cart td.product-name a {
    font-family: "Old Standard TT", serif;
    font-size: 1.25rem;
    color: #2B2B2B;
    text-decoration: none;
}

/* Cantidad: input + botones −/+ */
body.woocommerce-cart td.product-quantity .quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
body.woocommerce-cart td.product-quantity input.qty {
    width: 2.5rem;
    text-align: center;
    border: none;
    background: transparent;
    font-family: "Figtree", sans-serif;
    font-size: 1rem;
    color: #2B2B2B;
    -moz-appearance: textfield;
}
body.woocommerce-cart td.product-quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-cart td.product-quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.woocommerce-cart .mb-qty-minus,
body.woocommerce-cart .mb-qty-plus {
    background: transparent;
    border: none;
    color: #336D6B;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

/* Precio unidad / total: texto simple */
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
    font-family: "Figtree", sans-serif;
    color: #2B2B2B;
}

/* Quitar: cupón, botón "Actualizar carrito" */
body.woocommerce-cart .coupon,
body.woocommerce-cart button[name="update_cart"] {
    display: none;
}

/* Icono de papelera en vez de "×" */
body.woocommerce-cart td.product-remove a.remove {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23336D6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
}

/* Totales: quitar cabecera y subtotal suelto, dejar envío + total en
   una sola línea a lo largo de todo el ancho de la página.
   La tabla no trae thead, así que el navegador le inserta un tbody
   implícito: se le pone display:contents (mismo truco que en la tabla
   de productos, ver comentario más arriba) para que sus <tr> pasen a
   ser hijos directos del flex de la tabla. */
body.woocommerce-cart .cart_totals h2 {
    display: none;
}
body.woocommerce-cart .cart-subtotal {
    display: none;
}
body.woocommerce-cart .cart_totals table.shop_table {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 3rem;
    row-gap: 1rem;
    width: 100%;
    border: none;
    border-top: 1px solid rgba(51, 109, 107, 0.3);
    padding-top: 1.75rem;
}
body.woocommerce-cart .cart_totals table.shop_table tbody {
    display: contents;
}

/* Envío: lado izquierdo de la línea */
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    order: 1;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping th,
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping td {
    border: none;
    padding: 0;
    width: auto;
    font-family: "Figtree", sans-serif;
    font-size: 0.95rem;
    color: #2B2B2B;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals.shipping th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: #7A7A7A;
}

/* Total: lado derecho de la línea */
body.woocommerce-cart .order-total {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    order: 2;
    margin-left: auto;
}
body.woocommerce-cart .order-total th {
    font-family: "Old Standard TT", serif;
    font-size: 1.5rem;
    color: #2B2B2B;
    border: none;
    padding: 0;
}
body.woocommerce-cart .order-total td {
    text-align: right;
    border: none;
    padding: 0;
}
body.woocommerce-cart .order-total .woocommerce-Price-amount {
    font-family: "Old Standard TT", serif;
    font-size: 2rem;
    font-weight: 700;
    color: #2B2B2B;
}
body.woocommerce-cart .order-total td::after {
    content: "(IVA incluido)";
    display: block;
    font-family: "Figtree", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: #7A7A7A;
    text-align: right;
}

/* Móvil: la línea envío/total se apila en vez de recortarse */
@media (max-width: 640px) {
    body.woocommerce-cart .cart_totals table.shop_table {
        flex-direction: column;
    }
    body.woocommerce-cart .order-total {
        margin-left: 0;
    }
}

/* Botón "Tramitar pedido" */
body.woocommerce-cart .wc-proceed-to-checkout {
    text-align: right;
    margin-top: 2rem;
}
/* WooCommerce trae ".woocommerce a.button.alt{background-color:#7f54b3}"
   (el morado por defecto) con más especificidad que un solo ".checkout-button"
   (1 clase). El botón real lleva las clases "checkout-button button alt", así
   que se repiten todas para ganarle en especificidad sin usar !important. */
body.woocommerce-cart a.checkout-button.button.alt {
    display: inline-block;
    background-color: #336D6B;
    color: #FEFCF7;
    font-family: "Figtree", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
body.woocommerce-cart a.checkout-button.button.alt:hover {
    background-color: #2a5a58;
    color: #FEFCF7;
}

/* MB — botones carrito
   ============================================================
   "Ver carrito" y "Finalizar compra" del mini-carrito de Elementor
   (widget WooCommerce Menu Cart en la cabecera, .elementor-menu-cart__
   footer-buttons) venían con la tipografía "Primary" del kit de Elementor
   (Old Standard TT, la de títulos) en vez de la fuente de texto/botones del
   sitio (Figtree). Se repiten aquí las mismas clases que genera Elementor
   en post-1111.css para igualar su especificidad (3 clases + 1 elemento)
   sin recurrir a !important, y se aplica la misma paleta granate/teal que
   ya usan el resto de botones del carrito (.checkout-button.button.alt y
   los botones dentro de .woocommerce-message).
   ============================================================ */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
    font-family: "Figtree", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #336D6B;             /* teal, como los demás botones del carrito */
    color: #FEFCF7;                         /* crema */
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
    background-color: #541728;             /* granate al pasar, igual que .woocommerce-message a.button */
    color: #FEFCF7;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
    background-color: #2a5a58;             /* teal oscurecido, igual que .checkout-button.button.alt */
    color: #FEFCF7;
}

/* MB — ficha de menú composite (WPC)
   ============================================================
   Presentación del formulario de selección de componentes que genera
   wpc-composite-products-premium (includes/class-wooco.php) en la ficha de
   producto. Acotado a body.single-product .wooco-wrap: el carrito y la
   tienda no renderizan este formulario interactivo (solo muestran el
   resumen ya elegido), así que no hace falta acotar más.
   ============================================================ */

/* 1. Oculta el check de selección en TODOS los componentes del composite
   (Entrante, Principal, Postre, Llévate también, Pan, Cubiertos y
   cualquier componente futuro como Bebida) — no solo cuando hay una única
   opción. El plugin usa dos mecanismos distintos según el layout:
     - Layout "list" (Pan, Cubiertos): .wooco_component_product_selection_
       list_item_choose, un <span> decorativo (círculo + ✓ por ::before).
     - Layout "ddslick"/dropdown (Entrante, Principal, Postre): un checkbox
       real .wooco-checkbox dentro de .wooco_component_product_checkbox.
       Solo se pinta cuando la config global "checkbox" está activada, y en
       estos tres siempre sale disabled+checked (son required) — puramente
       decorativo, no se pierde interactividad al ocultarlo. El plugin ya
       deja el <select> como único control real de selección en ese layout.
   Ojo: si "Bebida" (u otro futuro) fuese un componente dropdown OPCIONAL
   (no required), este checkbox SÍ sería interactivo (permite excluirlo);
   se ocultaría igualmente por instrucción, pero el "no gracias" del propio
   <select> sigue disponible como alternativa para desmarcarlo.
   El plugin ya tiene .wooco_component_product_selection_list_item_info a
   flex-grow:1, así que el nombre ocupa el hueco solo, sin CSS adicional. */
body.single-product .wooco-wrap .wooco_component_product_selection_list_item_choose,
body.single-product .wooco-wrap .wooco_component_product_checkbox {
    display: none;
}

/* 2. Quita la imagen/placeholder de los ítems en Pan y Cubiertos: no son
   platos con foto real, solo dejaban un recuadro de imagen vacío.
   data-name es el nombre real del componente configurado en WPC, no
   depende del orden en que estén colocados. */
body.single-product .wooco-wrap .wooco_component_product[data-name="Pan"] .wooco_component_product_selection_list_item_image,
body.single-product .wooco-wrap .wooco_component_product[data-name="Cubiertos"] .wooco_component_product_selection_list_item_image {
    display: none;
}

/* 3. Pan y Cubiertos en paralelo (una fila), en vez de apilados. El resto
   de componentes (Entrante/Principal/Postre/Llévate también) se quedan
   ocupando el 100% de su fila, igual que antes. */
body.single-product .wooco-wrap .wooco_components {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
}
body.single-product .wooco-wrap .wooco_components > .wooco_component {
    flex: 1 1 100%;
}
body.single-product .wooco-wrap .wooco_components > .wooco_component:has(.wooco_component_product[data-name="Pan"]),
body.single-product .wooco-wrap .wooco_components > .wooco_component:has(.wooco_component_product[data-name="Cubiertos"]) {
    flex: 1 1 calc(50% - 12px);
}

/* 4. "Check sencillo con el nombre al lado": ya es el comportamiento de
   fábrica del plugin (frontend.scss:500-568) — .wooco_component_product_
   selection_list_item es flex, con el check (círculo + ✓) a la izquierda
   del nombre. Con los puntos 1-3 aplicados no hace falta CSS adicional
   aquí; si algún día Pan/Cubiertos tienen más de una opción, el check
   sencillo ya sale así por defecto. */

/* 5. Ítem de componente (Guarniciones, Base, Proteína, Toppings...) bloqueado
   en vivo al llegar al máximo del componente (ver mb-limites-componentes.js,
   que añade/quita esta clase). Se mantiene el nombre antiguo como alias por
   compatibilidad. */
.wooco_component_product_selection_item.mb-item-bloqueado,
.wooco_component_product_selection_item.mb-guarnicion-bloqueada {
    opacity: 0.45;
    transition: opacity .15s;
}

/* MB — Carrito: ocultar el <dt> vacío de la fila "Components" del composite
   ============================================================
   Plan B del filtro woocommerce_get_item_data en functions.php (p20): al
   vaciar el 'key' de esa fila para quitar la etiqueta, el template nativo
   de WooCommerce (cart/cart-item-data.php) sigue pintando el ":" fijo
   ("<dt>{key}:</dt>", el ":" no depende del contenido del key). No hay
   forma de evitarlo solo con PHP sin sobrescribir el template de WC, así
   que se oculta aquí el <dt> ya vacío. El selector es seguro: WooCommerce
   solo genera class="variation-" (sin nada tras el guion) cuando el key
   llega vacío, cosa que hoy únicamente provoca nuestro propio filtro —
   ninguna variación real de producto tiene key vacío.
   ============================================================ */
.wooco-cart-item dt.variation- {
    display: none;
}

/* ============================================================
   CONTÁCTANOS — Formulario de solicitud B2B ("Cuéntanos qué necesitas").
   Mismo lenguaje visual que Mi Cuenta/Carrito: fondo granate a ancho
   completo, título grande serif centrado, inputs "solo subrayado".
   Acotado a body.page-contactanos (clase que WP añade sola por el slug de
   la página), no afecta a ninguna otra página del sitio.
   ============================================================ */
body.page-contactanos .site-main {
    background-color: #541728;
    color: #FEFCF7;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 4rem 1.5rem 6rem;
    box-sizing: border-box;
}
body.page-contactanos .page-header,
body.page-contactanos .page-content {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
body.page-contactanos .entry-title {
    font-family: "Old Standard TT", serif;
    color: #FEFCF7;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 2.5rem;
}

body.page-contactanos .mb-contacto-row {
    margin-bottom: 1.75rem;
}
body.page-contactanos .mb-contacto-row label {
    display: block;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #FEFCF7;
    opacity: 0.85;
    margin-bottom: 0.5rem;
}
body.page-contactanos .mb-contacto-row input,
body.page-contactanos .mb-contacto-row textarea {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(254, 252, 247, 0.5);
    border-radius: 0;
    color: #FEFCF7;
    font-family: "Figtree", sans-serif;
    font-size: 1rem;
    padding: 0.5rem 0;
    resize: vertical;
    box-sizing: border-box;
}
body.page-contactanos .mb-contacto-row input:focus,
body.page-contactanos .mb-contacto-row textarea:focus {
    outline: none;
    border-bottom-color: #EF8EA3;
}
body.page-contactanos .mb-contacto-submit {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid #FEFCF7;
    color: #FEFCF7;
    font-family: "Figtree", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
body.page-contactanos .mb-contacto-submit:hover {
    background-color: #FEFCF7;
    color: #541728;
}
body.page-contactanos .mb-contacto-exito {
    font-family: "Figtree", sans-serif;
    font-size: 1.1rem;
}
body.page-contactanos .mb-contacto-errores {
    color: #EF8EA3;
    font-family: "Figtree", sans-serif;
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
}

/* ============================================================
   MB — Avisos de WooCommerce con la paleta de My Basket
   ============================================================
   Los avisos (.woocommerce-message / -error / -info) ya heredan la
   fuente del sitio (Figtree, kit de Elementor); solo desentonaban por
   los colores por defecto de WooCommerce (borde morado/azul/rojo, fondo
   gris). Aquí se reestilan con la paleta granate #541728 / crema #FEFCF7
   / rosa #EF8EA3 / teal #336D6B, sin tocar la estructura ni la mecánica.
   ============================================================ */

/* Base común a los tres tipos */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background-color: #FEFCF7;            /* crema */
    color: #2B2B2B;                        /* texto oscuro legible */
    border: 1px solid rgba( 84, 23, 40, 0.15 );
    border-top: 3px solid #541728;         /* granate: acento por defecto */
    border-radius: 6px;
    padding: 1.1em 1.5em 1.1em 3.2em;
    box-shadow: 0 2px 10px rgba( 84, 23, 40, 0.06 );
    font-family: "Figtree", sans-serif;    /* explícito, por si algún contexto no lo hereda */
}

/* Botón que a veces acompaña al aviso (p.ej. "Ver carrito") */
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button {
    background-color: #336D6B;             /* teal, como los botones del carrito */
    color: #FEFCF7;
    border-radius: 4px;
}
.woocommerce-message a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-info a.button:hover {
    background-color: #541728;             /* granate al pasar */
}

/* Enlaces dentro del aviso */
.woocommerce-message a,
.woocommerce-info a {
    color: #541728;
    text-decoration: underline;
}

/* SUCCESS — verde de marca (granate suave, tono positivo con la paleta) */
.woocommerce-message {
    border-top-color: #336D6B;             /* teal = confirmación */
}
.woocommerce-message::before {
    color: #336D6B;
}

/* INFO — rosa de marca (avisos neutros, p.ej. "solo 2 guarniciones") */
.woocommerce-info {
    border-top-color: #EF8EA3;             /* rosa */
}
.woocommerce-info::before {
    color: #EF8EA3;
}

/* ERROR — se mantiene un rojo, pero más sobrio y acorde */
.woocommerce-error {
    border-top-color: #b81c23;
    background-color: #FEF6F6;
}
.woocommerce-error::before {
    color: #b81c23;
}
.woocommerce-error li {
    color: #2B2B2B;
}

/* ============================================================
   BUSCADOR — Panel desplegable desde la lupa de la cabecera
   ============================================================ */
.mb-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #FEFCF7;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.mb-search-overlay.is-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
body.mb-search-open {
    overflow: hidden;
}
.mb-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px;
}
.mb-search-input {
    flex: 1 1 auto;
    border: none;
    border-bottom: 2px solid #EF8EA3;
    background: transparent;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: #2B2B2B;
    padding: 6px 2px;
}
.mb-search-input:focus {
    outline: none;
    border-bottom-color: #541728;
}
.mb-search-submit {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #541728;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
}
.mb-search-submit:hover {
    color: #336D6B;
}
.mb-search-close {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #541728;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.mb-search-close:hover {
    color: #336D6B;
}