/* ============================================================
   MR CHOFER × WooCommerce
   Estiliza el checkout y la página de "pedido recibido"
   (order-received) para que casen con el design system de la
   marca. Carga global tras calendarista.css y se apoya en los
   tokens de tokens.css (--brand, --ink, --f-display, etc.).
   ============================================================ */

/* ===== Página "Gracias. Tu pedido ha sido recibido." ===== */
.woocommerce-order .woocommerce-thankyou-order-received {
    text-align: center;
    font-family: var(--f-display);
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ink);
    max-width: 680px;
    margin: 14px auto 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--brand);
}

/* ===== Resumen del pedido (nº · fecha · total · método de pago) ===== */
.woocommerce-order .woocommerce-order-overview.order_details {
    justify-content: center;
    text-align: center;
    border: 1px solid var(--line, #e6e8eb);
    border-radius: var(--r-lg, 14px);
    padding: 18px 10px;
    margin: 0 auto 36px;
}
.woocommerce-order .woocommerce-order-overview li {
    border-color: var(--line, #e6e8eb) !important;
    font-family: var(--f-mono, monospace);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #6b7280);
}
.woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    margin-top: 4px;
    font-family: var(--f-display);
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand);
}

/* ===== Títulos WooCommerce con la tipografía de marca ===== */
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-checkout h3 {
    font-family: var(--f-display);
    letter-spacing: -.01em;
    font-weight: 700;
    color: var(--ink);
}

/* ===== Botón "Realizar el pedido" en verde de marca ===== */
.woocommerce #place_order,
.woocommerce-checkout #place_order {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: .01em;
}
.woocommerce #place_order:hover,
.woocommerce-checkout #place_order:hover {
    background-color: #149330;
    border-color: #149330;
}