/* Unified ecommerce Browse layout: one header search, category/filter sidebar, wide results. */
.zl-unified-search-grid > .zl-place-card { min-width: 0; }
.zl-result-type-total { margin-left: 12px; padding-left: 12px; border-left: 1px solid #e5e7eb; }

.zl-browse-wrap {
    --zl-browse-card-min: 220px;
    box-sizing: border-box;
    /* Fluid like eBay: fills the viewport minus a gutter, capped only on very large monitors.
       Centered with auto margins, so it no longer depends on the parent being centered
       (the old 100vw/50% breakout maths pinned the page left on screens wider than 1648px). */
    width: 100%;
    /* + the 48px of side padding, so the content edge lines up with the header container. */
    max-width: calc(var(--zl-browse-content-max, 1680px) + 48px);
    margin: 0 auto;
    padding: 20px 24px 48px;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
}
/* Boxed-theme fallback: if a theme drops the shortcode into a narrow content column
   (e.g. a 780px reading column), break out of it without transforms (fixed drawers need none). */
.zl-page-content > .zl-browse-wrap {
    max-width: none;
    width: min(calc(100vw - 48px), var(--zl-browse-content-max, 1680px));
    margin: 0 0 0 calc(50% - min(calc(50vw - 24px), calc(var(--zl-browse-content-max, 1680px) / 2)));
    padding-left: 0;
    padding-right: 0;
}
.zl-browse-sidebar {
    grid-column: 1;
    min-width: 0;
    position: sticky;
    top: calc(var(--zl-header-h, 73px) + 16px);
    max-height: calc(100vh - var(--zl-header-h, 73px) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 4px;
}
.admin-bar .zl-browse-sidebar { top: calc(var(--zl-header-h, 73px) + 48px); max-height: calc(100vh - var(--zl-header-h, 73px) - 64px); }
.zl-browse-main { grid-column: 2; min-width: 0; }
.zl-browse-categories { padding: 0 0 18px; margin: 0 0 16px; border-bottom: 1px solid #e5e7eb; }
.zl-browse-categories h2, .zl-filter-heading { margin: 0 0 12px; color: #172033; font-size: 15px; line-height: 1.35; font-weight: 700; }
.zl-browse-category-link { display: block; padding: 6px 10px; border-radius: 7px; color: #344054; text-decoration: none; font-size: 13px; line-height: 1.35; }
.zl-browse-category-link:hover, .zl-browse-category-link.is-active, .zl-browse-category-link.is-context { color: #0759d7; background: #f1f6ff; }
.zl-browse-category-link.is-active, .zl-browse-category-link.is-context { font-weight: 700; }
.zl-filter-bar { display: flex; flex-direction: column; align-items: stretch; gap: 11px; margin: 0; padding: 0 0 12px; border: 0; border-radius: 0; background: transparent; }
.zl-filter-heading { margin-bottom: 2px; }
.zl-filter-label { margin: 2px 0 -5px; font-size: 12px; color: #596273; font-weight: 650; }
.zl-field-filters { display: flex; flex-direction: column; gap: 10px; }
.zl-price-range { width: 100%; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.zl-price-input { min-width: 0; width: 74px; flex: 1 1 0; }
.zl-filter-bar > select, .zl-field-filters select, .zl-field-filters input { max-width: 100%; }
.zl-filter-bar .zl-clear-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.zl-filter-drawer-head, .zl-filter-drawer-foot { display: none; }
.zl-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; margin: 0 0 12px; }
.zl-results-bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; min-width: 0; margin: 0; font-size: 15px; color: #172033; }
.zl-result-query { color: #344054; }
.zl-results-bar.zl-has-js-chips .zl-active-filter { display: none; }
.zl-results-toolbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.zl-desktop-sort-select { max-width: 210px; height: 38px; border: 1px solid #dedede; border-radius: 20px; background: #fff; padding: 0 12px; color: #202938; font: inherit; font-size: 12px; }
.zl-view-toggle { width: 38px; height: 38px; border: 1px solid #dedede; border-radius: 50%; background: #fff; color: #344054; font-size: 20px; cursor: pointer; }
.zl-search-note, .zl-unified-search-grid, .zl-pagination, .zl-empty-state { min-width: 0; }
/* ID selector on purpose: the Aura theme sizes #zl-listings-grid by ID, which beat the old class rule
   and forced 7 cramped 170px columns. eBay shows ~4-5 roomy cards per row at this width. */
.zl-browse-wrap #zl-listings-grid, .zl-unified-search-grid { grid-template-columns: repeat(auto-fill, minmax(var(--zl-browse-card-min), 1fr)); gap: 28px 16px; margin-bottom: 28px; }
.zl-browse-categories .zl-cat-extra { display: none; }
.zl-browse-categories.is-expanded .zl-cat-extra { display: block; }
.zl-browse-categories-toggle { margin: 6px 0 0 10px; padding: 0; border: 0; background: none; color: #0759d7; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.zl-mobile-filter-tools { display: none; }
.zl-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.zl-filter-chip { border: 1px solid #dedaf8; background: #f7f6ff; color: #5145a8; border-radius: 999px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.zl-filter-chip span { margin-left: 5px; font-weight: 700; }
.zl-browse-wrap .zl-filter-input { width: 100%; min-width: 0; }

@media (max-width: 1100px) and (min-width: 901px) {
    .zl-browse-wrap { --zl-browse-card-min: 190px; padding-left: 16px; padding-right: 16px; grid-template-columns: 205px minmax(0, 1fr); column-gap: 20px; }
    .zl-page-content > .zl-browse-wrap { width: min(calc(100vw - 32px), var(--zl-browse-content-max, 1680px)); margin-left: calc(50% - min(calc(50vw - 16px), calc(var(--zl-browse-content-max, 1680px) / 2))); }
    .zl-browse-wrap #zl-listings-grid, .zl-unified-search-grid { gap: 20px 12px; }
}
@media (max-width: 900px) {
    .zl-browse-wrap, .zl-page-content > .zl-browse-wrap { display: block; width: auto; max-width: 100%; margin: 0; padding: 16px 12px 36px; }
    .zl-browse-sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; }
    .zl-browse-main { min-width: 0; }
    .zl-browse-categories .zl-cat-extra { display: block; }
    .zl-browse-categories-toggle { display: none; }
    .zl-browse-categories { display: flex; align-items: center; gap: 8px; overflow-x: auto; white-space: nowrap; padding: 0 0 12px; margin: 0 0 8px; }
    .zl-browse-categories h2 { flex: 0 0 auto; margin: 0 4px 0 0; }
    .zl-browse-category-link { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 999px; }
    .zl-mobile-filter-tools { display: flex; align-items: center; gap: 10px; padding: 8px 0 12px; background: #fff; }
    .zl-mobile-filter-toggle { border: 1px solid #ddd; border-radius: 999px; background: #fff; padding: 9px 14px; font: inherit; font-size: 13px; cursor: pointer; }
    .zl-mobile-sort-label { font-size: 12px; color: #666; margin-left: auto; }
    .zl-mobile-sort-select { max-width: 58%; min-width: 0; height: 38px; border: 1px solid #ddd; border-radius: 999px; padding: 0 10px; background: #fff; }
    /* The drawer must sit ABOVE the fixed bottom nav (z-index 10100) or the nav covers its last
       fields, and its height must follow the visible viewport (dvh), not the URL-bar-inclusive vh,
       or short phones cut the bottom off. A strip of backdrop stays above it as a tap-to-close area. */
    .zl-filter-bar { display: none; position: fixed; z-index: 10200; inset: auto 0 0; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18); margin: 0; padding: 0 16px; background: #fff; }
    .zl-filter-bar.zl-filter-drawer-open { display: flex; }
    .zl-filter-bar .zl-filter-heading { display: none; }
    .zl-filter-drawer-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 14px 16px 10px; background: #fff; border-bottom: 1px solid #eef0f3; border-radius: 18px 18px 0 0; }
    .zl-filter-drawer-title { font-size: 17px; font-weight: 700; color: #172033; }
    .zl-filter-close { width: 44px; height: 44px; margin: -6px -8px -6px 0; border: 0; border-radius: 50%; background: #f1f3f6; color: #172033; font-size: 26px; line-height: 1; cursor: pointer; }
    .zl-filter-drawer-foot { display: block; position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #eef0f3; }
    .zl-filter-apply { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: #0b7a2b; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
    body.zl-filter-lock { overflow: hidden; }
    .zl-results-toolbar { margin: 8px 0 14px; align-items: flex-start; }
    .zl-results-toolbar-actions { display: none; }
    .zl-browse-wrap #zl-listings-grid, .zl-unified-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    .zl-browse-filter-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 10150; }
}
@media (max-width: 360px) { .zl-browse-wrap #zl-listings-grid, .zl-unified-search-grid { gap: 16px 8px; } .zl-browse-wrap { padding-left: 8px; padding-right: 8px; } }