/*
 * WooCommerce renders classic order details with a light default background.
 * Keep receipts and account order details inside the dark shop design.
 */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-view-order .woocommerce-order-details {
    max-width: 64rem;
    margin-block-start: var(--bhw-space-6);
}

body.woocommerce-order-received .woocommerce-table--order-details,
body.woocommerce-view-order .woocommerce-table--order-details {
    width: 100%;
    overflow: hidden;
    border: var(--bhw-border-thin) solid var(--bhw-color-border) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--bhw-radius-large);
    background: var(--bhw-color-panel) !important;
    box-shadow: var(--bhw-shadow-card);
    color: var(--bhw-color-text-primary) !important;
}

body.woocommerce-order-received .woocommerce-table--order-details :where(th, td),
body.woocommerce-view-order .woocommerce-table--order-details :where(th, td) {
    padding: var(--bhw-space-3) var(--bhw-space-4);
    border-color: var(--bhw-color-border) !important;
    background: transparent !important;
    color: var(--bhw-color-text-primary) !important;
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
}

body.woocommerce-order-received .woocommerce-table--order-details thead,
body.woocommerce-order-received .woocommerce-table--order-details tfoot,
body.woocommerce-view-order .woocommerce-table--order-details thead,
body.woocommerce-view-order .woocommerce-table--order-details tfoot {
    background: var(--bhw-color-background-secondary);
}

body.woocommerce-order-received .woocommerce-table--order-details a,
body.woocommerce-view-order .woocommerce-table--order-details a {
    color: var(--bhw-color-accent);
}

body.woocommerce-order-received .woocommerce-table--order-details a:hover,
body.woocommerce-order-received .woocommerce-table--order-details a:focus-visible,
body.woocommerce-view-order .woocommerce-table--order-details a:hover,
body.woocommerce-view-order .woocommerce-table--order-details a:focus-visible {
    color: var(--bhw-color-accent-hover);
}

body.woocommerce-order-received .woocommerce-table--order-details :where(dl, p),
body.woocommerce-view-order .woocommerce-table--order-details :where(dl, p) {
    color: inherit;
}

@media (max-width: 34.999rem) {
    body.woocommerce-order-received .woocommerce-table--order-details :where(th, td),
    body.woocommerce-view-order .woocommerce-table--order-details :where(th, td) {
        padding: var(--bhw-space-3);
    }
}