/**
 * WC Puppy Breeds — breed page design layer (v2.3.1)
 *
 * Built against measurements taken from the approved reference design rather
 * than from screenshots: every size, weight, radius, gap and colour below was
 * read out of the running reference with getComputedStyle. The first pass of
 * this file was eyeballed and came out thinner and flatter than the reference;
 * this one is the numbers.
 *
 * Two adaptations the reference does not need but a white-label plugin does:
 *
 *   Colour. The reference hard-codes #bd5018. That is a specific customer's
 *   brand, so instead the palette derives from --pb-primary-fill, the
 *   WCAG-AA-safe variant SettingsPage::emit_brand_css() computes from whatever
 *   brand colour the operator set. On the default brand it resolves to #b7511b
 *   — the reference colour to the eye — and it stays accessible for any hue.
 *
 *   Type. The reference sets Poppins. The current theme already loads Poppins,
 *   so inheriting reproduces it exactly there, while a customer on a different
 *   theme keeps their own face instead of inheriting someone else's brand.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.pb-bd {
    /* Surfaces — four planes, and which one a thing sits on is the design.
       page ground → hero panel → card → chip (the one recessed plane). */
    --bd-bg: #f8f5f1;
    --bd-panel: #fcfaf8;
    --bd-panel-cool: #f2f1f0;   /* the shaded end of the hero's gradient */
    --bd-surface: #ffffff;
    --bd-sand: #f2eee8;
    --bd-chip: #f0eff1;
    --bd-badge: #f8f7f6;        /* the availability pill, over a photo     */
    --bd-border: #e6e1d9;
    --bd-hairline: rgba(18, 31, 52, .06);

    /* Ink. The reference sets a cool near-navy, not the warm near-black 2.3.x
       used; that pairing against the warm ground is most of its character.
       Measured on the three surfaces these actually sit on
       (#f8f5f1 / #ffffff / #f0eff1):
         --bd-ink        17.0 / 18.4 / 16.2
         --bd-ink-soft    6.3 /  6.8 /  6.0   ← chips
         --bd-lead        5.3 /  5.8 /  5.1   ← lead, descriptions
         --bd-ink-muted   4.5 /  5.0 /  4.4   ← subtitles, meta, placeholder
       The reference itself ships #777C89 (4.0) and #858993 (3.2) here; both
       fail AA, and one darker token replaces both invisibly. */
    --bd-ink: #121f34;
    --bd-ink-soft: #4a5365;
    --bd-ink-muted: #6a707c;
    --bd-lead: #5d6574;

    /* Brand, from the operator's configured colour. */
    /* NOT var(--pb-primary) as the fallback: puppy-breeds.css always defines
       it as the raw brand hue (4.06:1 on white), so chaining through it makes
       the AA-safe literal unreachable and silently drops the CTA below AA
       whenever the computed token block is missing. */
    --bd-brand: var(--pb-primary-fill, #b7511b);
    --bd-on-brand: var(--pb-on-primary, #ffffff);
    --bd-brand-wash: color-mix(in srgb, var(--bd-brand) 10%, transparent);
    --bd-brand-edge: color-mix(in srgb, var(--bd-brand) 20%, transparent);
    --bd-brand-ink: color-mix(in srgb, var(--bd-brand) 88%, #000);

    /* In stock. Green, not brand — it is the one piece of good news on a card
       and must not be mistaken for a badge every card carries.
       #007a3d is 5.5:1 on white and 5.0:1 on the badge surface. */
    --bd-ok: #007a3d;
    --bd-ok-wash: #e9f4ee;
    --bd-ok-edge: #bfdfcc;

    /* Radius ladder. Each surface is one rung softer than the one it sits in;
       a flat 8px everywhere is what makes a grid read as generated. The photo's
       16px inside a 22px card at a 12px inset is deliberately NOT concentric —
       concentric would compute to 10px and look tight. */
    --bd-radius-xl: 28px;   /* hero panel                */
    --bd-radius-lg: 22px;   /* breed card                */
    --bd-radius: 20px;      /* featured card, panels     */
    --bd-radius-md: 16px;   /* the photo inside a card   */
    --bd-radius-sm: 10px;   /* A-Z keys                  */
    --bd-radius-xs: 8px;    /* small square affordances  */
    --bd-pill: 999px;

    /* Shadow ladder: a wide, soft, downward lift rather than a glow — measured
       peak alpha on the reference never exceeds .07 and nothing casts upward.
       Tinted with the ink hue, not black, so it stays cool-neutral. */
    --bd-shadow-sm: 0 2px 8px rgba(18, 31, 52, .04);
    --bd-shadow: 0 1px 2px rgba(18, 31, 52, .03), 0 6px 18px rgba(18, 31, 52, .05);
    --bd-shadow-lg: 0 1px 3px rgba(18, 31, 52, .035), 0 8px 24px rgba(18, 31, 52, .07);
    --bd-shadow-hover: 0 2px 4px rgba(18, 31, 52, .04), 0 12px 28px rgba(18, 31, 52, .09);

    /*
     * The host theme's content column.
     *
     * main#content is full-bleed on this fleet — the themes put their container
     * inside each section, not around main — so the plugin has to supply the
     * container itself, and if it picks its own number the archive sits at a
     * different width from the header and footer above and below it.
     *
     * These are the standard responsive container widths (540 / 720 / 960 /
     * 1140 / 1320) minus the 16px of horizontal padding those containers carry,
     * so .pb-bd__inner lands on exactly the same left and right edges as the
     * theme's own content at every breakpoint.
     *
     * A theme with a different rhythm overrides this in one rule:
     *     .pb-bd { --bd-max: 1200px; }
     */
    --bd-max: 1304px;
    --bd-gutter: clamp(1rem, .55rem + 1.4vw, 1.5rem);
    --bd-block: clamp(2rem, 1.2rem + 2.6vw, 3rem);
    --bd-measure: 62ch;

    color: var(--bd-ink);
    background: var(--bd-bg);
    line-height: 1.5;
    /* puppy-breeds.css forces a system UI stack onto .pb-single-breed and
       .pb-breeds-listing. Without this the hero (on .pb-archive) rendered in the
       theme face while the grid 24px below it rendered in San Francisco.
       font-smoothing is deliberately NOT set — it renders our text lighter than
       the theme's around it. */
    font-family: inherit;
}

/* color-mix is widely supported, but a miss must not produce a transparent
   brand. These land first and are overridden above where it is available. */
/* Declared after .pb-bd, so it wins where color-mix is unsupported.
   The values are brand-AGNOSTIC on purpose: hard-coding the reference orange
   here would paint an orange eyebrow beside a blue button on a blue-branded
   site — the wrong brand reads as a bug, a neutral tint reads as intent. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .pb-bd {
        --bd-brand-wash: #f4f2ef;
        --bd-brand-edge: #e5e0d9;
        --bd-brand-ink: var(--bd-brand);
    }
}

/*
 * The two corner washes that stop the page ground reading as flat grey-beige:
 * warm and brand-tinted top-left, cool top-right. Declared after the .pb-bd
 * shorthand above, which would otherwise reset background-image.
 *
 * The offsets are in PIXELS, not percentages. A percentage Y offset resolves
 * against the element's own height, and this element is 24,000px tall on a
 * 156-breed archive — `at 6% -8%` put the centre 1,920px above the page and the
 * 448px gradient never reached a pixel anyone could see. Sized and positioned
 * in px, it lands where it is drawn regardless of how long the page runs.
 *
 * Brand-tinted rather than a fixed orange so it stays right on any configured
 * brand colour.
 */
.pb-bd.pb-archive {
    background-image:
        radial-gradient(52rem 26rem at 0 -60px,
            color-mix(in srgb, var(--bd-brand) 9%, transparent), transparent 70%),
        radial-gradient(52rem 26rem at 100% -60px,
            rgba(18, 31, 52, .05), transparent 70%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 520px, 100% 520px;
    background-position: left top, right top;
}

/* The container ladder — see --bd-max above. Written max-width-first so a
   theme override on .pb-bd still wins at every breakpoint. */
@media (max-width: 1399.98px) { .pb-bd { --bd-max: 1124px; } }
@media (max-width: 1199.98px) { .pb-bd { --bd-max: 944px;  } }
@media (max-width: 991.98px)  { .pb-bd { --bd-max: 704px;  } }
@media (max-width: 767.98px)  { .pb-bd { --bd-max: 524px;  } }
/* Below the smallest container the theme goes fluid on an 8px gutter; match it
   so the hero and the cards line up with the header logo on a phone too. */
@media (max-width: 575.98px)  { .pb-bd { --bd-max: 100vw; --bd-gutter: .5rem; } }

.pb-bd *,
.pb-bd *::before,
.pb-bd *::after { box-sizing: border-box; }

/* height:auto, or an editor image in the_content() with width/height
   attributes gets aspect-distorted by max-width alone. */
.pb-bd img { max-width: 100%; height: auto; }

/*
 * --bd-max is the CONTENT width, not the outer width — the gutter sits outside
 * it. With max-width + padding the same 1256 token produced a 1208 content
 * column at 1440 and the three-up card landed at 389 instead of the 405 the
 * design was drawn at. This form reproduces the reference's content column at
 * every width it specifies: 1256 / 976 / 779 / 358.
 */
.pb-bd__inner {
    width: min(100% - 2 * var(--bd-gutter), var(--bd-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

/* ==========================================================================
   Type
   ========================================================================== */

.pb-bd-h1 {
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);   /* → 48px */
    line-height: 1.1;                                 /* → 52.8px, measured off the reference */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--bd-ink);
}

.pb-bd-h2 {
    margin: 0;
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); /* → 24px */
    line-height: 1.3333;                              /* → 32px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--bd-ink);
}

.pb-bd-lead {
    max-width: var(--bd-measure);
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.625;          /* 26px */
    color: var(--bd-ink-soft);
}
.pb-bd-lead p { margin: 0 0 .75rem; }
.pb-bd-lead p:last-child { margin-bottom: 0; }

/*
 * The archive hero and results heading run a larger scale than the rest of the
 * design layer. Scoped, not global: .pb-bd-h1, .pb-bd-h2 and .pb-bd-lead are
 * also worn by the single-breed template (its H1, its seven section headings
 * and its hero paragraph), which this redesign does not touch.
 */
.pb-archive .pb-bd-hero__text .pb-bd-h1 {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);  /* 32 → 52px */
    line-height: 1.23;                                  /* → 64px */
    letter-spacing: -0.015em;
    /* The reference's headline breaks after "clearly" because the column is
       capped, not because of a hard break. Any operator heading inherits that. */
    max-width: 35ch;
}
.pb-archive .pb-bd-hero__text .pb-bd-lead,
.pb-archive .pb-bd-hero__text .pb-bd-lead p {
    font-size: 1rem;             /* 16px */
    /* On the <p> too: the intro is run through wpautop(), and the host theme
       styles bare `p` at (0,1,1) inside its content wrapper, which beat a rule
       on the parent and rendered the lead at 25.6px leading instead of 30. */
    line-height: 1.875;          /* 30px — the reference sets this airy */
}
.pb-archive .pb-bd-hero__text .pb-bd-lead {
    max-width: 34rem;
    margin: 1rem 0 0;
}
.pb-bd-resulthead .pb-bd-h2 {
    font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); /* → 26px */
    line-height: 1.23;                                  /* → 32px */
    letter-spacing: -0.01em;
}

/* Plain orange text, not a pill. The reference reserves pill shapes for things
   you can press; a label you cannot press wearing one is the single most
   common tell of a generated interface. */
.pb-bd-eyebrow {
    display: block;
    margin: 0 0 1rem;
    color: var(--bd-brand-ink);
    font-size: .8125rem;   /* 13 */
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pb-bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .875rem 1.5rem;
    border: 0;
    border-radius: var(--bd-radius-sm);
    background: var(--bd-brand);
    color: var(--bd-on-brand);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}
.pb-bd-btn:hover { background: var(--pb-primary-hover, var(--bd-brand)); color: var(--bd-on-brand); }
.pb-bd-btn:active { transform: translateY(1px); }

/* ==========================================================================
   Store call buttons

   The bug this work exists for: in the reference, two of these sit in a ~379px
   sidebar and the phone number breaks mid-number across three lines —
   "(555)" / "010-" / "2020" — rendering 145x142px blocks. Measured before
   rebuilding.

   Four rules prevent it at ANY store count:
     · the number is nowrap and carries font-variant-numeric: tabular-nums;
     · tracks are minmax(min(100%, 15.5rem), 1fr) so a container too narrow for
       two columns drops to one rather than crushing both;
     · .pb-bd-call__text has min-width: 0, without which a flex child refuses to
       shrink and forces the overflow in the first place;
     · the store NAME is the only part allowed to wrap.
   ========================================================================== */

.pb-bd-calls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pb-bd-calls--single { grid-template-columns: minmax(min(100%, 15.5rem), 20rem); }

.pb-bd-call {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    background: var(--bd-surface);
    border: 2px solid var(--bd-brand-edge);
    border-radius: var(--bd-radius-lg);
    text-decoration: none;
    color: var(--bd-ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pb-bd-call:hover {
    border-color: var(--bd-brand);
    box-shadow: var(--bd-shadow);
    transform: translateY(-1px);
    color: var(--bd-ink);
}

.pb-bd-call__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bd-pill);
    background: var(--bd-brand-wash);
    color: var(--bd-brand);
}
.pb-bd-call__icon svg { width: 18px; height: 18px; display: block; }

.pb-bd-call__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pb-bd-call__label {
    margin-bottom: 2px;
    font-size: .75rem;
    line-height: 1rem;   /* 12px text, 16px leading — exact, not 1.3333 */
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bd-ink-muted);
    overflow-wrap: anywhere;
}

.pb-bd-call__number {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--bd-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* No border override here on purpose: measured against the reference, the
   call button keeps its brand-tint edge inside the orange card. The button is
   white, so the tint sits on white and stays visible. */

/* ==========================================================================
   Archive hero

   The reference hero is a PANEL sitting on the page ground, not a full-bleed
   band: one rounded surface holding the headline, intro and call buttons on the
   left and a featured-breed card on the right. Three surface planes stack here
   — page ground, panel, card — and that stacking is most of what makes the
   reference read as considered rather than flat.

   Every size below is measured off the reference at its true scale (the PNG is
   1.5x: six control heights land on exact integers at ÷1.5 and none do at any
   other divisor, and the lead's 45px line pitch resolves to a round 30px).
   ========================================================================== */

.pb-bd-hero {
    /* 20px to the filter row. Not --bd-block: the filter row belongs to the
       hero, not to the next section. */
    padding-block: 0 1.25rem;
}

.pb-bd-hero__panel {
    padding: clamp(1.5rem, .9rem + 2.4vw, 2.75rem);
    /* Lit from the bottom-left. A flat fill here is the difference between a
       surface and a rectangle; the two stops are 3% apart in value. */
    background: linear-gradient(225deg, var(--bd-panel-cool) 0%, var(--bd-panel) 60%);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius-xl);
    box-shadow: var(--bd-shadow-lg);
}

.pb-bd-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    /* Top, not centre or stretch: in the reference the featured card's label
       sits on the same baseline as the eyebrow. This template's left column
       also carries the store call buttons, which the reference does not have,
       so stretching would leave the card's CTA floating in dead space. */
    align-items: start;
}
@media (min-width: 1000px) {
    /* A fixed 339px sidebar, not a fraction — measured. */
    .pb-bd-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 21.1875rem); }
}

.pb-bd-hero__calls { margin-top: clamp(1.5rem, 1rem + 1.4vw, 2rem); }

/* Stacked, the featured card would run the full width of the hero and its
   brand-filled CTA would become the largest object on the page. Capped and
   left-set, it stays a card. */
@media (max-width: 999px) {
    .pb-bd-feature { max-width: 32.5rem; }
}

/* --- Featured breed card ------------------------------------------------- */

.pb-bd-feature {
    display: flex;
    flex-direction: column;
    padding: 1.125rem;
    background: var(--bd-surface);
    /* A white rim on a near-white panel is invisible, and this is the one card
       whose surface is NOT darker than what it sits on. It needs a real edge. */
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow);
}

.pb-bd-feature__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .75rem;      /* 12 */
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* Muted, not brand: the dot carries the accent. */
    color: var(--bd-ink-muted);
}
.pb-bd-feature__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bd-brand);
    flex: 0 0 auto;
}

.pb-bd-feature__name {
    margin: .75rem 0 0;
    font-size: 1.375rem;    /* 22 */
    line-height: 1.18;      /* 26 */
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bd-ink);
    overflow-wrap: anywhere;
}

.pb-bd-feature__desc {
    margin: .5rem 0 0;
    font-size: .9375rem;    /* 15 */
    line-height: 1.4;       /* 21 */
    color: var(--bd-lead);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* (0,2,0): the shared `.pb-bd-chips { margin: 0 }` below is declared later at
   the same weight, so a plain .pb-bd-feature__chips loses and the chips sat
   flush against the description. */
.pb-bd-chips.pb-bd-feature__chips { margin-top: 1.125rem; }

.pb-bd-feature__cta {
    width: 100%;
    margin-top: 1rem;
    min-height: 44px;
    padding: .625rem 1.25rem;
    border-radius: var(--bd-pill);
    font-size: .9375rem;    /* 15 */
    /* Long breed names ("Bernese Mountain Dog") must wrap inside the button
       rather than overflow a 339px sidebar. */
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

/* --- Featured breed carousel ---------------------------------------------
   A wrapper around the card above, never a variant of it. The viewport is an
   ordinary horizontal scroll container with mandatory snapping, so:
     · a phone swipes it natively, with momentum, for free;
     · every slide is real markup with a real link, so the crawler sees all of
       them whether or not the script ever runs;
     · with JS off it degrades to a swipeable strip rather than to one card and
       three dead buttons — which is why the control bar ships [hidden] and the
       script un-hides it.
   -------------------------------------------------------------------------- */

.pb-bd-featcar {
    display: block;
    /* The carousel is a grid item of .pb-bd-hero__grid, and a grid item's
       automatic minimum size is its MIN-CONTENT — which, for six non-shrinking
       flex slides, is six cards wide. Without this the hero blew past the
       viewport at phone widths. The scroll container handles the overflow; the
       item itself must be free to shrink to the column. */
    min-width: 0;
    /* The scroll container clips the card's shadow flush at its edges. A little
       breathing room on each side lets the lift read, and the negative margin
       keeps the card itself aligned to the hero grid column. */
    margin-inline: -.5rem;
}
@media (max-width: 999px) {
    /* Same cap the single card carries, moved up a level so every slide is the
       same width rather than each shrinking to its own content. */
    .pb-bd-featcar { max-width: calc(32.5rem + 1rem); }
}

.pb-bd-featcar__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Keeps a horizontal swipe from chaining into the page/browser back gesture. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* No padding here on purpose. Padding on a scroll container is INSIDE the
       scrollport, so a slide sized at 100% of the content box leaves the
       padding's width of the next card showing at the right edge. The breathing
       room the shadow needs lives on the slide instead, where it is part of the
       100% and the snap lands flush. */
    padding: 0;
}
.pb-bd-featcar__viewport::-webkit-scrollbar { display: none; }

.pb-bd-featcar__track {
    display: flex;
    /* Stretch, so all slides are as tall as the tallest card and the control
       bar never moves as the carousel advances. */
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-bd-featcar__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    /* The card's lift, unclipped, without widening the scrollport. */
    padding: .375rem .5rem .5rem;
}

/* Equal-height cards: the card fills its slide and the CTA is pushed to the
   bottom rail, so six cards with one, two and three chips still line their
   buttons up. margin-top:auto alone would close the gap on the tallest card,
   hence the 1rem floor on the element above it (flex items never collapse
   margins, so this is exactly 1rem and not more). */
.pb-bd-featcar__slide > .pb-bd-feature { width: 100%; max-width: none; }
.pb-bd-featcar__slide .pb-bd-feature__cta { margin-top: auto; }
.pb-bd-featcar__slide .pb-bd-feature > :nth-last-child(2) { margin-bottom: 1rem; }

/* --- Carousel controls ---------------------------------------------------- */

.pb-bd-featcar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .625rem;
    padding-inline: .5rem;
    /*
     * Hidden by visibility, not by display or [hidden], and therefore still
     * occupying its 28px. Collapsing it and letting the script expand it after
     * hydration shifted everything below the hero down by ~38px at stacked
     * widths — a CLS hit paid by every visitor to spare the handful with JS off.
     * visibility:hidden keeps it out of the accessibility tree and out of the
     * tab order exactly as [hidden] did, costs no layout shift, and leaves 28px
     * of empty panel background where a no-JS visitor would otherwise be shown
     * three buttons that do nothing.
     */
    visibility: hidden;
}
[data-pb-featcar-ready="true"] .pb-bd-featcar__bar { visibility: visible; }

.pb-bd-featcar__dots {
    display: flex;
    align-items: center;
    gap: .125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    flex-wrap: wrap;
    /* Optical alignment. The dot is 7px of ink centred in a 24px hit box, so
       the box's left edge lines up with the card while the DOT sits 8.5px
       inside it. Pull the row back by that inset so what the eye sees — the
       first dot — shares the card's left edge, which is what the buttons on the
       other end already do. */
    margin-inline-start: -8px;
}

/* The visible dot is 7px; the button around it is 24x28 so the tap target and
   the neighbouring targets clear the 24px AA floor without six fat circles
   sitting under the card. */
.pb-bd-featcar__dot {
    display: block;
    width: 24px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    border-radius: var(--bd-radius-xs);
}
.pb-bd-featcar__dot::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: rgba(18, 31, 52, .22);
    transition: background-color .18s ease, width .18s ease, margin-left .18s ease;
}
.pb-bd-featcar__dot:hover::before { background: var(--bd-ink-muted); }
.pb-bd-featcar__dot[aria-current="true"]::before {
    background: var(--bd-brand);
    /* The current dot becomes a short bar rather than a bigger circle — reads as
       position on a track instead of as a selected pill. */
    width: 16px;
    margin-left: -8px;
    border-radius: 3.5px;
}
.pb-bd-featcar__dot:focus-visible {
    outline: 2px solid var(--bd-brand);
    outline-offset: 1px;
}

.pb-bd-featcar__btns {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}

.pb-bd-featcar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--bd-hairline);
    border-radius: 50%;
    background: var(--bd-surface);
    color: var(--bd-ink-soft);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.pb-bd-featcar__btn svg { width: 14px; height: 14px; display: block; }
.pb-bd-featcar__btn:hover {
    color: var(--bd-ink);
    border-color: var(--bd-ink-muted);
}
.pb-bd-featcar__btn:focus-visible {
    outline: 2px solid var(--bd-brand);
    outline-offset: 2px;
}
.pb-bd-featcar__btn[disabled] { opacity: .4; cursor: default; }

/* The pause/play button swaps glyphs off one state attribute rather than by
   rewriting innerHTML, so the script never has to ship markup.
   Every selector here is (0,2,x) or more: the shared `.pb-bd-featcar__btn svg`
   rule above is (0,1,1), so single-class toggles lost to its display:block and
   both glyphs rendered side by side. */
.pb-bd-featcar__btn .pb-bd-featcar__ipause,
.pb-bd-featcar__btn .pb-bd-featcar__iplay { fill: currentColor; stroke: none; }
.pb-bd-featcar__btn .pb-bd-featcar__iplay { display: none; }
[data-pb-featcar-paused="true"] .pb-bd-featcar__btn .pb-bd-featcar__ipause { display: none; }
[data-pb-featcar-paused="true"] .pb-bd-featcar__btn .pb-bd-featcar__iplay { display: block; }

/* Below the phone breakpoint the arrows are redundant — the strip is swipeable
   and the dots still jump — and three 28px circles next to six dots is clutter
   at 360px. Arrows go; pause stays, because WCAG 2.2.2 is not a desktop rule. */
@media (max-width: 575.98px) {
    .pb-bd-featcar__btn[data-pb-featcar-prev],
    .pb-bd-featcar__btn[data-pb-featcar-next] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-bd-featcar__viewport { scroll-behavior: auto; }
    .pb-bd-featcar__dot::before { transition: none; }
}

/* --- Chips (shared by the featured card and every breed card) -------------
   Pills, not rounded squares. The reference reserves the 10px squircle for the
   A-Z keys alone; everything else is either a pill or a card radius.
   -------------------------------------------------------------------------- */

.pb-bd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-bd-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 .75rem;
    border-radius: var(--bd-pill);
    background: var(--bd-chip);
    color: var(--bd-ink-soft);
    font-size: .75rem;      /* 12 — smaller than the subtitle above it, and
                               louder: 600 weight, darker ink, own surface. */
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
}

.pb-bd-chip--stock {
    background: var(--bd-ok-wash);
    border: 1px solid var(--bd-ok-edge);
    color: var(--bd-ok);
    font-weight: 700;
}

/* ==========================================================================
   Filter bar

   The reference sets these three controls straight on the page ground — no
   surrounding card. The search grows and is 6px TALLER than the other two;
   that height difference is what stops the row reading as a segmented control.
   ========================================================================== */

.pb-bd-filters {
    display: flex;
    /* Explicit: .pb-filter-controls (old sheet) sets flex-direction: column
       below 768px. In a column, .pb-bd-search's flex-basis becomes its HEIGHT,
       producing a 288px empty well around a 44px input on every phone. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    /* The old sheet gives this a grey panel and 16px of padding. */
    padding: 0;
    margin: 0 0 1rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pb-bd-search { position: relative; flex: 1 1 20rem; min-width: 0; }
.pb-bd-search > svg {
    position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--bd-ink-muted); pointer-events: none;
    z-index: 1;
}

/*
 * Deliberately (0,3,1), not the (0,1,1) the rest of this sheet uses.
 *
 * Two different sheets already own bare form controls and both outrank a plain
 * `.pb-bd-search input`: puppy-breeds.css styles .pb-search-input directly, and
 * the HOST THEME styles text inputs site-wide — on the reference site that is a
 * 1.5px #e2e8f0 border, a 10px radius and 0.6rem/0.9rem padding, which won and
 * left a rectangular field with the magnifier sitting on top of the placeholder.
 * A theme can always add a rule; matching its weight here is the fix, and it
 * still only ever applies inside .pb-bd.
 */
.pb-bd .pb-bd-search input[type="search"] {
    width: 100%;
    min-height: 44px;
    /* 3rem right padding clears .pb-search-clear, which the old sheet
       absolutely positions at right:.75rem — 16px of padding put it on top of
       the typed text. */
    padding: .5rem 3rem .5rem 3rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-sm);
    color: var(--bd-ink);
    font: inherit;
    /* The reference sets 15px. 16 is the floor that stops iOS zooming the page
       on focus, which is worse than one pixel of drift. */
    font-size: max(.9375rem, 16px);
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pb-bd .pb-bd-search input[type="search"]:hover { border-color: var(--bd-ink-muted); }
/* The old sheet's .pb-search-input:focus paints a brand glow on click. */
.pb-bd .pb-bd-search input[type="search"]:focus {
    box-shadow: var(--bd-shadow-sm);
    border-color: var(--bd-ink-muted);
}
/* Otherwise WebKit renders its own clear button beside ours. */
.pb-bd-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* The reference's placeholder is #9EA2AB — 2.5:1, and since the field ships no
   visible label the placeholder IS the label. Darkened, and a visually hidden
   <label> added in the markup. */
.pb-bd-search input::placeholder { color: var(--bd-ink-muted); opacity: 1; }

/* The suggestion list the JS builds under the field. */
.pb-bd-search .pb-search-autocomplete {
    /* The initial hidden state, previously the `hidden` attribute — see the
       comment in shortcodes.php. jQuery's .show() overrides this with an inline
       display:block; a UA/Bootstrap [hidden] rule it could not override. */
    display: none;
    margin-top: .375rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-md);
    box-shadow: var(--bd-shadow);
    overflow: hidden auto;
}
.pb-bd-search .pb-search-autocomplete__item {
    /* display:block, not the old sheet's flex: the JS splits each suggestion
       into text / <span class="__match"> / text, and a flex gap between those
       three renders "aired al e terrier". */
    display: block;
    padding: .5rem 1rem;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--bd-ink);
}
.pb-bd-search .pb-search-autocomplete__item:hover,
.pb-bd-search .pb-search-autocomplete__item--highlighted { background: var(--bd-chip); }
.pb-bd-search .pb-search-autocomplete__match { color: var(--bd-brand-ink); font-weight: 700; }
.pb-bd-search .pb-search-autocomplete__no-results { color: var(--bd-ink-muted); }

/* The old sheet parks this at right:.75rem with no size of its own. */
.pb-bd-search .pb-search-clear {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--bd-chip);
    color: var(--bd-ink-soft);
    font-size: 1.0625rem; line-height: 1;
    cursor: pointer;
}
.pb-bd-search .pb-search-clear:hover { background: var(--bd-sand); color: var(--bd-ink); }

.pb-bd-filters__group { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }


/* --- Availability chip ---------------------------------------------------
   Looks like a button; is a checkbox. #pb-available-only stays a real input
   because the JS reads :checked and resetFilters() writes it. The input is
   clipped rather than display:none so it keeps its place in the tab order, and
   the sibling .__face carries the paint — no :has() needed.
   ------------------------------------------------------------------------- */

.pb-bd-toggle {
    display: inline-flex;
    position: relative;
    margin: 0;
    cursor: pointer;
}
.pb-bd-toggle__input {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    /* Sits under the face so a click anywhere on the label still toggles it. */
    inset-inline-start: 1.25rem;
    inset-block-start: 50%;
}
.pb-bd-toggle__face {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: 38px;
    padding: 0 1.25rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-sm);
    color: var(--bd-ink);
    font-size: .9375rem;    /* 15 */
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pb-bd-toggle__face svg { flex: 0 0 auto; color: var(--bd-ink-muted); }
.pb-bd-toggle:hover .pb-bd-toggle__face { border-color: var(--bd-ink-muted); }

.pb-bd-toggle__input:checked + .pb-bd-toggle__face {
    background: var(--bd-brand);
    border-color: var(--bd-brand);
    color: var(--bd-on-brand);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--bd-brand) 25%, transparent);
}
.pb-bd-toggle__input:checked + .pb-bd-toggle__face svg { color: currentColor; }

/* The clipped input cannot show a ring of its own, so the face wears it. */
.pb-bd-toggle__input:focus-visible + .pb-bd-toggle__face {
    outline: 2px solid var(--pb-focus-ring, #0b57d0);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff;
}

/* --- Sort pill -----------------------------------------------------------
   Native <select>, same option values, wrapped in a pill that shows its own
   visible <label>. Label and value are the same 13px; all the separation is
   500/muted against 700/accent.
   ------------------------------------------------------------------------- */

.pb-bd-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-height: 38px;
    padding: 0 2.25rem 0 1.25rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    box-shadow: var(--bd-shadow-sm);
    transition: border-color .15s ease;
}
.pb-bd-sort:hover { border-color: var(--bd-ink-muted); }
.pb-bd-sort__label {
    margin: 0;
    font-size: .8125rem;    /* 13 */
    font-weight: 500;
    color: var(--bd-ink-muted);
    cursor: pointer;
}
/* (0,3,1) for the same reason as the search field above: the host theme styles
   <select> site-wide and left its own bordered white box sitting inside the
   pill. */
.pb-bd .pb-bd-sort select.pb-sort-select {
    /* Resets the old sheet's bordered white box AND the 2.3.x chevron
       background-image, which would double up with the svg below. */
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    color: var(--bd-brand-ink);
    font: inherit;
    /* 13px is the reference; 16 is the iOS-zoom floor, and a <select> only
       zooms on focus in the same way an input does. */
    font-size: max(.8125rem, 16px);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.pb-bd-sort__chevron {
    position: absolute;
    right: 1rem;
    width: 14px; height: 14px;
    color: var(--bd-brand-ink);
    pointer-events: none;
}

/* Below the two-column break the three controls stack. Authored HERE, after
   .pb-bd-toggle__face and .pb-bd-sort, because it overrides their min-height —
   above them its 44px declarations were dead at equal specificity. Ragged widths read as
   an accident; full width reads as the layout. Everything also grows to a
   44px thumb target, which the reference's 38px chips do not meet. */
@media (max-width: 639px) {
    .pb-bd-filters__group { width: 100%; }
    .pb-bd-filters__group > * { flex: 1 1 100%; }
    .pb-bd-toggle__face { width: 100%; justify-content: center; }
    .pb-bd-toggle__face, .pb-bd-sort { min-height: 44px; }
    .pb-bd-sort { justify-content: flex-start; }
}


/* ==========================================================================
   A-Z row

   Wraps rather than scrolls at desktop — 27 keys at 34px + 4px gaps is 1022px
   and fits the 1208px content column on one line with room to spare. Only the
   phone gets the scrolling strip, where wrapping would cost five rows and
   ~190px above the fold.
   ========================================================================== */

.pb-bd-letters {
    display: flex;
    /* .pb-filter-bar (old sheet) centres these on a cool-grey panel. */
    flex-wrap: wrap;
    justify-content: flex-start;
    background: none;
    border-radius: 0;
    padding: 0;
    gap: .25rem;
    margin: 0;
}
.pb-bd-letters__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px; height: 34px;
    padding: 0 .5rem;
    border: 1px solid var(--bd-hairline);
    /* The page's one squircle step. Not a pill — the pills are the controls. */
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface);
    box-shadow: none;
    color: var(--bd-ink);
    font: inherit;
    font-size: .8125rem;    /* 13 */
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pb-bd-letters__btn:hover {
    background: color-mix(in srgb, var(--bd-ink) 4%, var(--bd-surface));
    border-color: var(--bd-border);
}
.pb-bd-letters__btn:active { transform: translateY(1px); }
.pb-bd-letters__btn[aria-pressed="true"] {
    background: var(--bd-brand);
    border-color: var(--bd-brand);
    /* White, NOT the ink colour the reference uses here: #121F34 on #BD4C0D is
       3.3:1 and fails AA for a 13px/600 label. */
    color: var(--bd-on-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-brand) 12%, transparent);
}

/* A phone gets one scrolling strip: 27 keys wrapped at phone width costs five
   rows and ~190px above the fold. */
@media (max-width: 767px) {
    .pb-bd-letters {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* overflow-x:auto computes overflow-y:auto, which would clip the 2px
           focus ring, its 2px offset and its 4px white halo off the top and
           bottom of every key. The padding gives the ring room and the negative
           margin gives the space back to the layout. */
        padding-block: .5rem;
        margin-block: -.5rem;
        padding-bottom: .875rem;
        scroll-padding-inline: 1rem;
        gap: .375rem;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .pb-bd-letters__btn { scroll-snap-align: start; }
}
/* And a real thumb target on anything touch-driven — a tablet at 900px is
   still a finger, and 34px is below the comfortable floor even though it
   clears the 24px WCAG 2.2 minimum. */
@media (max-width: 767px), (pointer: coarse) {
    .pb-bd-letters__btn { min-width: 44px; height: 44px; }
}

/* ==========================================================================
   Results heading
   ========================================================================== */

.pb-bd-resulthead {
    display: flex;
    flex-wrap: wrap;
    /* Bottom-aligned, not baseline-aligned: in the reference the count's
       baseline sits ~3px BELOW the heading's. */
    align-items: flex-end;
    justify-content: space-between;
    gap: .375rem 1.5rem;
    margin: 1.75rem 0 1.25rem;
}
.pb-bd-resulthead__title { min-width: 0; }
.pb-bd-resulthead__eyebrow {
    margin: 0 0 .25rem;
    font-size: .8125rem;    /* 13 */
    line-height: 1.4;
    color: var(--bd-ink-muted);
}
.pb-bd-resulthead__count {
    /* The old .pb-breeds-count centres this and adds 24px of bottom margin. */
    margin: 0;
    padding-bottom: .125rem;
    text-align: right;
    font-size: .8125rem;    /* 13 — the same step as the eyebrow opposite it */
    line-height: 1.4;
    color: var(--bd-ink-muted);
    white-space: nowrap;
}
.pb-bd-resulthead__count .pb-breeds-count__visible {
    font-weight: 600;
    color: var(--bd-ink-soft);
}
@media (max-width: 480px) {
    /* Stack rather than squeeze; the count goes under the heading, left-set. */
    .pb-bd-resulthead { display: block; }
    .pb-bd-resulthead__count { margin-top: .375rem; text-align: left; }
}

/* ==========================================================================
   Breed grid + card

   The reference card is a padded white surface with the photo INSET inside it,
   square, with its own smaller radius — the radius ladder (card 22 > photo 16 >
   key 10) is what stops a grid of 156 cards reading as a spreadsheet.
   ========================================================================== */

.pb-bd-grid {
    display: grid;
    /* 18.75rem is the track that holds three columns from 1024 up and drops to
       two at about 640 — checked against the 1208 / 976 / 780 / 358 content
       widths the four breakpoints actually produce. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
    column-gap: 1.25rem;
    row-gap: 1.5rem;
    padding-bottom: var(--bd-block);
}

/*
 * The archive's column count is pinned rather than intrinsic.
 *
 * --bd-max now tracks the host theme's container, so the content column is a
 * step function (1304 / 1124 / 944 / 704 / 524) rather than a smooth range, and
 * no single auto-fill track gives three columns at both 1304 and 944 — 1304
 * needs a track over 311px and 944 needs one under 301px. Pinning three keeps
 * the reference's proportions at every desktop step.
 *
 * Scoped to .pb-archive on purpose: an embedded [puppy-breeds] in a narrow
 * column elsewhere keeps the intrinsic auto-fill above, which is what makes it
 * container-aware.
 */
@media (min-width: 992px) {
    .pb-archive .pb-bd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Between 600 and 767 the intrinsic track is ~16px too wide for two columns and
   auto-fill drops to one — a single full-width card whose square photo swallows
   the viewport. */
@media (min-width: 600px) and (max-width: 991.98px) {
    .pb-bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pb-bd-breed {
    position: relative;
    display: flex;
    flex-direction: column;
    /*
     * 156 cards, each with a photo and a shadow, is a real paint cost.
     * content-visibility lets the browser skip everything below the fold until
     * it is scrolled near, and contain-intrinsic-size keeps the scrollbar
     * honest while it does.
     *
     * Safe with the client-side filtering: the JS reads offsetWidth via
     * :visible and reorders with detach/append, neither of which
     * content-visibility changes. The card's own shadow and focus ring are not
     * descendants, so paint containment does not clip them.
     */
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
    padding: .75rem;
    background: var(--bd-surface);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius-lg);
    /* The photo carries its own radius and clipping, so the card does not need
       overflow:hidden — and without it the focus ring is not clipped. */
    overflow: visible;
    box-shadow: var(--bd-shadow);
    perspective: none;
    transition: box-shadow .16s cubic-bezier(.2,.6,.2,1),
                transform .16s cubic-bezier(.2,.6,.2,1),
                border-color .16s ease;
}
.pb-bd-breed:hover,
.pb-bd-breed:focus-within {
    box-shadow: var(--bd-shadow-hover);
    transform: translateY(-2px);
}
.pb-bd-breed:hover .pb-bd-breed__title { color: var(--bd-brand-ink); }
/* Touch has no hover, so without :active a tap gives no feedback at all
   between press and navigation. */
.pb-bd-breed:active { transform: translateY(0); transition-duration: 60ms; }

.pb-bd-breed__media {
    position: relative;
    /* Square, not 4:3. The breed photos are portrait cut-outs, so a square crop
       shows more of the dog than the old 4:3 did. */
    aspect-ratio: 1 / 1;
    border-radius: var(--bd-radius-md);
    background: var(--bd-sand);
    overflow: hidden;
}
.pb-bd-breed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Breed photos are often cut-outs on white. Without this hairline the inset
   photo dissolves into the card and the whole device — card surface, smaller
   photo plate inside it — stops reading. Inset, so it cannot add to the box. */
.pb-bd-breed__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--bd-hairline);
    pointer-events: none;
}

.pb-bd-breed__flag {
    /* Inset from the PHOTO's edges, which puts it 26px from the card's. */
    position: absolute; top: .875rem; right: .875rem; z-index: 1;
    display: inline-flex; align-items: center;
    min-height: 26px;
    padding: 0 .75rem;
    border-radius: var(--bd-pill);
    /* Solid, not translucent: a translucent pill disappears over a pale photo,
       and half these photos are cut-outs on white. */
    background: var(--bd-badge);
    box-shadow: inset 0 0 0 1px var(--bd-hairline);
    color: var(--bd-ok);
    font-size: .75rem; line-height: 1.2; font-weight: 700;
}

.pb-bd-breed__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 12px of card padding plus 8px here puts the text on the 20px inset the
       reference uses, while the photo keeps its tighter 12px. The photo sitting
       closer to the edge than the title is deliberate — it is what gives the
       photo its presence. */
    padding: 1rem .5rem .5rem;
}

.pb-bd-breed__title {
    margin: 0;
    /* A flex item defaults to min-width:auto and cannot shrink below its
       min-content width, so one long unbreakable breed name overflows. */
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.0625rem;   /* 17 */
    line-height: 1.2;       /* 20 */
    font-weight: 700;
    color: var(--bd-ink);
    transition: color .16s ease;
}
/* --- Puppy facepile, bottom-left of the breed photo ------------------------
   The flag in the opposite corner states the number; this shows the faces
   behind it. On a grid of 156 stock photographs, three real puppies is the one
   thing on a card that is unarguably true of THIS shop today.

   Bottom-LEFT, because the flag already owns the top-right and the two must
   never meet: the photo is square, so at the narrowest column they are still
   the full height of the image apart.
   -------------------------------------------------------------------------- */

.pb-bd-faces {
    position: absolute;
    /* Same inset as the flag opposite it, so the two read as a pair. */
    left: .875rem;
    bottom: .875rem;
    z-index: 1;
    display: flex;
    align-items: center;
    /* Overlap. Negative margin on every item but the first. */
    pointer-events: none;
}

.pb-bd-faces__item {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    /* A white collar, not a border: the ring must sit OUTSIDE the circle so the
       photograph is not cropped twice, and box-shadow does not affect layout.
       The second shadow is what keeps a pale puppy on a pale background from
       dissolving into it. */
    box-shadow: 0 0 0 2px var(--bd-surface), 0 1px 3px rgba(18, 31, 52, .28);
    background: var(--bd-sand);
}
.pb-bd-faces__item + .pb-bd-faces__item { margin-left: -9px; }

/* Stacking order runs left-over-right, which is how a stack of photographs
   actually sits. Without it the last child laps the first and the row reads
   backwards. */
.pb-bd-faces__item:nth-child(1) { z-index: 4; }
.pb-bd-faces__item:nth-child(2) { z-index: 3; }
.pb-bd-faces__item:nth-child(3) { z-index: 2; }
.pb-bd-faces__item:nth-child(4) { z-index: 1; }

.pb-bd-faces__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "+4" when the shelf is deeper than the three faces shown. Same circle, ink
   instead of a photograph, so the row keeps its rhythm. */
.pb-bd-faces__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bd-ink);
    color: #fff;
    font-size: .6875rem;   /* 11 */
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* Three 30px circles are a lot on a 150px-wide card. */
@media (max-width: 575.98px) {
    .pb-bd-faces { left: .625rem; bottom: .625rem; }
    .pb-bd-faces__item { width: 26px; height: 26px; }
    .pb-bd-faces__item + .pb-bd-faces__item { margin-left: -8px; }
    .pb-bd-faces__more { font-size: .625rem; }
}

/* --- "I'm interested" -----------------------------------------------------
   The in-stock counterpart to .pb-bd-breed__notify, and never shown beside it.

   Brand-filled where notify is a quiet outline, because the two say different
   things: one is "tell me later", the other is the action this whole page
   exists to produce. It stays small — the same 26px rail height as the chips
   beside it — so that forty of them down a grid read as a row of affordances
   rather than forty competing buttons, and so the featured card's full-width
   CTA is still plainly the largest thing on the screen.
   -------------------------------------------------------------------------- */

.pb-bd-breed__cta {
    /* Clears .pb-bd-breed__link::after (z-index 2), the stretched overlay that
       makes the whole card clickable. Without this the button is unreachable. */
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 .8125rem;
    border: 1px solid transparent;
    border-radius: var(--bd-pill);
    background: var(--bd-brand);
    color: var(--pb-on-primary, #fff);
    font: inherit;
    font-size: .75rem;      /* 12 */
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pb-bd-breed__cta:hover {
    background: var(--bd-brand-ink, var(--bd-brand));
    box-shadow: 0 2px 8px rgba(18, 31, 52, .18);
}
.pb-bd-breed__cta:active { transform: translateY(1px); }
.pb-bd-breed__cta:focus-visible {
    outline: 2px solid var(--bd-ink);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pb-bd-breed__cta { transition: none; }
}

.pb-bd-breed__link { text-decoration: none; color: inherit; }
/* Whole card clickable; accessible name stays just the breed. */
.pb-bd-breed__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }

/* The two-word character line — "Playful · Loyal" — derived in
   PuppyBreeds_Render::card_traits(). Four pixels smaller than the title but
   300 weight units and two ink steps below it; that inversion is the design. */
.pb-bd-breed__traits {
    margin: .375rem 0 0;
    font-size: .8125rem;    /* 13 */
    line-height: 1.4;       /* 18 */
    color: var(--bd-ink-muted);
}
/* The fallback, when a breed has no traits filled in and the card shows its
   description instead. */
.pb-bd-breed__traits--long {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-bd-breed__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wrap, so that when the chips plus the notify button are a few pixels too
       wide for the card — which happens at the narrow end of three columns —
       the BUTTON drops to its own right-aligned line instead of squeezing the
       chips into a ragged two-row block with the button floating beside it. */
    flex-wrap: wrap;
    gap: .5rem;
    /* auto pushes the rail to the bottom so every card in a row ends alike. */
    margin: auto 0 0;
    padding-top: .75rem;
}
.pb-bd-breed__foot .pb-bd-chips { min-width: 0; }

/* Notify trigger on out-of-stock cards. It rides the chip rail rather than
   taking its own row, so a card with one does not make every card in the grid
   taller. z-index clears the card's stretched link so it stays clickable. */
.pb-bd-breed__notify {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    margin-inline-start: auto;
    min-height: 26px;
    padding: 0 .75rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: transparent;
    color: var(--bd-ink-muted);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pb-bd-breed__notify:hover {
    border-color: var(--bd-brand);
    background: var(--bd-brand-wash);
    color: var(--bd-brand-ink);
}

.pb-bd-avail {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .1875rem .5rem;
    border-radius: var(--bd-pill);
    font-size: .8125rem; font-weight: 600;
    background: var(--bd-ok-wash); color: var(--bd-ok); border: 1px solid var(--bd-ok-edge);
}
.pb-bd-avail::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   Single breed
   ========================================================================== */

.pb-bd-bar {
    background: var(--bd-surface);
    border-bottom: 1px solid var(--bd-hairline);
}
.pb-bd-bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; min-height: 56px; padding-block: .5rem;
}
.pb-bd-back {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; color: var(--bd-ink); font-weight: 600; text-decoration: none;
}
.pb-bd-back:hover { color: var(--bd-brand-ink); }
.pb-bd-back svg { transition: transform .15s ease; }
.pb-bd-back:hover svg { transform: translateX(-2px); }

.pb-bd-crumbs {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .875rem;
}
.pb-bd-crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--bd-ink-muted); }
.pb-bd-crumbs a { color: var(--bd-ink-muted); text-decoration: none; }
.pb-bd-crumbs a:hover { color: var(--bd-brand-ink); text-decoration: underline; }
.pb-bd-crumbs [aria-current="page"] { color: var(--bd-ink); font-weight: 600; }

.pb-bd-single { padding-block: var(--bd-block); }

.pb-bd-single__grid {
    display: grid;
    /* minmax(0, 1fr), never plain 1fr: a 1fr track takes min-content as its
       automatic minimum, and .pb-bd-main's min-content is the full un-wrapped
       width of the jump-link row. That floored the column at 566px and scrolled
       the whole single page sideways on every phone. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: start;
}
/* Same reason, for the item itself. */
.pb-bd-main { min-width: 0; }
@media (min-width: 1024px) {
    .pb-bd-single__grid { grid-template-columns: minmax(0, 1fr) 23.6875rem; }
}

/*
 * The rail is pinned only on a viewport tall enough to hold it.
 *
 * Measured: call CTA + lead form comes to ~982px, so on a 900px laptop the
 * pinned rail either cut off the form's submit button or — once capped with
 * max-height and overflow-y — trapped it behind a nested scrollbar sitting
 * alongside the page's own. Both are worse than not pinning. Above this height
 * the rail fits with room to spare, so it pins and the phone numbers stay on
 * screen for the whole page; below it, the rail simply scrolls with the page.
 *
 * The cap stays inside the query as a backstop for a site whose form is longer
 * than the one shipped here.
 */
@media (min-width: 1024px) and (min-height: 1120px) {
    .pb-bd-aside {
        position: sticky;
        /* Same token the jump-link scroll-margin uses, rather than hard-coding
           an assumption about the theme's sticky header. */
        top: var(--pb-sticky-offset, 6rem);
        max-height: calc(100vh - var(--pb-sticky-offset, 6rem) - 1.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.pb-bd-media {
    margin: 0 0 var(--bd-block);
    border-radius: var(--bd-radius);
    overflow: hidden;
    background: var(--bd-sand);
    box-shadow: var(--bd-shadow);
    aspect-ratio: 16 / 9;
}
.pb-bd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Square white-background cut-outs would be cropped by `cover`. */
.pb-bd-media--contain { background: var(--bd-surface); aspect-ratio: 4 / 3; }
.pb-bd-media--contain img { object-fit: contain; }

.pb-bd-section {
    margin-bottom: 1.5rem;
    /* Reaches the reference's flat 32px by the time the container caps at
       1280px; the old 1vw slope only got to 30.4px on a 1440 viewport. */
    padding: clamp(1.25rem, .9rem + 1.4vw, 2rem);
    background: var(--bd-surface);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius);
    box-shadow: 0 1px 3px rgba(31, 26, 22, .09), 0 1px 2px -1px rgba(31, 26, 22, .09);
}
.pb-bd-section--plain { background: none; border: 0; padding-inline: 0; }

.pb-bd-section__head { display: flex; align-items: center; gap: .625rem; margin-bottom: 1.25rem; }
.pb-bd-section__icon { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; color: var(--bd-brand); }
.pb-bd-section__icon svg { width: 22px; height: 22px; }

.pb-bd-prose { max-width: var(--bd-measure); color: var(--bd-ink-soft); }
.pb-bd-prose p { margin: 0 0 1rem; line-height: 1.75; }
.pb-bd-prose p:last-child { margin-bottom: 0; }
.pb-bd-prose a { color: var(--bd-brand-ink); }

/* Facts */
/* Two columns, matching the reference. auto-fit would give three at this
   content width, which fills the row but reads busier than the design. */
.pb-bd-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 560px) {
    .pb-bd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pb-bd-fact__label {
    margin: 0 0 .125rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--bd-ink-muted);
}
.pb-bd-fact__value { display: flex; align-items: flex-start; gap: .5rem; margin: 0; line-height: 1.5; color: var(--bd-ink); }
/* em, not rem — tracks the inherited face's metrics instead of one font's. */
.pb-bd-fact__value svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .25em; color: var(--bd-brand); }

/* Sidebar CTA */
/*
 * A panel, not a brand-filled block.
 *
 * 2.3.x painted this solid brand. The 2.5.0 page already has a brand-filled
 * primary action in the hero and another on the form's submit, and a third
 * full-bleed brand block in the rail made the page read as three competing
 * offers. The call buttons inside it already carry a brand edge, so the panel
 * only has to hold them.
 */
.pb-bd-cta {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border-radius: var(--bd-radius);
    background: var(--bd-panel);
    border: 1px solid var(--bd-hairline);
    color: var(--bd-ink);
    box-shadow: var(--bd-shadow-sm);
}
.pb-bd-cta__title {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .5rem;
    font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em;
    color: var(--bd-ink);
}
.pb-bd-cta__title svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--bd-brand); }
.pb-bd-cta__text {
    margin: 0 0 1.125rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--bd-ink-muted);
}

.pb-bd-form { margin-top: 1rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--bd-surface); border: 1px solid var(--bd-hairline); border-radius: var(--bd-radius); }
.pb-bd-form__title { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.pb-bd-form__note { margin: 0 0 1.25rem; color: var(--bd-ink-muted); font-size: .9375rem; line-height: 1.5; }

/* Puppy cards */
/*
 * Bigger tiles than 2.5.0 shipped: 12rem tracks meant a breed with two puppies
 * showed them at ~199px inside an 846px column, three-quarters of which stayed
 * empty. These photographs are the single most persuasive thing on the page —
 * the reason someone rings the store — so they get the room. 15rem gives three
 * up on desktop at ~271px, two up on a tablet, one on a phone.
 *
 * auto-fill, not auto-fit: with one puppy in stock auto-fit would stretch a
 * single tile to the full 846px, which reads as a hero image rather than as one
 * of a litter.
 */
.pb-bd-puppies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.125rem; }
.pb-bd-puppy {
    position: relative; display: block;
    border: 1px solid var(--bd-hairline); border-radius: var(--bd-radius);
    overflow: hidden; background: var(--bd-surface);
    text-decoration: none; color: inherit;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pb-bd-puppy:hover { box-shadow: var(--bd-shadow); transform: translateY(-2px); color: inherit; }
.pb-bd-puppy__media { display: block; aspect-ratio: 1 / 1; background: var(--bd-sand); }
.pb-bd-puppy__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-bd-puppy__foot {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .125rem .5rem;
    padding: .75rem .875rem; font-size: .875rem;
}
.pb-bd-puppy__sex { font-weight: 700; }
.pb-bd-puppy__colour { color: var(--bd-ink-muted); }

/* The out-of-stock reassurance under the hero actions. Quiet, and set to the
   lead's measure so it reads as a continuation of the intro rather than as a
   notice bolted on. */
.pb-bd-bhero__note {
    max-width: 46ch;
    margin: .875rem 0 0;
    font-size: .9375rem;   /* 15 */
    line-height: 1.55;
    color: var(--bd-ink-muted);
}

/* --- "Read more" disclosure on the About section ---------------------------
   Deliberately NOT styled like the FAQ rows below, which are also <details>:
   those are a list of questions and read as a table of contents. This is one
   continuous passage of prose interrupted by a control, so the control reads as
   a text action inside the paragraph flow, not as a row in a list.
   -------------------------------------------------------------------------- */

.pb-bd-readmore { margin-top: .25rem; }

.pb-bd-readmore__toggle {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    /* 44px of vertical target without 44px of visible chrome. */
    padding: .625rem 0;
    font-size: .9375rem;   /* 15 */
    font-weight: 700;
    color: var(--bd-brand);
    cursor: pointer;
    list-style: none;
    /* The summary is the only focusable thing here, so it must show focus. */
    border-radius: var(--bd-radius-xs);
}
.pb-bd-readmore__toggle::-webkit-details-marker { display: none; }
.pb-bd-readmore__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.pb-bd-readmore__toggle:focus-visible {
    outline: 2px solid var(--bd-brand);
    outline-offset: 3px;
}

/* A chevron, drawn rather than shipped, that flips on open. */
.pb-bd-readmore__toggle::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: .125rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.pb-bd-readmore[open] > .pb-bd-readmore__toggle::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* One label element per state, so the accessible name changes with the state
   rather than staying "Read more" on an already-open section. */
.pb-bd-readmore__close { display: none; }
.pb-bd-readmore[open] > .pb-bd-readmore__toggle .pb-bd-readmore__open { display: none; }
.pb-bd-readmore[open] > .pb-bd-readmore__toggle .pb-bd-readmore__close { display: inline; }

/* The remainder inherits the prose rhythm it was cut out of. */
.pb-bd-readmore__body > :first-child { margin-top: 0; }
.pb-bd-readmore__body > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .pb-bd-readmore__toggle::after { transition: none; }
}

/* FAQ */
.pb-bd-faq { border-top: 1px solid var(--bd-hairline); }
.pb-bd-faq:first-of-type { border-top: 0; }
.pb-bd-faq > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 56px; padding: .875rem 0;
    font-weight: 600; color: var(--bd-ink); cursor: pointer; list-style: none;
}
.pb-bd-faq > summary::-webkit-details-marker { display: none; }
.pb-bd-faq > summary::after {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px;
    /* Absorbs the ~2px a 45deg-rotated 10px square spills past its layout box.
       Transformed boxes count toward scrollable overflow, so without this every
       FAQ row reported a 2px horizontal scroll at every width. */
    margin-inline-end: 3px;
    border-right: 2px solid var(--bd-ink-muted); border-bottom: 2px solid var(--bd-ink-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.pb-bd-faq[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.pb-bd-faq__body { padding-bottom: 1.125rem; }

/* ==========================================================================
   Single breed — 2.5.0

   Everything below is new for the single-breed page and scoped to it or to its
   own block classes, so the archive that ships alongside it is untouched.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

/* The bar is a full-bleed white strip with its own bottom rule, so the panel
   needs real air under it — without the top value the hero sat flush against
   the rule and read as one merged block. */
.pb-bd-bhero {
    padding-block: clamp(1.25rem, .9rem + 1.4vw, 1.75rem) clamp(1.25rem, .8rem + 1.4vw, 1.75rem);
}

.pb-bd-bhero__panel {
    padding: clamp(1.5rem, .9rem + 2.4vw, 2.75rem);
    background: linear-gradient(225deg, var(--bd-panel-cool) 0%, var(--bd-panel) 60%);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius-xl);
    box-shadow: var(--bd-shadow-lg);
}

.pb-bd-bhero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
    align-items: start;
}
@media (min-width: 900px) {
    /* The photo is square and the copy needs the room, so the text column
       leads. 22rem holds a 2000px square at a sensible size without letting it
       dominate a page whose job is the data below it. */
    .pb-bd-bhero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}

.pb-bd-bhero__media {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--bd-radius-lg);
    overflow: hidden;
    background: var(--bd-surface);
    box-shadow: inset 0 0 0 1px var(--bd-hairline);
}
.pb-bd-bhero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A portrait cut-out on white would be cropped by `cover`; contain it instead
   and let the plate show through. Set from the attachment's real ratio. */
.pb-bd-bhero__media--contain img { object-fit: contain; }

.pb-bd-bhero__flag {
    position: absolute; top: .875rem; left: .875rem; z-index: 1;
    display: inline-flex; align-items: center; gap: .375rem;
    min-height: 26px;
    padding: 0 .75rem;
    border-radius: var(--bd-pill);
    background: var(--bd-badge);
    box-shadow: inset 0 0 0 1px var(--bd-hairline);
    color: var(--bd-ok);
    font-size: .75rem; line-height: 1.2; font-weight: 700;
}
.pb-bd-bhero__flag::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}

.pb-bd-bhero__actions {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* --- Stat row: the headline numbers --------------------------------------
   Four figures, not four charts. A single value is a stat tile; a one-bar bar
   chart is the classic way to get this wrong.
   ------------------------------------------------------------------------- */

.pb-bd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: .75rem;
    margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
    padding: 0;
    list-style: none;
}
.pb-bd-stat {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    padding: .875rem 1rem;
    background: var(--bd-surface);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius-md);
}
.pb-bd-stat__label {
    font-size: .6875rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bd-ink-muted);
}
.pb-bd-stat__value {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bd-ink);
}
.pb-bd-stat__unit {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--bd-ink-muted);
}

/* --- Trait meters --------------------------------------------------------
   Five segments, one hue, length carries the value. Deliberately NOT a
   value-ramp: painting a high Shedding score in a "warning" colour would tell
   the reader it is bad news, which is an opinion the data does not hold. The
   word beside each track is the accessible value, so colour is never the only
   carrier and the whole thing survives forced-colors intact.
   ------------------------------------------------------------------------- */

/* start, not stretch: a group with two meters should be a short card, not a
   tall one with a hole in the bottom half. */
.pb-bd-traits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
    gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
}

/* The one-line explainer under a section heading. */
.pb-bd-section__note {
    margin: -.25rem 0 1.25rem;
    max-width: 62ch;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--bd-ink-muted);
}

.pb-bd-traitgroup {
    padding: clamp(1.125rem, .9rem + .7vw, 1.5rem);
    background: var(--bd-surface);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow-sm);
}
.pb-bd-traitgroup__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0 0 1rem;
}
.pb-bd-traitgroup__icon {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border-radius: var(--bd-radius-xs);
    background: var(--bd-brand-wash);
    color: var(--bd-brand);
}
.pb-bd-traitgroup__icon svg { width: 16px; height: 16px; display: block; }
.pb-bd-traitgroup__title {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bd-ink);
}

.pb-bd-traitgroup__list { margin: 0; padding: 0; list-style: none; }
.pb-bd-traitgroup__list > li + li { margin-top: .875rem; }

/*
 * Flex, not a two-column grid. With `1fr auto` the value column takes its
 * max-content width, so a long label like "Never met a stranger" pushed the row
 * — and the full-width track under it — straight out through the card's right
 * edge. Both parts shrink here, and the word wraps rather than overflowing.
 */
.pb-bd-meter { display: flex; flex-direction: column; gap: .375rem; }
.pb-bd-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
}
.pb-bd-meter__label {
    min-width: 0;
    flex: 1 1 auto;
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--bd-ink-soft);
}
.pb-bd-meter__word {
    min-width: 0;
    flex: 0 1 auto;
    text-align: right;
    font-size: .8125rem;
    line-height: 1.3;
    font-weight: 600;
    /* Ink, not the mark colour: text wears text tokens. */
    color: var(--bd-ink);
}
.pb-bd-meter__track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* The 2px surface gap that separates adjacent fills. */
    gap: 2px;
    height: 6px;
}
.pb-bd-meter__seg {
    /* The unfilled track is a lighter step of the same ramp, so the state reads
       across the whole bar rather than stopping at the fill. */
    background: var(--bd-brand-wash);
    border-radius: 2px;
}
.pb-bd-meter__seg:first-child { border-start-start-radius: 4px; border-end-start-radius: 4px; }
.pb-bd-meter__seg:last-child  { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.pb-bd-meter__seg.is-on { background: var(--bd-brand); }

@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .pb-bd-meter__seg { background: var(--bd-sand); }
}

/* --- Fact list (the stated values that are not a 1-5 scale) --------------- */

.pb-bd-factlist { margin: 0; }
.pb-bd-factlist > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--bd-hairline);
}
.pb-bd-factlist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pb-bd-factlist dt { margin: 0; font-size: .8125rem; color: var(--bd-ink-muted); }
.pb-bd-factlist dd { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--bd-ink); text-align: right; }

/* --- Tag row (the boolean traits worth stating) --------------------------- */

.pb-bd-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pb-bd-tag {
    display: inline-flex; align-items: center; gap: .375rem;
    min-height: 28px;
    padding: 0 .75rem;
    border-radius: var(--bd-pill);
    background: var(--bd-chip);
    color: var(--bd-ink-soft);
    font-size: .75rem; font-weight: 600; line-height: 1.2;
}
.pb-bd-tag svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--bd-brand); }

/* ==========================================================================
   Focus, motion, print
   ========================================================================== */

/* No border-radius here: it doesn't shape the outline (browsers already follow
   the element's own radius) — it MUTATES the control, snapping pill inputs and
   the 20px call buttons to 10px while focused.
   The white halo is declared rather than inherited: #0b57d0 on the brand fill is
   1.28:1, so inside .pb-bd-cta the ring is only visible because of a halo the
   OLD sheet happens to supply. Owning it here means tidying that sheet can't
   silently blind focus on the highest-value control on the page. */
.pb-bd :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pb-focus-ring, #0b57d0);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff;
}
/* The card's stretched link would otherwise show its ring around the whole
   card edge-to-edge; ring the card instead. */
.pb-bd-breed:has(.pb-bd-breed__link:focus-visible) {
    outline: 2px solid var(--pb-focus-ring, #0b57d0);
    outline-offset: 2px;
}
/* box-shadow too, or the inherited halo draws a white glow around the title
   text inside the card's own focus ring. */
.pb-bd-breed .pb-bd-breed__link:focus-visible { outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .pb-bd *, .pb-bd *::before, .pb-bd *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* In forced-colors the selected letter and the engaged availability filter lose
   their brand fill, and nothing else distinguishes them. */
@media (forced-colors: active) {
    .pb-bd-letters__btn[aria-pressed="true"],
    .pb-bd-toggle__input:checked + .pb-bd-toggle__face {
        border: 2px solid Highlight;
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }
    .pb-bd-breed, .pb-bd-feature, .pb-bd-hero__panel { border: 1px solid CanvasText; }
}

@media print {
    .pb-bd-aside, .pb-bd-filters, .pb-bd-letters, .pb-bd-bar { display: none !important; }
    .pb-bd { background: #fff; }
    .pb-bd-section, .pb-bd-breed, .pb-bd-puppy { box-shadow: none; break-inside: avoid; }
    .pb-bd-faq > summary::after { display: none; }
    .pb-bd-faq__body { display: block !important; }
}

/* Sub-headings inside a section (characteristic tab titles). */
.pb-bd-subhead {
    margin: 1.5rem 0 .5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bd-ink);
}
.pb-bd-subhead:first-of-type { margin-top: 0; }

/* Responsive video frame. */
.pb-bd-embed {
    border-radius: var(--bd-radius-sm);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bd-sand);
}
.pb-bd-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.pb-bd-btn--block { width: 100%; margin-top: .75rem; }
.pb-bd-formmsg { margin-top: .75rem; }
.pb-bd-crumbbar { padding-block: 1.25rem 1.125rem; }

/* ==========================================================================
   Restored utilities

   Sharing, section jump links, adjacent-breed navigation and back-to-top all
   existed on the previous template. The first cut of this redesign dropped
   them; they are features and internal links, not decoration, so they return —
   restyled to sit quietly inside the new design rather than compete with it.
   ========================================================================== */

.pb-bd-share {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
}
.pb-bd-share__label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bd-ink-muted);
    margin-right: .125rem;
}
.pb-bd-share__btn {
    display: inline-grid;
    place-items: center;
    /* 44px: the old sheet had these at 44 and shrinking them was a regression. */
    width: 44px;
    height: 44px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    color: var(--bd-ink-muted);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pb-bd-share__btn svg { width: 16px; height: 16px; display: block; }
.pb-bd-share__btn:hover {
    color: var(--bd-brand);
    border-color: var(--bd-brand-edge);
    background: var(--bd-brand-wash);
}

/* Section jump links */
.pb-bd-jump {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    margin: 0 0 var(--bd-block);
    padding-bottom: .375rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}
.pb-bd-jump__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .875rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    color: var(--bd-ink-soft);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pb-bd-jump__link:hover {
    color: var(--bd-brand-ink);
    border-color: var(--bd-brand-edge);
    background: var(--bd-brand-wash);
}

/* Anchored sections must clear a sticky theme header when jumped to. */
.pb-bd [id] { scroll-margin-top: var(--pb-sticky-offset, 6rem); }

/* Adjacent breeds */
.pb-bd-adjacent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
    margin-top: var(--bd-block);
}
.pb-bd-adjacent__link {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius);
    background: var(--bd-surface);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pb-bd-adjacent__link:hover {
    border-color: var(--bd-brand-edge);
    box-shadow: var(--bd-shadow);
    transform: translateY(-1px);
}
.pb-bd-adjacent__link--next { text-align: right; }
.pb-bd-adjacent__label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bd-ink-muted);
}
.pb-bd-adjacent__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bd-ink);
}

/* ==========================================================================
   Lead form

   Styled here rather than inherited from puppy-breeds.css. The old sheet's form
   rules were written for the previous hero layout, so relying on them left the
   sidebar form visually detached from the design around it — and made the
   design dependent on a stylesheet it should be able to stand without.

   Gravity Forms is styled through the same variables, so the GF path and the
   built-in fallback look identical.
   ========================================================================== */

.pb-bd-form .pb-lead-form__field,
.pb-bd-form .gform_wrapper.gravity-theme .gfield {
    margin-bottom: 1rem;
}

.pb-bd-form label,
.pb-bd-form .gform_wrapper.gravity-theme .gfield_label {
    display: block;
    margin: 0 0 .375rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--bd-ink);
}

.pb-bd-form input[type="text"],
.pb-bd-form input[type="email"],
.pb-bd-form input[type="tel"],
.pb-bd-form input[type="url"],
.pb-bd-form input[type="number"],
.pb-bd-form select,
.pb-bd-form textarea,
.pb-bd-form .gform_wrapper.gravity-theme input[type="text"],
.pb-bd-form .gform_wrapper.gravity-theme input[type="email"],
.pb-bd-form .gform_wrapper.gravity-theme input[type="tel"],
.pb-bd-form .gform_wrapper.gravity-theme select,
.pb-bd-form .gform_wrapper.gravity-theme textarea {
    width: 100%;
    min-height: 48px;
    padding: .75rem 1rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-bg);
    color: var(--bd-ink);
    font: inherit;
    font-size: max(1rem, 16px);   /* no iOS zoom-on-focus */
    line-height: 1.4;
    transition: border-color .15s ease, background-color .15s ease;
}
.pb-bd-form textarea { min-height: 96px; resize: vertical; }

.pb-bd-form :is(input, select, textarea)::placeholder { color: var(--bd-ink-muted); }

.pb-bd-form :is(input, select, textarea):hover { border-color: var(--bd-ink-muted); }
.pb-bd-form :is(input, select, textarea):focus {
    border-color: var(--bd-brand);
    background: var(--bd-surface);
    outline: 2px solid var(--pb-focus-ring, #0b57d0);
    outline-offset: 1px;
}

.pb-bd-form .gform_wrapper.gravity-theme .gform_footer { margin: 1rem 0 0; padding: 0; }
.pb-bd-form .gform_wrapper.gravity-theme input[type="submit"],
.pb-bd-form .gform_wrapper.gravity-theme button[type="submit"] {
    width: 100%;
    min-height: 48px;
    padding: .875rem 1.5rem;
    border: 0;
    border-radius: var(--bd-radius-sm);
    background: var(--bd-brand);
    color: var(--bd-on-brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.pb-bd-form .gform_wrapper.gravity-theme input[type="submit"]:hover {
    background: var(--pb-primary-hover, var(--bd-brand));
}

/* Validation + status */
.pb-bd-form .gform_wrapper.gravity-theme .gfield_required { color: var(--bd-brand); }
.pb-bd-form .gform_wrapper.gravity-theme .validation_message {
    margin-top: .375rem;
    font-size: .875rem;
    color: #b3261e;                 /* 5.9:1 on white */
}
.pb-bd-formmsg {
    padding: .75rem 1rem;
    border-radius: var(--bd-radius-sm);
    font-size: .9375rem;
}
.pb-bd-formmsg.pb-form-message--success { background: #e8f5ec; color: #146c43; }
.pb-bd-formmsg.pb-form-message--error   { background: #fdeceb; color: #b3261e; }

/* Honeypot must stay unreachable and invisible. */
.pb-bd-form .pb-sr-only:not(:focus):not(:active) {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}


/* ==========================================================================
   Legacy-class neutralisation

   The templates deliberately carry BOTH the design classes and the old ones,
   because assets/js/puppy-breeds.js binds to the old names. puppy-breeds.css
   loads first, so wherever this sheet does not declare a property, the old
   sheet's value for that old class simply wins — not by specificity, by
   default. That produced grey bands behind the prev/next pair and the jump
   links, centred card text against the spec, a drop shadow and a 200ms
   invisibility delay on the sidebar form, and a brand glow under a button meant
   to be flat.

   Everything here resets ONLY the properties that actually leak, scoped inside
   .pb-bd so nothing outside the redesigned pages is affected.
   ========================================================================== */

/* Cards: the reference sets the title and copy left. */
.pb-bd .pb-breed-card__content,
.pb-bd .pb-bd-breed__body { text-align: left; }

/* Containers that arrived wearing the old layout's chrome. */
.pb-bd .pb-bd-adjacent.pb-breed-nav { padding: 0; background: none; border-top: 0; }
.pb-bd .pb-bd-jump.pb-quick-nav { padding-top: 0; background: none; border-bottom: 0; }
.pb-bd .pb-bd-share.pb-social-share { padding-top: 0; border-top: 0; }

/* Share row: the label is a flex item in a centred row, so its block margin
   pushed it off-centre; the buttons were told to lift and scale 110%. */
.pb-bd .pb-bd-share__label { display: inline; margin: 0 .125rem 0 0; }
.pb-bd .pb-bd-share__btn { box-shadow: none; }
.pb-bd .pb-bd-share__btn:hover { transform: none; box-shadow: none; }
.pb-bd .pb-bd-share__btn.copied {
    background: var(--bd-brand-wash);
    border-color: var(--bd-brand);
    color: var(--bd-brand-ink);
}

/* Sidebar form: a 20px-blur shadow plus a second hairline ring on top of our
   1px border, and an entrance animation that left it invisible for 200ms. */
.pb-bd .pb-bd-form.pb-lead-form { box-shadow: none; animation: none; opacity: 1; }
.pb-bd .pb-lead-form__body { padding: 0; }
.pb-bd .pb-bd-btn.pb-lead-form__submit { box-shadow: none; }
.pb-bd .pb-bd-btn.pb-lead-form__submit:hover { transform: none; box-shadow: none; }

/* Listing wrapper: 48px of its own padding stacked on the filter bar's margin. */
.pb-bd.pb-breeds-listing,
.pb-bd .pb-breeds-listing { padding-block: 0; }

/* Search wrapper: display/max-width/auto-margins from the old centred layout. */
.pb-bd .pb-bd-search.pb-search-wrap { display: block; max-width: none; margin: 0; }
.pb-bd .pb-bd-filters.pb-filter-controls { justify-content: flex-start; }

/* Cards: the old sheet clips the card (hiding the focus ring), gives it a 3D
   perspective for a flip feature this template does not use, and lifts it 4px
   on hover with its own shadow. (0,1,0) each, so the design layer wins by
   order — but only where it declares the property, hence all four. */
.pb-bd .pb-breed-card.pb-bd-breed { overflow: visible; perspective: none; }

/* The A-Z active state arrives with a brand-coloured drop shadow under it. */
.pb-bd .pb-bd-letters__btn.pb-filter-bar__btn--active { box-shadow: none; }

/* .pb-breeds-count from the old sheet centres this, gives it 24px of bottom
   margin and its own font-size — all at (0,2,0), which beats the plain
   .pb-bd-resulthead__count rule above. */
.pb-bd .pb-breeds-count {
    text-align: right;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--bd-ink-muted);
}
.pb-bd .pb-breeds-count .pb-breeds-count__visible { font-weight: 600; color: var(--bd-ink-soft); }
@media (max-width: 480px) {
    .pb-bd .pb-breeds-count { text-align: left; }
}

/* The only place the old sheet wins on specificity (0,2,1 vs 0,1,1). The
   availability input is clipped to 1px now, so it must NOT be re-sized here. */
.pb-bd .pb-bd-toggle input[type="checkbox"].pb-bd-toggle__input {
    width: 1px; height: 1px; accent-color: auto;
}

/* ==========================================================================
   States the design layer previously left to the old sheet

   These components render INSIDE .pb-bd but had no rules here, so they showed
   up in the old cool-grey palette in the middle of the warm one. The empty
   state is the most-seen of them — it is what a visitor gets whenever a search
   returns nothing.
   ========================================================================== */

/* The JS inserts this AFTER the grid, not inside it, so grid-column is for the
   case where a theme moves it. */
.pb-bd .pb-empty-state {
    grid-column: 1 / -1;
    margin-bottom: var(--bd-block);
    padding: clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem;
    background: var(--bd-surface);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius-lg);
    box-shadow: var(--bd-shadow-sm);
    text-align: center;
    color: var(--bd-ink-muted);
}
.pb-bd .pb-empty-state__suggestion { margin: 1.25rem 0 .75rem; }
.pb-bd .pb-empty-state__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pb-bd .pb-empty-state__title { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; color: var(--bd-ink); }
.pb-bd .pb-empty-state__text { margin: 0 0 1.25rem; }
.pb-bd .pb-empty-state__icon svg { width: 40px; height: 40px; color: var(--bd-brand); opacity: .8; }
.pb-bd .pb-empty-state__pill,
.pb-bd .pb-popular-breeds__pill {
    display: inline-flex; align-items: center;
    min-height: 40px; margin: .25rem;
    padding: 0 .875rem;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    color: var(--bd-ink);
    font: inherit; font-size: .875rem; font-weight: 600;
    cursor: pointer;
}
.pb-bd .pb-empty-state__pill:hover,
.pb-bd .pb-popular-breeds__pill:hover {
    border-color: var(--bd-brand); background: var(--bd-brand-wash); color: var(--bd-brand-ink);
}
/* Pill, like every other action in this design. The old sheet also hangs a
   brand-tinted drop shadow off these; the design uses shadow for elevation,
   not for emphasis. */
.pb-bd .pb-button,
.pb-bd .pb-end-cta__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .875rem 1.75rem;
    border: 0; border-radius: var(--bd-pill);
    background: var(--bd-brand); color: var(--bd-on-brand);
    font: inherit; font-size: 1rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    box-shadow: none; text-transform: none; letter-spacing: normal;
}
.pb-bd .pb-button:hover,
.pb-bd .pb-end-cta__btn:hover {
    background: var(--pb-primary-hover, var(--bd-brand));
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   Inline CTA tile

   Built to the breed card's anatomy — same radius, same 17/13 type steps, same
   bottom rail — so a row of four reads as one row rather than three cards and
   an advertisement. The inversion is the only thing that separates it: the
   breed card is a white surface holding a tinted plate, this is a tinted
   surface holding a white one.
   ========================================================================== */

/* --- Inline CTA tile ------------------------------------------------------
   The one INVERTED card in the grid. Every breed card is a white plate with a
   photograph; this is a brand-coloured plate with words. That single reversal
   is what makes it noticeable — a row reads as three dogs and one offer — and
   it is also what keeps it from needing anything louder: no gradient, no glow,
   no dashed border, none of the things the legacy sheet reached for.

   All selectors are (0,2,0)+ under .pb-bd because puppy-breeds.css loads first
   and styles .pb-cta-card with a dashed 2px border, a teal gradient, centred
   text and a 280px min-height. Every one of those is overridden below.
   -------------------------------------------------------------------------- */

.pb-bd .pb-cta-card {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;   /* content sits low, like the breed card's rail */
    gap: 0;
    padding: 1.5rem 1.375rem 1.375rem;
    background: var(--bd-brand);
    border: 1px solid transparent;
    border-radius: var(--bd-radius-lg);
    color: var(--bd-on-brand);
    text-align: left;
    box-shadow: var(--bd-shadow);
    overflow: hidden;
    transition: box-shadow .16s ease, transform .16s ease;
}
/* Two soft discs, drawn not shipped, so the plate is a surface and not a
   swatch. Low alpha: they lift the corner, they do not become a pattern. */
.pb-bd .pb-cta-card::before,
.pb-bd .pb-cta-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}
.pb-bd .pb-cta-card::before { width: 220px; height: 220px; top: -90px; right: -70px; }
.pb-bd .pb-cta-card::after  { width: 120px; height: 120px; top: 60px;  right: 40px; background: rgba(255, 255, 255, .05); }

.pb-bd .pb-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bd-shadow-hover);
}

.pb-bd .pb-cta-card__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0 0 auto;            /* pushes everything below to the bottom */
    position: relative;
}

/* The icon plate: white-on-brand, the reverse of the featured card's dot. */
.pb-bd .pb-cta-card__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: var(--bd-radius-sm);
    background: rgba(255, 255, 255, .16);
    color: var(--bd-on-brand);
    box-shadow: none;
}
/* color on the SVG itself, not just the parent: the legacy sheet declares
   `.pb-cta-card__icon svg { color: white }`, which happens to agree now — but
   an explicit declaration here means the tile does not depend on it. */
.pb-bd .pb-cta-card__icon svg {
    width: 22px;
    height: 22px;
    display: block;
    color: var(--bd-on-brand);
}

.pb-bd .pb-cta-card__eyebrow {
    margin: 0;
    font-size: .6875rem;    /* 11 */
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bd-on-brand);
    opacity: .82;
}

/* A styled <p>, not a heading — see the note in content-cta-card.php. */
.pb-bd .pb-cta-card__title {
    position: relative;
    margin: 1.5rem 0 0;
    font-size: 1.3125rem;   /* 21 — one step above the card title's 17 */
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--bd-on-brand);
    text-transform: none;
    text-wrap: balance;
}
.pb-bd .pb-cta-card__text {
    position: relative;
    margin: .625rem 0 0;
    font-size: .875rem;     /* 14 */
    line-height: 1.55;
    color: var(--bd-on-brand);
    opacity: .9;            /* white at 90% on the brand: 5.6:1 on #b7511b */
}

/* The button is the tile's white plate — the breed card relationship, again
   reversed — and the only white rectangle in the tile, so the eye lands on it. */
.pb-bd .pb-cta-card__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    align-self: stretch;
    min-height: 44px;
    margin-top: 1.25rem;
    padding: 0 1.125rem;
    border: 0;
    border-radius: var(--bd-pill);
    background: var(--bd-surface);
    color: var(--bd-brand-ink);
    font: inherit;
    font-size: .9375rem;    /* 15 */
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(18, 31, 52, .12);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.pb-bd .pb-cta-card__btn svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .15s ease; }
.pb-bd .pb-cta-card__btn:hover {
    transform: none;
    background: var(--bd-surface);
    color: var(--bd-brand-ink);
    box-shadow: 0 3px 10px rgba(18, 31, 52, .18);
}
.pb-bd .pb-cta-card__btn:hover svg { transform: translateX(2px); }
.pb-bd .pb-cta-card__btn:focus-visible {
    outline: 2px solid var(--bd-on-brand);
    outline-offset: 3px;
}

/* "No fee. No obligation." — the reassurance, directly under the button. */
.pb-bd .pb-cta-card__note {
    position: relative;
    margin: .625rem 0 0;
    font-size: .75rem;      /* 12 */
    line-height: 1.4;
    font-weight: 600;
    color: var(--bd-on-brand);
    opacity: .78;
}

/* Secondary actions, quiet, under everything. */
.pb-bd .pb-cta-card__alt,
.pb-bd .pb-cta-card__call {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .875rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bd-on-brand);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: 3px;
    white-space: nowrap;
}
.pb-bd .pb-cta-card__alt + .pb-cta-card__call { margin-top: .375rem; }
.pb-bd .pb-cta-card__call svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pb-bd .pb-cta-card__alt:hover,
.pb-bd .pb-cta-card__call:hover { color: var(--bd-on-brand); text-decoration-color: currentColor; }
.pb-bd .pb-cta-card__alt:focus-visible,
.pb-bd .pb-cta-card__call:focus-visible { outline: 2px solid var(--bd-on-brand); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 575.98px) {
    .pb-bd .pb-cta-card { padding: 1.25rem 1.125rem 1.125rem; }
    .pb-bd .pb-cta-card__title { font-size: 1.125rem; margin-top: 1.125rem; }
    .pb-bd .pb-cta-card::before { width: 160px; height: 160px; top: -70px; right: -60px; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-bd .pb-cta-card,
    .pb-bd .pb-cta-card__btn,
    .pb-bd .pb-cta-card__btn svg { transition: none; }
    .pb-bd .pb-cta-card:hover { transform: none; }
}

@media (forced-colors: active) {
    .pb-bd .pb-cta-card { border: 1px solid CanvasText; }
    .pb-bd .pb-cta-card__btn { border: 1px solid ButtonText; }
}

.pb-bd .pb-end-cta {
    margin: 0 0 var(--bd-block);
    padding: clamp(1.75rem, 1rem + 2.4vw, 3rem);
    background: var(--bd-panel);
    border: 1px solid var(--bd-hairline);
    border-radius: var(--bd-radius-xl);
    box-shadow: var(--bd-shadow);
    text-align: center;
}
.pb-bd .pb-end-cta__icon { margin-inline: auto; }
.pb-bd .pb-end-cta::before, .pb-bd .pb-end-cta::after { display: none; }
.pb-bd .pb-end-cta h3 { margin: 0 0 .5rem; font-size: 1.375rem; font-weight: 700; color: var(--bd-ink); }
.pb-bd .pb-end-cta p { margin: 0 0 1.25rem; color: var(--bd-ink-muted); }

/* ==========================================================================
   Refinements
   ========================================================================== */

/* Symmetry with --next, and the arrow should point the way it goes. */
.pb-bd-adjacent__link--prev { text-align: left; }

/* The blue ring on a brand-filled pill is 1.28:1; give it the halo too. */
.pb-bd-letters__btn[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--pb-focus-ring, #0b57d0); }

/* Nothing anywhere defined a disabled state. */
.pb-bd-btn:disabled, .pb-bd-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pb-bd-btn:disabled:hover { background: var(--bd-brand); }

/* On a phone the CTA is full width and calling is the primary action; don't
   cap a single store at 20rem inside a 400px card. */
@media (max-width: 767px) {
    .pb-bd-calls--single { grid-template-columns: 1fr; }
}

.pb-bd-seeall { margin: 1.25rem 0 0; }
.pb-bd-btn--ghost {
    background: var(--bd-surface);
    color: var(--bd-ink);
    border: 1px solid var(--bd-border);
}
.pb-bd-btn--ghost:hover { background: var(--bd-sand); color: var(--bd-ink); border-color: var(--bd-brand-edge); }

/* The h3 inside <summary> is semantic only — it must not change the chevron
   layout or the type. */
.pb-bd-faq__q { margin: 0; font: inherit; font-weight: 600; color: inherit; }