/* Reuse the upsell dialog shell; only the native variation form gets a local layout. */
body .cpx-variable.cpx-upsell {
    --cpx-variable-image-size: 220px;
    --cpx-variable-gap: 1.5rem;
    --cpx-variable-control-padding: .75rem;
    --cpx-variable-control-background: var(--cpx-shop-white);
    --cpx-variable-focus-space: 6px;
    --cpx-variable-info-padding: .5rem 1rem;
    --cpx-variable-info-font-size: .9rem;
}
body .cpx-variable.cpx-upsell .cpx-upsell__title {
    flex: none;
    padding-right: var(--cpx-shop-touch);
}
.cpx-variable__content {
    box-sizing: border-box;
    min-height: 0;
    margin-top: var(--cpx-variable-gap);
    margin-inline: calc(-1 * var(--cpx-variable-focus-space));
    padding: var(--cpx-variable-focus-space);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cpx-shop-accent) var(--cpx-shop-surface);
}
.cpx-variable__content:empty {
    display: none;
}
body .cpx-variable.cpx-upsell .cpx-variable__product {
    display: grid;
    grid-template-columns: var(--cpx-variable-image-size) minmax(0, 1fr);
    align-items: start;
    gap: var(--cpx-variable-gap);
    margin: 0;
}
body .cpx-variable.cpx-upsell .product .cpx-variable__image,
body .cpx-variable.cpx-upsell .product .cpx-variable__details {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}
body .cpx-variable.cpx-upsell .cpx-variable__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--cpx-shop-radius);
    background: var(--cpx-variable-control-background);
}
body .cpx-variable.cpx-upsell .cpx-variable__price,
body .cpx-variable.cpx-upsell .woocommerce-variation-price {
    margin-bottom: var(--cpx-upsell-gap);
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}
body .cpx-variable.cpx-upsell .cart,
body .cpx-variable.cpx-upsell .variations {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
}
body .cpx-variable.cpx-upsell .variations :is(tbody, tr, th, td) {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
}
body .cpx-variable.cpx-upsell .variations .label {
    margin: 0 0 .4rem;
    font-weight: 500;
}
body .cpx-variable.cpx-upsell .variations .value {
    margin-bottom: var(--cpx-upsell-gap);
}
body .cpx-variable.cpx-upsell :is(select, input.qty) {
    box-sizing: border-box;
    height: auto;
    min-height: var(--cpx-shop-touch);
    max-width: 100%;
    padding: var(--cpx-variable-control-padding);
    border: 1px solid var(--cpx-shop-border);
    border-radius: var(--cpx-shop-radius);
    background: var(--cpx-variable-control-background);
    color: var(--cpx-shop-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    accent-color: var(--cpx-shop-accent);
}
body .cpx-variable.cpx-upsell .product form.cart .variations select {
    width: 100%;
    min-width: 0;
    margin: 0;
}
body .cpx-variable.cpx-upsell input.qty {
    width: 5rem;
    text-align: center;
}
body .cpx-variable.cpx-upsell .reset_variations {
    display: inline-block;
    margin-top: .4rem;
}
body .cpx-variable.cpx-upsell .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cpx-upsell-gap);
}
body .cpx-variable.cpx-upsell .quantity {
    float: none;
    margin: 0;
}
/* A hidden native quantity input still needs submitting, but its wrapper must not create a flex gap. */
body .cpx-variable.cpx-upsell .quantity:has(input[name="quantity"][type="hidden"]):not(:has(input:not([type="hidden"]))) {
    display: none;
}
body .cpx-variable.cpx-upsell .product form.cart .single_add_to_cart_button {
    flex: 1 1 180px;
    min-height: var(--cpx-shop-touch);
    margin: 0;
    padding: var(--cpx-variable-control-padding);
    border: 1px solid var(--cpx-shop-accent);
    border-radius: var(--cpx-shop-radius);
    background: var(--cpx-shop-accent);
    color: var(--cpx-shop-white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    cursor: pointer;
}
body .cpx-variable.cpx-upsell .product form.cart .single_add_to_cart_button.disabled {
    opacity: .6;
    cursor: not-allowed;
}
body .cpx-variable.cpx-upsell .product form.cart .single_add_to_cart_button:hover:not(.disabled) {
    background: var(--cpx-shop-text);
}
body .cpx-variable.cpx-upsell :is(select, input, .single_add_to_cart_button, .cpx-color-swatch):focus-visible {
    outline: 2px solid var(--cpx-shop-accent);
    outline-offset: 3px;
}
body .cpx-variable.cpx-upsell .product .price {
    color: var(--cpx-shop-text);
    font-size: inherit;
    font-weight: 400;
}
body .cpx-variable.cpx-upsell .product .stock.in-stock {
    color: var(--cpx-shop-accent);
}
body .cpx-variable.cpx-upsell .reset_variations {
    color: var(--cpx-shop-accent);
    text-underline-offset: .2em;
}
body .cpx-variable.cpx-upsell .cpx-variable__link {
    display: inline-flex;
    flex: none;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--cpx-shop-touch);
    max-width: 100%;
    margin-top: var(--cpx-variable-gap);
    padding: var(--cpx-variable-info-padding);
    border: 1px solid transparent;
    border-radius: var(--cpx-shop-radius);
    background: var(--cpx-shop-text);
    color: var(--cpx-shop-white);
    font-family: inherit;
    font-size: var(--cpx-variable-info-font-size);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
body .cpx-variable.cpx-upsell .cpx-variable__link:hover {
    background: var(--cpx-shop-accent);
    color: var(--cpx-shop-white);
}
.cpx-variable__status--loading {
    display: flex;
    align-items: center;
    gap: var(--cpx-upsell-gap);
}
.cpx-variable__status--loading::before {
    content: '';
    display: block;
    flex: none;
    box-sizing: border-box;
    width: var(--cpx-shop-icon);
    height: var(--cpx-shop-icon);
    border: 2px solid var(--cpx-shop-border);
    border-top-color: var(--cpx-shop-accent);
    border-radius: 50%;
    animation: cpx_cart_loading var(--cpx-loading-duration) linear infinite;
}
.cpx-variable__notices:empty {
    display: none;
}
.cpx-variable__notices {
    flex: none;
    max-height: 25dvh;
    margin-top: var(--cpx-upsell-gap);
    overflow: auto;
}
.cpx-variable__notices :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
    margin: 0;
}
body .cpx-variable.cpx-upsell .cpx-swatch-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpx-upsell-gap);
}
body .cpx-variable.cpx-upsell .cpx-color-swatch {
    min-width: var(--cpx-shop-touch);
    min-height: var(--cpx-shop-touch);
}
/* Bundels krijgen de volle formulierbreedte; de native plugin blijft keuzes en totalen beheren. */
body .cpx-variable.cpx-variable--bundle {
    --cpx-bundle-image-size: 76px;
    --cpx-bundle-main-image-size: 120px;
}
body .cpx-variable.cpx-variable--bundle .cpx-variable__product {
    grid-template-columns: minmax(0, 1fr);
}
body .cpx-variable.cpx-variable--bundle .product .cpx-variable__image {
    width: var(--cpx-bundle-main-image-size);
    margin-inline: auto;
}
body .cpx-variable.cpx-variable--bundle .bundled_product_summary {
    margin-bottom: var(--cpx-variable-gap);
    padding-bottom: var(--cpx-variable-gap);
    border-bottom: 1px solid var(--cpx-shop-border);
}
body .cpx-variable.cpx-variable--bundle .product .bundled_product_images {
    width: var(--cpx-bundle-image-size);
    margin: 0;
}
body .cpx-variable.cpx-variable--bundle .bundled_product_summary:not(.thumbnail_hidden) .details {
    float: right;
    width: calc(100% - var(--cpx-bundle-image-size));
    min-width: 0;
    padding: 0 0 0 var(--cpx-upsell-gap);
}
body .cpx-variable.cpx-variable--bundle .bundled_product_title {
    margin: 0 0 var(--cpx-upsell-gap);
    font-size: 1.125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
body .cpx-variable.cpx-variable--bundle .bundled_product_excerpt {
    font-size: var(--cpx-variable-info-font-size);
    line-height: 1.5;
}
body .cpx-variable.cpx-variable--bundle .bundle_button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cpx-upsell-gap);
}
body .cpx-variable.cpx-variable--bundle .bundled_product_optional_checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--cpx-upsell-gap);
    min-height: var(--cpx-shop-touch);
    line-height: 1.4;
    cursor: pointer;
}
body .cpx-variable.cpx-variable--bundle input[type="checkbox"] {
    accent-color: var(--cpx-shop-accent);
}
/* Elementor verbergt notices globaal; native bundelfouten moeten in deze popup leesbaar blijven. */
body .cpx-variable.cpx-variable--bundle :is(.bundle_error, .bundle_unavailable) .woocommerce-info,
body .cpx-variable.cpx-variable--bundle .bundle_unavailable.woocommerce-info {
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .cpx-variable__status--loading::before {
        animation: none;
    }
}
@media (max-width: 600px) {
    body .cpx-variable.cpx-upsell {
        --cpx-variable-image-size: 120px;
        --cpx-variable-gap: 1rem;
    }
    body .cpx-variable.cpx-upsell .cpx-variable__product {
        grid-template-columns: minmax(0, 1fr);
    }
    body .cpx-variable.cpx-upsell .product .cpx-variable__image {
        width: var(--cpx-variable-image-size);
        margin-inline: auto;
    }
}