body.woocommerce-cart header {
        position: initial !important;
}

#cart_section .woocommerce {
        --cart-radius: 16px;
        --cart-field-radius: 10px;
        --cart-focus: 0 0 0 3px rgba(166, 190, 15, .18);
        --cart-error: #e2401c;
        max-width: 100%;
        margin: 0 auto;
        font-family: var(--secondary-font);
        color: var(--text-color);
}

/* Con productos: reservas + resumen. Sin productos, el bloque 7 centra el aviso. */
#cart_section .woocommerce:has(.woocommerce-cart-form) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-areas:
                "notices notices"
                "items   summary";
        align-items: start;
        gap: 24px 32px;
}

#cart_section .woocommerce-notices-wrapper {
        grid-area: notices;
        display: flex;
        flex-direction: column;
        gap: 8px;
}

#cart_section .woocommerce-notices-wrapper:not(:has(*)) {
        display: none;
}

#cart_section .woocommerce-cart-form {
        grid-area: items;
        margin: 0;
}

#cart_section .cart-collaterals {
        grid-area: summary;
        position: sticky;
        top: 24px;
        width: auto;
}

/* --------------------------------------------------------------------------
   2. Reservas: la tabla de WooCommerce se pinta como tarjetas
   -------------------------------------------------------------------------- */
#cart_section table.shop_table.cart {
        display: block;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
}

#cart_section table.shop_table.cart thead {
        display: none;
}

#cart_section table.shop_table.cart tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
}

#cart_section table.shop_table.cart tr.cart_item {
        position: relative;
        display: grid;
        box-sizing: border-box;
        grid-template-columns: 112px minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr;
        grid-template-areas:
                "thumb info total"
                "thumb info remove";
        gap: 0 20px;
        padding: 20px;
        background: var(--featured-card-color);
        border: 1px solid var(--border-color);
        border-radius: var(--cart-radius);
}

#cart_section table.shop_table.cart tr.cart_item td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
}

/* Las reservas siempre van de una en una: precio = subtotal y la cantidad no se toca. */
#cart_section table.shop_table.cart tr.cart_item td.product-price,
#cart_section table.shop_table.cart tr.cart_item td.product-quantity {
        display: none;
}

/* Imagen */
#cart_section table.shop_table.cart td.product-thumbnail {
        grid-area: thumb;
}

#cart_section table.shop_table.cart td.product-thumbnail a {
        display: block;
}

#cart_section table.shop_table.cart td.product-thumbnail img {
        display: block;
        width: 112px;
        height: 112px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: none;
}

/* Nombre y datos de la reserva */
#cart_section table.shop_table.cart td.product-name {
        grid-area: info;
        min-width: 0;
}

#cart_section td.product-name .yith-wcbk-booking-of {
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--primary-color);
}

#cart_section td.product-name > a {
        font-family: var(--primary-font);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--title-color);
        text-decoration: none;
        transition: color .2s;
}

#cart_section td.product-name > a:hover {
        color: var(--primary-color);
}

/* Ficha de la reserva:
   ┌ RECOGIDA ──────┐ ┌ DEVOLUCIÓN ────┐
   │ 25/10/2026     │ │ 31/10/2026     │
   │ 9:30           │ │ 12:30          │
   └────────────────┘ └────────────────┘
   DURACIÓN            SEGURO
   INCLUIDO (a todo el ancho)
   Desglose del precio, en gris
   Cada dato va a su celda por la clase que pone YITH (variation-…). Si una etiqueta
   se renombra en YITH cambia su clase y ese dato cae al final con su texto original. */
#cart_section td.product-name dl.variation {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(12px, auto);
        gap: 0 10px;
        max-width: 520px;
        margin: 16px 0 0;
        padding: 0;
        border: 0;
}

#cart_section td.product-name dl.variation dt,
#cart_section td.product-name dl.variation dd {
        float: none;
        clear: none;
        margin: 0;
        padding: 0;
}

/* YITH mete los valores en <p> o <div>: sin esto, fechas y horas salen a tamaños distintos. */
#cart_section td.product-name dl.variation dd,
#cart_section td.product-name dl.variation dd p,
#cart_section td.product-name dl.variation dd div {
        margin: 0;
        font-family: var(--secondary-font);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.45;
        color: var(--text-color);
}

/* Etiquetas: pequeñas y en mayúsculas. */
#cart_section td.product-name dl.variation dt,
#cart_section td.product-name dl.variation dt::before {
        font-family: var(--secondary-font);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--text-grey-color);
}

/* Las conocidas cambian «De:», «A:»… por un nombre claro y sin dos puntos. */
#cart_section td.product-name dl.variation dt.variation-De,
#cart_section td.product-name dl.variation dt.variation-A,
#cart_section td.product-name dl.variation dt.variation-Duracin,
#cart_section td.product-name dl.variation dt.variation-Seguro,
#cart_section td.product-name dl.variation dt.variation-Serviciosdereserva {
        font-size: 0;
        line-height: 0;
}

#cart_section td.product-name dl.variation dt.variation-De::before { content: "Recogida"; display: block; }
#cart_section td.product-name dl.variation dt.variation-A::before { content: "Devolución"; display: block; }
#cart_section td.product-name dl.variation dt.variation-Duracin::before { content: "Duración"; display: block; }
#cart_section td.product-name dl.variation dt.variation-Seguro::before { content: "Seguro"; display: block; }
#cart_section td.product-name dl.variation dt.variation-Serviciosdereserva::before { content: "Incluido"; display: block; }

/* La hora va dentro de la tarjeta de su fecha, sin etiqueta propia. */
#cart_section td.product-name dl.variation dt.variation-Horaderecogida,
#cart_section td.product-name dl.variation dt.variation-Horadeentrega {
        display: none;
}

/* Tarjetas de recogida y devolución: el fondo lo pintan ::before y ::after del dl. */
#cart_section td.product-name dl.variation::before,
#cart_section td.product-name dl.variation::after {
        content: "";
        display: block;
        grid-row: 1 / 4;
        background: rgba(255, 255, 255, .03);
        border: 1px solid var(--separator-color);
        border-radius: 12px;
}

#cart_section td.product-name dl.variation::before { grid-column: 1; }
#cart_section td.product-name dl.variation::after { grid-column: 2; }

#cart_section td.product-name dl.variation .variation-De,
#cart_section td.product-name dl.variation .variation-Horaderecogida {
        grid-column: 1;
}

#cart_section td.product-name dl.variation .variation-A,
#cart_section td.product-name dl.variation .variation-Horadeentrega {
        grid-column: 2;
}

#cart_section td.product-name dl.variation dt.variation-De,
#cart_section td.product-name dl.variation dt.variation-A {
        grid-row: 1;
        padding: 12px 14px 4px;
}

#cart_section td.product-name dl.variation dd.variation-De,
#cart_section td.product-name dl.variation dd.variation-A {
        grid-row: 2;
        padding: 0 14px;
}

#cart_section td.product-name dl.variation dd.variation-De p,
#cart_section td.product-name dl.variation dd.variation-A p {
        font-family: var(--primary-font);
        font-size: 15px;
        font-weight: 600;
        color: var(--title-color);
}

#cart_section td.product-name dl.variation dd.variation-Horaderecogida,
#cart_section td.product-name dl.variation dd.variation-Horadeentrega {
        grid-row: 3;
        padding: 0 14px 12px;
}

#cart_section td.product-name dl.variation dd.variation-Horaderecogida div,
#cart_section td.product-name dl.variation dd.variation-Horadeentrega div {
        font-size: 13px;
        color: var(--text-grey-color);
}

/* Duración | Seguro */
#cart_section td.product-name dl.variation .variation-Duracin { grid-column: 1; }
#cart_section td.product-name dl.variation .variation-Seguro { grid-column: 2; }

#cart_section td.product-name dl.variation dt.variation-Duracin,
#cart_section td.product-name dl.variation dt.variation-Seguro {
        grid-row: 4;
        padding: 16px 0 2px;
}

#cart_section td.product-name dl.variation dd.variation-Duracin,
#cart_section td.product-name dl.variation dd.variation-Seguro {
        grid-row: 5;
}

/* Incluido */
#cart_section td.product-name dl.variation .variation-Serviciosdereserva {
        grid-column: 1 / -1;
}

#cart_section td.product-name dl.variation dt.variation-Serviciosdereserva {
        grid-row: 6;
        padding: 14px 0 2px;
}

#cart_section td.product-name dl.variation dd.variation-Serviciosdereserva {
        grid-row: 7;
}

/* Desglose del precio: dato secundario, sin etiqueta. */
#cart_section td.product-name dl.variation dt.variation-Totales {
        display: none;
}

#cart_section td.product-name dl.variation dd.variation-Totales {
        grid-row: 8;
        grid-column: 1 / -1;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--separator-color);
}

#cart_section td.product-name dl.variation dd.variation-Totales,
#cart_section td.product-name dl.variation dd.variation-Totales p {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-grey-color);
}

/* Cualquier otro dato que añada YITH va al final, a todo el ancho. */
#cart_section td.product-name dl.variation > :not([class*="variation-De"]):not([class*="variation-A"]):not([class*="variation-Hora"]):not([class*="variation-Duracin"]):not([class*="variation-Seguro"]):not([class*="variation-Servicios"]):not([class*="variation-Totales"]) {
        grid-column: 1 / -1;
}

#cart_section td.product-name dl.variation > dt:not([class*="variation-De"]):not([class*="variation-A"]):not([class*="variation-Hora"]):not([class*="variation-Duracin"]):not([class*="variation-Seguro"]):not([class*="variation-Servicios"]):not([class*="variation-Totales"]) {
        padding-top: 14px;
}

/* «Editar opciones» (YITH Product Add-ons) */
#cart_section td.product-name .yith-wapo-edit-product-cart {
        display: inline-flex;
        margin-top: 14px;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary-color);
        text-decoration: none;
        cursor: pointer;
}

#cart_section td.product-name .yith-wapo-edit-product-cart small {
        font-size: inherit;
}

#cart_section td.product-name .yith-wapo-edit-product-cart:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
}

/* Precio */
#cart_section table.shop_table.cart td.product-subtotal {
        grid-area: total;
        font-family: var(--primary-font);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        text-align: right;
        white-space: nowrap;
        color: var(--title-color);
}

/* Quitar: enlace «Eliminar» justo bajo el precio. El «×» de WooCommerce se oculta;
   su aria-label («Eliminar … del carrito») sigue sirviendo a los lectores de pantalla. */
#cart_section table.shop_table.cart td.product-remove {
        grid-area: remove;
        align-self: start;
        justify-self: end;
        margin-top: 6px;
}

#cart_section table.shop_table.cart a.remove {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        width: auto;
        height: auto;
        margin: 0;
        padding: 4px 0;
        border: 0;
        border-radius: 4px;
        background: transparent !important;
        font-size: 0;
        line-height: 1;
        color: var(--cart-error) !important;
        text-decoration: none;
        transition: color .2s;
}

#cart_section table.shop_table.cart a.remove::before {
        content: "";
        flex: none;
        width: 14px;
        height: 14px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

#cart_section table.shop_table.cart a.remove::after {
        content: "Eliminar";
        font-family: var(--secondary-font);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
}

#cart_section table.shop_table.cart a.remove:hover {
        color: var(--cart-error) !important;
}

#cart_section table.shop_table.cart a.remove:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Cupón
   -------------------------------------------------------------------------- */
#cart_section table.shop_table.cart tr:not(.cart_item) {
        display: block;
}

#cart_section table.shop_table.cart td.actions {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: 0;
        background: none;
        text-align: left;
}

#cart_section table.shop_table.cart td.actions .coupon {
        display: flex;
        flex: 1;
        gap: 8px;
        max-width: 420px;
        padding: 0;
        float: none;
}

/* El clearfix de WooCommerce dentro de un flex suma huecos a los lados. */
#cart_section table.shop_table.cart td.actions .coupon::before,
#cart_section table.shop_table.cart td.actions .coupon::after {
        display: none;
}

#cart_section table.shop_table.cart td.actions .coupon #coupon_code {
        flex: 1;
        width: auto;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 0 14px;
        float: none;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: var(--cart-field-radius);
        box-shadow: none;
        font-family: var(--secondary-font);
        font-size: 14px;
        color: var(--title-color);
        transition: border-color .2s, box-shadow .2s;
}

#cart_section table.shop_table.cart td.actions .coupon #coupon_code::placeholder {
        color: var(--text-grey-color);
        opacity: 1;
}

#cart_section table.shop_table.cart td.actions .coupon #coupon_code:focus {
        border-color: var(--primary-color);
        box-shadow: var(--cart-focus);
        outline: none;
}

#cart_section table.shop_table.cart td.actions .coupon .button {
        width: auto;
        height: 44px;
        margin: 0;
        padding: 0 18px;
        float: none;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: var(--cart-field-radius);
        box-shadow: none;
        font-family: var(--secondary-font);
        font-size: 14px;
        font-weight: 600;
        color: var(--title-color);
        transition: border-color .2s, color .2s;
}

#cart_section table.shop_table.cart td.actions .coupon .button:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
}

/* «Actualizar carrito» solo sirve al cambiar cantidades, y las reservas no tienen. */
#cart_section table.shop_table.cart td.actions button[name="update_cart"] {
        display: none;
}

/* --------------------------------------------------------------------------
   4. Resumen
   -------------------------------------------------------------------------- */
#cart_section .cart-collaterals .cart_totals {
        float: none;
        box-sizing: border-box;
        width: 100%;
        padding: 24px;
        background: var(--featured-card-color);
        border: 1px solid var(--border-color);
        border-radius: var(--cart-radius);
}

#cart_section .cart_totals h2 {
        margin: 0 0 16px;
        font-family: var(--secondary-font);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--title-color);
}

#cart_section .cart_totals table.shop_table {
        display: block;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
}

#cart_section .cart_totals table.shop_table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
}

#cart_section .cart_totals table.shop_table tr {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
}

#cart_section .cart_totals table.shop_table th,
#cart_section .cart_totals table.shop_table td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        font-size: 14px;
        line-height: 1.4;
}

#cart_section .cart_totals table.shop_table th {
        font-weight: 400;
        color: var(--text-grey-color);
}

#cart_section .cart_totals table.shop_table td {
        text-align: right;
        color: var(--text-color);
}

#cart_section .cart_totals tr.order-total {
        margin-top: 8px;
        padding-top: 16px;
        border-top: 1px dashed var(--border-color);
}

#cart_section .cart_totals tr.order-total th {
        font-weight: 600;
        color: var(--title-color);
}

#cart_section .cart_totals tr.order-total td,
#cart_section .cart_totals tr.order-total td strong {
        font-family: var(--primary-font);
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        color: var(--title-color);
}

#cart_section .cart_totals tr.order-total small {
        display: block;
        margin-top: 6px;
        font-family: var(--secondary-font);
        font-size: 12px;
        font-weight: 400;
        color: var(--text-grey-color);
}

#cart_section .cart_totals .wc-proceed-to-checkout {
        margin: 0;
        padding: 24px 0 0;
}

#cart_section .cart_totals a.checkout-button {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 15px 20px;
        background: var(--primary-gradient);
        border: 0;
        border-radius: 999px;
        box-shadow: var(--primary-shadow-gradient);
        font-family: var(--secondary-font);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        color: var(--text-black-color);
        transition: transform .2s, box-shadow .2s;
}

#cart_section .cart_totals a.checkout-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 40px rgba(166, 190, 15, .45);
        color: var(--text-black-color);
}

#cart_section .cart_totals a.checkout-button:focus-visible,
#cart_section .return-to-shop .button:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Avisos (cupón aplicado, producto quitado, errores)
   -------------------------------------------------------------------------- */
#cart_section .woocommerce-message,
#cart_section .woocommerce-info,
#cart_section .woocommerce-error {
        margin: 0;
        padding: 14px 16px 14px 48px;
        background: var(--featured-card-color);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-color);
}

#cart_section .woocommerce-message::before,
#cart_section .woocommerce-info::before {
        top: 14px;
        left: 18px;
        color: var(--primary-color);
}

#cart_section .woocommerce-error {
        border-color: rgba(226, 64, 28, .45);
}

#cart_section .woocommerce-error::before {
        top: 14px;
        left: 18px;
        color: var(--cart-error);
}

#cart_section .woocommerce-error li {
        margin: 0;
}

#cart_section .woocommerce-message a,
#cart_section .woocommerce-info a {
        font-weight: 600;
        color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   6. Tablet y móvil
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
        #cart_section .woocommerce:has(.woocommerce-cart-form) {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                        "notices"
                        "items"
                        "summary";
        }

        #cart_section .cart-collaterals {
                position: static;
        }
}

@media (max-width: 768px) {
        #cart_section .fl-row-content-wrap {
                padding: 24px 8px 24px 8px;
        }

        /* WooCommerce convierte las celdas en filas con su título delante: aquí no hace falta. */
        #cart_section table.shop_table td::before {
                display: none;
        }

        #cart_section table.shop_table.cart tr.cart_item {
                grid-template-columns: 72px minmax(0, 1fr) auto;
                grid-template-rows: auto;
                grid-template-areas:
                        "thumb info  info"
                        "total total remove";
                gap: 0 14px;
                padding: 16px;
        }

        #cart_section table.shop_table.cart tr.cart_item td {
                text-align: left !important;
        }

        #cart_section table.shop_table.cart td.product-thumbnail {
                display: block;
        }

        #cart_section table.shop_table.cart td.product-thumbnail img {
                width: 72px;
                height: 72px;
                border-radius: 10px;
        }

        #cart_section td.product-name > a {
                font-size: 16px;
        }

        #cart_section table.shop_table.cart td.product-subtotal,
        #cart_section table.shop_table.cart td.product-remove {
                align-self: center;
                margin-top: 16px;
                padding-top: 14px;
                border-top: 1px solid var(--separator-color);
        }

        #cart_section table.shop_table.cart td.product-remove {
                text-align: right !important;
        }

        #cart_section table.shop_table.cart td.actions .coupon {
                max-width: none;
        }

        #cart_section .cart_totals table.shop_table tbody th {
                display: block;
        }

        #cart_section .cart_totals table.shop_table td {
                text-align: right !important;
        }

        #cart_section .cart-collaterals .cart_totals {
                padding: 20px;
        }
}

/* Teléfonos: la imagen sube y la ficha usa todo el ancho de la tarjeta. */
@media (max-width: 480px) {
        #cart_section table.shop_table.cart tr.cart_item {
                grid-template-areas:
                        "thumb thumb thumb"
                        "info  info  info"
                        "total total remove";
        }

        #cart_section table.shop_table.cart td.product-thumbnail {
                margin-bottom: 14px;
        }

        #cart_section table.shop_table.cart td.product-thumbnail img {
                width: 64px;
                height: 64px;
        }
}

/* --------------------------------------------------------------------------
   7. Carrito vacío
   -------------------------------------------------------------------------- */
#cart_section .woocommerce:not(:has(.woocommerce-cart-form)) {
        max-width: 560px;
        text-align: center;
}

#cart_section .cart-empty.woocommerce-info {
        padding: 40px 24px;
        background: transparent;
        border: 1px dashed var(--border-color);
        border-radius: var(--cart-radius);
        font-family: var(--primary-font);
        font-size: 18px;
        font-weight: 600;
        color: var(--title-color);
}

#cart_section .cart-empty.woocommerce-info::before {
        display: none;
}

#cart_section .return-to-shop {
        margin: 20px 0 0;
}

#cart_section .return-to-shop .button {
        display: inline-block;
        padding: 14px 28px;
        background: var(--primary-gradient);
        border: 0;
        border-radius: 999px;
        box-shadow: var(--primary-shadow-gradient);
        font-family: var(--secondary-font);
        font-size: 15px;
        font-weight: 700;
        color: var(--text-black-color);
}

@media (prefers-reduced-motion: reduce) {
        #cart_section .cart_totals a.checkout-button {
                transition: none;
        }

        #cart_section .cart_totals a.checkout-button:hover {
                transform: none;
        }
}