/* ==========================================================================
   Puppy Connection — concept build
   Palette and typefaces harvested from the client's Wix build (see BRAND.md).
   Playfair Display is theirs. Barlow stands in for DIN Neuzeit Grotesk,
   which is licensed through Wix and cannot be carried over.
   ========================================================================== */

:root{
  /* brand, harvested */
  --ink:#262626;
  --ink-soft:#414141;
  --gold:#f7d57f;
  --bronze:#bc9b5d;
  --olive:#7c6b40;
  --cream:#e7e2d2;
  --cream-text:#e6deca;

  /* derived neutrals, warm-biased so they sit with the cream */
  --paper:#fcfcfc;
  --paper-warm:#f5f2ea;
  --line:#e2ddd1;
  --line-strong:#cdc6b5;
  --muted:#6f6a60;

  --ok:#3d6b4a;
  --alert:#9c4b3c;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed','Barlow',system-ui,sans-serif;

  --maxw:1360px;
  --gut:clamp(1rem,4vw,2.5rem);
  --rule:1px solid var(--line);

  color-scheme: light only !important;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#fcfcfc; --paper-warm:#f5f2ea; --ink:#262626; --line:#e2ddd1;
    color-scheme: light only !important;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;
  /* In-page links land below the sticky header (G1). --hdr-h is the header's measured height,
     set by main.js; 152px is the tallest header measured without it (desktop, 2026-10-17). */
  scroll-padding-top:calc(var(--hdr-h,152px) + .75rem)}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--olive)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--gut)}

/* grid children must be allowed to shrink */
.grid>*,.split>*,.rail-layout>*,.foot-grid>*,.facts>*{min-width:0}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.015em}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem;max-width:70ch}

.eyebrow{
  font-family:var(--cond);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--olive);margin:0 0 .6rem;
}
.eyebrow-light{color:var(--gold)}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}
.meta{font-family:var(--cond);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- header ---------- */
.site-header{background:var(--ink);position:sticky;top:0;z-index:50}
.hdr{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--gut);
  display:flex;align-items:center;gap:2rem;
}
.brand{display:flex;flex-direction:column;gap:.15rem;flex:0 1 auto;min-width:0;text-decoration:none}
.brand img{width:clamp(150px,17vw,208px);height:auto}
.brand small{
  font-family:var(--serif);font-size:.72rem;font-style:italic;
  color:var(--cream-text);opacity:.8;letter-spacing:.01em;
}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2rem)}
.nav a{
  font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-text);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current]{color:#fff;border-bottom-color:var(--gold)}
.nav .btn-list{
  border:1px solid var(--gold);color:var(--gold);padding:.45rem 1rem;border-bottom-width:1px;
}
.nav .btn-list:hover{background:var(--gold);color:var(--ink);border-bottom-color:var(--gold)}
.burger{display:none;margin-left:auto;background:none;border:1px solid #4a4a4a;color:var(--cream-text);
  font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:.5rem .8rem;cursor:pointer}
@media(max-width:900px){
  /* Full height rather than a short dropdown with the page showing beneath it.
     Sits below the sticky header (z-index 50) so the logo and close stay put;
     --hdr-h is measured in main.js because the header height is not fixed. */
  .nav{
    display:none;position:fixed;inset:0;z-index:40;
    background:var(--ink);overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--hdr-h,86px) + 1.6rem) var(--gut) 2.4rem;
  }
  .nav.open{display:flex}
  .nav a{
    width:100%;padding:1.15rem 0;border-bottom:1px solid #3a3a3a;
    font-size:1.35rem;letter-spacing:.1em;
  }
  .nav a:first-child{border-top:1px solid #3a3a3a}
  .nav .btn-list{
    margin-top:auto;text-align:center;border:1px solid var(--gold);
    padding:1rem 1.2rem;font-size:1.1rem;
  }
  /* The nav is a descendant of the header, so it paints above the header's
     background whatever its z-index. Lift its siblings instead, or the menu
     covers the logo and the button used to close it. */
  .brand,.burger{position:relative;z-index:60}
  .burger{display:block}
  body.nav-open{overflow:hidden}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--cond);font-size:1.02rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:.72rem 1.5rem;border:1px solid transparent;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.btn-primary{background:var(--ink);color:var(--cream-text);border-color:var(--ink)}
.btn-primary:hover{background:var(--olive);border-color:var(--olive);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold:hover{background:var(--ink);color:var(--gold)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-warm);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}

/* ---------- sections ---------- */
.band{padding:clamp(2.6rem,6vw,4.6rem) 0}
.band-warm{background:var(--paper-warm);border-block:var(--rule)}
.band-dark{background:var(--ink);color:var(--cream-text)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:var(--cream-text)}
/* The For breeders band above the footer sits on the brand's light cream, so it reads apart from
   the charcoal footer (G2). Its eyebrow takes a deeper olive, since olive on cream is 4.0:1. */
.band-cream{background:var(--cream)}
.band-cream .eyebrow{color:#5c4f2f}
.band-cream a:not(.btn){color:#5c4f2f}
/* The price card in the cream band matches the See how listing works button (Alex, 2026-10-17,
   option A): charcoal with cream text, 11.3:1, no other border */
.price-card.price-card-dark{background:var(--ink);border-color:var(--ink);color:var(--cream-text)}
.price-card.price-card-dark .meta{color:var(--cream-text)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.sec-head .link-more{font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase;font-size:.92rem;
  color:var(--olive);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:2px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink)}
.hero-img{width:100%;height:clamp(360px,56vh,580px);object-fit:cover;object-position:center 38%;opacity:.85}
@media(max-width:800px){.hero-img{height:clamp(300px,48vh,420px)}}
.hero-panel{
  position:absolute;inset:auto 0 0 0;padding:clamp(1.4rem,4vw,3rem) 0;
  background:linear-gradient(to top,rgba(20,20,20,.88),rgba(20,20,20,.55) 55%,transparent);
}
.hero-panel h1{color:#fff}
.hero-panel h1 em{font-style:italic;color:var(--gold);display:block;font-size:.5em;margin-bottom:.1em}
.hero-sub{color:var(--cream-text);font-size:1.1rem;max-width:52ch;margin:.6rem 0 0}
.breed-search{display:flex;gap:0;max-width:560px;margin-top:1.4rem}
.breed-search select{
  flex:1;min-width:0;font-family:var(--sans);font-size:1.02rem;padding:.8rem .9rem;border:1px solid #fff;
  background:#fff;color:var(--ink);border-radius:0;
}
.breed-search button{border:1px solid var(--gold);background:var(--gold);color:var(--ink);
  font-family:var(--cond);letter-spacing:.12em;text-transform:uppercase;padding:.8rem 1.4rem;cursor:pointer}
.breed-search button:hover{background:var(--ink);color:var(--gold)}
/* The home search (2026-10-11): one box with suggestions grouped by kind, and quick picks. */
.site-search{position:relative;max-width:620px;margin-top:1.4rem}
.site-search-row{display:flex;align-items:stretch;position:relative;height:3.25rem;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.site-search input[type=search]{flex:1 1 0;min-width:0;height:100%;box-sizing:border-box;font-family:var(--sans);font-size:1.02rem;line-height:1;padding:0 1rem;border:0;background:#fff;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.site-search input[type=search]:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.site-search button{flex:0 0 auto;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:7.5rem;border:0;background:var(--gold);color:var(--ink);font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;padding:0 1.4rem;margin:0;cursor:pointer;border-radius:0}
.site-search button:hover{background:var(--ink);color:var(--gold)}
.site-search-sug{position:absolute;left:0;right:0;top:100%;z-index:30;list-style:none;margin:0;padding:.3rem 0;background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.22);max-height:22rem;overflow-y:auto}
.site-search-sug li{display:grid;grid-template-columns:5.2rem 1fr;column-gap:.7rem;padding:.55rem .9rem;cursor:pointer;color:var(--ink)}
.site-search-sug li[aria-selected=true],.site-search-sug li[data-i]:hover{background:var(--paper-warm)}
.site-search-sug .sug-kind{grid-row:span 2;align-self:center;font-family:var(--cond);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.site-search-sug .sug-label{font-weight:500}
.site-search-sug .sug-sub{font-size:.85rem;color:var(--ink-soft)}
.site-search-sug .sug-none{display:block;color:var(--ink-soft);cursor:default}
@media(max-width:420px){.site-search button{min-width:5.5rem;padding:0 1rem}}

/* ---------- puppy cards ---------- */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.7rem)}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr))}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}

.card{background:var(--paper);border:var(--rule);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:border-color .15s ease}
.card:hover{border-color:var(--bronze)}
/* 3:2 matches her photography: sampled 24 first-images, median aspect 1.50,
   18 of 24 landscape. At this ratio most photos crop by nothing at all. */
.card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-warm)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* portrait-only listing: show the whole dog rather than crop it */
.card-media.is-whole{background:var(--cream)}
.card-media.is-whole::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:var(--fill) center/cover no-repeat;
  /* scaled up so the blur has material past the edges instead of fading out */
  filter:blur(22px) saturate(.7) brightness(.94);transform:scale(1.25);
}
.card-media.is-whole img{position:relative;z-index:1;object-fit:contain;object-position:center}
/* hover only where there is a real pointer, or the zoom sticks after a tap on iOS */
@media (hover:hover){.card:hover .card-media img{transform:scale(1.02);transition:transform .4s ease}}
/* the house reset site-checks enforces, matching teapup and sweetpuppypaws */
@media (hover: none){.card:hover .card-media img{transform:none}}
.card-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-name{font-family:var(--serif);font-size:1.3rem;line-height:1.2;font-weight:600}
.card-breed{font-family:var(--cond);font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.card-foot{margin-top:auto;padding-top:.7rem;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  border-top:1px dashed var(--line-strong)}
.price{font-family:var(--cond);font-size:1.3rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.card-ready{font-family:var(--cond);font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

.tag{position:absolute;z-index:2;top:.7rem;left:.7rem;font-family:var(--cond);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.25rem .6rem;background:rgba(38,38,38,.9);color:var(--gold)}
.tag-sold{background:rgba(156,75,60,.94);color:#fff}
.tag-pending{background:rgba(124,107,64,.94);color:var(--gold)}
.tag-litter{top:auto;bottom:.7rem;left:.7rem;background:rgba(252,252,252,.94);color:var(--ink)}
.card.is-sold .card-media img{filter:grayscale(.85)}

/* ---------- browse filter bar ----------
   The same design as Teapup and Sweet Puppy Paws (Alex, 2026-10-07), in this site's ink and
   gold. On a computer, tags above the grid, each opening a small menu; a chosen tag fills in
   and its cross clears it. On a phone the tags give way to one Filters button and a bottom
   sheet, the chosen filters show as tags, and the bar stays pinned under the header. The grid
   runs four across now that no sidebar takes a column. */
.avail-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap;
  margin-bottom:1.4rem;padding-bottom:.9rem;border-bottom:2px solid var(--ink)}
.avail-head .count{margin:0;font-family:var(--cond);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.avail-head .count-sort{color:var(--muted);margin-left:.6rem}
.ftags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;align-items:center}
.ft-wrap{position:relative;display:inline-flex}
.ft{display:inline-flex;align-items:center;gap:.4rem;min-height:42px;padding:0 .9rem;border:1.5px solid var(--line-strong);
  background:#fff;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.ft:hover{border-color:var(--ink)}
.ft:focus-visible,.ft-search:focus-within,.ft-x:focus-visible,.f-open:focus-visible,.f-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold)}
.ft .chev{color:var(--olive)}
.ft.on{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.ft.on .chev{display:none}
.ft-x{min-width:38px;border:0;background:var(--ink);color:var(--gold);font-size:1.15rem;line-height:1;cursor:pointer;border-left:1px solid rgba(247,213,127,.35)}
.ft-search{cursor:text;color:var(--muted);width:10rem}
.ft-search input{border:0;outline:0;background:none;font:inherit;color:var(--ink);width:100%;min-width:0}
.ft-menu{position:absolute;top:calc(100% + .35rem);left:0;z-index:45;list-style:none;margin:0;padding:.3rem;min-width:15rem;
  max-height:22rem;overflow-y:auto;background:#fff;border:1px solid var(--line-strong);box-shadow:0 12px 28px -10px rgba(38,38,38,.4)}
.ft-menu.flip{left:auto;right:0}
.ft-menu li{padding:.55rem .8rem;cursor:pointer;white-space:nowrap}
.ft-menu li:hover,.ft-menu li.act{background:var(--paper-warm)}
.ft-menu li[aria-selected="true"]{font-weight:600}
.ft-menu li[aria-selected="true"]::after{content:"\2713";float:right;margin-left:1rem;color:var(--olive)}
.f-open,.f-active{display:none}
/* These set their own display, which would otherwise beat the hidden attribute and leave the
   phone sheet and its scrim showing on every screen. */
.f-sheet[hidden],.f-scrim[hidden],.ft-x[hidden],.ft-menu[hidden],.f-empty[hidden],.f-open .dot[hidden]{display:none}
.f-empty{margin:0 0 1.5rem}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.f-scrim{position:fixed;inset:0;z-index:90;background:rgba(20,20,20,.5)}
.f-sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;max-height:82vh;display:flex;flex-direction:column;background:var(--paper);
  box-shadow:0 -12px 32px -12px rgba(38,38,38,.45);padding-bottom:env(safe-area-inset-bottom)}
.f-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem .5rem}
.f-sheet-head h2{margin:0;font-size:1.25rem}
.f-sheet-close{width:44px;height:44px;border:0;background:none;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.f-sheet-body{overflow-y:auto;padding:.25rem 1.1rem 1rem}
.f-sheet-foot{display:flex;gap:.75rem;padding:.75rem 1.1rem 1rem;border-top:var(--rule)}
.f-sheet-foot button{flex:1;min-height:48px;font-family:var(--cond);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.f-clear-all{border:1.5px solid var(--line-strong);background:#fff;color:var(--ink)}
.f-show{border:0;background:var(--ink);color:var(--gold)}
.f-group{margin-bottom:1.1rem}
.f-group h3{margin:.4rem 0 .55rem;font-family:var(--cond);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.f-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.f-chip{min-height:42px;padding:0 .9rem;border:1.5px solid var(--line-strong);background:#fff;font:inherit;color:var(--ink);cursor:pointer}
.f-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.f-name{display:flex;align-items:center;gap:.5rem;min-height:46px;padding:0 .9rem;border:1.5px solid var(--line-strong);background:#fff;color:var(--muted)}
.f-name input{border:0;outline:0;background:none;font:inherit;font-size:1rem;width:100%;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.f-sheet{animation:fSheetUp .22s ease-out}}
@keyframes fSheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.grid-4.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.grid-4.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
.result-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--ink)}
.result-bar .count{font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.empty{border:1px dashed var(--line-strong);padding:2.5rem 1.5rem;text-align:center;color:var(--muted)}

/* ---------- listing detail ---------- */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr}}
/* G10: on a wide screen a short sidebar beside long text travels with the reader and comes to
   rest level with the end of the text, so the right column never sits empty beside the prose. */
@media(min-width:941px){.split > aside{position:sticky;top:calc(var(--hdr-h,152px) + 1.5rem)}}
.gallery-main{aspect-ratio:3/2;overflow:hidden;border:var(--rule);background:var(--paper-warm)}
/* Contain here, not cover. At 3:2 the landscape majority fills the box
   exactly, so only a portrait letterboxes, and on the page where you are
   deciding on a puppy a whole dog beats a full-bleed crop. */
.gallery-main img{width:100%;height:100%;object-fit:contain}
/* G8: the photos are stacked and crossfade, as on Bless Your Paws. Only .is-on shows. */
.gallery-main{position:relative}
.gallery-main img{position:absolute;inset:0;opacity:0;transition:opacity .7s ease-in-out}
.gallery-main img.is-on{opacity:1;z-index:1}
@media (prefers-reduced-motion:reduce){.gallery-main img{transition:none}}
/* One row that scrolls, rather than a second row that competes with the main
   photo for height. The arrows only appear when there is somewhere to go. */
.thumb-strip{position:relative;margin-top:.5rem}
.thumbs{display:flex;gap:.5rem;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{flex:0 0 76px;scroll-snap-align:start;
  padding:0;border:1px solid var(--line);background:none;cursor:pointer;aspect-ratio:1;overflow:hidden}
.thumb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;padding:0;cursor:pointer;
  font-family:var(--cond);font-size:1.5rem;line-height:1;
  border:1px solid var(--line-strong);background:rgba(252,252,252,.94);color:var(--ink)}
.thumb-nav:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.thumb-nav[hidden]{display:none}
/* kept inside the strip so they never escape the column on a narrow screen */
.thumb-nav.prev{left:0}
.thumb-nav.next{right:0}
.thumb-nav{box-shadow:0 0 0 4px rgba(252,252,252,.72)}
.thumbs button[aria-current]{border-color:var(--ink);border-width:2px}
.thumbs img{width:100%;height:100%;object-fit:cover}

.name-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.name-row h1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.name-row .price{font-size:clamp(1.5rem,2.6vw,2rem)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:var(--rule);margin:1.4rem 0}
/* Puppy facts as boxes that always fill the row (Alex, 2026-10-17): three to a row, and the last
   row stretches, so no box is ever left empty. Two to a row on a phone. */
#detail .facts{display:flex;flex-wrap:wrap;border:0;border-top:var(--rule);border-left:var(--rule)}
#detail .facts > div{flex:1 1 30%;min-width:30%}
@media (max-width:560px){#detail .facts > div{flex-basis:45%;min-width:45%}}
/* the right column stacks several blocks; give them room to read as separate */
#detail .d-media > section{margin-top:2.2rem}
#detail .breeder-box{margin-top:2.2rem}
#detail .d-notes > .disclaimer{margin-top:0}
#detail .d-notes > .guide-panel{margin-top:1.4rem}
#detail > section:first-of-type{padding-bottom:clamp(2.6rem,6vw,4.6rem)}
.facts div{padding:.75rem .9rem;border-right:var(--rule);border-bottom:var(--rule)}
.facts dt{font-family:var(--cond);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:.15rem 0 0;font-size:1.02rem}
.includes{list-style:none;padding:0;margin:.6rem 0 0;columns:2;column-gap:1.6rem}
.includes li{padding-left:1.1rem;position:relative;margin-bottom:.3rem;font-size:.98rem;break-inside:avoid}
.includes li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--bronze)}
@media(max-width:560px){.includes{columns:1}}

/* the primary action: contacting the breeder */
.breeder-box{border:2px solid var(--ink);background:var(--paper-warm);padding:1.3rem 1.4rem;margin-top:1.6rem}
.breeder-box .eyebrow{margin-bottom:.35rem}
.breeder-box h3,.breeder-box h2.breeder-name{font-size:1.35rem;margin-bottom:.2rem}
.contact-list{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.contact-list a{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink);
  padding:.5rem .7rem;border:var(--rule);background:var(--paper)}
.contact-list a:hover{border-color:var(--olive);background:#fff}
.contact-list b{font-family:var(--cond);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);flex:0 0 4.6rem}
.disclaimer{font-size:.88rem;color:var(--muted);margin:.9rem 0 0;line-height:1.5}

/* ---------- breeder profile ---------- */
/* No initial-letter square: the breeder's real logo carries identity in the
   right column, and two marks competing beside the name read as clutter. */
.profile-head h1{margin-bottom:.15rem}
.prose p{margin-bottom:1.1rem}
.prose p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.4em;float:left;line-height:.82;padding:.06em .1em 0 0;color:var(--olive)
}

/* ---------- pricing (list with us) ---------- */
.price-card{border:2px solid var(--ink);background:var(--paper);padding:2rem;text-align:center;max-width:420px}
.price-big{font-family:var(--serif);font-size:4rem;line-height:1;font-weight:600}
.price-big sup{font-size:.42em;vertical-align:super;margin-right:.05em}
.price-card .meta{margin-top:.3rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:var(--rule)}
.steps li{counter-increment:s;background:var(--paper);padding:1.2rem 1.3rem}
.steps li::before{content:counter(s);display:block;font-family:var(--cond);font-size:.8rem;letter-spacing:.16em;
  color:var(--bronze);margin-bottom:.4rem}
.steps h3{font-size:1.05rem;margin-bottom:.3rem}
.steps p{font-size:.94rem;margin:0;color:var(--ink-soft)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--cream-text);padding:clamp(2.2rem,5vw,3.4rem) 0 1.6rem;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
/* The walker and dog only, cut from the logo (Alex, 2026-10-17), so the sign-up column stays short */
.site-footer img{width:auto;height:56px;margin-bottom:.8rem}
.site-footer .foot-h{font-family:var(--cond);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .7rem;font-weight:600}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem}
.site-footer a{color:var(--cream-text);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.foot-note{border-top:1px solid #3d3d3d;margin-top:2rem;padding-top:1.1rem;font-size:.84rem;color:#9a948a}
/* The footer's link columns are <details>, written open and closed by js/main.js on a phone,
   the same device as Teapup's footer (Alex, 2026-10-07), so a phone page does not end in a
   long stack of links. With the script off they stay open. */
.foot-sec > summary{list-style:none;cursor:pointer}
.foot-sec > summary::-webkit-details-marker{display:none}
.foot-sec .foot-h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.foot-sec .foot-more{display:none;color:var(--cream-text);transition:transform .2s ease}
.foot-sec .foot-more svg{display:block}
.foot-sec[open] .foot-more{transform:rotate(180deg)}
@media(max-width:700px){
  .foot-grid{gap:0 2rem}
  .foot-grid > div:first-child{margin-bottom:1.2rem}
  .foot-sec > summary{min-height:48px;display:flex;align-items:center;border-top:1px solid #3d3d3d}
  .foot-sec > summary .foot-h{width:100%;margin:0}
  .foot-sec[open] > summary{margin-bottom:.5rem}
  .foot-sec .foot-more{display:block}
  .foot-sec > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.foot-sec .foot-more{transition:none}}

/* Home page grids on a phone: two across, the first eight shown and "Show more" for the
   rest (js/main.js, reveal). A card sets its own display, so a hidden one needs saying. */
.home-grid > [hidden]{display:none}
.reveal-row{justify-content:center}
@media(max-width:760px){
  .home-grid,.grid-4.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  /* At two across a card is about 170px wide, so the price and the ready date stack rather
     than squeezing the date onto three lines beside the price. */
  /* Portrait 4:5 photos, Teapup's tile shape, and a shorter text block, so the photo leads the
     card (Alex chose this, option B, 2026-10-07). js/main.js asks for each photo at 4:5. */
  .home-grid .card-media,.grid-4.cols-4 .card-media{aspect-ratio:4/5}
  .home-grid .card-media img,.grid-4.cols-4 .card-media img{object-position:center}
  .home-grid .card-body,.grid-4.cols-4 .card-body{padding:.6rem .7rem .75rem;gap:.15rem}
  .home-grid .card-name,.grid-4.cols-4 .card-name{font-size:1.02rem;line-height:1.15}
  .home-grid .card-breed,.grid-4.cols-4 .card-breed{font-size:.74rem;letter-spacing:.06em}
  .home-grid .card-foot,.grid-4.cols-4 .card-foot{flex-direction:column;align-items:flex-start;gap:0;padding-top:.35rem}
  .home-grid .price,.grid-4.cols-4 .price{font-size:1.02rem}
  .home-grid .card-ready,.grid-4.cols-4 .card-ready{white-space:nowrap;font-size:.68rem;letter-spacing:.04em}
  .home-grid .tag,.grid-4.cols-4 .tag{font-size:.62rem;padding:.25rem .4rem;left:.45rem}
  .home-grid .tag:not(.tag-litter),.grid-4.cols-4 .tag:not(.tag-litter){top:.45rem}
  .home-grid .tag-litter,.grid-4.cols-4 .tag-litter{bottom:.45rem}
}

/* demo watermark */
.demo-flag{background:var(--olive);color:#fff;text-align:center;font-family:var(--cond);
  letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;padding:.4rem 1rem}

/* ---------- breed page ---------- */
/* Full column width, square, cropped from the top. The note below it is the
   same width, so the two read as one stacked unit. */
.breed-photo{margin:0 0 1.2rem;border:var(--rule);background:var(--paper-warm);padding:0;width:100%}
/* Let the photo keep its own shape. A fixed box either crops the dog or
   letterboxes it, and breeder photos are portrait as often as landscape.
   No width/height attributes on this image, so aspect-ratio is not blocked. */
/* The photo is chosen to be landscape where one exists, so cover crops by
   almost nothing. The few square-only breeds crop from the top. */
.breed-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center top}
.photo-cap{display:block;font-family:var(--cond);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:.55rem .8rem;border-top:var(--rule)}
.breed-hero{overflow:hidden;background:var(--paper-warm);border-bottom:var(--rule)}
.breed-hero img{width:100%;height:clamp(220px,34vh,380px);object-fit:cover;
  /* portrait shots crop to the body at this ratio; favour the upper third */
  object-position:center 28%}
.guide p{margin-bottom:1rem}
/* Section headings inside a breed guide, written as "## " lines in the admin (2026-10-10). */
.guide h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.25;margin:1.8rem 0 .55rem;text-wrap:balance}
.guide h2:first-child{margin-top:0}
/* Question and answer blocks, such as the breeder questions on List with us (2026-10-10). */
.qa{max-width:70ch}
.qa h3{font-family:var(--sans);font-weight:600;font-size:1.1rem;line-height:1.3;margin:1.6rem 0 .35rem}
.qa h3:first-child{margin-top:0}
.qa h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.45rem);line-height:1.25;margin:1.8rem 0 .55rem;text-wrap:balance}
.qa h2:first-child{margin-top:0}
/* The site's own pages: About, How it works, Tips, Reviews, Contact (2026-10-10). */
.replace-this{display:inline-block;background:#fff3c4;border:1px dashed var(--bronze);color:var(--ink);padding:.15rem .45rem;font-size:.92em}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem}
.review{margin:0;background:var(--paper-warm);border:1px solid var(--line);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.8rem}
.review blockquote{margin:0}
.review blockquote p{margin:0;font-size:.98rem;line-height:1.6}
.review figcaption{margin-top:auto;font-family:var(--cond);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.demo-note{
  font-size:.86rem;color:var(--olive);background:var(--paper-warm);
  border-left:3px solid var(--bronze);padding:.6rem .8rem;margin-bottom:1.2rem;
}
.breeder-note{font-size:.94rem;color:var(--ink-soft);margin:.2rem 0 0}

/* ---------- show more ---------- */
.more-row{display:flex;justify-content:center;margin-top:1.8rem}
.more-row button{
  font-family:var(--cond);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.7rem 1.8rem;border:1px solid var(--line-strong);background:var(--paper);
  color:var(--ink);cursor:pointer;
}
.more-row button:hover{border-color:var(--ink);background:var(--paper-warm)}

/* ---------- listing: description under the gallery ---------- */
.about-block{margin-top:1.8rem}
.about-block p{max-width:none}

/* ---------- breeder logo ---------- */
.breeder-logo{margin:0 0 1.2rem;padding:1.4rem 1.5rem;border:var(--rule);
  background:#fff;display:flex;align-items:center;justify-content:center;min-height:150px}
/* a white wordmark disappears on a white card */
.breeder-logo.on-dark{background:var(--ink);border-color:var(--ink)}
.breeder-logo img{max-width:100%;max-height:190px;width:auto;height:auto}

/* ---------- listing detail: title reorders independently of the gallery ---- */
.detail-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  /* G6: the notes (disclaimer, delivery line, breed guides) sit under the photo column, so the
     two columns end near the same line. The last row is the flexible one, so the photo column's
     height is never shared out and no gap opens under the price. */
  grid-template-areas:"media title" "media detail" "notes detail";
  grid-template-rows:min-content auto 1fr;
  gap:0 clamp(1.5rem,4vw,3.4rem);
  align-items:start;
}
.detail-grid > *{min-width:0}
.d-title{grid-area:title}
.d-media{grid-area:media}
.d-detail{grid-area:detail;margin-top:1.875rem}
/* 30px from the buttons to the facts */
.d-detail > .facts:first-child{margin-top:0}
.d-notes{grid-area:notes;margin-top:2.2rem}
/* set by js/pages.js when the photo column is the longer one */
.detail-grid.notes-right{grid-template-areas:"media title" "media detail" "media notes"}
@media(max-width:940px){
  /* On a phone the name and price should be the first thing read, not the
     photo, so the title moves above the gallery. */
  .detail-grid{grid-template-columns:1fr;grid-template-areas:"title" "media" "detail" "notes";grid-template-rows:auto}
  .d-media{margin-top:1.2rem}
  .d-detail{margin-top:1.8rem}
}

/* ---------- browse filter bar on a phone ---------- */
@media(max-width:760px){
  .avail-head{position:sticky;top:var(--pin,64px);z-index:40;background:var(--paper);
    margin-inline:calc(var(--gut) * -1);padding:.6rem var(--gut) .7rem;border-bottom:var(--rule);
    box-shadow:0 8px 14px -12px rgba(38,38,38,.5)}
  .avail-head .count-sort{display:none}
  .ftags{display:none}
  .f-open{display:inline-flex;align-items:center;gap:.45rem;min-height:42px;padding:0 .95rem;border:1.5px solid var(--ink);
    background:#fff;color:var(--ink);font-family:var(--cond);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .f-open .dot{min-width:20px;height:20px;border-radius:10px;background:var(--ink);color:var(--gold);font-size:.75rem;
    display:inline-flex;align-items:center;justify-content:center;padding:0 .3rem;letter-spacing:0}
  .f-active:not(:empty){display:flex;flex-wrap:wrap;gap:.4rem;flex-basis:100%}
  .f-active .ft{min-height:36px;font-size:.9rem}
  .grid-4.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Two across on every phone, as on the home page (Alex, 2026-10-07), so no single-column tier. */

/* ---------- breed page: the sidebar photo is redundant on a phone ---------- */
@media(max-width:940px){
  .breed-photo{display:none}
}

/* ---------- skip link, matching kingdomfamilycompanions ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}
#content{display:block;height:0;outline:none}

/* the picture wrapper must not change how the logo and hero images size */
.brand picture,.site-footer picture,.hero picture{display:contents}

/* ---------- print ---------- */
@media print{
  .demo-flag,.skip-link,.site-header .nav,.burger,.rail,.rail-trigger,.rail-backdrop,
  .thumb-nav,.more-row,.site-footer nav{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  .card,.breeder-box{break-inside:avoid}
}

/* narrow phones: tighter header gap so the logo, tagline and menu button share one row */
@media(max-width:420px){.hdr{gap:1rem}.breed-search button{padding:.8rem 1rem}}

/* breeder domains and emails are single unbroken words, and at 320px the longest
   (chainolakescompanions.com) pushed the page 117px wider than the screen */
.contact-list li,.contact-list a{min-width:0;overflow-wrap:anywhere}
/* Mailing list sign-up in the footer of generated pages (2026-10-10). */
.foot-signup{margin-top:1.1rem;max-width:34ch}
.foot-signup label{display:block;font-family:var(--cond);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem}
.foot-signup-row{display:flex;gap:.5rem}
.foot-signup input[type=email]{flex:1 1 0;min-width:0;min-height:44px;padding:.5rem .7rem;border:1px solid #5a5a5a;background:#1d1d1d;color:#fff;font:inherit;font-size:.94rem}
.foot-signup input[type=email]::placeholder{color:#a8a8a8}
.foot-signup input[type=email]:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.foot-signup .btn{min-height:44px;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Breed guide links: the panel on a breed page, a guide page and a puppy page, and the hub (2026-10-11). */
/* Plain on the page ground, with no box or accent rule (G4, Alex 2026-10-17: the thin borders read as AI) */
.guide-panel{margin-top:2rem;max-width:70ch}
aside .guide-panel{margin-top:1rem}
.guide-panel .eyebrow{margin-bottom:.5rem}
.guide-list{list-style:none;padding:0;margin:0 0 .6rem;display:grid;gap:.15rem}
.guide-list a{display:block;padding:.4rem 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.guide-list li:last-child a{border-bottom:0}
.guide-list a:hover{color:var(--olive);text-decoration:underline}
.guide-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.6rem 2rem}
.guide-hub h2{font-size:1.25rem;margin:0 0 .4rem}
.guide-hub h2 a{color:inherit;text-decoration:none}
/* Footer base line: the copyright and the Privacy and Listing terms links (2026-10-11). */
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;margin-top:2rem;padding-top:1.1rem;border-top:1px solid #3d3d3d;font-size:.86rem;color:var(--cream-text)}
.foot-base p{margin:0}
.foot-base a{color:var(--cream-text);text-decoration:none}
.foot-base a:hover{color:var(--gold)}
.foot-legal{display:flex;gap:1.2rem}
.foot-legal a{color:var(--cream-text)}
.foot-legal a:hover{color:var(--gold)}
@media(max-width:560px){.foot-base{flex-direction:column;align-items:flex-start}}
/* The guides hub as option A (2026-10-11): a card per breed, two to a row on a phone like the puppies page. */
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1.2rem}
.gc{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.gc-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.gc-body{padding:.9rem 1rem 1rem}
.gc-body h2{font-size:1.2rem;margin:0 0 .15rem;line-height:1.2}
.gc-body h2 a{color:var(--ink);text-decoration:none}
.gc-body h2 a:hover{color:var(--olive)}
.gc-meta{font-family:var(--cond);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--olive);margin:0 0 .5rem}
.gc-list{list-style:none;padding:0;margin:0}
.gc-list a{display:block;padding:.45rem 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.35}
.gc-list a:hover{color:var(--olive);text-decoration:underline}
@media(max-width:760px){
  .guide-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .gc-photo img{aspect-ratio:4/5}
  .gc-body{padding:.6rem .7rem .75rem}
  .gc-body h2{font-size:1.02rem}
  .gc-list a{font-size:.86rem;padding:.4rem 0}
}

/* Breed page option 2 (Alex, 2026-10-11): an intro, four highlights and a buying card beside the photo.
   Tidied 2026-10-12, the buying card on its own class; highlights plain on the page ground since G4
   (.price-card belongs to the list-with-us pricing and centers its text at 420px). */
.breed-intro{font-size:1.15rem;line-height:1.6;max-width:62ch;margin:0 0 1.5rem}
.highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
/* A thin even border in the line color, like the puppy facts grid (G7) */
.highlights li{border:var(--rule);padding:.9rem 1rem 1rem;line-height:1.55;font-size:.97rem}
.highlights b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;margin-bottom:.3rem}
@media (max-width:640px){.highlights{grid-template-columns:1fr}}
.breed-top{display:grid;grid-template-columns:1.15fr 1fr;gap:1.6rem clamp(1.5rem,4vw,3.4rem);
  grid-template-areas:"text photo" "buy photo" "guides guides";align-items:start}
/* G6: the buy card sits under the highlights and the photo fills the height of both, so the two
   columns end on one line; the guides run full width underneath. */
.breed-top > *{min-width:0}
.bt-text{grid-area:text}
.bt-photo{grid-area:photo;margin:0;align-self:stretch;display:flex;flex-direction:column}
.bt-photo img{flex:1 1 auto;height:0;min-height:clamp(240px,24vw,400px);aspect-ratio:auto}
.bt-guides{grid-area:guides;margin-top:.6rem}
.bt-buy{grid-area:buy}
@media(max-width:940px){
  .breed-top{grid-template-columns:1fr;grid-template-areas:"text" "photo" "buy" "guides"}
  .bt-photo{display:none}
}
.breed-buy{border:2px solid var(--ink);background:var(--paper);padding:1.3rem 1.4rem 1.4rem}
.breed-buy .eyebrow{margin-bottom:.4rem}
.bb-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.bb-count{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.2}
.bb-price{font-family:var(--cond);font-size:1.2rem;letter-spacing:.05em}
.bb-note{font-size:.92rem;color:var(--muted);line-height:1.5;margin:.8rem 0 1.1rem}
.bb-btn{display:block;width:100%;text-align:center}


/* Buttons near the top of puppy and breeder pages, so a phone visitor reaches the breeder first (Alex, 2026-10-11) */
.d-actions{margin-top:.9rem}
.d-actions .btn,.profile-actions .btn{min-height:44px}
/* The puppy buttons fill the column (Alex, 2026-10-17): each grows from its own one-line width,
   so the pair ends at the right edge of the facts, and a button that cannot fit takes a row. */
.d-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.d-actions > .btn{flex:1 1 auto;white-space:nowrap;justify-content:center;text-align:center}
@media (max-width:560px){.d-actions .btn,.profile-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}.d-actions > .btn{white-space:normal}}

/* Transportation page (launch item A7): Furry Freight's logo beside its copy, on the page ground */
/* G9: the page's content is one centered column, so the intro, the Furry Freight block and the
   band below share one left edge with no empty third on the right. */
.wrap.wrap-mid{max-width:calc(1010px + 2 * var(--gut))}
.partner{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(1.6rem,5vw,3.5rem);align-items:center}
.partner-logo{display:block;width:100%;height:auto}
.partner-copy h2{margin-top:0}
.partner .btn-row{margin-top:1.2rem}
.partner .fine{margin-top:.9rem;font-size:.92rem;color:var(--muted)}
@media (max-width:700px){.partner{grid-template-columns:minmax(0,1fr)}.partner-logo{max-width:200px;margin-inline:auto}}
.not-local{font-size:.94rem;margin:.6rem 0 0}

/* Footer brand column (Alex, 2026-10-17): the walker mark and the two-line description share one
   row, with the sign-up full width below. The picture wrapper is display:contents, so the img is
   the grid item. Stacked only where the text would be squeezed under 230px, which is 320px wide. */
.foot-grid > div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;align-content:start}
.foot-grid > div:first-child > img,.foot-grid > div:first-child > picture > img{margin-bottom:0}
.foot-grid > div:first-child > p{margin:0}
.foot-grid > div:first-child > .foot-signup{grid-column:1 / -1}
@media (max-width:340px){.foot-grid > div:first-child{grid-template-columns:minmax(0,1fr)}.foot-grid > div:first-child > img{margin-bottom:.8rem}}

/* The delivery band under the Raised by box (Alex, 2026-10-17): one line on a wide column with the
   van, the text and Get a quote centered on one axis. Gold on charcoal is 10.7:1 and the cream
   text 11.3:1. On a phone the text wraps and Get a quote follows the last line. */
#detail .breeder-box + .dv-band{margin-top:1.4rem}
.dv-band{display:flex;align-items:center;gap:1rem;background:var(--ink);color:var(--cream-text);padding:.9rem 1.1rem;margin-top:1.4rem}
.dv-band svg{width:44px;flex:0 0 44px;color:var(--gold)}
.dv-band p{margin:0;flex:1;font-size:.95rem;color:var(--cream-text);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dv-band b{color:var(--gold)}
.dv-band a{color:var(--gold);font-weight:600;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.dv-band a:hover{color:#fff}
@media (max-width:560px){
  .dv-band{align-items:flex-start;gap:.75rem;padding:.85rem .9rem}
  .dv-band svg{margin-top:.2rem;width:36px;flex-basis:36px}
  .dv-band p{display:block}
  .dv-quote{margin-left:.4rem}
}

/* Contact rows on a phone: the label above the value, so a long address stays on one line */
@media (max-width:560px){
  .contact-list a{flex-direction:column;align-items:flex-start;gap:.1rem}
  .contact-list b{flex:none}
  .contact-list li,.contact-list a{overflow-wrap:normal}
}

/* Clear space between the brand column and the footer links (Alex, 2026-10-17). The brand content
   keeps its width and a right margin moves the three link columns over as a group: 142px of clear
   space at 1280 and 1440, 64px at 1024. Below 1000px the layout is unchanged, because a wider gap
   there would wrap "Tips on buying a puppy". */
@media (min-width:1000px){
  .foot-grid{grid-template-columns:minmax(0,18rem) repeat(3,minmax(0,1fr))}
  .foot-grid > div:first-child{margin-right:2rem}
}
@media (min-width:1240px){
  .foot-grid{grid-template-columns:minmax(0,28.5rem) repeat(3,minmax(0,1fr))}
  .foot-grid > div:first-child{margin-right:6rem}
}