/* Optional overrides */

/* Login card submit overlay: light veil + 2px blur (backdrop-blur-sm is 4px and too heavy). */
.login-card-overlay {
    background-color: var(--fallback-b1, oklch(var(--b1) / 0.4));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Rooflia brand: DaisyUI 4 OKLCH tokens (see daisyui themes.css format). */
/* Primary replaces former purple oklch(0.480566 0.298168 276.6328) → oklch(0.5691 0.2541 297.74) (logo). */
[data-theme="light"],
[data-theme="cupcake"] {
    --p: 56.91% 0.2541 297.74;
    --pc: 100% 0 0;
    /* #14b8a6 highlight / accent */
    --a: 62.7% 0.1205 183.5;
    --ac: 22% 0.06 183.5;
}

[data-theme="dark"] {
    --p: 71% 0.175 297.74;
    --pc: 17% 0.055 298;
    --a: 72% 0.118 183.5;
    --ac: 16% 0.045 183.5;
}

/* Brand fill: primary → accent (teal). */
.brand-gradient {
    background: linear-gradient(to right, oklch(var(--p) / 1), oklch(var(--a) / 1)) !important;
    color: #fff;
}
.brand-gradient h1,
.brand-gradient p {
    color: #fff;
}

/* Invite sign-in notice: emerald → teal ring (Listing slots pattern). */
.invite-alert-ring {
    background-image: linear-gradient(to right, #34d399, #10b981, #14b8a6);
}
/* Opaque tint mixed into base-100 — alpha fills let the outer gradient ring show through. */
.ring-fill-orange {
    background-color: color-mix(in srgb, #f97316 8%, var(--fallback-b1, oklch(var(--b1))));
}
.ring-fill-invite {
    background-color: color-mix(in srgb, #14b8a6 8%, var(--fallback-b1, oklch(var(--b1))));
}
.ring-fill-error {
    background-color: color-mix(in oklch, oklch(var(--er)) 8%, oklch(var(--b1)));
}
.ring-fill-error-strong {
    background-color: color-mix(in oklch, oklch(var(--er)) 16%, oklch(var(--b1)));
}
/* Remote listings inventory notices: solid border (no padding-as-ring — that clips at corners). */
.notice-ring-info,
.notice-ring-orange,
.notice-ring-success,
.notice-ring-error,
.notice-ring-primary {
    border-radius: 1rem;
    border: 2px solid;
    color: var(--fallback-bc, oklch(var(--bc)));
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.375;
}
.notice-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.35rem 0.9rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: capitalize;
}
.notice-ring-info {
    border-color: var(--fallback-in, oklch(var(--in)));
    background-color: oklch(var(--in) / 0.12);
}
.notice-ring-primary {
    border-color: var(--fallback-p, oklch(var(--p)));
    background-color: oklch(var(--p) / 0.08);
}
.notice-ring-orange {
    border-color: #f97316; /* orange-500 */
    background-color: color-mix(in srgb, #f97316 8%, var(--fallback-b1, oklch(var(--b1))));
}
.notice-ring-success {
    border-color: var(--fallback-su, oklch(var(--su)));
    background-color: oklch(var(--su) / 0.14);
}
.notice-ring-error {
    border-color: var(--fallback-er, oklch(var(--er)));
    background-color: oklch(var(--er) / 0.10);
}
.import-job-done-notice {
    padding: 1.25rem 1.5rem;
    font-size: 1.125rem;
    line-height: 1.375;
}

/* Job report: gallery bar uses brand teal (--a), not DaisyUI secondary magenta. */
.progress.progress-accent::-moz-progress-bar {
    border-radius: var(--rounded-box, 1rem);
    background-color: var(--fallback-a, oklch(var(--a) / 1));
}
.progress.progress-accent::-webkit-progress-value {
    background-color: var(--fallback-a, oklch(var(--a) / 1));
}
.progress.progress-accent:indeterminate {
    --progress-color: var(--fallback-a, oklch(var(--a) / 1));
}
.plan-card-current-ring,
.plan-brand-fill {
    background-color: oklch(var(--p) / 1);
    background-image: linear-gradient(to right, oklch(var(--p) / 1), oklch(var(--a) / 1));
}

.btn.plan-brand-fill,
.btn.plan-brand-fill:hover,
.btn.plan-brand-fill:active,
.btn.plan-brand-fill:disabled,
.btn.plan-brand-fill[disabled] {
    background-color: transparent;
    background-image: linear-gradient(to right, oklch(var(--p)), oklch(var(--a)));
    border-color: transparent;
    color: #fff;
}

.btn.plan-brand-fill:disabled,
.btn.plan-brand-fill[disabled] {
    opacity: 0.85;
    cursor: not-allowed;
}

/* Subscription status: solid dot + soft halo (DaisyUI .stat-value can collapse empty spans). */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1.15;
    vertical-align: middle;
}
.status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: color-mix(in oklab, currentColor 32%, transparent);
}
.status-dot::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: currentColor;
}
.status-dot-lg {
    width: 1.35em;
    height: 1.35em;
}
.status-dot-lg::before {
    width: 0.7em;
    height: 0.7em;
}

/* Headings: self-hosted Outfit (variable, latin + latin-ext). Preloaded in the public and admin headers. */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/outfit-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

/*
 * Public listings browse: grid is rendered by HTMX from api/listings.php.
 * Prefer utilities in PHP content scanned by Tailwind (npm run build:css).
 * These rules remain as a layout safety net for the browse grid.
 */
#listing-results .gregg-listing-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

#listing-results .gregg-listing-grid > article.card {
    height: 100%;
}

/* Icon-leading filter controls: inset from border, tight gap before text */
#search-filters .filter-field-icon {
    left: 0.8125rem; /* ~13px from border */
}
#search-filters .select.filter-field-with-icon,
#search-filters .input.filter-field-with-icon {
    padding-left: 2.125rem; /* icon (16px) + ~5px gap after inset */
}

@media (min-width: 768px) {
    #listing-results .gregg-listing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    #listing-results .gregg-listing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#listing-results .gregg-listing-grid > .gregg-listing-grid-sentinel {
    grid-column: 1 / -1;
}

/*
 * Infinite-scroll append wrapper (single HTMX root). display:contents helps in some engines;
 * greggFlattenListingAppendWrappers() in app.js hoists children — required where contents is buggy.
 */
.gregg-listing-append {
    display: contents;
}

.htmx-indicator {
    display: none;
    pointer-events: none;
}

.htmx-indicator.htmx-request {
    display: inline-block;
}

#search-filters.htmx-request {
    opacity: 0.6;
}

[x-cloak] {
    display: none !important;
}

/* Listings aside accordion: text badge clears DaisyUI collapse-arrow chevron (expanded only) */
#listings-sidebar-accordion .collapse-title .sidebar-text-badge {
    margin-right: 1.5rem;
}

/* Hide count badges on whichever section is currently expanded (DaisyUI radio collapse) */
#listings-sidebar-accordion .collapse:has(> input[name="listings-sidebar-acc"]:checked) .collapse-title .sidebar-text-badge,
#listings-sidebar-accordion .collapse:has(> input[name="listings-sidebar-acc"]:checked) .collapse-title .sidebar-icon-badge {
    display: none !important;
}

/* Favourites-only browse: hide filters; the Search drawer and result count stay visible */
.listings-page-shell[data-browse-mode="favorites"] #search-filters {
    display: none !important;
}

/* Below lg (phones + tablets): expanding the sidebar pushes listings right instead of shrinking cards. */
@media (max-width: 1023px) {
    .listings-page-shell {
        overflow-x: hidden;
        max-width: 100%;
    }
    .listings-page-main {
        min-width: calc(100% - 3.5rem);
        flex-shrink: 0;
    }
}


/*
 * Listings browse: visible height below global header (~4rem).
 * Use dynamic viewport height so mobile browser chrome show/hide does not leave a gap under 100vh.
 */
:root {
    --gregg-listings-vh: 100vh;
}
@supports (height: 100dvh) {
    :root {
        --gregg-listings-vh: 100dvh;
    }
}

/*
 * --gregg-listings-vh-band is set in app.js (px) from visualViewport + sidebar position
 * so height tracks mobile chrome and the scrolling site header (fixed -4rem was wrong once
 * the navbar left the viewport). Until JS runs, fall back to dvh/vh minus ~navbar.
 */
.listings-page-shell {
    min-height: var(--gregg-listings-vh-band, calc(var(--gregg-listings-vh) - 4rem));
}

/*
 * Left sidebar column fills that band; open AI accordion grows to fill leftover height.
 */
.listings-page-sidebar {
    min-height: var(--gregg-listings-vh-band, calc(var(--gregg-listings-vh) - 4rem));
    max-height: var(--gregg-listings-vh-band, calc(var(--gregg-listings-vh) - 4rem));
}

#agents-results-inner {
    max-height: calc(var(--gregg-listings-vh) - 5rem);
}

.listings-sidebar-accordion-wrap {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* AI accordion fills leftover sidebar height so the chat is not capped at h-96.
 * Keep DaisyUI collapse as display:grid (auto 1fr when open); only grow the open panel. */
#listings-sidebar-accordion {
    flex: 1 1 0%;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#listings-sidebar-accordion #accordion-ai-assistant:has(> input[name="listings-sidebar-acc"]:checked) {
    flex: 1 1 0%;
    min-height: 0;
}

#listings-sidebar-accordion #accordion-ai-assistant:has(> input[name="listings-sidebar-acc"]:checked) > .collapse-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Collapsed sidebar (icon rail): hide labels, content, DaisyUI chevron (same icons as expanded) */
[data-sidebar-collapsed="true"] #listings-sidebar-accordion .sidebar-label,
[data-sidebar-collapsed="true"] #listings-sidebar-accordion .sidebar-text-badge,
[data-sidebar-collapsed="true"] #listings-sidebar-accordion .collapse-content {
    display: none !important;
}

/*
 * DaisyUI draws collapse-arrow on .collapse-title::after (not .collapse-arrow::after).
 * Hiding the wrong pseudo left the chevron visible on the narrow rail, merged with the SVGs.
 */
[data-sidebar-collapsed="true"] #listings-sidebar-accordion .collapse-title::after {
    display: none !important;
    content: none !important;
}

[data-sidebar-collapsed="true"] #listings-sidebar-accordion .collapse-title {
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    /* collapse-title normally reserves inline-end space for the chevron */
    padding-inline-end: 0.25rem !important;
    min-height: 0;
}

[data-sidebar-collapsed="true"] #listings-sidebar-accordion .join-item {
    border-left-width: 0;
    border-right-width: 0;
}

/* Public agent profile: collapse long bio before “Show more” (works with whitespace-pre-wrap) */
.agent-profile-bio--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* Admin My Profile — Cropper stage under file inputs */
.my-profile-crop-stage {
    max-height: 18rem;
    background: hsl(var(--b3) / 0.35);
    border-radius: 0.5rem;
    overflow: hidden;
}

.my-profile-crop-stage img.my-profile-crop-img {
    display: block;
    max-width: 100%;
    max-height: 18rem;
}

/* Shared chevron (Tom Select + native listing-edit selects) */
:root {
    --gregg-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/*
 * Location Tom Select (class `location-ts-select` on native <select>):
 * - No Daisy `.select` — avoids a decorative chevron that doesn’t toggle TS.
 * - Strip TS default border on .ts-control; keep one outline on the wrapper.
 * - Background chevron on .ts-control (clicks hit the control and open the list).
 */
.ts-wrapper.location-ts-select {
    border-radius: 0.5rem;
}

.ts-wrapper.location-ts-select .ts-control {
    border: none !important;
    box-shadow: none !important;
    min-height: 2.75rem;
    padding-right: 2.25rem !important;
    background-image: var(--gregg-chevron-down);
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
}

section.listing-edit-page select.select-bordered:not(.location-ts-select) {
    appearance: none;
    background-color: hsl(var(--b1));
    background-image: var(--gregg-chevron-down);
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.5rem;
}

section.listing-edit-page input[type="number"].input-bordered::-webkit-inner-spin-button,
section.listing-edit-page input[type="number"].input-bordered::-webkit-outer-spin-button {
    opacity: 0.55;
    filter: grayscale(1);
}

/*
 * Listing import shell: use 1280px, not rem — root font-size (e.g. DaisyUI) makes 80rem != 1280px
 * and this block's #app selector overrides Tailwind max-w-[1280px].
 */
body.admin-page-listing-import #admin-navbar-bar,
body.admin-page-listing-import main#app,
body.admin-page-listing-import section.listing-import-page {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.admin-page-listing-import main#app {
    width: 100%;
}

body.admin-page-listing-import #admin-navbar-bar {
    width: 100%;
}

body.admin-page-listing-import section.listing-import-page {
    width: 100%;
}

/* DaisyUI .btn:disabled sets ~20% text opacity — keep the coming-soon CTA readable. */
section.listing-import-page .slot-upgrade-btn:disabled,
section.listing-import-page .slot-upgrade-btn[disabled] {
    opacity: 0.85;
    color: #fff;
    --tw-text-opacity: 1;
    background-color: transparent;
    background-image: linear-gradient(to right, #fb923c, #f97316, #ef4444);
    border-color: transparent;
    cursor: not-allowed;
}

/* Step panels: CSS toggle (avoid Alpine x-if/template which keeps markup inert in #document-fragment). */
body.admin-page-listing-import section.listing-import-page .import-step-inventory {
    display: none;
}
body.admin-page-listing-import section.listing-import-page .import-step-csv-columns,
body.admin-page-listing-import section.listing-import-page .import-step-csv-values,
body.admin-page-listing-import section.listing-import-page .import-step-csv-preview {
    display: none;
}
body.admin-page-listing-import section.listing-import-page[data-import-step="inventory"] .import-step-credentials {
    display: none;
}
body.admin-page-listing-import section.listing-import-page[data-import-step="inventory"] .import-step-inventory {
    display: block;
}
body.admin-page-listing-import section.listing-import-page[data-import-step="csv-columns"] .import-step-credentials,
body.admin-page-listing-import section.listing-import-page[data-import-step="csv-values"] .import-step-credentials,
body.admin-page-listing-import section.listing-import-page[data-import-step="csv-preview"] .import-step-credentials {
    display: none;
}
body.admin-page-listing-import section.listing-import-page[data-import-step="csv-columns"] .import-step-csv-columns {
    display: block;
}
body.admin-page-listing-import section.listing-import-page[data-import-step="csv-values"] .import-step-csv-values {
    display: block;
}
body.admin-page-listing-import section.listing-import-page[data-import-step="csv-preview"] .import-step-csv-preview {
    display: block;
}

/* Credentials step: indeterminate “ping‑pong” bar while Continue runs */
.listing-import-credentials-load__track {
    position: relative;
    height: 6px;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--fallback-b2, oklch(var(--b2) / 0.55));
}
.listing-import-credentials-load__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 100%;
    border-radius: 9999px;
    background-color: var(--fallback-p, oklch(var(--p) / 1));
    animation: listing-import-credentials-pingpong 1.35s ease-in-out infinite alternate;
}
@keyframes listing-import-credentials-pingpong {
    from {
        left: 0;
    }
    to {
        left: 62%;
    }
}

#import-stepper {
    scroll-margin-top: 1rem;
}

/* Import inventory: sticky header cells need an opaque bg (Daisy .table does not paint thead). */
section.listing-import-page table.listing-import-inventory thead th.listing-import-inventory__th {
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 600;
    /* Match DaisyUI .bg-base-100 (OKLCH — hsl(var(--b1)) is invalid and was ignored). */
    background-color: var(--fallback-b1, oklch(var(--b1) / 1)) !important;
    box-shadow: 0 1px 0 0 oklch(var(--bc) / 0.12);
}

/* intl-tel-input: stretch to DaisyUI input width */
.iti {
    width: 100%;
    display: block;
}
.iti__flag-container {
    z-index: 2;
}
.iti--allow-dropdown input.js-intl-tel,
.iti input.js-intl-tel {
    width: 100%;
    padding-left: 52px;
}

/* Import coach: spotlight a wizard block or inventory row. */
[data-import-block].import-coach-highlight {
    outline: 2px solid oklch(var(--p));
    outline-offset: 4px;
    border-radius: 0.85rem;
    animation: import-coach-pulse 1.15s ease-out 2;
}
tr[data-listing-id].import-coach-highlight {
    outline: 2px solid oklch(var(--p));
    outline-offset: -2px;
    background-color: oklch(var(--p) / 0.12);
    animation: import-coach-pulse 1.15s ease-out 2;
}
@keyframes import-coach-pulse {
    0% { box-shadow: 0 0 0 0 oklch(var(--p) / 0.45); }
    100% { box-shadow: 0 0 0 12px oklch(var(--p) / 0); }
}

.import-ai-coach {
    position: fixed;
    z-index: 60;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.import-ai-coach__panel {
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100vh - 6rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Filters live in the narrow Search drawer, so the form stays one column with one gap. */
.gregg-drawer-filters #search-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gregg-drawer-filters #search-filters > .grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0;
}

/* The features menu paints over the saved-searches block instead of sliding under it. */
#accordion-saved-searches:has(> input[name="listings-sidebar-acc"]:checked),
#accordion-saved-searches:has(> input[name="listings-sidebar-acc"]:checked) > .collapse-content {
    overflow: visible;
    position: relative;
    z-index: 3;
}

.gregg-drawer-filters {
    position: relative;
    z-index: 2;
}

#dd-features {
    z-index: 3;
}

#dd-features:focus-within,
#dd-features:has([aria-expanded="true"]) {
    z-index: 4;
}

#dd-features ul {
    z-index: 5;
}

.search-active-dot {
    display: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: oklch(var(--p));
    flex: none;
}

.listings-page-shell[data-search-active="1"] .search-active-dot--label {
    display: inline-block;
}

.listings-page-shell[data-search-active="1"][data-sidebar-collapsed="true"] .search-active-dot--label {
    display: none;
}

.listings-page-shell[data-search-active="1"][data-sidebar-collapsed="true"] .search-active-dot--icon {
    display: block;
    position: absolute;
    right: 0.1rem;
    bottom: 0.15rem;
    box-shadow: 0 0 0 2px oklch(var(--b1));
}

.listings-page-shell.is-search-received .search-active-dot {
    animation: gregg-search-land 0.7s ease;
}

.listings-page-shell.is-search-received #accordion-saved-searches > .collapse-title {
    animation: gregg-search-title 0.7s ease;
}

@keyframes gregg-search-land {
    0% { transform: scale(0.3); box-shadow: 0 0 0 0 oklch(var(--p) / 0.55); }
    55% { transform: scale(1.45); box-shadow: 0 0 0 8px oklch(var(--p) / 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 oklch(var(--p) / 0); }
}

@keyframes gregg-search-title {
    0% { background-color: oklch(var(--p) / 0.18); }
    100% { background-color: transparent; }
}

.gregg-field-land {
    animation: gregg-field-land 0.8s ease;
}

@keyframes gregg-field-land {
    0% { box-shadow: 0 0 0 2px oklch(var(--p) / 0.65); }
    100% { box-shadow: 0 0 0 2px oklch(var(--p) / 0); }
}

@media (prefers-reduced-motion: reduce) {
    .listings-page-shell.is-search-received .search-active-dot,
    .listings-page-shell.is-search-received #accordion-saved-searches > .collapse-title,
    .gregg-field-land {
        animation: none;
    }
}

.gregg-home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 50vh;
    margin: 0 0 0.5rem;
    padding: 4.75rem 1rem 2.25rem;
    background-color: #1c2430;
    display: flex;
    align-items: center;
}

.gregg-home-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.gregg-home-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 18, 28, 0.55), rgba(12, 18, 28, 0.28) 46%, rgba(12, 18, 28, 0.55));
}

.gregg-home-hero h1,
.gregg-home-hero h2,
.gregg-home-hero #gregg-home-note {
    color: #fff;
}

.gregg-home-search-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .gregg-home-search-wrap {
        width: min(100%, 52rem);
    }
}

.gregg-home-search.is-busy .btn {
    pointer-events: none;
}

.gregg-home-search .input,
.gregg-home-search .btn {
    height: 4rem;
    min-height: 4rem;
}

#listings-browse-chrome.is-idle {
    position: static;
    z-index: auto;
    background: transparent;
    border-bottom-width: 0;
    box-shadow: none;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#listings-browse-chrome.is-idle .listings-browse-chrome-meta {
    display: none;
}

.gregg-trending {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}

.gregg-trending-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
}

.gregg-trending-track::-webkit-scrollbar {
    display: none;
    height: 0;
}

.gregg-trending-item {
    flex: 0 0 calc(100% - 2.75rem);
    scroll-snap-align: start;
    min-width: 0;
    padding: 1rem 0.5rem 2.75rem;
    box-sizing: border-box;
}

.gregg-trending-item:first-child {
    padding-left: 1.15rem;
}

.gregg-trending-item:last-child {
    padding-right: 1.15rem;
}

@media (min-width: 640px) {
    .gregg-trending-item {
        flex-basis: calc((100% - 1rem) / 2.18);
    }
}

@media (min-width: 1024px) {
    .gregg-trending-item {
        flex-basis: calc((100% - 2rem) / 3.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gregg-trending-track {
        scroll-behavior: auto;
    }
}