/* Pre-owned v2 (lane W, owner spec 2026-10-17). Linked only on pages that draw a v2 element (switch ON):
   the details badge + "Also available" card, the header "Pre-owned" menu item and the search dropdown tabs.
   Colours follow preowned-tag.css (solid #1D4ED8, white text). */
.sd-pv2-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: #1D4ED8;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* The details page's brand row while the page is Pre-owned (owner 2026-10-17 ~19:00 "pre owned badge to be same level as
   the brand"): the brand ("Apple") at the start, the badge at the end of the same line. Flex follows the page direction,
   so RTL mirrors it. The brand keeps its own look (.brand-chip, detail.css); its bottom margin moves to the row. */
.sd-pv2-brand-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.sd-pv2-brand-row .brand-chip { margin-bottom: 0; min-width: 0; }
.sd-pv2-brand-row .sd-pv2-badge { margin-inline-start: auto; }

/* "Also available" (owner 2026-10-17 ~19:00): the title with the chevron on the first line, then - stacked under the title -
   "Check more colours and storage", the monthly sentence and the lease sentence (each only when there is one). */
.sd-also-available {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 12px 14px;
    border: 1px solid #BCD0F7;
    border-radius: 10px;
    background: #F5F8FF;
    color: #1D4ED8;
    font-size: 14px;
    text-decoration: none;
}
.sd-also-available:hover, .sd-also-available:focus-visible { background: #EAF1FF; color: #1D4ED8; }
.sd-also-available__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.sd-also-available__title { font-weight: 600; }
.sd-also-available__more { color: #1D4ED8; font-size: 13px; }
.sd-also-available__monthly { color: #111827; font-size: 14px; font-weight: 600; }
.sd-also-available__lease { color: #4B5563; font-size: 13px; }
.sd-also-available__chev { margin-inline-start: auto; font-size: 18px; line-height: 1; }
.sd-also-available.is-loading { opacity: .6; pointer-events: none; }

.cat-bar-preowned { font-weight: 600; color: #1D4ED8; white-space: nowrap; }

/* New / Pre-owned tab bar (owner 2026-10-17, board "Search A: two tabs" - the app's ConditionTabBar): full width, two
   equal columns, 48 px, bold 15 px labels; the selected tab dark with a 3 px #1D4ED8 underline sitting on the bar's thin
   divider, the other grey with none. Not pills. The header search dropdown (.ac-tabs, home.js pv2Decorate) and the
   favourites page (.fav-pv2-tabs, myfavorite.js favPv2Paint) share it. */
.ac-tabs, .fav-pv2-tabs { display: flex; padding: 0; border-bottom: 1px solid #E5E7EB; }
.ac-tab, .fav-pv2-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    margin: 0 0 -1px;
    padding: 0 8px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #6B7280;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ac-tab:hover, .fav-pv2-tab:hover { color: #111827; }
/* Edge to edge in the search dropdown: over its 6 px padding (home.css .autocomplete-suggestions). */
.autocomplete-suggestions > .ac-tabs { margin: -6px -6px 6px; }
.ac-tab.is-active, .fav-pv2-tab.is-active { color: #111827; border-bottom-color: #1D4ED8; }
/* The favourites bar sits over the cards; [hidden] (a side with 0 cards) must win over display:flex above. */
.fav-pv2-tabs { margin: 0 0 16px; }
.fav-pv2-tabs[hidden] { display: none; }
.ac-see-all { display: block; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #1D4ED8; text-decoration: none; border-top: 1px solid #eee; }