.account-layout {
    display: flex;
    min-height: 100vh;
}

.account-sidebar {
    width: 250px;
    flex-shrink: 0;
    padding: 28px 20px;

    background: var(--surface);
    border-right: 1px solid var(--border);
}

.account-logo {
    display: block;
    margin-bottom: 38px;

    color: var(--text);
    font-size: 24px;
    font-weight: 800;
    text-decoration: none;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-nav a {
    padding: 12px 14px;

    color: var(--text-muted);
    text-decoration: none;

    border-radius: var(--radius-sm);
}

.account-nav a:hover,
.account-nav a.active {
    color: var(--text);
    background: #f4f4f5;
}

.account-logout {
    margin-top: 32px;
    padding: 12px 14px;

    border: 0;
    background: transparent;

    color: var(--text-muted);
    cursor: pointer;
}

.account-logout:hover {
    color: var(--text);
}

.account-content {
    width: 100%;
    max-width: 1300px;
    padding: 40px;
}

.account-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 32px;
}

.account-user {
    color: var(--text-muted);
    font-size: 14px;
}

.account-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.account-section {
    overflow: hidden;
}

.account-section-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.account-section-header h2 {
    margin: 0;
}

.account-section-body {
    padding: 22px;
}

.account-action-card {
    padding: 25px;
}

.account-action-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 850px) {
    .account-layout {
        display: block;
    }

    .account-sidebar {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .account-content {
        padding: 24px;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }
}
.order-link {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.order-link:hover {
    text-decoration: underline;
}

#orders .empty-state p {
    margin-bottom: 18px;
}

#orders table tbody tr:hover {
    background: var(--surface-soft);
}
.detail-back {
    display: inline-block;
    margin-bottom: 10px;

    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
}

.detail-back:hover {
    color: var(--text);
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
}

.detail-grid-bottom {
    margin-top: 20px;
}

.detail-summary {
    padding: 22px;
}

.detail-summary h2 {
    margin-bottom: 22px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 12px 0;

    border-bottom: 1px solid var(--border);
}

.summary-total {
    margin-top: 5px;
    padding-top: 17px;

    border-bottom: 0;

    font-size: 18px;
}

.timeline {
    padding: 22px;
}

.timeline-item {
    position: relative;

    display: flex;
    gap: 15px;

    padding-bottom: 25px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item:not(:last-child)::before {
    content: "";

    position: absolute;
    top: 12px;
    left: 5px;
    bottom: -2px;

    width: 2px;

    background: var(--border);
}

.timeline-dot {
    position: relative;
    z-index: 1;

    width: 12px;
    height: 12px;
    margin-top: 4px;

    flex-shrink: 0;

    border-radius: 50%;
    background: var(--primary);
}

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

.timeline-date {
    margin-top: 4px;
    font-size: 13px;
}

.timeline-note {
    margin-top: 8px;
    line-height: 1.5;
}

.tracking-number {
    margin: 20px 0;

    font-weight: 700;
    word-break: break-all;
}

@media (max-width: 900px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.order-progress {display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:16px 0;}
.order-progress li {padding:10px 14px;border:1px solid #d4d4d8;border-radius:8px;flex:1 1 140px;}
.order-progress [aria-current="step"] {border:2px solid #18181b;font-weight:700;background:#f4f4f5;color:#18181b;}

.saved-quotes-controls {display:flex;flex-wrap:wrap;align-items:end;gap:14px;}
.saved-quotes-controls label {display:grid;gap:6px;flex:1 1 180px;min-width:0;}
.saved-quotes-controls input,.saved-quotes-controls select {width:100%;min-width:0;padding:10px;border:1px solid #d4d4d8;border-radius:6px;background:#fff;color:#18181b;}
.saved-quotes-list {padding:0;list-style:none;}
.saved-quotes-list li {display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding:14px 0;border-bottom:1px solid #e4e4e7;}
.saved-quotes-list a {overflow-wrap:anywhere;min-width:0;}
.saved-quotes-list time {color:#52525b;font-size:.9rem;}

/* Spacing for the account overview, including order and quote filters. */
.account-content{min-width:0}
.account-home .account-grid{grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:28px;align-items:start}
.account-home .account-grid>section{min-width:0}
.account-home .account-section-header{padding:24px 28px}
.account-home .account-order-tools{padding:24px 28px}
.account-home .order-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:end}
.account-home .order-controls label,.account-home .saved-quotes-controls label{display:flex;flex-direction:column;gap:10px;min-width:0;font-size:14px;font-weight:600;color:var(--text-muted)}
.account-home .order-controls input,.account-home .order-controls select,.account-home .saved-quotes-controls input,.account-home .saved-quotes-controls select{width:100%;min-width:0;margin:0;font-weight:400;color:var(--text)}
.account-home .order-controls button,.account-home .saved-quotes-controls button{align-self:end;min-height:46px}
.account-home #orders-count{margin:22px 0 0;color:var(--text-muted);font-size:14px}
.account-home #orders-count:empty{display:none}
.account-home #orders-error{margin:18px 0 0}
.account-home .account-action-card{padding:28px}
.account-home .account-action-card h2{margin:0 0 14px}
.account-home .account-action-card p{margin:0 0 24px}
.account-home .account-quotes{margin-top:28px;padding:28px}
.account-home .account-quotes h2{margin:0 0 14px}
.account-home .account-quotes>p{line-height:1.65;margin:0 0 24px}
.account-home .account-quotes>p:last-child{margin:24px 0 0}
.account-home .saved-quotes-controls{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:20px;margin:24px 0}
.account-home #quotes-count{font-size:14px;color:var(--text-muted);margin:0 0 18px}
.account-home #quotes-count:empty{display:none}
.account-home .saved-quotes-list{margin:0}
.account-home .saved-quotes-list li{padding:18px 0;gap:12px 24px}
.account-home #saved-quotes{line-height:1.65}
@media(max-width:1100px){.account-home .account-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.account-home .account-section-header,.account-home .account-order-tools,.account-home .account-action-card,.account-home .account-quotes{padding:22px}.account-home .saved-quotes-controls{grid-template-columns:minmax(0,1fr)}.account-home .account-grid{gap:24px}.account-home .account-quotes{margin-top:24px}}
@media(max-width:520px){.account-content.account-home{padding:24px 16px}.account-home .order-controls{grid-template-columns:minmax(0,1fr);gap:18px}.account-home .account-section-header,.account-home .account-order-tools,.account-home .account-action-card,.account-home .account-quotes{padding:20px}.account-home .account-topbar{align-items:flex-start;gap:14px;flex-wrap:wrap}.account-home .saved-quotes-controls button{width:100%}}

.order-progress-card{padding:28px;margin-bottom:28px}.order-progress-card>h2{margin:0 0 20px}.order-progress-card #order-progress>p{margin:0;line-height:1.7}.order-progress-card .order-progress{margin-bottom:0}@media(max-width:600px){.order-progress-card{padding:20px;margin-bottom:22px}}
/* Size the order history to the available content area, including the sidebar. */
#order-detail{container-type:inline-size;min-width:0;width:100%}
#order-detail .detail-grid>*{min-width:0}
#order-detail .order-progress{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px}
#order-detail .order-progress li{min-width:0;overflow-wrap:anywhere}
#order-detail .timeline-content{flex:1;overflow-wrap:anywhere}
#order-detail .timeline-date{line-height:1.5}
#order-detail .summary-row{gap:12px;overflow-wrap:anywhere}
#order-detail .btn{max-width:100%;white-space:normal;text-align:center}
@container(max-width:800px){#order-detail .detail-grid{grid-template-columns:minmax(0,1fr)}}
@container(max-width:420px){#order-detail .order-progress{grid-template-columns:minmax(0,1fr)}#order-detail .summary-row{flex-wrap:wrap}#order-detail .timeline{padding:18px}#order-detail .timeline-item{gap:12px}#order-detail .account-section-header{padding:18px}}

.order-cards{display:grid;gap:22px;padding:clamp(16px,2vw,28px)}.order-card{min-width:0;border:1px solid var(--border);border-radius:16px;padding:clamp(16px,2vw,24px);background:var(--surface,#fff)}.order-card-heading{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-bottom:18px;border-bottom:1px solid var(--border)}.order-card-heading>strong{margin-left:auto}.order-card-heading time{font-size:13px;color:var(--text-muted)}.order-card-badges{display:flex;flex-wrap:wrap;gap:8px}.order-card-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;margin:22px 0}.order-model-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:start;min-width:0}.order-model-info{min-width:0;overflow-wrap:anywhere}.order-model-info>strong{display:block;line-height:1.5;margin-bottom:12px}.order-model-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.order-model-facts dt{font-size:12px;color:var(--text-muted)}.order-model-facts dd{margin:4px 0 0;font-size:14px}.order-model-info details{margin-top:12px;font-size:13px;line-height:1.6}.order-model-info summary{cursor:pointer}.order-model-row .cart-thumbnail{display:grid;place-items:center;aspect-ratio:1;background:#edf3f0;border:1px solid var(--border);border-radius:12px;padding:8px;font-size:10px;text-align:center;color:var(--text-muted);min-width:0}.order-model-row .cart-thumbnail img{display:block;width:100%;height:auto;object-fit:contain}.order-card>.btn{white-space:normal;max-width:100%}@media(max-width:540px){.order-model-row{grid-template-columns:72px minmax(0,1fr);gap:12px}.order-card-heading>strong{margin-left:0}.order-card-heading{gap:10px 16px}.order-card-badges{flex-basis:100%}.order-model-facts{grid-template-columns:minmax(0,1fr)}}

#order-items .cart-thumbnail{display:grid;place-items:center;width:110px;max-width:100%;aspect-ratio:1;margin-bottom:12px;padding:8px;background:radial-gradient(ellipse at top,#fff,#e8f0ec);border:1px solid #dce6e0;border-radius:12px;overflow:hidden;font-size:11px;text-align:center}#order-items .cart-thumbnail img{display:block;width:100%;height:100%;object-fit:contain}

/* Separate order-detail panels and keep short cards at their natural height. */
#order-detail .detail-grid{align-items:start}
#order-detail > .detail-grid + .detail-summary{margin-top:24px}
#order-detail .order-progress + p{margin-top:14px}

/* Separate order actions horizontally and when they wrap. */
.order-card>.btn{margin-inline-end:12px;margin-bottom:10px}
.order-card>.btn:last-child{margin-inline-end:0}

/* Clear, compact delivery information and order history. */
.portal-page #order-detail .detail-summary:has(#delivery-address){width:100%;max-width:460px;box-sizing:border-box;overflow-wrap:anywhere;padding:20px 24px;background:#f0f5f9;border-color:#d5e1ea;border-radius:14px;box-shadow:none}
.portal-page #order-detail .detail-summary:has(#delivery-address) h2{font-size:16px;margin:0 0 8px;color:#36566e}
.portal-page #order-detail #delivery-address{margin:0;font-size:16px;line-height:1.65;max-width:80ch;color:#334d60}
.portal-page #order-detail .detail-grid-bottom{gap:18px;align-items:start;margin-top:18px}
.portal-page #order-detail .detail-grid-bottom>.card{border-radius:14px;box-shadow:none;overflow:hidden}
.portal-page #order-detail .detail-grid-bottom .account-section-header{padding:18px 22px;background:#f4f7fa}
.portal-page #order-detail .detail-grid-bottom h2{font-size:18px;line-height:1.4;margin:0}
.portal-page #order-detail .timeline{padding:22px}
.portal-page #order-detail .timeline-dot{background:#6486a1;box-shadow:0 0 0 4px #edf3f7}
.portal-page #order-detail .timeline-item:last-child .timeline-dot{background:#294c63}
.portal-page #order-detail .timeline-content{word-break:normal;overflow-wrap:break-word}
.portal-page #order-detail .timeline-content strong{font-size:16px;line-height:1.5}
.portal-page #order-detail .timeline-date{font-size:13px;color:#6a7e8e}
.portal-page #order-detail .timeline-note{font-size:15px;line-height:1.65;color:#52697a;margin-top:6px}
.portal-page #order-detail #tracking-card{padding:22px;background:#f0f5f9;border-color:#d5e1ea}
.portal-page #order-detail #shipping-state{font-size:15px;line-height:1.65;margin:10px 0;color:#52697a}
.portal-page #order-detail #tracking-number{word-break:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.6;font-weight:500;margin:14px 0 0;padding-top:12px;border-top:1px solid #d5e1ea;color:#36566e}
@media(max-width:540px){.portal-page #order-detail .detail-summary:has(#delivery-address),.portal-page #order-detail #tracking-card,.portal-page #order-detail .timeline{padding:18px}.portal-page #order-detail .detail-grid-bottom .account-section-header{padding:16px 18px}.portal-page #order-detail #delivery-address{font-size:15px}}