/* ═══════════════════════════════════════════════
   GLH Featured Agencies Carousel
   Rectangular banner cards, avatar below, reserved
   verification-badge slot, agency/author name.
═══════════════════════════════════════════════ */

.glh-fa-wrap {
    width: 100%;
    box-sizing: border-box;
    margin: 8px 0 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Blog listing/homepage Discovery carousel — breaks out to full viewport
   width regardless of the theme's own content-column max-width, same
   negative-margin technique the header banner (.glh-bh-wrap) already
   uses. Deliberately scoped to .glh-fa-wrap-dc only (the homepage/
   archive carousel) — the single-post "Sponsored" card
   (.glh-fa-single-sponsor) stays contained inside the article column,
   where breaking it out edge-to-edge would look wrong. */
.glh-fa-wrap-dc {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.glh-fa-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    color: #1A1A2E;
    margin: 0 0 14px;
    padding: 0 20px;
    letter-spacing: -.2px;
}

.glh-fa-demo-badge {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fde68a;
    padding: 3px 9px;
    border-radius: 999px;
}

.glh-fa-demo-note {
    margin: 10px 20px 0;
    font-size: 12.5px;
    color: #8a8aa0;
}

.glh-fa-carousel {
    position: relative;
    display: flex;
    align-items: center;
}

/* Scroll-snap track — behaves like a sliding grid of cards,
   works natively with touch-swipe on mobile too.
   scroll-snap-type is "proximity" (not "mandatory") and touch-action
   is scoped to the horizontal axis only — "mandatory" snapping on a
   horizontal track is what made the page feel like it "hooked"/froze
   while scrolling past this carousel on touch devices: the browser
   was fighting to force a snap mid-scroll instead of just letting the
   page keep moving. overscroll-behavior-x keeps any leftover
   horizontal momentum from bleeding into the page itself. */
.glh-fa-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 218px;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 20px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.glh-fa-track::-webkit-scrollbar { display: none; }

.glh-fa-slide {
    scroll-snap-align: start;
}

.glh-fa-card {
    position: relative;
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 16px;
    padding: 0 0 14px;
    box-shadow: 0 3px 16px rgba(20,20,40,.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow: hidden;
}
.glh-fa-card:hover,
.glh-fa-card:focus-visible {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 12px 28px rgba(20,20,40,.16);
    border-color: rgba(201,168,76,.45);
}
.glh-fa-card-demo { cursor: default; }
.glh-fa-card-demo:hover { transform: none; box-shadow: 0 3px 16px rgba(20,20,40,.08); border-color: rgba(0,0,0,.07); }

/* Paid-placement ribbon — only rendered for posts with an active,
   admin-priced Discovery package (see class-glh-discovery-features.php) */
.glh-fa-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg,#f2d488,#C9A84C);
    color: #1A1A2E;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.glh-fa-ribbon::before {
    content: "\2605";
    font-size: 10px;
    line-height: 1;
}

/* Rectangular banner — long/wide, not too big or small */
.glh-fa-banner {
    position: relative;
    width: 100%;
    height: 122px;
    border-radius: 16px 16px 0 0;
    background-size: cover;
    background-position: center;
    background-color: #1A1A2E;
}
.glh-fa-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%);
}
.glh-fa-banner-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: linear-gradient(135deg,#1A1A2E,#2c2c4a);
}
.glh-fa-banner-fallback::after { content: none; }
.glh-fa-banner-fallback span {
    position: relative;
    z-index: 1;
    color: #f2d488;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Avatar sits centred, overlapping the bottom edge of the banner */
.glh-fa-avatar-row {
    display: flex;
    justify-content: center;
    margin-top: -26px;
    position: relative;
    z-index: 2;
}
.glh-fa-av-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.glh-fa-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    display: block;
    background: #eee;
}
.glh-fa-avatar-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

/* Reserved verification-badge slot — only rendered in markup once
   an admin has verified the author, so empty space never shows. */
.glh-fa-badge {
    position: absolute;
    bottom: -1px;
    right: -3px;
    width: 18px;
    height: 18px;
    background: #2196f3;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-style: normal;
    box-shadow: 0 0 0 3px rgba(33,150,243,.22);
}

.glh-fa-name {
    text-align: center;
    margin-top: 8px;
    padding: 0 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Feature-my-brand purchase widget ── */
.glh-df-widget {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 16px;
    max-width: 420px;
}
.glh-df-active { background: #eef7ee; border-color: #bfe3bf; padding: 12px 16px; }
.glh-df-packages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.glh-df-pkg {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid #DDD8CE;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
}
.glh-df-pkg input { margin-right: 6px; }
.glh-df-pkg em { font-style: normal; color: #C9A84C; font-weight: 700; }
.glh-df-buy-btn {
    background: #1A1A2E;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    cursor: pointer;
}
.glh-df-buy-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 600px) {
    .glh-fa-track { grid-auto-columns: 172px; gap: 12px; padding: 4px 14px 10px; }
    .glh-fa-banner { height: 96px; }
    .glh-fa-heading { padding: 0 14px; font-size: 16px; }
}

/* ═══════════════════════════════════════════════
   Single-post "Sponsored" Discovery card — sits
   just before the full post content.
═══════════════════════════════════════════════ */
.glh-fa-single-sponsor {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 22px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.glh-fa-single-sponsor-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fde68a;
    padding: 3px 9px;
    border-radius: 999px;
    margin: 0 0 8px;
}
.glh-fa-single-sponsor-eyebrow::before {
    content: "\2605";
    font-size: 10px;
    line-height: 1;
}

.glh-fa-single-sponsor-card {
    display: flex;
    align-items: stretch;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(201,168,76,.35);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(20,20,40,.07);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.glh-fa-single-sponsor-card:hover,
.glh-fa-single-sponsor-card:focus-visible {
    box-shadow: 0 10px 26px rgba(20,20,40,.14);
    transform: translateY(-2px);
    border-color: rgba(201,168,76,.6);
}

.glh-fa-single-sponsor-banner {
    position: relative;
    width: 128px;
    min-width: 128px;
    background-size: cover;
    background-position: center;
    background-color: #f1f1f6;
}
.glh-fa-single-sponsor-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.08) 100%);
}

.glh-fa-single-sponsor-banner-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
}

.glh-fa-single-sponsor-banner-fallback span {
    font-size: 12px;
    font-weight: 700;
    color: #9a9ab0;
    line-height: 1.3;
}

.glh-fa-single-sponsor-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-width: 0;
}

.glh-fa-single-sponsor-av-wrap {
    position: relative;
    flex: 0 0 auto;
}

.glh-fa-single-sponsor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.glh-fa-single-sponsor-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
}

.glh-fa-single-sponsor-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.glh-fa-single-sponsor-title {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glh-fa-single-sponsor-agency {
    font-size: 12.5px;
    color: #7a7a90;
}

@media (max-width: 480px) {
    .glh-fa-single-sponsor-banner { width: 84px; min-width: 84px; }
    .glh-fa-single-sponsor-body { padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════
   GLH Discovery Card (v2.12) — the redesigned
   "Sponsored Discovery" card used by the homepage
   carousel AND the single-post sponsor slot.
   One photo visible at a time (never a 2-up strip),
   avatar + save/map actions above the photo, a
   bookmark + price badge floating on the photo
   itself, and the title/rating row underneath.
═══════════════════════════════════════════════ */
.glh-dc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(20,20,40,.10), 0 1px 3px rgba(20,20,40,.06);
    border: 1px solid rgba(20,20,40,.05);
    transition: box-shadow .25s cubic-bezier(.2,.7,.3,1), transform .25s cubic-bezier(.2,.7,.3,1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.glh-dc-card:hover { box-shadow: 0 20px 40px rgba(20,20,40,.20); transform: translateY(-5px); }
.glh-dc-card:hover .glh-dc-slide { transform: scale(1.035); }
.glh-dc-card:hover .glh-dc-avatar { box-shadow: 0 0 0 1px rgba(20,20,40,.08), 0 0 0 3px rgba(201,168,76,.28); }
.glh-dc-avatar { transition: box-shadow .2s ease; }

/* ── Top row: avatar (real WP author avatar) + heart/pin actions ── */
.glh-dc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 8px;
}
.glh-dc-av-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
}
.glh-dc-av-img-wrap {
    position: relative;
    display: inline-flex;
    line-height: 0;
    flex: 0 0 auto;
}
.glh-dc-av-name {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.glh-dc-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #eee;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(20,20,40,.08);
}
.glh-dc-avatar-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
}
.glh-dc-verified {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 14px;
    height: 14px;
    background: #2196f3;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    font-style: normal;
    box-shadow: 0 1px 4px rgba(33,150,243,.45);
}
.glh-dc-top-actions { display: flex; align-items: center; gap: 6px; }

.glh-dc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,40,.05);
    color: #4a4a5c;
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.glh-dc-icon-btn svg { fill: currentColor; display: block; }
.glh-dc-icon-btn:hover { background: rgba(20,20,40,.1); }
.glh-dc-icon-btn:active { transform: scale(.92); }
.glh-dc-heart.is-active,
.glh-dc-bookmark.is-active { color: #e0245e; }
.glh-dc-heart.is-active svg,
.glh-dc-bookmark.is-active svg { fill: #e0245e; }
.glh-dc-icon-btn.glh-dc-saving { opacity: .55; pointer-events: none; }

/* ── Media / single-image-at-a-time slider ── */
.glh-dc-media { position: relative; width: 100%; }
.glh-dc-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1A1A2E;
}
.glh-dc-slides {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    /* proximity + no forced stop-on-every-slide — "mandatory" combined
       with scroll-snap-stop:always is what made a quick swipe feel
       like it "hooked"/froze instead of gliding, especially on Android
       Chrome. See the matching note on .glh-fa-track above. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.glh-dc-slides::-webkit-scrollbar { display: none; }
.glh-dc-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    background-size: cover;
    background-position: center;
    display: block;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
/* Soft bottom scrim so the bookmark icon and price badge always
   read clearly against any photo, without darkening the whole image
   the way a flat overlay would. */
.glh-dc-media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0));
    pointer-events: none;
    z-index: 2;
}
.glh-dc-slide-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg,#1A1A2E,#2c2c4a);
}
.glh-dc-slide-fallback span {
    color: #f2d488;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}

/* Prev/next — hidden until hover on non-touch devices, always tappable */
.glh-dc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.92);
    color: #1A1A2E;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    opacity: 0;
    transition: opacity .15s ease;
}
.glh-dc-media:hover .glh-dc-nav { opacity: 1; }
.glh-dc-prev { left: 8px; }
.glh-dc-next { right: 8px; }

.glh-dc-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.glh-dc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    transition: background .15s ease, transform .15s ease;
}
.glh-dc-dot.is-active { background: #fff; transform: scale(1.3); }

.glh-dc-bookmark {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(20,20,40,.45);
    color: #fff;
    backdrop-filter: blur(2px);
}
.glh-dc-bookmark:hover { background: rgba(20,20,40,.6); }
.glh-dc-bookmark.is-active { background: rgba(224,36,94,.85); color: #fff; }
.glh-dc-bookmark.is-active svg { fill: #fff; }

.glh-dc-price {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background: linear-gradient(135deg, #e02424 0%, #b91c1c 100%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -.1px;
    padding: 7px 13px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(185,28,28,.45), 0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.12);
}

/* Sits opposite the price badge, bottom-left — an eye-catching gold/
   orange pill with a gentle pulse so a discounted listing is
   impossible to scroll past without noticing. */
.glh-dc-discount-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #ffb703 0%, #fb8500 100%);
    color: #1A1A2E;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.1px;
    padding: 6px 11px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(251,133,0,.5), 0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.25);
    animation: glhDiscountPulse 1.8s ease-in-out infinite;
}
.glh-dc-discount-icon { font-size: 13px; line-height: 1; margin-right: 2px; }

@keyframes glhDiscountPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.glh-dc-ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg,#f2d488,#C9A84C);
    color: #1A1A2E;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Sits opposite the gold "Sponsored" ribbon — flags a sponsored slot
   that hasn't actually been claimed/verified by its real owner yet.
   Neutral dark-gray so it reads as informational, not a warning. */
.glh-dc-unverified-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    background: rgba(26,26,46,.62);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ── Body: title + rating row ── */
.glh-dc-body { display: block; padding: 10px 12px 14px; text-decoration: none; }
.glh-dc-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.28;
    color: #1A1A2E;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.56em; /* reserves 2 lines so short/long titles keep card heights aligned */
    margin-bottom: 4px;
}
.glh-dc-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #6b6b80;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glh-dc-score { font-weight: 700; color: #1A1A2E; }
.glh-dc-stars { display: inline-flex; gap: 1px; font-size: 12px; }
.glh-dc-star-full  { color: #C9A84C; }
.glh-dc-star-half  { color: #C9A84C; opacity: .5; }
.glh-dc-star-empty { color: #e2ddd0; }
.glh-dc-count { color: #9a9ab0; }
.glh-dc-sep { color: #c8c8d4; }
.glh-dc-sub {
    color: #8a8aa0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glh-dc-rating-empty .glh-dc-sub { color: #6b6b80; }

/* Carousel/track sizing for the discovery card specifically —
   a little wider than the old agency-only card so the photo
   slider has room to breathe. */
.glh-fa-wrap-dc .glh-fa-track { grid-auto-columns: 250px; }
@media (max-width: 600px) {
    .glh-fa-wrap-dc .glh-fa-track { grid-auto-columns: 220px; }
}

/* ── Single-post sponsor slot ── */
.glh-fa-single-sponsor .glh-dc-card { max-width: 360px; }

/* ── Map modal (opened by the pin icon) ── */
.glh-dc-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(15,15,25,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity .15s ease;
}
.glh-dc-map-overlay.is-open { opacity: 1; }
.glh-dc-map-modal {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    transform: translateY(10px);
    transition: transform .15s ease;
}
.glh-dc-map-overlay.is-open .glh-dc-map-modal { transform: translateY(0); }
.glh-dc-map-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.glh-dc-map-modal-title { font-size: 14px; font-weight: 700; color: #1A1A2E; }
.glh-dc-map-modal-address { font-size: 12px; color: #8a8aa0; margin-top: 2px; }
.glh-dc-map-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,40,.06);
    color: #4a4a5c;
    font-size: 15px;
    cursor: pointer;
    flex: 0 0 auto;
}
.glh-dc-map-modal-body { width: 100%; height: 260px; background: #eef0f4; }
.glh-dc-map-modal-body iframe,
.glh-dc-map-modal-body .glh-dc-leaflet { width: 100%; height: 100%; border: 0; display: block; }
.glh-dc-map-modal-foot { padding: 10px 14px 14px; }
.glh-dc-map-directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #1A1A2E;
    background: #f2d488;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
}

/* ── Toast — favorite/login feedback ── */
.glh-dc-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(10px);
    background: #1A1A2E;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
    z-index: 100001;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.glh-dc-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════
   SUGGESTED FOR YOU — "Sponsored · Suggested for
   you" list. Sits directly below the Featured Real
   Estate Agencies carousel on the blog homepage
   (never on single-post pages). Plain white cards,
   no dark navy panel.

   Layout: a horizontal carousel of SLIDES, where
   each slide is a group of ROLL_SIZE (3) agency
   cards stacked VERTICALLY — not a 3-column grid.
   One slide is the main visible unit at a time, with
   the next slide peeking in at the edge (no arrows —
   the peek is the swipe hint). Swiping moves the
   whole 3-card group together as one unit onto the
   next group. See render_suggested_rows() /
   render_suggested_demo() in class-glh-featured-
   agencies.php for the .glh-sfy-carousel >
   .glh-sfy-slides > .glh-sfy-slide > .glh-sfy-row
   markup this styles.
═══════════════════════════════════════════════ */
.glh-sfy-wrap {
    width: 100%;
    box-sizing: border-box;
    margin: 22px 0 0;
    padding: 16px 0 8px;
    background: #ffffff;
    border: 1px solid rgba(20,20,40,.05);
    box-shadow: 0 4px 20px rgba(20,20,40,.10), 0 1px 3px rgba(20,20,40,.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}

.glh-sfy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 12px;
}

.glh-sfy-head-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.glh-sfy-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: rgba(20,20,40,.55);
}

.glh-sfy-eyebrow-sample {
    color: #b8901f;
}

.glh-sfy-sep {
    color: rgba(20,20,40,.3);
    font-size: 12px;
}

.glh-sfy-title {
    font-size: 17px;
    font-weight: 900;
    color: #1A1A2E;
    letter-spacing: -.2px;
}

.glh-sfy-menu {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}
.glh-sfy-menu span {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: rgba(20,20,40,.35);
}

/* .glh-sfy-carousel = the viewport (horizontal scroll + snap).
   .glh-sfy-slides   = the horizontal track; one flex child per slide.
   .glh-sfy-slide    = ONE group of ROLL_SIZE (3) agencies, stacked
                       vertically — this is the thing that scroll-snaps
                       and the thing that moves as a unit on swipe.
   .glh-sfy-row      = one agency card, now full width of its slide
                       (stacked, not a grid column). */
.glh-sfy-carousel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 18px 4px;
}
.glh-sfy-carousel::-webkit-scrollbar { display: none; }

.glh-sfy-slides {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
}

/* Slide width is deliberately short of 100% so the next slide's edge
   always peeks into view as a swipe hint, without a pagination arrow.
   Capped with max-width so on wide desktop viewports the slide (and
   its peek) stay a sensible reading width instead of spanning the
   whole screen. */
.glh-sfy-slide {
    flex: 0 0 88%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-snap-align: start;
    box-sizing: border-box;
    min-width: 0;
}

.glh-sfy-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid rgba(20,20,40,.08);
    border-radius: 12px;
    box-sizing: border-box;
    width: 100%;
    flex: 0 0 auto;
}

/* Tighter spacing for phones/tablets — the slide itself still holds
   exactly 3 stacked rows; only the padding/gap shrink here. */
@media (max-width: 900px) {
    .glh-sfy-carousel { padding: 0 10px 6px; }
    .glh-sfy-slides { gap: 10px; }
    .glh-sfy-slide { flex-basis: 90%; gap: 8px; }
    .glh-sfy-row {
        gap: 6px;
        padding: 10px 10px 12px;
        border-radius: 10px;
    }
}

.glh-sfy-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background .15s ease;
}
a.glh-sfy-row-main:hover,
a.glh-sfy-row-main:focus-visible {
    background: rgba(20,20,40,.035);
}

.glh-sfy-icon-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }

.glh-sfy-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,20,40,.06);
    color: #1A1A2E;
    font-size: 18px;
    font-weight: 800;
}
.glh-sfy-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.glh-sfy-verified {
    position: absolute;
    bottom: -3px;
    right: -4px;
    width: 15px;
    height: 15px;
    background: #2196f3;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    font-style: normal;
    box-shadow: 0 1px 4px rgba(33,150,243,.45);
}

/* Shown in place of the blue verified checkmark whenever a "Suggested
   for you" agency/business card hasn't actually been claimed by its
   real owner yet — makes clear these are pre-populated featured
   listings, not verified users. Neutral gray, small, sits under the
   category line. */
.glh-sfy-unverified-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 2px;
    padding: 2px 7px;
    background: rgba(120,120,130,.14);
    color: #6b6f7a;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: 20px;
}

.glh-sfy-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.glh-sfy-name {
    font-size: 15px;
    font-weight: 800;
    color: #1A1A2E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glh-sfy-cat {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(20,20,40,.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.glh-sfy-rating {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(20,20,40,.8);
}
.glh-sfy-star { fill: #C9A84C; }

.glh-sfy-icon-btn.glh-sfy-pin {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(20,20,40,.08);
    color: #1A1A2E;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.glh-sfy-icon-btn.glh-sfy-pin svg { width: 22px; height: 22px; }
.glh-sfy-icon-btn.glh-sfy-pin:hover { background: rgba(20,20,40,.16); }

.glh-sfy-demo-note {
    margin: 10px 18px 0;
    font-size: 11.5px;
    color: rgba(20,20,40,.4);
}

@media (max-width: 480px) {
    .glh-sfy-head { padding: 0 14px 10px; }
    .glh-sfy-demo-note { margin: 8px 14px 0; }
}

/* ── Shared "real agency" footer: FAQ blurb + Claim + review prompt ──
   Used on both the Featured Real Estate Agencies carousel card
   (.glh-dc-card, light background) and the Suggested-for-you list rows
   (.glh-sfy-row, dark background) — see agency_footer_extras() in
   class-glh-featured-agencies.php. */
.glh-dc-extras {
    padding: 8px 12px 12px;
    border-top: 1px solid rgba(20,20,40,.08);
}
.glh-dc-body + .glh-dc-extras { margin-top: -6px; }

.glh-dc-blurb {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(20,20,40,.78);
}

.glh-dc-extras-actions { display: flex; flex-direction: column; gap: 6px; }
.glh-dc-claim-btn {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    color: #1A1A2E;
    background: #C9A84C;
    border-radius: 20px;
    padding: 7px 12px;
}
.glh-dc-claim-btn:hover { background: #d9bb63; }
.glh-dc-review-prompt {
    font-size: 11.5px;
    text-decoration: underline;
    text-align: center;
    color: rgba(20,20,40,.6);
}
.glh-dc-review-prompt:hover { color: #1A1A2E; }

/* "Suggested for you" rows now share the same light card background as
   .glh-dc-card, so the footer extras need no dark-context override —
   just tighter padding since a row is narrower than a full card. */
.glh-sfy-row .glh-dc-extras {
    border-top-color: rgba(20,20,40,.07);
    padding: 6px 0 2px;
}

/* "Top real estate agencies suggested for you" vertical carousel only
   (agency_footer_extras()'s 'suggested' context) — smaller "View this
   profile" button, single-line description, no review prompt. Scoped
   entirely to .glh-dc-extras-suggested so the Sponsored Discovery home
   carousel's full-size .glh-dc-claim-btn / .glh-dc-blurb / review
   prompt above, and the single business-profile page's own
   .glhbd-profile-claim button (a different class entirely, defined in
   business-profile.css), are both untouched by this. */
.glh-dc-blurb-1line {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(20,20,40,.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.glh-dc-view-btn {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    max-width: 60%;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    color: #1A1A2E;
    background: #C9A84C;
    border-radius: 14px;
    padding: 4px 10px;
    line-height: 1.6;
}
.glh-dc-view-btn:hover { background: #d9bb63; }

/* ═══════════════════════════════════════════════
   SUGGESTED FOR YOU — phone/tablet sizing.
   Placed at the very end of this file on purpose: every selector
   below already exists earlier in this stylesheet with the same
   specificity, and CSS resolves ties by source order, so these have
   to come last to actually win inside their media query.

   Each slide (.glh-sfy-slide, sized in the @media (max-width: 900px)
   block above) still holds exactly ROLL_SIZE (3) agency rows, stacked
   vertically and occupying the slide's full width — the icon-left
   .glh-sfy-row-main layout used at desktop width still has plenty of
   room here, since a row is no longer squeezed into 1/3 of the track.
   Only icon/type sizing is trimmed at narrower widths for legibility;
   the horizontal card layout, category label, map-pin shortcut, and
   description all stay exactly as they are above 900px.
═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .glh-sfy-icon { width: 44px; height: 44px; border-radius: 10px; font-size: 15px; }
    .glh-sfy-verified { width: 13px; height: 13px; font-size: 7px; }
    .glh-sfy-name { font-size: 13px; }
    .glh-sfy-unverified-tag { font-size: 8px; padding: 1px 5px; margin-top: 1px; }
    .glh-sfy-rating { font-size: 11px; }
}

/* Narrower phones — a touch tighter still. */
@media (max-width: 480px) {
    .glh-sfy-slide { flex-basis: 92%; }
    .glh-sfy-icon { width: 38px; height: 38px; border-radius: 9px; font-size: 13px; }
    .glh-sfy-name { font-size: 12px; }
    .glh-sfy-unverified-tag { font-size: 7.5px; }
    .glh-sfy-rating { font-size: 10px; }
}

/* Very narrow phones — a further notch tighter still. */
@media (max-width: 380px) {
    .glh-sfy-slides { gap: 8px; }
    .glh-sfy-row { padding: 8px 8px 10px; }
    .glh-sfy-icon { width: 34px; height: 34px; }
    .glh-sfy-name { font-size: 11.5px; }
}