/*
 * Cosmick Areas Served — the frontend design layer.
 *
 * WHY A SECOND STYLESHEET
 * -----------------------
 * Registered as a DEPENDANT of `cas-frontend`:
 *
 *     wp_register_style('cas-design', …, array('cas-frontend'), CAS_VERSION);
 *
 * so it always cascades last by LOAD ORDER rather than by out-specifying the
 * sheet in front of it. The alternative — editing frontend.css in place — puts
 * every rule in one 1,300-line file where a change to a card can reach a hero,
 * and any site that has already overridden a frontend.css rule silently loses
 * its override. This way frontend.css keeps its :root contract and its
 * selectors exactly as they are, and everything below is additive.
 *
 * SCOPE
 * -----
 * Every rule is under `.cas-bd`, with page modifiers `.cas-area`, `.cas-item`
 * and `.cas-archive`. The tokens live on that root, not on `:root`, because a
 * plugin has no business putting `--cas-space-4` in the document scope where
 * it can collide with a theme's own naming.
 *
 * BOOTSTRAP
 * ---------
 * The templates use around forty Bootstrap utility classes. The Petland theme
 * compiles Bootstrap into its own stylesheet, so they resolve there and
 * nowhere else — `enqueue_bootstrap` defaults to false, so on any other theme
 * the archive grid was simply unstyled. The "Layout utilities" section owns
 * the ones the templates actually use, scoped under `.cas-bd` so we never
 * restyle the theme's own Bootstrap on the rest of the site. Class names in
 * the markup are unchanged: a site that DOES load Bootstrap keeps working, and
 * a theme override targeting `.row` still finds it.
 *
 * MOTION
 * ------
 * Only where it communicates state: a hover lift, a focus ring, a colour or
 * transform transition. No entrance animations, no scroll reveals, no
 * staggered fades. Decorative motion on a landing page costs Core Web Vitals
 * and makes the page feel slower than it is.
 *
 * @since 2.0.0
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.cas-bd {
    /* --- Surfaces. Four planes, and which one a thing sits on IS the design:
       page ground -> section panel -> card -> chip (the recessed one). A flat
       two-plane page is what makes a layout read as assembled rather than
       designed. */
    --cas-bd-bg:         #f4f5f7;   /* page ground                          */
    --cas-bd-panel:      #fdfdfe;   /* hero panel, light end of its gradient */
    --cas-bd-panel-cool: #f2f3f5;   /* hero panel, shaded end                */
    --cas-bd-surface:    #ffffff;   /* card                                  */
    --cas-bd-chip:       #eceff3;   /* the one recessed plane                */
    --cas-bd-border:     #dfe3e9;
    --cas-bd-hairline:   rgba(15, 23, 42, .09);

    /* --- Ink. Measured against the surfaces these actually sit on
       (#ffffff / #f7f8fa / #eef1f5):
         --cas-bd-ink        16.1 / 15.2 / 14.1
         --cas-bd-ink-soft    7.6 /  7.2 /  6.7
         --cas-bd-lead        5.9 /  5.6 /  5.2
         --cas-bd-ink-muted   4.8 /  4.6 /  4.5   <- still AA on the chip
       The old --cas-text-muted (#6b7280) is 4.83 on white but 4.35 on the
       tinted chip, i.e. it fails AA exactly where it is used most. */
    --cas-bd-ink:       #16202e;
    --cas-bd-ink-soft:  #414b5a;
    --cas-bd-lead:      #545e6d;
    --cas-bd-ink-muted: #5f6875;

    /* --- Brand. Supplied by cas_output_css_custom_properties(), which derives
       every one of these from the operator's colour through includes/color.php
       so they clear AA by construction. The literals here are the fallback for
       a page that somehow renders without that block. */
    /* Brand tokens are defined once, in section 14 — they need the theme
       accent fallback and it reads better beside the explanation. */

    /* --- 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.
       #00713c is 5.3:1 on white. */
    --cas-bd-ok:      #00713c;
    --cas-bd-ok-wash: #e8f4ed;
    --cas-bd-ok-edge: #bcdcc9;

    /* --- Radius ladder. One rung softer per nesting level: a section panel
       contains a card contains an image contains a chip. A flat 8px everywhere
       is the single most reliable tell of a generated layout. The 14px image
       inside an 18px card at a 10px inset is deliberately NOT concentric —
       concentric would compute to 8px and read tight. */
    --cas-bd-radius-xl: 24px;   /* hero / section panel  */
    --cas-bd-radius-lg: 18px;   /* card                  */
    --cas-bd-radius:    14px;   /* media inside a card   */
    --cas-bd-radius-sm: 10px;   /* inputs, small tiles   */
    --cas-bd-radius-xs: 8px;
    --cas-bd-pill:      999px;

    /* --- Shadow ladder. A wide soft downward lift, never a glow; tinted with
       the ink hue rather than black so it stays cool-neutral against the warm
       page. Peak alpha never exceeds .09 — a shadow darker than that reads as
       a cut-out. Nothing casts upward. */
    --cas-bd-shadow-sm:    0 1px 2px rgba(15, 23, 42, .04);
    --cas-bd-shadow:       0 1px 2px rgba(15, 23, 42, .03), 0 6px 16px rgba(15, 23, 42, .05);
    --cas-bd-shadow-lg:    0 1px 3px rgba(15, 23, 42, .035), 0 10px 24px rgba(15, 23, 42, .07);
    --cas-bd-shadow-hover: 0 2px 4px rgba(15, 23, 42, .04), 0 14px 30px rgba(15, 23, 42, .09);

    /* --- The container ladder.
       main is full-bleed on this theme fleet — the themes put their container
       inside each section rather than around main — so the plugin has to
       supply its own, and if it picks its own number the plugin's sections sit
       at a different width from the header and footer above and below them.
       These are the standard responsive container widths (540/720/960/1140/
       1320) minus the 24px of horizontal padding those containers carry, so
       our sections land 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:
           .cas-bd { --cas-bd-max: 1200px; }  */
    --cas-bd-max:     1296px;
    --cas-bd-gutter:  clamp(1rem, .6rem + 1.2vw, 1.5rem);
    --cas-bd-block:   clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
    --cas-bd-measure: 68ch;

    /* --- Motion. One duration and one easing; anything that needs its own is
       a sign the interaction is doing too much. */
    --cas-bd-ease: cubic-bezier(.22, .61, .36, 1);
    --cas-bd-dur:  180ms;

    color: var(--cas-bd-ink);
    line-height: 1.55;
}

/*
 * color-mix() fallback.
 *
 * frontend.css uses color-mix five times and enqueue.php emitted it inline
 * with no fallback, so on Safari < 16.2 and Firefox < 113 those custom
 * properties were simply INVALID — the property did not fall back to a
 * previous value, it dropped out entirely and took its rule with it. The PHP
 * now computes real hex values for these, so this block only has to catch a
 * page still running the old inline style.
 */
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .cas-bd {
        --cas-bd-brand-wash: #f1f2f4;
        --cas-bd-brand-edge: #d9dbe0;
    }
}

/* ==========================================================================
   2. Shell and rhythm
   ========================================================================== */

.cas-bd { background: var(--cas-bd-bg); }

/*
 * One container rule for the plugin's own sections. `min()` rather than
 * max-width + auto margins so the gutter is honoured at every width without a
 * media query, and so a nested container cannot double the padding.
 */
.cas-bd .container,
.cas-bd .cas-bd__inner {
    width: min(100% - (2 * var(--cas-bd-gutter)), var(--cas-bd-max));
    margin-inline: auto;
    padding-inline: 0;
}

/*
 * The old hero was a full-bleed dark gradient band with a wave SVG overlay
 * (frontend.css:129). The redesign puts an inset panel inside that same
 * element, so the band has to go — otherwise the panel sits on a dark
 * rectangle and the whole device reads as a box inside a box.
 *
 * The .aws-hero-section class itself stays on the element: theme overrides
 * and the cas_before_hero / cas_after_hero contract target it, and the
 * single-area template still uses it for its own hero.
 */
.cas-bd.cas-archive .aws-hero-section,
.cas-bd.cas-area .aws-hero-section {
    background: none;
    padding-block: 0 var(--cas-bd-block);
    border-bottom: 0;
    overflow: visible;
}

.cas-bd.cas-archive .aws-hero-section::before,
.cas-bd.cas-area .aws-hero-section::before { content: none; }

/* The headline and lead now sit on a LIGHT panel, so the white
   `!important` colour frontend.css sets for the dark band has to be
   answered at the same weight. */
.cas-bd.cas-archive .aws-page-title,
.cas-bd.cas-area .aws-page-title {
    color: var(--cas-bd-ink) !important;
    text-shadow: none;
}

.cas-bd.cas-archive .aws-hero-subtitle,
.cas-bd.cas-area .aws-hero-subtitle {
    color: var(--cas-bd-lead) !important;
}

.cas-bd .cas-archive__main { padding-block: var(--cas-bd-block); }

/* --- Empty state ---------------------------------------------------------- */

.cas-bd .cas-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: clamp(2rem, 1.4rem + 2vw, 3.5rem) 1.5rem;
    background: var(--cas-bd-surface);
    border: 1px dashed var(--cas-bd-border);
    border-radius: var(--cas-bd-radius-lg);
    text-align: center;
    color: var(--cas-bd-ink-muted);
}

.cas-bd .cas-empty__title {
    max-width: none;
    margin: .5rem 0 0;
    color: var(--cas-bd-ink);
    font-size: 1.0625rem;
    font-weight: 700;
}

.cas-bd .cas-empty__body { max-width: none; margin: 0 0 .5rem; font-size: .9375rem; }

.cas-bd > section,
.cas-bd .aws-content-section,
.cas-bd .aws-products-section,
.cas-bd .aws-features-section,
.cas-bd .aws-faq-section,
.cas-bd .aws-map-section,
.cas-bd .aws-cta-section,
.cas-bd .aws-breeds-section {
    padding-block: var(--cas-bd-block);
}

.cas-bd p { max-width: var(--cas-bd-measure); }
.cas-bd .text-center p { margin-inline: auto; }

/* --- Section headers ------------------------------------------------------ */

.cas-bd .aws-section-header { margin-bottom: clamp(1.25rem, .9rem + 1vw, 2rem); }

.cas-bd .aws-section-title {
    margin: 0;
    color: var(--cas-bd-ink);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.011em;
}

/* The "rest of the catalogue" heading: a real sibling section, but visibly
   secondary to the one the visitor came for. Weight, not size, does the work. */
.cas-bd .aws-section-title--sub {
    margin: var(--cas-bd-block) 0 1rem;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
    font-weight: 600;
    color: var(--cas-bd-ink-soft);
}

.cas-bd .aws-section-subtitle {
    margin: .5rem 0 0;
    color: var(--cas-bd-lead);
    font-size: 1rem;
}

/* ==========================================================================
   3. Hero — a PANEL, not a band
   ==========================================================================
   The single biggest difference between the reference and what this plugin
   shipped. A full-bleed coloured band with the headline sitting directly on
   the page is the default every CMS produces; an inset panel — its own
   surface, its own hairline, lifted off the ground by a wide soft shadow — is
   what makes the page read as designed. The device costs four declarations
   and it is most of the perceived quality.

   Ported from wc-puppy-breeds .pb-bd-hero__panel, including the 225deg
   gradient: the two stops are three percent apart in value, which is the
   difference between a surface and a rectangle.
   ========================================================================== */

.cas-bd .cas-hero { padding-block: var(--cas-bd-block) 0; }

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

.cas-bd .cas-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    /* Top, not centre: the featured card's label should sit on the eyebrow's
       baseline, and the left column is taller because it carries the CTAs. */
    align-items: start;
}

@media (min-width: 1000px) {
    /* A fixed sidebar, not a fraction — a fraction lets the card grow to
       half the hero at 1440 and it stops reading as a card. */
    .cas-bd .cas-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}

/* Stacked, an uncapped featured card runs the full hero width and its filled
   CTA becomes the largest object on the page. */
@media (max-width: 999px) {
    .cas-bd .cas-hero__aside { max-width: 32.5rem; }
}

/* --- Breadcrumb bar ------------------------------------------------------- */

.cas-bd .cas-crumbbar { padding-block: 1.25rem 1.125rem; }

/* --- Type ----------------------------------------------------------------- */

/*
 * Plain uppercase brand text, NOT a pill. The reference reserves pill shapes
 * for things you can press; a label you cannot press wearing one is the most
 * common tell of a generated interface — and an earlier pass of this file put
 * pills on everything, which is exactly the note that came back.
 */
.cas-bd .cas-eyebrow {
    display: block;
    margin: 0 0 1rem;
    color: var(--cas-bd-brand-ink);
    font-size: .8125rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cas-bd .aws-page-title,
.cas-bd .cas-h1 {
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -.015em;
    /* The headline wraps because the column is capped, not on a hard break —
       so any operator heading inherits the same rhythm. */
    max-width: 35ch;
    text-wrap: balance;
}

.cas-bd .cas-lead,
.cas-bd .aws-hero-subtitle {
    max-width: 34rem;
    margin: 1rem 0 0;
    color: var(--cas-bd-lead);
    font-size: 1rem;
    /* The reference sets this airy — 30px pitch on 16px text. It is a large
       part of why the hero feels unhurried rather than cramped. */
    line-height: 1.875;
}

.cas-bd .cas-lead p { margin: 0 0 .75rem; }
.cas-bd .cas-lead p:last-child { margin-bottom: 0; }

.cas-bd .cas-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: clamp(1.5rem, 1rem + 1.4vw, 2rem);
}

/* --- Featured card in the hero aside -------------------------------------- */

.cas-bd .cas-feature {
    padding: .75rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-hairline);
    border-radius: var(--cas-bd-radius-lg);
    box-shadow: var(--cas-bd-shadow);
}

.cas-bd .cas-feature__label {
    display: block;
    margin: .25rem .5rem .625rem;
    color: var(--cas-bd-ink-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cas-bd .cas-feature__media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--cas-bd-radius);
    background: var(--cas-bd-chip);
    overflow: hidden;
}

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

.cas-bd .cas-feature__body { padding: .875rem .5rem .375rem; }

.cas-bd .cas-feature__title {
    margin: 0 0 .25rem;
    font-size: 1.0625rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--cas-bd-ink);
}

.cas-bd .cas-feature__meta {
    margin: 0 0 .875rem;
    color: var(--cas-bd-ink-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

/* ==========================================================================
   4. Buttons
   ==========================================================================
   Radius-sm, NOT a pill. A pill is one shape used for one thing — the chip,
   the availability flag — and when the primary button wears it too the page
   loses the distinction. The reference's own buttons are 10px.
   ========================================================================== */

/*
 * !important, reluctantly and deliberately.
 *
 * frontend.css:497-523 declares all thirteen of these properties !important
 * on .aws-cta-button, because it was written to beat arbitrary theme button
 * styles. That is defensible for a base layer; the consequence is that the
 * design layer cannot restyle a button without matching the weight. Editing
 * frontend.css instead would break the override for any site already relying
 * on it, so the later layer answers at the same level rather than losing.
 */
.cas-bd .aws-cta-button,
.cas-bd .cas-btn,
.cas-bd .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    min-height: 48px !important;
    padding: .875rem 1.5rem !important;
    border: 1px solid transparent !important;
    /* radius-sm, NOT a pill. The pill is the chip and the availability flag;
       a primary button wearing the same shape erases the distinction, and
       pills-on-everything is the commonest tell of a generated interface. */
    border-radius: var(--cas-bd-radius-sm) !important;
    background: var(--cas-bd-brand) !important;
    color: var(--cas-bd-on-brand) !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color var(--cas-bd-dur) var(--cas-bd-ease),
                transform var(--cas-bd-dur) var(--cas-bd-ease),
                box-shadow var(--cas-bd-dur) var(--cas-bd-ease);
}

.cas-bd .aws-cta-button:hover,
.cas-bd .cas-btn:hover,
.cas-bd .btn:hover {
    background: var(--cas-bd-brand-dark) !important;
    color: var(--cas-bd-on-brand) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--cas-bd-shadow) !important;
}

.cas-bd .aws-cta-button:active,
.cas-bd .cas-btn:active,
.cas-bd .btn:active { transform: translateY(0) !important; transition-duration: 60ms; }

/* Secondary. Exactly one filled control per view; everything else outlines. */
.cas-bd .aws-cta-button--ghost,
.cas-bd .cas-btn--ghost {
    background: var(--cas-bd-surface) !important;
    border-color: var(--cas-bd-border) !important;
    color: var(--cas-bd-ink) !important;
}

.cas-bd .aws-cta-button--ghost:hover,
.cas-bd .cas-btn--ghost:hover {
    background: var(--cas-bd-brand-wash) !important;
    border-color: var(--cas-bd-brand-edge) !important;
    color: var(--cas-bd-brand-ink) !important;
}

/* The CTA inside a card: still not a pill, just smaller and full-width. */
.cas-bd .cas-card .aws-cta-button,
.cas-bd .cas-feature .aws-cta-button {
    width: 100%;
    min-height: 42px !important;
    padding: .625rem 1rem !important;
    font-size: .875rem !important;
}

.cas-bd .btn-link {
    min-height: 0;
    padding: .25rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--cas-bd-brand-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.cas-bd .btn-link:hover { background: none; transform: none; box-shadow: none; }

/* ==========================================================================
   5. Cards — the inset plate device
   ==========================================================================
   The card is padded and the photo sits INSIDE it with its own smaller
   radius and its own hairline. That nesting — card surface, then a distinct
   photo plate within it — is what the radius ladder is actually for, and it
   is the difference between these cards and the edge-to-edge image blocks
   this plugin shipped. overflow stays visible so the focus ring is not
   clipped; the photo clips itself.
   ========================================================================== */

.cas-bd .cas-card,
.cas-bd .card,
.cas-bd .aws-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: .75rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-hairline);
    border-radius: var(--cas-bd-radius-lg);
    overflow: visible;
    box-shadow: var(--cas-bd-shadow);
    transition: box-shadow .16s var(--cas-bd-ease),
                transform .16s var(--cas-bd-ease),
                border-color .16s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
}

.cas-bd .cas-card:hover,
.cas-bd .cas-card:focus-within,
.cas-bd .card:hover,
.cas-bd .card:focus-within,
.cas-bd .aws-card:hover {
    box-shadow: var(--cas-bd-shadow-hover);
    transform: translateY(-2px);
}

/* Touch has no hover, so without :active a tap gives no feedback at all
   between press and navigation. */
.cas-bd .cas-card:active,
.cas-bd .card:active { transform: translateY(0); transition-duration: 60ms; }

.cas-bd .cas-card:hover .cas-card__title a,
.cas-bd .card:hover .card-title a { color: var(--cas-bd-brand-ink); }

/* --- The photo plate ------------------------------------------------------ */

.cas-bd .cas-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--cas-bd-radius);
    background: var(--cas-bd-chip);
    overflow: hidden;
}

.cas-bd .cas-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
}

/*
 * A hairline inside the photo. Without it a pale image dissolves into the
 * white card and the whole device — surface, plate inside it — stops reading.
 * Inset, so it cannot add to the box.
 */
.cas-bd .cas-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--cas-bd-hairline);
    pointer-events: none;
}

/* The no-image state is a real state, not an accident: the plate stays, the
   icon centres in it, and the grid keeps its rhythm. */
.cas-bd .cas-card__media--empty {
    display: grid;
    place-items: center;
    color: var(--cas-bd-ink-muted);
}

/* --- Body ----------------------------------------------------------------- */

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

.cas-bd .cas-card__title,
.cas-bd .card-title {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.0625rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.004em;
    color: var(--cas-bd-ink);
}

.cas-bd .cas-card__title a,
.cas-bd .card-title a {
    color: inherit;
    text-decoration: none;
    transition: color .16s ease;
}

.cas-bd .cas-card__where {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: .375rem 0 0;
    color: var(--cas-bd-ink-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

/* The fact rail. auto pushes it to the bottom so every card in a row ends
   alike however long the titles above them run. */
.cas-bd .cas-card__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem .5rem;
    margin: auto 0 0;
    padding-top: .875rem;
}

.cas-bd .cas-fact-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 26px;
    padding: 0 .625rem;
    background: var(--cas-bd-chip);
    border-radius: var(--cas-bd-pill);
    color: var(--cas-bd-ink-soft);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.cas-bd .cas-fact-chip--ok {
    background: var(--cas-bd-ok-wash);
    box-shadow: inset 0 0 0 1px var(--cas-bd-ok-edge);
    color: var(--cas-bd-ok);
}

/* --- Grid ------------------------------------------------------------------ */

.cas-bd .cas-cardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1rem, .7rem + 1vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Chips ---------------------------------------------------------------- */

.cas-bd .aws-breed-chip,
.cas-bd .cas-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 34px;
    padding: .3rem .75rem;
    background: var(--cas-bd-chip);
    border: 1px solid transparent;
    border-radius: var(--cas-bd-pill);
    color: var(--cas-bd-ink-soft);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--cas-bd-dur) var(--cas-bd-ease),
                color var(--cas-bd-dur) var(--cas-bd-ease);
}

.cas-bd .aws-breed-chip:hover,
.cas-bd .cas-chip:hover {
    background: var(--cas-bd-brand-wash);
    border-color: var(--cas-bd-brand-edge);
    color: var(--cas-bd-brand-ink);
}

.cas-bd .aws-breed-chip[aria-current="page"] {
    background: var(--cas-bd-brand);
    color: var(--cas-bd-on-brand);
}

/*
 * (The breed strip's wrap rule lives in section 16 — it has to target
 * .aws-breeds-chips, the actual chip row. Targeting .aws-breeds-strip here
 * made the SECTION a flex container holding its own .container div, which is
 * how twenty-one of twenty-five chips ended up off the right edge of the
 * page.)
 */

/* --- Availability badge --------------------------------------------------- */

.cas-bd .cas-in-stock {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    background: var(--cas-bd-ok-wash);
    box-shadow: inset 0 0 0 1px var(--cas-bd-ok-edge);
    border-radius: var(--cas-bd-pill);
    color: var(--cas-bd-ok);
    font-size: .75rem;
    font-weight: 700;
}

/* ==========================================================================
   6. Inventory
   ========================================================================== */

.cas-bd .aws-more-banner {
    max-width: none;
    margin: 1.5rem 0;
    padding: .875rem 1.125rem;
    background: var(--cas-bd-brand-wash);
    border: 1px solid var(--cas-bd-brand-edge);
    border-radius: var(--cas-bd-radius-sm);
    color: var(--cas-bd-ink-soft);
    font-size: .9375rem;
}

.cas-bd .aws-more-banner--empty {
    background: var(--cas-bd-chip);
    border-color: var(--cas-bd-border);
}

.cas-bd .aws-loadmore {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: 2rem;
}

.cas-bd .aws-loadmore__button[aria-busy="true"] { opacity: .7; cursor: progress; }

.cas-bd .aws-loadmore__status {
    margin: 0;
    min-height: 1.25em;
    color: var(--cas-bd-ink-muted);
    font-size: .8125rem;
}

/* ==========================================================================
   7. Disclosure — FAQ and read-more
   ========================================================================== */

/* Full container width. The 52rem cap put an 832px panel in a 1296px
   container; the measure belongs on the answer TEXT, not on the panel. */
.cas-bd .aws-faq-list {
    max-width: none;
    margin-inline: 0;
}

/*
 * Rows, not cards.
 *
 * A bordered card per question was already a weak unit at 832px. At 1240px,
 * holding one line of answer, each is a visibly half-empty box — the same
 * argument that made the nearby block a hairline rather than a panel. A row
 * allocates no space it has to fill.
 *
 * The [open] box-shadow goes with it: no shadow on a light panel is the house
 * rule here, and the open state is already carried by the brand wash on the
 * summary.
 *
 * Welcome side effect: the summary takes `border-radius: inherit`, so with the
 * item at radius 0 the open row's wash no longer rounds its bottom corners
 * inward and leaves two white notches above the answer.
 */
.cas-bd .aws-faq-item {
    background: none;
    border-radius: 0;
    margin-bottom: 0;
}

.cas-bd .aws-faq-q,
.cas-bd .aws-readmore > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
    padding: .875rem 1.125rem;
    color: var(--cas-bd-ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.cas-bd summary::-webkit-details-marker { display: none; }
.cas-bd summary::marker { content: ""; }

/*
 * Bootstrap's accordion component, answered.
 *
 * The FAQ summaries keep `.accordion-button` so theme stylesheets on the
 * fleet still find their target — but on a theme that compiles Bootstrap in
 * (the Petland fleet does), that class drags three of Bootstrap's own rules
 * onto an element that is no longer a Bootstrap control:
 *
 *   .accordion-button                  background, inset shadow, border-radius: 0
 *   .accordion-button:not(.collapsed)  the ACTIVE treatment — and since nothing
 *                                      sets `.collapsed` on a <summary>, it
 *                                      matched every question permanently
 *   .accordion-button::after           a second chevron beside our SVG caret
 *
 * Stated here rather than left to load order, because whether the theme's
 * Bootstrap or this file wins is not something a plugin gets to assume.
 */
/*
 * THE BACKGROUND AND THE COLOUR CARRY THE FLAG AS A PAIR. Do not split them.
 *
 * Theme stylesheets are enqueued AFTER the plugin's, so an unflagged theme
 * rule on `.accordion-button` beats our unflagged rule on source order even
 * at (0,1,0) against our (0,4,0). That is what happened on a live client:
 * the theme painted the closed question bar with its own near-black brand
 * fill, our `background-color: transparent` lost, and our
 * `color: var(--cas-bd-ink)` — which nothing else set — kept winning. Dark
 * ink on a dark bar measured **1.16:1**. The questions were invisible.
 *
 * The lesson is not "the theme is wrong". It is that owning the text colour
 * of a component while letting something else own its background is a
 * contrast bug waiting for the first client whose brand is dark. So the
 * design layer now owns both, on every state, and they can only ever be
 * changed together.
 */
.cas-bd .aws-faq-item > .aws-faq-q.accordion-button {
    width: 100%;
    /* Matches the answer's inline padding below, so question and answer share
       a left edge; the wider gap is because the caret is now ~1200px from the
       text and needs to not crowd a long question. */
    padding: 1rem 1.25rem;
    gap: 1.5rem;
    background-color: transparent !important;
    color: var(--cas-bd-ink) !important;
    border: 0;
    border-radius: inherit;
    box-shadow: none;
    overflow-anchor: none;
}

.cas-bd .aws-faq-item > .aws-faq-q.accordion-button::after { content: none; }

/*
 * The whole row lights up on hover. At full width, with the caret at the far
 * right, a bare hairline row reads as a detached chevron; a fill is what binds
 * the question and its control into one object.
 *
 * `:not([open])` is load-bearing — it can never match an open row, so it can
 * never beat the open state's brand wash below.
 */
.cas-bd .aws-faq-item:not([open]):hover > .aws-faq-q.accordion-button {
    /* Flagged for the same reason as the closed state: an unflagged hover
       would lose to the theme's fill and the row would jump back to dark. */
    background-color: var(--cas-bd-panel-cool) !important;
}

/* Our open state: a wash, not Bootstrap's fill, and only when actually open. */
.cas-bd .aws-faq-item[open] > .aws-faq-q.accordion-button {
    /* `--cas-bd-brand-wash` is `color-mix(accent 7%, #fff)` and
       `--cas-bd-brand-ink` is `color-mix(accent 78%, #000)`, so this pair
       stays legible even when the accent itself is near-black — but both are
       flagged so the theme cannot substitute one half of it. */
    background-color: var(--cas-bd-brand-wash) !important;
    color: var(--cas-bd-brand-ink) !important;
    border-bottom: 1px solid var(--cas-bd-brand-edge);
}

/*
 * `!important`, and only to answer `!important`.
 *
 * theme-polish.css loads AFTER this file — WordPress enqueues the theme's
 * stylesheets after the plugin's — and it flags three declarations that land
 * on the FAQ even though they were written for a different accordion:
 *
 *   .accordion-item { border: 1px solid var(--ui-border) !important;
 *                     border-radius: var(--ui-radius) !important }
 *       (0,1,0) with the flag, so it outranks our unflagged (0,2,0) rule:
 *       every row takes the theme's 14px corner and the open row's edge
 *       never changes colour.
 *   .accordion-item:first-of-type,:last-of-type { border-radius: … !important }
 *       and this one is scoped, so first and last disagree with the middle.
 *   .accordion-button { box-shadow: none !important }
 *       erases the focus halo, leaving keyboard users the outline alone.
 *
 * Answered rather than dropped: a plugin does not get to edit the theme, and
 * a mismatched corner, a dead open state and a missing focus ring are all
 * things a visitor sees.
 */
.cas-bd .aws-faq-list > .aws-faq-item,
.cas-bd .aws-faq-list > .aws-faq-item:first-of-type,
.cas-bd .aws-faq-list > .aws-faq-item:last-of-type {
    border: 0 !important;
    border-top: 1px solid var(--cas-bd-hairline) !important;
    border-radius: 0 !important;
}

.cas-bd .aws-faq-list > .aws-faq-item:first-of-type { border-top: 0 !important; }

/*
 * Both flags are load-bearing, for different reasons:
 *   - `border: 0 !important` answers theme-polish.css's
 *     `.accordion-item { border: 1px solid var(--ui-border) !important }`.
 *     Ours is more specific, but an author !important beats an author
 *     non-important at ANY specificity, so unflagged would lose.
 *   - `border-top: … !important` must carry the flag too: within one block an
 *     important shorthand beats a later non-important longhand, so without it
 *     every hairline disappears.
 *
 * `border: 0 !important` also neutralises frontend.css's
 * `.aws-faq-section .accordion-item:hover { border-color: … }` — which is why
 * the hover treatment above is a fill and not an edge.
 */

.cas-bd .aws-faq-item > .aws-faq-q.accordion-button:focus-visible {
    outline: 2px solid var(--cas-bd-ink);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px #fff !important;
}

.cas-bd .aws-faq-q:hover { color: var(--cas-bd-brand-ink) !important; }

.cas-bd .aws-faq-caret,
.cas-bd .aws-readmore__caret {
    flex: 0 0 auto;
    color: var(--cas-bd-ink-muted);
    transition: transform var(--cas-bd-dur) var(--cas-bd-ease);
}

.cas-bd details[open] > summary .aws-faq-caret,
.cas-bd details[open] > summary .aws-readmore__caret { transform: rotate(180deg); }

/*
 * "Proper margins when you expand" — the literal complaint, and the missing
 * piece was TOP padding: `padding: 0 1.125rem 1.125rem` put the answer's first
 * line flat against the open summary's divider.
 */
.cas-bd .aws-faq-a {
    padding: .875rem 1.25rem 1.5rem;
    color: var(--cas-bd-lead);
    font-size: 1rem;
    line-height: 1.7;
}

/*
 * The measure moves from the panel to the text, which is the whole reason the
 * panel can now be full width. On the child rather than the block, so it also
 * catches a <ul>, <ol> or <table> that survives wp_kses_post in a filtered
 * answer — which the generic `.cas-bd p` cap never did.
 */
.cas-bd .aws-faq-a > * { max-width: var(--cas-bd-measure); }

.cas-bd .aws-faq-a > :first-child { margin-top: 0; }
.cas-bd .aws-faq-a > :last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .cas-bd .aws-faq-item > .aws-faq-q.accordion-button { padding: .875rem 1rem; }
    .cas-bd .aws-faq-a { padding: .75rem 1rem 1.25rem; }
}

/* The summary swaps its own label, so no script has to. */
.cas-bd .aws-readmore > summary .aws-readmore__less,
.cas-bd .aws-readmore[open] > summary .aws-readmore__more { display: none; }
.cas-bd .aws-readmore[open] > summary .aws-readmore__less { display: inline; }

.cas-bd .aws-readmore__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   8. Map
   ========================================================================== */

/*
 * THE "DISPLACED MAP" BUG.
 *
 * frontend.css sets `height: 420px`; this rule used to add
 * `aspect-ratio: 16 / 9`. Given BOTH a definite height and a ratio, the box
 * resolves its WIDTH from its height — 420 x 16/9 = 746.67px — and no
 * container width can ever influence it. Measured: 747px inside a 1296px
 * container, left-aligned, with ~550px of dead ground beside it.
 *
 * Both halves have to go together. Removing only the ratio leaves a 1296x420
 * letterbox; setting only `height: auto` leaves the ratio deriving the width
 * from the auto height.
 *
 * `width: 100%` rather than `auto`, deliberately: a percentage resolves
 * against the containing block whether that block is a grid area, a flex
 * item or normal flow, whereas `auto` collapses under the flex case. The
 * same id also appears on the item template with no grid around it.
 *
 * min-height is the CLS floor the old comment wanted — the box is definite
 * before Leaflet runs either way, without deriving one axis from the other.
 */
.cas-bd #service-area-map {
    box-sizing: border-box;
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    min-height: 20rem;
    /*
     * Leaflet sets `position: relative; z-index: auto`, which creates NO
     * stacking context, so its panes (tilePane 200 … popupPane 700) compete
     * in the ROOT context and can paint over any sibling with a z-index.
     * Leaflet never touches `isolation`, so nothing inside the map changes.
     */
    isolation: isolate;
    background: var(--cas-bd-chip);
    border: 1px solid var(--cas-bd-border);
    border-radius: var(--cas-bd-radius-lg);
    overflow: hidden;
}

/* ==========================================================================
   9. Layout utilities — the Bootstrap subset the templates actually use
   ==========================================================================
   Scoped under .cas-bd so the theme's own Bootstrap is untouched everywhere
   else on the site. Only the classes that appear in this plugin's templates
   are defined; this is not a Bootstrap reimplementation.
   ========================================================================== */

.cas-bd .row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--cas-bd-gutter) / -2);
}

.cas-bd .row > * {
    flex: 1 1 0%;
    max-width: 100%;
    padding-inline: calc(var(--cas-bd-gutter) / 2);
}

.cas-bd .g-0  { margin-inline: 0; }
.cas-bd .g-0 > * { padding-inline: 0; }
.cas-bd .g-3 { row-gap: 1rem; }
.cas-bd .g-4 { row-gap: 1.5rem; }

.cas-bd .col            { flex: 1 1 0%; }
.cas-bd .col-6          { flex: 0 0 50%; max-width: 50%; }
.cas-bd .col-12         { flex: 0 0 100%; max-width: 100%; }

/*
 * auto-fill/minmax rather than fixed column counts: a grid that reflows on
 * available width needs no breakpoint overrides and cannot leave one orphan
 * card on a row at an in-between size.
 */
.cas-bd .row-cols-lg-3,
.cas-bd .cas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.5rem;
    margin-inline: 0;
}

.cas-bd .row-cols-lg-3 > *,
.cas-bd .cas-grid > * { padding-inline: 0; max-width: none; }

.cas-bd .ratio { position: relative; width: 100%; }
.cas-bd .ratio-16x9 { aspect-ratio: 16 / 9; }
.cas-bd .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.cas-bd .object-fit-cover { object-fit: cover; }

.cas-bd .d-flex   { display: flex; }
.cas-bd .d-block  { display: block; }
.cas-bd .hstack   { display: flex; flex-direction: row; align-items: center; }
.cas-bd .vstack   { display: flex; flex-direction: column; }
.cas-bd .gap-2    { gap: .5rem; }
.cas-bd .gap-3    { gap: 1rem; }
.cas-bd .align-items-center  { align-items: center; }
.cas-bd .justify-content-between { justify-content: space-between; }
.cas-bd .flex-wrap { flex-wrap: wrap; }

.cas-bd .text-center { text-align: center; }
.cas-bd .text-end    { text-align: end; }
.cas-bd .text-white  { color: #fff; }
.cas-bd .text-reset  { color: inherit; }
.cas-bd .fw-bold     { font-weight: 700; }
.cas-bd .fs-5        { font-size: 1.125rem; }
.cas-bd .small       { font-size: .875rem; }
.cas-bd .lead        { font-size: 1.125rem; color: var(--cas-bd-lead); }
.cas-bd .display-5   { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.1; }

.cas-bd .bg-light    { background: var(--cas-bd-panel); }
.cas-bd .bg-black    { background: #111418; }
.cas-bd .bg-opacity-25 { --cas-bd-bg-opacity: .25; }

.cas-bd .rounded-pill { border-radius: var(--cas-bd-pill); }
.cas-bd .rounded-1    { border-radius: var(--cas-bd-radius-xs); }
.cas-bd .overflow-hidden { overflow: hidden; }
.cas-bd .overflow-visible { overflow: visible; }

.cas-bd .py-5 { padding-block: var(--cas-bd-block); }
.cas-bd .px-3 { padding-inline: 1rem; }
.cas-bd .mb-2 { margin-bottom: .5rem; }
.cas-bd .mb-4 { margin-bottom: 1.5rem; }
.cas-bd .me-1 { margin-right: .25rem; }
.cas-bd .h-100 { height: 100%; }

/* `stretched-link` makes a whole card clickable from one anchor. Kept, because
   the markup relies on it and reimplementing it as a wrapping <a> would nest
   the card's other links inside it. */
.cas-bd .stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.cas-bd .card,
.cas-bd .aws-card { position: relative; }

@media (min-width: 992px) {
    .cas-bd .col-lg-5  { flex: 0 0 41.666%; max-width: 41.666%; }
    .cas-bd .col-lg-7  { flex: 0 0 58.333%; max-width: 58.333%; }
    .cas-bd .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
    .cas-bd .d-lg-none { display: none; }
}

@media (min-width: 1200px) {
    .cas-bd .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .cas-bd .col-xl-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}

@media (min-width: 768px) {
    .cas-bd .text-md-start { text-align: start; }
}

@media (max-width: 767.98px) {
    .cas-bd .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .cas-bd .col-6 { flex: 0 0 50%; max-width: 50%; }
}

/* ==========================================================================
   10. Accessibility floor
   ========================================================================== */

/*
 * One focus ring for everything, declared HERE rather than inherited from the
 * theme — a plugin that restyles a control and then relies on somebody else's
 * focus style ships an invisible one about half the time.
 *
 * The white halo is the point: a brand-coloured ring on a brand-coloured fill
 * is invisible, which is exactly the case on the primary CTA. The outline
 * carries the dark edge, the box-shadow carries the halo, and the pair reads
 * on any surface including a photograph.
 */
.cas-bd :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--cas-bd-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(15, 23, 42, .18);
    border-radius: var(--cas-bd-radius-xs);
}

/* Windows High Contrast: our colours are all replaced by the user's palette,
   so borders have to become real again or every card loses its edges. */
@media (forced-colors: active) {
    .cas-bd .card,
    .cas-bd .aws-card,
    .cas-bd .aws-faq-item,
    .cas-bd #service-area-map { border: 1px solid CanvasText; }

    .cas-bd .aws-cta-button,
    .cas-bd .btn { border: 1px solid ButtonText; }

    .cas-bd :is(a, button, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
}

/*
 * Print. A collapsed <details> prints collapsed, so a printed FAQ page would
 * be a list of questions with no answers.
 */
@media print {
    .cas-bd details { display: block; }
    .cas-bd details > summary { list-style: none; }
    .cas-bd details:not([open]) > *:not(summary) { display: revert !important; }
    .cas-bd .aws-loadmore,
    .cas-bd .aws-hero-ctas,
    .cas-bd #service-area-map { display: none; }
    .cas-bd .card,
    .cas-bd .aws-card { box-shadow: none; break-inside: avoid; }
    /* The map is hidden above, so without this the coverage plate prints as a
       22rem facts strip with an empty track beside it. */
    .cas-bd .cas-visit__plate { display: block; }
    .cas-bd .cas-visit__plate--split > .cas-visit__facts { border: 0; }
}

/* Touch. 44x44 is the floor, applied where the base size is smaller. */
@media (pointer: coarse) {
    .cas-bd :is(a, button, summary, [role="button"]).aws-breed-chip,
    .cas-bd .cas-chip,
    .cas-bd .aws-breadcrumb a,
    .cas-bd .btn-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/*
 * Reduced motion. Transitions that communicate state (a colour change on
 * hover) are kept; movement is not. Honouring this is not optional — for some
 * people motion is a vestibular trigger, not a preference.
 */
@media (prefers-reduced-motion: reduce) {
    .cas-bd *,
    .cas-bd *::before,
    .cas-bd *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .cas-bd .card:hover,
    .cas-bd .aws-card:hover,
    .cas-bd .aws-cta-button:hover,
    .cas-bd .btn:hover { transform: none; }
}

/* ==========================================================================
   11. Icons
   ========================================================================== */

.cas-bd .cas-icon {
    flex: 0 0 auto;
    vertical-align: -.145em;   /* sits on the text baseline, not beside it */
}

.cas-bd .cas-icon--xl { color: var(--cas-bd-ink-muted); }

/* ==========================================================================
   12. Local facts, breed profile, nearby areas
   ==========================================================================
   The three blocks that carry the per-page uniqueness. Kept visually quiet on
   purpose: they are reference material beside the inventory, not competing
   with it for the eye.
   ========================================================================== */

.cas-bd .cas-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
}

.cas-bd .cas-fact {
    padding: .75rem .875rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-border);
    border-radius: var(--cas-bd-radius-sm);
}

/* The one row that is good news gets the green edge — and only that row, so
   it still reads as an exception rather than as decoration every card carries. */
.cas-bd .cas-fact--ok {
    background: var(--cas-bd-ok-wash);
    border-color: var(--cas-bd-ok-edge);
}

.cas-bd .cas-fact__label {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .2rem;
    color: var(--cas-bd-ink-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cas-bd .cas-fact__value {
    max-width: none;
    margin: 0;
    color: var(--cas-bd-ink);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.cas-bd .cas-fact--ok .cas-fact__value { color: var(--cas-bd-ok); }
.cas-bd .cas-fact__value a { color: inherit; }

.cas-bd .cas-facts--compact .cas-fact {
    background: var(--cas-bd-chip);
    border-color: transparent;
}

/* --- Breed profile -------------------------------------------------------- */

.cas-bd .cas-breed-profile__summary {
    max-width: var(--cas-bd-measure);
    margin: 0 0 1rem;
    color: var(--cas-bd-lead);
    font-size: 1.0625rem;
}

.cas-bd .cas-breed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.cas-bd .cas-meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: .625rem 1.5rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.cas-bd .cas-meter {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: .75rem;
}

.cas-bd .cas-meter__label {
    color: var(--cas-bd-ink-soft);
    font-size: .875rem;
}

/*
 * Five segments, and the word beside them. The value is carried twice on
 * purpose: length and colour alone are invisible to a screen reader and hard
 * to read precisely at a glance, so the track is aria-hidden and the word is
 * the accessible answer.
 */
.cas-bd .cas-meter__track {
    display: inline-flex;
    gap: 3px;
}

.cas-bd .cas-meter__seg {
    width: 14px;
    height: 6px;
    border-radius: var(--cas-bd-pill);
    background: var(--cas-bd-chip);
}

.cas-bd .cas-meter__seg.is-on { background: var(--cas-bd-brand); }

.cas-bd .cas-meter__word {
    min-width: 5.5em;
    color: var(--cas-bd-ink);
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cas-bd .cas-breed-profile__more { margin: 1.25rem 0 0; }

/* --- Nearby areas --------------------------------------------------------- */

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

.cas-bd .cas-nearby__miles {
    color: var(--cas-bd-ink-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
    .cas-bd .cas-meter__seg { border: 1px solid CanvasText; }
    .cas-bd .cas-meter__seg.is-on { background: Highlight; }
}

/* --- Hero fact list (single-area aside) ----------------------------------- */

.cas-bd .cas-herofacts {
    margin: 0;
    padding: .25rem .5rem .375rem;
}

.cas-bd .cas-herofact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--cas-bd-hairline);
}

.cas-bd .cas-herofact:last-child { border-bottom: 0; }

.cas-bd .cas-herofact dt {
    margin: 0;
    color: var(--cas-bd-ink-muted);
    font-size: .8125rem;
    font-weight: 500;
}

.cas-bd .cas-herofact dd {
    margin: 0;
    color: var(--cas-bd-ink);
    font-size: .875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ==========================================================================
   13. Undoing the dark-hero inversions
   ==========================================================================
   frontend.css:1093-1115 inverts the hero's buttons — white fill with dark
   text for the primary, a translucent white wash with a blurred backdrop for
   the ghost — because the 1.5.x hero was a dark gradient band and that is the
   right treatment on one.

   The hero is a light panel now, so those inversions are backwards: the
   primary button rendered white-on-white and the ghost rendered white text on
   a 12%-white wash over a near-white panel, which measured 1.0:1. Not a
   contrast *risk* — literally invisible.

   Answered here rather than deleted there: a site still running its own dark
   hero through a theme override keeps frontend.css's behaviour, and only the
   plugin's own redesigned hero opts out.
   ========================================================================== */

.cas-bd .aws-hero-section .aws-cta-button:not(.aws-cta-button--ghost) {
    background: var(--cas-bd-brand) !important;
    color: var(--cas-bd-on-brand) !important;
}

.cas-bd .aws-hero-section .aws-cta-button:not(.aws-cta-button--ghost):hover,
.cas-bd .aws-hero-section .aws-cta-button:not(.aws-cta-button--ghost):focus-visible {
    background: var(--cas-bd-brand-dark) !important;
    color: var(--cas-bd-on-brand) !important;
}

.cas-bd .aws-hero-section .aws-cta-button--ghost {
    background: var(--cas-bd-surface) !important;
    color: var(--cas-bd-ink) !important;
    border: 1px solid var(--cas-bd-border) !important;
    /* The blur was buying nothing over an opaque panel and costs a
       compositing layer on every scroll frame. */
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}

.cas-bd .aws-hero-section .aws-cta-button--ghost:hover,
.cas-bd .aws-hero-section .aws-cta-button--ghost:focus-visible {
    background: var(--cas-bd-brand-wash) !important;
    border-color: var(--cas-bd-brand-edge) !important;
    color: var(--cas-bd-brand-ink) !important;
}

/*
 * The breadcrumb, same story. frontend.css:185-196 sets `#fff` on the list
 * items and `#fff !important` on the links, for the dark band. The crumbbar
 * now sits on the page ground above the panel, so "Home" was rendering white
 * on #f4f5f7 — invisible, and the first link on the page.
 */
.cas-bd .cas-crumbbar .aws-breadcrumb li { color: var(--cas-bd-ink-muted); }
.cas-bd .cas-crumbbar .aws-breadcrumb a { color: var(--cas-bd-ink-muted) !important; }
.cas-bd .cas-crumbbar .aws-breadcrumb a:hover,
.cas-bd .cas-crumbbar .aws-breadcrumb a:focus-visible { color: var(--cas-bd-brand-ink) !important; }
.cas-bd .cas-crumbbar .aws-breadcrumb [aria-current="page"] {
    color: var(--cas-bd-ink-soft);
    font-weight: 600;
}
.cas-bd .cas-crumbbar .aws-breadcrumb li:not(:last-child)::after { color: var(--cas-bd-ink-muted); }

/* ==========================================================================
   14. Inheriting the theme's accent, and dropping the underline bar
   ========================================================================== */

/*
 * frontend.css draws a 56x4px bar under every section title. It is a 2016
 * device — the reference uses weight and space to separate a heading from
 * what follows, not a rule under it — and with the new panel and card system
 * doing that work the bar is just a stray mark.
 */
.cas-bd .aws-section-title::after,
.cas-bd .aws-section-header::after { content: none !important; }

/*
 * The brand accent.
 *
 * Two sources, and the difference matters:
 *
 *   1. A colour the operator PICKED in Settings. cas_output_css_custom_
 *      properties() emits --cas-primary-fill / -dark / -ink / -wash / -edge,
 *      each already run through the WCAG derivation in includes/color.php.
 *      Those are used verbatim — darkening them again here would undo the
 *      maths and push a mid-tone brand toward black.
 *
 *   2. Nothing picked, so the PHP emits none of those custom properties and
 *      each var() falls through to its second argument: the host theme's own
 *      accent. Bootstrap-based themes publish --bs-primary, which on this
 *      fleet is the Petland orange. A plugin rendering charcoal buttons
 *      inside an orange site looks bolted on, and an operator should not have
 *      to re-enter a colour their theme already declares.
 *
 * The fallback branch darkens the inherited hue before it carries white
 * text — best-effort, not the guarantee path 1 gets, because CSS cannot
 * measure contrast. On #CF5B1F it moves 3.8:1 to roughly 4.6:1. An operator
 * whose accent is pale should set the colour in Settings, where the real
 * maths runs and the foreground flips to dark automatically.
 */
.cas-bd {
    --cas-bd-theme-accent: var(--bs-primary, #3f4651);

    --cas-bd-brand:      var(--cas-primary-fill,  color-mix(in srgb, var(--cas-bd-theme-accent) 86%, #000));
    --cas-bd-brand-hue:  var(--cas-primary,       var(--cas-bd-theme-accent));
    --cas-bd-brand-dark: var(--cas-primary-dark,  color-mix(in srgb, var(--cas-bd-theme-accent) 64%, #000));
    --cas-bd-on-brand:   var(--cas-on-primary,    #ffffff);
    --cas-bd-brand-ink:  var(--cas-primary-ink,   color-mix(in srgb, var(--cas-bd-theme-accent) 78%, #000));
    --cas-bd-brand-wash: var(--cas-primary-wash,  color-mix(in srgb, var(--cas-bd-theme-accent) 7%,  #fff));
    --cas-bd-brand-edge: var(--cas-primary-edge,  color-mix(in srgb, var(--cas-bd-theme-accent) 24%, #fff));
}

/*
 * Without color-mix (Safari < 16.2, Firefox < 113) an unset operator colour
 * has no derivable variants, so the theme accent is used flat. Slightly less
 * contrast on the button than the mixed version, never invisible.
 */
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .cas-bd {
        --cas-bd-brand:      var(--cas-primary-fill, var(--cas-bd-theme-accent));
        --cas-bd-brand-dark: var(--cas-primary-dark, var(--cas-bd-theme-accent));
        --cas-bd-brand-ink:  var(--cas-primary-ink,  var(--cas-bd-theme-accent));
        --cas-bd-brand-wash: var(--cas-primary-wash, #f3f4f5);
        --cas-bd-brand-edge: var(--cas-primary-edge, #d5d6d9);
    }
}

/* ==========================================================================
   15. Keeping the 1.5.x custom properties defined
   ==========================================================================
   frontend.css uses `var(--cas-primary)` forty times with NO fallback, plus
   fifteen `var(--cas-primary-dark, …)`. Until 2.0.0 those were supplied by an
   inline <style> the PHP printed on every plugin page.

   Section 14 stopped the PHP emitting them unless the operator has actually
   chosen a colour — which is what lets the theme's accent through. The
   consequence, caught in the contrast sweep: `background: var(--cas-primary)
   !important` with the variable undefined is an INVALID declaration, so it
   is dropped entirely rather than falling back. The read-more control lost
   its fill and rendered white-on-white.

   So the variables are always defined, here, with the same theme-accent
   chain. Declared on :root rather than .cas-bd because frontend.css and
   quick-menu.css use them outside the scoped root.
   ========================================================================== */

:root {
    --cas-primary:       var(--cas-primary-fill, color-mix(in srgb, var(--bs-primary, #3f4651) 86%, #000));
    --cas-primary-dark:  var(--cas-primary-fill, color-mix(in srgb, var(--bs-primary, #3f4651) 64%, #000));
    --cas-primary-light: color-mix(in srgb, var(--bs-primary, #3f4651) 12%, #fff);
}

@supports not (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --cas-primary:       var(--bs-primary, #3f4651);
        --cas-primary-dark:  var(--bs-primary, #2a2f37);
        --cas-primary-light: #f1f2f4;
    }
}

/*
 * The read-more disclosure is a control, and frontend.css dresses
 * .aws-read-more-btn as a filled button. As a <summary> it now also has to
 * survive being a flex row with a caret, so the two are reconciled here
 * rather than left to fight.
 */
.cas-bd .aws-readmore > summary.aws-read-more-btn {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    width: auto;
    min-height: 44px;
    padding: .625rem 1.25rem !important;
    background: var(--cas-bd-brand) !important;
    color: var(--cas-bd-on-brand) !important;
    border-radius: var(--cas-bd-radius-sm) !important;
    font-size: .9375rem;
    font-weight: 600;
}

.cas-bd .aws-readmore > summary.aws-read-more-btn:hover {
    background: var(--cas-bd-brand-dark) !important;
}

/* Inside item-overview the read-more is a quiet text link, not a button. */
.cas-bd .read-more-container > summary.aws-readmore__toggle {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 44px;
    padding: 0;
    background: none !important;
    color: var(--cas-bd-brand-ink) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* ==========================================================================
   16. Breed strip, inventory grid, and room to breathe
   ==========================================================================
   Three things the first redesign pass got wrong, all visible on a real area
   page with real data.
   ========================================================================== */

/*
 * THE BREED STRIP
 *
 * The chip row is `.aws-breeds-chips`, a [data-snap-slider] horizontal
 * scroller. An earlier rule here tried to make it wrap by targeting
 * `.aws-breeds-strip` — but that is the <section>, which contains a
 * .container, which contains the heading and the row. So the section became
 * a flex container holding one div, the row kept scrolling, and on Wind Gap
 * the chips laid out from left:-40 to left:3248 in a 1440 viewport: four
 * visible, twenty-one clipped by body{overflow-x:hidden}. Twenty-one internal
 * links a crawler followed and a visitor could not see, plus the first chip
 * half off the left edge.
 *
 * A wrapping cloud, not a scroller. There is no affordance on a drag-scroll
 * strip, it is unreachable by keyboard in any obvious way, and these are
 * navigation links — the whole point is that they are all visible.
 */
.cas-bd .aws-breeds-chips {
    display: flex;
    flex-wrap: wrap;
    /* Row gap larger than column gap: at three rows of pills, equal gaps read
       as a grid of unrelated buttons rather than as flowing text. */
    gap: .625rem .5rem;
    overflow: visible;
    /* Undo the scroller. */
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
}

.cas-bd .aws-breeds-chips > .aws-breed-chip {
    /* The scroller set this; wrapping needs it gone or a long breed name
       cannot shrink and forces a horizontal overflow of its own. */
    scroll-snap-align: none;
    flex: 0 1 auto;
    min-width: 0;
}

/* A little more presence than the 26px fact chips: these are the primary
   navigation out of this page. */
.cas-bd .aws-breeds-chips > .aws-breed-chip {
    min-height: 38px;
    padding: .4rem .875rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-border);
    color: var(--cas-bd-ink-soft);
    font-size: .875rem;
    font-weight: 600;
}

.cas-bd .aws-breeds-chips > .aws-breed-chip:hover,
.cas-bd .aws-breeds-chips > .aws-breed-chip:focus-visible {
    background: var(--cas-bd-brand-wash);
    border-color: var(--cas-bd-brand-edge);
    color: var(--cas-bd-brand-ink);
}

/* The strip is its own band on the page ground, not a white slab butted
   against the section below it. */
.cas-bd .aws-breeds-strip {
    display: block;
    background: none;
    padding-block: var(--cas-bd-block) 0;
}

.cas-bd .aws-breeds-strip-title {
    margin: 0 0 1rem;
    color: var(--cas-bd-ink);
    font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.008em;
}

/*
 * THE INVENTORY GRID
 *
 * frontend.css:1240 goes to four columns at 992px. On a 1296 container that
 * is a 306px card carrying a photo, a name, a breed, a price and two
 * buttons — and at 992 itself it is 228px, which is not a card, it is a
 * column. Three is the right number here: the same container gives ~416px,
 * the photo gets to be the thing you notice, and the row still scans.
 *
 * A fourth column only above 1600px, where four cards are still 370px each.
 * Explicit counts rather than auto-fill because the card's internals do not
 * reflow gracefully below ~300px and auto-fill would happily produce that.
 */
@media (min-width: 992px) {
    .cas-bd .aws-woo-wrapper ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.25rem, .9rem + 1.1vw, 2rem);
    }
}

/*
 * No four-column breakpoint. Three is the answer at every desktop width.
 *
 * An earlier pass kept a `@media (min-width: 1600px)` four-column rule "for
 * very wide displays". It was the reason four cards were still showing after
 * three had been asked for twice, and the argument for it was wrong anyway: a
 * one-of-one emotional purchase wants the photo big, and Baymard's 5-8 column
 * ceiling is explicitly conditioned on the vertical and the list-item size.
 */

/* Cards were 306x533 — tall and narrow. Wider cards need their interior to
   grow with them or the content rattles around inside. */
.cas-bd .aws-woo-wrapper ul.products li.product {
    padding: .75rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-hairline);
    border-radius: var(--cas-bd-radius-lg);
    box-shadow: var(--cas-bd-shadow-sm);
    transition: box-shadow .16s var(--cas-bd-ease),
                transform .16s var(--cas-bd-ease),
                border-color .16s ease;
}

.cas-bd .aws-woo-wrapper ul.products li.product:hover,
.cas-bd .aws-woo-wrapper ul.products li.product:focus-within {
    border-color: var(--cas-bd-brand-edge);
    box-shadow: var(--cas-bd-shadow-hover);
    transform: translateY(-2px);
}

/* The product photo becomes an inset plate, like every other card here. */
.cas-bd .aws-woo-wrapper ul.products li.product img {
    border-radius: var(--cas-bd-radius);
}

/*
 * ROOM TO BREATHE
 *
 * Every section was on one --cas-bd-block rhythm regardless of weight, and
 * with the panel and cards now carrying their own internal padding the whole
 * page read tight. Section spacing steps up, and the gap between a section
 * heading and its content goes with it — the commonest thing to get wrong on
 * a refinement pass is leaving vertical rhythm where it was.
 */
.cas-bd {
    --cas-bd-block: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem);
}

.cas-bd .aws-section-header { margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }

.cas-bd .aws-section-title--sub { margin-top: calc(var(--cas-bd-block) * .85); }

/*
 * ...but not when it IS the section's first heading.
 *
 * That margin exists to separate a "rest of the catalogue" heading from the
 * grid above it inside one section. Three parts — local-facts, breed-profile
 * and nearby-areas — instead open with this class as the first child of their
 * container, where the section's own padding-top has already provided the
 * space and the margin just doubles it: ~61px on top of ~72px, three times on
 * the item sub-page.
 *
 * `:first-child` rather than an item-page override, because the doubling is
 * wrong wherever it happens. No `!important`: `margin-top` is unflagged in
 * frontend.css, and this rule is both later and more specific than the one
 * above it.
 */
.cas-bd .aws-section-title--sub:first-child { margin-top: 0; }

/* The transition banner between the matched grid and the rest of the
   catalogue was sitting flush against both. */
.cas-bd .aws-more-banner { margin-block: clamp(1.25rem, 1rem + .8vw, 2rem); }

/* ==========================================================================
   17. One alignment, one ground
   ========================================================================== */

/*
 * Section headers align left, like everything else on the page.
 *
 * frontend.css centres .aws-section-header. On a page whose hero, breadcrumb,
 * breed strip and card text are all left-set, a centred heading over a
 * left-set grid reads as a different page bolted on — and centred body text
 * above a multi-column grid is the specific thing the house style guide
 * tells us not to ship. "Top Breeds in Wind Gap" and "Available Puppies in
 * Wind Gap" sat eight hundred pixels apart on the same axis and did not
 * agree with each other.
 */
.cas-bd .aws-section-header {
    text-align: start;
    max-width: none;
}

.cas-bd .aws-section-header .aws-section-title,
.cas-bd .aws-section-header .aws-section-subtitle {
    text-align: start;
    margin-inline: 0;
}

.cas-bd .aws-section-subtitle { max-width: var(--cas-bd-measure); }

/*
 * One ground, and the cards do the rest.
 *
 * The three consecutive sections painted themselves #ffffff, #fdfdfe and
 * transparent — two of which are indistinguishable from each other and from
 * the cards sitting on them, so the page read as one undifferentiated slab
 * with faint seams at arbitrary heights.
 *
 * The reference's model is one page ground with white cards floating on it;
 * the surface hierarchy comes from the cards and the hero panel, not from
 * alternating bands. So the plugin's own sections stop painting, and the
 * ground shows through consistently.
 *
 * Scoped to our own sections: a theme that deliberately bands its page keeps
 * doing so everywhere else.
 */
.cas-bd .aws-products-section,
.cas-bd .aws-inventory-section,
.cas-bd .aws-faq-section,
.cas-bd .aws-breeds-strip,
.cas-bd .aws-content-section,
.cas-bd .aws-local-facts,
/* Added: frontend.css paints this one --cas-surface-muted on a --cas-bd-bg
   ground, a three-unit step that reads as a seam rather than a plane. It was
   missed here because it is named after a feature, not a section type. */
.cas-bd .aws-visit-area,
.cas-bd .cas-breed-profile,
.cas-bd .cas-nearby {
    background: none;
}

/* bg-light is a Bootstrap utility the templates put on the FAQ section; it
   resolved to a near-white that did nothing but blur the boundary. */
.cas-bd .aws-faq-section.bg-light { background: none; }

/*
 * The FAQ list is the one block that benefits from its own plane — it is a
 * long run of repeated rows and the ground alone leaves it shapeless.
 */
.cas-bd .aws-faq-list {
    padding: clamp(1rem, .6rem + 1.4vw, 1.75rem);
    background: var(--cas-bd-panel);
    border: 1px solid var(--cas-bd-hairline);
    border-radius: var(--cas-bd-radius-xl);
}

.cas-bd .aws-faq-list .aws-faq-item:last-child { margin-bottom: 0; }

/*
 * Touch floor for the breed chips, restated at the specificity the new
 * wrapping rule created.
 *
 * Section 16 sets `.cas-bd .aws-breeds-chips > .aws-breed-chip` (0,3,0) to
 * 38px, which outranks the general `(pointer: coarse)` rule in section 10
 * (0,2,1) — so on a phone, where these are the primary navigation out of the
 * page and there are twenty-five of them wrapped into ten rows, every target
 * had quietly dropped below the 44px floor. Matched here instead.
 */
@media (pointer: coarse) {
    .cas-bd .aws-breeds-chips > .aws-breed-chip {
        min-height: 44px;
        padding-block: .5rem;
    }
}

/*
 * A subtitle belongs to its heading. frontend.css gives .aws-section-subtitle
 * a 24px top margin, which on the new rhythm put 36px between the two and
 * made the heading and its own explanatory line read as separate blocks —
 * with the grid below them only 35px further down, i.e. the subtitle looked
 * closer to the cards than to the sentence it qualifies.
 */
.cas-bd .aws-section-header .aws-section-subtitle {
    margin-top: .5rem !important;
    margin-bottom: 0;
    font-size: 1.0625rem !important;
    line-height: 1.6;
    /*
     * --cas-bd-lead, not frontend.css's --cas-text-muted (#6b7280).
     *
     * #6b7280 measures 4.83:1 on white, which is where it was designed, but
     * these sections now sit on the page ground (#f4f5f7) and it drops to
     * 4.43 — under AA, and only caught because the ground changed in the
     * same pass. --cas-bd-lead was picked against the tinted surfaces and
     * holds 6.02 there.
     */
    color: var(--cas-bd-lead) !important;
}

/*
 * Hands off the theme's product cards.
 *
 * The button rule in section 4 matches `.btn`, which every control inside a
 * WooCommerce product card also wears — "Get My Info", the phone button, the
 * video CTA. Those belong to the theme: it owns their shape, their colour and
 * their copy, and it currently wins on specificity by accident rather than by
 * design. Making that explicit means a later tweak to our button rule cannot
 * silently reshape someone else's card.
 *
 * `all: revert` rather than a list of resets: it hands every property back to
 * the previous origin in the cascade, which is exactly "pretend we never
 * matched".
 */
.cas-bd .aws-woo-wrapper ul.products li.product :is(.btn, .button, [class*="btn-"]) {
    all: revert;

    /*
     * One property clawed back, because `all` reverts to the USER-AGENT
     * origin and therefore discards `*, ::before, ::after { box-sizing:
     * border-box }` — which Bootstrap sets document-wide and the theme's
     * whole button sizing assumes. Reverting it left these buttons alone on
     * the page in content-box, so their padding and 1.5px border sat OUTSIDE
     * the computed width and no two buttons in a row measured the same.
     *
     * A document-wide invariant is not one of the card styles this rule is
     * handing back.
     */
    box-sizing: border-box;
}

/*
 * One exception to that, and only one: the two-up button row splits 50/50.
 *
 * The theme leaves "Get My Info" and the phone button at their intrinsic
 * widths, so every card in the grid shows a different split — a short
 * "Get My Info" beside a long "(123) 456-7895" — and the row's right edge
 * never lines up with the card's. Across a 3-across grid that reads as three
 * different components rather than three of the same one.
 *
 * Equal grid tracks, not `flex: 1 1 0`.
 *
 * Flex was the obvious answer and it is wrong here by exactly 3px: with
 * `box-sizing: border-box`, a `flex-basis` of 0 is clamped up to the item's
 * own padding + border, and only the free space ABOVE that is shared out.
 * "Get My Info" has no border and the phone button has a 1.5px one, so the
 * phone button finished 3px wider on every card. Measured, not assumed.
 *
 * Equal grid tracks cannot be skewed by a border, and `auto-fit` keeps the
 * two things flex-wrap was doing for free:
 *
 *   - One button (the theme omits the phone button when the location has no
 *     number) collapses the empty track, so it spans the row instead of
 *     sitting in a half beside a hole.
 *   - Below the 8.5rem floor the row drops to ONE column and the buttons
 *     stack full width. That floor is not decoration: at 390px this grid is
 *     two 167px cards, which leaves the button row 107px — halved, that is a
 *     47px button with its label clipped to nothing. Measured in a 390px
 *     frame, not guessed. `grid-auto-flow: column` had no such escape and
 *     would have shipped that.
 *
 * `display` needs the flag to beat Bootstrap's `.d-flex`; specificity is
 * deliberately above the `all: revert` rule so the rest cannot be won or
 * lost on source order.
 */
.cas-bd .aws-woo-wrapper ul.products li.product .product-btns-wrapper {
    display: grid !important;
    /*
     * `min(8.5rem, 100%)`, not a bare 8.5rem: a track minimum larger than
     * its container does not shrink, it overflows — at 390px the card's
     * button row is 107px and a bare 8.5rem floor pushed 136px buttons
     * 29px outside the card.
     */
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    align-items: stretch;
}

.cas-bd .aws-woo-wrapper ul.products li.product .product-btns-wrapper > :is(.btn, [class*="btn-"]) {
    min-width: 0;
    width: auto;

    /*
     * Half a card is narrower than the theme's 1rem side padding assumed.
     * At 3-across, "(123) 456-7895" plus a 14px icon did not fit inside a
     * half-width button and ellipsed to "(123) 456-78…" — a phone button
     * whose phone number is cut off. Trimming the inline padding buys the
     * ~12px the number needs; the ellipsis below stays as the floor for a
     * longer label or a narrower card.
     *
     * Flagged because theme-polish.css sets
     *   li.product .btn.btn-black, li.product .product-btn-phone
     *     { padding: .5rem 1rem !important }
     * and an unflagged declaration loses to it at any specificity.
     */
    padding-inline: .625rem !important;
}

/*
 * The second exception: kill the card-within-a-card frame.
 *
 * The theme nests two boxes inside every product li —
 *     div.card.bg-transparent.border-0
 *       div.border.border-2.border-primary.rounded-2.overflow-hidden.shadow-sm
 * — so the outer card draws one edge and the inner div draws a 2px edge
 * around the photo and details, giving every tile a visible double frame.
 *
 * The shadow goes with the border rather than after it: with the edge gone a
 * `shadow-sm` still traces exactly the same rectangle, so removing one and
 * keeping the other just makes the frame fainter instead of absent. The
 * `overflow: hidden` and `rounded-2` are LEFT ALONE — they are what clip the
 * photo to a rounded corner, which is the card's shape, not its frame.
 *
 * Flagged and at (0,6,2) because Bootstrap's `.border` utility is itself
 * `!important` at (0,1,0), and an author !important beats an author
 * non-important at any specificity.
 */
.cas-bd .aws-woo-wrapper ul.products li.product .card > .border {
    border: 0 !important;
    box-shadow: none !important;
}

/* The phone number is the one label long enough to blow out its half. */
.cas-bd .aws-woo-wrapper ul.products li.product .product-btns-wrapper .product-btn-phone-text,
.cas-bd .aws-woo-wrapper ul.products li.product .product-btns-wrapper .product-btn-info span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   18. The breed shelf
   ==========================================================================
   Two tiers replacing twenty-five identical pills. Tier 1 is a card with a
   square photo, a live count and a facepile of real puppies; tier 2 is a
   count-annotated list holding every remaining breed, so all the internal
   links survive.

   Card anatomy ported from wc-puppy-breeds/templates/content-breed-card.php
   and breed-design.css:1178-1442, scaled from its 405px archive card to the
   309px this shelf needs: (1296 - 3 x 20) / 4.
   ========================================================================== */

.cas-bd .cas-shelf { padding-block: var(--cas-bd-block) 0; }

.cas-bd .cas-shelf__head { margin-bottom: clamp(1.25rem, 1rem + .8vw, 1.75rem); }

/*
 * Four across, explicit — never auto-fill. At the real container step widths
 * (1296/1116/936/696/516) an auto-fill track silently collapses to one
 * full-width card between 600 and 767px, which is a square photo swallowing
 * the viewport.
 *
 * 20px gap against the product grid's 32px. The shelf is navigation and must
 * read as subordinate to the inventory it serves; the tighter gutter says so
 * without needing a smaller heading.
 */
.cas-bd .cas-shelf__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 600px) { .cas-bd .cas-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cas-bd .cas-shelf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- The card ------------------------------------------------------------- */

.cas-bd .cas-breedcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .75rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-hairline);
    border-radius: var(--cas-bd-radius-lg);
    /* The photo clips itself, so the card does not need overflow:hidden — and
       without it the focus ring would be clipped. */
    overflow: visible;
    box-shadow: var(--cas-bd-shadow-sm);
    transition: box-shadow .16s var(--cas-bd-ease),
                transform .16s var(--cas-bd-ease),
                border-color .16s ease;
}

.cas-bd .cas-breedcard:hover,
.cas-bd .cas-breedcard:focus-within {
    border-color: var(--cas-bd-brand-edge);
    box-shadow: var(--cas-bd-shadow-hover);
    transform: translateY(-2px);
}

.cas-bd .cas-breedcard:hover .cas-breedcard__link { color: var(--cas-bd-brand-ink); }

/* Touch has no hover, so without :active a tap gives no feedback between
   press and navigation. */
.cas-bd .cas-breedcard:active { transform: none; transition-duration: 60ms; }

.cas-bd .cas-breedcard.is-current {
    border-color: var(--cas-bd-brand);
    box-shadow: 0 0 0 1px var(--cas-bd-brand), var(--cas-bd-shadow);
}

/* --- Photo: a plate inside the card --------------------------------------- */

.cas-bd .cas-breedcard__media {
    position: relative;
    aspect-ratio: 1 / 1;
    /* 14px inside the card's 18px at a 12px inset — deliberately NOT
       concentric, which would compute to 6px and read tight. */
    border-radius: var(--cas-bd-radius);
    background: var(--cas-bd-chip);
    overflow: hidden;
}

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

/* A hairline inside the photo: half these images are pale cut-outs and
   without it the plate dissolves into the white card. */
.cas-bd .cas-breedcard__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--cas-bd-hairline);
    pointer-events: none;
}

/* --- Count flag ----------------------------------------------------------- */

/*
 * Green, not brand. In-stock is the one piece of good news on the card and
 * must not be mistaken for a badge every card carries. Solid, not
 * translucent, because it sits over pale photographs.
 */
.cas-bd .cas-breedcard__flag {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 .625rem;
    background: var(--cas-bd-ok);
    border-radius: var(--cas-bd-pill);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* --- Facepile ------------------------------------------------------------- */

/*
 * Real puppies of this breed in this city. On a grid of stock breed
 * photographs these three faces are the one thing on the card that is
 * unarguably true of this shop today.
 *
 * Bottom-left, opposite the flag, so at the narrowest column the two are
 * still the photo's full height apart.
 */
.cas-bd .cas-faces {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}

/*
 * !important on the dimensions, because the theme sizes every img.
 *
 * Caught in a screenshot: the faces rendered at 271x203 with a 50% radius,
 * which drew a giant white-ringed ellipse across each breed photo. The theme
 * stylesheet wins on a bare `img` rule and 28px here lost to it. Verified by
 * setting the property inline with priority — 271px became 28px.
 */
.cas-bd .cas-faces__item,
.cas-bd .cas-faces__more {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    max-width: 28px !important;
    border-radius: 50%;
    /* box-shadow, not border: the collar has to sit OUTSIDE the circle or the
       photograph is cropped twice, and a shadow costs no layout. */
    box-shadow: 0 0 0 2px #fff;
    object-fit: cover;
    flex: 0 0 auto;
}

.cas-bd .cas-faces__item + .cas-faces__item,
.cas-bd .cas-faces__more { margin-left: -8px; }

.cas-bd .cas-faces__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: none !important;
    min-width: 28px;
    padding: 0 .3rem;
    background: var(--cas-bd-ink);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Body ----------------------------------------------------------------- */

.cas-bd .cas-breedcard__body { padding: 1rem .5rem .5rem; }

.cas-bd .cas-breedcard__title {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.008em;
    overflow-wrap: anywhere;
}

.cas-bd .cas-breedcard__link {
    color: var(--cas-bd-ink);
    text-decoration: none;
    transition: color .16s ease;
}

/* Stretched link. The ::after carries the hit area so the accessible name
   stays the breed rather than the card's whole text content. */
.cas-bd .cas-breedcard__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}

.cas-bd .cas-breedcard__meta {
    max-width: none;
    margin: .3rem 0 0;
    color: var(--cas-bd-ink-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

/* --- Tier 2: the complete list -------------------------------------------- */

.cas-bd .cas-shelf__all { margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem); }

.cas-bd .cas-shelf__alltoggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .5rem .875rem;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-border);
    border-radius: var(--cas-bd-radius-sm);
    color: var(--cas-bd-ink-soft);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.cas-bd .cas-shelf__alltoggle:hover {
    border-color: var(--cas-bd-brand-edge);
    color: var(--cas-bd-brand-ink);
}

/*
 * Multi-column so twenty-five names are three short columns rather than one
 * long scroll. column-count rather than grid: the list is alphabetical and
 * reads down each column, which is what a reference index should do.
 */
.cas-bd .cas-shelf__list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    column-width: 15rem;
    column-gap: 2rem;
}

.cas-bd .cas-shelf__list li { break-inside: avoid; }

.cas-bd .cas-shelf__list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
    padding: .35rem 0;
    border-bottom: 1px solid var(--cas-bd-hairline);
    color: var(--cas-bd-ink-soft);
    font-size: .9375rem;
    text-decoration: none;
}

.cas-bd .cas-shelf__list a:hover .cas-shelf__name { color: var(--cas-bd-brand-ink); }
.cas-bd .cas-shelf__list a[aria-current="page"] .cas-shelf__name { font-weight: 700; color: var(--cas-bd-ink); }

.cas-bd .cas-shelf__count {
    flex: 0 0 auto;
    color: var(--cas-bd-ink-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

/* The only rows that get the good-news colour are the ones with stock. */
.cas-bd .cas-shelf__count.is-stocked { color: var(--cas-bd-ok); font-weight: 700; }

@media (pointer: coarse) {
    .cas-bd .cas-shelf__list a { min-height: 44px; }
}

/* ==========================================================================
   19. The break between "this area" and "everywhere else"
   ==========================================================================
   The second grid was running straight on from the first with only a
   heading between them, so a visitor crossed from "puppies in Wind Gap" to
   "puppies from anywhere" without noticing — the one distinction the whole
   matched/rest ladder exists to make.

   A rule, an eyebrow naming the change, and the heading and its line kept
   together as one header block.
   ========================================================================== */

.cas-bd .cas-rest {
    margin-top: calc(var(--cas-bd-block) * .9);
    padding-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    border-top: 1px solid var(--cas-bd-border);
}

.cas-bd .cas-rest__head { margin-bottom: clamp(1.25rem, 1rem + .8vw, 1.75rem); }

.cas-bd .cas-rest__head .cas-eyebrow { margin-bottom: .5rem; }

.cas-bd .cas-rest__head .aws-section-title--sub {
    /* The header block owns the spacing now; the heading should not add its
       own or the eyebrow and the title drift apart. */
    margin-top: 0;
    margin-bottom: .5rem;
}

.cas-bd .cas-rest__head .aws-more-banner {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--cas-bd-lead);
    font-size: 1rem;
}

/* ==========================================================================
   20. The collapsed intro block
   ==========================================================================
   The area's own copy, directly under the hero where an introduction
   belongs, but costing one row instead of a screen. A two-line teaser so the
   control is not bare, then a toggle.
   ========================================================================== */

.cas-bd .cas-intro-section { padding-block: clamp(1.25rem, 1rem + .8vw, 1.75rem) 0; }

/*
 * Full-bleed inside the container, not capped to the reading measure.
 *
 * A measure-capped block left a third of the row empty and made the
 * collapsed intro read as a stray paragraph rather than a band of the page.
 * Spanning the container lets the block read as a band of the page — the
 * panel `.aws-content-wrapper` already draws needs the full width to look
 * deliberate rather than clipped.
 *
 * The prose that opens underneath keeps a measure — but by COLUMNS, not by a
 * cap: at desktop widths the body splits into two columns of comfortable
 * line length that together fill the width. Long lines stay readable and the
 * block still goes all the way across.
 */
.cas-bd .cas-introblock {
    max-width: none;
    margin: 0;
}

.cas-bd .cas-introblock__teaser {
    max-width: none;
    margin: 0 0 .625rem;
    color: var(--cas-bd-lead);
    font-size: 1rem;
    line-height: 1.7;
}

/* The toggle stays at the start edge, directly under the teaser it
   continues — a control at the far right would break the reading line. */
.cas-bd .cas-introblock__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/*
 * The toggle is a quiet text control here, not the brand-filled button
 * frontend.css dresses .aws-read-more-btn as. At the top of the page the
 * filled button competed with the hero's own primary CTA two rows above it,
 * and the page can only have one of those.
 *
 * The selector is long on purpose. Section 7's
 * `.cas-bd .aws-readmore > summary.aws-read-more-btn` also carries
 * `background: … !important` at (0,4,0), so a shorter selector here loses to
 * our own rule and the button comes back filled. This one is (0,4,1).
 */
.cas-bd .cas-introblock__details > summary.cas-introblock__toggle.aws-read-more-btn {
    display: inline-flex !important;
    align-items: center;
    gap: .375rem;
    width: auto;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--cas-bd-brand-ink) !important;
    font-size: .9375rem !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    box-shadow: none !important;
}

.cas-bd .cas-introblock__details > summary.cas-introblock__toggle.aws-read-more-btn:hover {
    background: none !important;
    transform: none !important;
    color: var(--cas-bd-brand-dark) !important;
}

/* Once open, the body needs room and a measure; the teaser is redundant. */
.cas-bd .cas-introblock__details[open] { margin-top: .25rem; }
.cas-bd .cas-introblock .aws-content-preview {
    max-width: none;
    padding-top: .75rem;
    color: var(--cas-bd-lead);
}

/*
 * column-width, not column-count: the browser makes two columns only when
 * two will actually fit at a readable width, and drops to one otherwise. A
 * short intro therefore stays a single block instead of becoming two stubby
 * columns.
 */
@media (min-width: 62rem) {
    .cas-bd .cas-introblock .aws-content-preview {
        columns: 34rem 2;
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.cas-bd .cas-introblock .aws-content-preview > * { break-inside: avoid-column; }
.cas-bd .cas-introblock .aws-content-preview :is(h1, h2, h3, h4) {
    break-after: avoid-column;
}

.cas-bd .cas-introblock .aws-content-preview > :first-child { margin-top: 0; }
.cas-bd .cas-introblock .aws-content-preview > :last-child { margin-bottom: 0; }

/* The generated copy leads with an h2 that repeats the page's own H1 area.
   Demote it visually so the collapsed block does not open into a second
   headline competing with the real one. */
.cas-bd .cas-introblock .aws-content-preview :is(h1, h2) {
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 1.5rem;
}

.cas-bd .cas-introblock .aws-content-preview :is(h3, h4) {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.25rem;
}

/* ==========================================================================
   21. The lead surfaces: hero figure, help card, CTA band, sticky bar
   ========================================================================== */

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

/*
 * The live count as the aside's headline, not a row in the fact list. It is
 * a link to the grid, so the number and the thing it counts are one click
 * apart.
 */
.cas-bd .cas-herofigure {
    display: block;
    margin: .25rem .5rem .75rem;
    padding: .875rem 1rem;
    background: var(--cas-bd-ok-wash);
    border: 1px solid var(--cas-bd-ok-edge);
    border-radius: var(--cas-bd-radius-sm);
    text-decoration: none;
    transition: border-color var(--cas-bd-dur) var(--cas-bd-ease),
                background-color var(--cas-bd-dur) var(--cas-bd-ease);
}

.cas-bd .cas-herofigure:hover { background: #ddeee4; border-color: var(--cas-bd-ok); }

.cas-bd .cas-herofigure__n {
    display: block;
    color: var(--cas-bd-ok);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    line-height: 1;
    font-weight: 700;
    /* Tabular so a count ticking from 9 to 10 does not shift the label. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.cas-bd .cas-herofigure__l {
    display: block;
    margin-top: .2rem;
    color: var(--cas-bd-ink);
    font-size: .9375rem;
    font-weight: 600;
}

.cas-bd .cas-herofigure__t {
    display: block;
    margin-top: .25rem;
    color: var(--cas-bd-ink-muted);
    font-size: .75rem;
}

/* --- Help card ------------------------------------------------------------ */

.cas-bd .cas-helpcard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0 0;
    padding: clamp(1.125rem, .9rem + .9vw, 1.5rem);
    background: var(--cas-bd-panel);
    border: 1px solid var(--cas-bd-border);
    border-radius: var(--cas-bd-radius-lg);
}

.cas-bd .cas-helpcard__body { flex: 1 1 22rem; min-width: 0; }

.cas-bd .cas-helpcard__title {
    max-width: none;
    margin: 0 0 .25rem;
    color: var(--cas-bd-ink);
    font-size: 1.0625rem;
    font-weight: 700;
}

.cas-bd .cas-helpcard__text {
    max-width: 40ch;
    margin: 0;
    color: var(--cas-bd-lead);
    font-size: .9375rem;
    line-height: 1.55;
}

.cas-bd .cas-helpcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

/* --- CTA band ------------------------------------------------------------- */

.cas-bd .cas-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    /*
     * frontend.css:806 caps `.aws-cta-content` at 720px — correct for the
     * single centred column it was written for, wrong for a two-column band.
     * This element carries BOTH classes, so without this the band has been
     * living in a 720px box inside a 1296px container since 2.0, and
     * `justify-content: space-between` has had 576px of nothing to push into.
     */
    max-width: none;
    /* The band inherits the dark gradient from frontend.css, which is right:
       it is the one deliberately inverted surface on the page and it marks
       the end. */
    text-align: start;
}

.cas-bd .cas-cta__text { flex: 1 1 26rem; min-width: 0; }

.cas-bd .cas-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.cas-bd .cas-cta .aws-cta-title {
    max-width: 22ch;
    margin: 0 0 .5rem;
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -.012em;
}

.cas-bd .cas-cta .aws-cta-text { max-width: 46ch; margin: 0; }

/*
 * The ghost button on the dark CTA band needs the light treatment, the
 * inverse of everywhere else on the page.
 */
.cas-bd .cas-cta .aws-cta-button--ghost {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .45) !important;
    color: #fff !important;
}

.cas-bd .cas-cta .aws-cta-button--ghost:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .7) !important;
    color: #fff !important;
}

.cas-bd .cas-cta :is(a, button):focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, .65);
}

/*
 * sms: is meaningless on a desktop — it opens nothing, or a handler nobody
 * wants. Shown only where a phone is plausible.
 */
.cas-bd .cas-cta__sms { display: none; }

@media (max-width: 767.98px) {
    .cas-bd .cas-cta__sms { display: inline-flex; }
}

/* --- Mobile sticky bar ---------------------------------------------------- */

/*
 * Mobile only, one row, 56px, fully opaque. Hidden entirely above 768px:
 * on a desktop the CTA is never more than a scroll away and a persistent
 * bar is chrome tax on an already-tall page.
 */
.cas-bd .cas-sticky { display: none; }

@media (max-width: 767.98px) {
    .cas-bd .cas-sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        gap: 1px;
        height: 56px;
        /* Opaque. Low-contrast translucent sticky chrome is hard to read and
           is the specific thing NN/g warns about. */
        background: var(--cas-bd-border);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, .14);
        /* Clear the home indicator on a notched phone. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .cas-bd .cas-sticky__btn {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        min-height: 56px;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
    }

    .cas-bd .cas-sticky__btn--call {
        background: var(--cas-bd-brand);
        color: var(--cas-bd-on-brand);
    }

    .cas-bd .cas-sticky__btn--text {
        background: var(--cas-bd-surface);
        color: var(--cas-bd-brand-ink);
    }

    .cas-bd .cas-sticky__btn:focus-visible {
        outline: 2px solid var(--cas-bd-ink);
        outline-offset: -4px;
    }

    /* The bar covers the last 56px of the page; give the document its height
       back or the footer's final row is unreachable. */
    body { padding-bottom: 56px; }
}

/* Never in print. */
@media print { .cas-bd .cas-sticky { display: none !important; } }

/* ==========================================================================
   22. The closing trio: nearby rail, guarantee panel, and the rhythm hole
   ========================================================================== */

/* --- 22a. The rhythm hole -------------------------------------------------
   Section 2 opens with `.cas-bd > section` — a CHILD combinator — and
   single-service_area.php puts every part from the inventory down inside
   <main>. Only the hero and the intro are still direct children. Every other
   in-main section survives by being named in the class list there or by
   owning a rule of its own; these two are in neither, which made them the
   only plugin sections on the page with no padding-block source in ANY
   sheet. Measured before the fix: 0px between the collapsed breed disclosure
   and the "Nearby cities we serve" heading.

   Same contract as .cas-shelf: own your top, delegate your bottom to
   whoever comes next. That is why the shelf's zero bottom padding is left
   alone — it was never the bug, the missing neighbour was.               */
.cas-bd .cas-nearby,
.cas-bd .cas-guarantee { padding-block: var(--cas-bd-block) 0; }

/* Defensive: a hook or child theme still passing section_class="mb-5".
   (0,2,0) + the flag clears Bootstrap's .mb-5 (0,1,0) !important.        */
.cas-bd .cas-guarantee.mb-5 { margin-bottom: 0 !important; }

/* --- 22b. Nearby: a rail, not a section ----------------------------------- */

/*
 * A hairline, not a panel — decided by rendering both at one chip and at six.
 *
 * The panel version looked deliberate in isolation but put a THIRD stacked
 * box into the last third of the page (guarantee panel, rail, FAQ list), and
 * at one chip it still had ~900px of empty panel to notice. The hairline
 * allocates no space it cannot fill, keeps the guarantee as the only
 * emphasised object down here, and gives the breed shelf above the bottom
 * boundary its delegation contract never provided.
 */
.cas-bd .cas-nearby__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cas-bd-hairline);
}

/*
 * `!important` on three properties, and it is not optional.
 *
 * frontend.css flags color / font-size / font-weight on .aws-section-title
 * at (0,1,0). An author !important beats an author non-important regardless
 * of specificity or load order, so the whole `--sub` treatment in section 2
 * has been dead since it was written: this heading rendered at 40px/700/near
 * -black, identical to the page's main section titles, above a single chip.
 *
 * The theme's own `.container h2:not(…) { font-size: 2.5rem !important }` at
 * (0,7,2) is NOT fought here — the part's wrapper moved from `.container` to
 * `.cas-bd__inner`, so that selector no longer matches at all. Both resolve
 * to the same box, so the rail's left edge stays aligned with the grid above.
 *
 * 17px/700 is not invented: it is `.cas-helpcard__title`, this sheet's
 * existing "title inside a panel row". A 22px heading beside a 38px chip
 * still dominates the rail.
 */
.cas-bd .cas-nearby .cas-nearby__label {
    flex: 0 1 auto;
    margin: 0 !important;
    color: var(--cas-bd-ink) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
    letter-spacing: -.006em;
}

/* Wraps to its own line under ~600px rather than squeezing the label. */
.cas-bd .cas-nearby .cas-nearby__list { flex: 1 1 18rem; min-width: 0; }

/* On a panel the recessed chip plane is one rung too deep: --cas-bd-chip on
   --cas-bd-panel is a 3% step, and a lone chip has no neighbours to read it
   against. Outlined-on-surface instead — the same treatment as
   .cas-shelf__alltoggle, which is the same kind of object: a link out. */
.cas-bd .cas-nearby .cas-chip {
    min-height: 38px;
    background: var(--cas-bd-surface);
    border-color: var(--cas-bd-border);
    color: var(--cas-bd-ink-soft);
}

.cas-bd .cas-nearby .cas-chip:hover,
.cas-bd .cas-nearby .cas-chip:focus-visible {
    background: var(--cas-bd-brand-wash);
    border-color: var(--cas-bd-brand-edge);
    color: var(--cas-bd-brand-ink);
}

/* Restated at (0,3,0): the rule above outranks the general coarse-pointer
   floor (0,2,1), which is exactly how the breed chips lost their 44px once
   before. */
@media (pointer: coarse) {
    .cas-bd .cas-nearby .cas-chip { min-height: 44px; padding-block: .5rem; }
}

/* --- 22c. Guarantee: the page's one green panel --------------------------- */
/*
 * Emphasis by hue, not by inversion. The `ok` family is already this sheet's
 * colour for a verifiable fact — the hero's live-count tile is the same
 * wash/edge/ink trio at tile scale — and this is its panel-scale sibling.
 * It is the only green panel on the page, so the trust moment stays
 * singular, and the inverted surface stays reserved for the closing CTA.
 *
 * Contrast on --cas-bd-ok-wash: ok 5.4:1, lead 5.8:1, ink 14.5:1.
 *
 * Plain (0,3,0) over frontend.css (0,1,0) throughout — no !important needed,
 * which only holds because the dead `.aws-guarantee-banner h2 { color:#fff
 * !important }` was deleted from the base sheet in the same change.
 */
.cas-bd .cas-guarantee .aws-guarantee-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0;
    padding: clamp(1.125rem, .9rem + .9vw, 1.5rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--cas-bd-ok-wash);
    border: 1px solid var(--cas-bd-ok-edge);
    border-radius: var(--cas-bd-radius-xl);
    color: var(--cas-bd-ink);
}

/* No box-shadow, deliberately. Neither of this panel's neighbours has one —
   .aws-faq-list directly below it and .cas-helpcard above both sit flat on
   the ground with a border only — so a shadow here would make the guarantee
   the single lifted light surface in the middle of the page and read as a
   different kind of object than it is. Hue already separates it. */

/*
 * Two tracks, and the 1fr is on the TITLE, not the copy.
 *
 * That is the whole fix for the empty right third. `.cas-bd p` caps every
 * paragraph at --cas-bd-measure, so the description could never grow past
 * ~68ch no matter what the old flex line did, and neither child had
 * flex-grow — leaving roughly 370px of a 1296px banner as dead space. Make
 * the cap BE the track, and put the slack on a track that can absorb it.
 */
@media (min-width: 768px) {
    .cas-bd .cas-guarantee .aws-guarantee-banner {
        /*
         * The 18rem floor is load-bearing, not padding. With a bare
         * `minmax(0, 1fr)` the copy track's 68ch cap eats the whole row on a
         * mid-size viewport and the identity track is squeezed to nothing:
         * measured 0px at 768 and 206px at 1024, which broke the title
         * across three lines with the shield stranded beside it. The floor
         * makes the copy yield first, which is the right order — a
         * description can read at 36ch, a 30px title cannot live in 206px.
         */
        grid-template-columns: minmax(18rem, 1fr) minmax(0, var(--cas-bd-measure));
        align-items: center;
        gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    }
}

/*
 * Only when guarantee_image_url is set. Its ABSENCE must not change the
 * other two tracks — the old layout collapsed its whole proportion when the
 * image slot was empty, which is the state of most installs.
 *
 * The 22rem floor on the identity track is measured, not guessed. With a
 * bare `minmax(0, 1fr)` the 228px image plus a 68ch copy cap squeezed the
 * identity down to 230px and broke "10 Year Health Guarantee" across three
 * lines with the shield stranded beside it. At 22rem the title settles on
 * two lines and the copy still gets ~56ch, which is inside a comfortable
 * measure.
 */
@media (min-width: 992px) {
    .cas-bd .cas-guarantee .aws-guarantee-banner.has-figure {
        grid-template-columns: minmax(22rem, 1fr) minmax(0, var(--cas-bd-measure)) auto;
    }
}

.cas-bd .cas-guarantee__id {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

/* Ground -> panel(ok-wash) -> disc(surface): one more rung of the ladder. */
.cas-bd .cas-guarantee__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--cas-bd-surface);
    border: 1px solid var(--cas-bd-ok-edge);
    border-radius: var(--cas-bd-pill);
    color: var(--cas-bd-ok);
}

/*
 * A real h2 at the section-title scale, not a 40px <strong>. The term is
 * emphasised by colour and weight, not size — the rule this sheet already
 * states for the "rest of the catalogue" heading: weight, not size, does the
 * work. A decorative figure was rendering as large as the page's actual
 * headline.
 */
.cas-bd .cas-guarantee__title {
    max-width: none;
    margin: 0;
    color: var(--cas-bd-ink);
    font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.012em;
    text-wrap: balance;
}

.cas-bd .cas-guarantee__term { color: var(--cas-bd-ok); }

/* (0,3,0) so it unambiguously outranks `.cas-bd p` — the grid track is the
   measure now, not this declaration. */
.cas-bd .cas-guarantee .cas-guarantee__text {
    max-width: none;
    margin: 0;
    color: var(--cas-bd-lead);
    font-size: 1rem;
    line-height: 1.65;
}

/*
 * `width: 228px`, not `width: 100%`.
 *
 * The figure sits in an `auto` grid track, so the track is sized BY the
 * image. A percentage width then resolves against the track the image is
 * supposed to be sizing — a circular dependency that CSS settles at zero,
 * collapsing the track and the image with it. Measured: a third track of
 * 0px and an image 0px wide. A definite width breaks the cycle;
 * max-width keeps it inside a narrow viewport.
 */
.cas-bd .cas-guarantee__img {
    justify-self: end;
    width: 228px;
    max-width: 100%;
    height: auto;
    border-radius: var(--cas-bd-radius);
}

@media (forced-colors: active) {
    .cas-bd .cas-nearby__row,
    .cas-bd .cas-guarantee .aws-guarantee-banner { border-color: CanvasText; }
    .cas-bd .cas-visit__plate { border: 1px solid CanvasText; }
    .cas-bd .cas-visit__plate--split > .cas-visit__facts { border-color: CanvasText; }
    .cas-bd .cas-visit__swatch { border-color: CanvasText; }
    .cas-bd .cas-fact-chip--ok { border: 1px solid CanvasText; }
    /* The FAQ dividers are the only thing separating rows now. */
    .cas-bd .aws-faq-list > .aws-faq-item { border-top-color: CanvasText !important; }
}

/* ==========================================================================
   23. The coverage plate — "Visit our area"
   ==========================================================================
   Rebuilt as ONE object.

   What was wrong, measured: eight 150px boxes computed 1312px inside a 1296px
   parent, so the container's `overflow-x: auto` painted a brand-ORANGE
   scrollbar thumb under the row and cut "Hours" off mid-word. A horizontal
   scroller is the wrong control for eight one-line facts, so it is removed
   rather than restyled. Three of those facts — City, State, Zip — already
   appear in the H1, the hero eyebrow, the breadcrumb and this section's own
   subtitle, and giving "PA" its own card spent the same weight as the phone
   number. They are gone.

   The remaining rows share ONE border with the map instead of sitting in a
   second box beside it: two separately bordered objects side by side read as
   two things, and the shorter one's ragged bottom edge is visible.

   No !important in this section. Every frontend.css rule it answers is
   unflagged, and the design layer is registered as a dependant of the base
   sheet so it always loads after.
   ========================================================================== */

.cas-bd .aws-visit-area { padding-block: var(--cas-bd-block); }

/* --- 23a. The plate ------------------------------------------------------- */

.cas-bd .cas-visit__plate {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--cas-bd-panel);
    border: 1px solid var(--cas-bd-border);
    border-radius: var(--cas-bd-radius-xl);
    overflow: hidden;
}

/* Anything a hook echoes spans the row instead of landing in a column. */
.cas-bd .cas-visit__plate > * { grid-column: 1 / -1; }

/* --- 23b. Columns --------------------------------------------------------- */

/* Stacked below 992: facts on top, map beneath, one hairline between. */
.cas-bd .cas-visit__plate--split > .cas-visit__facts {
    border-bottom: 1px solid var(--cas-bd-hairline);
}

@media (min-width: 992px) {
    .cas-bd .cas-visit__plate--split {
        /*
         * An rem pair, not a fraction. These are label/value rows with a
         * fixed appetite: a percentage track squeezes "SERVICE RADIUS" onto
         * two lines at 1024 and leaves a 400px column half empty at 1440.
         */
        grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    }

    .cas-bd .cas-visit__plate--split > .cas-visit__facts { grid-column: 1; }
    .cas-bd .cas-visit__plate--split > #service-area-map { grid-column: 2; }

    /* Both columns stretch — deliberately no `align-self: start`. Inside one
       plate the leftover height is interior whitespace of a single object,
       and the divider has to run its full height. */
    .cas-bd .cas-visit__plate--split > .cas-visit__facts {
        border-bottom: 0;
        border-inline-end: 1px solid var(--cas-bd-hairline);
    }

    .cas-bd .cas-visit__plate--split > #service-area-map { min-height: 22rem; }
}

/* Map only (facts switched off). min-height, never aspect-ratio — the whole
   point of section 8 is that this element must not derive one axis from the
   other again. */
.cas-bd .cas-visit__plate--map > #service-area-map {
    min-height: clamp(20rem, 26vw, 28rem);
}

/* --- 23c. The map inside the plate ---------------------------------------- */

.cas-bd .cas-visit__plate > #service-area-map {
    border: 0;
    box-shadow: none;
    /*
     * The plate clips, but WebKit has leaked transformed children past a
     * rounded `overflow: hidden` corner for years — and every Leaflet tile is
     * transformed. Matching the outer corners on the map itself means they
     * hold even where the clip does not. -1px is the plate's border.
     */
    border-radius: 0 0 calc(var(--cas-bd-radius-xl) - 1px) calc(var(--cas-bd-radius-xl) - 1px);
}

@media (min-width: 992px) {
    .cas-bd .cas-visit__plate--split > #service-area-map {
        border-radius: 0 calc(var(--cas-bd-radius-xl) - 1px) calc(var(--cas-bd-radius-xl) - 1px) 0;
    }
}

.cas-bd .cas-visit__plate--map > #service-area-map {
    border-radius: calc(var(--cas-bd-radius-xl) - 1px);
}

/* --- 23d. The facts panel ------------------------------------------------- */

.cas-bd .cas-visit__facts {
    /* WAS overflow-x:auto plus a styled orange scrollbar thumb. With overflow
       visible those pseudo-elements are simply never painted. */
    overflow: visible;
    margin: 0;
    padding: clamp(1.125rem, .9rem + .7vw, 1.5rem);
    min-width: 0;
}

.cas-bd .cas-visit__list {
    /* WAS display:flex + min-width:fit-content — the pair that computed
       1312px inside 1296px. */
    display: grid;
    gap: .875rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-type: none;
}

/*
 * Label OVER value, matching the existing .cas-fact rows these are now a
 * family with. NOT label-left / value-right: that opens a ~1200px gap between
 * "HOURS" and its value the moment the map is switched off and the panel is
 * full width.
 *
 * Both states in one rule so the base sheet's `.aws-info-box:hover` cannot
 * reintroduce the border, the 2px lift or the shadow. A list row is not a
 * target.
 */
.cas-bd .cas-visit__row,
.cas-bd .cas-visit__row:hover {
    display: block;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: start;
    transform: none;
    box-shadow: none;
    transition: none;
    scroll-snap-align: none;
}

/* Higher than the :hover branch above, so the divider is not decided by
   source order. */
.cas-bd .cas-visit__list > .cas-visit__row + .cas-visit__row {
    padding-top: .875rem;
    border-top: 1px solid var(--cas-bd-hairline);
}

.cas-bd .cas-visit__facts .aws-info-label {
    margin: 0 0 .2rem;
    color: var(--cas-bd-ink-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}

/* frontend.css paints every value --cas-primary-dark. Four orange values in
   one panel gave "PA" the same emphasis as the phone number, and orange on
   near-white is the one real contrast risk in this block. */
.cas-bd .cas-visit__facts .aws-info-value {
    max-width: none;
    margin: 0;
    color: var(--cas-bd-ink);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
}

/* --- 23e. The phone row --------------------------------------------------- */

/*
 * Colour is set on the VALUE, not on the <a>. frontend.css flags
 * `.aws-info-value a { color: inherit !important }`, which no unflagged
 * declaration beats at any specificity — so `inherit` is made to resolve to
 * the right colour instead of being fought. That is why this whole section
 * needs no flag of its own.
 */
.cas-bd .cas-visit__row--call .aws-info-value {
    color: var(--cas-bd-brand-ink);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/*
 * Not a filled button. The hero has a Call CTA, the CTA band below has Call
 * and Text, and the sticky bar has one more — a fifth primary action here
 * would make none of them primary. A tappable number at the 44px floor is
 * enough, and it is deliberately not the largest type in the section.
 */
.cas-bd .cas-visit__tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    text-decoration: none;
}

.cas-bd .cas-visit__tel:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cas-bd .cas-visit__icon {
    flex: 0 0 auto;
    color: var(--cas-bd-brand-hue);
}

/* --- 23f. The radius legend ----------------------------------------------- */

.cas-bd .cas-visit__legend {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/*
 * The ring reproduces the circle Leaflet actually draws. --cas-visit-swatch is
 * stamped on the plate from the SAME option that feeds Leaflet, so the legend
 * cannot disagree with the map. Two background declarations rather than an
 * @supports block: an older browser drops the invalid color-mix() line and
 * keeps the white, which is the pattern this sheet already uses.
 */
.cas-bd .cas-visit__swatch {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--cas-visit-swatch, #3f4651);
    border-radius: var(--cas-bd-pill);
    background: #fff;
    background: color-mix(in srgb, var(--cas-visit-swatch, #3f4651) 12%, #fff);
}

/* --- 23g. The availability chips ------------------------------------------ */

/* The chips are the existing .cas-fact-chip--ok component, reused rather than
   reinvented. Green TEXT and a green wash chip, never a green ROW: the only
   green PANEL on the page is reserved for the guarantee. */
.cas-bd .cas-visit__modes {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem .5rem;
}

.cas-bd .cas-visit__modes .cas-fact-chip { min-height: 24px; }

/* --- 23h. Facts only (map switched off, or the area has no coordinates) ---- */

/*
 * With no map beside it the panel is the full 1296px, and a single column
 * would be a 1200px-wide list of two-word values. An auto-fit strip is what
 * eight-boxes-in-a-row was reaching for. Dividers off: they separated stacked
 * rows, not adjacent cells.
 */
@media (min-width: 768px) {
    .cas-bd .cas-visit__plate--facts .cas-visit__list {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
        gap: 1.25rem 2rem;
    }
    .cas-bd .cas-visit__plate--facts .cas-visit__list > .cas-visit__row + .cas-visit__row {
        padding-top: 0;
        border-top: 0;
    }
}

/* ==========================================================================
   24. The item sub-page
   ==========================================================================
   The area x breed page never joined the 2.0 redesign. `cas-design.css` did
   not mention `.aws-breed-hero` once, so that hero was still the pre-2.0
   flat band from frontend.css while the area page had moved to a panel — the
   two page types stopped looking like the same product.

   Measured on a live client page at 1609px before this section existed:
   a 504px hero holding an eyebrow, an H1, a breadcrumb and an image and
   nothing else; a matched grid one card wide in a three-track row with 885px
   empty beside it; and four sections whose padding was more than twice their
   content.
   ========================================================================== */

/* --- 24a. The short matched row ------------------------------------------ */

/*
 * One or two matched cards beside the help card, instead of a stranded
 * island with a full-width strip underneath.
 *
 * Only below three: at three the grid has a complete row and needs no help.
 * The wrapper is only printed in that case, so these rules cannot reach a
 * page that does not need them.
 */
.cas-bd .cas-matchrow {
    display: grid;
    gap: clamp(1.25rem, .9rem + 1.1vw, 2rem);
    align-items: start;
}

@media (min-width: 992px) {
    /* One card: the card keeps a card's width and the help card takes the
       rest, rather than either being stretched to fill a third of a row. */
    .cas-bd .cas-matchrow--1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

    /* Two cards: they already hold two thirds, so the help card takes one. */
    .cas-bd .cas-matchrow--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/*
 * Inside the row the product grid drops to as many tracks as it has cards.
 * Without this the three-track rule from section 17 still applies and the
 * single card is squeezed into a third of an already narrow column.
 *
 * `!important` because Bootstrap's own `row-cols-lg-3` is on the same
 * element from the theme's markup.
 */
@media (min-width: 992px) {
    .cas-bd .cas-matchrow--1 ul.products {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .cas-bd .cas-matchrow--2 ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* The help card stops being a letterbox and becomes a column: it fills the
   height beside the cards rather than sitting under them. */
.cas-bd .cas-matchrow > .cas-helpcard { margin: 0; }

/* --- 24a2. The hero joins the design layer -------------------------------- */

/*
 * `.aws-breed-hero` appeared nowhere in this file before now, so while the
 * area page moved to an inset panel on the page ground, the item hero stayed
 * on frontend.css's flat `--cas-primary-light` band. That is the whole reason
 * this page read as a different, older product.
 *
 * Same treatment as the area hero: no band, content on the page ground, the
 * image as a card. `!important` on the background because frontend.css sets
 * it unflagged but the theme's own stylesheets load after this one.
 */
.cas-bd.cas-item .aws-breed-hero {
    background: none;
    padding-block: var(--cas-bd-block) 0;
    border-bottom: 0;
}

/*
 * `align-items: center` was vertically centring a ~230px text column against
 * a 360px image and splitting the difference as padding above and below the
 * words. Top-aligned, the column starts where the eye does.
 */
.cas-bd.cas-item .aws-breed-hero-grid {
    align-items: start;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/*
 * `!important` because frontend.css:152 sets the `margin` SHORTHAND with
 * `!important` on a bare `.aws-page-title`. Author-important beats
 * author-normal at any specificity, so without this the rule is dead and the
 * H1 keeps its 16px — measured on a live 2.0.2 page, which is how this was
 * caught. `margin-bottom` only: the shorthand's other three sides are correct.
 */
.cas-bd.cas-item .aws-breed-hero .aws-page-title {
    margin-bottom: .625rem !important;
}

/*
 * The lead, matching the area hero's measure and colour.
 *
 * `margin-bottom: 0` on purpose: `.cas-hero__ctas` already carries a
 * `margin-top` of up to 2rem, and stacking the two put 52px between the
 * sentence and the button it is asking the reader to press. The gap belongs
 * to one of them, and it belongs to the buttons.
 */
.cas-bd.cas-item .cas-item-hero__lead {
    max-width: 48ch;
    margin: 0;
    color: var(--cas-bd-lead);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/*
 * The breadcrumb sits between the H1 and the lead in this template's markup
 * order, which would put navigation in the middle of the pitch. Order it
 * above the eyebrow instead — orientation first, then the claim, then the
 * action — without moving it in the DOM, so the microdata trail and its
 * position values are untouched.
 *
 * On this fleet the theme owns the JSON-LD BreadcrumbList and our graph
 * stands down, so this microdata is the ONLY breadcrumb trail on the page.
 * It must not be removed.
 */
.cas-bd.cas-item .aws-breed-hero .aws-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cas-bd.cas-item .aws-breed-hero .aws-breadcrumb  { order: -1; margin: 0 0 .875rem; }
.cas-bd.cas-item .aws-breed-hero .aws-location-badge { order: 0; }
.cas-bd.cas-item .aws-breed-hero .aws-page-title  { order: 1; }
.cas-bd.cas-item .cas-item-hero__lead             { order: 2; }
.cas-bd.cas-item .aws-breed-hero .cas-hero__ctas  { order: 3; }

/* The hero image becomes a card on the ground rather than a floating square
   with the old sheet's heavy shadow. */
.cas-bd.cas-item .aws-breed-hero .aws-hero-media {
    border: 1px solid var(--cas-bd-hairline);
    border-radius: var(--cas-bd-radius-lg);
    box-shadow: none;
    overflow: hidden;
}

/* --- 24b. Section rhythm on this template -------------------------------- */

/*
 * Measured content-to-box on the live page: local facts 28%, nearby 15%,
 * guarantee 30%, CTA 28% — against the FAQ's 87%, which is what the rest of
 * the page should look like. These sections are not too small; their padding
 * is too large for what they hold.
 *
 * Scoped to `.cas-item` so the area page, which is already tuned, cannot
 * regress.
 */
.cas-bd.cas-item .aws-local-facts,
.cas-bd.cas-item .aws-nearby-areas,
.cas-bd.cas-item .aws-breed-profile {
    padding-block: calc(var(--cas-bd-block) * .6);
}

.cas-bd.cas-item .section-guarantee-banner { padding-block: calc(var(--cas-bd-block) * .5); }