.single-product div.product {
    padding: 18px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 24px;
    align-items: start;
}

.single-product div.product .summary {
    padding: 18px 0;
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .images {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    float: none !important;
    width: auto !important;
    margin: 0;
}

.single-product div.product .woocommerce-tabs,
.single-product div.product .woocommerce-product-details__short-description {
    grid-column: 1 / -1;
}

.single-product .cart {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: end;
}

.single-product .cart .nyp {
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0;
    background: rgba(255, 255, 255, 0.65);
}

.single-product .cart .nyp label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.single-product .cart .nyp input {
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 6px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.single-product .cart .citydance-nyp-invoice-number-field {
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0;
    background: rgba(255, 255, 255, 0.65);
}

.single-product .cart .citydance-nyp-invoice-number-field label {
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.single-product .cart .citydance-nyp-invoice-number-field input#citydance_invoice_number {
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 6px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}

.single-product .cart .citydance-nyp-invoice-number-field.woocommerce-invalid input#citydance_invoice_number,
.single-product .cart .citydance-nyp-invoice-number-field.woocommerce-invalid-required-field input#citydance_invoice_number {
    border-color: #cc1818;
}

@media (max-width: 900px) {
    .single-product div.product {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .single-product div.product .summary,
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .images {
        grid-column: 1;
    }

    /* On small screens we must also reset the row placement.
       Otherwise both blocks stay forced into `grid-row: 1` and overlap. */
    .single-product div.product .summary {
        grid-row: 1;
    }

    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .images {
        grid-row: 2;
    }
}