/* Location pages (/puppies-for-sale/{place}/ and /{place}/{breed}/): the page styles that lived inline in Views/PuppiesV2/PuppiesLocationV2.cshtml, plus the locale-program content block (lc-*). Moved to a cached stylesheet 10/28 (locale handoff item 12); bump ?v= in the view when this changes. */

/* ===== page ===== */
.metLife, .ribbon3 { position: absolute }
.ribbon3 {
    width: auto; height: 30px; line-height: 30px; padding-left: 12px; padding-right: 12px;
    left: -8px; top: 26px; background: #33414f; font-size: 12px; font-weight: 700;
    color: #fff; text-decoration: none; z-index: 10
}
.ribbon3:after, .ribbon3:before { content: ""; position: absolute }
.ribbon3:before {
    height: 0; width: 0; top: -8.5px; left: .1px;
    border-bottom: 9px solid #33414f; border-left: 9px solid transparent
}
.ribbon3.danger { background: #dc3545 }
.ribbon3.danger:before { border-bottom: 9px solid #b41928 }
.fa-15x { font-size: 1.5em }

/* Breadcrumb wraps to a second line on narrow screens once a breed segment is added
   (Home / Puppies for Sale / {Breed} / {State} / {City}) — pushes the whole page down
   instead of just clipping. Content/links stay fully in the DOM either way (this is a
   visual clip, not a removal), so nothing here is hidden from Google — same principle as
   the .seo-collapse pattern elsewhere on this page. Desktop has room, so this is mobile-only. */
@media (max-width: 767.98px) {
    .breadcrumb2-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ===== New hero (mockup: IMG_5015.png) ===== */
.hero2 { background: #fff; padding: 28px 0 8px; }
/* Now an <h2> (was a <div>) — margin set explicitly on all sides since the browser's
   default h2 user-agent style would otherwise add its own margin-top (a div has none by
   default), which this rule never needed to reset before. */
.hero2-eyebrow { color: #00a7e1; font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
/* Slightly smaller on larger screens — matches Puppies2.cshtml's own copy of this rule. */
@media (min-width: 768px) { .hero2-eyebrow { font-size: .72rem; } }
.hero2-headline { font-weight: 800; color: #16232c; font-size: 2rem; line-height: 1.15; margin-bottom: 14px; }
@media (min-width: 768px) { .hero2-headline { font-size: 2.6rem; } }
.hero2-subtext { color: #5b6672; font-size: .94rem; line-height: 1.5; max-width: 640px; margin-bottom: 20px; }
/* Mobile: smaller H1/subtext (2rem/1.02rem was sized for desktop's wider column) and less
   top padding above the eyebrow — same breakpoint convention used throughout this file. */
@media (max-width: 767.98px) {
    .hero2 { padding: 14px 0 8px; }
    .hero2-headline { font-size: 1.5rem; margin-bottom: 10px; }
    .hero2-subtext { font-size: .88rem; margin-bottom: 16px; }
}
/* Desktop keeps the original design: server-truncated at a fixed character length, "..."
   + an inline "Read more" that swaps in the full text — matching Puppies2.cshtml's own
   copy. Mobile only gets the single-line CSS clamp (flex row + nowrap/ellipsis on the text
   span, no character cutoff needed). .hero-desc-toggle-btn blends into the surrounding
   text (inherited color/weight, just underlined) on both; toggled by the class-based JS in
   _ChipFilterScripts2.cshtml, which detects which of the two markup shapes it's dealing with. */
.hero-desc-mobile { display: block; }
.hero-desc-desktop { display: none; }
@media (min-width: 768px) {
    .hero-desc-mobile { display: none; }
    .hero-desc-desktop { display: block; }
}
.hero-desc-toggle-btn {
    background: none; border: 0; padding: 0; margin: 0;
    font-weight: 400; font-size: inherit; line-height: inherit; color: inherit;
    text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.hero-desc-mobile .hero-desc-toggle-wrap { display: flex; align-items: baseline; gap: 6px; }
.hero-desc-mobile .hero-desc-toggle-wrap .hero-desc-text {
    flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-desc-mobile .hero-desc-toggle-wrap.expanded { display: block; }
.hero-desc-mobile .hero-desc-toggle-wrap.expanded .hero-desc-text { white-space: normal; overflow: visible; text-overflow: clip; }
.hero-desc-mobile .hero-desc-toggle-wrap .hero-desc-toggle-btn { flex: 0 0 auto; white-space: nowrap; }

/* ===== Hero right-side ratings + "talk to a specialist" card (mockups: C:\screenshot\
   IMG_2368.png desktop, IMG_2399.jpeg mobile) — replaces the old Trustpilot-widget-card +
   "puppies placed with families"/delivery-time stat row entirely. Same real numbers the
   "Customers Love Us" trust-stat boxes use further down the page (Model.TestimonialStats,
   Keys.TPReviewCount) — no new/invented figures, just surfaced a second time in the hero.
   Byte-for-byte the same rules as Puppies2.cshtml's own copy. ===== */
.hero2-ratings {
    background: #fff; border: 1px solid #eef0f2; border-radius: 16px; padding: 16px;
    max-width: calc(100% - 40px); margin-left: auto;
    box-shadow: 0 1rem 2.5rem rgba(33,65,79,.12);
}
.hero2-rating-row { display: flex; margin-bottom: 10px; }
.hero2-rating-card { flex: 1 1 0; min-width: 0; padding: 0 16px; }
.hero2-rating-card:first-child { padding-left: 0; }
.hero2-rating-card:last-child { padding-right: 0; }
.hero2-rating-card + .hero2-rating-card { border-left: 1px solid #eef0f2; }
.hero2-rating-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.hero2-rating-num { font-weight: 800; color: #16232c; font-size: 1.4rem; line-height: 1; }
.hero2-rating-stars { letter-spacing: -1px; }
/* .hero2-rating-top aligns the "4.7" and the star row on the text baseline, which sits
   lower for these than for the number — the plain FA glyphs a little, the boxy Trustpilot
   squares (an inline-flex element, not a text glyph) a lot more. Nudged back up with a
   relative offset rather than switching the row to align-items:center, which would
   re-center everything against the "4.7" and risk shifting that number itself off its own
   visual center in the process. */
.hero2-rating-stars i { color: #f5b400; font-size: .78rem; position: relative; top: -1px; }
.hero2-rating-tp-square {
    position: relative; top: -3px; display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; margin-right: 1px; border-radius: 3px; background: #dcdce6; overflow: hidden;
}
.hero2-rating-tp-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0; background: #00b67a; }
/* fa-star's glyph shape doesn't sit dead-center in its own box (its two bottom points read
   visually heavier than the single top point) — nudged down 1px so it looks centered in
   the square rather than technically-centered-but-reading-high. */
.hero2-rating-tp-square i { position: relative; top: 0; z-index: 1; color: #fff; font-size: 7px; }
.hero2-rating-link {
    display: block; color: #00a7e1; font-weight: 700; font-size: .84rem; margin-bottom: 2px;
}
.hero2-rating-link:hover { color: #0084b3; text-decoration: none; }
.hero2-rating-sub { color: #6c757d; font-size: .76rem; }
.hero2-ratings-divider { border: none; border-top: 1px solid #eef0f2; margin: 0 0 8px; }
.hero2-cta-text { color: #5b6672; font-size: .88rem; line-height: 1.4; margin-bottom: 14px; }
.hero2-cta-buttons { display: flex; gap: 10px; }
.hero2-cta-btn {
    flex: 1 1 0; text-align: center; font-weight: 700; border-radius: 12px; padding: 11px;
    font-size: .92rem; transition: background-color .15s, border-color .15s;
}
.hero2-cta-btn-solid { background: #00a7e1; color: #fff; border: 1px solid #00a7e1; }
.hero2-cta-btn-solid:hover { background: #0084b3; border-color: #0084b3; color: #fff; text-decoration: none; }
.hero2-cta-btn-outline { background: #fff; color: #16232c; border: 1px solid #d8dee2; }
.hero2-cta-btn-outline:hover { border-color: #00a7e1; color: #0084b3; text-decoration: none; }
@media (max-width: 767.98px) {
    .hero2-ratings {
        background: none; border: none; padding: 0; box-shadow: none;
        max-width: none; margin-left: 0;
    }
    .hero2-rating-row { gap: 10px; margin-bottom: 0; }
    .hero2-rating-card, .hero2-rating-card:first-child, .hero2-rating-card:last-child {
        background: #eef8fc; border: none; box-shadow: none; border-radius: 12px; padding: 8px 10px;
    }
    /* "Talk to a specialist" text + divider stay hidden, but Call us/Text us are back
       (per request), just condensed so they don't cost much vertical space. */
    .hero2-ratings-divider, .hero2-cta-text { display: none; }
    .hero2-cta-buttons { display: flex; gap: 8px; margin-top: 10px; }
    .hero2-cta-btn { padding: 8px; font-size: .82rem; border-radius: 10px; }
}

.hero-desc-toggle {
    background: none; border: 0; padding: 0; margin: 0;
    font-weight: 400; font-size: inherit; line-height: inherit;
    text-decoration: underline; cursor: pointer;
}
.metLife {
    box-sizing: border-box; background-color: #fff;
    clip-path: ellipse(143% 100px at 90% 0%);
    height: 100%; top: 0; right: 0; bottom: 0; left: 0
}
.u-label--blue {
    display: inline-block !important; position: relative; background: none !important;
    border: none !important; border-radius: 0 !important; padding: 0 0 8px !important;
    font-size: 1.5rem !important; font-weight: 800 !important; color: #212529 !important;
}
.u-label--blue::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 7px;
    background: #00a7e1; border-radius: 4px; opacity: .4; transform: rotate(-1deg);
}
.section-heading {
    position: relative; display: inline-block; padding-bottom: 8px; font-weight: 800;
    font-size: 1.5rem; color: #212529; margin-bottom: 0;
}
.section-heading::after {
    content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 7px;
    background: #00a7e1; border-radius: 4px; opacity: .4; transform: rotate(-1deg);
}
.whypaw-heading { font-weight: 800; color: #16232c; font-size: 1.4rem; margin: .5rem 0 1rem; }
@media (max-width: 575.98px) { .whypaw-heading { font-size: 1.35rem; } }
.whypaw-subtext { color: #5b6672; margin: 0 0 2.5rem; }
.whypaw-card {
    height: 100%; background: #fff; border: 1px solid #eef0f2; border-radius: 20px;
    padding: 2rem 1.75rem; box-shadow: 0 .5rem 1.5rem rgba(33,65,79,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.whypaw-card:hover { transform: translateY(-3px); box-shadow: 0 .75rem 2rem rgba(33,65,79,.1); }
.whypaw-card--highlight { background: #eaf7fd; border-color: #cdeaf7; }
.whypaw-card-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.whypaw-icon-img { height: 96px; width: auto; object-fit: contain; margin-bottom: 1.25rem; }
@media (max-width: 767.98px) {
    .whypaw-card { padding: 1.25rem 1rem; }
    .whypaw-card-inner { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
    .whypaw-icon-img { height: 56px; width: 56px; flex: 0 0 auto; margin-bottom: 0; }
    .whypaw-card-title { font-size: 1.35rem; }
}
.whypaw-card-title { font-weight: 700; color: #16232c; font-size: 1.25rem; margin-bottom: .6rem; }
.whypaw-card-text { color: #5b6672; margin-bottom: 1.1rem; }
.whypaw-card-link { font-weight: 600; color: #00a7e1; }
.whypaw-card-link:hover { color: #0084b3; text-decoration: none; }

/* _LifestyleShelfV2.cshtml is shared with /puppies-v2/* (and PuppiesV2.cshtml), so
   its own gray background and top border (the "divider" line above this section) can't be
   changed in that file without affecting those pages too — overridden here instead, scoped
   to this page only. !important because that partial's own <style> block renders later in
   the body (right where it's included) than this @section AddToHead block, so it would
   otherwise win the equal-specificity tie by source order regardless of which one "looks"
   more specific. */
/* Original also carries padding-top:40px + margin-top:8px (the latter collapses with the
   preceding section's own margin, netting ~56px total above the heading) — zeroed out
   entirely here (still reported as too much space even at 16px) so the only gap above
   this section is whatever real margin the preceding section already provides (16-48px
   depending on which one immediately precedes it); the 56px below is untouched. */
.lifestyle-shelf { background: #fff !important; border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; }

/* ===== "Why You Can Trust Pawrade" (mockup: IMG_8237.png) — new, generic/location-agnostic
   trust section, same on every /puppies-for-sale-v2/ page. Every claim reused here is
   real, existing site copy (see render site below for exact sourcing), not invented for
   this mockup. ===== */
.trust2-section { background: #16233a; border-radius: 24px; padding: 2.5rem 2rem; color: #fff; }
.trust2-eyebrow { color: #6fc4ea; font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.trust2-headline { font-weight: 800; font-size: 1.9rem; line-height: 1.2; margin-bottom: 16px; }
.trust2-body { color: #c3ccd6; font-size: .98rem; line-height: 1.55; margin-bottom: 22px; max-width: 480px; }
.trust2-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; border-radius: 10px; padding: 11px 18px; text-decoration: none; }
.trust2-btn-solid { background: #fff; color: #16233a; }
.trust2-btn-solid:hover { background: #e9edf1; color: #16233a; text-decoration: none; }
.trust2-btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.trust2-btn-outline:hover { border-color: #fff; color: #fff; text-decoration: none; }
/* Was two inline-flex <a> tags with a plain ml-2 margin between them — fine side by side,
   but that margin stuck around on the SECOND button even after it wrapped to its own line
   (any time the column got too narrow to fit both, on mobile or a merely-narrow desktop
   col-lg-5), leaving it visibly indented instead of flush with the first button. A flex
   wrapper with gap has no such leftover-margin artifact regardless of whether/where it wraps. */
.trust2-btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.trust2-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px 18px; height: 100%; }
.trust2-card-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); margin-bottom: 10px; font-size: 1rem; }
.trust2-card-tag { color: #6fc4ea; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.trust2-card-title { font-weight: 700; font-size: .98rem; margin-bottom: 4px; }
.trust2-card-text { color: #aeb8c2; font-size: .82rem; line-height: 1.4; margin: 0; }
/* 2.5rem/2rem (40px/32px) was sized for the desktop two-column layout — on mobile's
   single narrow column that reads as a lot of dead space around the edges. */
@media (max-width: 767.98px) {
    .trust2-section { padding: 1.25rem 1rem; border-radius: 16px; }
    .trust2-card { padding: 12px 14px; }
    /* Bootstrap's default .row/.col gutter (15px each side, 30px between the two stat
       cards) reads as too much gap between two already-narrow mobile columns. */
    .trust2-section .row { margin-left: -6px; margin-right: -6px; }
    .trust2-section .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
    .trust2-headline { font-size: 1.4rem; }
}

.mini-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.mini-row::-webkit-scrollbar { height: 6px; }
.mini-row::-webkit-scrollbar-thumb { background: #d8dee2; border-radius: 3px; }
.mini-card {
    flex: 0 0 128px; width: 128px; display: block; border: 1px solid #eef0f2; border-radius: 10px;
    overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.mini-card:hover, .mini-card:focus { border-color: #00a7e1; box-shadow: 0 .3rem .8rem rgba(33,65,79,.12); color: inherit; text-decoration: none; }
.mini-card-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: #f1f2f4; }
.mini-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card-badge {
    position: absolute; left: 5px; bottom: 5px; background: rgba(33,65,79,.85); color: #fff;
    font-size: .64rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.mini-card-badge.placed {
    left: 5px; top: 5px; bottom: auto; background: #fff; color: #212529;
    box-shadow: 0 1px 4px rgba(0,0,0,.2); display: inline-flex; align-items: center; gap: 3px;
}
.mini-card-body { padding: 6px 8px 8px; }
.mini-card-name { font-size: .8rem; font-weight: 700; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card-sub { font-size: .68rem; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card-price { font-size: .78rem; font-weight: 800; color: #212529; }
@media (max-width: 767.98px) {
    .placed-row { flex-wrap: nowrap !important; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .placed-row > .placed-col { flex: 0 0 128px !important; max-width: 128px !important; }
}
.section-gap-top { margin-top: 1.5rem; }
@media (min-width: 768px) { .section-gap-top { margin-top: 4.5rem; } }

.count-list-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #eef0f2; border-radius: 10px; margin-bottom: 8px;
    color: #212529; background: #f8fafb; transition: border-color .15s, background-color .15s;
}
.count-list-item:hover { border-color: #00a7e1; background: #eef8fc; color: #212529; text-decoration: none; }
.count-list-item .count-badge { color: #6c757d; font-size: .82rem; white-space: nowrap; }
/* Always sits directly below #listings2's own pb-3/pb-md-5 trailing padding now (see
   render site) — nets ~32px both breakpoints: 16px pb-3 + 16px margin-top on mobile,
   48px pb-md-5 - 16px margin-top on desktop. */
.need-help-banner { margin-top: 26px; margin-bottom: 60px; }
@media (min-width: 768px) { .need-help-banner { margin-top: 0; } }

/* Hidden, not removed (2026-09-22): the card "Ready now" label (_ListingGridV2.cshtml)
   stays in the markup; delete this rule to bring it back. The location chip stays visible
   here — this IS the location page. !important for the same source-order reason as the
   _LifestyleShelfV2 overrides above. */
#listings2 .pcard2-ready { display: none !important; }


/* alias line under the H1, the breed page's .bc-also (kept here too: head-only pages do not include _BreedContentStylesV2) */
.hero2 .bc-also { color: #5b6672; font-size: .88rem; margin: -6px 0 10px; }
.hero2 .bc-also b { color: #16232c; font-weight: 700; }

/* ===== locale content block (lc-*); shared bc-* pieces come from _BreedContentStylesV2.cshtml ===== */
.lc-wrap { padding-top: 8px; padding-bottom: 24px; }   /* top/bottom only: the .container side gutters stay */
.lc-count { font-size: .84rem; color: #5b7390; font-weight: 600; margin: 0 0 4px; }
.lc-count i { color: #0093d0; margin-right: 4px; }
.lc-section { padding: 44px 0 0; scroll-margin-top: 84px; }
.lc-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 48px; align-items: start; }
.lc-side .section-heading { font-size: 1.45rem; line-height: 1.2; margin-bottom: 10px; }
.lc-side .bc-script { margin: 2px 0 10px; }
.lc-side-link { margin: 0; font-size: .86rem; }
.lc-labelline { font-size: .62rem; letter-spacing: .12em; }
.lc-n { color: #0093d0; font-weight: 800; }
.lc-h2 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 800; line-height: 1.2; color: #0d2a54; margin: 0 0 12px; letter-spacing: -.01em; }
.lc-ab { font-size: .9rem; line-height: 1.6; color: #3e5670; margin: 0 0 10px; font-weight: 400; }
.lc-asof { font-size: .74rem; color: #5b7390; margin: 6px 0 14px; font-weight: 600; white-space: nowrap; }
.lc-btn { display: inline-block; background: #00a8e8; color: #fff !important; border-radius: 12px; padding: 11px 18px; font-size: .86rem; font-weight: 800; text-decoration: none !important; }
.lc-btn:hover { background: #0093d0; }
.lc-lead { font-size: 1.02rem; line-height: 1.5; font-weight: 700; color: #0d2a54; margin: 0 0 10px; }
.lc-p { font-size: .86rem; line-height: 1.6; color: #3e5670; margin: 0 0 10px; font-weight: 400; }
.lc-p--sm { font-size: .82rem; margin: 4px 0 0; }
.lc-rules .lc-p { padding: 12px 0; margin: 0; border-top: 1px solid #e3eef6; }
.lc-rules .lc-p:first-child { border-top: 0; padding-top: 0; }
.lc-band { background: #fbf5ec; border-radius: 24px; padding: 32px 36px 36px; margin-top: 44px; }
.lc-band .section-heading { margin-top: 0; }

/* glance */
.lc-gl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px; margin: 0; }
.lc-gl-tile { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 16px; padding: 12px 14px; min-width: 0; }
.lc-gl-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #eaf6fd; color: #0093d0; display: grid; place-items: center; font-size: .95rem; }
.lc-gl dt { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #5b7390; margin: 0; }
.lc-gl dd { font-size: .95rem; font-weight: 800; color: #0d2a54; margin: 2px 0 0; line-height: 1.2; }
.lc-gl-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 10px; margin-top: 14px; }
.lc-gl-link { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border-radius: 16px; padding: 14px 8px; font-size: .74rem; font-weight: 800; color: #0d2a54 !important; text-decoration: none !important; text-align: center; }
.lc-gl-link:hover { box-shadow: 0 4px 14px rgba(13,42,84,.12); }
.lc-gl-link-ico { width: 34px; height: 34px; border-radius: 50%; background: #eaf6fd; color: #0093d0; display: grid; place-items: center; font-size: .9rem; }

/* place rows */
.lc-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin-top: 14px; }
.lc-prow { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3eef6; border-radius: 16px; padding: 12px 14px; min-width: 0; }
.lc-prow-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #eaf6fd; color: #0093d0; display: grid; place-items: center; font-size: .85rem; }
.lc-prow-body { min-width: 0; flex: 1 1 auto; }
.lc-prow-body b { display: block; font-size: .86rem; font-weight: 700; color: #16232c; line-height: 1.3; }
.lc-prow-sub { display: block; font-size: .74rem; color: #5b7390; font-weight: 600; }
.lc-prow-links { display: flex; gap: 6px; flex: none; }
.lc-pill-btn { display: inline-flex; align-items: center; gap: 5px; background: #00a8e8; color: #fff !important; border-radius: 999px; padding: 6px 11px; font-size: .72rem; font-weight: 800; text-decoration: none !important; white-space: nowrap; }
.lc-pill-btn--ghost { background: #fff; color: #0093d0 !important; border: 1.5px solid #cfe6f5; }
.lc-pill-btn:hover { filter: brightness(.95); }

/* review cards + homecomings */
.lc-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 16px; }
.lc-review { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lc-review-stars { color: #f5b400; font-weight: 800; font-size: .78rem; }
.lc-review-stars i { font-size: .7rem; margin-left: 2px; }
.lc-review-text { font-size: .84rem; line-height: 1.5; color: #16232c; font-weight: 600; margin: 0; flex: 1 1 auto; }
.lc-review-by { font-size: .72rem; color: #5b7390; font-weight: 600; }
.lc-homecomings { margin-top: 16px; }
.lc-homecomings ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.lc-homecomings li { font-size: .82rem; color: #3e5670; }
.lc-homecomings li i { color: #0f8f5b; margin-right: 6px; }

/* breeder rows */
.lc-brows { display: grid; gap: 10px; margin-top: 16px; }
.lc-brow { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e3eef6; border-radius: 16px; padding: 10px 14px; min-width: 0; }
.lc-brow-thumbs { display: flex; gap: 4px; flex: none; }
.lc-brow-thumbs img, .lc-brow-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #eaf6fd; color: #9fd6f0; }
.lc-brow-body { min-width: 0; flex: 1 1 auto; }
.lc-brow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lc-brow-head b { font-size: .9rem; font-weight: 700; color: #16232c; }
.lc-brow-miles { font-size: .74rem; color: #5b7390; font-weight: 600; }
.lc-brow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font-size: .76rem; color: #3e5670; }
.lc-tag { display: inline-block; border-radius: 6px; padding: 2px 7px; font-size: .68rem; font-weight: 800; background: #f1f4f8; color: #5b7390; }
.lc-tag--blue { background: #eaf6fd; color: #0093d0; }
.lc-tag--green { background: #eef9f3; color: #0f8f5b; }
.lc-brow-link { flex: none; }

/* travel */
.lc-opts { display: grid; gap: 0; border: 1px solid #e3eef6; border-radius: 16px; background: #f7fbfe; padding: 4px 16px; margin-top: 12px; }
.lc-opt { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid #e3eef6; }
.lc-opt:first-child { border-top: 0; }
.lc-opt-ico { width: 34px; height: 34px; border-radius: 10px; background: #eaf6fd; color: #0093d0; display: grid; place-items: center; font-size: .85rem; }
.lc-opt-body b { display: block; font-size: .86rem; font-weight: 700; color: #16232c; }
.lc-opt-body p { margin: 2px 0 0; font-size: .8rem; line-height: 1.5; color: #3e5670; }
.lc-opt-price { font-size: .8rem; font-weight: 800; color: #0d2a54; text-align: right; white-space: nowrap; }
.lc-tl { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.lc-tl li { display: flex; gap: 10px; font-size: .8rem; line-height: 1.5; color: #3e5670; }
.lc-tl-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #0d2a54; color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }

/* before home */
.lc-card { background: #fff; border: 1px solid #e3eef6; border-radius: 20px; padding: 6px 20px; }
.lc-bh-row { padding: 14px 0; border-top: 1px solid #e3eef6; }
.lc-bh-row:first-child { border-top: 0; }
.lc-prow--bh { background: none; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; padding-left: 0; padding-right: 0; align-items: flex-start; }
.lc-bh-item { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; align-items: start; }
.lc-bh-item .lc-p--sm { margin: 0; }
.lc-bh-label { margin: 2px 0 0; }
.lc-cost { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #eef4f9; margin: 0; }
.lc-cost:first-child { border-top: 0; padding-top: 0; }
.lc-cost b { color: #16232c; white-space: nowrap; }
.lc-cost-link { display: inline-block; margin-top: 8px; font-size: .8rem; }
.lc-metlife { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #f5fafe; border-radius: 16px; padding: 14px 16px; margin: 8px 0 14px; }
.lc-metlife-logo { font-weight: 800; color: #0d2a54; font-size: 1rem; display: flex; flex-direction: column; }
.lc-metlife-logo i { color: #0f8f5b; margin-right: 4px; }
.lc-metlife-logo small { font-size: .62rem; font-weight: 700; color: #5b7390; text-transform: uppercase; letter-spacing: .06em; }
.lc-foot { font-size: .68rem; color: #5b7390; margin: 6px 0 0; line-height: 1.4; }
.lc-metlife-link { font-size: .8rem; white-space: nowrap; }

/* hub, chosen, link rows */
.lc-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 10px; }
.lc-hub { padding: 20px 24px 24px; }
.lc-hub .bc-label { margin-bottom: 8px; }
.lc-hub-sub { margin: 0 0 12px; }
.lc-hub .bc-more-link { margin-top: 14px; }
.lc-pill-sub { color: #0f8f5b; font-weight: 700; margin-left: 4px; }
.lc-rowgrid { margin-top: 12px; }
.lc-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 991.98px) {
    .lc-split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .lc-band { padding: 24px 18px 26px; border-radius: 16px; }
    .lc-bh-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .lc-metlife { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .lc-section { padding-top: 34px; }
    .lc-side .section-heading { font-size: 1.3rem; }
    .lc-prow { flex-wrap: wrap; }
    .lc-prow-links { width: 100%; justify-content: flex-end; }
    .lc-brow { flex-wrap: wrap; }
    .lc-brow-link { width: 100%; justify-content: center; }
    .lc-opt { grid-template-columns: 34px minmax(0, 1fr); }
    .lc-opt-price { grid-column: 2; text-align: left; }
}