/* ===== Account pages — shared ===== */

/* Hide the account left nav on mobile / tablet — users access account via header user-icon dropdown */
@media (max-width: 1199.98px) {
    [id^="account-"] #column-left {
        display: none !important;
    }
}


/* Pipeline & product image rows: horizontal scroll (legacy + dashboard) */
.ds-order-pipeline-wrap,
.ds-order-list-pipeline-wrap,
.ds-order-list-images-wrap,
.ds-account-order-card-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ds-order-pipeline-wrap::-webkit-scrollbar,
.ds-order-list-pipeline-wrap::-webkit-scrollbar,
.ds-order-list-images-wrap::-webkit-scrollbar,
.ds-account-order-card-thumbs::-webkit-scrollbar {
    display: none;
}

.ds-order-list-images-wrap .d-flex {
    flex-wrap: nowrap;
    min-width: max-content;
}

/* Legacy pipeline steps (still used on dashboard mini-pipeline) */
.steps {
    flex-shrink: 0 !important;
    min-width: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
}
.steps.active {
    min-width: 52px !important;
    min-height: 52px !important;
    width: 52px !important;
    height: 52px !important;
}
.order-pipeline .line {
    flex-shrink: 0;
    min-width: 28px;
}
.order-pipeline {
    flex-wrap: nowrap;
}

/* ============================================================
   Account dashboard (account/account)
   ============================================================ */

.ds-account-dashboard {
    padding: 0 0 1rem;
}

.ds-account-hero {
    padding-bottom: .5rem;
}

/* Tighten breadcrumb → content gap on all account pages.
   Bootstrap's default --bs-breadcrumb-margin-bottom is 1rem; combined with the
   content-block padding and row gutter, it left ~50px of empty space between
   the breadcrumb and the page H1. Scope the override to account page roots so
   it doesn't affect breadcrumbs elsewhere. */
[id^="account-"] .ds-breadcrumb,
[id^="rma-"] .ds-breadcrumb {
    margin-bottom: .25rem;
}
.ds-account-hero-intro {
    max-width: 620px;
}

.ds-account-section-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Order cards — list of recent orders on the dashboard */
.ds-account-orders {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ds-account-order-card {
    display: block;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ds-border-color-light);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ds-account-order-card:hover {
    border-color: var(--ds-primary-color);
    box-shadow: 0 6px 18px rgba(17, 48, 37, .08);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
.ds-account-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.ds-account-order-card-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ds-account-order-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ds-account-order-card-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    padding-bottom: .25rem;
}
.ds-account-order-card-thumbs img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--ds-border-color-light);
    flex-shrink: 0;
}

/* Recent orders — product rows with name + options */
.ds-account-order-card-products {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ds-border-color-light);
}
.ds-account-order-card-product {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.ds-account-order-card-product-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ds-border-color-light);
}
.ds-account-order-card-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ds-account-order-card-product-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-account-order-card-product-name {
    line-height: 1.3;
    margin: 0;
}
.ds-account-order-card-product-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-account-order-card-product-options .ds-pp-option-chip {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ds-light-text-color, rgba(80, 80, 80));
}
.ds-account-order-card-product-options .ds-pp-option-label {
    color: var(--ds-dark-text-color, #1c1c1c);
}
.ds-account-order-card-product-options .ds-pp-option-value {
    color: var(--ds-dark-text-color, #1c1c1c);
}
.ds-account-order-card-product-qty {
    flex-shrink: 0;
    margin-left: .5rem;
    align-self: center;
}
.ds-account-order-card-product-more {
    padding-left: calc(56px + .75rem);
}

/* Pipeline inside dashboard order cards — slightly smaller scale */
.ds-account-order-card-pipeline {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ds-border-color-light);
}
.ds-account-order-card-pipeline .ds-pipeline-step {
    min-width: 60px;
}
.ds-account-order-card-pipeline .ds-pipeline-circle {
    width: 30px;
    height: 30px;
}
.ds-account-order-card-pipeline .ds-pipeline-step--active .ds-pipeline-circle {
    width: 36px;
    height: 36px;
}
.ds-account-order-card-pipeline .ds-pipeline-step--active .ds-pipeline-circle img {
    width: 18px;
    height: 18px;
}
.ds-account-order-card-pipeline .ds-pipeline-step::before {
    top: 14px;
}
.ds-account-order-card-pipeline .ds-pipeline-label {
    font-size: 12px;
    margin-top: .5rem;
}
.ds-account-order-card-pipeline {
    margin-top: 1rem;
    overflow-x: auto;
}
.ds-account-order-card-pipeline::-webkit-scrollbar {
    display: none;
}
.ds-account-order-card-pipeline .order-pipeline {
    flex-wrap: nowrap;
    min-width: max-content;
}

.ds-account-empty {
    padding: 2rem 1rem;
    border: 1px dashed var(--ds-border-color-light);
}

/* Address cards — premium grid on /account/address */
.ds-address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .ds-address-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ds-address-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 1px solid var(--ds-border-color-light);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ds-address-card:hover {
    border-color: var(--ds-primary-color);
    box-shadow: 0 4px 16px rgba(17, 48, 37, 0.08);
    transform: translateY(-2px);
}
.ds-address-card--default {
    border-color: var(--ds-primary-color);
}

.ds-address-card-default-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .5rem;
    background: var(--ds-primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.ds-address-card-body {
    flex: 1 1 auto;
    margin-bottom: 1rem;
    padding-right: 4rem;
}

.ds-address-card-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ds-border-color-light);
}

.ds-address-card-action {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    transition: color .15s ease;
}
.ds-address-card-action:hover {
    color: var(--ds-primary-color);
    text-decoration: none;
}
.ds-address-card-action--danger {
    color: var(--ds-light-text-color-light, rgba(80, 80, 80));
    margin-left: auto;
}
.ds-address-card-action--danger:hover {
    color: var(--ds-red-color, #b22222);
}

/* Address form — section grouping on /account/address/add and /edit */
.ds-address-form-section {
    padding: 1.25rem;
    border: 1px solid var(--ds-border-color-light);
    background: #fff;
}
.ds-address-form .ds-required {
    color: var(--ds-red-color, #b22222);
}
.ds-form-error {
    color: var(--ds-red-color, #b22222);
    line-height: 1.4;
}
.ds-address-form .form-control,
.ds-address-form .form-select {
    border-color: var(--ds-border-color-light);
}
.ds-address-form .form-control:focus,
.ds-address-form .form-select:focus {
    border-color: var(--ds-primary-color);
    box-shadow: 0 0 0 .15rem rgba(17, 48, 37, 0.1);
}
/* Company-fields toggle: starts hidden, JS shows when checkbox is on */
.ds-address-company-fields {
    display: none;
}

/* Company toggle checkbox — square, matches the rest of the address form */
.ds-address-form .payment-company-toggle-checkbox {
    border-radius: 0;
}

/* Wishlist — remove (X) button in the top-right of each saved product card.
   Sits above .ds-module-buttons (z-index: 10 from main.min.css) which otherwise
   covers it on desktop. */
.ds-wishlist-remove {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fff;
    color: var(--ds-dark-text-color, #1c1c1c);
    border: 1px solid var(--ds-border-color-light);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.ds-wishlist-remove:hover {
    color: var(--ds-red-color, #b22222);
    border-color: var(--ds-red-color, #b22222);
    background: #fff;
    text-decoration: none;
}

/* Subtle Cancel ghost button in returns list — sits inside the clickable card
   and stops propagation so clicking it doesn't open the return view */
.ds-account-order-card-cancel {
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}
.ds-account-order-card-cancel:hover {
    color: var(--ds-red-color, #b22222);
}

/* RMA viewrma — Print link in the hero (top-right, subtle) */
.ds-order-info-print-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
}
.ds-order-info-print-link:hover {
    color: var(--ds-primary-color);
}

/* RMA viewrma — reply composer inside conversation section */
.ds-rma-reply-textarea {
    min-height: 110px;
    font-size: 14px;
    line-height: 1.5;
}
.ds-rma-attach-link {
    background: transparent;
    border: 0;
}
.ds-rma-attach-link:hover {
    color: var(--ds-primary-color);
}

.min-width-0 {
    min-width: 0;
}

/* ============================================================
   Order info page (account/order/info)
   ============================================================ */

.ds-order-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Hero block: title + status pill + meta items */
.ds-order-info-hero {
    padding: 1.5rem;
    background: var(--ds-primary-light-color-light, #f9f8f5);
    border: 1px solid var(--ds-border-color-light);
}
.ds-order-info-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: .75rem;
}
.ds-order-info-meta-item {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ds-order-info-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    background: var(--ds-primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.3;
    border-radius: 999px;
}
.ds-order-info-tracking-copy {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.ds-order-info-tracking-copy:hover {
    color: var(--ds-primary-color);
}
.ds-order-info-tracking-copy svg {
    opacity: .55;
    transition: opacity .15s ease;
}
.ds-order-info-tracking-copy:hover svg {
    opacity: 1;
}
.ds-order-info-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* Section cards — match post-payment chrome */
.ds-order-info-section {
    padding: 1.5rem;
    border: 1px solid var(--ds-border-color-light);
    background: #fff;
}

/* CTA row under timeline */
.ds-order-info-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}
.ds-order-info-cta-row .button {
    flex: 1 1 240px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Pipeline (new) — order info page
   ============================================================ */

.ds-pipeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
}
.ds-pipeline-step {
    flex: 1 1 0;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 .25rem;
}
/* Connector line — spans the full step width; we trim the ends on first/last */
.ds-pipeline-step::before {
    content: '';
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ds-border-color-light, #e7dfc9);
    z-index: 0;
}
.ds-pipeline-step:first-child::before { left: 50%; }
.ds-pipeline-step:last-child::before  { right: 50%; }
/* Passed and active segments paint the line green */
.ds-pipeline-step--passed::before,
.ds-pipeline-step--active::before {
    background: var(--ds-primary-color);
}
/* The pending step right AFTER the active one needs its line LEFT half green
   (because the line "comes from" the active step) — handled by sibling selector */
.ds-pipeline-step--active + .ds-pipeline-step--pending::before {
    background: linear-gradient(
        to right,
        var(--ds-primary-color) 0%,
        var(--ds-primary-color) 50%,
        var(--ds-border-color-light, #e7dfc9) 50%,
        var(--ds-border-color-light, #e7dfc9) 100%
    );
}

.ds-pipeline-circle {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--ds-border-color-light, #e7dfc9);
    color: var(--ds-light-text-color-light, rgba(80, 80, 80, .7));
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
}
.ds-pipeline-step--passed .ds-pipeline-circle,
.ds-pipeline-step--active .ds-pipeline-circle {
    background: var(--ds-primary-color);
    border-color: var(--ds-primary-color);
    color: #fff;
}
.ds-pipeline-step--active .ds-pipeline-circle {
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 4px rgba(17, 48, 37, .08);
}
.ds-pipeline-step--active .ds-pipeline-circle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1); /* white-out the pipeline image */
}
.ds-pipeline-step--pending .ds-pipeline-circle {
    background: #fff;
    border-color: var(--ds-border-color-light, #e7dfc9);
    color: var(--ds-light-text-color-light, #909090);
}

.ds-pipeline-label {
    margin-top: .65rem;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ds-light-text-color, rgba(80, 80, 80));
    overflow-wrap: anywhere;
}
.ds-pipeline-step--active .ds-pipeline-label {
    color: var(--ds-dark-text-color);
    font-weight: 500;
}

/* Mobile: a 6-step pipeline on one row gives ~50px per step which truncates
   labels like "Goedgekeurd" / "Terugsturen" / "In behandeling" into ugly
   2-3 line stacks. Wrap onto 2 rows of 3 instead - much more breathing
   room per label. The connector trim rules below re-anchor the first/last
   ::before of EACH row (not just the overall first/last child) so the line
   doesn't dangle into nothing at row starts/ends. */
@media (max-width: 575.98px) {
    .ds-pipeline {
        flex-wrap: wrap;
        row-gap: 1rem;
    }
    .ds-pipeline-step {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        min-width: 0;
    }
    /* Row-start: line starts at the circle (no half-line dangling left). */
    .ds-pipeline-step:nth-child(3n+1)::before {
        left: 50%;
    }
    /* Row-end: line ends at the circle (no half-line dangling right). */
    .ds-pipeline-step:nth-child(3n)::before {
        right: 50%;
    }
    /* When the active step ends a row, the global "--active + --pending" gradient
       rule (above) would paint a green stub on the first step of the next row,
       which reads as if progress continues across the break. Reset that step's
       connector back to the neutral background so the visual progress line stays
       within the row of the active step. */
    .ds-pipeline-step--active + .ds-pipeline-step--pending:nth-child(3n+1)::before {
        background: var(--ds-border-color-light, #e7dfc9);
    }
}

/* ============================================================
   Order info — tracking history list (no aggressive hover)
   ============================================================ */

.ds-tracking-list,
.ds-order-history-list {
    display: flex;
    flex-direction: column;
}

.ds-tracking-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ds-border-color-light, #e7dfc9);
}
.ds-tracking-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ds-tracking-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Order info — product list (copied from postpayment.css) */
.ds-pp-products-list {
    display: flex;
    flex-direction: column;
}

.ds-pp-product {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
}

.ds-pp-product--bordered {
    border-top: 1px solid #e7dfc9;
}

.ds-pp-product-main {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.ds-pp-product-thumb {
    width: 96px;
    min-width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7dfc9;
    border-radius: 0 !important;
}

.ds-pp-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-pp-product-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 1 1 0;
}

.ds-pp-product-content h3 {
    margin-bottom: 0 !important;
}

.ds-pp-product-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
}

.ds-pp-option-chip {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 4px;
    width: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--ds-dark-text-color);
    font-size: 14px;
    line-height: 1.45;
    border: 0;
    border-radius: 0;
}

.ds-pp-option-label {
    font-weight: 600;
}

.ds-pp-option-value {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ds-pp-product-pricing {
    min-width: 170px;
}

.ds-pp-product-meta {
    color: #505050;
    font-size: 14px;
    line-height: 1.6;
}

.ds-pp-product-total {
    margin-top: 10px;
    color: var(--ds-dark-text-color);
    font-size: 15px;
}

.ds-pp-product-total strong {
    font-size: 22px;
}

/* ===== Datetimepicker — brand override ===== */
.bootstrap-datetimepicker-widget {
    background: var(--ds-body-bg-color, #fff);
    border: 1px solid var(--ds-border-color, #F2F2F2);
    border-radius: 0;
    box-shadow: var(--ds-medium-shadow, 0px 4px 20px 0px rgba(37,38,39,0.10));
    padding: .5rem;
    font-family: var(--ds-main-font, 'Noto Sans', sans-serif);
    font-size: .875rem;
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    border-radius: 0;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--ds-primary-light-color, #f9f8f5);
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--ds-primary-color, rgb(17, 48, 37));
    color: #fff;
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--ds-primary-color, rgb(17, 48, 37));
    color: #fff;
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--ds-primary-color, rgb(17, 48, 37));
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: var(--ds-light-text-color, rgba(80,80,80));
}
.bootstrap-datetimepicker-widget table th {
    color: var(--ds-dark-text-color, #1c1c1c);
    font-weight: 500;
}
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next {
    color: var(--ds-primary-color, rgb(17, 48, 37));
    font-size: 1.125rem;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
    font-weight: 600;
    color: var(--ds-dark-text-color, #1c1c1c);
}
.bootstrap-datetimepicker-widget.bottom:before {
    border-bottom-color: var(--ds-border-color, #F2F2F2);
}
.bootstrap-datetimepicker-widget.bottom:after {
    border-bottom-color: var(--ds-body-bg-color, #fff);
}

/* Order History — card layout */
.ds-order-history-item {
    padding: 1rem;
    border-bottom: 1px solid var(--ds-border-color-light, #e7dfc9);
    border-left: 2px solid transparent;
}
.ds-order-history-item,
.ds-order-history-item:first-child,
.ds-order-history-item:hover {
    background: transparent !important;
}
.ds-order-history-item:last-child {
    border-bottom: none;
}
.ds-order-history-item:first-child {
    border-left-color: #d4a837;
}
.ds-order-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Mobile overrides */
@media (max-width: 767.98px) {
    .ds-order-info-meta {
        flex-direction: column;
        gap: .75rem !important;
    }
    .expand .line {
        width: 40px;
    }
    .ds-pp-option-chip {
        gap: 4px;
    }
    .ds-pp-product {
        flex-direction: column;
        gap: 16px;
    }
    .ds-pp-product-main {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        align-items: flex-start;
        column-gap: 16px;
        row-gap: 12px;
    }
    .ds-pp-product-content {
        display: contents;
    }
    .ds-pp-product-content h3 {
        grid-column: 2;
        grid-row: 1;
    }
    .ds-pp-product-options {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
    }
    .ds-pp-product-thumb {
        width: 78px;
        min-width: 78px;
        height: 78px;
    }
    .ds-pp-product-total strong {
        font-size: 20px;
    }
    .ds-pp-product-pricing {
        order: 3;
        width: 100%;
        text-align: right;
        align-self: flex-end;
    }
    .ds-pp-product-meta,
    .ds-pp-product-total {
        text-align: right;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .ds-order-list-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }
    .ds-order-list-header > div:last-child {
        align-self: flex-end;
    }
}