/*
 * FusionCommerce checkout visual polish.
 * Scope: VP One Page Checkout only.
 * Do not add global selectors here.
 */

#ProOPC {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

#ProOPC .proopc-finalpage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    padding-block: 1.5rem 2.5rem;
}

#ProOPC .proopc-finalpage::before,
#ProOPC .proopc-finalpage::after {
    display: none;
    content: none;
}

#ProOPC .proopc-finalpage> :not(.proopc-column3) {
    grid-column: 1 / -1;
    min-width: 0;
}

#ProOPC .proopc-finalpage>.proopc-column3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

#ProOPC .proopc-bt-address,
#ProOPC .proopc-st-address,
#ProOPC .proopc-shipments,
#ProOPC .proopc-payments,
#ProOPC .proopc-coupon,
#ProOPC .proopc-confirm-order {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--bs-border-radius-xl);
    background: var(--color-surface);
    box-shadow: none;
}

/* Allow locker picker dropdowns to escape the shipment card. */
#ProOPC .proopc-shipments {
    overflow: visible;
}

/* Final checkout card headings. */
#ProOPC .proopc-finalpage .proopc-process-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    margin: 0;
    padding: 0.7rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text-strong);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

#ProOPC .proopc-finalpage .proopc-step {
    display: inline-flex;
    flex: 0 0 1.75rem;
    align-items: center;
    justify-content: center;
    float: none;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: inherit;
    font-size: 0.82rem !important;
    font-weight: 700;
    line-height: 1 !important;
}

#ProOPC #proopc-carttable-form {
    margin-block: 1rem 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#ProOPC .proopc-bt-address>.inner-wrap,
#ProOPC .proopc-st-address #proopc-st-address>.inner-wrap,
#ProOPC .proopc-shipments #proopc-shipments .inner-wrap,
#ProOPC .proopc-payments #proopc-payments>.inner-wrap,
#ProOPC .proopc-coupon #proopc-coupon>.inner-wrap,
#ProOPC .proopc-confirm-order #proopc-confirm-order>.inner-wrap {
    padding: 0.3rem 0.65rem;
}

#ProOPC .proopc-finalpage .edit-address {
    margin: 0;
    padding: 0;
}

/* Billing and shipping form fields. */
#ProOPC #EditBTAddres label:not(.checkbox),
#ProOPC #EditSTAddres label:not(.checkbox),
#ProOPC #checkoutForm .customer-comment-group>label {
    display: block;
    margin: 0 0 0.3rem;
    color: var(--color-text-strong);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
}

#ProOPC #EditBTAddres .asterisk,
#ProOPC #EditSTAddres .asterisk,
#ProOPC #checkoutForm .asterisk {
    color: var(--color-danger);
}

#ProOPC #EditBTAddres input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#ProOPC #EditBTAddres select,
#ProOPC #EditBTAddres textarea,
#ProOPC #EditSTAddres input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#ProOPC #EditSTAddres select,
#ProOPC #EditSTAddres textarea {
    display: block;
    width: 100% !important;
    min-height: 2.5rem;
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.9rem;
    line-height: 1.3;
    box-shadow: none;
    box-sizing: border-box;
}

#ProOPC #EditBTAddres input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
#ProOPC #EditBTAddres select:focus,
#ProOPC #EditBTAddres textarea:focus,
#ProOPC #EditSTAddres input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
#ProOPC #EditSTAddres select:focus,
#ProOPC #EditSTAddres textarea:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: var(--focus-ring-primary);
}

#ProOPC label.st-same-checkbox {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.7rem 0.8rem;
    color: var(--color-text-strong);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

#ProOPC input#STsameAsBT[type="checkbox"] {
    margin-left: 0 !important;
}

#ProOPC input#STsameAsBT[type="checkbox"] {
    position: static !important;
    float: none;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-primary);
}

/* Shipment and payment methods as selectable cards. */
#ProOPC #proopc-shipments fieldset,
#ProOPC #proopc-payments fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * Keep the real VP OPC radio inputs in the document and accessible,
 * while the associated labels provide the complete clickable surface.
 */
#ProOPC #proopc-shipments input[type="radio"],
#ProOPC #proopc-payments input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#ProOPC #proopc-shipments label,
#ProOPC #proopc-payments label {
    position: relative;
    display: block;
    float: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 0 0.55rem;
    padding: 0.75rem 2.75rem 0.75rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.88rem;
    line-height: 1.4;
    text-transform: none;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

#ProOPC #proopc-shipments label:hover,
#ProOPC #proopc-payments label:hover {
    border-color: rgba(var(--color-primary-rgb), 0.22);
    background: var(--color-surface-soft);
}

#ProOPC #proopc-shipments input[type="radio"]:checked+label,
#ProOPC #proopc-payments input[type="radio"]:checked+label {
    border-color: var(--color-primary);
    background: var(--color-pastel-mint);
}

#ProOPC #proopc-shipments input[type="radio"]:focus-visible+label,
#ProOPC #proopc-payments input[type="radio"]:focus-visible+label {
    outline: var(--focus-outline-primary);
    outline-offset: var(--focus-outline-offset);
}

/* Native-looking selection indicator on the right side of the card. */
#ProOPC #proopc-shipments label::before,
#ProOPC #proopc-payments label::before {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--color-border-price);
    border-radius: 50%;
    background: var(--color-surface);
    content: "";
    transform: translateY(-50%);
    box-sizing: border-box;
}

#ProOPC #proopc-shipments input[type="radio"]:checked+label::before,
#ProOPC #proopc-payments input[type="radio"]:checked+label::before {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-surface);
}

/* Logo and method information. */
#ProOPC #proopc-shipments .vmshipment,
#ProOPC #proopc-payments .vmpayment {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    min-width: 0;
}

#ProOPC #proopc-shipments .vmCartShipmentLogo,
#ProOPC #proopc-payments .vmCartPaymentLogo {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-items: center;
    justify-content: center;
    width: 3rem;
    min-height: 2rem;
}

#ProOPC #proopc-shipments .vmCartShipmentLogo img,
#ProOPC #proopc-payments .vmCartPaymentLogo img {
    display: block;
    width: auto;
    max-width: 3rem;
    height: auto;
    max-height: 2.25rem;
    object-fit: contain;
}

#ProOPC #proopc-shipments .vmshipment_name,
#ProOPC #proopc-payments .vmpayment_name {
    grid-column: 2;
    min-width: 0;
    color: var(--color-text-strong);
    font-weight: 700;
    line-height: 1.3;
}

#ProOPC #proopc-shipments .vmshipment_description,
#ProOPC #proopc-payments .vmpayment_description {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

#ProOPC #proopc-shipments .vmshipment_cost,
#ProOPC #proopc-payments .vmpayment_cost {
    grid-column: 2;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Methods without a configured logo must not keep an empty logo column. */
#ProOPC #proopc-shipments .vmshipment_name:first-child,
#ProOPC #proopc-payments .vmpayment_name:first-child,
#ProOPC #proopc-shipments .vmshipment_name:first-child~.vmshipment_description,
#ProOPC #proopc-payments .vmpayment_name:first-child~.vmpayment_description,
#ProOPC #proopc-shipments .vmshipment_name:first-child~.vmshipment_cost,
#ProOPC #proopc-payments .vmpayment_name:first-child~.vmpayment_cost {
    grid-column: 1 / -1;
}

#ProOPC #proopc-shipments fieldset>label:last-of-type,
#ProOPC #proopc-payments fieldset>label:last-of-type {
    margin-bottom: 0;
}

/* Spacing is controlled by the method cards, not legacy clearing elements. */
#ProOPC #proopc-shipments .clear,
#ProOPC #proopc-payments .clear,
#ProOPC #proopc-payments .proopc-method-end {
    display: none;
    height: 0;
}


#ProOPC #proopc-coupon .proopc-input-append {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
}

#ProOPC #proopc-coupon .proopc-input-append::before,
#ProOPC #proopc-coupon .proopc-input-append::after {
    display: none;
    content: none;
}

#ProOPC #proopc-task-savecoupon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto !important;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}

#ProOPC #proopc-coupon-code {
    width: 100% !important;
    min-width: 0;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius);
    background: var(--color-surface);
    color: var(--color-text-strong);
    box-shadow: none;
}

#ProOPC #proopc-task-savecoupon {
    min-height: 2.5rem;
    margin: 0;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 700;
    box-shadow: none;
}

#ProOPC #checkoutForm .customer-comment-group {
    margin: 0;
}

#ProOPC #checkoutForm .proopc-customer-comment {
    width: 100% !important;
    min-height: 5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius);
    background: var(--color-surface);
    color: var(--color-text-strong);
    resize: vertical;
    box-shadow: none;
    box-sizing: border-box;
}

#ProOPC #checkoutForm .proopc-customer-comment:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: var(--focus-ring-primary);
}

#ProOPC #checkoutForm .cart-tos-group {
    margin-top: 1rem;
}

#ProOPC #checkoutForm .prooopc-tos-label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    color: var(--color-text-strong);
    font-size: 0.84rem;
    line-height: 1.45;
}

#ProOPC #checkoutForm .terms-of-service {
    accent-color: var(--color-primary);
}

#ProOPC #proopc-order-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
}

#ProOPC #proopc-order-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Cart product table cleanup - CSS-only, VP OPC style 2. */

#ProOPC table.cart-summary.proopc-table-striped thead {
    display: none;
}

#ProOPC table.cart-summary.proopc-table-striped {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

#ProOPC table.cart-summary.proopc-table-striped thead th.col-price,
#ProOPC table.cart-summary.proopc-table-striped thead th.col-tax {
    display: none !important;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list>td {
    padding: 1rem;
    border: 0 !important;
    background: transparent;
    vertical-align: middle;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-price,
#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-tax {
    display: none !important;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-name {
    width: auto;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-qty {
    width: 10rem;
    text-align: center;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-total {
    width: 10rem;
    color: var(--color-text-strong);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .PricesalesPrice,
#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .salesPrice,
#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .price-total {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary);
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .PricediscountAmount,
#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .PricebasePriceWithTax {
    font-size: 0.92rem;
    font-weight: 600;
}

#ProOPC .cart-product-description.with-image {
    display: grid;
    grid-template-columns: 6rem minmax(16rem, 1fr);
    align-items: center;
    column-gap: 1rem;
    row-gap: 0;
    width: 100%;
    padding-left: 0 !important;
}

#ProOPC .cart-product-description {
    width: 100%;
    min-width: 0;
}

#ProOPC .cart-product-description.with-image {
    width: 100%;
    min-width: 0;
    gap: 1rem;
    padding-left: 0;
}

#ProOPC .cart-product-description .cart-images {
    flex: 0 0 6rem;
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    float: none;
    overflow: hidden;
    box-shadow: none;
}

#ProOPC .cart-product-description .cart-images img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
}

#ProOPC .cart-product-description a {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    color: var(--color-text-strong);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    text-transform: none !important;
}

#ProOPC .cart-product-description a:hover {
    color: var(--color-primary);
}

#ProOPC .cart-product-description a:hover {
    color: var(--color-primary);
}

#ProOPC .cart-p-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

#ProOPC .cart-p-qty .proopc-input-append {
    display: inline-flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: var(--color-surface);
}

#ProOPC .cart-p-qty .proopc-qty-input {
    width: 3.25rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.35rem 0.5rem;
    border: 0;
    border-right: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-strong);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    box-shadow: none;
    appearance: textfield;
}

#ProOPC .cart-p-qty .proopc-qty-input::-webkit-inner-spin-button,
#ProOPC .cart-p-qty .proopc-qty-input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

#ProOPC .cart-p-qty .proopc-qty-input:focus {
    outline: 0;
}

#ProOPC .cart-p-qty .proopc-btn {
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text-strong);
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

#ProOPC .cart-p-qty .proopc-task-updateqty:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

#ProOPC .cart-p-qty .proopc-task-deleteproduct {
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
}

#ProOPC .cart-p-qty .proopc-task-deleteproduct:hover {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-white);
}

#ProOPC .cart-p-qty .proopc-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/*Hide vat column */
/* Hide VAT-only rows and VAT column; keep discount rows visible. */
#ProOPC table.cart-summary.proopc-table-striped tr.tax-rule-per-bill {
    display: none !important;
}

/*
 * Payment method is displayed in the payment section.
 * PLX payment methods do not add checkout fees.
 */
#ProOPC table.cart-summary.proopc-table-striped tr.payment-row {
    display: none !important;
}

#ProOPC table.cart-summary.proopc-table-striped .col-tax {
    display: none !important;
}

#ProOPC table.cart-summary.proopc-table-striped .col-tax {
    display: none !important;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-name,
#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-qty,
#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-total {
    align-self: center;
}

#ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-qty {
    text-align: center;
}

/* Cart financial summary: compact, aligned and without an outer card. */
#ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total,
#ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row,
#ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill,
#ProOPC table.cart-summary.proopc-table-striped tr.shipping-row,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10rem;
    align-items: center;
    width: min(100%, 34rem);
    margin-left: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

#ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total>td,
#ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row>td,
#ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill>td,
#ProOPC table.cart-summary.proopc-table-striped tr.shipping-row>td,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total>td,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency>td {
    display: block;
    width: auto !important;
    padding: 0.2rem 0;
    border: 0;
    background: transparent;
    font-size: 1rem;
    line-height: 1.4;
    box-sizing: border-box;
}

#ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total>.sub-headings,
#ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row>.coupon-form-col,
#ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill>.sub-headings,
#ProOPC table.cart-summary.proopc-table-striped tr.shipping-row>.shipping-payment-heading,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total>.sub-headings,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency>.sub-headings {
    grid-column: 1;
    padding-right: 1.25rem;
    color: var(--color-text-strong);
    font-weight: 600;
    text-align: right !important;
}

#ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total>.col-total,
#ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row>.col-total,
#ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill>.col-total,
#ProOPC table.cart-summary.proopc-table-striped tr.shipping-row>.col-total,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total>.col-total,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency>.col-total {
    grid-column: 2;
    color: var(--color-primary) !important;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.35;
    text-align: right !important;
}

#ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total>.col-total *,
#ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row>.col-total *,
#ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill>.col-total *,
#ProOPC table.cart-summary.proopc-table-striped tr.shipping-row>.col-total *,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total>.col-total *,
#ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency>.col-total * {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit;
}

#ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total {
    margin-top: 0.5rem;
}

#ProOPC table.cart-summary.proopc-table-striped tr.grand-total {
    margin-top: 0.65rem;
}

#ProOPC table.cart-summary.proopc-table-striped tr.grand-total>td {
    padding-top: 0.65rem;
    color: var(--color-text-strong);
    font-weight: 800;
}

#ProOPC table.cart-summary.proopc-table-striped tr.grand-total>.col-total {
    font-size: 1.2rem;
}

/* Guest / registration and login entry step. */
#ProOPC .proopc-register-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
    width: 100%;
    margin-top: 2rem;
}

#ProOPC .proopc-register-login::before,
#ProOPC .proopc-register-login::after {
    display: none;
    content: none;
}

#ProOPC .proopc-register-login>.proopc-register,
#ProOPC .proopc-register-login>.proopc-login {
    float: none;
    width: auto !important;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--bs-border-radius-xl);
    background: var(--color-surface);
    box-shadow: none;
}

#ProOPC .proopc-register-login>.proopc-register>h3,
#ProOPC .proopc-register-login>.proopc-login>h3 {
    margin: 0;
    padding: 0.8rem 1.1rem;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    background: var(--color-surface-soft);
    color: var(--color-text-strong);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

#ProOPC .proopc-register-login>.proopc-register>.proopc-inner,
#ProOPC .proopc-register-login>.proopc-login>.proopc-inner {
    padding: 1rem 1.1rem 1.1rem;
}

#ProOPC .proopc-register-login .proopc-subtitle {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
}

.proopc-register-login .proopc-inner,
#ProOPC .proopc-register-login h3:not(.modal-title) {
    margin: 0 !important;
}

/* Remove legacy label/input columns. */
#ProOPC .proopc-register-login .proopc-group {
    display: block;
    width: 100%;
    margin: 0 0 0.7rem;
}

#ProOPC .proopc-register-login .proopc-input-group-level,
#ProOPC .proopc-register-login .proopc-input {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

#ProOPC .proopc-register-login .proopc-input-group-level {
    margin-bottom: 0.35rem;
}

#ProOPC .proopc-register-login label {
    color: var(--color-text-strong);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
}

#ProOPC .proopc-register-login .asterisk {
    color: var(--color-danger);
}

/* guest or register as tabs */
#ProOPC .proopc-register-login>.proopc-register>.proopc-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    align-content: start;
}

#ProOPC .proopc-register .proopc-subtitle {
    grid-column: 1 / -1;
    grid-row: 1;
}

#ProOPC .proopc-register .proopc-switch:first-of-type {
    grid-column: 1;
    grid-row: 2;
}

#ProOPC .proopc-register .proopc-switch:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
}

#ProOPC .proopc-register .proopc-guest-form,
#ProOPC .proopc-register .proopc-reg-form {
    grid-column: 1 / -1;
    grid-row: 3;
}

#ProOPC .proopc-register .proopc-reg-advantages {
    grid-column: 1 / -1;
    grid-row: 4;
}

/* Text fields only; do not affect real radio/checkbox controls. */
#ProOPC .proopc-register-login input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#ProOPC .proopc-register-login select,
#ProOPC .proopc-register-login textarea {
    display: block;
    width: 100%;
    margin: 0;
    height: 2.5rem;
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.95rem;
    line-height: 1.3;
    box-shadow: none;
}

#ProOPC .proopc-register-login input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
#ProOPC .proopc-register-login select:focus,
#ProOPC .proopc-register-login textarea:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: var(--focus-ring-primary);
}

/* Validation states added dynamically by VP OPC. */
#ProOPC input.invalid:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#ProOPC select.invalid,
#ProOPC textarea.invalid {
    border-color: var(--color-danger);
    background-color: color-mix(in srgb,
            var(--color-danger) 6%,
            var(--color-surface));
    color: var(--color-text-strong);
    box-shadow: none;
}

#ProOPC input.invalid:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
#ProOPC select.invalid:focus,
#ProOPC textarea.invalid:focus {
    border-color: var(--color-danger);
    outline: 0;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb,
            var(--color-danger) 18%,
            transparent);
}

/* Labels associated with invalid controls. */
#ProOPC label.invalid,
#ProOPC div.invalid,
#ProOPC .proopc-group:has(.proopc-input .invalid)>.proopc-input-group-level label {
    color: var(--color-danger);
}

/* Invalid radio and checkbox controls. */
#ProOPC input[type="radio"].invalid,
#ProOPC input[type="checkbox"].invalid {
    accent-color: var(--color-danger);
    outline: 2px solid color-mix(in srgb,
            var(--color-danger) 35%,
            transparent);
    outline-offset: 2px;
}

#ProOPC label:has(> input[type="radio"].invalid),
#ProOPC label:has(> input[type="checkbox"].invalid) {
    color: var(--color-danger);
}

.proopc-input-append>.status {
    margin: 13px 10px 0 !important;
}

/* Guest / register choice. Keep the actual radio inputs. */
#ProOPC .proopc-register-login .proopc-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}

#ProOPC .proopc-register-login .proopc-switch:first-of-type {
    border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
}

#ProOPC .proopc-register-login .proopc-switch:nth-of-type(2) {
    margin-left: -1px;
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

#ProOPC .proopc-register-login .proopc-switch:has(input:checked) {
    z-index: 1;
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

#ProOPC .proopc-register-login .proopc-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

/* Remember me and privacy choices. */
#ProOPC .proopc-register-login .proopc-checkbox,
#ProOPC .proopc-register-login label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

#ProOPC .proopc-register-login input[type="checkbox"],
#ProOPC .proopc-register-login input[type="radio"] {
    accent-color: var(--color-primary);
}

/* Main actions. */
#ProOPC .proopc-register-login #proopc-task-guestcheckout,
#ProOPC .proopc-register-login #proopc-task-registercheckout,
#ProOPC .proopc-register-login #proopc-task-loginajax {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    margin: 0.35rem 0 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
}

#ProOPC .proopc-register-login #proopc-task-guestcheckout:hover,
#ProOPC .proopc-register-login #proopc-task-registercheckout:hover,
#ProOPC .proopc-register-login #proopc-task-loginajax:hover {
    filter: brightness(0.94);
}

#ProOPC .proopc-register-login #proopc-task-guestcheckout:disabled,
#ProOPC .proopc-register-login #proopc-task-registercheckout:disabled,
#ProOPC .proopc-register-login #proopc-task-loginajax:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Passkey / additional Joomla authentication buttons. */
#ProOPC .proopc-login .proops-login-inputs button[type="button"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-weight: 600;
    box-shadow: none;
}

#ProOPC .proopc-login .proops-login-inputs button[type="button"]:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Registration note. */
#ProOPC .proopc-register-login .proopc-reg-advantages {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--color-surface-soft);
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Forgot username/password links. */
#ProOPC .proopc-login .proopc-ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

#ProOPC .proopc-login .proopc-ul li {
    margin: 0;
    padding: 0;
}

#ProOPC .proopc-login .proopc-ul a {
    color: var(--color-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

#ProOPC .proopc-login .proopc-ul a:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    #ProOPC .proopc-finalpage {
        grid-template-columns: 1fr;
    }

    #ProOPC .proopc-finalpage> :not(.proopc-column3) {
        grid-column: 1;
    }
}

@media (min-width: 768px) {

    /*
     * VP OPC keeps the original pricing-table column model even when
     * SKU, price, tax and discount cells are hidden.
     * Use an independent presentation grid for desktop product rows.
     */
    #ProOPC table.cart-summary.proopc-table-striped,
    #ProOPC table.cart-summary.proopc-table-striped tbody {
        display: block;
        width: 100%;
    }


    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 10rem 11rem;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }


    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list>td {
        display: block;
        width: auto !important;
        box-sizing: border-box;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-name {
        grid-column: 1;
    }


    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-qty {
        grid-column: 2;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-total {
        grid-column: 3;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list {
        margin-bottom: 0.75rem;
        overflow: hidden;
        border: 1px solid var(--color-border-soft);
        border-radius: var(--bs-border-radius-lg);
        background: var(--color-surface);
    }

    /*
     * Summary rows remain generated by VP OPC, but no longer participate
     * in the legacy table-column sizing that restricted product rows.
     */
    #ProOPC table.cart-summary.proopc-table-striped tbody>tr>.col-advertisement {
        grid-column: 1 / -1;
    }

    #ProOPC table.cart-summary.proopc-table-striped tbody>tr.blank-row {
        display: block;
        width: 100%;
        height: 0.5rem;
    }

    #ProOPC table.cart-summary.proopc-table-striped tbody>tr.blank-row>td {
        display: none !important;
    }
}

@media (max-width: 979.98px) {
    #ProOPC .proopc-register-login {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    #ProOPC {
        padding-inline: 0.75rem;
    }

    #ProOPC #proopc-carttable-form {
        padding: 0rem;
    }

    #ProOPC table.cart-summary.proopc-table-striped {
        border-spacing: 0 0.85rem;
    }

    #ProOPC table.cart-summary.proopc-table-striped thead {
        display: none;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list {
        display: grid;
        grid-template-columns: 1fr;
        border: 1px solid var(--color-border-soft);
        border-radius: var(--bs-border-radius-lg);
        background: var(--color-surface);
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list>td {
        display: block;
        width: 100% !important;
        padding: 0.65rem 0.85rem;
        border: 0;
        background: transparent;
        text-align: left;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list>td:first-child,
    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list>td:last-child {
        border: 0;
        border-radius: 0;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-name {
        padding-top: 0.85rem;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-qty {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.85rem;
        border-top: 0;
        text-align: right;
    }

    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-qty::before,
    #ProOPC table.cart-summary.proopc-table-striped .cart-p-list .col-total::before {
        position: static;
        width: auto;
        padding: 0;
        color: var(--color-text-muted);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    #ProOPC .cart-product-description.with-image {
        gap: 0.85rem;
    }

    #ProOPC .cart-product-description .cart-images {
        flex-basis: 4.75rem;
        width: 4.75rem;
        height: 4.75rem;
    }


    #ProOPC .cart-product-description .cart-images {
        width: 4.75rem;
        height: 4.75rem;
    }

    #ProOPC .cart-product-description a {
        font-size: 0.95rem;
    }

    #ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total,
    #ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row,
    #ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill,
    #ProOPC table.cart-summary.proopc-table-striped tr.shipping-row,
    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total,
    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        margin-left: 0;
    }

    #ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total>.sub-headings,
    #ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row>.coupon-form-col,
    #ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill>.sub-headings,
    #ProOPC table.cart-summary.proopc-table-striped tr.shipping-row>.shipping-payment-heading,
    #ProOPC table.cart-summary.proopc-table-striped tr.payment-row>.shipping-payment-heading,
    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total>.sub-headings,
    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency>.sub-headings {
        padding-right: 1rem;
        text-align: left !important;
    }

    #ProOPC table.cart-summary.proopc-table-striped tr.cart-sub-total>td::before,
    #ProOPC table.cart-summary.proopc-table-striped tr.cart-coupon-row>td::before,
    #ProOPC table.cart-summary.proopc-table-striped tr.discount-rule-per-bill>td::before,
    #ProOPC table.cart-summary.proopc-table-striped tr.shipping-row>td::before,
    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total>td::before,
    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total-p-currency>td::before {
        display: none !important;
        content: none !important;
    }

    #ProOPC table.cart-summary.proopc-table-striped tr.grand-total td {
        padding-top: 0.85rem;
    }

    #ProOPC #proopc-coupon .proopc-input-append {
        grid-template-columns: 1fr;
    }

    #ProOPC #proopc-task-savecoupon {
        width: 100%;
    }
}