/*
    Shared visual language for the order-facing pages (order details, shipment details, order list,
    checkout thank-you). The vocabulary here is lifted from the Flow checkout
    (Themes/prowireusa/Views/Checkout/FlowCheckout.cshtml), which hard-codes every value in an inline
    <style> block: same palette, radii, type scale and components, but promoted to custom properties
    and given a "pw-" prefix so the order pages read as the same product as the checkout.

    FlowCheckout itself is deliberately NOT migrated onto this file: it is heavily JS-coupled and a
    cosmetic refactor there is pure regression risk. When it is migrated, delete its <style> block
    and map flow-* onto the classes below.

    Nothing here is scoped to a page: the "pw-" prefix is the namespace, so the partials that use
    these classes work anywhere. Registered in Views/Shared/Head.cshtml AFTER bootstrap (this theme
    appends bootstrap last, so anything registered before it loses).
*/

:root {
    /* Action / brand */
    --pw-blue: #158cfb;
    --pw-blue-hover: #0f7ae0;
    --pw-teal: #2fbfa7;
    --pw-teal-hover: #29ab96;
    --pw-link: #2563eb;
    --pw-navy: #3a4b7a;

    /* Ink scale: heading -> body -> meta -> muted */
    --pw-ink: #111;
    --pw-ink-1: #1a1a1a;
    --pw-ink-2: #344054;
    --pw-muted: #667085;
    --pw-muted-2: #98a2b3;

    /* Lines */
    --pw-border: #e4e7ec;
    --pw-border-input: #cfd4dc;
    --pw-border-strong: #cbd5e0;
    --pw-divider: #f0f1f3;

    /* Surfaces */
    --pw-surface: #fff;
    --pw-surface-alt: #f5f5f7;
    --pw-header: #d9d9dc;
    --pw-hover: #f8fafc;
    --pw-sel: #eff6ff;

    /* Status: text / background / border */
    --pw-ok: #067647;
    --pw-ok-bg: #d1fadf;
    --pw-ok-border: #a6f4c5;
    --pw-warn: #b54708;
    --pw-warn-bg: #fffaeb;
    --pw-warn-border: #fedf89;
    --pw-danger: #b42318;
    --pw-danger-bg: #fdf1f0;
    --pw-danger-border: #e4b8b4;
    --pw-info: #175cd3;
    --pw-info-bg: #eff6ff;
    --pw-info-border: #dbeafe;

    /* Radii */
    --pw-r-lg: 10px;
    --pw-r-md: 8px;
    --pw-r-sm: 6px;
    --pw-r-pill: 999px;

    --pw-shadow-card: 0 1px 4px rgba(16, 24, 40, .1);
}

/* ---------------------------------------------------------------- page shell */

.pw-page {
    padding-bottom: 40px;
    color: var(--pw-ink-2);
}

.pw-page h1 {
    font-size: 28px;
    font-weight: 400;
    margin: 18px 0 16px;
    color: var(--pw-ink);
}

/* ---------------------------------------------------------------- numbered section card */
/* The signature checkout element: gray body, darker header strip, solid-blue numeral square flush
   to the left edge. */

.pw-section {
    background: var(--pw-surface-alt);
    border-radius: var(--pw-r-lg);
    margin-bottom: 26px;
    overflow: hidden;
}

.pw-section-header {
    display: flex;
    align-items: center;
    background: var(--pw-header);
}

.pw-section-number {
    width: 56px;
    height: 56px;
    background: var(--pw-blue);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
}

.pw-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-left: 18px;
}

/* Optional right-hand slot in the header strip (counts, "3 invoices", etc.). */
.pw-section-aside {
    margin-left: auto;
    margin-right: 18px;
    font-size: 13px;
    color: #475467;
}

.pw-section-body {
    padding: 22px 24px 26px;
}

@media (max-width: 560px) {
    .pw-section-number { width: 44px; height: 44px; flex: 0 0 44px; font-size: 20px; }
    .pw-section-title { font-size: 17px; margin-left: 12px; }
    .pw-section-body { padding: 16px 14px 18px; }
}

/* ---------------------------------------------------------------- plain card */

.pw-card {
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-r-lg);
    padding: 18px 20px;
}

/* Header card at the top of the order pages: the order's key facts plus its actions. */
.pw-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 32px;
    margin-bottom: 26px;
}

.pw-summary-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    flex: 1 1 auto;
    min-width: 0;
}

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

.pw-fact-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #475467;
    margin-bottom: 4px;
}

.pw-fact-value {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--pw-ink);
    word-break: break-word;
}

/* Order number / total: bigger, still not bold - the label above already marks what it is. */
.pw-fact-value--lg {
    font-size: 19px;
    font-weight: 400;
}

.pw-summary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- pills */

.pw-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--pw-r-pill);
    border: 1px solid transparent;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    white-space: nowrap;
}

.pw-pill--ok { background: var(--pw-ok-bg); color: var(--pw-ok); border-color: var(--pw-ok-border); }
.pw-pill--warn { background: var(--pw-warn-bg); color: var(--pw-warn); border-color: var(--pw-warn-border); }
.pw-pill--info { background: var(--pw-info-bg); color: #1d4ed8; border-color: var(--pw-info-border); }
.pw-pill--danger { background: var(--pw-danger-bg); color: var(--pw-danger); border-color: var(--pw-danger-border); }
.pw-pill--neutral { background: #edf2f7; color: #4a5568; border-color: var(--pw-border-strong); }

/* ---------------------------------------------------------------- address card */

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

@media (max-width: 720px) {
    .pw-grid-2 { grid-template-columns: 1fr; }
}

.pw-address-card {
    background: var(--pw-surface);
    border-radius: var(--pw-r-md);
    box-shadow: var(--pw-shadow-card);
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}

.pw-address-name {
    color: var(--pw-navy);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

/* The shared _StandardAddressLines partial emits <li>s, so the address body stays a list. */
.pw-address-lines,
.pw-address-lines li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pw-address-meta {
    font-size: 13px;
    color: var(--pw-muted);
}

/* Footer strip on an address card (shipping method, status pill). */
.pw-card-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pw-divider);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 13px;
    color: var(--pw-ink-2);
}

/* The shared _OrderCustomValues partial emits <li>s, and blockifying them as flex items keeps them
   display:list-item - so their markers render OUTSIDE the item box and land on whatever sits to the
   left (the stray bullet after "Payment Status: Authorized", overlapping it on the shorter NET-30
   line). These are inline facts, not a list: drop the marker and let the flex gap separate them. */
.pw-card-foot .custom-value {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Match the <strong> used by the hand-written facts in the same row, so every "Label: value" pair
   in the footer reads the same way. */
.pw-card-foot .custom-value .label {
    font-weight: 700;
}

/* Comma-separate the run of facts: the flex gap alone left "Authorized Payment Type: Saved Card"
   reading as one phrase. A trailing comma (rather than a leading bullet or a border-left divider)
   is the only separator that survives wrapping - it stays attached to the end of the item before
   the break, where a leading one would dangle at the start of the next line, which is exactly what
   made the old list markers look broken. Only items FOLLOWED by a custom-value get one, so the
   shipping footer's "Shipping Method: X" + SHIPPED pill is left alone. Browsers without :has()
   simply get today's spacing. */
.pw-card-foot > *:has(+ .custom-value)::after {
    content: ",";
}

/* ---------------------------------------------------------------- item rows */
/* Built on the checkout rail-item shape: contain-fit thumb, blue name, muted meta, right-aligned
   money. Reflows on narrow screens without the <td>-label hack the stock data-table relies on. */

.pw-list {
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-r-md);
    overflow: hidden;
}

.pw-list-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pw-divider);
    transition: background .12s;
}

.pw-list-row:last-child { border-bottom: none; }
.pw-list-row:hover { background: var(--pw-hover); }

.pw-item-thumb {
    flex: 0 0 56px;
    width: 56px;
}

.pw-item-thumb img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.pw-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.pw-item-name {
    font-size: 14px;
    line-height: 1.4;
    color: var(--pw-link);
    font-weight: 500;
}

.pw-item-name a { color: inherit; text-decoration: none; }
.pw-item-name a:hover { text-decoration: underline; }

.pw-item-meta {
    font-size: 12px;
    color: var(--pw-muted);
    margin-top: 3px;
    line-height: 1.5;
}

.pw-item-meta .attributes,
.pw-item-meta .rental-info { margin-top: 2px; }

.pw-item-extra {
    font-size: 12.5px;
    margin-top: 4px;
}

.pw-item-extra a { color: var(--pw-link); }

/* Money column: line total in bold, unit price and qty underneath. */
.pw-item-money {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    padding-left: 8px;
}

.pw-item-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-ink);
}

.pw-item-unit {
    font-size: 12px;
    color: var(--pw-muted);
    margin-top: 3px;
}

.pw-item-qty {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pw-ink-2);
}

@media (max-width: 560px) {
    /* the money block wraps to its own line under the name, indented past the thumb */
    .pw-list-row { flex-wrap: wrap; gap: 6px 10px; padding: 12px; }
    .pw-item-body { flex: 1 1 0; }
    .pw-item-money { flex: 0 0 100%; margin: 0; padding-left: 66px; text-align: left; }
}

/* ---------------------------------------------------------------- totals */

.pw-totals {
    margin-left: auto;
    max-width: 380px;
}

.pw-total-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 0;
    font-size: 14px;
    color: #333;
}

.pw-total-label { font-weight: 600; }
.pw-total-value { font-weight: 700; color: var(--pw-ink); white-space: nowrap; }

.pw-total-grand {
    border-top: 2px solid var(--pw-ink);
    margin-top: 6px;
    padding-top: 12px;
}

.pw-total-grand .pw-total-label,
.pw-total-grand .pw-total-value {
    font-size: 19px;
    font-weight: 800;
}

/* ---------------------------------------------------------------- buttons */

.pw-btn-primary,
.pw-btn-secondary {
    display: inline-block;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.pw-btn-primary {
    background: var(--pw-teal);
    color: #fff;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pw-btn-primary:hover { background: var(--pw-teal-hover); color: #fff; }

.pw-btn-secondary {
    background: #eef1f6;
    color: var(--pw-ink-2);
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
}

.pw-btn-secondary:hover { background: #e2e7ef; color: var(--pw-ink-2); }

.pw-btn-danger { color: var(--pw-danger); }
.pw-btn-danger:hover { background: var(--pw-danger-bg); color: var(--pw-danger); }

/* 34x34 square glyph button. Originally .invoice-action-btn on the Historical Invoices tab; that
   page now consumes this class so the two invoice surfaces stay identical. */
.pw-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--pw-r-sm);
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    /* #158cfb, the site's action blue: the same colour as the search-box magnifier and the "NEW" menu
       badge (--secondary-color in custom.css, --accent-blue-active-color in styles.css). Was
       var(--primary-color, #2a65b3), which resolved to the darker navy and read as a different family
       from every other blue on the site. */
    background: var(--pw-blue);
    transition: box-shadow .15s ease, opacity .15s ease;
}

.pw-icon-btn + .pw-icon-btn { margin-left: 6px; }

.pw-icon-btn:hover,
.pw-icon-btn:focus {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    opacity: .92;
}

.pw-icon-btn svg {
    width: 17px;
    height: 17px;
    fill: #fff;
    display: block;
}

/* The view/download pair on the invoice surfaces used to be separated by colour (slate vs primary).
   The download is now a red PDF mark, which carries that distinction on its own, so the eye takes the
   same action blue as every other glyph button on the site. */

/* Bare file-type mark rather than a filled button: the icon IS the affordance. Keeps .pw-icon-btn's
   34px box so it lines up with the eye beside it. */
.pw-file-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--pw-r-sm);
    vertical-align: middle;
    text-decoration: none;
    transition: background .15s ease;
}

.pw-file-btn:hover,
.pw-file-btn:focus { background: rgba(226, 35, 26, .1); }

.pw-file-btn :is(svg, img) { width: 23px; height: 23px; display: block; }

.pw-icon-btn + .pw-file-btn,
.pw-file-btn + .pw-icon-btn { margin-left: 6px; }

/* ---------------------------------------------------------------- collapsible */

.pw-collapse {
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-r-md);
    margin-bottom: 12px;
    overflow: hidden;
}

.pw-collapse:last-child { margin-bottom: 0; }

.pw-collapse-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.pw-collapse-head:hover { background: var(--pw-hover); }

.pw-collapse-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pw-ink-1);
}

.pw-collapse-sub {
    font-size: 12.5px;
    color: var(--pw-muted);
    margin-top: 2px;
}

.pw-collapse-grow { flex: 1 1 auto; min-width: 0; }

.pw-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 2px solid var(--pw-muted);
    border-bottom: 2px solid var(--pw-muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.pw-collapse-head[aria-expanded="true"] .pw-chevron { transform: rotate(-135deg); }

.pw-collapse-body {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--pw-divider);
}

.pw-collapse-head[aria-expanded="false"] + .pw-collapse-body { display: none; }

/* Nested item rows inside a collapse body should not double up on borders. */
.pw-collapse-body .pw-list {
    border: none;
    border-radius: 0;
}

.pw-collapse-body .pw-list-row { padding-left: 0; padding-right: 0; }
.pw-collapse-body .pw-list-row:hover { background: none; }

/* ---------------------------------------------------------------- callouts / empty */

.pw-note {
    font-size: 13px;
    border-radius: var(--pw-r-md);
    padding: 10px 12px;
    border: 1px solid transparent;
}

.pw-note--info { color: var(--pw-info); background: var(--pw-info-bg); border-color: var(--pw-info-border); }
.pw-note--ok { color: var(--pw-ok); background: #f0fdf4; border-color: var(--pw-ok-border); }
.pw-note--warn { color: #93370d; background: var(--pw-warn-bg); border-color: var(--pw-warn-border); }
.pw-note--danger { color: var(--pw-danger); background: var(--pw-danger-bg); border-color: var(--pw-danger-border); }

.pw-empty {
    padding: 18px 20px;
    background: var(--pw-surface);
    border: 1px dashed var(--pw-border);
    border-radius: var(--pw-r-md);
    font-size: 13.5px;
    color: var(--pw-muted);
}

.pw-empty a { color: var(--pw-link); }

/* ---------------------------------------------------------------- data rows (invoices) */

.pw-rows { width: 100%; border-collapse: collapse; }

.pw-rows th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #475467;
    padding: 0 12px 8px 0;
    border-bottom: 1px solid var(--pw-border);
    white-space: nowrap;
}

.pw-rows td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--pw-divider);
    font-size: 13.5px;
    color: var(--pw-ink-2);
    vertical-align: middle;
}

.pw-rows tr:last-child td { border-bottom: none; }
.pw-rows .pw-num { font-weight: 700; color: var(--pw-ink); white-space: nowrap; }
.pw-rows .pw-money { text-align: right; white-space: nowrap; font-weight: 600; }
.pw-rows .pw-acts { text-align: right; white-space: nowrap; padding-right: 0; }

.pw-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- timeline (tracking events) */

.pw-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }

.pw-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--pw-border);
}

.pw-timeline li {
    list-style: none;
    position: relative;
    padding: 0 0 16px;
}

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

.pw-timeline li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pw-surface);
    border: 2px solid var(--pw-border-strong);
}

/* Newest event first, so the top dot is the current state. */
.pw-timeline li:first-child::before { border-color: var(--pw-blue); background: var(--pw-blue); }

.pw-timeline-event { font-size: 13.5px; font-weight: 600; color: var(--pw-ink-1); }
.pw-timeline-meta { font-size: 12.5px; color: var(--pw-muted); margin-top: 2px; }

/* ---------------------------------------------------------------- busy state */
/* Dim the region, block interaction, float a spinner + message over it. Lifted from .flow-busy;
   toggled by adding/removing the class plus a data-busy-message attribute. */

.pw-busy { position: relative; pointer-events: none; min-height: 90px; }
.pw-busy > * { opacity: .4; }

.pw-busy::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 20px;
    margin-left: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid #c8ddf5;
    border-top-color: var(--pw-blue);
    animation: pw-spin .7s linear infinite;
}

.pw-busy::after {
    content: attr(data-busy-message);
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 58px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--pw-info);
}

@keyframes pw-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- order list */

.pw-order-rows { display: flex; flex-direction: column; gap: 14px; }

.pw-order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-r-lg);
    padding: 16px 20px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.pw-order-row:hover {
    border-color: var(--pw-border-strong);
    box-shadow: var(--pw-shadow-card);
}

.pw-order-row .pw-summary-actions { margin-left: auto; }

/* Compact filter toolbar, matching the one on the Historical Invoices tab. */
.pw-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    background: #f9f9f9;
    padding: 10px 12px;
    border-radius: var(--pw-r-sm);
    margin-bottom: 18px;
}

.pw-toolbar label {
    font-size: 14px;
    color: var(--pw-ink-2);
    white-space: nowrap;
    margin: 0;
}

.pw-toolbar select,
.pw-toolbar input {
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 8px;
    background: var(--pw-surface);
}

.pw-toolbar .pw-btn-secondary {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.pw-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The search grows and pushes the period dropdown to the right; it goes full-width on narrow screens
   so the dropdown drops beneath it rather than being squeezed. */
.pw-toolbar-group--search {
    flex: 1 1 260px;
}

.pw-toolbar-group--search input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .pw-toolbar-group--search { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- pager */
/* Client-side pager (Historical Invoices). Summary left, controls right, sized to match .pw-toolbar. */

.pw-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.pw-pager__summary {
    font-size: 13px;
    color: var(--pw-muted);
}

.pw-pager__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.pw-pager__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--pw-border-strong);
    border-radius: var(--pw-r-sm);
    background: var(--pw-surface);
    color: var(--pw-ink-2);
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.pw-pager__btn:hover:not([disabled]):not(.is-current) {
    border-color: var(--pw-blue);
    color: var(--pw-blue);
}

.pw-pager__btn.is-current {
    background: var(--pw-blue);
    border-color: var(--pw-blue);
    color: #fff;
    cursor: default;
}

.pw-pager__btn[disabled] {
    opacity: .5;
    cursor: default;
}

.pw-pager__ellipsis {
    padding: 0 4px;
    color: var(--pw-muted-2);
}

/* ---------------------------------------------------------------- print */

/* ================================================================ account tabs */
/* Customer info, Addresses, Payment Options, Shipping Accounts and Invoice Emails each used to carry
   their own inline <style> block, with their own buttons, spacing and type scale. Everything below is
   the shared vocabulary they now use instead, so the whole My Account area reads as one product with
   the order pages. Nothing is page-scoped; the "pw-" prefix is the namespace. */

/* Page heading with an action pinned to the right ("Add New", "Add Shipping Account"). Replaces three
   separate hand-rolled flex rules that each aligned their button slightly differently. */
.pw-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.pw-page-head h1 { margin-right: auto; }

/* Standing explanation under a tab heading. Deliberately NOT max-width capped: the account content
   column is already narrow enough, and a 70ch cap left an obvious empty gutter down the right of the
   Invoice Emails and Tax exemption tabs. */
.pw-intro {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pw-ink-2);
    margin: 0 0 18px;
}

/* Some intros are localisable HTML rather than a bare sentence (the Avalara exemption-certificate
   description ships an <h3> and several <p>s). Normalise whatever comes through so an injected
   heading does not arrive browser-default-huge and centred, with justified paragraphs under it. */
.pw-intro h2,
.pw-intro h3,
.pw-intro h4 {
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--pw-ink);
    margin: 0 0 8px;
}

.pw-intro p {
    margin: 0 0 8px;
    text-align: left;
    line-height: 1.6;
}

.pw-intro p:last-child { margin-bottom: 0; }
.pw-intro a { color: var(--pw-link); }

/* Buttons carrying a leading glyph. The base button is inline-block, which gives an icon no gap and no
   vertical centring, so this is opt-in rather than a change to the base that would reflow the order
   pages. */
.pw-btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pw-btn-with-icon svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Compact variant, for buttons that sit inside a row rather than under a form. */
.pw-btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

/* Destructive glyph button, matching .pw-icon-btn's 34px box. */
.pw-icon-btn--danger { background: var(--pw-danger); }

.pw-btn-primary:disabled,
.pw-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- forms */

.pw-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}

/* Explicit two-column split, for forms where one block is much taller than the rest: auto-fit spread
   the Customer info sections across three ragged columns of wildly different heights. Here the left
   column holds the tall block and the right column stacks the short ones. */
.pw-form-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.pw-form-col,
/* Some blocks arrive already wrapped (Company details + Newsletter share one), so the wrapper needs
   the same stacking gap or its two cards butt together. */
.pw-form-col > div {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

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

.pw-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pw-navy);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pw-divider);
}

.pw-field { margin-bottom: 14px; position: relative; }
.pw-field:last-child { margin-bottom: 0; }

/* nop emits <label><input><nop-required/>, so the asterisk follows the input in the DOM. Pin it to the
   top right of the field to sit on the label's line rather than orphaned below the box. */
.pw-field > .required {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pw-danger);
}

.pw-field .field-validation-error {
    display: block;
    font-size: 12px;
    color: var(--pw-danger);
    margin-top: 4px;
}

.pw-field > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--pw-ink-2);
    margin-bottom: 5px;
}

.pw-field input[type="text"],
.pw-field input[type="email"],
.pw-field input[type="tel"],
.pw-field input[type="password"],
.pw-field select,
.pw-field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--pw-border-input);
    border-radius: var(--pw-r-sm);
    font-size: 14px;
    color: var(--pw-ink);
    background: var(--pw-surface);
}

.pw-field input:focus,
.pw-field select:focus,
.pw-field textarea:focus {
    outline: none;
    border-color: var(--pw-blue);
    box-shadow: 0 0 0 3px rgba(21, 140, 251, .12);
}

.pw-field .pw-field-note {
    display: block;
    font-size: 12px;
    color: var(--pw-muted);
    margin-top: 4px;
}

/* A note that is itself a link (the "forgot password" hint) still has to look clickable. */
a.pw-field-note { color: var(--pw-link); text-decoration: underline; }

/* Checkbox and radio rows read as one line, unlike the stacked label-over-control above. */
.pw-field-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

.pw-field-check input { margin: 0; flex: 0 0 auto; }
.pw-field-check label { margin: 0; font-weight: 400; }

.pw-form-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Standalone form pages (password recovery) render through _ColumnsOne, so they have no account nav to
   balance against. A card pinned to the left of a full-width page reads as unfinished, so centre the
   whole block and cap it at form width. The heading goes inside the wrapper too, so it starts on the
   card's left edge rather than floating out at the page margin. */
.pw-form-narrow {
    max-width: 460px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------- address form */
/* The Add/Edit address pages render the SHARED _CreateOrUpdateAddress partial, which the checkout also
   uses (FlowCheckout, FlowShipTo, the Opc* steps) and which carries its own label-beside-input layout
   there. Restyling the partial's own .inputs markup would reflow every checkout step, so instead the
   two account pages wrap it in .pw-address-form and the field look is applied through that scope only.
   Checkout is untouched. */

.pw-address-form .inputs {
    margin-bottom: 14px;
    position: relative;
}

.pw-address-form .inputs:last-child { margin-bottom: 0; }

.pw-address-form .inputs > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--pw-ink-2);
    margin-bottom: 5px;
}

.pw-address-form .inputs input[type="text"],
.pw-address-form .inputs input[type="email"],
.pw-address-form .inputs input[type="tel"],
.pw-address-form .inputs select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--pw-border-input);
    border-radius: var(--pw-r-sm);
    font-size: 14px;
    color: var(--pw-ink);
    background: var(--pw-surface);
}

.pw-address-form .inputs input:focus,
.pw-address-form .inputs select:focus {
    outline: none;
    border-color: var(--pw-blue);
    box-shadow: 0 0 0 3px rgba(21, 140, 251, .12);
}

.pw-address-form .inputs > .required {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pw-danger);
}

.pw-address-form .inputs .field-validation-error {
    display: block;
    font-size: 12px;
    color: var(--pw-danger);
    margin-top: 4px;
}

/* Two-up, so a ten-field address is not a single tall ribbon of inputs. */
.pw-address-form .edit-address {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 18px;
}

.pw-address-form .please-wait { font-size: 12px; color: var(--pw-muted); }

/* ---------------------------------------------------------------- address list */
/* A list, not a card grid: one row per address, so a customer with a dozen ship-tos scans a single
   column instead of hunting across a two-up grid of equal-looking rectangles. Ordering is fixed -
   bill-to first, then the default ship-to, then the rest - and the page re-sorts in place when the
   default changes, so row order always matches the roles. */

.pw-addr-rows { display: flex; flex-direction: column; gap: 10px; }

.pw-addr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
    background: var(--pw-surface);
    border: 1px solid var(--pw-border);
    border-radius: var(--pw-r-lg);
    padding: 14px 18px;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.pw-addr-row:hover {
    border-color: var(--pw-border-strong);
    box-shadow: var(--pw-shadow-card);
}

.pw-addr-main { flex: 1 1 320px; min-width: 0; }

.pw-addr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

/* Not bold: the role pill beside it already carries the emphasis. */
.pw-addr-name {
    font-size: 15px;
    font-weight: 400;
    color: var(--pw-ink);
}

.pw-addr-lines {
    font-size: 14px;
    line-height: 1.5;
    color: var(--pw-ink-2);
    word-break: break-word;
}

.pw-addr-meta {
    font-size: 12.5px;
    color: var(--pw-muted);
    margin-top: 3px;
    word-break: break-word;
}

.pw-addr-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* "Locked" note standing where a delete button would be, for addresses the ERP will not let us remove. */
/* Same 34px box as .pw-icon-btn, muted and unclickable. It stands where the delete button would be,
   so every row's action column is the same width and the edit buttons line up down the list - which
   they did not while this was a lock plus the word "Locked". The tooltip carries the explanation. */
.pw-addr-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--pw-r-sm);
    background: #eef1f6;
    color: var(--pw-muted-2);
    cursor: help;
}

.pw-addr-lock svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* One class per row drives every default-ship-to affordance, so the toggle only has to move
   .is-default from one row to another: the flag pill, the "set as default" button and the
   delete/locked swap all key off it. Both the delete button and the locked note are always in the
   DOM; CSS decides which is live, so nothing has to be rebuilt when the default moves. */
.pw-addr-row:not(.is-default) .pw-addr-default-flag { display: none; }
.pw-addr-row.is-default .pw-addr-set-default { display: none; }
.pw-addr-row.is-default .pw-addr-delete { display: none; }
.pw-addr-row:not(.is-default) .pw-addr-lock-default { display: none; }

/* The bill-to is locked outright, whether or not it is also the default ship-to. */
.pw-addr-row.is-billto .pw-addr-delete,
.pw-addr-row.is-billto .pw-addr-lock-default { display: none; }
.pw-addr-row:not(.is-billto) .pw-addr-lock-billto { display: none; }

.pw-addr-row[aria-busy="true"] { opacity: .55; pointer-events: none; }

@media (max-width: 640px) {
    .pw-addr-actions { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- chips */
/* Removable tokens, used for the extra invoice-email recipients. */

.pw-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.pw-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* symmetric: a chip is a label, not a control (the invoice-email list is add-only) */
    padding: 5px 12px;
    border-radius: var(--pw-r-pill);
    background: var(--pw-info-bg);
    border: 1px solid var(--pw-info-border);
    color: #1d4ed8;
    font-size: 13px;
}

.pw-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(29, 78, 216, .12);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.pw-chip button:hover { background: rgba(29, 78, 216, .25); }

/* ---------------------------------------------------------------- inline add row */

.pw-inline-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 520px;
}

.pw-inline-add input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--pw-border-input);
    border-radius: var(--pw-r-sm);
    font-size: 14px;
}

.pw-inline-add input:focus {
    outline: none;
    border-color: var(--pw-blue);
    box-shadow: 0 0 0 3px rgba(21, 140, 251, .12);
}

/* Status line that reserves its own height, so showing a message does not shift the layout below it. */
.pw-form-msg {
    font-size: 12.5px;
    min-height: 18px;
    margin-top: 6px;
    color: var(--pw-danger);
}

/* ---------------------------------------------------------------- modal */
/* Shared shell for the Add-shipping-account dialog. */

.pw-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 2147483000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

.pw-modal-overlay.open { display: flex; }

.pw-modal {
    background: var(--pw-surface);
    border-radius: var(--pw-r-lg);
    width: 100%;
    max-width: 440px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(16, 24, 40, .2);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.pw-modal-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--pw-ink);
    margin: 0 0 4px;
}

.pw-modal-hint {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--pw-muted);
}

.pw-modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media print {
    .pw-summary-actions,
    .pw-chevron,
    .pw-icon-btn { display: none !important; }

    .pw-section,
    .pw-card,
    .pw-list,
    .pw-collapse {
        break-inside: avoid;
        box-shadow: none;
    }

    /* Collapsibles must print open regardless of their toggle state. */
    .pw-collapse-head[aria-expanded="false"] + .pw-collapse-body { display: block !important; }
}

/* ---------------------------------------------------------------- buy block
   The site's one add-to-cart pattern: a full-width pill quantity stepper stacked over a full-width pill
   Add to cart (the category tile look). Used by the product page, the configurators and the kit builders;
   each keeps its own +/- logic (minimum footage, price breaks), this only sets the look. Colours are literal
   so it reads the same in every theme, including the Deutsch store's. */
.pw-buy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 380px;
}

.pw-buy .qty-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 44px;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfd6de;
    border-radius: 999px;
}

.pw-buy .qty-btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #1d2939;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

    .pw-buy .qty-btn:hover:not(:disabled) { background: #f4f6f8; }
    .pw-buy .qty-btn:disabled { opacity: .4; cursor: not-allowed; }

.pw-buy .qty-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #1d2939;
    border-right: 1px solid #1d2939;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    text-align: center;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    font-size: 15px;
    color: #475467;
    -moz-appearance: textfield;
    appearance: textfield;
}

    .pw-buy .qty-input:focus { outline: none; background: #f8fbff; }
    .pw-buy .qty-input::-webkit-outer-spin-button,
    .pw-buy .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pw-buy .pw-buy__btn {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #1268f1;
    color: #fff;
    font-family: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 46px;
    box-sizing: border-box;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s ease;
}

    .pw-buy .pw-buy__btn:hover:not(:disabled) { background: #0d57cf; }
    .pw-buy .pw-buy__btn:disabled { opacity: .5; cursor: not-allowed; }

.pw-buy .pw-buy__label {
    margin: 0 0 -2px;
    font-size: 13px;
    font-weight: 600;
    color: #475467;
}

/* ---------------------------------------------------------------- Save to BOM
   One control everywhere (product page, Deutsch Kit Builder, Mil-Spec, Striped Wire). The markup carries both
   looks; ProWire Theme > "Save to BOM style" picks one: the outline pill (default) or, with pw-bom--heart on the
   page, the heart over an "Add to BOM" link. */
.pw-bom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 20px;
    border: 1px solid #1268f1;
    border-radius: 999px;
    background: #fff;
    color: #1268f1;
    font-family: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .12s ease;
}

    .pw-bom-btn:hover { background: #e8f3fe; }
    .pw-bom-btn:disabled { opacity: .5; cursor: not-allowed; }
    .pw-bom-btn .pw-bom-btn__clip { font-size: 15px; line-height: 1; }
    .pw-bom-btn .pw-bom-btn__heart,
    .pw-bom-btn .pw-bom-btn__label--heart { display: none; }

.pw-bom--heart .pw-bom-btn {
    flex-direction: column;
    gap: 4px;
    width: auto;
    height: auto;
    margin: 4px auto 0;
    padding: 4px 18px;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

    .pw-bom--heart .pw-bom-btn:hover { background: none; }
    .pw-bom--heart .pw-bom-btn:hover .pw-bom-btn__label { text-decoration: underline; }
    .pw-bom--heart .pw-bom-btn .pw-bom-btn__clip,
    .pw-bom--heart .pw-bom-btn .pw-bom-btn__label--button { display: none; }
    .pw-bom--heart .pw-bom-btn .pw-bom-btn__heart,
    .pw-bom--heart .pw-bom-btn .pw-bom-btn__label--heart { display: block; }