/* Market 4: only the primary header row stays visible during page scrolling. */
:root { --tm-sticky-header-height: 91px; }
html { scroll-padding-top: calc(var(--tm-sticky-header-height) + 12px); }
.tm-storefront > .site-header { position: sticky; top: 0; z-index: var(--z-header, 400); border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.tm-storefront > .topline { z-index: calc(var(--z-header, 400) + 1); }
.tm-storefront > .header-navigation { flex: 0 0 auto; background: #fff; border-bottom: 1px solid var(--line); }
.tm-storefront main :is([id], a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: calc(var(--tm-sticky-header-height) + 12px); }
.tm-storefront .unit-pdp__purchase,
.tm-storefront .model-selection-layout .gallery,
.tm-storefront .tm-checkout-page .tm-cart-summary { top: calc(var(--tm-sticky-header-height) + 16px); }

/* The header has one search field and submit action, without injected/native ×. */
.header-main .search input[type="search"] { flex: 1 1 0; width: 0; min-width: 0; }
.header-main .search input[type="search"]::-webkit-search-cancel-button,
.header-main .search input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; }

/* Separate factual badges remain one line and cannot consume the photo area. */
.market-card .card-status-stack { max-width: calc(100% - 58px); gap: 4px; }
.market-card .card-photo-badge,
.market-card .card-condition { display: inline-flex; align-items: center; max-width: 100%; min-height: 22px; padding: 3px 7px; font-size: 10px; line-height: 16px; white-space: nowrap; overflow-wrap: normal; }
.market-card .card-condition { gap: 4px; color: #fff; pointer-events: auto; }
.market-card .card-photo-badge:not(.card-battery) { display: block; overflow: hidden; text-overflow: ellipsis; }
.market-card .card-condition > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-card .card-condition-dot { flex-shrink: 0; }
.market-card .card-battery { gap: 5px; color: #fff; }
.market-card .card-condition--good .card-condition-dot { background: var(--green); }
.market-card .card-condition--warning .card-condition-dot { background: var(--orange); }
.market-card .card-condition--neutral .card-condition-dot,
.market-card .card-condition--mixed .card-condition-dot { background: #fff; }
@media (max-width: 680px) {
    :root { --tm-sticky-header-height: 114px; }
}
