/*
 * "Design It" renders through core's `getChildHtml('', true)` hook inside
 * `.box-tocart .actions`, positioned as that hook's first child so it sits
 * immediately after the Add to Cart button (see
 * view/frontend/layout/catalog_product_view.xml).
 *
 * Every rule here targets OUR OWN element only. Nothing restyles
 * `.box-tocart`, `.actions`, `.action.tocart` or any other module's button —
 * the merchant's theme keeps full control of the primary Add to Cart CTA, and
 * this button simply matches whatever size that theme renders.
 */
.box-tocart .actions .printxpand-design-it {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

/*
 * Luma sizes `.action.primary` from its own padding/line-height, and the cart
 * button additionally carries `.tocart`'s larger font. Matching those three
 * values makes the pair the same height without touching the cart button
 * itself; `.action.primary` (already on the anchor) supplies the colours, so
 * the button follows the theme rather than hardcoding one.
 */
.box-tocart .actions .printxpand-design-it-action {
    display: inline-block;
    box-sizing: border-box;
    padding: 14px 17px;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

/*
 * Below Luma's mobile breakpoint the cart button goes full-width, so a
 * side-by-side pair would overflow the column. Stack instead — still directly
 * under the button, not stranded at the bottom of the page.
 */
@media (max-width: 767px) {
    .box-tocart .actions .printxpand-design-it {
        display: block;
        margin-left: 0;
        margin-top: 10px;
    }

    .box-tocart .actions .printxpand-design-it-action {
        display: block;
        width: 100%;
        text-align: center;
    }
}