/* browse pages (2026-11 redesign). Loaded site-wide after shell.css.
   Owns: the shared listing tile (.tile*), browse/home (listing_list),
   collections, seller profile, anon search limit, live community feed.
   Tokens only; breakpoints 600 / 840 / 1200. */

/* =============================================================================
   Shared listing tile: photo with text beneath, no card container.
   ============================================================================= */
.tile { min-width: 0; }
.tile-link {
    display: flex; flex-direction: column; gap: 0.5rem;
    color: var(--text); text-decoration: none;
}
.tile-link:hover, .tile-link:focus-visible { color: var(--text); text-decoration: none; }
.tile-link:focus-visible { border-radius: var(--radius-md); }
.tile-link:hover .tile-title, .tile-link:focus-visible .tile-title {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tile-photo {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: var(--radius-md); background: var(--surface-hi);
}
.tile-photo img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    filter: brightness(var(--photo-dim));
}
.tile-photo-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--text-3);
}
.tile-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tile-tags .tag svg { flex: 0 0 auto; }
.tile-name { display: flex; flex-direction: column; gap: 0.125rem; }
.tile-title {
    margin: 0; font-size: var(--fs-large); line-height: 1.25; color: var(--text);
    overflow-wrap: anywhere;
}
.tile-what { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.tile-latin { font-style: italic; }
.tile-price {
    margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.5rem;
}
.tile-price .price {
    font-family: var(--font-sans); font-size: var(--fs-large); font-weight: 700; color: var(--text);
    letter-spacing: normal;
}
.tile-price-note { font-size: var(--fs-small); color: var(--text-2); }
.tile-time {
    margin: 0; display: flex; align-items: center; gap: 0.375rem;
    font-size: var(--fs-small); color: var(--text-2);
}
.tile-time > svg { display: none; flex: 0 0 auto; }
/* countdown.js sets yellow/orange/red under 24h: amber text + clock icon then. */
.tile-time:has(.countdown-yellow, .countdown-orange, .countdown-red) { color: var(--amber-text); font-weight: 600; }
.tile-time:has(.countdown-yellow, .countdown-orange, .countdown-red) > svg { display: inline-block; }
.tile .countdown,
.tile .countdown-green, .tile .countdown-yellow, .tile .countdown-orange,
.tile .countdown-red, .tile .countdown-ended {
    color: inherit; font-weight: inherit; animation: none; font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.tile-ship { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
/* Compact square tiles so more listings fit on screen (all widths). */
.tile-link { gap: 0.375rem; }
.tile-photo { aspect-ratio: 1 / 1; }
.tile-title { font-size: var(--fs-body); }
.tile-price .price { font-size: var(--fs-body); }
@media (max-width: 599.98px) {
    .tile-link { gap: 0.25rem; }
    .tile-tags .tag { font-size: var(--fs-caption); }
}
@media (prefers-reduced-motion: no-preference) {
    .tile-photo img { transition: filter 0.2s; }
}

/* Promoted tag: quiet status tag (style.css still styles .spotlight-chip as a
   mono uppercase fill; neutralise it everywhere the partial renders). */
.spotlight-chip {
    font-family: var(--font-sans); text-transform: none; letter-spacing: normal;
    background: var(--surface-hi); color: var(--text-2); border-color: transparent;
    padding: 0.125rem 0.5rem; font-size: var(--fs-caption); line-height: 1.5;
    border-radius: 999px; cursor: default; user-select: auto;
}

/* =============================================================================
   Browse / home (listing_list)
   ============================================================================= */
.browse-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.browse-head-text { min-width: 0; flex: 1 1 320px; }
.browse-head-text h1 { overflow-wrap: anywhere; }
.browse-head .page-lede a { font-weight: 600; }
.browse-sort { display: flex; align-items: center; gap: 0.625rem; flex: 0 0 auto; }
.browse-sort label { color: var(--text-2); font-size: var(--fs-small); white-space: nowrap; }
.browse-sort select { padding: 0 2rem 0 0.75rem; cursor: pointer; }

.browse-notice {
    margin: 0 0 1.5rem; padding: 0.75rem 1rem;
    border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius-md); background: var(--surface);
}
.browse-notice p { margin: 0; }
.browse-notice a { font-weight: 600; }

.browse-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2.5rem; }
.browse-results { flex: 999 1 560px; min-width: 0; }

/* Filters: a <details> disclosure on phones, a fixed left column at >=840px
   (an inline script opens it at that width). */
.browse-filters { flex: 1 1 100%; min-width: 0; }
.browse-filters-toggle { list-style: none; gap: 0.5rem; cursor: pointer; display: inline-flex; align-items: center; }
.browse-filters-toggle::-webkit-details-marker { display: none; }
.browse-filters[open] > .browse-filters-toggle { margin-bottom: 1rem; }
.browse-filters-form { display: flex; flex-direction: column; gap: 1.5rem; }
.browse-filters > .filter-group { margin-top: 1.5rem; }
.filter-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.filter-group legend, .filter-group-title {
    margin: 0 0 0.25rem; padding: 0;
    font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--text);
    letter-spacing: normal; text-transform: none;
}
.filter-opt {
    display: flex; align-items: center; gap: 0.625rem;
    min-height: 40px; color: var(--text-2); cursor: pointer;
}
.filter-opt input { margin: 0; flex: 0 0 auto; }
.filter-opt:hover { color: var(--text); }
.filter-link { text-decoration: none; }
.filter-link:hover { text-decoration: none; }
.filter-link[aria-current="true"] { color: var(--text); font-weight: 600; }
.filter-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: 0 0 auto;
    border: 2px solid var(--field-border); border-radius: 4px; background: var(--surface);
}
.filter-link[aria-current="true"] .filter-check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filter-note { margin: 0.25rem 0 0.75rem; font-size: var(--fs-small); color: var(--text-2); }
.filter-note .btn-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
@media (pointer: coarse) { .filter-opt { min-height: var(--tap); } }

@media (min-width: 840px) {
    .browse-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; }
    .browse-filters { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
    .browse-filters[open] > .browse-filters-toggle { display: none; }
}

.browse-scope { margin: 0 0 1rem; gap: 0.5rem; }
.browse-applied { margin: 0 0 1.75rem; gap: 0.5rem; }
.browse-applied > .muted { font-size: var(--fs-small); }
.browse-applied .chip-remove { cursor: default; }
.browse-applied .chip-x { color: var(--text-2); }
.browse-applied .chip-x:hover { background: var(--surface-hi); color: var(--text); }
.browse-clear { font-size: var(--fs-small); font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.browse-save-search { margin: 0 0 0 auto; }
.browse-save-search .btn { gap: 0.5rem; }
@media (pointer: coarse) { .browse-clear { min-height: var(--tap); } }

.browse-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 1rem; }
.browse-section-head .section-title { margin: 0; }
.browse-section-head p { margin: 0; font-size: var(--fs-small); }

/* Spotlight row: quiet, same tiles. Neutralises style.css's tinted box. */
.spotlight-strip {
    margin: 0 0 2.5rem; padding: 0 0 2.5rem;
    background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
}
.spotlight-strip-grid { gap: 2rem 1.75rem; }

.shop-by-category { margin: 0 0 2rem; }
.shop-by-category .section-title { font-size: var(--fs-body); }
.category-chips { gap: 0.5rem; }

.browse-grid { margin-bottom: 1rem; }

.load-more {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    margin-top: 3.5rem; text-align: center;
}
.load-more p { margin: 0; font-size: var(--fs-small); }
.load-more .cluster { justify-content: center; }

.following-empty .suggested-sellers { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.following-empty .suggested-sellers li { min-height: 32px; display: flex; align-items: center; gap: 0.5rem; }
.following-empty .suggested-sellers a { font-weight: 600; }
.empty-state .section-title { color: var(--text); }
.empty-state p { margin: 0.5rem 0 0; }
.empty-state p + p { margin-top: 1rem; }

/* =============================================================================
   Live community feed (listing_chat/_browse_feed.html + static/js/browse_feed.js)
   ============================================================================= */
.browse-feed { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.browse-feed-header { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; }
.browse-feed-header .section-title { margin: 0; }
.browse-feed-live {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.125rem 0.5rem; border-radius: 999px;
    background: var(--red-soft); color: var(--danger);
    font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 600;
    text-transform: none; letter-spacing: normal;
}
.browse-feed-dot { width: 8px; height: 8px; border-radius: 4px; background: currentColor; animation: none; }
#browse-feed-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.feed-row {
    max-width: none; margin: 0; overflow: hidden;
    background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
}
.feed-row > a {
    display: flex; align-items: center; gap: 0.75rem;
    min-height: 56px; padding: 0.5rem 0.25rem;
    color: var(--text); text-decoration: none;
}
.feed-row > a:hover { background: var(--surface-hi); color: var(--text); text-decoration: none; }
.feed-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-msg, .feed-parent { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-msg { font-size: var(--fs-small); color: var(--text); }
.feed-parent { font-size: var(--fs-caption); color: var(--text-2); }
.feed-name { color: var(--text); font-weight: 600; }
.feed-parent .feed-name { color: var(--text-2); }
.feed-reply-msg { position: relative; padding-left: 0.75rem; border-left: 2px solid var(--border); }
.feed-reply-msg::before { content: none; }
.feed-thumb {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-md);
    object-fit: cover; filter: brightness(var(--photo-dim));
}
.feed-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-hi); color: var(--text-3); filter: none; }
.feed-item-title { flex: 0 1 14rem; min-width: 0; color: var(--text-2); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A live arrival answers a system event: a plain fade, no glow. */
.feed-row.feed-new { animation: browse-feed-in 0.6s ease-out; }
@keyframes browse-feed-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599.98px) { .feed-item-title { display: none; } }

/* =============================================================================
   Collections
   ============================================================================= */
.breadcrumb { margin: 0 0 1rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: var(--fs-small); color: var(--text-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.25rem; max-width: none; }
.breadcrumb li + li::before {
    content: ""; width: 6px; height: 6px; margin: 0 0.375rem 0 0.125rem;
    border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3); transform: rotate(45deg);
}
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb [aria-current="page"] { color: var(--text); }
@media (pointer: coarse) { .breadcrumb a { min-height: var(--tap); display: inline-flex; align-items: center; } }

.collection-intro { max-width: var(--measure); margin: 0 0 2.5rem; color: var(--text); line-height: 1.6; }
.collection-intro p, .collection-intro li { max-width: none; }
.collection-intro > :first-child { margin-top: 0; }
.collection-intro > :last-child { margin-bottom: 0; }

.collection-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); max-width: var(--measure); }
.collection-list li { max-width: none; border-bottom: 1px solid var(--border); }
.collection-list a {
    display: flex; flex-direction: column; justify-content: center; gap: 0.125rem;
    min-height: 64px; padding: 0.75rem 0.25rem; color: var(--text); text-decoration: none;
}
.collection-list a:hover { background: var(--surface-hi); color: var(--text); text-decoration: none; }
.collection-list a:hover .collection-list-title { text-decoration: underline; text-underline-offset: 3px; }
.collection-list-title { font-size: var(--fs-large); }
.collection-list-sub { color: var(--text-2); font-size: var(--fs-small); }

.page-nav { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-top: 3.5rem; }
.page-nav p { margin: 0; font-size: var(--fs-small); }
.page-nav .cluster { justify-content: center; }

/* =============================================================================
   Seller profile
   ============================================================================= */
.seller-page { max-width: 1200px; }
.seller-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1.25rem; }
.seller-head-text { flex: 1 1 280px; min-width: 0; }
.seller-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; overflow-wrap: anywhere; }
.seller-stats { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; color: var(--text-2); }
.seller-stats li { display: inline-flex; align-items: center; gap: 0.375rem; max-width: none; }
.seller-stats strong { color: var(--text); }
.seller-stats svg { color: var(--text-3); }
.seller-stats .tag { text-decoration: none; }
.seller-actions { flex: 0 0 auto; gap: 0.5rem; }
.seller-actions form { margin: 0; }
.seller-actions .btn { gap: 0.5rem; }
.seller-page .profile-bio { margin: 0 0 1.5rem; max-width: var(--measure); color: var(--text-2); }
.seller-bio-edit { margin: 0 0 1.5rem; }
.seller-section { margin-top: 3rem; }
.seller-section .section-title { margin-bottom: 1.25rem; }

.review-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); max-width: var(--measure); }
.review-list > li { max-width: none; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.review-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.review-rating { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--text); }
.review-rating svg { color: var(--amber-text); }
.review-author { color: var(--text-2); font-weight: 400; }
.review-date { color: var(--text-2); font-size: var(--fs-small); }
.review-body { margin: 0; color: var(--text); white-space: pre-wrap; line-height: 1.6; }

/* =============================================================================
   Anonymous search limit
   ============================================================================= */
.search-limit { max-width: 32rem; margin: 2rem auto; text-align: left; }
.search-limit .page-lede { line-height: 1.5; }
.search-limit-actions { display: flex; flex-direction: column; gap: 0.75rem; margin: 2rem 0 1.5rem; }
.search-limit-note { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
.search-limit-note a { font-weight: 600; }