/*
 * "Preorder" badge on catalog cards — see framework/product-backorder-label.php.
 *
 * Only the colour is set here. Size, weight, casing, spacing and the stack's
 * position all come from the theme's own `.product-labels > *`, on purpose: the
 * badge is a sibling of "Sold out", not a new kind of thing, and it should
 * follow the theme's label skin wherever that skin goes.
 *
 * Amber rather than the theme's `--main-color`: "Preorder" is neither a
 * promotion (red/main) nor a refusal (the greyed-out "Sold out" treatment). It
 * means "orderable, just not from the shelf", and it has to stay legible next
 * to a discount badge when a preorder product is also discounted.
 *
 * Specificity note: `.product-labels .onbackorder` is two classes and outranks
 * the theme's `.product-labels > *`, which is where the default background
 * comes from.
 */

.product-labels .onbackorder {
    background-color: #b26a00;
    border-color: #b26a00;
    color: #fff;
}

/*
 * The `label-circle` skin sizes every label to a fixed 48px circle, which no
 * translation of "Preorder" fits. That skin is not in use — `product_labels` is
 * `square` in `_ovic_customize_options` — but if it is ever switched, this keeps
 * the badge readable instead of clipped.
 */
.label-circle .product-labels .onbackorder {
    width: auto;
    height: auto;
    border-radius: 12px;
    padding: 3px 10px;
}