/* input(2055,1): run-time error CSS1019: Unexpected token, found '}' */
/* ============================================================================
   wwwroot/css/marketplace-directory.css   (v4 — the app-grade directory)
   ----------------------------------------------------------------------------
   Owns the /marketplace/category/{slug} page (Views/Marketplace/Category.cshtml
   v4) and is reused by the share-landing page (Views/Marketplace/Provider.cshtml).
   Loads AFTER marketplace-landing.css which supplies the .mp-page tokens +
   breadcrumb. The category accent arrives as --mp-accent / --mp-accent-rgb,
   set inline by the view from the taxonomy row.

   Sections
     1. Page shell + hero strip
     2. Filter bar (search / where / places dropdown / hyper chip)
     3. Subcategory chips
     4. Card grid — Instagram-style provider cards + skeletons
     5. Pagination
     6. Provider modal (desktop dialog / ≤720px bottom-sheet)
     7. Toast
     8. Native-app mobile pass
   ============================================================================ */


/* ════════════════════════════════════════════════════════════════════════
   1. PAGE SHELL + HERO
   ════════════════════════════════════════════════════════════════════════ */

/* The directory is its OWN scroll container (v5 root-cause fix).
   -----------------------------------------------------------------
   v4 set height:auto + overflow:visible here — but the page's parent,
   the site-wide .main-content, is overflow:hidden (the 100vh single-
   viewport philosophy). Anything taller than the viewport was CLIPPED
   with no scrollbar and no way to reach it. Scoping the scroll to the
   page itself keeps .main-content untouched (no shared-component
   regression) and guarantees a scrollbar whenever content overflows,
   while the v5 compact pass below keeps the default composition
   inside one viewport at 100% zoom. */
.mp-page.mp-category-page {
    height: var(--mp-page-h);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 14, 17, 0.25) transparent;
    background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(var(--mp-accent-rgb), 0.08) 0%, transparent 55%), radial-gradient(ellipse 60% 46% at 0% 100%, rgba(245, 130, 32, 0.05) 0%, transparent 55%), var(--mp-mist);
    padding-bottom: 56px;
}

.mp-dir-shell {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding: 0 clamp(20px, 3.6vw, 56px);
    display: flex;
    flex-direction: column;
}

.mp-page.mp-category-page .mp-breadcrumb {
    padding-inline: 0;
}

/* ── Hero strip ── */
.mp-dir-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    margin-top: 12px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)), linear-gradient(135deg, rgba(var(--mp-accent-rgb), 0.16), transparent 60%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 44px -22px rgba(14, 14, 17, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.mp-dir-hero-glyph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 65%, #0E0E11));
    box-shadow: 0 12px 26px -10px rgba(var(--mp-accent-rgb), 0.65);
}

    .mp-dir-hero-glyph svg {
        width: 30px;
        height: 30px;
    }

.mp-dir-hero-text {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mp-dir-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-dir-hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mp-accent);
    box-shadow: 0 0 0 3px rgba(var(--mp-accent-rgb), 0.18);
}

.mp-dir-hero-title {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mp-ink);
    line-height: 1.12;
}

.mp-dir-hero-tag {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mp-muted);
    max-width: 62ch;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mp-dir-hero-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}

.mp-dir-hero-stat {
    display: grid;
    justify-items: center;
    gap: 0;
    padding-right: 18px;
    border-right: 1px solid var(--mp-line-2);
}

.mp-dir-hero-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mp-ink);
    line-height: 1.1;
}

.mp-dir-hero-stat-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-dir-hero-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 100px;
    background: var(--mp-grad-ink);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 14px 28px -14px rgba(14, 14, 17, 0.55);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

    .mp-dir-hero-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 34px -14px rgba(14, 14, 17, 0.6);
    }

    .mp-dir-hero-register svg {
        width: 15px;
        height: 15px;
        color: var(--mp-sunset);
    }


/* ════════════════════════════════════════════════════════════════════════
   2. FILTER BAR
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-filter {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.mp-dir-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 20px -12px rgba(14, 14, 17, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

    .mp-dir-field:focus-within {
        border-color: rgba(var(--mp-accent-rgb), 0.55);
        box-shadow: 0 0 0 4px rgba(var(--mp-accent-rgb), 0.14), 0 10px 22px -12px rgba(14, 14, 17, 0.16);
    }

.mp-dir-field-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--mp-muted);
}

    .mp-dir-field-icon svg {
        width: 100%;
        height: 100%;
    }

.mp-dir-field-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--mp-font);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--mp-ink);
    padding: 14px 0;
}

    .mp-dir-field-input::placeholder {
        color: var(--mp-muted-2);
        font-weight: 500;
    }

    /* kill the native clear ✕ so the pill stays clean */
    .mp-dir-field-input::-webkit-search-decoration,
    .mp-dir-field-input::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

.mp-dir-filter-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    min-height: 52px;
    border: none;
    border-radius: 16px;
    background: var(--mp-grad-sunset);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 26px -12px rgba(245, 130, 32, 0.65);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

    .mp-dir-filter-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px -12px rgba(245, 130, 32, 0.7);
    }

/* ── Places dropdown (under the WHERE field) ── */
.mp-dir-places {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 15px;
    box-shadow: 0 24px 48px -18px rgba(14, 14, 17, 0.26);
    padding: 6px;
    z-index: 55;
    max-height: 280px;
    overflow-y: auto;
}

.mp-dir-place-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    font-family: var(--mp-font);
    text-align: left;
    cursor: pointer;
    transition: background 0.14s ease;
}

    .mp-dir-place-row:hover,
    .mp-dir-place-row.is-active {
        background: rgba(var(--mp-accent-rgb), 0.1);
    }

.mp-dir-place-pin {
    flex: 0 0 auto;
    display: inline-flex;
    width: 15px;
    height: 15px;
    color: var(--mp-accent);
}

    .mp-dir-place-pin svg {
        width: 100%;
        height: 100%;
    }

.mp-dir-place-main {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--mp-ink);
}

.mp-dir-place-sec {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--mp-muted);
}

/* ── Hyper-localisation chip ── */
.mp-dir-hyper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1.5px dashed rgba(var(--mp-accent-rgb), 0.5);
    background: rgba(var(--mp-accent-rgb), 0.06);
    font-family: var(--mp-font);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mp-ink-2);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .mp-dir-hyper[aria-pressed="true"] {
        border-style: solid;
        border-color: var(--mp-accent);
        background: linear-gradient(135deg, rgba(var(--mp-accent-rgb), 0.16), rgba(var(--mp-accent-rgb), 0.08));
        box-shadow: 0 8px 20px -10px rgba(var(--mp-accent-rgb), 0.5);
    }

.mp-dir-hyper-ring {
    display: inline-flex;
    width: 17px;
    height: 17px;
    color: var(--mp-accent);
}

    .mp-dir-hyper-ring svg {
        width: 100%;
        height: 100%;
    }

.mp-dir-hyper[aria-pressed="true"] .mp-dir-hyper-ring svg {
    animation: mp-hyper-pulse 2s ease-in-out infinite;
}

@keyframes mp-hyper-pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

.mp-dir-hyper-text strong {
    font-weight: 800;
    color: var(--mp-ink);
}


/* ════════════════════════════════════════════════════════════════════════
   3. SUBCATEGORY CHIPS
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-chips {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
}

    .mp-dir-chips::-webkit-scrollbar {
        display: none;
    }

.mp-dir-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.85);
    font-family: var(--mp-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mp-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .mp-dir-chip:hover {
        transform: translateY(-1px);
        border-color: rgba(var(--mp-accent-rgb), 0.4);
    }

    .mp-dir-chip.is-active {
        background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 72%, #0E0E11));
        border-color: transparent;
        color: #fff;
        box-shadow: 0 10px 22px -10px rgba(var(--mp-accent-rgb), 0.65);
    }

.mp-dir-chip-star {
    font-size: 0.72rem;
    color: var(--mp-sunset);
}

.mp-dir-chip.is-active .mp-dir-chip-star {
    color: #FFD9AE;
}


/* ════════════════════════════════════════════════════════════════════════
   4. CARD GRID — Instagram-style provider cards
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-results {
    margin-top: 8px;
}

.mp-dir-results-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 2px 12px;
}

.mp-dir-results-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--mp-ink);
    letter-spacing: -0.01em;
}

.mp-dir-results-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mp-muted);
}

.mp-dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* ── The card ── */
.mp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px -20px rgba(14, 14, 17, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

    .mp-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 52px -22px rgba(14, 14, 17, 0.3);
    }

    .mp-card:active {
        transform: translateY(-1px) scale(0.995);
    }

/* Cover — 16:10, gradient placeholder when there's no image */
.mp-card-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    background: radial-gradient(ellipse 90% 80% at 20% 0%, rgba(var(--mp-accent-rgb), 0.28), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--mp-accent) 26%, #1A1A1F), #0E0E11);
    overflow: hidden;
}

    .mp-card-cover img,
    .mp-card-cover video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Placeholder monogram floating in the gradient */
.mp-card-cover-mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.28);
    text-transform: uppercase;
    user-select: none;
}

/* Badges over the cover */
.mp-card-flags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.mp-card-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(14, 14, 17, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

    .mp-card-flag.is-verified {
        background: rgba(63, 169, 217, 0.85);
    }

    .mp-card-flag.is-featured {
        background: rgba(245, 130, 32, 0.9);
    }

    .mp-card-flag svg {
        width: 10px;
        height: 10px;
    }

/* Heart on the cover */
.mp-card-heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--mp-ink-2);
    cursor: pointer;
    box-shadow: 0 8px 18px -8px rgba(14, 14, 17, 0.4);
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.4), color 0.16s ease, background 0.16s ease;
}

    .mp-card-heart svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        transition: fill 0.16s ease;
    }

    .mp-card-heart:hover {
        transform: scale(1.08);
    }

    .mp-card-heart[aria-pressed="true"] {
        color: #E0245E;
        background: #FFF0F4;
    }

        .mp-card-heart[aria-pressed="true"] svg {
            fill: #E0245E;
            stroke: #E0245E;
        }

    .mp-card-heart.is-pop {
        animation: mp-heart-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.6);
    }

@keyframes mp-heart-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.32);
    }

    100% {
        transform: scale(1);
    }
}

/* Body — avatar overlapping the cover, identity, rating, tagline */
.mp-card-body {
    position: relative;
    padding: 0 18px 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.mp-card-avatar {
    position: relative;
    margin-top: -26px;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 65%, #0E0E11));
    border: 3px solid #fff;
    box-shadow: 0 10px 22px -10px rgba(14, 14, 17, 0.4);
    overflow: hidden;
    z-index: 2;
}

    .mp-card-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mp-card-name {
    margin: 9px 0 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--mp-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-card-subline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.mp-card-sub-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mp-accent) 78%, #0E0E11);
    background: rgba(var(--mp-accent-rgb), 0.13);
}

.mp-card-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mp-muted);
}

    .mp-card-loc svg {
        width: 12px;
        height: 12px;
    }

.mp-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.mp-stars {
    display: inline-flex;
    gap: 1px;
}

    .mp-stars svg {
        width: 14px;
        height: 14px;
        fill: #E4E7EC;
        stroke: none;
    }

        .mp-stars svg.is-on {
            fill: #F5A623;
        }

        .mp-stars svg.is-half {
            fill: url(#mp-star-half);
        }

.mp-card-rating-num {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--mp-ink);
}

.mp-card-rating-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mp-muted);
}

.mp-card-tag {
    margin: 9px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--mp-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
}

.mp-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--mp-line);
}

.mp-card-cta {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--mp-grad-ink);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

    .mp-card-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 24px -12px rgba(14, 14, 17, 0.55);
    }

    .mp-card-cta svg {
        width: 14px;
        height: 14px;
        color: var(--mp-sunset);
    }

.mp-card-share {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: var(--mp-cloud);
    color: var(--mp-ink-2);
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
}

    .mp-card-share:hover {
        transform: translateY(-1px);
        background: #fff;
    }

    .mp-card-share svg {
        width: 16px;
        height: 16px;
    }

/* Engagement micro-stats on the foot */
.mp-card-hearts {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mp-muted);
}

    .mp-card-hearts svg {
        width: 12px;
        height: 12px;
        fill: #E0245E;
    }

/* ── Skeletons ── */
.mp-card-skel {
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    min-height: 330px;
    display: flex;
    flex-direction: column;
}

.mp-skel-cover {
    aspect-ratio: 16 / 10;
}

.mp-skel-line {
    border-radius: 8px;
    margin: 10px 18px 0;
    height: 14px;
}

    .mp-skel-line.is-w60 {
        width: 60%;
    }

    .mp-skel-line.is-w40 {
        width: 40%;
        margin-bottom: 20px;
    }

.mp-skel-cover, .mp-skel-line {
    background: linear-gradient(100deg, #EEF1F5 30%, #F8FAFC 50%, #EEF1F5 70%);
    background-size: 220% 100%;
    animation: mp-skel-wave 1.3s ease-in-out infinite;
}

@keyframes mp-skel-wave {
    from {
        background-position: 130% 0;
    }

    to {
        background-position: -70% 0;
    }
}

/* ── Empty state ── */
.mp-dir-empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: 28px;
    padding: 30px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px dashed rgba(var(--mp-accent-rgb), 0.4);
}

.mp-dir-empty-copy h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mp-ink);
}

.mp-dir-empty-copy p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--mp-muted);
    line-height: 1.55;
}


/* ════════════════════════════════════════════════════════════════════════
   5. PAGINATION
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.mp-dir-pager-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--mp-ink-2);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

    .mp-dir-pager-btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -12px rgba(14, 14, 17, 0.3);
    }

    .mp-dir-pager-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .mp-dir-pager-btn svg {
        width: 17px;
        height: 17px;
    }

.mp-dir-pager-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mp-dir-pager-page {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    font-family: var(--mp-font);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mp-muted);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

    .mp-dir-pager-page:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--mp-ink);
    }

    .mp-dir-pager-page.is-current {
        background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 72%, #0E0E11));
        color: #fff;
        box-shadow: 0 10px 20px -10px rgba(var(--mp-accent-rgb), 0.6);
    }

.mp-dir-pager-gap {
    color: var(--mp-muted-2);
    font-weight: 700;
    padding: 0 2px;
}


/* ════════════════════════════════════════════════════════════════════════
   6. PROVIDER MODAL
   ════════════════════════════════════════════════════════════════════════ */

.mp-pv-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(10, 10, 14, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: mp-ov-in 0.22s ease;
}

@keyframes mp-ov-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mp-pv-sheet {
    position: relative;
    width: min(680px, 100%);
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: mp-sheet-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes mp-sheet-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mp-pv-grab {
    display: none;
}

.mp-pv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(14, 14, 17, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.14s ease, transform 0.14s ease;
}

    .mp-pv-close:hover {
        background: rgba(14, 14, 17, 0.72);
        transform: rotate(90deg);
    }

    .mp-pv-close svg {
        width: 17px;
        height: 17px;
    }

.mp-pv-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 1 auto;
}

/* ── Media gallery ── */
.mp-pv-media {
    position: relative;
}

.mp-pv-media-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: radial-gradient(ellipse 90% 80% at 20% 0%, rgba(var(--mp-accent-rgb), 0.3), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--mp-accent) 28%, #1A1A1F), #0E0E11);
    overflow: hidden;
}

    .mp-pv-media-stage img,
    .mp-pv-media-stage video,
    .mp-pv-media-stage iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
    }

    .mp-pv-media-stage .mp-pv-mono {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 3.4rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.26);
        text-transform: uppercase;
    }

.mp-pv-media-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 16px 0;
}

    .mp-pv-media-thumbs:empty {
        display: none;
    }

.mp-pv-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 46px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--mp-cloud);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.14s ease, transform 0.14s ease;
}

    .mp-pv-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mp-pv-thumb.is-active {
        border-color: var(--mp-accent);
    }

    .mp-pv-thumb:hover {
        transform: translateY(-1px);
    }

.mp-pv-thumb-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--mp-ink-2);
    background: linear-gradient(140deg, #EDF0F4, #E2E7ED);
}

    .mp-pv-thumb-glyph svg {
        width: 18px;
        height: 18px;
    }

/* ── Identity ── */
.mp-pv-identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 22px 0;
}

.mp-pv-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 65%, #0E0E11));
    overflow: hidden;
    box-shadow: 0 12px 24px -10px rgba(var(--mp-accent-rgb), 0.55);
}

    .mp-pv-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mp-pv-identity-text {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 5px;
}

.mp-pv-name {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--mp-ink);
    letter-spacing: -0.015em;
    line-height: 1.18;
}

.mp-pv-subline {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.mp-pv-sub-pill {
    display: inline-flex;
    padding: 3px 11px;
    border-radius: 100px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mp-accent) 78%, #0E0E11);
    background: rgba(var(--mp-accent-rgb), 0.13);
}

.mp-pv-loc {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mp-muted);
}

.mp-pv-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mp-ink);
}

.mp-pv-heart {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    gap: 0;
    width: 48px;
    min-height: 48px;
    padding: 6px 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    background: #fff;
    color: var(--mp-ink-2);
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.4), color 0.16s ease, background 0.16s ease;
}

    .mp-pv-heart svg {
        width: 20px;
        height: 20px;
    }

    .mp-pv-heart[aria-pressed="true"] {
        color: #E0245E;
        background: #FFF0F4;
        border-color: rgba(224, 36, 94, 0.3);
    }

        .mp-pv-heart[aria-pressed="true"] svg path {
            fill: #E0245E;
            stroke: #E0245E;
        }

    .mp-pv-heart.is-pop {
        animation: mp-heart-pop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.6);
    }

.mp-pv-heart-count {
    font-size: 0.66rem;
    font-weight: 800;
}

/* ── Badges / about / facts / actions ── */
.mp-pv-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 22px 0;
}

    .mp-pv-badges:empty {
        display: none;
    }

.mp-pv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--mp-cloud);
    color: var(--mp-ink-2);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

    .mp-pv-badge svg {
        width: 12px;
        height: 12px;
    }

    .mp-pv-badge.is-verified {
        background: #E7F5FC;
        color: #1D7FAB;
        border-color: #C6E8F7;
    }

    .mp-pv-badge.is-licence {
        background: #FFF4E8;
        color: #B25B10;
        border-color: #FBE0C4;
    }

.mp-pv-about {
    margin: 0;
    padding: 14px 22px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--mp-ink-2);
    white-space: pre-line;
}

.mp-pv-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
    padding: 14px 22px 0;
}

    .mp-pv-facts:empty {
        display: none;
    }

.mp-pv-fact {
    display: grid;
    gap: 1px;
    padding: 10px 13px;
    border-radius: 13px;
    background: var(--mp-cloud);
}

.mp-pv-fact-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-pv-fact-value {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--mp-ink);
    overflow-wrap: anywhere;
}

.mp-pv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding: 16px 22px 0;
}

    .mp-pv-actions:empty {
        display: none;
    }

.mp-pv-action {
    flex: 1 1 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: none;
    border-radius: 14px;
    font-family: var(--mp-font);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

    .mp-pv-action:hover {
        transform: translateY(-1px);
    }

    .mp-pv-action svg {
        width: 16px;
        height: 16px;
    }

    .mp-pv-action.is-call {
        background: var(--mp-grad-ink);
        color: #fff;
    }

    .mp-pv-action.is-wa {
        background: #E7F8EE;
        color: #128C4B;
    }

    .mp-pv-action.is-web {
        background: var(--mp-cloud);
        color: var(--mp-ink);
        border: 1px solid rgba(0, 0, 0, 0.07);
    }

/* ── Sections (reviews / share / contact) ── */
.mp-pv-section {
    margin: 20px 22px 0;
    padding-top: 18px;
    border-top: 1px solid var(--mp-line);
}

    .mp-pv-section:last-child {
        padding-bottom: 24px;
    }

.mp-pv-section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

    .mp-pv-section-head h4 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--mp-ink);
    }

.mp-pv-section-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mp-muted);
}

/* Review write */
.mp-pv-review-write {
    display: grid;
    gap: 9px;
    padding: 13px 14px;
    border-radius: 16px;
    background: var(--mp-cloud);
}

.mp-pv-stars-input {
    display: flex;
    gap: 4px;
}

.mp-pv-star {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #C9CFD8;
    cursor: pointer;
    transition: transform 0.12s ease, color 0.12s ease;
}

    .mp-pv-star svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
        stroke: none;
    }

    .mp-pv-star:hover {
        transform: scale(1.12);
    }

    .mp-pv-star.is-on {
        color: #F5A623;
    }

.mp-pv-review-text {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: var(--mp-font);
    font-size: 0.86rem;
    color: var(--mp-ink);
    background: #fff;
    resize: vertical;
    min-height: 44px;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

    .mp-pv-review-text:focus {
        border-color: rgba(var(--mp-accent-rgb), 0.55);
        box-shadow: 0 0 0 3px rgba(var(--mp-accent-rgb), 0.13);
    }

.mp-pv-review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mp-pv-review-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mp-muted);
}

    .mp-pv-review-hint.is-error {
        color: #C0392B;
    }

.mp-pv-review-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: none;
    border-radius: 100px;
    background: var(--mp-grad-sunset);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, opacity 0.14s ease;
}

    .mp-pv-review-submit:hover {
        transform: translateY(-1px);
    }

    .mp-pv-review-submit:disabled {
        opacity: 0.55;
        cursor: default;
        transform: none;
    }

.mp-pv-review-signin {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mp-muted);
}

/* Review list */
.mp-pv-review-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.mp-pv-review {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid var(--mp-line);
    background: #fff;
}

    .mp-pv-review.is-mine {
        border-color: rgba(var(--mp-accent-rgb), 0.4);
        background: rgba(var(--mp-accent-rgb), 0.045);
    }

.mp-pv-review-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mp-pv-review-who {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--mp-ink);
}

.mp-pv-review-when {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mp-muted-2);
}

.mp-pv-review-body {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--mp-ink-2);
    white-space: pre-line;
}

.mp-pv-review-empty {
    padding: 6px 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mp-muted);
}

/* Share row */
.mp-pv-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-pv-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 13px;
    background: #fff;
    font-family: var(--mp-font);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mp-ink-2);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

    .mp-pv-share-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px -12px rgba(14, 14, 17, 0.3);
    }

    .mp-pv-share-btn svg {
        width: 16px;
        height: 16px;
    }

    .mp-pv-share-btn.is-whatsapp {
        color: #128C4B;
    }

    .mp-pv-share-btn.is-facebook {
        color: #1877F2;
    }

    .mp-pv-share-btn.is-x {
        color: #0E0E11;
    }

    .mp-pv-share-btn.is-native {
        background: var(--mp-grad-ink);
        color: #fff;
        border-color: transparent;
    }

/* Contact form */
.mp-pv-contact {
    display: grid;
    gap: 11px;
}

.mp-pv-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mp-pv-contact-field {
    display: grid;
    gap: 5px;
}

    .mp-pv-contact-field.is-full {
        grid-column: 1 / -1;
    }

    .mp-pv-contact-field > span {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mp-muted);
    }

    .mp-pv-contact-field input,
    .mp-pv-contact-field textarea {
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.09);
        border-radius: 12px;
        padding: 11px 13px;
        font-family: var(--mp-font);
        font-size: 0.88rem;
        color: var(--mp-ink);
        background: #fff;
        outline: none;
        resize: vertical;
        transition: border-color 0.14s ease, box-shadow 0.14s ease;
    }

        .mp-pv-contact-field input:focus,
        .mp-pv-contact-field textarea:focus {
            border-color: rgba(var(--mp-accent-rgb), 0.55);
            box-shadow: 0 0 0 3px rgba(var(--mp-accent-rgb), 0.13);
        }

.mp-pv-contact-error {
    padding: 9px 13px;
    border-radius: 11px;
    background: #FDECEA;
    border: 1px solid #F6C4BE;
    color: #B03A2E;
    font-size: 0.8rem;
    font-weight: 600;
}

.mp-pv-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    border: none;
    border-radius: 14px;
    background: var(--mp-grad-sunset);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 28px -12px rgba(245, 130, 32, 0.6);
    transition: transform 0.14s ease, opacity 0.14s ease;
}

    .mp-pv-contact-submit:hover {
        transform: translateY(-1px);
    }

    .mp-pv-contact-submit:disabled {
        opacity: 0.6;
        cursor: default;
        transform: none;
    }

    .mp-pv-contact-submit svg {
        width: 16px;
        height: 16px;
    }

.mp-pv-contact-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #E9F9F0;
    border: 1px solid #BFECD3;
    color: #157A44;
    font-size: 0.88rem;
    font-weight: 700;
}

    .mp-pv-contact-done svg {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
    }


/* ════════════════════════════════════════════════════════════════════════
   7. TOAST
   ════════════════════════════════════════════════════════════════════════ */

.mp-toast {
    position: fixed;
    left: 50%;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1400;
    padding: 12px 20px;
    border-radius: 100px;
    background: rgba(14, 14, 17, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5);
    animation: mp-toast-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    pointer-events: none;
    max-width: min(92vw, 420px);
    text-align: center;
}

@keyframes mp-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


/* ════════════════════════════════════════════════════════════════════════
   8. NATIVE-APP MOBILE PASS  (≤720px)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    .mp-page.mp-category-page {
        padding-bottom: 30px;
    }

    .mp-dir-shell {
        padding-inline: 16px;
    }

    /* Hero condenses to an app title bar */
    .mp-dir-hero {
        flex-wrap: wrap;
        gap: 13px;
        padding: 16px;
        border-radius: 20px;
    }

    .mp-dir-hero-glyph {
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }

        .mp-dir-hero-glyph svg {
            width: 24px;
            height: 24px;
        }

    .mp-dir-hero-title {
        font-size: 1.2rem;
    }

    .mp-dir-hero-tag {
        font-size: 0.78rem;
        -webkit-line-clamp: 2;
    }

    .mp-dir-hero-actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .mp-dir-hero-stat {
        padding-right: 14px;
    }

    .mp-dir-hero-register {
        min-height: 46px;
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    /* Filter stacks; fields stay thumb-height; iOS zoom guard */
    .mp-dir-filter {
        gap: 8px;
    }

    .mp-dir-field {
        flex: 1 1 100%;
        min-height: 50px;
    }

    .mp-dir-field-input {
        font-size: 16px;
    }

    .mp-dir-filter-submit {
        flex: 1 1 auto;
        min-height: 50px;
        justify-content: center;
    }

    .mp-dir-hyper {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 50px;
    }

    /* Chips: one horizontal rail with edge fade */
    .mp-dir-chips {
        margin-inline: -16px;
        padding-inline: 16px;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    }

    .mp-dir-chip {
        min-height: 40px;
    }

    /* Single-column feed = the Instagram scroll */
    .mp-dir-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mp-card {
        border-radius: 20px;
    }

    .mp-card-cta {
        min-height: 46px;
    }

    .mp-card-share, .mp-card-heart {
        width: 42px;
        height: 42px;
    }

    .mp-dir-empty {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    /* ── Modal → bottom sheet ── */
    .mp-pv-overlay {
        padding: 0;
        place-items: end center;
    }

    .mp-pv-sheet {
        width: 100%;
        max-height: 94dvh;
        border-radius: 26px 26px 0 0;
        animation: mp-sheet-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @keyframes mp-sheet-up {
        from {
            transform: translateY(60%);
        }

        to {
            transform: translateY(0);
        }
    }

    .mp-pv-grab {
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 5px;
        border-radius: 100px;
        background: rgba(14, 14, 17, 0.18);
        z-index: 6;
    }

    .mp-pv-media-stage {
        aspect-ratio: 16 / 10;
    }

    .mp-pv-identity {
        padding-inline: 16px;
    }

    .mp-pv-badges, .mp-pv-about, .mp-pv-facts, .mp-pv-actions {
        padding-inline: 16px;
    }

    .mp-pv-section {
        margin-inline: 16px;
    }

    .mp-pv-contact-grid {
        grid-template-columns: 1fr;
    }

    .mp-pv-contact-field input,
    .mp-pv-contact-field textarea,
    .mp-pv-review-text {
        font-size: 16px;
    }

    .mp-pv-share-btn {
        flex: 1 1 calc(33% - 8px);
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .mp-dir-shell {
        padding-inline: 12px;
    }

    .mp-pv-share-btn {
        flex-basis: calc(50% - 8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-card, .mp-pv-sheet, .mp-pv-overlay, .mp-toast,
    .mp-skel-cover, .mp-skel-line,
    .mp-card-heart, .mp-pv-heart, .mp-dir-hyper-ring svg {
        animation: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   9. LAYERING FIX — WHERE places dropdown vs chips / results   (2026-07)
   ----------------------------------------------------------------------------
   ROOT CAUSE: every .mp-reveal section keeps `transform: translateY(0)` after
   its entrance animation (fill-mode: forwards), which makes EACH section its
   own stacking context at z-index:auto. Stacking contexts at auto paint in
   DOM order — so the chips row (delay 3) and results (delay 4) painted OVER
   the places panel living inside the filter form (delay 2), which also made
   the suggestion rows unclickable (hits landed on the layers above).

   FIX: promote the filter form's stacking context above its later siblings.
   Scoped to the form only — the landing page's .mp-reveal timing is untouched.
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-filter {
    position: relative;
    z-index: 120;
}

/* Solidify + elevate the panel inside its (now-winning) context, and make
   sure rows always receive the pointer. */
.mp-dir-places {
    z-index: 130;
    background: rgba(255, 255, 255, 0.98);
}

.mp-dir-place-row {
    pointer-events: auto;
}


/* ════════════════════════════════════════════════════════════════════════
   10. BUSINESS CARD (.mp-biz) — liquid-glass listing card        (2026-07)
   ----------------------------------------------------------------------------
   Views/Marketplace/_BusinessCard.cshtml renders .mp-biz markup, but its
   styles previously lived only in marketplace-category.css (v1) — which this
   v4 page no longer loads. The empty-state sample card therefore rendered as
   raw stacked SVGs. The card is now owned HERE, matched to the v4 tokens.

   Anatomy: frosted ring → hero inset (16:10) with recommended flag →
   avatar overlapping the hero/body boundary + name + specialisation pill →
   tagline + clamped description + trust badges → foot (location · CTA).
   Sized compactly so the empty-state (hero + filters + chips + sample)
   fits within a single desktop viewport.
   ════════════════════════════════════════════════════════════════════════ */

.mp-biz {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)), linear-gradient(160deg, rgba(var(--mp-accent-rgb), 0.10), transparent 55%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 44px -22px rgba(14, 14, 17, 0.28), 0 4px 14px -8px rgba(var(--mp-accent-rgb), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .mp-biz:hover {
        transform: translateY(-3px);
        box-shadow: 0 28px 54px -22px rgba(14, 14, 17, 0.34), 0 6px 18px -8px rgba(var(--mp-accent-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

/* ── Sample ribbon — diagonal chip, top-left ── */
.mp-biz-ribbon {
    position: absolute;
    top: 14px;
    left: -34px;
    z-index: 4;
    transform: rotate(-38deg);
    padding: 5px 38px;
    background: var(--mp-grad-sunset);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 6px 14px -6px rgba(245, 130, 32, 0.7);
    pointer-events: none;
}

/* ── Hero — rounded inset, 16:10 ── */
.mp-biz-hero {
    position: relative;
    margin: 10px 10px 0;
    border-radius: 15px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 80% at 30% 0%, rgba(var(--mp-accent-rgb), 0.35), transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--mp-accent) 55%, #0E0E11), var(--mp-ink));
}

.mp-biz-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mp-biz[data-image-fit="contain"] .mp-biz-hero-img {
    object-fit: contain;
    padding: 14px;
}

.mp-biz-hero-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.mp-biz-hero-monogram {
    font-family: var(--mp-font);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Recommended flag — frosted chip, hero top-right */
.mp-biz-hero-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-family: var(--mp-font);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mp-ink);
    box-shadow: 0 8px 18px -8px rgba(14, 14, 17, 0.4);
}

    .mp-biz-hero-flag svg {
        width: 12px;
        height: 12px;
        color: var(--mp-sunset);
        fill: var(--mp-sunset);
    }

/* ── Identity — avatar overlaps the hero/body boundary ── */
.mp-biz-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    margin-top: -22px;
    position: relative;
    z-index: 2;
}

.mp-biz-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 60%, #0E0E11));
    border: 3px solid rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 22px -10px rgba(14, 14, 17, 0.4);
}

    .mp-biz-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.mp-biz-avatar-initials {
    font-family: var(--mp-font);
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.mp-biz-identity-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 20px;
}

.mp-biz-name {
    margin: 0;
    font-family: var(--mp-font);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mp-ink);
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-biz-sub-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(var(--mp-accent-rgb), 0.12);
    border: 1px solid rgba(var(--mp-accent-rgb), 0.22);
    font-family: var(--mp-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--mp-accent) 68%, #0E0E11);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Body — tagline, clamped description, trust badges ── */
.mp-biz-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 18px 0;
}

.mp-biz-tagline {
    margin: 0;
    font-family: var(--mp-font);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mp-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-biz-desc {
    margin: 0;
    font-family: var(--mp-font);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--mp-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-biz-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.mp-biz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--mp-font);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

    .mp-biz-badge svg {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
    }

    .mp-biz-badge.is-verified {
        background: rgba(16, 163, 91, 0.1);
        border: 1px solid rgba(16, 163, 91, 0.25);
        color: #0E7A46;
    }

    .mp-biz-badge.is-licensed {
        background: rgba(86, 196, 248, 0.12);
        border: 1px solid rgba(86, 196, 248, 0.3);
        color: #21739B;
    }

/* ── Foot — location + CTA ── */
.mp-biz-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 18px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.55);
}

.mp-biz-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: var(--mp-font);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mp-muted);
}

    .mp-biz-loc svg {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
        color: var(--mp-accent);
    }

.mp-biz-loc-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-biz-loc-sep {
    margin-right: 3px;
}

.mp-biz-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 100px;
    background: var(--mp-grad-ink);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 20px -10px rgba(14, 14, 17, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .mp-biz-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px -10px rgba(14, 14, 17, 0.6);
        color: #fff;
    }

    .mp-biz-cta svg {
        width: 13px;
        height: 13px;
    }

    .mp-biz-cta.is-sample {
        background: var(--mp-grad-sunset);
        box-shadow: 0 10px 20px -10px rgba(245, 130, 32, 0.65);
    }

        .mp-biz-cta.is-sample:hover {
            box-shadow: 0 14px 26px -10px rgba(245, 130, 32, 0.72);
        }


/* ════════════════════════════════════════════════════════════════════════
   11. EMPTY-STATE FIT — one-viewport composition                 (2026-07)
   ----------------------------------------------------------------------------
   Tighter empty-state geometry so hero strip + filter bar + chips + the
   sample card all land inside a single desktop viewport. The copy column
   centres against the compact card; on ≤900px the card stacks under the
   copy and keeps its 340px cap so it never balloons.
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-empty {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: 24px;
    padding: 22px 26px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.78)), radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--mp-accent-rgb), 0.07), transparent 60%);
}

.mp-dir-empty-copy h3 {
    font-size: 1.28rem;
    letter-spacing: -0.01em;
}

.mp-dir-empty-copy p {
    max-width: 46ch;
}

.mp-dir-empty-sample {
    display: flex;
    justify-content: center;
}

@media (max-width: 900px) {
    .mp-dir-empty {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
        text-align: center;
    }

    .mp-dir-empty-copy p {
        margin-inline: auto;
    }
}

@media (max-width: 420px) {
    .mp-biz {
        max-width: 100%;
    }

    .mp-biz-hero {
        aspect-ratio: 16 / 9;
    }

    .mp-biz-foot {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mp-biz-cta {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   12. V5 — ONE-VIEWPORT COMPACT PASS + THE RAIL + INTERACTIVE SAMPLE
   ----------------------------------------------------------------------------
   Loads last in this sheet, so equal-specificity rules here win the
   cascade over sections 1–11 (deliberate — the v4 geometry stays intact
   for the modal internals; only the page composition tightens).

   Vertical budget at a 1080p desktop (page height ≈ 100vh − 90px header
   ≈ 890px): breadcrumb 30 + hero 76 + filter 60 + chips 42 + results
   head 32 + rail ≈ 400 + dots 30 + paddings ≈ 700px → the whole
   directory, arrows and all, sits inside one viewport at 100% zoom. On
   shorter laptops the page's own scrollbar (section 1 fix) takes over.
   ════════════════════════════════════════════════════════════════════════ */

.mp-page.mp-category-page {
    padding-bottom: 26px;
}

    /* ── Compact hero strip ── */
    .mp-page.mp-category-page .mp-dir-hero {
        gap: 14px;
        padding: 12px 18px;
        margin-top: 8px;
        border-radius: 20px;
    }

    .mp-page.mp-category-page .mp-dir-hero-glyph {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        flex: 0 0 auto;
    }

        .mp-page.mp-category-page .mp-dir-hero-glyph svg {
            width: 22px;
            height: 22px;
        }

    .mp-page.mp-category-page .mp-dir-hero-eyebrow {
        font-size: 0.58rem;
    }

    .mp-page.mp-category-page .mp-dir-hero-title {
        font-size: clamp(1.15rem, 1.7vw, 1.45rem);
        line-height: 1.12;
    }

    .mp-page.mp-category-page .mp-dir-hero-tag {
        font-size: 0.78rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mp-page.mp-category-page .mp-dir-hero-register {
        min-height: 42px;
        padding: 9px 18px;
        font-size: 0.78rem;
    }

    /* ── Compact filter bar ── */
    .mp-page.mp-category-page .mp-dir-filter {
        margin-top: 12px;
    }

    .mp-page.mp-category-page .mp-dir-field,
    .mp-page.mp-category-page .mp-dir-filter-submit,
    .mp-page.mp-category-page .mp-dir-hyper {
        min-height: 46px;
    }

    /* ── Compact chips ── */
    .mp-page.mp-category-page .mp-dir-chips {
        margin-top: 10px;
    }

    .mp-page.mp-category-page .mp-dir-chip {
        min-height: 34px;
        padding: 6px 14px;
        font-size: 0.72rem;
    }

    /* ── Compact results header ── */
    .mp-page.mp-category-page .mp-dir-results {
        margin-top: 12px;
    }

    .mp-page.mp-category-page .mp-dir-results-head {
        margin-bottom: 10px;
    }

/* ════════════════════════════════════════════════════════════════════════
   THE RAIL — left arrow · 5-up card row · right arrow
   ════════════════════════════════════════════════════════════════════════ */

.mp-dir-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.mp-dir-rail-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--mp-ink-2);
    cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(14, 14, 17, 0.35);
    transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease, color 0.14s ease;
}

    .mp-dir-rail-arrow svg {
        width: 18px;
        height: 18px;
    }

    .mp-dir-rail-arrow:hover:not(:disabled) {
        transform: translateY(-1px) scale(1.05);
        color: var(--mp-accent);
        box-shadow: 0 16px 32px -14px rgba(var(--mp-accent-rgb), 0.5);
    }

    .mp-dir-rail-arrow:disabled {
        opacity: 0.3;
        cursor: default;
    }

    .mp-dir-rail-arrow[hidden] {
        display: none;
    }

/* Five compact cards across on desktop — one row, one viewport. */
.mp-page.mp-category-page .mp-dir-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

/* ── Compact card geometry (overrides section 4 values) ── */
.mp-page.mp-category-page .mp-card {
    border-radius: 18px;
}

.mp-page.mp-category-page .mp-card-cover {
    aspect-ratio: 16 / 10;
}

.mp-page.mp-category-page .mp-card-cover-mono {
    font-size: 2rem;
}

.mp-page.mp-category-page .mp-card-heart {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
}

    .mp-page.mp-category-page .mp-card-heart svg {
        width: 15px;
        height: 15px;
    }

.mp-page.mp-category-page .mp-card-flags {
    top: 8px;
    left: 8px;
}

.mp-page.mp-category-page .mp-card-flag {
    padding: 3px 8px;
    font-size: 0.54rem;
}

.mp-page.mp-category-page .mp-card-body {
    padding: 0 12px 11px;
}

.mp-page.mp-category-page .mp-card-avatar {
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 0.82rem;
    border-width: 2.5px;
}

.mp-page.mp-category-page .mp-card-name {
    margin-top: 7px;
    font-size: 0.88rem;
}

.mp-page.mp-category-page .mp-card-sub-pill {
    padding: 2px 8px;
    font-size: 0.56rem;
}

.mp-page.mp-category-page .mp-card-loc {
    font-size: 0.66rem;
}

.mp-page.mp-category-page .mp-card-rating {
    margin-top: 6px;
}

.mp-page.mp-category-page .mp-stars svg {
    width: 12px;
    height: 12px;
}

.mp-page.mp-category-page .mp-card-rating-num {
    font-size: 0.72rem;
}

.mp-page.mp-category-page .mp-card-rating-count {
    font-size: 0.64rem;
}

.mp-page.mp-category-page .mp-card-tag {
    margin-top: 7px;
    font-size: 0.74rem;
    line-height: 1.45;
}

.mp-page.mp-category-page .mp-card-foot {
    margin-top: 10px;
    padding-top: 9px;
}

.mp-page.mp-category-page .mp-card-cta {
    min-height: 36px;
    font-size: 0.74rem;
    border-radius: 10px;
}

.mp-page.mp-category-page .mp-card-share {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.mp-page.mp-category-page .mp-card-skel {
    min-height: 288px;
    border-radius: 18px;
}

/* ── Sample card — diagonal corner ribbon + register slot ── */
.mp-card.is-sample {
    overflow: hidden;
}

.mp-card-ribbon {
    position: absolute;
    top: 18px;
    left: -34px;
    z-index: 3;
    width: 140px;
    padding: 5px 0;
    transform: rotate(-45deg);
    text-align: center;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mp-grad-sunset);
    box-shadow: 0 8px 18px -8px rgba(245, 130, 32, 0.7);
    pointer-events: none;
}

.mp-card-share.is-register {
    color: #fff;
    border-color: transparent;
    background: var(--mp-grad-sunset);
    box-shadow: 0 10px 20px -10px rgba(245, 130, 32, 0.65);
    text-decoration: none;
}

    .mp-card-share.is-register:hover {
        background: var(--mp-grad-sunset);
        box-shadow: 0 14px 26px -10px rgba(245, 130, 32, 0.75);
    }

/* ════════════════════════════════════════════════════════════════════════
   EMPTY STATES (v5) — slim banners above the rail
   ════════════════════════════════════════════════════════════════════════ */

.mp-page.mp-category-page .mp-dir-empty {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 16px;
    text-align: left;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.8)), radial-gradient(ellipse 70% 90% at 100% 0%, rgba(var(--mp-accent-rgb), 0.08), transparent 60%);
    border: 1.5px dashed rgba(var(--mp-accent-rgb), 0.4);
}

.mp-dir-empty-spark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--mp-accent);
    background: rgba(var(--mp-accent-rgb), 0.12);
}

    .mp-dir-empty-spark svg {
        width: 19px;
        height: 19px;
    }

.mp-page.mp-category-page .mp-dir-empty-copy {
    flex: 1 1 auto;
    min-width: 0;
}

    .mp-page.mp-category-page .mp-dir-empty-copy h3 {
        margin: 0 0 2px;
        font-size: 0.94rem;
        letter-spacing: -0.01em;
    }

    .mp-page.mp-category-page .mp-dir-empty-copy p {
        margin: 0;
        max-width: none;
        font-size: 0.78rem;
        line-height: 1.45;
    }

.mp-dir-empty-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 16px;
    border: none;
    border-radius: 100px;
    background: var(--mp-grad-ink);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

    .mp-dir-empty-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px -14px rgba(14, 14, 17, 0.55);
        color: #fff;
    }

    .mp-dir-empty-cta svg {
        width: 14px;
        height: 14px;
        color: var(--mp-sunset);
    }

    .mp-dir-empty-cta.is-clear {
        background: var(--mp-cloud);
        color: var(--mp-ink);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

        .mp-dir-empty-cta.is-clear svg {
            color: var(--mp-ink-2);
        }

/* When only the sample occupies the 5-up rail, cap its width so it
   presents as a centred showcase card, not a full-row stretch. */
.mp-page.mp-category-page .mp-dir-grid > .mp-card.is-sample:only-child {
    grid-column: 1 / -1;
    width: min(320px, 100%);
    justify-self: center;
}

/* No-JS fallback wrapper */
.mp-dir-noscript {
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* ── Page dots (arrows moved to the rail) ── */
.mp-page.mp-category-page .mp-dir-pager {
    margin-top: 14px;
}

.mp-page.mp-category-page .mp-dir-pager-page {
    min-width: 32px;
    height: 32px;
    font-size: 0.76rem;
}

/* ════════════════════════════════════════════════════════════════════════
   SAMPLE-MODE MODAL — register panel replaces reviews / share / contact
   ════════════════════════════════════════════════════════════════════════ */

.mp-pv-overlay.is-sample [data-mp-pv-real-only] {
    display: none;
}

.mp-pv-sample-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)), radial-gradient(ellipse 80% 100% at 100% 0%, rgba(var(--mp-accent-rgb), 0.12), transparent 60%);
    border: 1.5px dashed rgba(var(--mp-accent-rgb), 0.45);
}

.mp-pv-sample-pill {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mp-grad-sunset);
}

.mp-pv-sample-panel h4 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--mp-ink);
    letter-spacing: -0.01em;
}

.mp-pv-sample-panel p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--mp-muted);
}

.mp-pv-sample-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 100px;
    background: var(--mp-grad-sunset);
    color: #fff;
    font-family: var(--mp-font);
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 28px -12px rgba(245, 130, 32, 0.7);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

    .mp-pv-sample-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 34px -12px rgba(245, 130, 32, 0.8);
        color: #fff;
    }

    .mp-pv-sample-cta svg {
        width: 16px;
        height: 16px;
    }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE RAIL
   ----------------------------------------------------------------------------
   ≤1360px: five 1fr columns would crush below ~230px, so the current
   page becomes a horizontal scroll-snap rail (all 5 cards remain in the
   DOM; swipe/drag within the page, arrows still page the feed).
   ≤720px: arrows hide (touch swipes the rail); the section-8 v4 rule
   set .mp-dir-grid to a single VERTICAL column — re-declared here
   (later in the cascade) to stay a horizontal rail so one page of
   providers never becomes a five-screen scroll.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1360px) {
    .mp-page.mp-category-page .mp-dir-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(236px, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

        .mp-page.mp-category-page .mp-dir-grid::-webkit-scrollbar {
            display: none;
        }

        .mp-page.mp-category-page .mp-dir-grid > .mp-card,
        .mp-page.mp-category-page .mp-dir-grid > .mp-card-skel {
            scroll-snap-align: start;
        }
}

@media (max-width: 720px) {
    .mp-dir-rail {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .mp-dir-rail-arrow {
        display: none;
    }

    .mp-page.mp-category-page .mp-dir-grid {
        grid-auto-flow: column;
        grid-auto-columns: min(78vw, 300px);
        grid-template-columns: none;
        gap: 12px;
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .mp-page.mp-category-page .mp-dir-empty {
        flex-wrap: wrap;
        padding: 14px;
    }

    .mp-dir-empty-cta {
        flex: 1 1 100%;
        justify-content: center;
    }

    .mp-page.mp-category-page .mp-dir-grid > .mp-card.is-sample:only-child {
        width: min(300px, 78vw);
        justify-self: start;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   13. V6 — GRAB RAIL (rectangle cards) + 3-PANEL DOSSIER MODAL
   ----------------------------------------------------------------------------
   Loads after sections 1–12, so equal-specificity rules here win the
   cascade. Supersedes: v5's 5-column grid + dot pager (the strip is now
   continuous), the v4/v5 card body composition (media-filled rectangle
   with an identity overlay), and the v4 centred-dialog modal geometry
   (now a 90vw × 90vh three-panel sheet: brand cover · information ·
   draggable service-area map).
   ════════════════════════════════════════════════════════════════════════ */

/* ── THE STRIP — continuous, grabbable, with scale headroom ── */
.mp-page.mp-category-page .mp-dir-grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    /* headroom so the in-focus card can scale without clipping */
    padding-block: 20px;
    scroll-snap-type: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    cursor: grab;
}

    .mp-page.mp-category-page .mp-dir-grid::-webkit-scrollbar {
        display: none;
    }

    .mp-page.mp-category-page .mp-dir-grid.is-dragging {
        cursor: grabbing;
        scroll-behavior: auto;
        user-select: none;
    }

        .mp-page.mp-category-page .mp-dir-grid.is-dragging .mp-card {
            pointer-events: none;
        }

/* ── THE RECTANGLE — media-filled premium card ── */
.mp-page.mp-category-page .mp-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(300px, 24vw, 400px);
    /* 16/11 = the v6 16/10 rectangle +10% height at the same width
       (0.625 → 0.6875 height ratio), giving the overlay breathing
       room without widening the strip. */
    aspect-ratio: 16 / 11;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: var(--mp-grad-ink);
    box-shadow: 0 18px 40px -22px rgba(14, 14, 17, 0.45);
    cursor: pointer;
    /* transform + opacity are DRIVEN BY JS each scroll frame (focus
       scale); no transition here or the rAF values would smear. */
    transition: box-shadow 0.2s ease;
    transform-origin: center center;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}

    .mp-page.mp-category-page .mp-card:hover {
        transform: none;
    }

    .mp-page.mp-category-page .mp-card:active {
        transform: none;
    }

    .mp-page.mp-category-page .mp-card:focus-visible {
        outline: 3px solid rgba(var(--mp-accent-rgb), 0.8);
        outline-offset: 3px;
    }

.mp-page.mp-category-page .mp-card-cover {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.mp-page.mp-category-page .mp-card-cover-mono {
    font-size: 3rem;
}

.mp-card-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(10, 10, 14, 0.88) 0%, rgba(10, 10, 14, 0.55) 34%, rgba(10, 10, 14, 0.05) 62%, transparent 100%);
    pointer-events: none;
}

/* Identity overlay pinned to the bottom of the rectangle */
.mp-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px 12px;
    color: #fff;
}

.mp-card-idrow {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mp-page.mp-category-page .mp-card-avatar {
    position: relative;
    margin: 0;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(140deg, var(--mp-accent), color-mix(in srgb, var(--mp-accent) 65%, #0E0E11));
    overflow: hidden;
}

.mp-card-idtext {
    min-width: 0;
}

.mp-page.mp-category-page .mp-card-name {
    margin: 0;
    font-size: 0.94rem;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.mp-page.mp-category-page .mp-card-subline {
    margin-top: 3px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.mp-page.mp-category-page .mp-card-sub-pill {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.mp-page.mp-category-page .mp-card-loc {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-page.mp-category-page .mp-card-rating {
    margin-top: 0;
}

.mp-page.mp-category-page .mp-stars svg {
    fill: rgba(255, 255, 255, 0.28);
}

    .mp-page.mp-category-page .mp-stars svg.is-on {
        fill: #F5A623;
    }

.mp-page.mp-category-page .mp-card-rating-num {
    color: #fff;
}

.mp-page.mp-category-page .mp-card-rating-count {
    color: rgba(255, 255, 255, 0.75);
}

.mp-page.mp-category-page .mp-card-foot {
    margin-top: 2px;
    padding-top: 0;
    border-top: none;
    gap: 8px;
}

.mp-page.mp-category-page .mp-card-cta {
    min-height: 36px;
    border-radius: 100px;
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--mp-ink);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

    .mp-page.mp-category-page .mp-card-cta svg {
        color: var(--mp-sunset);
    }

.mp-page.mp-category-page .mp-card-share {
    width: 36px;
    height: 36px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

    .mp-page.mp-category-page .mp-card-share:hover {
        background: rgba(255, 255, 255, 0.3);
    }

.mp-page.mp-category-page .mp-card-hearts {
    color: rgba(255, 255, 255, 0.85);
}

/* Rectangle skeletons */
.mp-page.mp-category-page .mp-card-skel {
    flex: 0 0 auto;
    width: clamp(300px, 24vw, 400px);
    aspect-ratio: 16 / 11; /* matches .mp-card — no reflow on hydrate */
    min-height: 0;
    border-radius: 18px;
}

    .mp-page.mp-category-page .mp-card-skel .mp-skel-cover {
        flex: 1 1 auto;
        aspect-ratio: auto;
    }

/* Sample rectangle: keep it a natural strip member (the v5 width cap
   + centring no longer apply on the continuous strip). */
.mp-page.mp-category-page .mp-dir-grid > .mp-card.is-sample:only-child {
    grid-column: auto;
    width: clamp(300px, 24vw, 400px);
    justify-self: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   THE DOSSIER — 90vw × 90vh, three panels
   ════════════════════════════════════════════════════════════════════════ */

.mp-pv-overlay {
    padding: 0;
}

.mp-pv-sheet {
    --pv-map-pct: 32%;
    width: 90vw;
    height: 90vh;
    max-width: none;
    max-height: none;
    display: grid;
    grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) 12px var(--pv-map-pct);
    grid-template-rows: 100%;
    border-radius: 26px;
    overflow: hidden;
}

    .mp-pv-sheet.is-resizing {
        user-select: none;
        cursor: col-resize;
    }

.mp-pv-close {
    z-index: 6;
    background: rgba(255, 255, 255, 0.92);
}

/* ── PANEL 1 — brand cover (the "report cover" composition) ── */
.mp-pv-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 22px 24px;
    min-height: 0;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(var(--mp-accent-rgb), 0.5), transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(var(--mp-accent-rgb), 0.28), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--mp-accent) 30%, #0E0E11), #0E0E11);
}

.mp-pv-brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.mp-pv-brand-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mp-grad-sunset);
}

/* Slideshow — slow crossfade + gentle Ken Burns drift */
.mp-pv-slides-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
}

.mp-pv-slides {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.mp-pv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
}

    .mp-pv-slide.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    .mp-pv-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
    }

    .mp-pv-slide.is-active img {
        animation: mp-pv-kenburns 14s ease-in-out infinite alternate;
    }

    .mp-pv-slide video,
    .mp-pv-slide iframe {
        width: 100%;
        height: 100%;
        border: 0;
        object-fit: cover;
        background: #000;
    }

@keyframes mp-pv-kenburns {
    from {
        transform: scale(1) translateX(0);
    }

    to {
        transform: scale(1.07) translateX(-1.5%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-pv-slide.is-active img {
        animation: none;
    }

    .mp-pv-slide {
        transition-duration: 0.2s;
    }
}

.mp-pv-slide-dots {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.mp-pv-slide-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease;
}

    .mp-pv-slide-dot.is-active {
        background: #fff;
        transform: scale(1.25);
    }

/* Circular logo overlapping the media edge (the report-cover circle) */
.mp-pv-brand .mp-pv-avatar {
    position: absolute;
    right: 16px;
    bottom: -30px;
    z-index: 4;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    font-size: 1.5rem;
    border: 4px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.6);
}

.mp-pv-brand .mp-pv-name {
    margin: 18px 0 0;
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
}

.mp-pv-brand-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.mp-pv-brand .mp-pv-sub-pill {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.26);
}

.mp-pv-brand .mp-pv-loc {
    color: rgba(255, 255, 255, 0.82);
}

/* ── PANEL 2 — business information ── */
.mp-pv-scroll {
    min-height: 0;
    padding: 22px 24px 26px;
}

.mp-pv-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* ── DIVIDER — drag / arrow keys to resize the map ── */
.mp-pv-divider {
    position: relative;
    display: grid;
    place-items: center;
    cursor: col-resize;
    background: rgba(0, 0, 0, 0.035);
    border-inline: 1px solid var(--mp-line);
    touch-action: none;
}

    .mp-pv-divider:hover,
    .mp-pv-sheet.is-resizing .mp-pv-divider {
        background: rgba(var(--mp-accent-rgb), 0.14);
    }

    .mp-pv-divider:focus-visible {
        outline: 2px solid rgba(var(--mp-accent-rgb), 0.8);
        outline-offset: -2px;
    }

.mp-pv-divider-grip {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mp-pv-divider-grip i {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--mp-muted-2);
    }

/* ── PANEL 3 — service-area map, full height ── */
.mp-pv-map {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: #eaf0f3;
}

.mp-pv-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 52px 12px 16px; /* right gap clears the close button */
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--mp-line);
}

.mp-pv-map-title {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.mp-pv-map-areas {
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mp-ink);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-pv-map-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.mp-pv-map-note {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--mp-muted);
    background: #f4f6f8;
}

/* Monogram fallback inside a slide */
.mp-pv-slide .mp-pv-mono,
.mp-pv-mono {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   V6 RESPONSIVE — stacked dossier + touch rail
   ----------------------------------------------------------------------------
   These blocks come AFTER the v4 ≤720px bottom-sheet rules and the v5
   rail media queries, so they own the final word for the new layout.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1360px) {
    /* v5 turned the grid into a snap rail here — the v6 strip is
       already continuous at every width, so just restate flex. */
    .mp-page.mp-category-page .mp-dir-grid {
        display: flex;
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        scroll-snap-type: none;
    }
}

@media (max-width: 980px) {
    /* Dossier stacks: brand → info → map. Full screen, divider gone. */
    .mp-pv-overlay {
        place-items: stretch;
    }

    .mp-pv-sheet {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mp-pv-brand {
        flex: 0 0 auto;
    }

    .mp-pv-slides-wrap {
        flex: 0 0 auto;
        height: 230px;
        min-height: 0;
    }

    .mp-pv-scroll {
        flex: 0 0 auto;
        overflow: visible;
    }

    .mp-pv-divider {
        display: none;
    }

    .mp-pv-map {
        flex: 0 0 auto;
    }

    .mp-pv-map-canvas {
        height: 280px;
        flex: 0 0 auto;
    }
}

@media (max-width: 720px) {
    /* v4's bottom-sheet block reshapes .mp-pv-sheet at this width —
       restate the stacked dossier so it wins the cascade. */
    .mp-pv-overlay {
        padding: 0;
        place-items: stretch;
    }

    .mp-pv-sheet {
        width: 100vw;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        animation: none;
    }

    .mp-page.mp-category-page .mp-dir-grid {
        display: flex;
        grid-auto-flow: initial;
        grid-auto-columns: initial;
        margin-inline: -16px;
        padding-inline: 16px;
        gap: 12px;
    }

    .mp-page.mp-category-page .mp-card,
    .mp-page.mp-category-page .mp-card-skel {
        width: min(82vw, 340px);
    }

    .mp-page.mp-category-page .mp-dir-grid > .mp-card.is-sample:only-child {
        width: min(82vw, 340px);
        justify-self: auto;
    }
}