/* The buyer's shortlist: save buttons, compare tray, saved and compare pages, recently viewed.
   Loads after site.css on every page with the site header. Sizes come from the tokens in site.css. */
[data-sl-saved-link][hidden]{display:none!important}
.sl-tray[hidden],.cmp-table tr[hidden]{display:none!important}

/* Header link */
.utd-header [data-sl-saved-link]{gap:var(--sp-2)}
.utd-header [data-sl-saved-link] .utd-badge{min-height:24px;padding-block:0;background:var(--utd-sky);color:var(--utd-deep);font-weight:600;font-variant-numeric:tabular-nums}

/* Save: a round icon button in the photo's corner */
.sl-save{position:absolute;top:var(--sp-2);right:var(--sp-2);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(12,35,64,.2);color:var(--utd-action);cursor:pointer;transition:background-color .18s,color .18s}
.sl-save:hover{background:#EAF1F8;color:var(--utd-action-hover)}
.sl-save[aria-pressed=true]{background:var(--utd-action);color:#fff}
.sl-save[aria-pressed=true]:hover{background:var(--utd-action-hover);color:#fff}
.utd-home .sl-save svg{width:22px;height:22px}
.utd-home :is(.sl-save[aria-pressed=true],.sl-tool[aria-pressed=true][data-sl-save]) svg{fill:currentColor}
.utd-home .sl-save:focus-visible,.utd-home .hp-car .sl-save:focus-visible{outline:3px solid #fff;outline-offset:0;box-shadow:0 0 0 6px var(--utd-action)}
.hp-car{position:relative}

/* Compare toggle */
.utd-home .sl-compare .sl-tick{opacity:0}
.utd-home .sl-compare[aria-pressed=true] svg rect{fill:var(--utd-action);stroke:var(--utd-action)}
.utd-home .sl-compare[aria-pressed=true] .sl-tick{opacity:1;stroke:#fff;stroke-width:2.2}
.inv-card__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px}
.inv-card__meta .inv-card__stock{min-width:0}
.utd-home main .inv-card .sl-compare{position:relative;z-index:1;flex:none;margin-left:auto;font-size:var(--t-small)}
.utd-home main .inv-card__foot .sl-remove{position:relative;z-index:1;width:100%}
.inv-results[data-view=list] .inv-card__meta{flex:1;min-width:0}
@media(max-width:640px){
  /* List view's phone photo is narrow: the save button keeps the corner, labels move to the bottom. */
  .inv-results[data-view=list] .inv-card__tags{top:auto;bottom:var(--sp-2)}
  .inv-results[data-view=list] .inv-card__count{display:none}
  .inv-results[data-view=list] .inv-card h3{align-self:flex-start}
  .inv-results[data-view=list] .inv-card__foot{flex-direction:column;align-items:stretch}
  .inv-results[data-view=list] .inv-card__meta{flex:none}
  .utd-home main .inv-results[data-view=list] .inv-card .sl-compare{margin-left:0}
}

/* Compare tray: a bottom bar that exists only while trucks are in it */
.sl-tray{position:fixed;left:0;right:0;bottom:0;z-index:46;padding:var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom,0px));background:var(--utd-deep);border-top:1px solid var(--home-border);color:#fff;transition:transform .2s}
.sl-tray__inner{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--bar)}
.utd-home .sl-tray__label{flex:none;color:#fff;font-size:var(--t-h4);font-weight:600;line-height:var(--lh-h4)}
.sl-tray__list{display:flex;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.sl-tray__thumb{position:relative;display:block;width:72px;height:48px;padding:0;overflow:hidden;background:var(--utd-surface);border:1.5px solid rgba(169,204,236,.5);border-radius:var(--r-badge);color:#fff;cursor:pointer}
.sl-tray__thumb:hover{border-color:var(--utd-sky)}
.sl-tray__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sl-tray__x{position:absolute;top:0;right:0;display:grid;place-items:center;width:24px;height:24px;background:rgba(12,35,64,.9);border-bottom-left-radius:var(--r-badge)}
.utd-home .sl-tray__x svg{width:16px;height:16px;stroke-width:2.2}
.utd-home .sl-tray__thumb:focus-visible{outline:3px solid #fff;outline-offset:1px}
.utd-home .sl-tray .sl-tray__go{flex:none;min-height:var(--bar);margin-left:auto}
.utd-home .sl-tray__go:focus-visible{outline:3px solid #fff;outline-offset:1px}
/* The tray makes room for itself, and steps aside for anything that needs the bottom of the screen. */
@media(min-width:641px){.utd-home:has(.sl-tray.is-on):not(:has(#utd-cookie-banner:not([hidden]))){padding-bottom:var(--callbar)}}
.utd-home:has(#utd-cookie-banner:not([hidden])) .sl-tray,
.utd-home:has(.tool-peek.is-on) .sl-tray,
html.utd-nav-open .sl-tray,
.inv-locked .sl-tray{transform:translateY(110%)}
@media(max-width:640px){
  .utd-home:has(.sl-tray.is-on) .utd-callbar,
  .utd-home:has(.sl-tray.is-on) .inv-mobile-bar{transform:translateY(110%)}
  .utd-home:has(:is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus) .sl-tray{transform:translateY(110%)}
  .sl-tray__inner{gap:var(--sp-3)}
  .utd-home .sl-tray__label{display:none}
  .sl-tray__thumb{width:56px;height:44px}
  .utd-home .sl-tray .sl-tray__go{padding-inline:var(--sp-3);font-size:var(--t-small);white-space:nowrap}
}
@media(max-width:380px){
  .sl-tray__thumb{width:44px}
  .utd-home .sl-tray .sl-tray__go{flex:1;min-width:0;white-space:normal;line-height:1.15}
}

/* Plain-language messages */
.sl-toast{position:fixed;left:50%;bottom:var(--sp-5);z-index:47;width:max-content;max-width:min(480px,calc(100vw - 2*var(--gutter)));padding:var(--sp-3) var(--sp-4);border-radius:var(--r-control);background:var(--utd-ink);box-shadow:var(--shadow-card);color:#fff;font-size:var(--t-small);line-height:var(--lh-small);text-align:center;visibility:hidden;transform:translateX(-50%)}
.sl-toast.is-on{visibility:visible}
.utd-home:has(.sl-tray.is-on) .sl-toast{bottom:calc(var(--callbar) + var(--sp-3))}
@media(max-width:640px){.sl-toast{bottom:calc(var(--callbar) + var(--sp-3))}}

/* Recently viewed */
.sl-rail{padding-block:var(--section-sm)}
.utd-home main .sl-rail h2{margin-bottom:var(--sp-4);font-size:var(--t-h3);line-height:var(--lh-h3)}
.sl-rail__list{display:flex;gap:var(--grid-gap);padding-bottom:var(--sp-2);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.sl-mini{display:flex;flex:0 0 232px;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--utd-line);border-radius:var(--r-card);color:var(--utd-ink);scroll-snap-align:start;transition:border-color .2s}
.sl-mini:hover{border-color:var(--utd-field-line)}
.sl-mini__photo{position:relative;display:block;aspect-ratio:4/3;background:#DCE5ED}
.sl-mini__photo img{display:block;width:100%;height:100%;object-fit:cover}
.sl-mini__photo .inv-badge{position:absolute;top:var(--sp-2);left:var(--sp-2)}
.sl-mini__none{display:grid;place-items:center;height:100%;color:var(--utd-body-ink);font-size:var(--t-min)}
.sl-mini__body{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4)}
.sl-mini__title{font-size:var(--t-small);font-weight:600;line-height:var(--lh-small)}
.sl-mini__price{color:var(--utd-action);font-size:var(--t-small);font-weight:700;line-height:var(--lh-small)}
@media(max-width:640px){
  .sl-rail__list{margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .sl-mini{flex-basis:min(64%,232px)}
}

/* Saved trucks page */
.sl-saved{padding-block:var(--sp-5) var(--section)}
.sl-saved__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--stack);margin-bottom:var(--sp-4)}
.utd-inventory main .sl-saved__bar p{color:var(--utd-ink);font-size:var(--t-small);line-height:var(--lh-small)}
.utd-inventory main .sl-saved__status{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-3);margin-bottom:var(--sp-4);color:var(--utd-ink);font-size:var(--t-small);line-height:var(--lh-small)}
.sl-saved__status:empty{display:none}
.utd-inventory main .sl-saved__loading{font-size:var(--t-small)}
.sl-saved__error{max-width:40rem}
.sl-saved__error .utd-btn-outline{margin-top:var(--sp-4)}
.sl-inline{color:var(--utd-action);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sl-empty{max-width:48rem}
.utd-inventory main .sl-empty h2{font-size:var(--t-h3);line-height:var(--lh-h3)}
.utd-inventory main .sl-empty p{margin-top:var(--sp-2)}
.sl-empty__actions{margin-top:var(--sp-5)}
.sl-types{padding-bottom:var(--section)}
.utd-inventory main .sl-types h2{margin-bottom:var(--sp-4);font-size:var(--t-h3);line-height:var(--lh-h3)}
@media(max-width:640px){
  .utd-home main .sl-saved__bar .home-button{width:100%}
}

/* Send this list to John */
.sl-dialog{width:min(640px,calc(100vw - 2*var(--gutter)));max-height:calc(100dvh - var(--sp-7));padding:var(--card-pad);overflow:auto;background:#fff;border:0;border-radius:var(--r-card);color:var(--utd-ink)}
.sl-dialog::backdrop{background:rgba(12,35,64,.6)}
.sl-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.utd-inventory main .sl-dialog h2{font-size:var(--t-h2);line-height:var(--lh-h2)}
.sl-dialog__close{display:grid;flex:none;place-items:center;width:44px;height:44px;padding:0;background:none;border:1.5px solid var(--utd-field-line);border-radius:50%;color:var(--utd-ink);cursor:pointer}
.sl-dialog__close:hover{background:#EAF1F8}
.utd-inventory main .sl-dialog__lede{margin-top:var(--sp-2)}
.utd-home .sl-dialog .home-form{margin-top:var(--sp-4);padding:0;border:0;border-radius:0}
.utd-home .sl-dialog .home-form.is-success{padding-block:var(--sp-5)}
@media(max-width:640px){
  .sl-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0}
}

/* Compare page */
.cmp{--cmp-top:var(--utd-main);padding-block:var(--sp-5) var(--section)}
.admin-bar .cmp{--cmp-top:calc(32px + var(--utd-main))}
.utd-inventory main .cmp-note{margin-bottom:var(--sp-4);color:var(--utd-ink);font-size:var(--t-small);line-height:var(--lh-small)}
.cmp-one{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--grid-gap);align-items:start}
.cmp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-3)}
.cmp-diff{display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;color:var(--utd-ink);font-size:var(--t-small);font-weight:500;line-height:var(--lh-small);cursor:pointer}
.cmp-diff input{width:24px;height:24px;margin:0;accent-color:var(--utd-action);color-scheme:light}
.utd-inventory main .cmp-swipe{display:none;font-size:var(--t-small);line-height:var(--lh-small)}
.cmp-table{width:100%;background:#fff;border:1px solid var(--utd-line);border-radius:var(--r-card);border-collapse:separate;border-spacing:0;table-layout:fixed}
.cmp-table :is(th,td){padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--utd-line);color:var(--utd-ink);font-size:var(--t-small);font-weight:400;line-height:var(--lh-small);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.cmp-table tbody tr:last-child :is(th,td){border-bottom:1px solid var(--utd-line)}
.cmp-table tfoot :is(th,td){border-bottom:0}
.cmp-table .cmp-label{width:190px;background:#fff;color:var(--utd-body-ink);font-weight:500}
.cmp-table .cmp-blank{color:var(--utd-body-ink)}
.cmp-photos :is(th,td){position:relative;padding-bottom:0;border-bottom:0}
.cmp-photo{display:block;aspect-ratio:4/3;overflow:hidden;background:#DCE5ED;border-radius:var(--r-control)}
.cmp-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cmp-photo span{display:grid;place-items:center;height:100%;padding:var(--sp-2);color:var(--utd-body-ink);font-size:var(--t-min);text-align:center}
.cmp-photos .inv-badge{position:absolute;top:calc(var(--sp-3) + var(--sp-2));left:calc(var(--sp-4) + var(--sp-2))}
.cmp-titles th{position:sticky;top:var(--cmp-top);z-index:2;background:#fff}
.cmp-title{display:block;color:var(--utd-ink);font-size:var(--t-h4);font-weight:600;line-height:var(--lh-h4)}
.cmp-title:hover{color:var(--utd-action)}
.cmp-price{display:block;margin-top:var(--sp-1);color:var(--utd-action);font-size:var(--t-h3);font-weight:700;line-height:var(--lh-h3)}
.cmp-actions{display:flex;flex-direction:column;gap:var(--sp-2)}
.utd-home .cmp-actions a{width:100%;white-space:normal}
.utd-inventory main .cmp-foot{margin-top:var(--sp-4)}
@media(max-width:900px){
  .cmp-table .cmp-label{width:140px}
  .cmp-table :is(th,td){padding-inline:var(--sp-3)}
}
@media(max-width:640px){
  .cmp-one{grid-template-columns:minmax(0,1fr)}
  .cmp-titles th{position:static}
  /* Two trucks: side by side, with each label on its own line above the pair. */
  .cmp[data-count="2"] :is(.cmp-table,thead,tbody,tfoot){display:block}
  .cmp[data-count="2"] .cmp-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp[data-count="2"] .cmp-table caption{display:block}
  .cmp[data-count="2"] .cmp-table .cmp-label{grid-column:1/-1;width:auto;padding:var(--sp-2);background:var(--utd-paper);border-bottom:0}
  .cmp[data-count="2"] .cmp-photos .cmp-label,.cmp[data-count="2"] .cmp-titles .cmp-label{display:none}
  .cmp[data-count="2"] .cmp-table :is(td,th:not(.cmp-label)){min-width:0;padding-inline:var(--sp-2)}
  /* Three trucks: a contained scroller with the labels pinned. */
  .cmp[data-count="3"] .cmp-swipe{display:block}
  .cmp[data-count="3"] .cmp-scroll{margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);overflow-x:auto;scroll-padding-inline:var(--gutter)}
  .cmp[data-count="3"] .cmp-table{width:576px}
  .cmp[data-count="3"] .cmp-table .cmp-label{position:sticky;left:calc(-1*var(--gutter));z-index:3;width:120px;padding-inline:var(--sp-2);box-shadow:1px 0 0 var(--utd-line)}
}
@media(prefers-reduced-motion:reduce){.sl-tray,.sl-save,.sl-mini{transition:none}}
@media print{.sl-save,.sl-compare,.sl-tray,.sl-toast,.sl-rail,.cmp-tools,.cmp-actions-row{display:none!important}.cmp-titles th{position:static}}