inside .entry-content, so the
42rem prose cap was squeezing the entire checkout into a reading column.
The billing fields, the order review and the payment methods all inherited
that width, which is what made the form look broken: fields at odd widths,
labels crowding their inputs, card icons stacking vertically. The layout
was fine; the container was wrong. */
.entry-content > *:not(.section):not(.wrap):not(.alignwide):not(.alignfull):not(.split):not(.grid):not(.woocommerce) {
max-width: 42rem;
/* 1.3.16 — the cap above was applied without centring, so every prose page
(For Teachers, Care Instructions, Custom Orders, Terms) rendered as a
narrow column jammed against the left edge of a much wider .wrap. The
column is the right width; it just needs to sit in the middle of it. */
margin-inline: auto;
}
.entry-content > .section,
.entry-content > .woocommerce,
.entry-content > .wrap { max-width: none; width: 100%; }
.entry-content > .alignwide { max-width: min(100%, 68rem); margin-inline: auto; }
.entry-content > .alignfull { max-width: none; }
.entry-content--full > * { max-width: none; }
.is-narrow .entry-content { margin-inline: auto; }
.entry-media { margin: 0 0 2rem; }
.entry-media__img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
/* 1.3.18 — the adoption-kit flat-lay is the strongest selling image on the
homepage, so it is allowed its natural shape and a little extra room. */
.framed--kit { width: 100%; height: auto; object-fit: contain; }
.entry-media--hero { margin-top: -1rem; }
.entry-title { margin-bottom: .4rem; }
.entry-tags { margin-top: 2.5rem; }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.tag-list a {
display: inline-block; padding: .35rem .8rem; border-radius: 999px;
background: var(--surface-2); font-size: .85rem; text-decoration: none;
}
.tag-list a:hover { background: var(--ink); color: #fff; }
.entry-download { margin-top: 2rem; }
.page-links { display: flex; gap: .4rem; align-items: center; margin-top: 2rem; }
/* Post navigation ---------------------------------------------------------- */
.post-nav { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.post-nav .nav-links { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.post-nav a { text-decoration: none; display: block; }
.post-nav a:hover .post-nav__title { text-decoration: underline; }
.post-nav__title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; display: block; }
.post-nav .nav-next { text-align: right; }
/* Pagination --------------------------------------------------------------- */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.75rem; height: 2.75rem; padding: 0 .8rem;
border: 2px solid var(--line); border-radius: 999px;
text-decoration: none; font-weight: 700; font-size: .95rem;
}
.pagination .page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .dots { border-color: transparent; }
/* FAQ answers -------------------------------------------------------------- */
.faq__answer { margin-top: .8rem; color: var(--ink-soft); }
.faq__answer > :last-child { margin-bottom: 0; }
.faq summary { padding-right: .25rem; }
/* Breadcrumbs -------------------------------------------------------------- */
.crumbs__sep { opacity: .5; }
.crumbs [aria-current="page"] { color: var(--ink); }
/* Pledge card -------------------------------------------------------------- */
.pledge { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); }
.pledge__text {
font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.45rem);
line-height: 1.7; margin: 1.5rem auto; color: var(--ink); max-width: none;
}
/* Founder ------------------------------------------------------------------ */
.founder__signature { margin-top: 1.5rem; }
/* Signup ------------------------------------------------------------------- */
.signup__form .btn { color: #2A1400; }
.signup__placeholder { text-align: left; }
.signup .form-row input,
.signup__form input { border-color: transparent; }
/* Widgets ------------------------------------------------------------------ */
.widget { font-size: .95rem; }
.widget__title { font-family: var(--display); font-size: 1.15rem; margin-bottom: .75rem; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.widget li:last-child { border-bottom: 0; }
.widget a { text-decoration: none; }
.widget a:hover { text-decoration: underline; }
.widget--banner { padding-block: 1.5rem; }
.footer-banner { background: var(--surface-2); border-top: 1px solid var(--line); }
.buybox__widgets { margin-top: 1.5rem; }
/* Footer additions --------------------------------------------------------- */
.footer__col { min-width: 0; }
.footer__heading {
color: #fff; font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
text-transform: uppercase; margin-bottom: 1rem;
}
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .5rem; }
.footer__legal-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 1rem; font-size: .84rem;
}
/* Search + empty states ---------------------------------------------------- */
.search-again { margin-top: 1.5rem; max-width: 34rem; }
.no-results { max-width: 34rem; margin-inline: auto; }
.no-results .search-form { margin-inline: auto; justify-content: center; }
.search-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.search-field { flex: 1 1 14rem; }
/* Comments ----------------------------------------------------------------- */
.comments { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list ol { list-style: none; padding-left: 1.5rem; }
.comment-body { padding: 1.25rem 0; border-bottom: 1px dashed var(--line); }
.comment-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.comment-author img { border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: .5rem; }
.comment-form { display: grid; gap: 1rem; max-width: 40rem; }
.comment-reply-title { font-family: var(--display); }
.bypostauthor > .comment-body .comment-author::after {
content: "★"; color: var(--sun); margin-left: .35rem;
}
/* ==========================================================================
16. BLOCK EDITOR STYLES
Registered in inc/blocks.php; these are their front-end appearance.
========================================================================== */
.is-style-pivipets-card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.5rem; box-shadow: var(--shadow);
}
.is-style-pivipets-tint { background: var(--surface-2); padding-block: clamp(2rem, 5vw, 4rem); }
.is-style-pivipets-ink { background: var(--ink); color: #EDE7FF; padding-block: clamp(2rem, 5vw, 4rem); }
.is-style-pivipets-ink :is(h1,h2,h3,h4) { color: #fff; }
.is-style-pivipets-field {
font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
text-transform: uppercase; color: var(--muted);
}
.is-style-pivipets-lede { font-size: 1.15rem; color: var(--ink-soft); }
.is-style-pivipets-hint { font-size: .82rem; color: var(--muted); }
.is-style-pivipets-included { list-style: none; padding: 0; display: grid; gap: .55rem; }
.is-style-pivipets-included li { display: flex; gap: .65rem; align-items: flex-start; }
.is-style-pivipets-included li::before { content: "◆"; color: var(--glow); flex: none; }
.is-style-pivipets-checks { list-style: none; padding: 0; }
.is-style-pivipets-checks li { padding-left: 1.4rem; position: relative; margin-bottom: .35rem; }
.is-style-pivipets-checks li::before {
content: "✓"; position: absolute; left: 0; color: var(--seal); font-weight: 800;
}
.is-style-pivipets-framed img { border-radius: var(--radius); box-shadow: var(--shadow-l); }
.is-style-pivipets-faq { border-bottom: 1px solid var(--line); padding: 1.1rem .25rem; }
.is-style-pivipets-faq summary {
cursor: pointer; font-family: var(--display); font-size: 1.12rem; font-weight: 700;
}
.is-style-pivipets-testimonial {
background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--sun);
border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow);
}
.wp-block-button.is-style-pivipets-ghost .wp-block-button__link {
background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none;
}
.wp-block-button.is-style-pivipets-ghost .wp-block-button__link:hover { background: var(--ink); color: #fff; }
/* Core block defaults tuned to the design system */
.wp-block-button__link {
border-radius: 999px; padding: .95rem 1.6rem; font-weight: 800;
background: var(--sun); color: #2A1400; box-shadow: 0 4px 0 var(--btn-shadow);
}
.wp-block-image img { border-radius: var(--radius-s); }
.wp-block-pullquote, .wp-block-quote { border-left: 4px solid var(--sun); padding-left: 1.25rem; }
.wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table :is(th, td) { border-bottom: 1px solid var(--line); padding: .7rem .6rem; text-align: left; }
.wp-block-table th {
font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
/* Color + gradient palette classes generated by the editor */
.has-ink-color { color: var(--ink); }
.has-ink-background-color { background-color: var(--ink); }
.has-sun-color { color: var(--sun); }
.has-sun-background-color { background-color: var(--sun); }
.has-frost-color { color: var(--frost); }
.has-frost-background-color { background-color: var(--frost); }
.has-glow-color { color: var(--glow); }
.has-glow-background-color { background-color: var(--glow); }
.has-seal-color { color: var(--seal); }
.has-seal-background-color { background-color: var(--seal); }
.has-surface-2-background-color { background-color: var(--surface-2); }
.has-sun-gradient-background { background: var(--grad-sun); }
.has-frost-gradient-background { background: var(--grad-frost); }
.has-glow-gradient-background { background: var(--grad-glow); }
/* ==========================================================================
17. CONTRAST CORRECTIONS
Two colour-inheritance bugs carried over from the static prototype. Both
are fixed here rather than in sections 1–14 so the original design system
stays readable as a record of what was inherited.
========================================================================== */
/* (a) The adoption card is a white card that can sit on a dark band. Without
an explicit color, its name and price inherit the hero's light
lavender and land at roughly 1.4:1 against white — effectively
invisible, which is exactly what the hero card did. Anchoring the
card's own color makes it independent of wherever it is placed. */
.adopt-card__body { color: var(--ink-soft); }
.adopt-card__name,
.adopt-card__body .price { color: var(--ink); }
/* (b) .btn--ghost is ink text inside an ink border. On the dark hero that is
dark-on-dark, so the secondary call to action disappeared. The ink
band already had a fix (.section--ink .btn--ghost); the hero never
received it. Applying the same treatment to any dark context. */
.hero .btn--ghost,
.section--ink .btn--ghost { color: #fff; border-color: #7C6BB8; }
.hero .btn--ghost:hover,
.section--ink .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* ==========================================================================
18. DROPDOWN SUB-MENUS
The static prototype had a flat navigation bar, so none of this existed.
Real sites grow sub-pages, so the nav supports one level of nesting.
Three ways in, deliberately: hover for pointers, :focus-within for
keyboard, and an explicit toggle button injected by site.js for touch
(where hover does not exist and :focus-within is unreliable). Any one of
them opens the menu; none is required.
========================================================================== */
.nav__list li { position: relative; }
.sub-menu {
list-style: none;
margin: 0;
padding: .4rem;
min-width: 13rem;
}
/* ---------- Desktop: a floating panel ---------- */
@media (min-width: 941px) {
.sub-menu {
position: absolute;
top: calc(100% + .25rem);
left: 0;
z-index: 60;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-s);
box-shadow: var(--shadow-l);
/* Hidden but still in the layout, so it can animate and stays
measurable. visibility keeps it out of the tab order. */
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu,
.nav__list li > .sub-menu[data-open="true"] {
opacity: 1;
visibility: visible;
transform: none;
}
.sub-menu a {
white-space: nowrap;
font-size: .92rem;
font-weight: 600;
padding: .55rem .7rem;
}
/* Parent items get room for the caret */
.menu-item-has-children > a { padding-right: 1.9rem; }
.submenu-toggle {
position: absolute;
top: 50%;
right: .5rem;
transform: translateY(-50%);
width: 1.1rem;
height: 1.1rem;
display: grid;
place-items: center;
border: 0;
background: none;
color: inherit;
cursor: pointer;
padding: 0;
font-size: .6rem;
line-height: 1;
}
.submenu-toggle svg { transition: transform .16s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
}
/* ---------- Mobile: an indented block inside the slide-in panel ---------- */
@media (max-width: 940px) {
.sub-menu {
padding: 0 0 0 1rem;
border-left: 2px solid var(--line);
margin: 0 0 .25rem 1rem;
}
.sub-menu a { font-size: .98rem; padding: .7rem 1rem; }
/* Collapsed by default so a long menu stays scannable on a phone. */
.sub-menu[data-open="false"] { display: none; }
.menu-item-has-children > a { padding-right: 3rem; }
.submenu-toggle {
position: absolute;
top: 0;
right: 0;
width: 3rem;
height: 3.1rem;
display: grid;
place-items: center;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.submenu-toggle svg { transition: transform .16s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.sub-menu, .submenu-toggle svg { transition: none; }
}
/* ==========================================================================
19. MOBILE MENU CONTAINING-BLOCK FIX
The mobile navigation panel is position:fixed with inset:0, so it should
fill the viewport. It did not — it was clipped to the height of the
header, roughly 120px on a 780px screen, leaving most menu items
unreachable on a phone.
The cause is that .masthead sets backdrop-filter. Any element with a
backdrop-filter becomes the containing block for its fixed-position
descendants, so the panel's inset:0 was resolving against the header's
box rather than the viewport. The header is sticky, so this was invisible
at desktop widths where the panel is not fixed.
Dropping the blur below the mobile breakpoint restores the viewport as
the containing block. The header keeps its near-opaque background, so
the visual difference is negligible — and backdrop-filter is expensive
to composite on phones anyway.
========================================================================== */
@media (max-width: 940px) {
.masthead {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--surface);
}
/* Belt and braces: if a future change reintroduces a containing block,
the panel still fills the screen rather than collapsing. */
.nav {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
}
}
/* Editor-only hints shown in place of empty sections. Never seen by visitors. */
.editor-hint {
border: 2px dashed var(--line);
border-radius: var(--radius);
padding: 1.5rem;
text-align: center;
background: var(--surface-2);
max-width: 40rem;
margin-inline: auto;
}
.editor-hint__title { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin: .35rem 0 .5rem; }
.editor-hint .hint { margin-bottom: 1rem; }
/* ==========================================================================
20. SALE PRICES
WooCommerce wraps a sale price in
and the old price in . The
browser default for is an underline, which read as a mistake next
to a struck-through original — "$119.94 $99.00" with both decorated.
These rules were previously scoped to the product page only, so cards
and the bundle ladder kept the browser default.
========================================================================== */
.price ins,
.woocommerce-Price-amount ins,
ins.woocommerce-Price-amount {
text-decoration: none;
background: transparent;
font-weight: inherit;
}
.price del,
del .woocommerce-Price-amount {
opacity: .5;
font-size: .8em;
font-weight: 600;
margin-right: .35rem;
}
/* The sale price should read as the price, not as an afterthought. */
.price ins { color: inherit; }
/* ==========================================================================
21. SINGLE-HYPHEN CLASS ALIASES
The BEM-style modifiers below use a double hyphen (.section--tint), which
is standard CSS practice but a hazard in WordPress: pasting HTML through
the classic editor, or copying it out of any tool that applies smart
typography, converts "--" into an en-dash and the class silently stops
matching. The same happens to straight quotes around attributes.
These aliases give every modifier a single-hyphen equivalent, so
hand-pasted HTML keeps working even when something along the way has
been helpful with the punctuation. Both spellings are supported
permanently — this is not a temporary workaround.
========================================================================== */
.section-tint { background: var(--surface-2); }
.section-ink {
background: var(--ink);
color: #EDE7FF;
}
.section-ink :is(h1, h2, h3, h4) { color: #fff; }
.section-ink a { color: #FFC24A; }
.section-ink .btn-ghost,
.section-ink .btn--ghost { color: #fff; border-color: #7C6BB8; }
.wrap-narrow { max-width: 52rem; }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 2px solid var(--ink);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--ink);
color: #fff;
transform: none;
box-shadow: none;
}
/* ==========================================================================
22. SECTION-BUILT PAGES
Pages whose content is a series of full-width bands (see
pivipets_content_has_sections). The article gets no outer wrapper, so the
bands reach the edges of the screen and each band's own .wrap handles the
column width — one level of centring instead of two.
========================================================================== */
.has-sections { padding-block: 0; }
.has-sections > .entry-content > * { max-width: none; }
/* An empty column in a two-up split leaves a hole. When one side has no
content — an image not added yet — collapse to a single column rather
than reserving space for nothing.
:not(:has(*)) rather than :empty, because a div containing only a
newline is not :empty as far as CSS is concerned, and hand-edited HTML
almost always has a newline in it. This matches any column with no
element children, whitespace or not. */
.split > div:not(:has(*)) { display: none; }
/* Cap the measure inside split columns.
When both columns are filled each is around 540px, so this changes
nothing. When one is empty — an image not added yet — the surviving
column would otherwise stretch to the full 1120px container and run a
line of text roughly twice as long as the prose sections above and
below it. Capping the text keeps the page reading evenly either way.
Done on the children rather than on .split itself because the obvious
selector, .split:has(> div:not(:has(*))), is invalid CSS — :has() may
not be nested inside another :has() — and fails silently. */
.split > div > :is(p, ul, ol, blockquote, h1, h2, h3, h4) {
max-width: 42rem;
}
/* ==========================================================================
23. SERIES INTRODUCTION
The theme, verse and physical tokens shown at the top of a product
category archive. See inc/series.php.
========================================================================== */
.series-intro {
max-width: 46rem;
margin: 0 auto clamp(2rem, 5vw, 3rem);
text-align: center;
}
.series-intro__quote {
border: 0;
margin: .5rem 0 1.25rem;
padding: 0;
}
.series-intro__quote p {
font-family: var(--display);
font-size: clamp(1.3rem, 3vw, 1.9rem);
line-height: 1.25;
color: var(--ink);
margin: 0;
}
.series-intro__quote p::before { content: "\201C"; }
.series-intro__quote p::after { content: "\201D"; }
.series-intro .lede { margin-bottom: 1.5rem; }
.series-intro__tokens {
display: flex;
flex-wrap: wrap;
gap: 1.75rem;
align-items: center;
margin: 0;
font-family: var(--mono);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.series-intro__tokens span { display: flex; gap: .5rem; align-items: baseline; }
.series-intro__tokens strong {
font-family: var(--body);
font-size: .95rem;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
}
/* Fun fact and story details on a product page. See inc/animals.php. */
.animal-story {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px dashed var(--line);
}
.animal-story__fact {
font-family: var(--display);
font-size: 1.1rem;
line-height: 1.4;
color: var(--ink);
margin: .35rem 0 1rem;
}
.animal-story .datarow { margin: 0; }
/* Series tiles on the browse-by-series page. Spans rather than headings,
because the whole tile is one link and a heading inside a link reads
oddly to a screen reader. */
.tile__media { display: block; }
.tile__body { display: flex; flex-direction: column; gap: .15rem; }
.tile__name {
font-family: var(--display);
font-weight: 700;
font-size: 1.2rem;
color: var(--ink);
line-height: 1.2;
}
.tile__count { font-size: .85rem; color: var(--muted); }
a.tile { text-decoration: none; display: block; }
/* ==========================================================================
24. SHOP HEADER
The filter chips sit inside the header band rather than below it. The
band was previously a tall empty rectangle with only a title in it, and
the filters are the first thing a shopper reaches for — so putting them
together fills the space and shortens the path to a filtered view.
========================================================================== */
.shop-head .filters {
margin-top: clamp(1.5rem, 3vw, 2.25rem);
padding-top: clamp(1.25rem, 3vw, 1.75rem);
border-top: 1px solid var(--line);
}
/* On the tinted band a plain white chip reads as a button rather than a
panel edge, so the unselected state gets a solid background. */
.shop-head .filters .chip { background: var(--card); }
.shop-head .filters .chip[aria-current="true"] { background: var(--ink); color: #fff; }
.shop-head .result-count { margin-left: auto; }
/* Series page header: identity on the left, the series photograph beside it. */
.series-head { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 62rem) {
.series-head--media { grid-template-columns: 1fr minmax(0, 22rem); }
}
.series-head h1 { margin-bottom: .5rem; }
.series-head .lede { margin-bottom: 0; max-width: 34rem; }
.series-head__media { margin: 0; }
/* 1.3.39 — the image is no longer pre-cropped, so the figure takes whatever
height the picture needs. A square series image now shows square; a
landscape one shows landscape. Nothing is cut off either way, and there are
no empty bands, because the box follows the image rather than the image
being forced into the box. */
.series-head__media img {
width: 100%; height: auto; border-radius: var(--radius);
box-shadow: var(--shadow-l); display: block;
max-height: 26rem;
object-fit: contain;
}
/* ==========================================================================
25. PROCESS FLOW
A numbered sequence with arrows between the steps, for explaining how
adoption works. The arrows are drawn in CSS and marked aria-hidden by
virtue of being generated content, so a screen reader hears an ordered
list — which is what it is — rather than a row of punctuation.
The arrows disappear below the breakpoint, where the steps stack
vertically and an arrow pointing right would be pointing nowhere.
========================================================================== */
.flow {
list-style: none;
counter-reset: flow;
margin: 0;
padding: 0;
display: grid;
gap: clamp(1.5rem, 4vw, 2rem);
}
@media (min-width: 60rem) {
.flow { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: start; }
}
.flow__step {
position: relative;
text-align: center;
padding-inline: .5rem;
}
.flow__step::before {
counter-increment: flow;
content: counter(flow);
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
margin: 0 auto .9rem;
border-radius: 50%;
background: var(--grad-sun);
color: #2A1400;
font-family: var(--display);
font-weight: 800;
font-size: 1.25rem;
box-shadow: var(--shadow);
}
/* The connector. Sits level with the numbers, not the text, so it reads as
joining the steps rather than underlining them. */
@media (min-width: 60rem) {
.flow__step:not(:last-child)::after {
content: "";
position: absolute;
top: 1.6rem;
left: calc(50% + 2.25rem);
right: calc(-50% + 2.25rem);
height: 2px;
background: linear-gradient(90deg, var(--line), var(--glow));
border-radius: 2px;
}
}
.flow__step h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.flow__step p { color: var(--ink-soft); margin: 0; font-size: .95rem; }
.section--ink .flow__step p { color: #C9BEEF; }
.section-ink .flow__step p { color: #C9BEEF; }
/* The pledge card, when a pledge is written as verse. */
.pledge__verse {
font-family: var(--display);
font-size: clamp(1.15rem, 2.6vw, 1.5rem);
line-height: 1.75;
color: var(--ink);
margin: 1.25rem 0;
}
.pledge__warning {
font-size: .9rem;
color: var(--muted);
font-style: italic;
margin: 0;
}
/* --------------------------------------------------------------------------
Process flow with photographs.
When each step has a picture, the row of images carries the sequence on
its own, so the connecting line is dropped and the step number becomes a
badge on the image instead. Keeping both would be two devices doing one
job, and the line would have to be positioned against an image whose
height changes with the column width.
-------------------------------------------------------------------------- */
.flow--media .flow__step { text-align: left; }
.flow--media .flow__step::after { content: none; }
.flow--media .flow__step::before {
position: absolute;
top: .75rem;
left: .75rem;
margin: 0;
z-index: 2;
width: 2.75rem;
height: 2.75rem;
font-size: 1.1rem;
border: 3px solid var(--card);
}
.flow__media {
display: block;
margin: 0 0 1rem;
border-radius: var(--radius);
overflow: hidden;
background: var(--surface-2);
box-shadow: var(--shadow);
}
.flow__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
@media (max-width: 60rem) {
.flow--media .flow__step { max-width: 26rem; margin-inline: auto; }
}
/* --------------------------------------------------------------------------
Series token: the pendant shape.
The pendant is a physical thing the customer will hold, so it is shown
as a shape rather than described in words. The shape name travels with
it as screen-reader text, so nothing is lost when the visual is not
available.
-------------------------------------------------------------------------- */
.token { display: inline-flex; align-items: center; gap: .5rem; }
.token__label {
font-family: var(--mono);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.token__shape {
color: var(--ink);
flex: none;
display: block;
width: 1.35rem;
height: 1.35rem;
}
.section--ink .token__shape,
.section-ink .token__shape { color: #fff; }
/* .visually-hidden is defined in section 3. */
/* Age and safety notice on product pages. Deliberately quiet rather than
alarming — a parent needs to see it, not be frightened by it. */
.safety-note {
margin-top: 1rem;
padding: .9rem 1.1rem;
background: var(--surface-2);
border-radius: var(--radius-s);
border-left: 3px solid var(--sun);
}
.safety-note .datarow { margin: 0 0 .35rem; }
.safety-note__warning {
display: flex;
gap: .5rem;
align-items: flex-start;
margin: 0;
font-size: .85rem;
line-height: 1.5;
color: var(--ink-soft);
}
/* ==========================================================================
26. FAQ ACCORDION SIZING AND SPACING
The questions are the headings of the page — they are what someone scans
to find their answer — so they are set at heading scale rather than as
slightly-bold body text. Previously they sat at 1.12rem, which read as a
list rather than a set of topics.
ONE OWNER OF THE VERTICAL RHYTHM
--------------------------------
The base .faq details rule (section 8) pads each row by 1.1rem top and
bottom, and this section then padded the summary inside it by another
1.1rem. Both applied, so a closed question carried 4.4rem of padding
around a single line of text and every row floated in space.
Rather than reduce both by half — which leaves two rules that have to be
kept in step forever — the row padding is zeroed here and the summary is
made the single owner of it. The summary is also the click target, so
putting the padding there means the whole row is tappable rather than
just the text inside it.
The base .faq details padding is left alone, because the homepage FAQ
section uses .faq without .accordion and still depends on it.
========================================================================== */
.faq.accordion { margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq.accordion details { padding-block: 0; }
.faq.accordion summary {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
line-height: 1.25;
letter-spacing: -.01em;
color: var(--ink);
padding-block: 1.05rem;
}
/* An open question sits closer to its own answer than to the next question,
so the two read as one unit instead of three evenly spaced lines. */
.faq.accordion details[open] summary { padding-bottom: .6rem; }
/* The + / − marker was set at 1.5rem when the questions were 1.12rem. Now
that they run up to 1.45rem it needs to grow with them to stay legible. */
.faq.accordion summary::after {
font-size: 1.75rem;
font-weight: 400;
line-height: 1;
}
.faq.accordion .faq__answer { margin-top: 0; padding-bottom: 1.3rem; }
.faq.accordion .faq__answer p { margin-bottom: .75rem; }
.faq.accordion .faq__answer > :last-child { margin-bottom: 0; }
/* Checklists inside an answer — the care list, for example. On a narrow
page the generic .prose ul and .prose li rules outrank .included and add
an indent and per-item margins it does not want, so they are restated
here at a specificity that wins. */
.faq__answer .included {
padding-left: 0;
margin: .9rem 0;
gap: .5rem;
}
.faq__answer .included li {
margin-bottom: 0;
max-width: none;
}
/* The section headings above each group, one step larger again. */
.entry-content > h2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.entry-content > h2:first-child { margin-top: 0; }
/* The two buttons that close the page sit in a single paragraph. Left as
inline content they only have a word space between them, and nothing at
all when they wrap onto separate lines on a phone. */
.entry-content p:has(> .btn) {
display: flex;
flex-wrap: wrap;
gap: .75rem;
max-width: none;
}
/* ==========================================================================
27. UTILITY LABEL TYPOGRAPHY
The small uppercase labels — series names under an animal, the Waiting
list and Best seller flags, breadcrumbs, the announcement bar, footer
column headings, spec rows — were set in DM Mono. Monospace exists so
that a lowercase l can be told from a 1 in code; every character is
given identical width whether it needs it or not. At 11px, uppercase,
with wide tracking, that even spacing stops words forming the shapes an
eye recognises at a glance, and the labels have to be read letter by
letter.
--mono now points at Manrope, so all twenty places change together and
the site carries two typefaces rather than three. The DM Mono @font-face
is left in place and simply goes unused — a browser only downloads a
font it actually needs, so this costs nothing, and reverting is a
one-line change to the variable if you want it back.
Manrope is a proportional face, so it needs different handling to read
as a label rather than as shrunken body text: heavier weight to hold up
at small sizes, tighter tracking because proportional letterforms need
less help separating, and a nudge up in size where the old size was
only tolerable because monospace runs visually wide.
========================================================================== */
.pill,
.adopt-card__species,
.crumbs,
.announce,
.result-count,
.post__meta,
.datarow,
.seal,
.field,
.quote figcaption,
.prose th,
.footer h4 {
font-weight: 600;
}
/* Series name beneath the animal's name — the most-read label on the site. */
.adopt-card__species {
font-size: .76rem;
letter-spacing: .09em;
}
/* Corner flags: Waiting list, Best seller, On sale. */
.pill {
font-size: .72rem;
letter-spacing: .08em;
}
.crumbs,
.announce,
.result-count,
.post__meta { letter-spacing: .07em; }
.datarow { font-size: .78rem; }
.datarow dt,
.datarow span { letter-spacing: .05em; }
/* The stamped seal sits on two or three short lines inside a circle, so it
keeps more tracking than the rest — the letterforms need the air. */
.seal { font-size: .62rem; letter-spacing: .1em; }
.footer h4 { letter-spacing: .12em; }
/* ==========================================================================
28. HERO PROOF LINE + LABEL CONTRAST
THE PROOF LINE
--------------
"From $19.99 · Ships in 3–5 days · Made in Maryland" are not labels.
They are three of the strongest reasons to buy, and they were set at
label size in a dim lilac, reading as fine print.
They were also failing contrast. The hero is not flat: three radial
glows sit over --ink, and where the purple one is strongest the
background lightens to about #5A398D. Against that, #BEB0EC measured
4.43:1 — under the 4.5:1 minimum for text this size. Not broken enough
to be obvious, which is why it read as merely dim.
#DDD3FA measures 6.2:1 at that same worst point and 11.2:1 on plain
--ink, so it holds up across the whole gradient. The size goes up and
the tracking comes down: the wide spacing was compensating for DM Mono
and is no longer needed.
The diamonds stay dimmer than the words on purpose. Previously they were
the same colour as the text, so separator and content had equal weight
and the line read as six items rather than three.
THE SERIES LABEL
----------------
--muted on the alternating #F3EEFF section background measured 4.71:1 —
passing, but with nothing to spare, and the first thing to suffer on a
dim phone screen outdoors. #5F5682 brings that to 5.9:1 and 6.7:1 on
white, while staying clearly secondary to the near-black animal name
above it. Deliberately not --ink-soft, which at 9.5:1 would start
competing with the name.
========================================================================== */
.hero__proof {
font-size: .95rem;
font-weight: 600;
color: #DDD3FA;
letter-spacing: .04em;
gap: 1.5rem;
}
.hero__proof li > span[aria-hidden="true"] {
color: #9C86D8;
font-size: .72em;
}
.adopt-card__species { color: #5F5682; }
/* ==========================================================================
29. THE ANIMAL STORY ROWS
"Learns about" / "Adjusting to change" and "PiviPages story" / "Alex the
Adaptable Axolotl" were built on .datarow, which is a spec-table
component: it pushes label and value to opposite edges so a reader can
scan a column of values down the page. That is right for Size and
Articulation, where nobody reads the label and the value as one thought.
Here they are one thought. Splitting them across the full width breaks
the phrase in half and leaves the eye to jump a gap and reassemble it.
There was a second problem underneath. Both halves are spans, so both
inherited the label treatment — small, uppercase, muted. The storybook
title was being shouted in the same voice as the field name above it,
when it is the most appealing piece of content in the block.
So: the row flows as a phrase, the label keeps its small uppercase
treatment, and the value becomes ordinary sentence-case text in full
ink. Setting the row to block also lets a long value wrap under itself
naturally instead of being squeezed by a flex track.
Scoped to .animal-story. The spec table and the cart subtotal still use
.datarow as designed.
========================================================================== */
.animal-story .datarow {
display: block;
font-size: .95rem;
letter-spacing: 0;
padding: .35rem 0;
line-height: 1.5;
}
.animal-story .datarow span:first-child {
font-size: .74rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--muted);
margin-right: .55rem;
}
.animal-story .datarow span + span {
font-weight: 600;
font-size: 1rem;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
}
/* ==========================================================================
30. WOOCOMMERCE PAGINATION
The pagination rules in section 12 were written for WordPress core, which
wraps page links in .pagination > .nav-links. WooCommerce emits something
different — nav.woocommerce-pagination holding a plain — so not one
of those rules matched on the shop or the series archives, and the page
links fell through as an unstyled bulleted list running down the left
margin. The stray dots under the grid were literally list markers.
Rather than duplicate the block, the WooCommerce selectors are given the
same treatment, so both structures land in the same place.
========================================================================== */
.woocommerce-pagination { margin-top: 3rem; }
.woocommerce-pagination ul.page-numbers {
display: flex;
flex-wrap: wrap;
gap: .4rem;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-pagination ul.page-numbers li {
margin: 0;
list-style: none;
}
.woocommerce-pagination li .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.6rem;
min-height: 2.6rem;
padding: 0 .7rem;
border: 1px solid var(--line);
border-radius: var(--r-pill);
font-weight: 600;
text-decoration: none;
color: var(--ink);
}
.woocommerce-pagination li .page-numbers:hover { border-color: var(--ink); }
.woocommerce-pagination li .page-numbers.current {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
.woocommerce-pagination li .page-numbers.dots {
border-color: transparent;
min-width: auto;
}
/* A Coming soon card should not compete with an adoptable one. */
.adopt-card .btn-ghost { border-width: 1px; }
/* ==========================================================================
31. SHOP HEAD SPACING
With the duplicated wrapper gone (see pivipets_wc_wrapper_start), the
tinted page-head band and the product grid finally share an edge. Two
spacing problems that the misalignment was masking are now visible.
The band inherits .section's generous padding-block on top of the
page-head padding it already has, leaving a pool of empty tint under the
filter pills. And .section on the grid below adds its own top padding to
that, so roughly 110px of nothing sat between the pills and the sort
dropdown.
The band keeps comfortable padding above its heading and much less below
its filters, and the grid section starts closer underneath.
========================================================================== */
.section--pagehead.shop-head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section--pagehead.shop-head + .section { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
/* ==========================================================================
FORM PLUGINS
1.3.44 — the contact form ships with its own stylesheet: square corners,
a bright blue submit button and its own label sizing, none of which match
the site. These rules bring it onto the theme's tokens without touching
the plugin, so a plugin update cannot undo the work and the form keeps
working exactly as it did.
Selectors cover the common form plugins rather than just the one in use
now — the markup differs between them and a wrong guess fails silently,
so all four are listed. Anything not present simply never matches.
========================================================================== */
/* Fields */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont textarea {
width: 100%;
box-sizing: border-box;
padding: .75rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-s, 14px);
background: var(--surface);
color: var(--ink);
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
transition: border-color .14s ease, box-shadow .14s ease;
}
.gform_wrapper textarea,
.wpforms-container textarea,
.wpcf7 textarea,
.nf-form-cont textarea {
min-height: 9rem;
resize: vertical;
}
/* Focus ring in the brand accent rather than the browser default. */
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus,
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.nf-form-cont input:focus,
.nf-form-cont textarea:focus {
outline: none;
border-color: var(--glow);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 25%, transparent);
}
/* Labels */
.gform_wrapper .gfield_label,
.wpforms-container .wpforms-field-label,
.wpcf7 label,
.nf-form-cont .nf-field-label label {
font-weight: 700;
font-size: .95rem;
color: var(--ink);
margin-bottom: .4rem;
display: block;
}
/* The required marker was shouting in pure red. */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text,
.wpforms-required-label {
color: var(--muted);
font-weight: 600;
font-size: .85em;
}
/* Submit — the theme's pill button, including the pressed-down hover. */
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button,
.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit,
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit,
.nf-form-cont input[type="button"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .95rem 1.6rem;
border: 2px solid transparent;
border-radius: 999px;
background: var(--sun);
color: #2A1400;
font-family: inherit;
font-weight: 800;
font-size: 1rem;
letter-spacing: -.01em;
cursor: pointer;
box-shadow: 0 4px 0 var(--btn-shadow);
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover,
.nf-form-cont input[type="button"]:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--btn-shadow);
filter: brightness(1.06);
}
.gform_wrapper input[type="submit"]:active,
.gform_wrapper button[type="submit"]:active,
.wpforms-container button[type="submit"]:active,
.wpcf7 input[type="submit"]:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--btn-shadow);
}
/* Spacing between rows, so the form breathes like the rest of the page. */
.gform_wrapper .gfield,
.wpforms-container .wpforms-field,
.nf-form-cont .nf-field-container {
margin-bottom: 1.15rem;
}
/* The spam-check widget sits on its own line above the button. */
.gform_wrapper .gform_footer,
.wpforms-container .wpforms-submit-container {
margin-top: 1.4rem;
}
/* --------------------------------------------------------------------------
1.3.45 — Gravity Forms, at its own specificity.
The 1.3.44 rules matched the labels and the required marker but lost the
fields and the submit button. Gravity Forms 2.5+ ships .gravity-theme and
styles its controls as .gform_wrapper.gravity-theme input[type=text] —
two classes plus an attribute — and its stylesheet loads after the theme's,
so a single-class rule never won. These repeat the same design at matching
specificity rather than reaching for !important on everything.
----------------------------------------------------------------------- */
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme input[type="password"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
padding: .75rem 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-s, 14px);
background: var(--surface);
color: var(--ink);
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
box-sizing: border-box;
transition: border-color .14s ease, box-shadow .14s ease;
}
.gform_wrapper.gravity-theme textarea {
min-height: 9rem;
resize: vertical;
}
.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
outline: none;
border-color: var(--glow);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow) 25%, transparent);
}
.gform_wrapper.gravity-theme .gfield_label {
font-weight: 700;
font-size: .95rem;
color: var(--ink);
margin-bottom: .4rem;
}
/* Sub-labels under a name field ("First", "Last"). */
.gform_wrapper.gravity-theme .gform_fields .gfield_label + .ginput_container label,
.gform_wrapper.gravity-theme .gform-field-label--type-sub {
font-size: .82rem;
color: var(--muted);
font-weight: 600;
}
/* The submit button, pill-shaped like every other button on the site. */
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
padding: .95rem 1.6rem;
border: 2px solid transparent;
border-radius: 999px;
background: var(--sun);
color: #2A1400;
font-family: inherit;
font-weight: 800;
font-size: 1rem;
letter-spacing: -.01em;
cursor: pointer;
box-shadow: 0 4px 0 var(--btn-shadow);
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button[type="submit"]:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--btn-shadow);
filter: brightness(1.06);
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:active,
.gform_wrapper.gravity-theme .gform_footer button[type="submit"]:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--btn-shadow);
}
.gform_wrapper.gravity-theme .gfield { margin-bottom: 1.15rem; }
.gform_wrapper.gravity-theme .gform_footer { margin-top: 1.4rem; }
/* Validation messages in the brand's red-brown rather than pure red. */
.gform_wrapper.gravity-theme .gfield_validation_message,
.gform_wrapper.gravity-theme .validation_message {
border-radius: var(--radius-s, 14px);
font-size: .9rem;
}
/* --------------------------------------------------------------------------
1.3.46 — the submit button, finally.
1.3.45 matched Gravity Forms' own selector exactly, which is a specificity
tie — and on a tie the stylesheet that loads last wins, which is theirs.
Rather than escalate the selector further and have the next plugin update
move the goalposts again, the visual properties carry !important. Scoped
to this one button so nothing else on the site inherits the escape hatch.
The radius is also raised here: at 14px the fields still read as square
next to the site's rounded cards. */
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer input.button,
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button {
background: var(--sun) !important;
background-color: var(--sun) !important;
background-image: none !important;
color: #2A1400 !important;
border: 2px solid transparent !important;
border-radius: 999px !important;
padding: .95rem 1.6rem !important;
font-family: inherit !important;
font-weight: 800 !important;
font-size: 1rem !important;
letter-spacing: -.01em !important;
text-transform: none !important;
width: auto !important;
box-shadow: 0 4px 0 var(--btn-shadow) !important;
cursor: pointer;
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--btn-shadow) !important;
filter: brightness(1.06);
}
.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:active,
.gform_wrapper.gravity-theme .gform_footer button:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--btn-shadow) !important;
}
/* Fields: a rounder corner so they sit with the cards beside them. */
.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
border-radius: 16px !important;
border-color: var(--line) !important;
}
/* ==========================================================================
LITTERS — 1.3.47
========================================================================== */
/* Homepage ladder: three rungs, the biggest saving lifted slightly. */
.litter-ladder {
list-style: none;
padding: 0;
margin: 2rem 0 0;
display: grid;
gap: 1.1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.litter-rung {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.6rem 1.4rem 1.4rem;
box-shadow: var(--shadow-s, 0 2px 10px rgba(40, 20, 80, .06));
display: flex;
flex-direction: column;
gap: .35rem;
}
.litter-rung--best {
border-color: var(--glow);
box-shadow: 0 10px 30px rgba(120, 60, 220, .14);
transform: translateY(-4px);
}
.litter-rung__flag {
position: absolute;
top: -.75rem;
left: 1.4rem;
background: var(--glow);
color: #fff;
font-family: var(--mono);
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: .3rem .7rem;
border-radius: 999px;
}
.litter-rung__label {
font-family: var(--mono);
font-size: .74rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.litter-rung__saving {
font-family: var(--display);
font-size: 2rem;
font-weight: 700;
color: var(--ink);
line-height: 1.1;
margin: 0;
}
.litter-rung__note {
font-size: .92rem;
color: var(--ink-soft);
margin: 0;
}
/* 1.3.76 — a pet from a different series per thumbnail, overlapped so the
row reads as a group rather than a list. The ring around each one is the
card's own background, which is what keeps the overlap legible. */
/* Always three columns, however many pets the rung shows. Sized by flex
instead, two pets came out visibly larger than three on the rung beside
them, because each row divided its own width. Three fixed columns give
every pet on every rung the same size, and the pair simply leaves the
last column empty. Capping the row rather than the image keeps the
overlap intact on a wide card, where a per-image cap would have left
them sitting apart. */
.litter-rung__pets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
margin: auto 0; /* centres the row in whatever slack the tallest rung creates */
padding: .9rem 0;
max-width: 28rem; /* 1.3.78 — a third larger; the pets were reading small in a tall rung */
}
.litter-rung__pets img {
width: 100%;
height: auto;
aspect-ratio: 1;
margin-left: -.85rem;
display: block;
border-radius: 50%;
object-fit: cover;
background: var(--surface);
border: 3px solid var(--surface);
box-shadow: 0 3px 10px rgba(40, 20, 80, .14);
}
.litter-rung__pets img:first-child { margin-left: 0; }
/* 1.3.76 — the rungs are grid items, so they all take the height of the
tallest. "A full litter" is tall because it lists the series, which left
a pocket of blank space under the price on the other two and read as a
missing photo. Pinning the price to the bottom puts the slack above it
and lines all three prices up on one baseline. */
.litter-rung__example {
margin: auto 0 0;
padding-top: .6rem;
border-top: 1px dashed var(--line);
font-size: .9rem;
color: var(--ink);
}
.litter-rung__example s { color: var(--muted); margin-left: .25rem; }
.litter-ladder__cta {
margin: 2rem 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.4rem;
}
.litter-ladder__small { font-size: .88rem; color: var(--muted); }
/* Cart nudge: the line that turns two pets into three. */
.litter-nudge {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .6rem 1rem;
margin: 0 0 1.5rem;
padding: 1rem 1.2rem;
background: color-mix(in srgb, var(--glow) 9%, var(--surface));
border: 1px solid color-mix(in srgb, var(--glow) 35%, transparent);
border-radius: var(--radius-s, 14px);
}
.litter-nudge p {
margin: 0;
flex: 1 1 16rem;
font-weight: 600;
color: var(--ink);
}
.litter-nudge__mark { color: var(--glow); }
.litter-nudge__link { font-weight: 700; white-space: nowrap; }
/* Series page button and its saving line. */
.series-litter {
margin-top: 1.4rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1.1rem;
}
.series-litter__saving {
margin: 0;
font-weight: 600;
color: var(--ink-soft);
}
.series-litter__saving s { color: var(--muted); font-weight: 400; }
/* 1.3.49 — series picker on the full-litter rung. Chips rather than a plain
list, so each series reads as something to tap. */
.litter-rung__pick {
margin: .9rem 0 .45rem;
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.litter-rung__series {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.litter-rung__series a {
display: inline-block;
padding: .38rem .8rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font-size: .82rem;
font-weight: 600;
text-decoration: none;
line-height: 1.3;
transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.litter-rung__series a:hover,
.litter-rung__series a:focus-visible {
border-color: var(--glow);
background: color-mix(in srgb, var(--glow) 10%, var(--surface));
color: var(--ink);
}
/* FAQ page built from the FAQs list (1.3.73) ------------------------------
The groups give the page a spine: a heading, an optional line of context,
then its questions. Spacing does the separating rather than rules, so a
page of five groups does not turn into a page of lines. */
.faq-page__intro { margin-bottom: clamp(2rem, 5vw, 3rem); }
.faq-page__group { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.faq-page__group:last-of-type { margin-bottom: 0; }
.faq-page__heading {
font-size: clamp(1.5rem, 3vw, 2.1rem);
margin-bottom: .75rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--line);
}
.faq-page__group .lede { margin-bottom: 1rem; }
.faq-page__closing {
margin-top: clamp(2.5rem, 6vw, 4rem);
padding-top: clamp(1.5rem, 4vw, 2.5rem);
border-top: 1px solid var(--line);
}
.faq-page__closing .faq-page__heading { border-bottom: 0; padding-bottom: 0; }
.faq-page__closing .lede { margin-bottom: 1.25rem; }