/* Scoped to the custom availability field; theme typography is inherited. */
.mg-backorder {
    display: block;
    margin-block: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
    white-space: normal;
}

.mg-backorder .mg-backorder__badge {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0.2rem 0.7rem;
    border: 1px solid #f5ad69;
    border-radius: 999px;
    background: #fff0df;
    color: #93400b;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
    vertical-align: middle;
}

.mg-backorder .mg-backorder__note {
    display: block;
    margin-block-start: 0.35rem;
    color: #643a20;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Keep WooCommerce's accessible metadata label, but visually show just the pill. */
.wc-block-components-product-details > :has(.mg-backorder) > .wc-block-components-product-details__name,
dl.variation > dt:has(+ dd .mg-backorder) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

dl.variation > dd:has(.mg-backorder) {
    float: none;
    margin: 0;
    clear: both;
}

.wc-block-components-product-details > :has(.mg-backorder) {
    display: block;
    list-style: none;
}

.wc-block-components-product-details > :has(.mg-backorder) > [aria-hidden="true"] {
    display: none;
}

/* In Blocks, keep the notice above any long product description. */
.wc-block-components-product-metadata:has(.mg-backorder) {
    display: flex;
    flex-direction: column;
}

.wc-block-components-product-metadata > .wc-block-components-product-details:has(.mg-backorder) {
    order: -1;
}

/* Replace duplicate native notices only in the item that has our own badge. */
.product-name:has(.mg-backorder) > .backorder_notification,
.wc-block-cart-item__wrap:has(.mg-backorder) .wc-block-components-product-backorder-badge,
.wc-block-components-order-summary-item__description:has(.mg-backorder) .wc-block-components-product-backorder-badge {
    display: none;
}

.stock.mg-backorder-stock {
    margin-block: 0.75rem;
}