/* ──────────────────────────────────────────────────────────────
   PixelSpot — sitewide mobile refinements (Apple-style handheld UI)
   Loaded last so it can correct page-level rules.
   Desktop is untouched: everything here is inside a max-width query.
   ────────────────────────────────────────────────────────────── */

/* Notch / home-indicator safe areas — applies at every width */
:root {
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px) {

    /* ── 1. Never scroll sideways ───────────────────────────── */
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

    /* Wide media can't push the page open */
    img, svg, video, canvas, iframe { max-width: 100%; }

    /* Tables scroll inside themselves rather than widening the page */
    table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Long unbroken strings (URLs, emails, spec codes) wrap */
    p, li, td, th, dd, figcaption, blockquote { overflow-wrap: anywhere; }

    /* ── 2. Apple-style type: tighter leading, fluid sizes ───── */
    body { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
    h1 { font-size: clamp(1.9rem, 8.4vw, 2.9rem) !important; line-height: 1.08 !important; letter-spacing: -.028em !important; }
    h2 { font-size: clamp(1.6rem, 6.8vw, 2.3rem) !important; line-height: 1.12 !important; letter-spacing: -.024em !important; }
    h3 { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; line-height: 1.2 !important; letter-spacing: -.018em !important; }
    p  { font-size: clamp(.95rem, 3.9vw, 1.05rem); line-height: 1.62; }

    /* Wide letter-spaced eyebrows get cramped on narrow screens */
    .section-tag, .sec-eye, [class*="-eyebrow"], [class*="eyebrow"] { letter-spacing: .1em !important; }

    /* ── 3. Breathing room, not desktop-sized gutters ────────── */
    section, .section { padding-left: max(18px, var(--safe-l)) !important; padding-right: max(18px, var(--safe-r)) !important; }
    .section { padding-top: 56px !important; padding-bottom: 56px !important; }
    .container, .nav-container { padding-left: max(18px, var(--safe-l)); padding-right: max(18px, var(--safe-r)); }

    /* ── 4. Multi-column grids collapse to one readable column ─ */
    [class*="-grid"], [class*="-row"]:not(.nav-container):not([class*="chain"]) {
        grid-template-columns: 1fr !important;
    }
    /* …except small stat/metric strips, which stay two-up */
    .st-grid, .stats-grid, [class*="stat-grid"] { grid-template-columns: repeat(2, 1fr) !important; }

    /* ── 5. Touch targets: Apple's 44pt minimum ──────────────── */
    /* min-height only — never touch `display`, or elements the page
       deliberately hides on mobile (e.g. .nav-quote-cta) reappear. */
    a.btn, button, .btn, [role="button"], input[type="submit"],
    .nav-link, .nav-cta, .nav-quote-cta { min-height: 44px; }

    /* …but never stretch decorative controls: carousel dots, toggles,
       close buttons and icon chips are sized on purpose. */
    button[class*="dot"], button[class*="indicator"], button[class*="bullet"],
    button[class*="pip"], button[class*="close"], button[class*="arrow"],
    button[class*="toggle"], button[class*="nav-toggle"], button[class*="burger"],
    [class*="dots"] > *, [class*="-dot"], [class*="indicator"] > button,
    [class*="pager"] > *, [class*="slider-nav"] > * {
        min-height: 0 !important;
        display: revert;
    }

    /* Centre the label only on things already laid out as boxes */
    a.btn:not([hidden]), .btn:not([hidden]), [role="button"]:not([hidden]) {
        display: inline-flex; align-items: center; justify-content: center;
    }
    /* Respect any page rule that hides an element on mobile */
    .nav-quote-cta, .nav-cta { display: none; }
    .btn, a.btn { padding: 13px 24px !important; font-size: .95rem !important; }
    /* Full-width primary actions read better on a phone */
    .hero-buttons .btn, .ppd-final-btns .btn { width: 100%; }

    /* ── 6. Forms: 16px stops iOS auto-zooming on focus ──────── */
    input, select, textarea { font-size: 16px !important; min-height: 44px; border-radius: 12px; }
    input, select, textarea, button { -webkit-tap-highlight-color: transparent; }

    /* ── 7. Momentum scrolling for any horizontal rail ───────── */
    [class*="-rail"], [class*="-scroll"], [class*="-strip"], [class*="-carousel"] {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    [class*="-rail"]::-webkit-scrollbar, [class*="-strip"]::-webkit-scrollbar { display: none; }

    /* ── 8. Cards: softer radii, less padding ────────────────── */
    [class*="card"] { border-radius: 18px; }

    /* ── 9. Floating widgets clear the home indicator ────────── */
    [class*="whatsapp"], [class*="wa-float"], [class*="float-cta"], [class*="sticky-cta"] {
        bottom: calc(16px + var(--safe-b)) !important;
    }

    /* ── 10. Heavy desktop effects cost battery on phones ────── */
    [class*="parallax"] { transform: none !important; }
}

/* Very small phones (SE, older Androids) */
@media (max-width: 400px) {
    .section { padding-top: 44px !important; padding-bottom: 44px !important; }
    section, .section { padding-left: max(14px, var(--safe-l)) !important; padding-right: max(14px, var(--safe-r)) !important; }
    .st-grid, .stats-grid, [class*="stat-grid"] { grid-template-columns: 1fr !important; }
}

/* Respect the OS reduce-motion switch */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
        scroll-behavior: auto !important;
    }
}

/* Transform-scaled YouTube players must keep their layout size —
   capping them makes the player smaller than YouTube's minimum and
   it renders the branding fallback instead of the video. */
@media (max-width: 900px) {
    .ledscr iframe, .lus-yt, .pxc-video iframe, .cine-vid iframe { max-width: none !important; }
}

/* ── compact footer accordions (phones only) ───────────────── */
@media (max-width: 768px) {
    .psft-acc-h {
        position: relative;
        display: block;
        cursor: pointer;
        padding-right: 30px;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .psft-acc-h::after {
        content: '';
        position: absolute;
        right: 6px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 1.8px solid currentColor;
        border-bottom: 1.8px solid currentColor;
        opacity: .45;
        transform: rotate(45deg);
        transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s;
    }
    .psft-acc-h.open::after { transform: rotate(-135deg); margin-top: -2px; opacity: .8; }

    .psft-acc {
        max-height: 0;
        overflow: hidden;
        transition: max-height .42s cubic-bezier(.16,1,.3,1), opacity .3s;
        opacity: 0;
    }
    .psft-acc.open { max-height: 1600px; opacity: 1; }

    /* tighten the whole footer on phones */
    .psft-grid { gap: 0 !important; }
    .psft-grid > div { border-bottom: 1px solid rgba(0,0,0,.07); padding: 2px 0; }
    .psft-grid > div:last-child { border-bottom: none; }
    .psft-grid h4 { margin: 0; padding: 15px 30px 15px 0; }
    .psft-acc a { padding: 7px 0; }
    .psft-acc > *:last-child { margin-bottom: 12px; }

    .psft-areas p.t { margin: 0; padding: 15px 30px 15px 0; border-top: 1px solid rgba(0,0,0,.07); }
    .psft-areas p.l { padding-bottom: 14px; }
}

/* ── desktop: collapse the long city-link blobs too ────────── */
@media (min-width: 769px) {
    .psft-areas .psft-acc-h {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .psft-areas .psft-acc-h::after {
        content: '';
        width: 7px; height: 7px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        opacity: .5;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s;
    }
    .psft-areas .psft-acc-h.open::after { transform: rotate(-135deg); opacity: .85; }
    .psft-areas .psft-acc {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .45s cubic-bezier(.16,1,.3,1), opacity .3s;
    }
    .psft-areas .psft-acc.open { max-height: 900px; opacity: 1; }
}

/* ── industry cards: horizontal slider on phones ───────────── */
@media (max-width: 768px) {
    body .trusted-grid:has(.trusted-card) {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px max(18px, var(--safe-l)) 22px !important;
        margin: 26px -18px 0 !important;
        max-width: none !important;
        scroll-padding-left: max(18px, var(--safe-l));
    }
    body .trusted-grid:has(.trusted-card)::-webkit-scrollbar { display: none; }

    body .trusted-grid:has(.trusted-card) > .trusted-card {
        flex: 0 0 78vw !important;
        width: 78vw !important;
        max-width: 320px;
        scroll-snap-align: start;
        border-radius: 22px;
        min-height: 0;
    }
    /* text has room to breathe now — no more one-word-per-line */
    .trusted-grid .trusted-card h4 { font-size: 1.35rem !important; line-height: 1.15 !important; }
    .trusted-grid .trusted-card p { font-size: .95rem !important; line-height: 1.5 !important; }
    .trusted-kicker { font-size: .68rem !important; letter-spacing: .12em !important; }

    /* swipe affordance */
    body .trusted-grid:has(.trusted-card)::after {
        content: '';
        flex: 0 0 6px;
    }
}

/* ── installed-walls map: phone layout ─────────────────────── */
@media (max-width: 768px) {
    body .ps-map-section { margin-top: 40px !important; border-radius: 20px !important; }
    body .ps-map-title { font-size: 1.55rem !important; line-height: 1.15 !important; }
    body .ps-map-subtitle { font-size: .92rem !important; }

    /* controls: full-width search, then a filter dropdown + Near Me */
    body .ps-map-controls {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 0 max(16px, var(--safe-l)) !important;
    }
    body .ps-map-search-box {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding: 11px 14px !important;
    }
    body .ps-map-search-box input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; font-size: 16px !important; }
    body .ps-map-near-btn { width: 100% !important; justify-content: center !important; padding: 12px 18px !important; }

    /* the pill row is replaced by a native dropdown */
    body .ps-map-filters-hidden { display: none !important; }
    body .ps-map-mfilter { padding: 12px max(16px, var(--safe-l)) 4px; }
    body .ps-map-select {
        -webkit-appearance: none; appearance: none;
        width: 100%;
        font-size: 15px;
        font-weight: 600;
        color: #1d1d1f;
        background: #f5f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
        border: 1px solid #e3e3e8;
        border-radius: 12px;
        padding: 13px 40px 13px 15px;
        line-height: 1.2;
    }
    body .ps-map-select:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }

    /* taller map — a squat map is unreadable on a phone */
    body #psMapCanvas,
    body .ps-map-canvas,
    body .ps-map-frame .leaflet-container { min-height: 60vh !important; min-height: 60svh !important; }

    /* nearby list gets room and stops clipping mid-card */
    body .ps-map-list,
    body .ps-map-results { max-height: 380px !important; }
    body .ps-map-search-box { width: 100% !important; }
    body .ps-map-near-btn { white-space: nowrap !important; }
}

/* ── map: open it up, and slide the sites sideways ─────────── */
@media (max-width: 768px) {
    /* full-bleed map card */
    body .ps-map-section { padding-left: 0 !important; padding-right: 0 !important; }
    body .ps-map-card-wrapper {
        display: block !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    body .ps-map-canvas,
    body .ps-map-frame .leaflet-container {
        min-height: 60vh !important;
        min-height: 60svh !important;
        border-radius: 0 !important;
    }

    /* sidebar becomes a horizontal deck under the map */
    body .ps-map-sidebar {
        border-left: none !important;
        border-top: 1px solid rgba(0,0,0,.08) !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
    }
    body .ps-map-sites-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: none !important;
        height: auto !important;
        padding: 14px max(16px, var(--safe-l)) 18px !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: max(16px, var(--safe-l));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body .ps-map-sites-list::-webkit-scrollbar { display: none; }
    body .ps-map-sites-list > .ps-site-card {
        flex: 0 0 76vw !important;
        max-width: 300px !important;
        scroll-snap-align: start;
        margin: 0 !important;
        border-radius: 16px !important;
    }
    /* section heading row stays put above the deck */
    body .ps-map-sidebar > *:not(.ps-map-sites-list) { padding-left: max(16px, var(--safe-l)) !important; padding-right: 16px !important; }
}

/* ── map controls: refined, Apple-grade ────────────────────── */
@media (max-width: 768px) {
    body .ps-map-search-box {
        background: rgba(255,255,255,.72) !important;
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.18) !important;
        padding: 6px 6px 6px 16px !important;
        transition: border-color .25s, box-shadow .25s;
    }
    body .ps-map-search-box:focus-within {
        border-color: rgba(0,113,227,.5) !important;
        box-shadow: 0 0 0 4px rgba(0,113,227,.10), 0 10px 28px -14px rgba(0,0,0,.24) !important;
    }
    body .ps-map-search-box input {
        letter-spacing: -.01em !important;
        color: #1d1d1f !important;
        padding: 8px 4px !important;
    }
    body .ps-map-near-btn {
        width: auto !important;
        flex: 0 0 auto !important;
        border-radius: 999px !important;
        font-weight: 600 !important;
        letter-spacing: -.01em !important;
        padding: 11px 20px !important;
        box-shadow: 0 6px 18px -8px rgba(0,113,227,.7) !important;
        transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s !important;
    }
    body .ps-map-near-btn:active { transform: scale(.97) !important; }

    /* the filter select: glass pill, not a form control */
    body .ps-map-mfilter { padding: 12px max(16px, var(--safe-l)) 2px; }
    body .ps-map-select {
        background-color: rgba(255,255,255,.72);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.18);
        padding: 14px 44px 14px 18px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.012em;
        background-position: right 18px center;
        transition: border-color .25s, box-shadow .25s, transform .2s;
    }
    body .ps-map-select:active { transform: scale(.995); }
    body .ps-map-select:focus {
        border-color: rgba(0,113,227,.5);
        box-shadow: 0 0 0 4px rgba(0,113,227,.10), 0 10px 28px -14px rgba(0,0,0,.24);
    }
}

/* cards size to their own content — nothing clipped */
@media (max-width: 768px) {
    body .ps-map-sites-list { align-items: flex-start !important; padding-bottom: 22px !important; }
    body .ps-map-sites-list > .ps-site-card {
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start !important;
        overflow: visible !important;
    }
}

/* Near-Me feedback + distance labels */
.ps-near-note {
    margin: 0 max(16px, var(--safe-l)) 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
    background: rgba(0,113,227,.08);
    color: #0060c8;
}
.ps-near-note[data-tone="warn"] { background: rgba(255,159,10,.12); color: #a35c00; }
.ps-near-note[data-tone="ok"]   { background: rgba(52,199,89,.12);  color: #1d7a3d; }
.ps-near-dist {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 99px;
    background: rgba(0,113,227,.1);
    color: #0071e3;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

/* ── mobile menu must be visible when open ─────────────────── */
@media (max-width: 768px) {
    body.menu-open .nav-links,
    body .nav-links.open {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip-path: inset(0 0 0 0) !important;
        pointer-events: auto !important;
    }
    body .nav-links.open .nav-link { opacity: 1 !important; transform: none !important; }
}

/* burger must stay a two-line stack (an earlier `display: revert`
   in this file reverted it to inline-block, collapsing the lines) */
@media (max-width: 768px) {
    body .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
    }
    body .nav-toggle span { display: block !important; width: 17px; height: 1.6px; }

    /* the open menu needs its own solid surface */
    body.menu-open .nav-links,
    body .nav-links.open {
        background: #fff !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 84px 40px 48px !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
    }
}

/* menu links: same weight and colour on every page */
@media (max-width: 768px) {
    body .nav-links.open .nav-link,
    body.menu-open .nav-links .nav-link {
        color: #1d1d1f !important;
        font-weight: 600 !important;
        letter-spacing: -.02em !important;
    }
    body .nav-links.open .nav-link:hover,
    body .nav-links.open .nav-link.active { color: #0071e3 !important; }
}

/* ── store find bar: contained search + swipeable chips ────── */
@media (max-width: 768px) {
    body .store-findbar { padding: 10px 0 8px !important; }
    body .sfb-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        padding: 0 max(16px, var(--safe-l)) !important;
    }
    body .sfb-input {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: 100% !important;
        padding: 11px 16px !important;
    }
    body .sfb-input input { font-size: 16px !important; min-width: 0 !important; }

    /* chips ride in one swipeable row, edge-to-edge and clipped correctly */
    body .sfb-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 2px 0 6px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body .sfb-chips::-webkit-scrollbar { display: none; }
    body .sfb-chips button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }
    body .sfb-count { display: none !important; }
}

/* ── site cards: nothing clipped, and focus one at a time ──── */
@media (max-width: 768px) {
    /* the spec badge was being cut off — let cards own their height */
    body .ps-map-sites-list > .ps-site-card {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 14px 16px 16px !important;
    }
    body .ps-site-specs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 8px !important; }
    body .ps-site-badge { display: inline-block !important; white-space: normal !important; }

    /* focused mode: only the chosen installation */
    body .ps-map-sites-list.ps-focused { scroll-snap-type: none; }
    body .ps-site-card.ps-hide { display: none !important; }
    body .ps-site-card.ps-solo {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
        border-color: #0071e3 !important;
        box-shadow: 0 0 0 3px rgba(0,113,227,.12) !important;
    }
    .ps-site-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 12px max(16px, var(--safe-l)) 0;
        padding: 8px 14px;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 999px;
        background: #fff;
        color: #0071e3;
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
    }
    .ps-site-back:active { transform: scale(.97); }
}

/* ── store find bar: Apple-grade refinement ────────────────── */
@media (max-width: 768px) {
    body .store-findbar {
        background: rgba(250,250,252,.72) !important;
        backdrop-filter: saturate(180%) blur(24px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
        border-bottom: .5px solid rgba(0,0,0,.12) !important;
        padding: 12px 0 6px !important;
    }

    /* search: a real iOS search field, not a grey blob */
    body .sfb-input {
        background: rgba(118,118,128,.10) !important;
        border: .5px solid rgba(0,0,0,.06) !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        gap: 8px !important;
        box-shadow: none !important;
        transition: background .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s !important;
    }
    body .sfb-input:focus-within {
        background: #fff !important;
        border-color: rgba(0,113,227,.55) !important;
        box-shadow: 0 0 0 4px rgba(0,113,227,.12), 0 6px 20px -10px rgba(0,0,0,.25) !important;
    }
    body .sfb-input svg { opacity: .45; flex: 0 0 auto; }
    body .sfb-input input {
        font-size: 16px !important;
        letter-spacing: -.015em !important;
        color: #1d1d1f !important;
    }

    /* chips: a segmented row that fades at the edge */
    body .sfb-chips {
        gap: 7px !important;
        padding-top: 4px !important;
        padding-bottom: 8px !important;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    }
    body .sfb-chips button {
        border: .5px solid rgba(0,0,0,.10) !important;
        background: rgba(255,255,255,.72) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: #1d1d1f !important;
        font-size: .82rem !important;
        font-weight: 590 !important;
        letter-spacing: -.012em !important;
        padding: 9px 16px !important;
        border-radius: 999px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
        transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s, color .25s, box-shadow .25s !important;
    }
    body .sfb-chips button:active { transform: scale(.95) !important; }
    body .sfb-chips button.on {
        background: #1d1d1f !important;
        border-color: #1d1d1f !important;
        color: #fff !important;
        box-shadow: 0 6px 16px -6px rgba(0,0,0,.45) !important;
    }
}

/* the findbar's inner container is a 999px pill — on a phone that
   rounded blob fights the chip row. Flatten it into a clean bar. */
@media (max-width: 768px) {
    body .store-findbar > .container {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }
    body .store-findbar {
        background: rgba(250,250,252,.82) !important;
        box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
    }
}

/* ── store product rails: proper snap sliders ──────────────── */
@media (max-width: 768px) {
    body .store-latest-cards,
    body .store-featured-cards,
    body .store-explore-cards,
    body .store-difference-cards,
    body .help-cards-apple {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: max(18px, var(--safe-l));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding-left: max(18px, var(--safe-l)) !important;
        padding-right: max(18px, var(--safe-l)) !important;
        margin-bottom: 4px !important;
    }
    body .store-latest-cards::-webkit-scrollbar,
    body .store-featured-cards::-webkit-scrollbar,
    body .store-explore-cards::-webkit-scrollbar,
    body .store-difference-cards::-webkit-scrollbar,
    body .help-cards-apple::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

    /* every card: same width, peek the next, snap into place */
    body .store-latest-cards > *,
    body .store-featured-cards > *,
    body .store-explore-cards > *,
    body .store-difference-cards > *,
    body .help-cards-apple > * {
        flex: 0 0 82vw !important;
        width: 82vw !important;
        max-width: 340px !important;
        min-width: 0 !important;
        scroll-snap-align: start;
        border-radius: 22px !important;
        margin: 0 !important;
    }

    /* tidy the card interiors so nothing crowds the edge */
    body .store-product-card, body .store-gtkcard { overflow: hidden !important; }
}

/* ── slider dots ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .ps-rail-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 14px 0 4px;
    }
    .ps-rail-dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: none;
        border-radius: 99px;
        background: rgba(0,0,0,.18);
        cursor: pointer;
        transition: width .4s cubic-bezier(.16,1,.3,1), background .3s;
    }
    .ps-rail-dot.on { width: 22px; background: #1d1d1f; }
    /* dark sections get light dots */
    .plx-tech .ps-rail-dots .ps-rail-dot,
    .ps-map-sidebar .ps-rail-dot { background: rgba(0,0,0,.16); }
}

/* ── slider dots: frosted capsule, gradient pill, live sheen ── */
@media (max-width: 768px) {
    .ps-rail-dots {
        width: max-content;
        margin: 0 auto;
        padding: 10px 16px !important;
        gap: 9px;
        background: rgba(245,245,247,.72);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border: .5px solid rgba(0,0,0,.07);
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px -14px rgba(0,0,0,.35);
    }
    .ps-rail-dot {
        position: relative;
        overflow: hidden;
        width: 7px;
        height: 7px;
        background: #cfcfd4;
        transition: width .45s cubic-bezier(.16,1,.3,1), background .35s, transform .3s;
    }
    .ps-rail-dot:active { transform: scale(1.35); }
    .ps-rail-dot.on {
        width: 30px;
        background: linear-gradient(90deg, #0090f7, #7b5bf5);
    }
    .ps-rail-dot.on::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.6) 50%, transparent 72%);
        background-size: 240% 100%;
        animation: psDotSheen 2.4s linear infinite;
    }
    @keyframes psDotSheen {
        from { background-position: 180% 0; }
        to   { background-position: -80% 0; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .ps-rail-dot.on::after { animation: none; }
}

/* open menu must fill the screen — `inset:0` alone was losing to
   a height/max-height rule on some pages (store), clipping links */
@media (max-width: 768px) {
    body.menu-open .nav-links,
    body .nav-links.open {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        min-height: 100vh !important;
    }
}

/* the card's lower half (spec badge) was being covered by a sibling
   surface — give cards their own layer so they always paint on top */
@media (max-width: 768px) {
    body .ps-map-sites-list { position: relative; z-index: 1; align-items: stretch !important; }
    body .ps-map-sites-list > .ps-site-card {
        position: relative;
        z-index: 2;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 2px !important;
    }
    body .ps-site-specs { margin-top: auto !important; padding-top: 8px !important; }
}

/* our own spec line inside each site card */
@media (max-width: 768px) {
    .ps-card-spec {
        display: block;
        margin-top: 8px;
        padding: 5px 10px;
        background: #f2f2f5;
        border-radius: 8px;
        font-size: .7rem;
        font-weight: 600;
        color: #3c3c43;
        line-height: 1.35;
        white-space: normal;
    }
}

/* the deck inherited a fixed height from the desktop sidebar, which
   clipped the lower half of every card (spec line included) */
@media (max-width: 768px) {
    body .ps-map-sites-list {
        height: auto !important;
        max-height: none !important;
        min-height: 232px !important;
    }
    body .ps-map-sidebar { height: auto !important; max-height: none !important; overflow: visible !important; }
}

/* the map card wrapper kept a fixed grid height, so the section box
   stopped growing and the NEXT section painted over the card deck */
@media (max-width: 768px) {
    body .ps-map-card-wrapper {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
        overflow: visible !important;
    }
    body .ps-map-section {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: relative;
        z-index: 2;
        padding-bottom: 8px !important;
    }
    body .closer-sec { position: relative; z-index: 1; margin-top: 0 !important; }
}

/* ── site cards: compact ───────────────────────────────────── */
@media (max-width: 768px) {
    body .ps-map-sites-list {
        gap: 10px !important;
        min-height: 0 !important;
        padding-top: 12px !important;
        padding-bottom: 14px !important;
    }
    body .ps-map-sites-list > .ps-site-card {
        flex: 0 0 68vw !important;
        width: 68vw !important;
        max-width: 260px !important;
        padding: 12px 13px 13px !important;
        border-radius: 14px !important;
        gap: 0 !important;
    }
    body .ps-site-tag { font-size: .62rem !important; letter-spacing: .07em !important; }
    body .ps-map-sites-list .ps-site-card > *:nth-child(2) { font-size: .95rem !important; line-height: 1.2 !important; }
    body .ps-site-loc { font-size: .78rem !important; margin-top: 1px !important; }
    body .ps-site-specs { margin-top: 8px !important; padding-top: 0 !important; }
    body .ps-site-badge { font-size: .64rem !important; padding: 4px 8px !important; }
}