/**
 * Tour Card V2 — Airbnb-frameless, refined for mobile-first.
 * Image-led, no card chrome. Typography carries the hierarchy.
 *
 * Iteration notes (2026-05-05):
 * - Title cascade override uses :where(h3) to keep specificity 0 so future
 *   stylesheet overrides still work without an arms race.
 * - Filled-white wishlist circle (28px) over a 16px stroked heart — readable
 *   on any image at any contrast.
 * - Press state on the link gives iOS-native tap feedback that replaces the
 *   missing card border / shadow affordance.
 * - Card gap 32px because frameless layouts need air, not less.
 */

.pca-tour-card-v2 {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0 0 32px;
    padding: 0;
    box-shadow: none;
    transition: opacity 150ms ease;
}

.pca-tour-card-v2__link {
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms ease;
    transform-origin: center top;
}

.pca-tour-card-v2__link:hover,
.pca-tour-card-v2__link:focus,
.pca-tour-card-v2__link:active {
    color: inherit;
    text-decoration: none;
}

/* Press state — iOS-native tap feedback for a frameless card */
.pca-tour-card-v2__link:active {
    transform: scale(0.985);
    opacity: 0.92;
}

.pca-tour-card-v2__link:focus-visible {
    outline: 2px solid var(--color-primary, #324fbe);
    outline-offset: 4px;
    border-radius: 14px;
}

/* === Image (4:3 aspect, 12px rounded — image is the visual anchor) === */
.pca-tour-card-v2__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f3f4f6;
    border-radius: 12px;
    isolation: isolate;
    transition: transform 200ms ease;
}

/* Press the image too (subtle, in addition to the link scale) */
.pca-tour-card-v2__link:active .pca-tour-card-v2__media {
    transform: scale(0.985);
}

.pca-tour-card-v2__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
    .pca-tour-card-v2__link:hover .pca-tour-card-v2__img {
        transform: scale(1.02);
    }
}

/* === Top overlays: urgency (left), wishlist (right) === */
.pca-tour-card-v2__overlay-top {
    position: absolute;
    inset: 12px 12px auto 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    gap: 8px;
    z-index: 1;
}

.pca-tour-card-v2__urgency {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-primary-orange, #FF6B35);
    color: #fff;
    font-family: var(--font-body, "Inter");
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

/* Wishlist heart — 28px filled white circle, 16px stroked heart */
.pca-tour-card-v2__wishlist {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #111827;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, transform 150ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.pca-tour-card-v2__wishlist svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 150ms ease, stroke 150ms ease;
}

.pca-tour-card-v2__wishlist:hover,
.pca-tour-card-v2__wishlist:focus-visible {
    background: #fff;
}

.pca-tour-card-v2__wishlist:hover svg,
.pca-tour-card-v2__wishlist:focus-visible svg {
    fill: #ef4444;
    stroke: #ef4444;
}

.pca-tour-card-v2__wishlist:active {
    transform: scale(0.92);
}

.pca-tour-card-v2__wishlist:focus-visible {
    outline: 2px solid var(--color-primary, #324fbe);
    outline-offset: 2px;
}

/* === Bottom-left overlay: availability badge (only when set) === */
.pca-tour-card-v2__availability {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--font-body, "Inter");
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.pca-tour-card-v2__availability--mustdo {
    background: var(--color-primary, #324fbe);
}

/* === Content (no padding box, just type rhythm) === */
.pca-tour-card-v2__content {
    margin-top: 10px;
}

/* Title — must beat `type-overrides.css h3 { font-size: 19px !important }`.
   That rule lives in `@layer utilities`. CSS spec inverts !important
   precedence inside layers: layered !important BEATS unlayered !important.
   So we have to be in the SAME layer (utilities) and declared LATER in
   source order. tour-card-v2.css enqueues after type-overrides.css.
   See https://drafts.csswg.org/css-cascade-5/#cascading */
@layer utilities {
    .pca-tour-card-v2 h3.pca-tour-card-v2__title {
        font-family: var(--font-display, "Plus Jakarta Sans") !important;
        font-size: 15px !important;
        font-weight: 590 !important;
        line-height: 1.3 !important;
        letter-spacing: -0.02em !important;
        color: #111827 !important;
        margin: 0 0 4px !important;
        text-rendering: optimizeLegibility;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Screen-reader-only text (defines the .screen-reader-text class our render
   uses for price suffix accessibility). Standard WCAG-compliant pattern. */
.pca-tour-card-v2 .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pca-tour-card-v2__meta {
    font-family: var(--font-body, "Inter");
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: #6b7280;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pca-tour-card-v2__meta-sep {
    margin: 0 5px;
    color: #d1d5db;
}

/* === Footer row: rating left, price right (single line) === */
.pca-tour-card-v2__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.pca-tour-card-v2__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body, "Inter");
    font-size: 14px;
    line-height: 1.2;
}

.pca-tour-card-v2__rating-star {
    color: #111827;
    font-size: 13px;
    line-height: 1;
}

.pca-tour-card-v2__rating-value {
    color: #111827;
    font-weight: 600;
}

.pca-tour-card-v2__rating-count {
    color: #6b7280;
    font-weight: 400;
}

.pca-tour-card-v2__price {
    font-family: var(--font-display, "Plus Jakarta Sans");
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pca-tour-card-v2__price-plus {
    color: #6b7280;
    font-weight: 600;
    margin-left: 1px;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .pca-tour-card-v2__link,
    .pca-tour-card-v2__media,
    .pca-tour-card-v2__img,
    .pca-tour-card-v2__wishlist,
    .pca-tour-card-v2__wishlist svg {
        transition: none;
    }
    .pca-tour-card-v2__link:active {
        transform: none;
        opacity: 0.85;
    }
}

/* === Tablet/desktop refinements === */
@media (min-width: 768px) {
    .pca-tour-card-v2__price {
        font-size: 18px;
    }
}
@layer utilities {
    @media (min-width: 768px) {
        .pca-tour-card-v2 h3.pca-tour-card-v2__title {
            font-size: 16px !important;
        }
    }
}

/* ============================================================
   VARIANT: --featured (LARGE, vertical, in a horizontal scroller)
   ============================================================
   Used for the curated carousel above the main grid. Pale tint
   background + interior padding signal "editor's pick" tier.
   Mirrors GYG's "Top pick" featured cards pattern.
*/
.pca-tour-card-v2--featured {
    width: 306px;
    flex: 0 0 306px;
    margin: 0;
    background: var(--color-tropical-sand, #F8F5F1);
    border-radius: 16px;
    padding: 8px 8px 14px;
    box-sizing: border-box;
    scroll-snap-align: start;
}

.pca-tour-card-v2--featured .pca-tour-card-v2__media {
    border-radius: 10px;
    aspect-ratio: 4 / 3;
}

.pca-tour-card-v2--featured .pca-tour-card-v2__content {
    margin-top: 12px;
    padding: 0 4px;
}

/* Featured tier: title can wrap to 2 lines comfortably, more weight */
@layer utilities {
    .pca-tour-card-v2--featured h3.pca-tour-card-v2__title {
        font-size: 16px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
    }
}

.pca-tour-card-v2--featured .pca-tour-card-v2__price {
    font-size: 18px;
    color: #111827;
}

/* Sale price treatment (optional, GYG-style strikethrough) */
.pca-tour-card-v2__price-was {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    text-decoration: line-through;
    margin-right: 4px;
    letter-spacing: 0;
}

.pca-tour-card-v2--featured .pca-tour-card-v2__price-was + .pca-tour-card-v2__price-now {
    color: #d33b48; /* deal red, only when paired with strikethrough */
}

/* Horizontal scroller wrapper (mobile pattern). Desktop converts to a grid
   in the @media block below. */
.pca-tour-card-v2-scroller {
    display: flex;
    gap: 12px;
    padding: 0 16px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pca-tour-card-v2-scroller::-webkit-scrollbar { display: none; }
.pca-tour-card-v2-scroller > * { scroll-snap-align: start; }

/* Mobile-only: edge-bleed so the first card aligns to the viewport edge and
   the next card peeks. Desktop drops this and uses a contained grid. */
@media (max-width: 767px) {
    .pca-tour-card-v2-scroller { margin: 0 -16px; }
}

/* ============================================================
   VARIANT: --compact (SMALL, horizontal, image-left)
   ============================================================
   Used for the main vertical list. Image left 120×120, content
   right. Card height ~156px.
*/
.pca-tour-card-v2--compact {
    margin-bottom: 16px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__link {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: stretch;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__media {
    aspect-ratio: 1 / 1;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    align-self: center;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__overlay-top {
    inset: 6px 6px auto 6px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__wishlist {
    width: 24px;
    height: 24px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__wishlist svg {
    width: 14px;
    height: 14px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__urgency {
    font-size: 10px;
    padding: 2px 7px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__availability {
    left: 6px;
    bottom: 6px;
    font-size: 10px;
    padding: 3px 8px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__content {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 2px;
}

@layer utilities {
    .pca-tour-card-v2--compact h3.pca-tour-card-v2__title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 590 !important;
        margin: 0 0 2px !important;
    }
}

.pca-tour-card-v2--compact .pca-tour-card-v2__meta {
    font-size: 12px;
    margin: 0 0 4px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__footer {
    margin-top: auto;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__rating {
    font-size: 12px;
}

.pca-tour-card-v2--compact .pca-tour-card-v2__price {
    font-size: 14px;
}

/* Featured-section header (used in template above the scroller) */
.pca-tour-card-v2-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 16px;
    margin: 16px 0 12px;
}

.pca-tour-card-v2-section-header h2 {
    font-family: var(--font-display, "Plus Jakarta Sans");
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #111827;
    letter-spacing: -0.01em;
}

.pca-tour-card-v2-section-header__see-all {
    font-family: var(--font-body, "Inter");
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary, #324fbe);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   DESKTOP V2 LAYOUT — fixes from /frontend-design audit
   ============================================================
   Mobile is the source of truth; desktop converts the carousel
   pattern into proper grids inside a centered 1200px container.
*/

/* D — Container width consistency: header + scroller + list all
   share a 1200px max-width, centered, with matching horizontal
   padding. Eliminates the "header flushes left, cards center" mismatch. */
@media (min-width: 768px) {
    .pca-tour-card-v2-section-header,
    .pca-tour-card-v2-scroller,
    .pca-excursions-v2-list {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .pca-tour-card-v2-section-header { padding: 0 16px; }
}

/* B — Featured carousel converts to a 4-up grid on desktop.
   Same DOM, no scroll affordance needed when the canvas is wide. */
@media (min-width: 768px) {
    .pca-tour-card-v2-scroller {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        padding: 0 16px 8px;
        overflow: visible;
        scroll-snap-type: none;
    }
    .pca-tour-card-v2--featured {
        width: auto;
        flex: initial;
        scroll-snap-align: none;
    }
    .pca-tour-card-v2--featured .pca-tour-card-v2__media {
        aspect-ratio: 4 / 3;
    }
}

/* C — All-tours grid density at desktop tiers + flip compact card to
   vertical layout (image-on-top) so each grid cell looks like a real
   card, not a stretched horizontal strip. */
@media (min-width: 768px) {
    .pca-excursions-v2-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__link {
        display: block;
        grid-template-columns: none;
        gap: 0;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__media {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        align-self: auto;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__overlay-top {
        inset: 12px 12px auto 12px;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__wishlist {
        width: 28px; height: 28px;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__wishlist svg {
        width: 16px; height: 16px;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__availability {
        left: 12px; bottom: 12px; font-size: 12px; padding: 5px 11px;
    }
    .pca-tour-card-v2--compact .pca-tour-card-v2__content {
        margin-top: 10px;
    }
}
@layer utilities {
    @media (min-width: 768px) {
        .pca-tour-card-v2--compact h3.pca-tour-card-v2__title {
            font-size: 15px !important;
            margin: 0 0 4px !important;
        }
    }
}
@media (min-width: 768px) {
    .pca-tour-card-v2--compact .pca-tour-card-v2__meta { font-size: 13px; margin: 0 0 4px; }
    .pca-tour-card-v2--compact .pca-tour-card-v2__rating { font-size: 13px; }
    .pca-tour-card-v2--compact .pca-tour-card-v2__price { font-size: 16px; }
}

@media (min-width: 1024px) {
    .pca-excursions-v2-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 20px;
    }
}
@media (min-width: 1280px) {
    .pca-excursions-v2-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .pca-tour-card-v2-scroller {
        /* Keep featured carousel at 4-up regardless of viewport above 1280 */
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A safety net — if any future mobile-only -16px margin slips outside its
   media query, it can't reintroduce horizontal page scroll. Cheap insurance. */
.pca-excursions-v2-wrap { overflow-x: clip; }

/* ============================================================
   MOBILE UX TIGHTENING — frontend-design audit + Viator decode
   ============================================================
   Goal: ~100px less above-fold chrome, brand-blue + brand-orange
   visible above fold, editorial section header punctuation, primary
   CTA wears the brand. Mobile-only unless noted.
*/

/* #1 — Kill the 86px H1→filter gap. The hidden subtitle was reserving
   flow margin on .pca-title-section even with display:none.
   Also fix: H1 was flush-left at x=0 while every other element on the page
   had 16px left padding. Add the same gutter so H1 visually aligns. */
body.pca-excursions-v2 .pca-title-section {
    padding: 8px 16px 0 !important;
    margin-bottom: 0 !important;
}
/* .pca-meta-row collapsed entirely on V2 because both children
   (.pca-results-compact + .pca-sort-btn) are now hidden — see rule
   further down in this file. */
body.pca-excursions-v2 .pca-meta-row {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

/* Hide on V2 (all viewports):
   - "42 results" label — chip row already telegraphs filtered state.
   - "Recommended" sort dropdown — disabled 2026-05-10 (sort sheet doesn't
     persist selection / wasn't reordering results as expected).
   - The parent .pca-meta-row collapses to zero height because both children
     are hidden, no awkward empty-space layout.
   To re-enable sort: remove the .pca-sort-btn / #pca-sort-sheet rules below. */
body.pca-excursions-v2 .pca-result-count,
body.pca-excursions-v2 .pca-toolbar-meta__count,
body.pca-excursions-v2 .pca-results-compact,
body.pca-excursions-v2 .pca-results-count,
body.pca-excursions-v2 .pca-sort-btn,
body.pca-excursions-v2 #pca-sort-sheet { display: none !important; }

/* Collapse the now-empty .pca-meta-row so it doesn't reserve vertical space. */
body.pca-excursions-v2 .pca-meta-row {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
}

/* #2 — Featured card: tighten paddings + content rhythm. Card target ~310-320px. */
.pca-tour-card-v2--featured {
    padding: 6px 6px 12px;
}
.pca-tour-card-v2--featured .pca-tour-card-v2__content {
    margin-top: 8px;
}
.pca-tour-card-v2--featured .pca-tour-card-v2__footer {
    margin-top: 6px;
}

/* #3 — Featured price: brand-blue, +2px to anchor commercial weight.
   Compact prices stay neutral (less hierarchy fight). */
.pca-tour-card-v2--featured .pca-tour-card-v2__price {
    font-size: 20px;
    color: var(--color-primary, #324fbe);
}
.pca-tour-card-v2--featured .pca-tour-card-v2__price-plus {
    color: var(--color-primary, #324fbe);
    opacity: 0.7;
}

/* #4 — Heart visual weight: pull inward 4px, shrink circle to 26px so it
   reads as a hint, not a primary action. Keeps the next-card peek dominant. */
.pca-tour-card-v2--featured .pca-tour-card-v2__overlay-top {
    inset: 10px 14px auto 10px;
}
.pca-tour-card-v2__wishlist {
    width: 26px;
    height: 26px;
}
.pca-tour-card-v2__wishlist svg {
    width: 14px;
    height: 14px;
}

/* #5 — Section headers: editorial serif + sunset-orange accent rule.
   This is the single biggest brand-identity moment above fold. Stops the
   "generic OTA template" feel. */
.pca-tour-card-v2-section-header h2 {
    font-family: var(--font-serif, "Spectral"), Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.pca-tour-card-v2-section-header h2::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 3px;
    margin-right: 10px;
    background: var(--color-primary-orange, #FF6B35);
    vertical-align: middle;
    border-radius: 2px;
}

/* #6 — Show More button: solid brand-blue (was outlined neutral pill).
   Carries the brand identity into the primary list-end CTA. */
.pca-show-more__btn {
    background: var(--color-primary, #324fbe);
    color: #fff;
    border: 0;
    padding: 14px 28px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(50, 79, 190, 0.18);
}
.pca-show-more__btn:hover,
.pca-show-more__btn:focus-visible {
    background: var(--color-primary-hover, #2a42a1);
    color: #fff;
}
.pca-show-more__btn:focus-visible {
    outline: 2px solid var(--color-primary-orange, #FF6B35);
    outline-offset: 3px;
}
.pca-show-more__btn[aria-busy="true"]::before {
    border-color: rgba(255, 255, 255, 0.6);
    border-right-color: transparent;
}

/* #8 — Compact card meta: add a third item that's a CONVERSION LEVER
   (free cancellation) not just metadata. Viator + GYG both do this. The
   PHP render already emits "Punta Cana · 12h" — extending the meta line
   is handled in render.php, no CSS change needed beyond width hint. */
.pca-tour-card-v2__meta {
    /* Allow up to 2 lines on compact cards if the third meta-item pushes wrap */
}
.pca-tour-card-v2--compact .pca-tour-card-v2__meta {
    /* keep nowrap+ellipsis on compact (single-line meta), the third item
       trades off via render.php truncation if too long */
}

/* #9 — Featured card height target via image aspect-ratio + padding tweaks
   above. Combined with #2 padding compression, card lands ~310-320px. */

/* ============================================================
   SHOW MORE button (replaces traditional paginator)
   ============================================================
   Pattern: button flanked by horizontal lines (GYG style).
   Mobile auto-loads via IntersectionObserver; desktop is click-only.
   Hidden when last page reached (JS sets `hidden` attr).
*/
.pca-excursions-v2-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 0 16px;
}

.pca-excursions-v2-show-more[hidden] { display: none; }

.pca-show-more__line {
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
    min-width: 40px;
}

.pca-show-more__btn {
    flex: 0 0 auto;
    appearance: none;
    background: #fff;
    color: #111827;
    font-family: var(--font-body, "Inter");
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    padding: 12px 24px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.pca-show-more__btn:hover,
.pca-show-more__btn:focus-visible {
    background: #f9fafb;
    border-color: #9ca3af;
}

.pca-show-more__btn:focus-visible {
    outline: 2px solid var(--color-primary, #324fbe);
    outline-offset: 3px;
}

.pca-show-more__btn:active {
    transform: scale(0.98);
}

.pca-show-more__btn[disabled],
.pca-show-more__btn[aria-busy="true"] {
    cursor: progress;
    opacity: 0.7;
}

.pca-show-more__btn[aria-busy="true"]::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    vertical-align: -1px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: pca-show-more-spin 0.6s linear infinite;
}

@keyframes pca-show-more-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pca-show-more__btn[aria-busy="true"]::before {
        animation: none;
    }
}

@media (min-width: 768px) {
    .pca-show-more__btn {
        font-size: 15px;
        padding: 14px 28px;
    }
}

/* The noscript fallback (.pca-excursions-v2-pagination--fallback) is rendered
   inside <noscript> by the V2 template, so it's invisible to JS-enabled users.
   No extra CSS needed unless we re-show it on JS error (handled by JS via the
   `hidden` attribute). */

/* ============================================================
   TOOLBAR SLIM (V2 only) — Direction B from /brainstorming
   ============================================================
   Scope all overrides to .pca-excursions-v2 body class so legacy
   /excursions/ V1 (desktop) is unaffected. The unified-toolbar.php
   is shared with V1, so we don't edit it — we re-style.
*/

/* Hide intro paragraph at every viewport on V2 (was mobile-only before).
   Markup retained server-side for SEO (`is_page(242323)` branch). */
body.pca-excursions-v2 .pca-main-subtitle { display: none !important; }

/* Tighten H1 row: less vertical chrome above filter chips */
body.pca-excursions-v2 .pca-title-section { padding: 8px 16px 4px !important; }
body.pca-excursions-v2 .pca-title-content { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Compact breadcrumb */
body.pca-excursions-v2 #pca-breadcrumbs-nav,
body.pca-excursions-v2 .pca-breadcrumbs {
    font-size: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
}

/* Tighten the unified-toolbar container itself */
body.pca-excursions-v2 #pca-unified-toolbar { padding-bottom: 8px !important; }

/* Align the toolbar's inner container to the same 1200px centered grid the
   cards use. The outer <header class="pca-header-section"> stays full-bleed
   (acts as a band); the inner container shrinks to match cards.
   Without this, on wide monitors (≥1216px) the toolbar elements left-flush
   to viewport while cards center → visual mismatch. */
@media (min-width: 768px) {
    body.pca-excursions-v2 #pca-unified-toolbar,
    body.pca-excursions-v2 .pca-header-container {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

/* Filter row: compact, single line on desktop.
   Note: .pca-meta-row is now fully collapsed on V2 (both children hidden).
   Only .pca-toolbar-meta carries this padding now. */
body.pca-excursions-v2 .pca-toolbar-meta {
    margin-top: 4px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Reduce gap between toolbar and first content section so featured
   carousel section header sits close to filter chips */
body.pca-excursions-v2 .pca-tour-card-v2-section-header:first-of-type { margin-top: 8px !important; }

/* ============================================================
   MID-PAGE EDITORIAL — "About Punta Cana excursions"
   ============================================================
   200-300 words of crawlable copy + 6 internal links to landing
   pages. Improves E-E-A-T and internal linking density per
   /seo-audit recommendation.
*/
.pca-excursions-v2-editorial {
    max-width: 760px;
    margin: 24px auto;
    padding: 24px 16px;
    background: var(--color-tropical-sand, #F8F5F1);
    border-radius: 16px;
}

@media (min-width: 768px) {
    .pca-excursions-v2-editorial {
        margin: 40px auto;
        padding: 32px 28px;
    }
}

.pca-excursions-v2-editorial h2 {
    font-family: var(--font-serif, "Spectral"), Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #111827;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .pca-excursions-v2-editorial h2 { font-size: 26px; }
}

.pca-excursions-v2-editorial p {
    font-family: var(--font-body, "Inter");
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 12px;
}

.pca-excursions-v2-editorial p:last-of-type { margin-bottom: 16px; }

.pca-excursions-v2-editorial__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 600px) {
    .pca-excursions-v2-editorial__links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pca-excursions-v2-editorial__links a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 999px;
    color: var(--color-primary, #324fbe);
    font-family: var(--font-body, "Inter");
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms ease;
}

.pca-excursions-v2-editorial__links a:hover,
.pca-excursions-v2-editorial__links a:focus-visible {
    background: var(--color-primary, #324fbe);
    color: #fff;
}

.pca-excursions-v2-editorial__links a::before {
    content: "→";
    color: var(--color-primary-orange, #FF6B35);
    font-weight: 600;
}

.pca-excursions-v2-editorial__links a:hover::before,
.pca-excursions-v2-editorial__links a:focus-visible::before {
    color: #fff;
}

/* ============================================================
   MOBILE UX TIGHTENING — END-OF-FILE OVERRIDES
   ============================================================
   These rules MUST come after the older Show More + section header
   rules earlier in this file so source-order cascade wins. The
   in-file block at line ~641 was authored before realizing more
   rules existed below it — these duplicates ensure the brand
   identity tokens land regardless of authoring order.
*/

/* Section header — editorial serif + sunset-orange accent rule.
   Wrapped in @layer utilities to win the cascade against
   type-overrides.css h2 rule (same trick as the h3 title fix). */
@layer utilities {
    body.pca-excursions-v2 .pca-tour-card-v2-section-header h2,
    .pca-tour-card-v2-section-header h2 {
        font-family: var(--font-serif, "Spectral"), Georgia, "Times New Roman", serif !important;
        font-weight: 600 !important;
        letter-spacing: -0.015em !important;
    }
}
.pca-tour-card-v2-section-header h2::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 3px;
    margin-right: 10px;
    background: var(--color-primary-orange, #FF6B35);
    vertical-align: middle;
    border-radius: 2px;
}

/* Show More button — solid brand-blue (override the outlined neutral pill) */
body.pca-excursions-v2 .pca-show-more__btn,
.pca-excursions-v2-wrap .pca-show-more__btn {
    background: var(--color-primary, #324fbe);
    color: #fff;
    border: 0;
    padding: 14px 28px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(50, 79, 190, 0.18);
}
body.pca-excursions-v2 .pca-show-more__btn:hover,
body.pca-excursions-v2 .pca-show-more__btn:focus-visible,
.pca-excursions-v2-wrap .pca-show-more__btn:hover,
.pca-excursions-v2-wrap .pca-show-more__btn:focus-visible {
    background: var(--color-primary-hover, #2a42a1);
    color: #fff;
    border: 0;
}
body.pca-excursions-v2 .pca-show-more__btn:focus-visible,
.pca-excursions-v2-wrap .pca-show-more__btn:focus-visible {
    outline: 2px solid var(--color-primary-orange, #FF6B35);
    outline-offset: 3px;
}
body.pca-excursions-v2 .pca-show-more__btn[aria-busy="true"]::before,
.pca-excursions-v2-wrap .pca-show-more__btn[aria-busy="true"]::before {
    border-color: rgba(255, 255, 255, 0.6);
    border-right-color: transparent;
}

/* ============================================================
   TRUST BAR — above featured carousel, page 1 only
   ============================================================
   Horizontal scroll on mobile if 5 items overflow viewport. Pill-shaped
   items with brand-blue icons. Lives below the toolbar, above the section
   header. Direction set by SEO audit (Weakness #2).
*/
.pca-excursions-v2-trustbar {
    list-style: none;
    margin: 0 auto 8px;
    padding: 8px 16px;
    display: flex;
    gap: 8px;
    max-width: 1200px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
}

.pca-excursions-v2-trustbar::-webkit-scrollbar { display: none; }

.pca-excursions-v2-trustbar__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-family: var(--font-body, "Inter");
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #374151;
    white-space: nowrap;
}

.pca-excursions-v2-trustbar__item svg {
    flex-shrink: 0;
    color: var(--color-primary, #324fbe);
}

@media (min-width: 768px) {
    .pca-excursions-v2-trustbar {
        gap: 10px;
        padding: 12px 16px 8px;
        flex-wrap: wrap;
        overflow: visible;
    }
    .pca-excursions-v2-trustbar__item {
        font-size: 13px;
        padding: 7px 14px;
    }
}

/* ============================================================
   TOP INTRO PARAGRAPH — under H1, above trust bar
   ============================================================
   SEO audit priority #1: short visible intro for AI Overview /
   featured snippet eligibility. Tight to keep cards near the fold. */
.pca-excursions-v2-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: var(--font-body, "Inter");
    font-size: 14px;
    line-height: 1.5;
    color: #4b5563;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .pca-excursions-v2-intro {
        font-size: 15px;
        padding: 0 16px;
    }
}

/* ============================================================
   PER-CARD MICROCOPY (featured cards only)
   ============================================================
   1-line teaser pulled from post_excerpt, between title and meta.
   Single-line ellipsis to avoid pushing card height. */
.pca-tour-card-v2__microcopy {
    font-family: var(--font-body, "Inter");
    font-size: 12px;
    line-height: 1.35;
    color: #6b7280;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   FAQ ACCORDION — bottom of page, after editorial
   ============================================================
   Native <details>/<summary> for zero-JS accordion. Match the
   editorial section's serif h2 + sand-tint body language. */
.pca-excursions-v2-faq {
    max-width: 760px;
    margin: 24px auto;
    padding: 24px 16px;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .pca-excursions-v2-faq {
        margin: 40px auto;
        padding: 32px 28px;
    }
}

.pca-excursions-v2-faq h2 {
    font-family: var(--font-serif, "Spectral"), Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 16px;
    color: #111827;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) {
    .pca-excursions-v2-faq h2 { font-size: 26px; margin-bottom: 20px; }
}

.pca-v2-faq__item {
    border-bottom: 1px solid #e5e7eb;
    padding: 0;
}
.pca-v2-faq__item:first-of-type {
    border-top: 1px solid #e5e7eb;
}

.pca-v2-faq__q {
    cursor: pointer;
    list-style: none;
    padding: 16px 36px 16px 0;
    font-family: var(--font-display, "Plus Jakarta Sans");
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    position: relative;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.pca-v2-faq__q::-webkit-details-marker { display: none; }
.pca-v2-faq__q::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--color-primary, #324fbe);
    transition: transform 200ms ease;
}
.pca-v2-faq__item[open] .pca-v2-faq__q::after {
    content: "−";
}
.pca-v2-faq__q:hover {
    color: var(--color-primary, #324fbe);
}
.pca-v2-faq__q:focus-visible {
    outline: 2px solid var(--color-primary, #324fbe);
    outline-offset: 2px;
    border-radius: 4px;
}

.pca-v2-faq__a {
    padding: 0 8px 16px 0;
}
.pca-v2-faq__a p {
    font-family: var(--font-body, "Inter");
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}

/* ============================================================
   CATEGORY PILLS — page 1, between trust bar and featured
   ============================================================
   Hub→spoke navigation. Horizontal scroll mobile, wrap desktop.
   Pattern matches .pca-excursions-v2-trustbar but pills are clickable
   anchors with brand-blue focus + sand-tint background to differentiate
   from the trust bar (informational, not navigational).
*/
.pca-excursions-v2-categories {
    max-width: 1200px;
    margin: 0 auto 12px;
    padding: 4px 16px 8px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-sizing: border-box;
}

.pca-excursions-v2-categories::-webkit-scrollbar { display: none; }

.pca-v2-category-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    color: #111827;
    font-family: var(--font-body, "Inter");
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.pca-v2-category-pill:hover {
    background: var(--color-tropical-sand, #F8F5F1);
    border-color: var(--color-primary, #324fbe);
    color: var(--color-primary, #324fbe);
    text-decoration: none;
}

.pca-v2-category-pill:focus-visible {
    outline: 2px solid var(--color-primary, #324fbe);
    outline-offset: 2px;
    color: var(--color-primary, #324fbe);
}

.pca-v2-category-pill:active {
    transform: scale(0.97);
}

@media (min-width: 768px) {
    .pca-excursions-v2-categories {
        flex-wrap: wrap;
        overflow: visible;
        padding: 4px 16px 12px;
        gap: 10px;
    }
    .pca-v2-category-pill {
        font-size: 14px;
        padding: 9px 16px;
    }
}