/**
 * WWPosts Design System — Phase 2 discovery surfaces
 * ==================================================
 * Feed post cards, show content cards, map chrome, ad slots.
 * Additive token chrome — structure/layout stay in site.css.
 */

/* -------------------------------------------------------------------------- */
/* Feed post cards (.cp-card / x-post-card)                                     */
/* Same outer glow as deep-well fields (--cp-field-glow / --cp-field-glow-focus)*/
/* overflow must stay visible or the glow is clipped (unlike inputs).          */
/* -------------------------------------------------------------------------- */
.cp-card.card {
    --cp-card-border-width: 3px;
    --cp-card-cat: var(--cp-border-strong);
    background: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: var(--cp-card-border-width) solid var(--cp-card-cat, var(--cp-border)) !important;
    border-radius: var(--cp-radius-lg) !important;
    /* CRITICAL: visible — overflow:hidden clips outer glow (same as deep-well inputs) */
    overflow: visible !important;
    /* Rest state: category border only — NO outer glow (like Category field on newstyles) */
    box-shadow: var(--cp-shadow-md) !important;
    outline: none !important;
    transition:
        transform var(--cp-duration-med) var(--cp-ease-out),
        box-shadow var(--cp-duration-med) var(--cp-ease-out),
        border-color var(--cp-duration-fast) ease !important;
}

/* Business / ad shells must clip the hero — overflow:visible above squares top corners */
.cp-card.card.cp-card--business,
.cp-business-card .cp-card.card,
.cp-business-card__shell.cp-card {
    overflow: hidden !important;
}

.cp-card.cp-card--event { --cp-card-cat: var(--cp-cat-event); }
.cp-card.cp-card--trail { --cp-card-cat: var(--cp-cat-trail); }
.cp-card.cp-card--spot { --cp-card-cat: var(--cp-cat-spot); }
.cp-card.cp-card--track { --cp-card-cat: var(--cp-cat-track); }
.cp-card.cp-card--product { --cp-card-cat: var(--cp-cat-product); }
.cp-card.cp-card--compare { --cp-card-cat: var(--cp-cat-compare); }
.cp-card.cp-card--market { --cp-card-cat: var(--cp-cat-market, var(--cp-cat-marketplace)); }
.cp-card.cp-card--business { --cp-card-cat: var(--cp-cat-business, #c4a574); }

.cp-card.cp-card--event,
.cp-card.cp-card--trail,
.cp-card.cp-card--spot,
.cp-card.cp-card--track,
.cp-card.cp-card--product,
.cp-card.cp-card--compare,
.cp-card.cp-card--market,
.cp-card.cp-card--business {
    border-color: var(--cp-card-cat) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

/* Not Active (unpublished) — dashed category border so owner/staff cards read as inactive */
.cp-card.card.cp-card--not-active,
.cp-card.cp-card--not-active {
    border-style: dashed !important;
}

.card.cp-content-card.cp-content-card--not-active {
    border-style: dashed !important;
}

/* Clip media only — not the card shell.
   Radius is the shell's minus the frame; a hardcoded subtraction drifts the
   moment --cp-card-border-width changes and shows as a crescent of card
   surface in the media's top corners. */
.cp-card .cp-card-img-wrap {
    overflow: hidden !important;
    border-top-left-radius: calc(var(--cp-radius-lg, 1rem) - var(--cp-card-border-width, 3px));
    border-top-right-radius: calc(var(--cp-radius-lg, 1rem) - var(--cp-card-border-width, 3px));
    border-bottom: 1px solid var(--cp-hairline);
    background-color: var(--cp-sunken) !important;
}

/* Hover: lift + slight category glow (weaker than selected / ns-field:focus) */
.cp-card.card:hover:not(.cp-card--selected):not(.cp-card--active):not(.cp-card-selected):not(.cp-card--pin-focus) {
    transform: translateY(-4px);
    border-color: var(--cp-card-cat, var(--cp-border-strong)) !important;
    box-shadow:
        var(--cp-shadow-lg),
        0 0 0 2px color-mix(in srgb, var(--cp-card-cat) 28%, transparent),
        0 0 14px color-mix(in srgb, var(--cp-card-cat) 32%, transparent) !important;
}

/*
 * Selected = /dev/design-newstyles .ns-field--well:focus outer bloom
 *   box-shadow: 0 0 0 3px rgba(61,124,255,.32), 0 0 18px rgba(61,124,255,.18)
 * Category-tinted + boosted so Spots purple (etc.) reads clearly on dark chrome.
 * JS also sets inline box-shadow !important as a cascade backstop.
 */
.cp-card.card.cp-card--selected,
.cp-card.card.cp-card--active,
.cp-card.card.cp-card-selected,
.cp-card.card.cp-card--pin-focus,
.cp-card.cp-card--selected,
.cp-card.cp-card--active,
.cp-card.cp-card-selected,
.cp-card.cp-card--pin-focus,
.cp-card.card.cp-card--selected:hover,
.cp-card.card.cp-card--active:hover,
.cp-card.card.cp-card-selected:hover,
.cp-card.card.cp-card--pin-focus:hover,
.cp-card.cp-card--spot.cp-card--selected,
.cp-card.cp-card--spot.cp-card--pin-focus,
.cp-card.cp-card--event.cp-card--selected,
.cp-card.cp-card--trail.cp-card--selected,
.cp-card.cp-card--market.cp-card--selected {
    overflow: visible !important;
    border-color: var(--cp-card-cat) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--cp-card-cat) 55%, transparent),
        0 0 18px color-mix(in srgb, var(--cp-card-cat) 55%, transparent),
        0 0 36px color-mix(in srgb, var(--cp-card-cat) 35%, transparent) !important;
    z-index: 6;
    position: relative;
}

html[data-cp-theme="dark"] .cp-card.card,
html[data-cp-theme="dark"] .cp-card {
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
}

.cp-card .card-body,
.cp-card .cp-card-content-col > .card-body,
.cp-card.cp-card--market > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cp-ink);
    /* Let meta + 2-line description show fully (was clipped by fixed aspect-ratio + overflow). */
    aspect-ratio: auto !important;
    overflow: visible !important;
    flex-grow: 1 !important;
    min-height: 0;
    justify-content: flex-start !important;
}

.cp-card .cp-post-card__title,
.cp-card .cp-card-title-link {
    color: var(--cp-ink) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cp-card .cp-post-card__body-excerpt {
    color: var(--cp-ink-muted) !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: none;
}
.cp-card.cp-card--see-more .cp-post-card__body-excerpt {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-height: none;
}

.cp-card .cp-post-card__meta-text,
.cp-card .text-body-secondary {
    color: var(--cp-ink-muted) !important;
}

.cp-card .card-footer,
.cp-card .cp-card-action-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--cp-hairline) !important;
}

/* -------------------------------------------------------------------------- */
/* Show-page content card — same surface + category border as feed postcards   */
/* -------------------------------------------------------------------------- */
.card.cp-content-card {
    --cp-card-border-width: 3px;
    --cp-card-cat: var(--cp-border-strong);
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: var(--cp-card-border-width) solid var(--cp-card-cat, var(--cp-border)) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-md) !important;
    overflow: hidden;
}

.card.cp-content-card.cp-content-card--event { --cp-card-cat: var(--cp-cat-event); }
.card.cp-content-card.cp-content-card--trail { --cp-card-cat: var(--cp-cat-trail); }
.card.cp-content-card.cp-content-card--spot { --cp-card-cat: var(--cp-cat-spot); }
.card.cp-content-card.cp-content-card--track { --cp-card-cat: var(--cp-cat-track); }
.card.cp-content-card.cp-content-card--product { --cp-card-cat: var(--cp-cat-product); }
.card.cp-content-card.cp-content-card--compare { --cp-card-cat: var(--cp-cat-compare); }
.card.cp-content-card.cp-content-card--market { --cp-card-cat: var(--cp-cat-market, var(--cp-cat-marketplace)); }

.card.cp-content-card.cp-content-card--event,
.card.cp-content-card.cp-content-card--trail,
.card.cp-content-card.cp-content-card--spot,
.card.cp-content-card.cp-content-card--track,
.card.cp-content-card.cp-content-card--product,
.card.cp-content-card.cp-content-card--compare,
.card.cp-content-card.cp-content-card--market {
    border-color: var(--cp-card-cat) !important;
}

.card.cp-content-card .card-header {
    border-bottom: 1px solid var(--cp-border) !important;
    box-shadow: var(--cp-elev-lip);
}

.card.cp-content-card .list-group-item {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cp-ink);
    border-color: var(--cp-hairline) !important;
}

.card.cp-content-card .card-footer.cp-action-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--cp-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Map + ads shell                                                             */
/* -------------------------------------------------------------------------- */
.cp-map-template-map-canvas-wrap,
.cp-map.cp-map-hero,
.cp-map-template-map-card .cp-map-template-map-canvas {
    border-radius: var(--cp-radius-md);
}

/* The map canvas is its own artwork — no frame, no fill, no shadow around it.
   Only the rounding + clip stay so Google's tiles honour the corner radius.
   (A tinted hairline here read as a stray cyan/blue outline on every map page.) */
.cp-map-template-map-canvas-wrap {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden;
}

/* Boxless wrappers: without this, an auto-height single-child band becomes the
   sticky shell's containing block and is exactly as tall as the shell itself —
   leaving no room for it to actually stick while the page scrolls. */
.cp-feed-map-region,
.cp-form-map-preview-band {
    display: contents;
}

.cp-map-template-shell {
    --cp-map-ad-min-width: 180px;
    --cp-map-ad-tablet-width: clamp(220px, 28vw, 320px);
    --cp-map-ad-max-width: 370px;
    --cp-map-ad-action-height: 78px;
    border-radius: 1rem;
    padding: .75rem;
    backdrop-filter: none;
}

.cp-map-template-map-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

.cp-map-template-map-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    padding: .75rem;
}

.cp-map-template-map-card > .cp-map-template-map-wrap,
.cp-map-template-map-card > .cp-events-map-wrap,
.cp-map-template-map-card > .cp-favorites-map-wrap,
.cp-map-template-map-card > .cp-map-hero-wrap,
.cp-map-template-map-card > .cp-watch-map-wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Map canvas grows/shrinks with the vertical resize handle (absolute-positioned
   tiles need a flex-sized wrap, not only min-height). */
.cp-map-template-map-card > :is(.cp-map-template-map-wrap, .cp-events-map-wrap, .cp-favorites-map-wrap, .cp-map-hero-wrap, .cp-watch-map-wrap) > .cp-map-template-map-canvas-wrap {
    flex: 1 1 auto;
    min-height: 0;
}

.cp-map-template-map-card > :is(.cp-map-template-map-wrap, .cp-events-map-wrap, .cp-favorites-map-wrap, .cp-map-hero-wrap, .cp-watch-map-wrap) > .cp-map-template-controls {
    flex: 0 0 auto;
}

/* User-resized map: decouple side ads from row stretch. Bootstrap's
   .align-items-stretch uses !important — inline flex-start in JS cannot win.
   html.cp-has-saved-map-height is set from localStorage before first paint so
   every map page restores the same height (one site-wide key, not per mapId). */
[data-cp-map-template] > .row.cp-map-template-row--map-sized,
html.cp-has-saved-map-height [data-cp-map-template] > .row {
    align-items: flex-start !important;
}

html.cp-has-saved-map-height .cp-map-template-map-panel {
    height: var(--cp-map-user-height) !important;
    flex: 0 0 auto !important;
}

.cp-map-template-shell--map-only > .row.align-items-stretch {
    justify-content: stretch;
}

.cp-map-template-shell--map-only > .row.align-items-stretch > .cp-map-template-map-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cp-map-resize-handle {
    position: relative;
    z-index: 100;
    flex: 0 0 16px;
    width: 100%;
    height: 16px;
    background: transparent;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-map-resize-handle:hover {
    background: transparent;
}

.cp-map-resize-handle::after {
    content: '';
    display: block;
    width: 42px;
    height: 2px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 2px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

[data-cp-theme="dark"] .cp-map-resize-handle::after {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 0 rgba(255, 255, 255, 0.4);
}

.cp-map-template-pin-toggle {
    position: absolute;
    top: 3.6rem;
    left: .55rem;
    z-index: 15;
    width: 2.35rem;
    height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    background: #fff;
    color: #495057;
    font-size: .95rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.cp-map-template-pin-toggle:hover { transform: scale(1.08); }

.cp-map-template-pin-toggle i {
    transition: transform .15s ease;
    transform: rotate(45deg);
}

.cp-map-template-pin-toggle[aria-pressed="true"] i {
    transform: rotate(0deg);
}

.cp-map-template-pin-toggle[aria-pressed="true"] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--cp-accent-ink, #031018);
}

[data-cp-theme="dark"] .cp-map-template-pin-toggle {
    background: #2a2f3a;
    border-color: rgba(255, 255, 255, .25);
    color: #e5eefc;
}

[data-cp-theme="dark"] .cp-map-template-pin-toggle[aria-pressed="true"] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--cp-accent-ink, #031018);
}

/* "Search this area" overlay button — centered at the top of the map canvas wrap.
   Shown by bindViewportFeed when the user pans/zooms after the initial load.
   z-index 15 matches .cp-map-template-pin-toggle so both sit above the map canvas. */
.cp-map-redo-search-btn {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: 2rem;
    border: 1px solid rgba(0, 0, 0, .18);
    background: #fff;
    color: #212529;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.cp-map-redo-search-btn:hover {
    background: #f0f4f8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
    transform: translateX(-50%) scale(1.03);
}

/* d-none is set by Bootstrap; this block ensures the button never participates
   in layout when hidden (overrides the inline-flex display). */
.cp-map-redo-search-btn.d-none {
    display: none !important;
}

[data-cp-theme="dark"] .cp-map-redo-search-btn {
    background: #2a2f3a;
    border-color: rgba(255, 255, 255, .22);
    color: #e5eefc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

[data-cp-theme="dark"] .cp-map-redo-search-btn:hover {
    background: #353c4e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .65);
    transform: translateX(-50%) scale(1.03);
}

.cp-map-template-show-me-label,
.cp-map-template-show-me-label i { color: #e53935 !important; }

.cp-map-template-show-me-toggle { border-color: rgba(229, 57, 53, .65) !important; }

.cp-map-template-show-me-toggle:checked {
    background-color: #e53935 !important;
    border-color: #e53935 !important;
}

@media (max-width: 767.98px) {
    .cp-map-template-shell:not(.cp-map-template-shell--home-feed) {
        padding: .2rem;
    }

    .cp-map-template-shell.mb-2 {
        margin-bottom: .35rem !important;
    }

    .cp-map-template-shell > .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        margin: 0;
    }

    .cp-map-template-shell > .row > * {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
    }

    .cp-map-template-map-col {
        padding: 0 !important;
    }

    .cp-map-template-shell:not(.cp-map-template-shell--home-feed) .cp-map-template-map-card {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0;
    }

    .cp-map-template-map-canvas-wrap {
        min-height: 184px;
    }

    .cp-map-template-controls {
        gap: .42rem !important;
        padding: .18rem .25rem 0;
    }
}

@media (max-width: 575.98px) {
    .cp-map-template-shell:not(.cp-map-template-shell--home-feed) {
        padding: .12rem;
        border-radius: .68rem;
    }

    .cp-map-template-shell:not(.cp-map-template-shell--home-feed) .cp-map-template-map-card {
        padding: 0;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: .58rem;
    }

    .cp-map-template-map-canvas-wrap {
        min-height: 168px;
        border-radius: .58rem;
        -webkit-clip-path: inset(0 round .58rem);
        clip-path: inset(0 round .58rem);
    }

    .cp-map-template-controls {
        gap: .35rem !important;
        padding: .14rem .2rem 0;
    }

    .cp-map-template-controls .form-check-label {
        font-size: .68rem;
    }
}

.cp-map-template-controls {
    gap: 0.5rem;
}

.cp-map-template-controls .btn,
.cp-map-template-controls .form-check {
    border-radius: var(--cp-radius-sm);
}

.cp-map-ad:not(:has(> .cp-ad-card-root)):not(:has(> .cp-business-card)):not(:has(> .cp-card)):not(:has(> .cp-sponsored-card)):not(:has(> .cp-ad-slot-cta)):not(:has(> a.cp-ad-slot-cta)) {
    border: 1px dashed var(--cp-border-strong) !important;
    border-radius: var(--cp-radius-md) !important;
    background: color-mix(in srgb, var(--cp-sunken) 80%, transparent) !important;
    color: var(--cp-ink-muted);
}

/* Ad / business cards — one face color (no grey details slab).
   Map ad shells use Smart Zoom --cp-ad-fr-bg via site.css — exclude them from --cp-raised. */
.cp-business-card > .card:not(.cp-map-slot-ad-card__shell),
.cp-sponsored-card,
.cp-ad-card-root .card:not(.cp-map-slot-ad-card__shell) {
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
    border-radius: var(--cp-radius-md) !important;
    /* Do not force overflow:hidden / flat shadow — clips deep-well-style field glow */
    overflow: visible !important;
}

.cp-map-slot-ad-card:not([data-cp-ad-card]) {
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
    border-radius: var(--cp-radius-md) !important;
    overflow: visible !important;
}

.cp-business-card > .card.cp-map-slot-ad-card__shell,
.cp-map-slot-ad-card[data-cp-ad-card],
.cp-ad-card-root .card.cp-map-slot-ad-card__shell {
    border-radius: var(--cp-radius-md) !important;
}

/* Ad card action bar — equal-width Hide / Pin / … buttons (grid beats flex content sizing) */
.cp-map-slot-ad-card__actions.cp-card-action-footer,
.cp-map-slot-ad-card[data-cp-ad-card] .cp-card-action-footer,
.cp-ad-card-root .cp-map-slot-ad-card__actions.cp-card-action-footer,
.cp-business-card .cp-card-action-footer {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--cp-card-action-btn-min, 5.25rem), 1fr)) !important;
    gap: var(--cp-card-action-gap, 0.3rem) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.cp-map-slot-ad-card__actions.cp-card-action-footer > .cp-card-action-col,
.cp-business-card .cp-card-action-footer > .cp-card-action-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.cp-map-slot-ad-card__actions.cp-card-action-footer > .cp-card-action-col > .btn,
.cp-map-slot-ad-card__actions.cp-card-action-footer > .cp-card-action-col > a.btn,
.cp-business-card .cp-card-action-footer > .cp-card-action-col > .btn,
.cp-business-card .cp-card-action-footer > .cp-card-action-col > a.btn {
    width: 100% !important;
    max-width: none !important;
}

.cp-business-card > .card.cp-card--business {
    --cp-card-cat: var(--cp-cat-business, #c4a574);
    border: 3px solid var(--cp-card-cat) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-business-card__body:not(.cp-map-slot-ad-card__body),
.cp-ad-card-root .card-body:not(.cp-map-slot-ad-card__body),
.cp-business-card .card-body:not(.cp-map-slot-ad-card__body),
.cp-business-card .card-footer:not(.cp-map-slot-ad-card__actions),
.cp-ad-card-root .card-footer:not(.cp-map-slot-ad-card__actions) {
    background: transparent !important;
    background-color: transparent !important;
}

.cp-business-card > .card:hover:not(.cp-card--selected):not(.cp-card--pin-focus):not(.cp-card--active),
.cp-sponsored-card:hover,
.cp-ad-card-root .card:hover {
    border-color: var(--cp-card-cat, var(--cp-border-strong)) !important;
    box-shadow:
        var(--cp-shadow-lg),
        0 0 0 2px color-mix(in srgb, var(--cp-card-cat, var(--cp-cat-business, #c4a574)) 28%, transparent),
        0 0 14px color-mix(in srgb, var(--cp-card-cat, var(--cp-cat-business, #c4a574)) 32%, transparent) !important;
}

.cp-business-card > .card.cp-card--selected,
.cp-business-card > .card.cp-card--pin-focus,
.cp-business-card > .card.cp-card--active {
    border-color: var(--cp-card-cat, #c4a574) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cp-card-cat, #c4a574) 70%, #fff),
        0 0 0 0.35rem color-mix(in srgb, var(--cp-card-cat, #c4a574) 40%, transparent),
        0 0 28px color-mix(in srgb, var(--cp-card-cat, #c4a574) 75%, transparent),
        0 0 52px color-mix(in srgb, var(--cp-card-cat, #c4a574) 45%, transparent) !important;
}

.cp-business-card__ad-badge,
.cp-card-img-type-badge {
    border-radius: var(--cp-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------------------------------- */
/* Feed bands                                                                  */
/* -------------------------------------------------------------------------- */
.cp-home-feed-band,
.cp-recent-shell.cp-home-feed-band,
.cp-home-section {
    background-color: var(--cp-page-surface-bg, var(--cp-base)) !important;
}

.cp-highlight-card {
    box-shadow: var(--cp-shadow-sm) !important;
    border-radius: var(--cp-radius-md);
}

@media (prefers-reduced-motion: reduce) {
    .cp-card.card,
    .cp-card.card:hover,
    .cp-business-card > .card:hover,
    .cp-sponsored-card:hover {
        transition: none !important;
        transform: none !important;
    }
}