/*
 * Puppy discovery — the redesign.
 *
 * Kept separate from style.css deliberately. That file holds the previous design
 * (measured against a sibling franchise site) and is being retired component by
 * component; nothing in here depends on it. When the last legacy rule is gone,
 * this becomes style.css.
 *
 * Design intent, from the brief: the interface disappears around the puppies.
 * That translates to concrete constraints worth stating, because they are easy to
 * erode one "small improvement" at a time —
 *
 *   - Borders, not shadows. One 1px #E9E7E3 hairline does the work a 16px blur
 *     used to. The only real shadow on the page is the floating CTA.
 *   - Orange is for action and nothing else. No orange panels, no orange bars.
 *   - Radii stay under 14px. Rounder reads as consumer-SaaS, not premium retail.
 *   - Photography is the only saturated thing on screen.
 */

/* ==========================================================================
   Primitives
   ========================================================================== */

/*
 * border-box everywhere inside our components.
 *
 * WordPress does not apply this universally, and the default content-box is a
 * reliable source of overflow bugs: `width: 100%` plus padding plus a border
 * resolves *wider* than the container. It has already caused two in this project
 * — modal fields overrunning their grid cells, and the hero offer badge pushing
 * a 390px viewport to 406px and giving the whole page a horizontal scrollbar.
 * Fixing the category once is better than chasing each instance.
 */
.petland-discover *,
.petland-discover *::before,
.petland-discover *::after,
.petland-masthead *,
.petland-masthead *::before,
.petland-masthead *::after,
.petland-footer *,
.petland-footer *::before,
.petland-footer *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.petland-footer {
	background-color: #080808 !important;
	border: 0;
	border-radius: 18px 18px 0 0;
	color: #fff;
	margin: 0 10px;
	padding: 0 !important;
}

.petland-footer__inner {
	box-sizing: border-box;
	margin: 0 auto !important;
	max-width: 1440px !important;
	padding: 56px 48px 28px;
}

.petland-footer-newsletter {
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
	padding-bottom: 38px;
}

.petland-footer-newsletter__eyebrow {
	color: #f49a77;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.petland-footer-newsletter h2 {
	color: #fff;
	font-size: clamp(1.8rem, 3vw, 2.65rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0;
	max-width: 34rem;
}

.petland-footer-newsletter__form {
	margin: 0;
}

.petland-footer-newsletter__field {
	align-items: center;
	background-color: #fff;
	border-radius: 999px;
	display: flex;
	padding: 7px;
}

.petland-footer-newsletter__field input {
	background: transparent;
	border: 0;
	color: #18191a;
	font: inherit;
	min-height: 46px;
	min-width: 0;
	outline: 0;
	padding: 0 16px;
	width: 100%;
}

.petland-footer-newsletter__field input::placeholder {
	color: #666;
}

.petland-footer-newsletter__field button {
	align-items: center;
	background-color: #0b0b0b;
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
	width: 46px;
}

.petland-footer-newsletter__field button:hover {
	background-color: var(--wp--preset--color--orange);
	transform: translateX(2px);
}

.petland-footer-newsletter__field svg {
	height: 17px;
	width: 17px;
}

.petland-footer-newsletter__form > p {
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.75rem;
	line-height: 1.45;
	margin: 12px 10px 0;
}

.petland-footer__main {
	align-items: start;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1.35fr) minmax(150px, 0.3fr);
	padding: 40px 0 44px;
}

.petland-footer__main > .petland-seal {
	justify-self: end;
	max-width: 180px;
	padding-top: 2px;
	width: 100%;
}

.petland-footer .petland-seal__image {
	display: block;
	margin: 0 auto;
	max-width: 132px;
	mix-blend-mode: multiply;
}

.petland-footer .petland-seal__caption {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.75rem;
	line-height: 1.45;
	margin: 14px 0 0;
}

.petland-footer .petland-seal__caption strong,
.petland-footer .petland-seal__caption span {
	display: block;
}

.petland-footer .petland-seal__caption strong {
	color: #fff;
	font-size: 0.82rem;
	margin-bottom: 2px;
}

.petland-footer__links {
	align-items: start;
	display: grid;
	gap: 34px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Core's flow-layout margin lands on the second grid item even after the
 * container becomes a CSS grid. Reset it so every footer column shares one
 * top baseline. */
.petland-footer__main > *,
.petland-footer__links > * {
	align-self: start;
	margin-block-start: 0 !important;
}

.petland-footer .petland-footer__heading,
.petland-footer .petland-footer-store__city {
	color: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	margin: 0 0 18px;
	text-transform: none;
}

.petland-footer .petland-footer__nav {
	align-items: flex-start;
	gap: 0 !important;
}

.petland-footer .petland-footer__nav .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	line-height: 1.3;
	padding: 5px 0;
}

.petland-footer .petland-footer__nav .wp-block-navigation-item__content:hover,
.petland-footer .petland-footer__nav .current-menu-item > .wp-block-navigation-item__content {
	color: #fff;
}

.petland-footer-store__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.petland-footer-store__location {
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	min-width: 0;
	padding: 19px 20px;
}

.petland-footer .petland-footer-store__location .petland-footer-store__city {
	font-size: 1rem;
	margin-bottom: 10px;
}

.petland-footer-store__location address,
.petland-footer-store__hours {
	color: rgba(255, 255, 255, 0.66) !important;
	font-size: 0.82rem !important;
	font-style: normal;
	line-height: 1.5;
	margin: 0 0 9px !important;
}

.petland-footer-store__phone,
.petland-footer-store__directions {
	color: #fff !important;
	font-size: 0.875rem;
	font-weight: 650;
	text-decoration: none;
}

.petland-footer-store__phone {
	display: inline-block;
	margin-bottom: 9px;
}

.petland-footer-store__directions {
	align-items: center;
	color: #f49a77 !important;
	display: inline-flex;
	gap: 6px;
	margin-top: 4px;
}

.petland-footer-store__directions svg {
	height: 14px;
	width: 14px;
}

.petland-footer-store__follow {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 16px;
	padding-top: 14px;
}

.petland-footer-store__follow > span {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	margin: 0;
}

.petland-footer-store__socials {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-footer-store__socials a {
	align-items: center;
	background-color: #292929;
	border-radius: 8px;
	color: #fff;
	display: inline-flex;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.petland-footer-store__socials a:hover {
	background-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-footer-store__socials svg {
	height: 16px;
	width: 16px;
}

.petland-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	gap: 20px;
	padding-top: 24px;
}

.petland-footer__legal p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.78rem;
	margin: 0;
}

.petland-footer .petland-footer__legal .wp-block-navigation {
	gap: 24px;
}

.petland-footer .petland-footer__legal .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.78rem;
	padding: 5px 0;
}

.petland-footer .petland-footer__legal .wp-block-navigation-item__content:hover {
	color: #fff;
}

@media (max-width: 980px) {
	.petland-footer-newsletter,
	.petland-footer__main {
		grid-template-columns: 1fr;
	}

	.petland-footer__main {
		gap: 40px;
	}

	.petland-footer__main > .petland-seal {
		justify-self: start;
	}
}

@media (max-width: 640px) {
	.petland-footer {
		border-radius: 14px 14px 0 0;
		margin-inline: 4px;
	}

	.petland-footer__inner {
		padding: 42px 20px 24px;
	}

	.petland-footer-newsletter {
		gap: 24px;
		padding-bottom: 30px;
	}

	.petland-footer__links {
		gap: 28px;
	}

	.petland-footer-store__grid {
		grid-template-columns: 1fr;
	}

	.petland-footer__legal {
		align-items: flex-start;
		flex-direction: column;
	}

	.petland-footer__main > .petland-seal {
		max-width: 160px;
	}
}

.petland-sr-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Shared button reset. A <button> is not a neutral box: the UA gives it a border
 * and it does not inherit font-family, so anything switched from <a> to <button>
 * silently drops off the brand typeface. Reset centrally so the next one added
 * cannot reintroduce it.
 */
.petland-card__cta,
.petland-bar__filters,
.petland-find__close,
.petland-special__cta,
.petland-btn,
.petland-find__submit {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

.petland-btn {
	align-items: center;
	border-radius: var(--wp--custom--radius--md);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.petland-btn--primary {
	background-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-btn--primary:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-btn--ghost {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.petland-btn--ghost:hover {
	background-color: var(--wp--preset--color--warm);
	text-decoration: none;
}

.petland-btn svg,
.petland-card__cta svg {
	height: 16px;
	width: 16px;
}

.petland-special__cta svg {
	height: 18px;
	width: 18px;
}

/* Focus is visible and consistent everywhere. Search controls are excluded
   because their component-level styles place one focus ring around the whole
   control instead of a second outline around the nested input. */
.petland-discover a:focus-visible,
.petland-discover button:focus-visible,
.petland-discover select:focus-visible,
.petland-discover input:not([type="search"]):focus-visible,
.petland-masthead a:focus-visible,
.petland-masthead button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Promotional banner
   ==========================================================================

   A countdown bar is inherently attention-seeking, which is at odds with a design
   whose stated intent is to disappear around the puppies. The compromise: soft
   orange rather than solid, ink text rather than white, one CTA, and a height that
   costs the hero almost nothing. It reads as information with a deadline instead
   of as an advertisement.

   Renders with [hidden] and is unhidden by script. Without that there is a
   visible flash of a bar the visitor already dismissed, plus the layout shift of
   it vanishing.
   ========================================================================== */

.petland-banner {
	background-color: var(--wp--preset--color--orange-soft);
	/* Below the masthead, so the hairline goes on the bottom edge only — the
	   masthead already draws its own border above. */
	border-bottom: 1px solid #f8dccb;
	left: 0;
	position: absolute;
	right: 0;
	top: 96px;
	/* Under the masthead's z-index so the location menu can overlap it. */
	z-index: 29;
}

.petland-banner[hidden] {
	display: none;
}

body.admin-bar .petland-banner:not([hidden]) {
	top: 128px;
}

.petland-banner__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 auto;
	max-width: 1540px;
	min-height: 52px;
	padding: 9px 22px 9px 22px;
}

.petland-banner__image {
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(94, 43, 19, 0.16);
	flex: 0 0 auto;
	height: 44px;
	object-fit: cover;
	width: 44px;
}

.petland-banner__text {
	align-items: baseline;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	min-width: 0;
}

.petland-banner__badge {
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--xs);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

.petland-banner__headline {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.petland-banner__detail {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

/* Countdown */

.petland-banner__clock {
	display: flex;
	gap: 6px;
	margin: 0 0 0 auto;
}

.petland-banner__unit {
	align-items: center;
	background-color: #fff;
	border: 1px solid #f4d9c8;
	border-radius: var(--wp--custom--radius--xs);
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	min-width: 42px;
	padding: 5px 6px;
}

.petland-banner__value {
	color: var(--wp--preset--color--orange);
	font-size: 0.9375rem;
	font-weight: 700;
	/* Tabular figures: without them the digits change width each second and the
	   whole bar jitters. */
	font-variant-numeric: tabular-nums;
}

.petland-banner__label {
	color: var(--wp--preset--color--muted);
	/* 11px floor. This was 9px, which is smaller than anything else on the site
	   and below what a 40-year-old eye reads comfortably at arm's length. */
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.petland-banner__cta {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--sm);
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 38px;
	padding: 0 16px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
	white-space: nowrap;
}

.petland-banner__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-banner__close {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 32px;
	justify-content: center;
	padding: 0;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
	width: 32px;
}

.petland-banner__close:hover {
	background-color: rgba(240, 75, 24, 0.1);
	color: var(--wp--preset--color--ink);
}

.petland-banner__close svg {
	height: 16px;
	width: 16px;
}

.petland-banner a:focus-visible,
.petland-banner button:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Promotional Banner color themes are independent from the larger Page Banner.
 * The modifier is saved on the offer and printed by offer_banner(). */
.petland-banner--orange {
	background-color: var(--wp--preset--color--orange);
	border-bottom-color: var(--wp--preset--color--orange-dark);
}

.petland-banner--slate {
	background-color: var(--wp--preset--color--slate);
	border-bottom-color: #3f4a55;
}

.petland-banner--orange .petland-banner__text,
.petland-banner--slate .petland-banner__text {
	color: #fff;
}

.petland-banner--orange .petland-banner__detail,
.petland-banner--slate .petland-banner__detail {
	color: rgba(255, 255, 255, 0.82);
}

.petland-banner--orange .petland-banner__unit,
.petland-banner--slate .petland-banner__unit {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
}

.petland-banner--orange .petland-banner__value,
.petland-banner--orange .petland-banner__label,
.petland-banner--slate .petland-banner__value,
.petland-banner--slate .petland-banner__label {
	color: #fff;
}

.petland-banner--orange .petland-banner__badge,
.petland-banner--orange .petland-banner__cta {
	background-color: #fff;
	color: var(--wp--preset--color--orange-dark);
}

.petland-banner--orange .petland-banner__cta:hover {
	background-color: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--orange-dark);
}

.petland-banner--orange .petland-banner__close,
.petland-banner--slate .petland-banner__close {
	color: #fff;
}

.petland-banner--orange .petland-banner__close:hover,
.petland-banner--slate .petland-banner__close:hover {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.petland-banner--orange a:focus-visible,
.petland-banner--orange button:focus-visible,
.petland-banner--slate a:focus-visible,
.petland-banner--slate button:focus-visible {
	outline-color: #fff;
}

@media (max-width: 900px) {
	/*
	 * The supporting sentence is the first thing to go: the headline and the clock
	 * carry the offer, and the detail line is what forces a third row.
	 */
	.petland-banner__detail {
		display: none;
	}

	.petland-banner__clock {
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	.petland-banner {
		top: 86px;
	}

	body.admin-bar .petland-banner:not([hidden]) {
		top: 132px;
	}

	.petland-banner__inner {
		gap: 8px 10px;
		padding: 9px 22px;
	}

	.petland-banner__text {
		flex: 1 1 calc(100% - 54px);
	}

	.petland-banner__image {
		height: 38px;
		width: 38px;
	}

	/*
	 * The campaign chip goes: the headline already names the offer, and the chip
	 * was the element pushing the headline onto a second line and the bar to three
	 * rows — 152px of a 390px phone spent on a promo before any puppy is visible.
	 */
	.petland-banner__badge {
		display: none;
	}

	.petland-banner__unit {
		min-width: 34px;
		padding: 4px 5px;
	}

	.petland-banner__value {
		font-size: 0.875rem;
	}

	.petland-banner__cta {
		margin-left: auto;
		min-height: 34px;
		padding: 0 12px;
	}

	/* Close sits with the clock and CTA rather than orphaned on its own row. */
	.petland-banner__close {
		order: 3;
	}
}

/* ==========================================================================
   Masthead
   ========================================================================== */

/*
 * Photographic header stage with a floating white navigation pill.
 *
 * The image carries the page into the brand story and the pill is the surface the
 * navigation sits on, so
 * nav text is always dark-on-white — which is what keeps it readable. Putting nav
 * links directly on orange would have been the obvious reading of the reference and
 * the wrong one: white-on-orange at 15px is 5.09:1, fine on its own, but every
 * hover, focus ring and current-page underline then has to fight the orange too.
 */
.petland-masthead {
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(180deg, rgba(12, 13, 14, 0.58) 0%, rgba(12, 13, 14, 0.16) 58%, rgba(12, 13, 14, 0.34) 100%),
		var(--petland-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 340px;
	padding: 14px 0 0;
	position: relative;
	z-index: 30;
}

/*
 * The home page already owns a full photographic hero. Pull the masthead out of
 * flow there so the same navigation pill floats over that image instead of
 * creating a second image band above it.
 */
body.home .petland-masthead {
	background: transparent;
	left: 0;
	min-height: 0;
	padding-top: 14px;
	position: absolute;
	right: 0;
	top: 0;
}

body.admin-bar.home .petland-masthead {
	top: 32px;
}

.petland-masthead > * {
	margin-block-start: 0 !important;
}

/* The puppy archive uses the shared photograph as its actual page hero. The
 * catalog heading belongs here, not in a second photographic card below it. */
body.post-type-archive-puppy .petland-masthead {
	background-image:
		linear-gradient(90deg, rgba(12, 13, 14, 0.84) 0%, rgba(12, 13, 14, 0.58) 48%, rgba(12, 13, 14, 0.18) 82%),
		var(--petland-hero-image, none);
}

.petland-archive-masthead {
	bottom: 34px;
	color: #fff;
	left: 50%;
	max-width: 1440px;
	position: absolute;
	transform: translateX(-50%);
	width: calc(100% - 96px);
}

.petland-archive-masthead .petland-hero__title {
	color: #fff;
	font-size: clamp(2.65rem, 4.6vw, 4.25rem);
}

.petland-archive-masthead .petland-hero__accent {
	color: #f49a77;
}

.petland-archive-masthead .petland-hero__sub,
.petland-archive-masthead .petland-archive__intro-text {
	color: rgba(255, 255, 255, 0.82);
}

.petland-archive-masthead .petland-hero__sub {
	font-size: 1.125rem;
	margin-top: 8px;
}

.petland-archive-masthead .petland-archive__intro {
	margin-top: 12px;
	max-width: 48rem;
}

.petland-archive-masthead .petland-archive__intro-toggle {
	color: #f7b198;
}

.petland-masthead__inner {
	background-color: #fff;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--lifted);
	gap: 20px !important;
	margin: 0 auto;
	max-width: 1440px;
	min-height: 68px;
	padding: 0 14px 0 28px;
	position: relative;
	width: calc(100% - 48px);
}

/*
 * Once the visitor leaves the top of the page, keep only the navigation pill in
 * view. The spring keyframes add a restrained overshoot: enough softness to feel
 * friendly, without making the controls move after the visitor reaches for them.
 */
.petland-masthead.is-sticky .petland-masthead__inner {
	animation: petland-nav-settle 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
	box-shadow: 0 14px 40px rgba(17, 19, 20, 0.2);
	left: 50%;
	position: fixed;
	top: 14px;
	transform: translateX(-50%);
	z-index: 9995;
}

@keyframes petland-nav-settle {
	0% {
		opacity: 0;
		transform: translate(-50%, -24px) scale(0.94);
	}
	58% {
		opacity: 1;
		transform: translate(-50%, 4px) scale(1.012, 0.988);
	}
	78% {
		transform: translate(-50%, -2px) scale(0.996, 1.004);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

@media (min-width: 783px) {
	body.admin-bar .petland-masthead.is-sticky .petland-masthead__inner {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.petland-masthead.is-sticky .petland-masthead__inner {
		animation: none;
	}
}

/*
 * The wordmark is centred on the pill, not in the flow. Centring it with flexbox
 * would only look centred while the left links and the right cluster happened to
 * be the same width — they are not, and the imbalance is obvious at the sizes a
 * wordmark sits at.
 */
.petland-masthead .petland-logo {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

/*
 * The nav must hug its links. As a flex child it grew to 1116px of a 1428px pill,
 * so the absolutely-centred wordmark landed on top of the links — the wordmark was
 * correctly centred the whole time and the nav was the thing in the wrong place.
 */
.petland-masthead .petland-nav {
	flex: 0 0 auto;
}

/*
 * Reserve the middle third for the wordmark so the links and the right-hand
 * cluster can never grow into it, whatever gets added to either side later.
 */
.petland-masthead__inner > .petland-nav,
.petland-masthead__inner > .petland-masthead__right {
	max-width: calc(50% - 110px);
}

.petland-masthead__right {
	gap: 6px !important;
	margin-left: auto;
}

/* Right-hand cluster: search and both store phone links. */

.petland-actions {
	align-items: center;
	display: flex;
	gap: 4px;
}

.petland-actions__btn {
	align-items: center;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	display: flex;
	height: 38px;
	justify-content: center;
	position: relative;
	transition: background-color var(--wp--custom--transition);
	width: 38px;
}

.petland-actions__btn:hover {
	background-color: var(--wp--preset--color--warm);
}

.petland-actions__btn svg {
	height: 19px;
	width: 19px;
}


.petland-actions__locations {
	align-items: center;
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	gap: 2px;
	margin-left: 4px;
	padding: 4px;
	white-space: nowrap;
}

.petland-actions__location {
	align-items: center;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: flex;
	gap: 8px;
	padding: 7px 11px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
	white-space: nowrap;
}

.petland-actions__location:hover {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
	text-decoration: none;
}

.petland-actions__location-city {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.petland-actions__location-phone {
	align-items: center;
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 5px;
}

.petland-actions__location-phone svg {
	height: 13px;
	width: 13px;
}

/* Logo */

.petland-logo {
	align-items: flex-start;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 1px;
	text-decoration: none;
}

.petland-logo img {
	display: block;
	height: auto;
	max-width: 139px;
	width: auto;
}

.petland-logo__word {
	color: var(--wp--preset--color--orange);
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.petland-logo__tag {
	color: var(--wp--preset--color--orange);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Nav */

.petland-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.petland-nav .wp-block-navigation__container {
	gap: clamp(0.5rem, 1.6vw, 1.75rem) !important;
}

.petland-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	font-weight: 500;
	padding: 24px 2px;
	position: relative;
	text-decoration: none;
	transition: color var(--wp--custom--transition);
	white-space: nowrap;
}

.petland-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}

/*
 * Active item: dark bold text with an orange underline. Drawn with a
 * pseudo-element rather than border-bottom so it hugs the text width instead of
 * the padded box.
 */
.petland-nav .current-menu-item > .wp-block-navigation-item__content,
.petland-nav .wp-block-navigation-item.is-current > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.petland-nav .current-menu-item > .wp-block-navigation-item__content::after,
.petland-nav .wp-block-navigation-item.is-current > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--orange);
	border-radius: 2px;
	bottom: 18px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
}

/*
 * The drawer trigger is a mobile affordance. On desktop the full nav is visible,
 * so a MENU button beside it is a second door to the same room.
 */
.petland-menubtn {
	display: none !important;
}

@media (max-width: 1080px) {
	.petland-menubtn {
		display: inline-flex !important;
	}
}

/* ==========================================================================
   Store bar — both locations in the header
   ==========================================================================

   Replaces the location dropdown. Two compact blocks, each city / address /
   phone, right-aligned. The type scale is small on purpose: this is reference
   information a visitor reaches for, not a headline competing with the nav.
   ========================================================================== */

/*
 * Both stores' addresses, on a translucent utility pill above the navigation.
 *
 * They were in the pill's right-hand slot before, which cannot hold two street
 * addresses alongside a centred wordmark. Moving them up keeps them visible on
 * every page — the explicit requirement was no location toggle, and hiding them
 * behind one to save space would have reintroduced exactly that.
 */
.petland-storebar {
	background-color: rgba(12, 13, 14, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	gap: 24px;
	justify-content: center;
	list-style: none;
	margin: 0 auto 10px;
	max-width: max-content;
	padding: 7px 16px;
}

.petland-storebar__item {
	align-items: center;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	line-height: 1.3;
	margin: 0;
	text-align: left;
}

.petland-storebar__city {
	/* On the orange band, so white rather than ink */
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.petland-storebar__address {
	/* rgba white, not a lighter orange: 0.88 on #c73e14 still clears 4.5:1 */
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.75rem;
	text-decoration: none;
}

.petland-storebar__address:hover {
	color: #fff;
	text-decoration: underline;
}

.petland-storebar__phone {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 700;
	gap: 5px;
	justify-content: flex-start;
	text-decoration: none;
	white-space: nowrap;
}

.petland-storebar__phone:hover {
	text-decoration: underline;
}

.petland-storebar__phoneicon {
	display: inline-flex;
}

.petland-storebar__phoneicon svg {
	height: 13px;
	width: 13px;
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.petland-discover {
	background-color: var(--wp--preset--color--page);
	padding-block: 0 72px;
}

/*
 * Grid rather than flex for the two columns: the sidebar is a fixed track and the
 * feed takes what is left, which `grid-template-columns` states directly instead
 * of expressing as flex-basis plus min-width-zero.
 */
.petland-discover__layout {
	display: grid;
	gap: 0 44px;
	grid-template-columns: var(--wp--custom--sidebar) minmax(0, 1fr);
}

.petland-discover__sidebar {
	align-self: start;
	border-right: 1px solid var(--wp--preset--color--border);
	max-height: calc(100vh - 126px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 40px 36px 56px 0;
	position: sticky;
	top: 102px;
}

body.admin-bar .petland-discover__sidebar {
	max-height: calc(100vh - 158px);
	top: 134px;
}

.petland-discover__main {
	min-width: 0;
	padding: 40px 0 0;
}

/* ==========================================================================
   Hero with photographic background
   ==========================================================================

   Applied only when a photo is actually set — Petland_Inventory adds the
   `petland-has-hero` body class and passes the URL as --petland-hero-image. A
   site with no photo keeps the plain hero, with no border or padding wrapped
   around nothing.

   Two things make this legible rather than merely pretty:

   1. A left-to-right scrim in the page colour. The text sits on the scrim, not on
      the photograph, so contrast survives whatever gets uploaded. Ink on #FAFAF8
      is ~15:1, and the scrim keeps the left edge near-opaque to preserve it.
   2. `background-position: right center`, because these compositions put the
      subject right and the empty space left — which is where the heading goes. At
      narrow widths the subject would fall under the text, so the scrim goes
      near-solid there instead of relying on position.
   ========================================================================== */

.petland-discover__head {
	margin-bottom: 34px;
}

.petland-discover__head:empty {
	display: none;
}

.petland-has-hero .petland-discover__head {
	background-image:
		linear-gradient(
			100deg,
			rgba(250, 250, 248, 0.97) 0%,
			rgba(250, 250, 248, 0.94) 32%,
			rgba(250, 250, 248, 0.6) 56%,
			rgba(250, 250, 248, 0.12) 78%,
			rgba(250, 250, 248, 0.02) 100%
		),
		var(--petland-hero-image, none);
	background-position: center center, right center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	min-height: 330px;
	padding: 44px 46px 40px;
}

.petland-featuredoffer {
	background: #f7f3ee;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	max-width: none;
	min-height: 244px;
	overflow: hidden;
	padding: clamp(30px, 5vw, 64px);
	position: relative;
}

.petland-kittens > .petland-featuredoffer {
	margin: clamp(42px, 6vw, 76px) auto 0;
	max-width: 1500px;
	width: calc(100% - max(72px, 12vw));
}

.petland-featuredoffer--orange {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
}

.petland-featuredoffer--slate {
	background: var(--wp--preset--color--slate);
	border-color: var(--wp--preset--color--slate);
}

.petland-featuredoffer--orange .petland-featuredoffer__badge,
.petland-featuredoffer--orange .petland-featuredoffer__title,
.petland-featuredoffer--orange .petland-featuredoffer__body,
.petland-featuredoffer--orange .petland-featuredoffer__legal,
.petland-featuredoffer--slate .petland-featuredoffer__badge,
.petland-featuredoffer--slate .petland-featuredoffer__title,
.petland-featuredoffer--slate .petland-featuredoffer__body,
.petland-featuredoffer--slate .petland-featuredoffer__legal {
	color: #fff;
}

.petland-featuredoffer--orange .petland-featuredoffer__body,
.petland-featuredoffer--orange .petland-featuredoffer__legal,
.petland-featuredoffer--slate .petland-featuredoffer__body,
.petland-featuredoffer--slate .petland-featuredoffer__legal {
	opacity: 0.88;
}

.petland-featuredoffer--image {
	align-items: center;
	display: grid;
	gap: clamp(24px, 4vw, 52px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: none;
	width: 100%;
}

.petland-featuredoffer__copy {
	min-width: 0;
}

.petland-featuredoffer__image {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 16px 36px rgba(53, 34, 24, 0.14);
	display: block;
	height: 245px;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 900px) {
	.petland-featuredoffer--image {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.petland-featuredoffer__image {
		height: 220px;
	}
}

@media (max-width: 650px) {
	.petland-featuredoffer {
		border-radius: var(--wp--custom--radius--lg);
		padding: 26px;
	}

	.petland-kittens > .petland-featuredoffer {
		width: calc(100% - 40px);
	}

	.petland-featuredoffer--image {
		grid-template-columns: 1fr;
	}

	.petland-featuredoffer__image {
		height: 190px;
		order: -1;
	}
}

.petland-featuredoffer__badge {
	color: var(--wp--preset--color--orange);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.petland-featuredoffer__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 4vw, 3.35rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.02;
	margin: 0;
	text-wrap: balance;
}

.petland-featuredoffer__body {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.55;
	margin: 14px 0 0;
}

.petland-featuredoffer__legal {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.45;
	margin: 16px 0 0;
}

.petland-featuredoffer__clock {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 22px;
	max-width: 340px;
}

.petland-featuredoffer__unit {
	align-items: center;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(53, 34, 24, 0.1);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 62px;
	padding: 8px 6px;
}

.petland-featuredoffer__value {
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	font-weight: 750;
	letter-spacing: -0.02em;
	line-height: 1;
}

.petland-featuredoffer__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-top: 5px;
	text-transform: uppercase;
}

.petland-featuredoffer--orange .petland-featuredoffer__unit,
.petland-featuredoffer--slate .petland-featuredoffer__unit {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.24);
}

.petland-featuredoffer--orange .petland-featuredoffer__value,
.petland-featuredoffer--orange .petland-featuredoffer__label,
.petland-featuredoffer--slate .petland-featuredoffer__value,
.petland-featuredoffer--slate .petland-featuredoffer__label {
	color: #fff;
}

/* The scrim is a decorative wash; a forced-colours user gets plain background. */
@media (forced-colors: active) {
	.petland-has-hero .petland-discover__head {
		background-image: none;
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */

.petland-hero {
	max-width: 42rem;
}

.petland-hero__title {
	font-size: clamp(2.5rem, 4.2vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0;
	text-wrap: balance;
}

/* Orange lands on one word, not the sentence. */
.petland-hero__accent {
	color: var(--wp--preset--color--orange);
}

.petland-hero__sub {
	color: var(--wp--preset--color--muted);
	font-size: 1.1875rem;
	margin: 14px 0 0;
}

.petland-hero__status {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	gap: 12px;
	margin: 20px 0 0;
}

.petland-hero__count {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: 9px;
}

.petland-hero__paw {
	color: var(--wp--preset--color--ink);
	display: inline-flex;
}

.petland-hero__paw svg {
	height: 19px;
	width: 19px;
}

.petland-hero__sep {
	background-color: var(--wp--preset--color--border);
	height: 14px;
	width: 1px;
}

.petland-hero__fresh {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	gap: 7px;
}

.petland-hero__dot {
	background-color: var(--wp--preset--color--green);
	border-radius: 50%;
	height: 7px;
	width: 7px;
}

/* ==========================================================================
   Page description
   ==========================================================================

   Moved from below the trust bar to directly under the H1. Better for the reader,
   who gets the context with the heading rather than after the whole listing, and
   better for search: prose adjacent to the H1 describes the page, prose stranded
   under the footer reads as boilerplate.

   Clamped to two lines so it never pushes the puppies down — the grid is what the
   visitor came for, and the copy is here for the minority who want detail and for
   crawlers.
   ========================================================================== */

.petland-archive__intro-wrap,
.petland-archive__intro {
	margin: 0;
	max-width: 46rem;
}

.petland-archive__intro {
	margin-top: 16px;
}

.petland-archive__intro-text {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.petland-archive__intro-text p {
	margin: 0 0 0.7em;
}

.petland-archive__intro-text p:last-child {
	margin-bottom: 0;
}

.petland-archive__intro-text.is-clamped {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.petland-archive__intro-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--orange);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	margin-top: 6px;
	padding: 0;
	text-decoration: none;
}

.petland-archive__intro-toggle:hover {
	text-decoration: underline;
}

.petland-archive__intro-toggle[hidden] {
	display: none;
}

/* ==========================================================================
   Toolbar
   ========================================================================== */

.petland-bar {
	align-items: stretch;
	display: flex;
	gap: 12px;
	margin-bottom: 26px;
}

.petland-bar__search {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	margin: 0;
	min-height: 52px;
	min-width: 0;
	padding: 0 16px;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.petland-bar__search:focus-within {
	border-color: rgba(213, 65, 20, 0.52);
	box-shadow: 0 0 0 3px rgba(213, 65, 20, 0.1);
}

.petland-bar__searchicon {
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	flex: 0 0 auto;
}

.petland-bar__searchicon svg {
	height: 18px;
	width: 18px;
}

/*
 * align-self: stretch is a hit-area fix, not a visual one. The input has no
 * border or background and a UA line-height it does not inherit, so its box was
 * ~19px inside a 52px bar — most of what reads as "the search field" was not
 * clickable.
 */
.petland-bar__search input {
	align-self: stretch;
	background: none;
	border: 0;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	/* 16px minimum: iOS zooms the whole page when a focused input is smaller. */
	font-size: 1rem;
	min-width: 0;
	outline: 0;
	padding: 0;
	width: 100%;
}

.petland-bar__search input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.petland-bar__search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* The breed shortcut is mobile-only; desktop already has the permanent filter
 * rail and does not need a duplicate control. */
.petland-bar__breed {
	display: none;
}

.petland-bar__sort {
	flex: 0 0 auto;
	margin: 0;
	position: relative;
}

.petland-bar__sort select {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	height: 100%;
	min-height: 52px;
	min-width: 190px;
	padding: 0 42px 0 16px;
}

.petland-bar__chev {
	color: var(--wp--preset--color--muted);
	pointer-events: none;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

/* Unconstrained inline SVGs expand to fill their container; these are load-bearing. */
.petland-bar__chev svg {
	height: 16px;
	width: 16px;
}

.petland-bar__views {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 4px;
}

.petland-bar__view {
	align-items: center;
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	justify-content: center;
	min-height: 42px;
	min-width: 44px;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.petland-bar__view:hover {
	background-color: var(--wp--preset--color--warm);
}

.petland-bar__view.is-active {
	background-color: var(--wp--preset--color--ink);
	color: #fff;
}

.petland-bar__view svg {
	height: 17px;
	width: 17px;
}

/* Mobile-only filter trigger. */
.petland-bar__filters {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: none;
	font-size: 0.9375rem;
	font-weight: 500;
	gap: 8px;
	min-height: 52px;
	padding: 0 16px;
}

.petland-bar__filters svg {
	height: 17px;
	width: 17px;
}

.petland-bar__count {
	color: var(--wp--preset--color--orange);
	font-weight: 700;
}

.petland-bar__go {
	background-color: var(--wp--preset--color--orange);
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	color: #fff;
	font-weight: 600;
	padding: 8px 14px;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.petland-find {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.petland-find__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.petland-find__title {
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0;
}

.petland-find__availability {
	align-items: center;
	background-color: #fff0e6;
	border: 1px solid #f2d2bf;
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	gap: 11px;
	padding: 13px 14px;
}

.petland-find__availableicon {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	flex: 0 0 auto;
}

.petland-find__availableicon svg {
	height: 19px;
	width: 19px;
}

.petland-find__availability p {
	display: flex;
	flex-direction: column;
	font-size: 0.8125rem;
	line-height: 1.35;
	margin: 0;
}

.petland-find__availability strong {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 700;
}

.petland-find__availability p > span {
	color: var(--wp--preset--color--muted);
}

/* Only meaningful in the mobile sheet. */
.petland-find__close {
	align-items: center;
	background: none;
	color: var(--wp--preset--color--muted);
	display: none;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}

.petland-find__close svg {
	height: 20px;
	width: 20px;
}

.petland-find__group {
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
}

/* Sorting stays in the desktop toolbar and moves into the compact filter sheet
 * on mobile, avoiding a third toolbar row. */
.petland-find__group--sort {
	display: none;
}

.petland-find__label {
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	padding: 0;
}

/* Selects */

.petland-find__selwrap {
	position: relative;
}

.petland-find__selwrap select {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	min-height: 44px;
	padding: 0 38px 0 13px;
	width: 100%;
}

.petland-find__selchev {
	color: var(--wp--preset--color--muted);
	pointer-events: none;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.petland-find__selchev svg {
	height: 16px;
	width: 16px;
}

/* Segmented gender control */

.petland-seg {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.petland-seg__item {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	justify-content: center;
	min-height: 44px;
	position: relative;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.petland-seg__item input {
	clip-path: inset(50%);
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.petland-seg__item span {
	align-items: center;
	border: 1px solid transparent;
	border-radius: inherit;
	display: flex;
	inset: -1px;
	justify-content: center;
	position: absolute;
}

.petland-seg__item input:checked + span {
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
	font-weight: 600;
}

.petland-seg__item input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

@media (hover: hover) {
	.petland-seg__item:hover {
		border-color: #d5d2cd;
		text-decoration: none;
	}
}

.petland-seg__item.is-active {
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
	font-weight: 600;
}

/* Checkboxes */

.petland-find__checks {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-find__checks--breeds {
	max-height: 240px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 6px;
	scrollbar-width: thin;
}

.petland-hcollection__img {
	object-position: var(--petland-cover-position, center);
}

.petland-featured-breeds .petland-hcollection__img {
	object-position: center center;
}

/*
 * The real target is this label, not the 18px box inside it. Padding here is what
 * makes the row a comfortable tap target without inflating the visible control.
 */
.petland-check {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	min-height: 36px;
	padding: 3px 0;
}

/*
 * Visually hidden but still focusable and operable — the styled box beside it is
 * only a proxy. 1px with clip-path rather than `height: 0; width: 0`, because a
 * genuinely zero-sized control is treated inconsistently by assistive tech and by
 * automation; 1px keeps it a real box that simply cannot be seen.
 */
.petland-check input {
	clip-path: inset(50%);
	height: 1px;
	opacity: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.petland-check__box {
	align-items: center;
	background-color: #fff;
	border: 1px solid #d6d3ce;
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 18px;
	justify-content: center;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
	width: 18px;
}

.petland-check__box svg {
	height: 12px;
	opacity: 0;
	width: 12px;
}

.petland-check input:checked + .petland-check__box {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
}

.petland-check input:checked + .petland-check__box svg {
	opacity: 1;
}

/* Focus has to be drawn on the proxy, since the real input is visually hidden. */
.petland-check input:focus-visible + .petland-check__box {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

.petland-check__text {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

.petland-check__note {
	color: var(--wp--preset--color--muted);
}

/* Coat colour */

.petland-find__checks--colour {
	display: grid;
	gap: 2px 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.petland-check__swatch {
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%);
	display: inline-block;
	flex: none;
	height: 12px;
	margin-right: 6px;
	vertical-align: -1px;
	width: 12px;
}

.petland-check__swatch--black {
	background: #1d1d1f;
}

.petland-check__swatch--white {
	background: #fff;
}

.petland-check__swatch--red {
	background: #a8321c;
}

.petland-check__swatch--golden {
	background: #e0a95c;
}

.petland-check__swatch--brown {
	background: #6b4326;
}

.petland-check__swatch--grey {
	background: #8b9098;
}

.petland-check__swatch--merle {
	background: linear-gradient(135deg, #8b9098 0%, #4a4f57 38%, #cfd3d8 62%, #6b7078 100%);
}

.petland-check__swatch--sable {
	background: linear-gradient(135deg, #c98a4b 0%, #7a4a22 55%, #3a2414 100%);
}

/*
 * In the mobile filter drawer every list renders as a bordered card with a divider
 * between rows, so a two-column colour grid put a divider over half a row — "White"
 * had a border-top while "Black" beside it did not. One column there, matching the
 * other facets.
 */
@media (max-width: 1080px) {
	.petland-discover__sidebar.is-open .petland-find__checks--colour {
		grid-template-columns: 1fr;
	}
}

.petland-find__reset {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 7px;
	text-decoration: none;
}

.petland-find__reset:hover {
	color: var(--wp--preset--color--orange);
}

.petland-find__reset svg {
	height: 15px;
	width: 15px;
}

.petland-find__submit {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	display: flex;
	font-weight: 600;
	justify-content: center;
	min-height: 48px;
	width: 100%;
}

.petland-find.is-enhanced .petland-find__submit {
	display: flex;
}

.petland-find__submit.is-counting {
	cursor: progress;
	opacity: 0.78;
}

/* ==========================================================================
   Feed
   ========================================================================== */

.petland-feed {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Fixed column count only once there is genuinely room for it, and the budget
 * has to include the sidebar:
 *
 *   300 sidebar + 44 gap + (4 x 270 card) + (3 x 22 gap) + 44 root padding = 1534
 *
 * An earlier 1200px breakpoint ignored that and produced 190px cards at 1200 —
 * the sidebar is still a track at that width, so four columns had ~810px to
 * share. Below the cut-off auto-fill derives the count from the space actually
 * available and settles on three.
 */
@media (min-width: 1540px) {
	.petland-feed {
		grid-template-columns: repeat(var(--petland-columns, 4), minmax(0, 1fr));
	}
}

.petland-feed__cell {
	display: flex;
	margin: 0;
}

.petland-feed__cell > * {
	width: 100%;
}

/* Puppy card */

.petland-card {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

@media (prefers-reduced-motion: no-preference) {
	.petland-card:hover,
	.petland-card:focus-within {
		border-color: #d8d5d0;
		transform: translateY(-2px);
	}
}

.petland-card__media {
	/*
	 * The wrapper owns the ratio, not the image. An <img> with width/height
	 * attributes has a used height, which makes aspect-ratio on the image itself
	 * inert — the crop has to be enforced by the box the image is absolutely
	 * positioned inside.
	 */
	aspect-ratio: 9 / 10;
	background-color: var(--wp--preset--color--warm);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.petland-card__photo {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.petland-card__img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Feature video — the card media upgrade
   --------------------------------------------------------------------------
   The video occupies the same 9:10 box the still did, so a grid of mixed
   video and photo cards stays on one baseline. Nothing here changes the
   card's shape; see Petland_Feature_Video for why this is not a separate
   card component.
   -------------------------------------------------------------------------- */

.petland-card__video {
	inset: 0;
	position: absolute;
}

.petland-card__vid {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.petland-card__vidtoggle,
.petland-card__vidsound {
	align-items: center;
	background-color: rgba(21, 23, 25, 0.62);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	bottom: 10px;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 34px;
	justify-content: center;
	left: 10px;
	position: absolute;
	transition: background-color var(--wp--custom--transition);
	width: 34px;
	z-index: 3;
}

.petland-card__vidsound {
	left: 52px;
}

.petland-card__vidtoggle:hover,
.petland-card__vidsound:hover,
.petland-card__vidsound[aria-pressed="true"] {
	background-color: rgba(21, 23, 25, 0.82);
}

.petland-card__vidtoggle svg,
.petland-card__vidsound svg {
	height: 15px;
	width: 15px;
}

/*
 * One button, two glyphs, toggled by a class on the wrapper. Swapping innerHTML
 * would rebuild the SVG on every intersection change; a class does not.
 */
.petland-card__vidicon {
	align-items: center;
	display: none;
	justify-content: center;
}

.petland-card__video .petland-card__vidicon[data-petland-video-icon="pause"],
.petland-card__video.is-paused .petland-card__vidicon[data-petland-video-icon="play"] {
	display: flex;
}

.petland-card__video.is-paused .petland-card__vidicon[data-petland-video-icon="pause"] {
	display: none;
}

.petland-card__soundicon {
	align-items: center;
	display: none;
	justify-content: center;
}

.petland-card__video .petland-card__soundicon[data-petland-sound-icon="off"],
.petland-card__video.is-sound-on .petland-card__soundicon[data-petland-sound-icon="on"] {
	display: flex;
}

.petland-card__video.is-sound-on .petland-card__soundicon[data-petland-sound-icon="off"] {
	display: none;
}

.petland-card--feature {
	background: #fffaf7;
	border: 2px solid rgba(240, 75, 24, 0.78);
	box-shadow: 0 20px 46px rgba(92, 49, 29, 0.15);
	position: relative;
}

.petland-card--feature .petland-card__body {
	background: linear-gradient(135deg, #fff 0%, #fff6ef 100%);
}

.petland-card--feature .petland-card__name {
	font-size: clamp(1.55rem, 2.2vw, 2rem);
}

.petland-card--feature .petland-card__cta {
	background: linear-gradient(110deg, var(--wp--preset--color--orange-dark), var(--wp--preset--color--orange));
	box-shadow: 0 9px 22px rgba(211, 61, 16, 0.19);
}

/*
 * The heart already sits top-right; the video badge is bottom-right so they
 * never stack on the same corner.
 */

/*
 * Editorially featured puppies take a double-width cell. Only applied where the
 * grid has room for it — below this the cell would be wider than the viewport
 * and the ratio would push the card taller than a phone screen.
 */
@media (min-width: 900px) {
	.petland-feed__cell:has(.petland-card--feature) {
		grid-column: span 2;
	}

	.petland-card--feature .petland-card__media {
		aspect-ratio: 16 / 11;
	}
}

/*
 * Motion is opt-in, not opt-out.
 *
 * A grid of autoplaying clips is exactly what a reduced-motion preference is
 * for, and it is also a real data cost on a phone. In both cases the card falls
 * back to the poster frame with a play button, which is the card as it was plus
 * one affordance — never a broken or empty box.
 */
@media (prefers-reduced-motion: reduce) {
	.petland-card__video {
		--petland-video-autoplay: 0;
	}
}

.petland-card__noimg {
	align-items: center;
	color: #cfccc6;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.petland-card__noimg svg {
	height: 44px;
	width: 44px;
}




.petland-card__views {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.94);
	border-radius: var(--wp--custom--radius--pill);
	bottom: 12px;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 600;
	gap: 5px;
	left: 12px;
	padding: 5px 10px;
	position: absolute;
	z-index: 2;
}

.petland-card__views svg {
	height: 13px;
	width: 13px;
}

.petland-card__location {
	align-items: center;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(29, 29, 31, 0.08);
	border-radius: var(--wp--custom--radius--pill);
	bottom: 12px;
	box-shadow: 0 4px 14px rgba(29, 29, 31, 0.1);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 650;
	gap: 5px;
	line-height: 1;
	padding: 7px 10px;
	position: absolute;
	right: 12px;
	z-index: 4;
}

.petland-card__location svg {
	color: var(--wp--preset--color--orange);
	height: 13px;
	width: 13px;
}

.petland-card--video:not(.petland-card--feature) .petland-card__location {
	bottom: 50px;
}

.petland-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px 16px 16px;
}

.petland-card__breed {
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	line-height: 1.25;
	margin: 0 0 7px;
	text-transform: uppercase;
}

.petland-card__name {
	font-size: 1.4375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
	overflow-wrap: break-word;
}

.petland-card__name a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-card__name a:hover {
	color: var(--wp--preset--color--orange);
}

.petland-card__meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 5px 0 0;
}

.petland-card__dot {
	padding: 0 3px;
}

.petland-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.petland-card__facts li {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.8125rem;
	gap: 6px;
}

.petland-card__fact-location {
	display: none !important;
}

.petland-card--feature .petland-card__location {
	display: none;
}

.petland-card--feature .petland-card__fact-location {
	display: flex !important;
}

.petland-card__facts svg {
	color: var(--wp--preset--color--orange);
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/* margin-top:auto pins the CTA to the bottom so buttons align across a row
   whose cards have different amounts of text. */
.petland-card__cta {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	display: flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
	min-height: 48px;
	transition: background-color var(--wp--custom--transition);
	width: 100%;
}

.petland-card__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
}

.petland-card__more {
	align-items: center;
	align-self: center;
	color: var(--wp--preset--color--slate);
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 650;
	gap: 7px;
	justify-content: center;
	margin-top: 12px;
	padding: 4px 2px;
	text-decoration: none;
}

.petland-card__more:hover,
.petland-card__more:focus-visible {
	color: var(--wp--preset--color--orange-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.petland-card__more svg {
	height: 14px;
	transition: transform var(--wp--custom--transition);
	width: 14px;
}

.petland-card__more:hover svg,
.petland-card__more:focus-visible svg {
	transform: translateX(3px);
}

/* Value cards */

/*
 * The two editorial tiles opt into container queries so their headlines can be
 * sized against the CARD, not the viewport.
 *
 * That distinction matters here: card width tracks the column count, which is
 * intrinsic below 1540px. At a 1400px viewport a card is 323px wide; at 1540px it
 * is 272px. A viewport media query would make the headline *larger* on the
 * narrower card — exactly backwards. cqi units read the container's own inline
 * size, so the type scales with the space it actually has.
 */
.petland-vcard,
.petland-promocard {
	container-type: inline-size;
}

.petland-vcard {
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
}

.petland-vcard--soft-blue {
	background-color: #edf4ff;
	border-color: #d8e5f7;
}

.petland-vcard--soft-green {
	background-color: #eaf7ef;
	border-color: #d1eadb;
}

.petland-vcard--soft-orange {
	background-color: #fff0e6;
	border-color: #f2d2bf;
}

.petland-vcard--neutral {
	background-color: #f3f1ed;
	border-color: #dedbd5;
}

.petland-vcard__icon {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(29, 29, 31, 0.08);
	border-radius: 50%;
	display: inline-flex;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.petland-vcard__topline {
	align-items: center;
	display: flex;
	gap: 11px;
	margin-bottom: 22px;
}

.petland-vcard__eyebrow {
	color: var(--wp--preset--color--ink);
	font-size: 0.6875rem;
	font-weight: 750;
	letter-spacing: 0.105em;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
}

.petland-vcard__icon svg {
	height: 20px;
	width: 20px;
}

.petland-vcard--soft-blue .petland-vcard__icon {
	color: var(--wp--preset--color--link-blue);
}

.petland-vcard--soft-blue .petland-vcard__eyebrow {
	color: var(--wp--preset--color--link-blue);
}

.petland-vcard--soft-green .petland-vcard__icon {
	color: var(--wp--preset--color--link-green);
}

.petland-vcard--soft-green .petland-vcard__eyebrow {
	color: var(--wp--preset--color--link-green);
}

.petland-vcard--soft-orange .petland-vcard__icon,
.petland-vcard--neutral .petland-vcard__icon {
	color: var(--wp--preset--color--orange);
}

.petland-vcard--soft-orange .petland-vcard__eyebrow,
.petland-vcard--neutral .petland-vcard__eyebrow {
	color: var(--wp--preset--color--orange-dark);
}

/*
 * Headline callout, not a card heading.
 *
 * These tiles carry no photograph, so the type has to do the work the imagery
 * does on a puppy card — it is the only thing that stops them reading as filler
 * in a grid of photos. Deliberately larger than the puppy names beside them
 * (1.4375rem) and just under the sidebar offer (1.875rem), which is the loudest
 * callout on the page.
 *
 * Tighter line-height and negative tracking come with the size: at 28px the
 * default 1.25 leading opens gaps that make a three-line headline look like three
 * separate lines rather than one statement.
 */
.petland-vcard__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.625rem, 10.5cqi, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin: 0;
	/* Value-card titles are staff-entered and vary in length; balance stops a
	   long one ending on a one-word orphan line. */
	text-wrap: balance;
}

.petland-vcard__body {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 10px 0 0;
}

/* Promo card */

.petland-promocard {
	background-color: #fff0e6;
	border: 1px solid #f0cbb6;
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
}

.petland-promocard__icon {
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	margin-bottom: 16px;
}

.petland-promocard__icon svg {
	height: 24px;
	width: 24px;
}

/* Same callout treatment as the value cards; see the note there. */
.petland-promocard__title {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.625rem, 11cqi, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
}

.petland-promocard__body {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 12px 0 0;
}

.petland-promocard__body strong {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.petland-promocard__cta {
	align-items: center;
	align-self: flex-start;
	background-color: #fff;
	border: 1px solid #f1d7c8;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 7px;
	margin-top: auto;
	min-height: 44px;
	padding: 0 18px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
}

.petland-promocard__cta:hover {
	background-color: #fffaf6;
	text-decoration: none;
}

.petland-promocard__cta svg {
	height: 15px;
	width: 15px;
}

/* Load more */

.petland-loadmore {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.petland-loadmore__btn {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 9px;
	min-height: 50px;
	padding: 0 28px;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition);
}

.petland-loadmore__btn:hover {
	border-color: #d5d2cd;
	text-decoration: none;
}

/* Kept clickable-looking but inert while a batch is in flight. */
.petland-loadmore__btn.is-loading {
	color: var(--wp--preset--color--muted);
	cursor: default;
	pointer-events: none;
}

.petland-loadmore__btn.is-loading svg {
	display: none;
}

.petland-loadmore__btn svg {
	height: 16px;
	width: 16px;
}

/* With automatic loading available, the link becomes a quiet loading sentinel.
 * It returns to its normal button treatment if the request fails or the browser
 * does not support IntersectionObserver. */
.petland-loadmore.is-auto {
	min-height: 50px;
}

.petland-loadmore.is-auto .petland-loadmore__btn {
	border-color: transparent;
	opacity: 0;
	pointer-events: none;
}

.petland-loadmore.is-auto .petland-loadmore__btn.is-loading {
	opacity: 1;
}

/* Empty state */

.petland-empty {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	padding: 56px 32px;
	text-align: center;
}

.petland-empty__icon {
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	margin-bottom: 18px;
}

.petland-empty__icon svg {
	height: 40px;
	width: 40px;
}

.petland-empty__title {
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0;
}

.petland-empty__body {
	color: var(--wp--preset--color--muted);
	margin: 10px auto 0;
	max-width: 32rem;
}

.petland-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 26px;
}

/* ==========================================================================
   Special order CTA — floating card
   ==========================================================================

   A contained, elevated card rather than an edge-to-edge band. The section around
   it is transparent and exists only to provide vertical breathing room; the card
   itself is the object.

   This is the one place in the design where a real shadow is warranted, which the
   note at the top of this file already reserves for it. Everything else separates
   with a 1px hairline. Two layers rather than one: a wide soft cast for the lift
   plus a tight contact shadow, because a single large blur reads as a glow rather
   than as an object above the page.
   ========================================================================== */

.petland-special-section {
	background-color: transparent;
	/* Inline padding guarantees a gutter: without it a 1320px card on a 1340px
	   viewport would sit 10px from each edge and stop reading as inset. */
	padding: 56px 24px 32px;
}

.petland-special {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow:
		0 14px 44px rgba(21, 23, 25, 0.09),
		0 2px 6px rgba(21, 23, 25, 0.04);
	display: flex;
	gap: 32px;
	/*
	 * Contained rather than wide: presence comes from the padding, type scale and
	 * button size below, not from spanning the page. A CTA stretched to full width
	 * stops reading as a card and becomes another band.
	 */
	margin: 0 auto;
	max-width: 1040px;
	padding: 48px 52px;
}

.petland-special__icon {
	align-items: center;
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	flex: 0 0 auto;
	height: 76px;
	justify-content: center;
	width: 76px;
}

.petland-special__icon svg {
	height: 32px;
	width: 32px;
}

.petland-special__text {
	min-width: 0;
}

.petland-special p {
	margin: 0;
}

.petland-special__title {
	color: var(--wp--preset--color--ink);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0;
}

.petland-special__body {
	color: var(--wp--preset--color--muted);
	font-size: 1.0625rem;
	margin-top: 9px !important;
}

.petland-special__cta {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.0625rem;
	font-weight: 600;
	gap: 10px;
	margin-left: auto;
	min-height: 62px;
	padding: 0 34px;
	transition: background-color var(--wp--custom--transition);
}

.petland-special__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
}

/* ==========================================================================
   Trust bar — full-bleed band, flush to the footer
   ==========================================================================

   Warm neutral band, green only on the icon rings. A green wash across the whole
   strip made the green stop being an accent — it read as a status colour applied
   to a section rather than as a detail. The warm tone still separates the band
   from the page (#F7F3EE against #FAFAF8) and lets the rings carry the colour.

   Breathing room above separates the trust proof from the final content section;
   no bottom margin keeps the band and footer reading as one closing block.
   ========================================================================== */

.petland-trust-band {
	background-color: var(--wp--preset--color--warm);
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 56px !important;
	padding-block: 40px;
}

@media (max-width: 768px) {
	.petland-trust-band {
		margin-top: 40px !important;
	}
}

.petland-trust {
	display: grid;
	gap: 26px 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0 auto;
	max-width: 1180px;
	padding: 0 24px;
}

.petland-trust__item {
	align-items: center;
	display: flex;
	gap: 14px;
	min-width: 0;
}

/* The only green on the band, which is the point. */
.petland-trust__icon {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border: 1px solid #d3ebdd;
	border-radius: 50%;
	color: var(--wp--preset--color--link-green);
	display: inline-flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.petland-trust__icon svg {
	height: 20px;
	width: 20px;
}

.petland-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.petland-trust__title {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.petland-trust__body {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* ==========================================================================
   List view
   ========================================================================== */

@media (min-width: 48em) {
	.petland-feed--list {
		grid-template-columns: 1fr;
	}

	.petland-feed--list .petland-card {
		flex-direction: row;
	}

	.petland-feed--list .petland-card__media {
		aspect-ratio: 1;
		flex: 0 0 200px;
	}

	.petland-feed--list .petland-card__body {
		align-items: flex-start;
		padding: 20px 24px;
	}

	.petland-feed--list .petland-card__cta {
		margin-top: 18px;
		width: auto;
		padding-inline: 24px;
	}
}

/* ==========================================================================
   Responsive
   ==========================================================================

   1200px  fixed four-column grid; below, the count is intrinsic
   1080px  sidebar becomes a sheet, nav collapses to the drawer
   768px   single-column feed territory; header condenses
   ========================================================================== */

@media (max-width: 1200px) {
	.petland-discover__layout {
		gap: 0 32px;
	}

	.petland-discover__sidebar {
		padding-right: 28px;
	}
}

@media (max-width: 1080px) {
	body.petland-filter-open {
		overflow: hidden;
	}

	/* One column: the sidebar is now an overlay, not a track. */
	.petland-discover__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Scoped through .petland-masthead deliberately. core/navigation carries a
	 * generated `.wp-container-core-navigation-is-layout-*` class setting
	 * `display: flex`, and WordPress prints those layout styles after enqueued
	 * theme CSS — so a bare `.petland-nav { display: none }` loses on source
	 * order at equal specificity, and the six-item nav stayed visible on a phone,
	 * overflowing the viewport by ~300px.
	 */
	/*
	 * The wordmark returns to the flow at the SAME breakpoint the links collapse,
	 * not lower down. Splitting the two left the 769-1080px band with a centred
	 * wordmark, no links to balance it, and the action cluster overlapping it by
	 * 562px — the two rules describe one layout change and have to move together.
	 */
	.petland-masthead .petland-logo {
		left: auto;
		position: static;
		top: auto;
		transform: none;
	}

	.petland-masthead__inner > .petland-nav,
	.petland-masthead__inner > .petland-masthead__right {
		max-width: none;
	}

	.petland-masthead .petland-nav {
		display: none;
	}

	/* Addresses go first when space runs out; the phone numbers are the point. */
	.petland-storebar {
		gap: 18px;
	}

	.petland-storebar__address {
		display: none;
	}

	.petland-bar__filters {
		display: inline-flex;
	}

	.petland-find__close {
		display: inline-flex;
	}

	/*
	 * Bottom sheet. Positioned fixed so it never inherits a stacking context from
	 * the grid, and translated rather than toggled to display:none so it can
	 * animate and stay focus-trappable.
	 */
	.petland-discover__sidebar {
		background-color: #fff;
		border-right: 0;
		border-radius: var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0 0;
		bottom: 0;
		box-shadow: 0 -8px 40px rgba(21, 23, 25, 0.18);
		left: 0;
		max-height: 88dvh;
		overflow-y: auto;
		padding: 22px 20px 32px;
		position: fixed;
		right: 0;
		top: auto;
		transform: translateY(101%);
		transition: transform 220ms ease;
		visibility: hidden;
		z-index: 9990;
	}

	body.admin-bar .petland-discover__sidebar {
		max-height: 88dvh;
		top: auto;
	}

	.petland-discover__sidebar.is-open {
		transform: translateY(0);
		visibility: visible;
	}

	/* The sheet is the only mobile scroll container. A second scroll area inside
	 * the breed list made filters feel trapped and difficult to dismiss. */
	.petland-discover__sidebar .petland-filters__list--scroll,
	.petland-discover__sidebar .petland-find__checks--breeds {
		max-height: none;
		overflow: visible;
		scrollbar-gutter: auto;
	}

	.petland-discover__main {
		padding-top: 28px;
	}

	.petland-find__title {
		font-size: 1.55rem;
	}
}

@media (max-width: 768px) {
	.petland-logo img {
		max-width: 101px;
	}

	.petland-masthead {
		min-height: 280px;
	}

	body.post-type-archive-puppy .petland-masthead {
		min-height: 420px;
	}

	.petland-archive-masthead {
		bottom: 26px;
		width: calc(100% - 40px);
	}

	.petland-archive-masthead .petland-hero__title {
		font-size: clamp(2.15rem, 11vw, 2.75rem);
	}

	.petland-archive-masthead .petland-archive__intro-text {
		font-size: 0.875rem;
		line-height: 1.5;
	}

	.petland-discover {
		padding-bottom: 48px;
	}

	.petland-masthead__inner {
		flex-wrap: nowrap !important;
		gap: 8px !important;
		min-height: 72px;
		padding: 0 10px 0 16px;
		width: calc(100% - 24px);
	}

	/*
	 * One row, and it has to be forced.
	 *
	 * The right-hand group was taking the full 340px of inner width and wrapping
	 * onto its own line, which made the pill 123px tall and the whole header 218px
	 * — a quarter of a phone screen before any content. Content-sized and nowrap
	 * keeps it beside the wordmark.
	 */
	.petland-masthead__right {
		flex: 0 0 auto;
		flex-wrap: nowrap !important;
		width: auto;
	}

	/*
	 * Search goes. Every page that has puppies to search already carries its own
	 * search field, so this icon was a second route to the same place, and it is the
	 * one element there is no room for.
	 */
	.petland-actions__btn[aria-label="Search puppies"] {
		display: none;
	}


	/* Both stores remain visible and tappable; the phone detail is in each link's
	 * accessible label while the compact city names preserve the one-row header. */
	.petland-actions__location-phone {
		display: none;
	}

	.petland-actions__locations {
		margin-left: 0;
	}

	.petland-actions__location {
		gap: 5px;
		padding: 7px 8px;
	}

	.petland-actions__location-city {
		font-size: 0.625rem;
	}

	.petland-storebar {
		justify-content: flex-start;
		padding: 8px 16px 7px;
	}

	/*
	 * Stack the stores from here. Side by side they wanted ~208px, which alongside
	 * the 137px logo and the 44px MENU button overflowed a 390px viewport by 41px.
	 * Stacked, each row is `City  number` and the whole bar is ~150px.
	 *
	 * The city label stays: a visitor needs to know which store they are calling,
	 * and half of them want the other one.
	 */
	.petland-storebar {
		flex-direction: column;
		gap: 3px;
	}

	.petland-storebar__item {
		align-items: baseline;
		flex-direction: row;
		gap: 8px;
	}

	.petland-storebar__city {
		font-size: 0.75rem;
	}

	.petland-storebar__phone {
		font-size: 0.8125rem;
	}


	.petland-masthead__right {
		gap: 8px !important;
	}

	/*
	 * MENU becomes icon-only. Clipped rather than display:none so the button
	 * keeps its accessible name — hiding the label outright would leave screen
	 * readers announcing an unlabelled button.
	 */
	.petland-menubtn span {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.petland-menubtn {
		gap: 0 !important;
		min-height: 44px;
		padding: 0 !important;
		width: 44px;
	}

	.petland-discover__head {
		margin-bottom: 24px;
	}

	/*
	 * Narrow screens: the subject sits under the text, so the scrim goes
	 * near-solid and the photo becomes a hint at the bottom edge rather than a
	 * backdrop competing with the H1. Position moves to the bottom so the puppy's
	 * face survives the crop instead of being cut off at the top.
	 */
	.petland-has-hero .petland-discover__head {
		background-image:
			linear-gradient(
				180deg,
				rgba(250, 250, 248, 0.98) 0%,
				rgba(250, 250, 248, 0.95) 58%,
				rgba(250, 250, 248, 0.55) 100%
			),
			var(--petland-hero-image, none);
		background-position: center center, center bottom;
		min-height: 0;
		padding: 26px 22px 30px;
	}

	.petland-hero__title {
		font-size: clamp(2rem, 9vw, 2.75rem);
	}

	.petland-hero__sub {
		font-size: 1.0625rem;
		margin-top: 10px;
	}

	/* Sort and view controls wrap under the search rather than squeezing it. */
	.petland-bar {
		display: grid;
		gap: 10px;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.petland-bar__search {
		grid-column: 1 / -1;
		order: -3;
	}

	.petland-bar__breed {
		align-items: center;
		background-color: #fff;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--md);
		display: flex;
		grid-column: 1;
		margin: 0;
		min-height: 48px;
		min-width: 0;
		order: -2;
		padding-left: 13px;
		position: relative;
	}

	.petland-bar__breedicon {
		color: var(--wp--preset--color--orange);
		display: inline-flex;
		flex: 0 0 auto;
	}

	.petland-bar__breedicon svg {
		height: 17px;
		width: 17px;
	}

	.petland-bar__breed select {
		appearance: none;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--ink);
		font-family: inherit;
		font-size: 0.9375rem;
		font-weight: 600;
		height: 100%;
		min-width: 0;
		outline: 0;
		padding: 0 38px 0 10px;
		width: 100%;
	}

	.petland-bar__filters {
		grid-column: 2;
		min-height: 48px;
		order: -2;
		padding-inline: 14px;
	}

	.petland-bar__sort {
		display: none;
	}

	.petland-bar__sort select {
		min-width: 0;
		width: 100%;
	}

	.petland-bar__views {
		display: none;
	}

	.petland-find__group--sort {
		display: flex;
	}

	.petland-find {
		gap: 16px;
	}

	.petland-feed {
		gap: 18px;
	}

	/* Mobile catalog: two compact puppy cards per row. The list-view toggle still
	 * produces one column. */
	.petland-feed--grid {
		gap: 12px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Editorial value cards need a complete reading line on phones. A single
	 * grid column made them look like incomplete puppy cards and compressed the
	 * body copy; spanning the feed keeps the interruption clear and intentional. */
	.petland-feed--grid .petland-feed__cell--value {
		grid-column: 1 / -1;
	}

	.petland-feed--grid .petland-feed__cell:has(.petland-card--feature) {
		grid-column: 1 / -1;
	}

	.petland-feed--grid .petland-card--feature .petland-card__media {
		aspect-ratio: 16 / 11;
	}

	.petland-feed--grid .petland-card--feature .petland-card__name {
		font-size: 1.35rem;
	}

	.petland-feed--grid .petland-card__body {
		padding: 12px;
	}

	.petland-feed--grid .petland-card__name {
		font-size: 1.1rem;
	}

	.petland-feed--grid .petland-card__meta {
		font-size: 0.75rem;
		line-height: 1.35;
	}

	.petland-feed--grid .petland-card__facts {
		gap: 4px 10px;
		margin-top: 9px;
	}

	.petland-feed--grid .petland-card__facts li {
		font-size: 0.75rem;
		gap: 4px;
	}

	.petland-feed--grid .petland-card__cta,
	.petland-feed--grid .petland-card__notify {
		font-size: 0.8125rem;
		gap: 5px;
		margin-top: 12px;
		min-height: 44px;
		padding-inline: 7px;
		text-align: center;
	}

	.petland-feed--grid .petland-card__cta svg {
		display: none;
	}

	.petland-feed--grid .petland-vcard {
		padding: 18px 15px;
	}

	.petland-feed--grid .petland-vcard__icon {
		height: 36px;
		width: 36px;
	}

	.petland-feed--grid .petland-vcard__topline {
		gap: 8px;
		margin-bottom: 14px;
	}

	.petland-feed--grid .petland-vcard__eyebrow {
		font-size: 0.625rem;
	}

	.petland-feed--grid .petland-vcard__title {
		font-size: clamp(1.2rem, 11cqi, 1.5rem);
	}

	/* Centred stack: with the CTA full-width, left-aligned text looks unbalanced. */
	.petland-special {
		flex-direction: column;
		gap: 20px;
		padding: 34px 24px;
		text-align: center;
	}

	.petland-special__cta {
		justify-content: center;
		margin-left: 0;
		width: 100%;
	}

	.petland-special__title {
		font-size: 1.5rem;
	}

	.petland-special-section {
		padding: 48px 22px 44px;
	}

	.petland-trust {
		gap: 22px 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	body.admin-bar.home .petland-masthead {
		top: 46px;
	}
}

@media (max-width: 30em) {
	.petland-trust {
		grid-template-columns: 1fr;
	}

	.petland-feed--grid .petland-card__name {
		font-size: 1.05rem;
	}
}

/*
 * Phone widths.
 *
 * This block used to wrap the header onto two rows, which was the right call for
 * the old flat masthead: both stores' details sat in the right-hand group, needing
 * ~248px against the ~197px left beside the logo.
 *
 * The pill moved those details out to the band above it, so the group is now just
 * two icons and a phone chip and fits on one row. The old `flex-wrap: wrap
 * !important` and `width: 100%` survived the redesign and kept forcing the wrap
 * anyway, which is what made the pill 119px tall and the header 214px on a 390px
 * screen — a quarter of the viewport before any content.
 *
 * The reasoning that justified wrapping still stands where it applies: the store
 * rows keep their city labels, because a phone number without one does not tell
 * you which store you are calling.
 */
@media (max-width: 600px) {
	.petland-masthead__inner {
		padding-block: 8px;
	}

	.petland-storebar {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px 18px;
	}

	.petland-storebar__item {
		text-align: left;
	}
}

/* ==========================================================================
   Touch targets
   ==========================================================================

   Keyed on pointer capability as well as width: an iPad in landscape is 1024px+
   and entirely thumb-driven, while a narrow desktop window is still a mouse.
   Inline anchors get block padding, which does not change layout height but is
   honoured for hit testing — so the target grows without moving anything.
   ========================================================================== */

@media (hover: none) and (pointer: coarse), (max-width: 1080px) {
	.petland-storebar__phone,
	.petland-storebar__address,
	.petland-find__reset,
	.petland-archive__intro-toggle,
	.petland-contact__dir,
	.petland-contact__tel a,
	.petland-modal__consenttext a,
	.petland-bp__availall,
	/*
	 * Unclassed anchors, scoped through their container. These are inline links in
	 * breadcrumbs, card titles and store cards; block padding widens the hit area
	 * without changing layout height, because inline boxes ignore it for flow.
	 */
	.petland-bp__crumbs a,
	.petland-card__name a,
	.petland-bp__origin a,
	.petland-bp__store a,
	.petland-bp__financing a,
	.petland-breedcard__name a,
	.petland-breedpage__crumbs a,
	/* Home page: these measured 23px and 20px tall, under the 24px minimum. */
	.petland-hlink,
	/* Inline links inside the consent wording — 16px tall on their own. */
	.petland-fprompt__consent a,
	.petland-hlist__title a,
	.petland-hlead__title a,
	.petland-hlead__more {
		padding-block: 7px;
	}

}

/* ==========================================================================
   Special-order modal
   ==========================================================================

   Shared by the floating CTA and the empty state, so it is rendered once per page
   and opened by any trigger.

   dvh, not vh: on mobile Safari and Chrome `100vh` is the viewport measured with
   the URL bar retracted, so a dialog sized against it extends under the browser
   chrome and puts its own submit button off-screen. vh stays first as the fallback
   for older browsers.
   ========================================================================== */

.petland-modal {
	inset: 0;
	position: fixed;
	z-index: 9995;
}

.petland-modal[hidden] {
	display: none;
}

.petland-modal__backdrop {
	backdrop-filter: blur(2px);
	background-color: rgba(21, 23, 25, 0.5);
	inset: 0;
	position: absolute;
}

.petland-modal__dialog {
	background-color: #fff;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--modal);
	box-sizing: border-box;
	left: 50%;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	max-width: 620px;
	overflow-y: auto;
	padding: 40px 42px 34px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
}

/*
 * Keep desktop dialogs visibly detached from the viewport edges. The dialog
 * scrolls internally when its content is taller than the available space, so
 * the frame remains centred and the close/submit controls stay reachable.
 */
@media (min-width: 601px) {
	.petland-modal__dialog {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
	}
}

.petland-modal__close {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 40px;
}

.petland-modal__close:hover {
	background-color: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
}

.petland-modal__close svg {
	height: 18px;
	width: 18px;
}

.petland-modal__head {
	margin-bottom: 26px;
	padding-right: 34px;
}

.petland-modal__icon {
	align-items: center;
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	height: 52px;
	justify-content: center;
	margin-bottom: 16px;
	width: 52px;
}

.petland-modal__icon svg {
	height: 24px;
	width: 24px;
}

.petland-modal__title {
	color: var(--wp--preset--color--ink);
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}

.petland-modal__lede {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 10px 0 0;
}

/* Form */

.petland-modal__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.petland-modal__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.petland-modal__field--wide {
	grid-column: 1 / -1;
}

.petland-modal__field label {
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

.petland-modal__optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/*
 * border-box explicitly. These are inside .petland-discover so the primitive reset
 * already covers them, but the modal is the component where content-box previously
 * caused fields to overrun their grid cells — worth being unambiguous.
 */
.petland-modal__field input,
.petland-modal__field textarea,
.petland-modal__selwrap select {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	/* 16px minimum: iOS zooms the page when a focused input is smaller. */
	font-size: 1rem;
	padding: 12px 14px;
	width: 100%;
}

.petland-modal__field input {
	min-height: 48px;
}

.petland-modal__field textarea {
	line-height: 1.5;
	resize: vertical;
}

.petland-modal__field input:focus,
.petland-modal__field textarea:focus,
.petland-modal__selwrap select:focus {
	border-color: var(--wp--preset--color--ink);
	outline: 0;
}

.petland-modal__field input.has-error,
.petland-modal__field textarea.has-error {
	border-color: var(--wp--preset--color--orange);
}

.petland-modal__selwrap {
	position: relative;
}

.petland-modal__selwrap select {
	appearance: none;
	cursor: pointer;
	min-height: 48px;
	padding-right: 40px;
}

.petland-modal__selchev {
	color: var(--wp--preset--color--muted);
	pointer-events: none;
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
}

.petland-modal__selchev svg {
	height: 16px;
	width: 16px;
}

.petland-modal__error {
	color: var(--wp--preset--color--orange);
	font-size: 0.8125rem;
	margin: 0;
}

.petland-modal__error[hidden] {
	display: none;
}

.petland-modal__consent {
	margin-top: 18px;
}

.petland-modal__consent .petland-check {
	align-items: flex-start;
	gap: 10px;
}

.petland-modal__consenttext {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

.petland-modal__consenttext a {
	color: var(--wp--preset--color--orange);
}

.petland-modal__submit {
	align-items: center;
	appearance: none;
	background-color: var(--wp--preset--color--orange);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	gap: 9px;
	justify-content: center;
	margin-top: 22px;
	min-height: 54px;
	transition: background-color var(--wp--custom--transition);
	width: 100%;
}

.petland-modal__submit:hover {
	background-color: var(--wp--preset--color--orange-dark);
}

.petland-modal__submit:disabled {
	cursor: default;
	opacity: 0.6;
}

.petland-modal__submit svg {
	height: 17px;
	width: 17px;
}

.petland-modal__status {
	font-size: 0.875rem;
	margin: 12px 0 0;
	text-align: center;
}

.petland-modal__status.is-error {
	color: var(--wp--preset--color--orange);
}

/* Success state */

.petland-modal__done {
	padding: 12px 0 8px;
	text-align: center;
}

.petland-modal__done[hidden] {
	display: none;
}

.petland-modal__doneicon {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: 50%;
	color: var(--wp--preset--color--link-green);
	display: inline-flex;
	height: 60px;
	justify-content: center;
	margin-bottom: 20px;
	width: 60px;
}

.petland-modal__doneicon svg {
	height: 28px;
	width: 28px;
}

.petland-modal__donetitle {
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0;
}

.petland-modal__donebody {
	color: var(--wp--preset--color--muted);
	margin: 10px auto 24px;
	max-width: 28rem;
}

@media (max-width: 600px) {
	.petland-modal__dialog {
		padding: 30px 22px 26px;
	}

	.petland-modal__grid {
		grid-template-columns: 1fr;
	}

	.petland-modal__title {
		font-size: 1.4375rem;
	}
}

/* Backdrop for the mobile filter sheet. */
.petland-sheet-backdrop {
	background-color: rgba(21, 23, 25, 0.45);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 200ms ease;
	z-index: 9980;
}

.petland-sheet-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ==========================================================================
   Meet / reserve flow
   ==========================================================================

   Desktop: a centred dialog, 560px. Mobile: a full-screen takeover, because a
   small centred dialog on a phone reads as an interruption while a takeover reads
   as a flow (brief §12).

   One decision per screen is the governing rule (brief §75). That is why there is
   no visible step counter — just a thin progress line, so a nine-state machine
   still feels short.
   ========================================================================== */

.petland-meet {
	inset: 0;
	position: fixed;
	z-index: 9996;
}

.petland-meet[hidden] {
	display: none;
}

.petland-meet__backdrop {
	backdrop-filter: blur(3px);
	background-color: rgba(21, 23, 25, 0.55);
	inset: 0;
	position: absolute;
}

.petland-meet__dialog {
	background-color: #fff;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--modal);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	left: 50%;
	/* dvh: 100vh on mobile is measured with the URL bar retracted, which pushes a
	   dialog's own submit button off-screen. */
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	max-width: 920px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
}

@media (min-width: 601px) {
	.petland-meet__dialog {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
	}
}

/* Progress */

.petland-meet__progress {
	background-color: var(--wp--preset--color--border);
	flex: 0 0 auto;
	height: 3px;
	overflow: hidden;
}

.petland-meet__progressbar {
	background-color: var(--wp--preset--color--orange);
	display: block;
	height: 100%;
	transition: width 260ms ease;
	width: 0;
}

/* Header: back, persistent puppy context, close */

.petland-meet__head {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	min-height: 52px;
	padding: 8px 14px;
}

.petland-meet__back,
.petland-meet__close {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 0.875rem;
	gap: 4px;
	justify-content: center;
	min-height: 40px;
	padding: 0 8px;
}

.petland-meet__back[hidden] {
	display: none;
}

.petland-meet__back:hover,
.petland-meet__close:hover {
	background-color: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
}

/* The chevron points left for "back". */
.petland-meet__back svg {
	height: 16px;
	transform: rotate(90deg);
	width: 16px;
}

.petland-meet__close {
	margin-left: auto;
	min-width: 40px;
	padding: 0;
}

.petland-meet__close svg {
	height: 18px;
	width: 18px;
}

/*
 * Persistent context. This is the difference between "arranging to meet Maddie"
 * and "filling in an appointment form", so it stays on screen for every step.
 */
.petland-meet__content {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
}

.petland-meet__puppy {
	background-color: var(--wp--preset--color--warm);
	border-right: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 28px 24px;
}

.petland-meet__thumb {
	background-color: var(--wp--preset--color--warm);
	background-position: center;
	background-size: cover;
	border-radius: var(--wp--custom--radius--lg);
	flex: 0 0 auto;
	height: 210px;
	width: 100%;
}

.petland-meet__whotext {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
	margin-top: 18px;
}

.petland-meet__whoname {
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.petland-meet__whobreed {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.petland-meet__puppyfacts {
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 9px;
	margin: 18px 0 0;
	padding-top: 16px;
}

.petland-meet__puppyfacts div {
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.petland-meet__puppyfacts div[hidden] {
	display: none;
}

.petland-meet__puppyfacts dt,
.petland-meet__puppyfacts dd {
	font-size: 0.75rem;
	line-height: 1.35;
	margin: 0;
}

.petland-meet__puppyfacts dt {
	color: var(--wp--preset--color--muted);
}

.petland-meet__puppyfacts dd {
	color: var(--wp--preset--color--ink);
	font-weight: 650;
	text-align: right;
}

/* Body */

.petland-meet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 32px 36px 36px;
}

.petland-meet__body > .petland-meet__back {
	margin-top: 20px;
	padding-left: 0;
}

.petland-meet__eyebrow {
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.6875rem;
	font-weight: 750;
	letter-spacing: 0.12em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.petland-meet__free-note {
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--link-green);
	font-size: 0.8125rem;
	font-weight: 650;
	margin: 16px 0 0;
	padding: 10px 12px;
}

.petland-meet__title {
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.18;
	margin: 0;
	text-wrap: balance;
}

/* The heading receives focus on each step, so it must not look like a control. */
.petland-meet__title:focus {
	outline: 0;
}

.petland-meet__title:focus-visible {
	outline: 0;
}

.petland-meet__lede {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 10px 0 0;
}

.petland-meet__loading {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 24px 0 0;
}

.petland-meet__error {
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.875rem;
	margin: 18px 0 0;
	padding: 12px 14px;
}

/* Choice cards */

.petland-meet__choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.petland-meet__choice {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	cursor: pointer;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 24px;
	align-items: center;
	column-gap: 14px;
	font-family: inherit;
	min-height: 80px;
	padding: 13px 16px;
	position: relative;
	text-align: left;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

/*
 * Hover guarded for touch. On a touch device :hover latches after a tap, so a
 * choice the customer tapped and came back from would keep its highlight and read
 * as selected when nothing is. `hover: hover` excludes those devices.
 */
@media (hover: hover) {
	.petland-meet__choice:hover {
		border-color: var(--wp--preset--color--orange);
		box-shadow: 0 8px 24px rgba(23, 23, 23, 0.08);
		transform: translateY(-1px);
	}

	.petland-meet__choice:hover .petland-meet__choicearrow {
		background-color: var(--wp--preset--color--orange);
		color: #fff;
	}
}

/*
 * Text-only choices. The base grid reserves a 48px icon column, so a choice rendered
 * without one had its label squeezed into that column and broke to one word per line.
 */
.petland-meet__choice--text {
	grid-template-columns: minmax(0, 1fr) 24px;
}

.petland-meet__choice--primary {
	border-color: #efb79f;
	background-color: #fff8f3;
}

.petland-meet__choice--reservation {
	background-color: #fffaf7;
	border-color: #efc9b8;
}

.petland-meet__choicebadge {
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--xs);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 7px;
	text-transform: uppercase;
}

.petland-meet__choicebadge--outline {
	background-color: #fff;
	border: 1px solid #e5a98e;
	color: var(--wp--preset--color--orange-dark);
}

.petland-meet__choicetitle {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.petland-meet__choicebody {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.petland-meet__choicecopy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.petland-meet__choiceheadline {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.petland-meet__choiceicon,
.petland-meet__choicearrow {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

.petland-meet__choiceicon {
	background-color: var(--wp--preset--color--surface);
	border-radius: 50%;
	color: var(--wp--preset--color--slate);
	height: 46px;
	width: 46px;
}

.petland-meet__choice--primary .petland-meet__choiceicon {
	background-color: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--orange-dark);
}

.petland-meet__choice--reservation .petland-meet__choiceicon {
	background-color: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--orange-dark);
}

.petland-meet__choiceicon svg {
	fill: none;
	height: 22px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
	width: 22px;
}

.petland-meet__choicearrow {
	border-radius: 50%;
	color: var(--wp--preset--color--slate);
	height: 24px;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
	width: 24px;
}

.petland-meet__choicearrow svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 18px;
}

/* Time slots */

.petland-meet__slots {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	margin-top: 22px;
}

/* Day choice is part of scheduling, not a competing meeting method. */
.petland-meet__days {
	background-color: var(--wp--preset--color--warm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 22px;
	padding: 4px;
}

.petland-meet__day {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: calc(var(--wp--custom--radius--md) - 4px);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: 650;
	gap: 10px;
	justify-content: center;
	min-height: 46px;
}

.petland-meet__dayname {
	line-height: 1;
}

.petland-meet__dayprice {
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 750;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 6px 8px;
}

.petland-meet__dayprice--free {
	background: #eaf7f0;
	color: var(--wp--preset--color--green);
}

.petland-meet__dayprice--deposit {
	background: var(--wp--preset--color--orange-soft);
	color: var(--wp--preset--color--orange-dark);
}

.petland-meet__day.is-selected {
	background: #fff;
	box-shadow: 0 2px 8px rgba(21, 23, 25, 0.08);
	color: var(--wp--preset--color--ink);
}

.petland-meet__deposit-note {
	align-items: flex-start;
	background: #fff8f3;
	border-left: 3px solid var(--wp--preset--color--orange);
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 16px;
	padding: 12px 14px;
}

.petland-meet__deposit-note strong {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
}

.petland-meet__deposit-note span {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

.petland-meet__slot {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	min-height: 52px;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.petland-meet__slottime,
.petland-meet__slotstatus {
	display: block;
}

.petland-meet__slotstatus {
	font-size: 0.6875rem;
	font-weight: 600;
	margin-top: 2px;
}

.petland-meet__slot.is-booked,
.petland-meet__slot.is-booked:hover {
	background-color: var(--wp--preset--color--warm);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
	opacity: 0.72;
}

@media (hover: hover) {
	.petland-meet__slot:hover {
		border-color: var(--wp--preset--color--orange);
	}
}

/* Selected: orange border on a light orange field, dark text (brief §17). */
.petland-meet__slot.is-selected {
	background-color: var(--wp--preset--color--orange-soft);
	border-color: var(--wp--preset--color--orange);
}

.petland-meet__alt {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 24px;
	padding-top: 18px;
}

.petland-meet__altlabel {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0;
}

.petland-meet__altlink {
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--orange);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 4px;
	padding: 4px 0;
	text-align: left;
}

.petland-meet__altlink:hover {
	text-decoration: underline;
}

/* Forms */

.petland-meet__form {
	margin-top: 22px;
}

.petland-meet__contact-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.petland-meet__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.petland-meet__field label {
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 600;
}

.petland-meet__field input {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	/* 16px floor: below this iOS zooms the page on focus. */
	font-size: 1.0625rem;
	min-height: 54px;
	padding: 12px 16px;
	width: 100%;
}

.petland-meet__field input:focus {
	border-color: var(--wp--preset--color--ink);
	outline: 0;
}

.petland-meet__fielderror {
	color: var(--wp--preset--color--orange);
	font-size: 0.8125rem;
	margin: 0;
}

.petland-meet__fielderror[hidden] {
	display: none;
}

.petland-meet__communication-disclaimer {
	align-items: flex-start;
	background: var(--wp--preset--color--warm-white, #f8f5f1);
	border: 1px solid var(--wp--preset--color--border, #dedbd6);
	border-radius: 14px;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: flex;
	font-size: 0.8125rem;
	gap: 12px;
	line-height: 1.5;
	margin-top: 16px;
	padding: 14px 16px;
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.petland-meet__communication-disclaimer:hover {
	background: #fffaf6;
	border-color: color-mix(in srgb, var(--wp--preset--color--orange) 42%, #dedbd6);
}

.petland-meet__communication-disclaimer:focus-within {
	border-color: var(--wp--preset--color--orange);
	box-shadow: 0 0 0 3px rgb(216 67 21 / 14%);
}

.petland-meet__communication-disclaimer input {
	accent-color: var(--wp--preset--color--orange);
	cursor: pointer;
	flex: 0 0 auto;
	height: 22px;
	margin: 1px 0 0;
	width: 22px;
}

.petland-meet__communication-copy {
	display: grid;
	flex: 1 1 auto;
	gap: 4px;
}

.petland-meet__communication-title {
	color: var(--wp--preset--color--foreground);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.petland-meet__communication-text {
	display: block;
}

.petland-meet__communication-disclaimer p {
	margin: 0;
}

.petland-meet__communication-disclaimer a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 640px) {
	.petland-meet__contact-grid {
		grid-template-columns: 1fr;
	}
}

/* Primary action */

.petland-meet__submit {
	align-items: center;
	appearance: none;
	background-color: var(--wp--preset--color--orange);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	justify-content: center;
	margin-top: 22px;
	min-height: 56px;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
	width: 100%;
}

.petland-meet__submit:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-meet__submit.is-busy,
.petland-meet__submit:disabled {
	cursor: default;
	opacity: 0.65;
}

.petland-meet__skip {
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 0.875rem;
	margin: 14px auto 0;
	padding: 8px 12px;
}

.petland-meet__skip:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

/* Confirmation */

.petland-meet__success {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: 50%;
	color: var(--wp--preset--color--link-green);
	display: inline-flex;
	height: 56px;
	justify-content: center;
	margin-bottom: 18px;
	width: 56px;
}

.petland-meet__success svg {
	height: 26px;
	width: 26px;
}

.petland-meet__appt {
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--lg);
	margin-top: 20px;
	padding: 20px 22px;
}

.petland-meet__appt p {
	margin: 0;
}

.petland-meet__apptwhen {
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.petland-meet__apptstore {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 6px !important;
}

.petland-meet__apptaddr {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin-top: 2px !important;
}

.petland-meet__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.petland-meet__action {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 44px;
	padding: 0 16px;
	text-decoration: none;
}

.petland-meet__action:hover {
	background-color: var(--wp--preset--color--warm);
	text-decoration: none;
}

.petland-meet__finance-nudge {
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 4px;
	margin-top: 22px;
	padding-top: 18px;
}

.petland-meet__finance-nudge p {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0;
}

.petland-meet__finance-nudge a {
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.875rem;
	font-weight: 650;
	justify-self: start;
}

.petland-meet__finance-nudge small {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
}

/* Hold / reservation */

.petland-meet__hold {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 16px 40px rgba(26, 31, 35, 0.07);
	margin-top: 22px;
	padding: 22px;
	position: relative;
}

.petland-meet__hold p {
	margin: 0;
}

.petland-meet__holdbadge {
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--xs);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 7px;
	text-transform: uppercase;
}

.petland-meet__holdlabel {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 12px !important;
}

.petland-meet__holdprice {
	align-items: baseline;
	display: flex;
	gap: 10px;
	margin-top: 4px !important;
}

.petland-meet__holdwas {
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
}

.petland-meet__holdnow {
	color: var(--wp--preset--color--ink);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.petland-meet__holdbody {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.5;
	margin-top: 8px !important;
}

.petland-meet__holdcredit {
	background: #f2faf6;
	border-radius: var(--wp--custom--radius--sm);
	color: #16784b;
	font-size: 0.8125rem;
	font-weight: 650;
	line-height: 1.4;
	margin-top: 14px !important;
	padding: 10px 12px;
}

/* Checkout summary */

.petland-meet__summary {
	display: grid;
	grid-template-columns: 1fr auto;
	margin: 22px 0 0;
	row-gap: 10px;
}

.petland-meet__summary dt {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

.petland-meet__summary dd {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	margin: 0;
	text-align: right;
}

.petland-meet__summary dt.is-total,
.petland-meet__summary dd.is-total {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
	padding-top: 10px;
}

.petland-meet__notice {
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--sm);
	color: #14603a;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 18px 0 0;
	padding: 12px 14px;
}

/* Non-refundable disclosure sits directly with the price it applies to. */
.petland-meet__legal {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 14px 0 0;
}

.petland-meet__legal--availability {
	align-items: flex-start;
	display: flex;
	gap: 7px;
}

.petland-meet__legal--availability::before {
	background-color: var(--wp--preset--color--muted);
	border-radius: 50%;
	content: "";
	flex: 0 0 5px;
	height: 5px;
	margin-top: 0.45em;
	width: 5px;
}

/* Qualification pickers */

.petland-meet__pick {
	border: 0;
	margin: 22px 0 0;
	padding: 0;
}

.petland-meet__pick legend {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0 0 10px;
}

.petland-meet__pickrow {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.petland-meet__pickitem {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	min-height: 52px;
	padding: 10px 16px;
	text-align: left;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
	width: 100%;
}

@media (hover: hover) {
	.petland-meet__pickitem:hover {
		border-color: var(--wp--preset--color--orange);
	}
}

.petland-meet__pickitem.is-selected {
	background-color: var(--wp--preset--color--orange-soft);
	border-color: var(--wp--preset--color--orange);
	font-weight: 600;
	transform: scale(0.985);
}

.petland-meet__pickrow.is-advancing .petland-meet__pickitem:not(.is-selected) {
	opacity: 0.55;
}

@media (max-width: 600px) {
	.petland-meet__pickrow {
		grid-template-columns: 1fr;
	}
}

.petland-meet a:focus-visible,
.petland-meet button:focus-visible,
.petland-meet input:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/*
 * Mobile: full-screen takeover, not a shrunken dialog (brief §12). Square corners
 * and full bleed so it reads as a native flow rather than a card floating over the
 * page.
 */
@media (max-width: 600px) {
	.petland-meet__dialog {
		border-radius: 0;
		height: 100dvh;
		left: 0;
		max-height: none;
		max-width: none;
		top: 0;
		transform: none;
		width: 100%;
	}

	.petland-meet__backdrop {
		display: none;
	}

	.petland-meet__body {
		overflow: visible;
		padding: 22px 20px 32px;
	}

	.petland-meet__head {
		padding: 12px 14px;
	}

	.petland-meet__content {
		display: block;
		overflow-y: auto;
	}

	.petland-meet__puppy {
		align-items: center;
		border-bottom: 1px solid var(--wp--preset--color--border);
		border-right: 0;
		display: grid;
		gap: 0 14px;
		grid-template-columns: 64px minmax(0, 1fr);
		padding: 14px 20px;
	}

	.petland-meet__thumb {
		border-radius: var(--wp--custom--radius--sm);
		grid-row: 1 / span 2;
		height: 64px;
		width: 64px;
	}

	.petland-meet__whotext {
		margin-top: 0;
	}

	.petland-meet__whoname {
		font-size: 1rem;
	}

	.petland-meet__puppyfacts {
		border: 0;
		display: flex;
		gap: 6px 12px;
		grid-column: 2;
		margin: 4px 0 0;
		padding: 0;
	}

	.petland-meet__puppyfacts div {
		display: block;
	}

	.petland-meet__puppyfacts dt {
		display: none;
	}

	.petland-meet__puppyfacts dd {
		color: var(--wp--preset--color--muted);
		font-size: 0.6875rem;
		font-weight: 500;
	}

	.petland-meet__puppyfacts [data-petland-meet-fact="ref"] {
		display: none;
	}

	.petland-meet__title {
		font-size: 1.375rem;
	}

	.petland-meet__slots {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}

	.petland-meet__choice {
		grid-template-columns: 44px minmax(0, 1fr) 22px;
		column-gap: 12px;
		min-height: 76px;
		padding: 12px 14px;
	}

	.petland-meet__choice--text {
		grid-template-columns: minmax(0, 1fr) 22px;
	}

	.petland-meet__choiceicon {
		height: 42px;
		width: 42px;
	}
}

/* ==========================================================================
   Breed library — index and single breed page
   ==========================================================================

   Editorial pages, independent of stock. A breed with no puppies on the floor
   still gets a card and a page: those pages are the organic entry point for
   "<breed> puppies cleveland", and hiding one because a litter sold would discard
   the ranking that brought the customer.
   ========================================================================== */

.petland-breedmain {
	background-color: var(--wp--preset--color--page);
	padding-block: 0 0;
}

/* Index — values measured from the reference at 1476px, see tools/ */

.petland-breedsindex {
	padding-block: 52px 8px;
	text-align: center;
}

/* 40px/700 centred, matching the reference. */
.petland-breedsindex__title {
	font-size: 2.5rem;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0 auto 10px;
	max-width: none;
}

.petland-breedsindex .wp-block-post-content {
	color: var(--wp--preset--color--muted);
	margin: 0 auto 32px;
	max-width: 44rem;
}

/* Search: 556px pill, 2px border, soft shadow, icon outside on the left. */

.petland-breeds__searchwrap {
	align-items: center;
	display: flex;
	gap: 14px;
	justify-content: center;
	margin: 0 auto 22px;
	max-width: 660px;
}

.petland-breeds__searchicon {
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	flex: 0 0 auto;
}

.petland-breeds__searchicon svg {
	height: 24px;
	width: 24px;
}

.petland-breeds__search {
	background-color: #fff;
	border: 2px solid #d8d5d0;
	border-radius: 50px;
	box-shadow: 0 4px 12px rgba(21, 23, 25, 0.06);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 1.125rem;
	max-width: 556px;
	min-height: 65px;
	padding: 16px 24px;
	width: 100%;
}

.petland-breeds__search:focus,
.petland-breeds__search:focus-visible {
	border-color: rgba(213, 65, 20, 0.52);
	box-shadow: 0 0 0 3px rgba(213, 65, 20, 0.1);
	outline: 0;
}

.petland-breeds__search::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Alphabet index: compact enough for a 100-breed library, but every available
 * letter remains a direct, toggleable touch target. */

.petland-breeds__alphabet {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0 auto 26px;
	max-width: 62rem;
}

.petland-breeds__letter {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	height: 36px;
	min-width: 36px;
	padding: 0 9px;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

@media (hover: hover) {
	.petland-breeds__letter:hover:not(:disabled) {
		border-color: var(--wp--preset--color--orange);
		color: var(--wp--preset--color--orange);
	}
}

.petland-breeds__letter.is-active {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-breeds__letter:disabled {
	background: var(--wp--preset--color--warm);
	color: #aaa6a0;
	cursor: default;
	opacity: 0.45;
}

/* Sort strip */

.petland-breeds__toolbar {
	align-items: center;
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: space-between;
	margin-bottom: 26px;
	padding: 16px;
}

.petland-breeds__browse-label {
	color: var(--wp--preset--color--ink);
	font-size: 0.95rem;
	font-weight: 650;
	margin: 0;
}

.petland-breeds__sort {
	align-items: center;
	display: flex;
	gap: 10px;
}

.petland-breeds__sort label {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.petland-breeds__sort select {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	/* 16px floor so iOS does not zoom the page on focus. */
	font-size: 1rem;
	min-height: 40px;
	padding: 6px 10px;
}

.petland-breeds__count {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	margin: 0 0 26px;
	text-align: center;
}

.petland-breeds__count strong {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.petland-breeds__grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.petland-breeds__cell {
	display: flex;
	margin: 0;
}

.petland-breeds__cell[hidden] {
	display: none;
}

.petland-breeds__empty {
	color: var(--wp--preset--color--muted);
	margin: 40px 0;
	text-align: center;
}

.petland-breeds__empty[hidden] {
	display: none;
}

/* Card: 4:3 media, 18px/600 centred name, one action. */

.petland-breedcard {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-align: center;
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
	width: 100%;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.petland-breedcard:hover,
	.petland-breedcard:focus-within {
		border-color: #d8d5d0;
		transform: translateY(-2px);
	}
}

.petland-breedcard__media {
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--warm);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.petland-breedcard__img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.petland-breedcard__noimg {
	align-items: center;
	color: #cfccc6;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.petland-breedcard__noimg svg {
	height: 38px;
	width: 38px;
}

.petland-breedcard__body {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 172px;
	padding: 18px 16px 20px;
}

.petland-breedcard__name {
	display: flex;
	font-size: 1.125rem;
	font-weight: 600;
	justify-content: center;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0;
	min-height: 2.4em;
	width: 100%;
}

.petland-breedcard__name a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-breedcard__name a:hover {
	color: var(--wp--preset--color--orange);
}

.petland-breedcard__tags {
	align-content: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 10px 0 0;
	min-height: 26px;
	width: 100%;
}

.petland-breedcard__tags.is-empty {
	visibility: hidden;
}

.petland-breedcard__tag {
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--xs);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 4px 8px;
}

.petland-breedcard__tag--hypo {
	background-color: var(--wp--preset--color--value-green);
	color: var(--wp--preset--color--link-green);
}

/*
 * One action per card. Orange is primary for a breed with puppies on the floor;
 * slate is secondary for notification sign-ups. The transparent treatment is
 * retained as a tertiary option for genuinely lower-priority actions.
 */
.petland-breedcard__cta {
	align-items: center;
	appearance: none;
	background-color: var(--wp--preset--color--orange);
	border: 1px solid var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	margin-top: auto;
	min-height: 42px;
	padding: 0 20px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
}

.petland-breedcard__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
	border-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-breedcard__cta--secondary {
	background-color: var(--wp--preset--color--slate);
	border-color: var(--wp--preset--color--slate);
	color: #fff;
}

.petland-breedcard__cta--secondary:hover {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}

.petland-breedcard__cta--tertiary,
.petland-breedcard__cta--ghost {
	background-color: transparent;
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.petland-breedcard__cta--tertiary:hover,
.petland-breedcard__cta--ghost:hover {
	background-color: var(--wp--preset--color--warm);
	border-color: #d8d5d0;
	color: var(--wp--preset--color--ink);
}

/* Single breed page styles live in the Breed page section below. */

@media (max-width: 768px) {
	.petland-breedsindex {
		padding-block: 32px 4px;
	}

	.petland-breeds__grid {
		gap: 18px;
	}

	.petland-breedpage__sections {
		gap: 32px;
		margin-top: 40px;
	}

	.petland-breedpage__stock {
		margin-top: 38px;
	}
}

/* ==========================================================================
   Breed page
   ==========================================================================

   Three audiences, one page (see Petland_Breed_Pages::single): a local searcher,
   an answer engine, and someone still deciding. The section order follows that —
   location in the H1, puppies before prose, FAQs as the centrepiece.
   ========================================================================== */

.petland-bp {
	padding-block: 0 0;
}

/* Hero: an editorial split card. The shared photo masthead is suppressed on
 * breed guides, so this is the single clear page introduction. */

.petland-bp__hero {
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--card);
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	margin-top: 28px;
	overflow: hidden;
}

.petland-bp__herotext {
	padding: 44px 8px 44px 44px;
}

.petland-bp__crumbs {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.875rem;
	gap: 8px;
	margin-bottom: 16px;
}

.petland-bp__crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.petland-bp__crumbs a:hover {
	color: var(--wp--preset--color--orange);
}

/*
 * Two lines: breed in ink, place in orange. The place is part of the H1 rather
 * than a subheading so the location is inside the page's primary heading.
 */
.petland-bp__title {
	display: flex;
	flex-direction: column;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.04;
	margin: 0;
}

.petland-bp__titlebreed {
	color: var(--wp--preset--color--ink);
}

.petland-bp__titleplace {
	color: var(--wp--preset--color--orange);
}

.petland-bp__lede {
	color: var(--wp--preset--color--muted);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 18px 0 0;
	max-width: 30rem;
}

.petland-bp__heroactions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.petland-bp__btn {
	align-items: center;
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	min-height: 50px;
	padding: 0 22px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.petland-bp__btn svg {
	height: 16px;
	width: 16px;
}

.petland-bp__btn--primary {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-bp__btn--primary:hover {
	background-color: var(--wp--preset--color--orange-dark);
	border-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-bp__btn--ghost {
	background-color: #fff;
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.petland-bp__btn--ghost:hover {
	border-color: #d8d5d0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-bp__heromedia {
	align-self: stretch;
	min-height: 340px;
	position: relative;
}

.petland-bp__heroimg {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center;
	position: absolute;
	width: 100%;
}

.petland-bp__heronoimg {
	align-items: center;
	color: #d8cec4;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.petland-bp__heronoimg svg {
	height: 72px;
	width: 72px;
}

/* Stat strip */

.petland-bp__stats {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 24px 0 0;
	padding: 22px 8px;
}

.petland-bp__stat {
	align-items: center;
	display: flex;
	gap: 14px;
	padding-inline: 20px;
	position: relative;
}

/* Hairline between stats only, so the row has no dangling rule at either end. */
.petland-bp__stat + .petland-bp__stat::before {
	background-color: var(--wp--preset--color--border);
	content: "";
	height: 38px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

.petland-bp__staticon {
	align-items: center;
	border: 1px solid #f3ddd0;
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	flex: 0 0 auto;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.petland-bp__staticon svg {
	height: 20px;
	width: 20px;
}

.petland-bp__stat dt {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.petland-bp__stat dd {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 600;
	margin: 3px 0 0;
}

.petland-bp__statnote {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
}

/* Sections */

.petland-bp__section {
	margin-top: 72px;
}

.petland-bp__h2 {
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 0;
}

.petland-bp__sectionlede {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.6;
	margin: 10px 0 0;
	max-width: 46rem;
}

.petland-bp__eyebrow {
	color: var(--wp--preset--color--orange);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

/* Available puppies */

.petland-bp__availhead {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin-bottom: 24px;
}

.petland-bp__availall {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 6px;
	text-decoration: none;
	white-space: nowrap;
}

.petland-bp__availall:hover {
	text-decoration: underline;
}

.petland-bp__availall svg {
	height: 15px;
	width: 15px;
}

.petland-bp__puppies {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 320px));
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-bp__puppies > li {
	display: flex;
	min-width: 0;
}

/*
 * The breed page renders the SAME .petland-card as the Available Puppies grid
 * (Petland_Inventory::puppy_card). The ~40 .petland-bp__mini* rules that used to
 * live here were a second, visually divergent puppy card — different photo ratio,
 * different type scale, a text link instead of the primary button. One card
 * component, one set of rules; the card only has to stretch to the cell.
 */
.petland-bp__puppies > li > .petland-card {
	width: 100%;
}

.petland-bp__listtile {
	background-color: var(--wp--preset--color--orange-soft);
	border: 1px solid #f6dcca;
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.petland-bp__listicon {
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	margin-bottom: 12px;
}

.petland-bp__listicon svg {
	height: 22px;
	width: 22px;
}

.petland-bp__listtile h3 {
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}

.petland-bp__listtile p {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.55;
	margin: 8px 0 0;
}

.petland-bp__listtile .petland-bp__btn {
	font-size: 0.875rem;
	margin-top: auto;
	min-height: 44px;
	padding: 0 16px;
	width: 100%;
}

/* No-stock panel */

.petland-bp__none {
	background-color: var(--wp--preset--color--orange-soft);
	border: 1px solid #f6dcca;
	border-radius: var(--wp--custom--radius--xl);
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	padding: 38px 36px;
}

.petland-bp__noneicon {
	align-items: center;
	background-color: #fff;
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	height: 46px;
	justify-content: center;
	margin-bottom: 16px;
	width: 46px;
}

.petland-bp__noneicon svg {
	height: 22px;
	width: 22px;
}

.petland-bp__nonemain > p {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
	margin: 12px 0 0;
	max-width: 26rem;
}

.petland-bp__nonelist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 20px 0 24px;
	padding: 0;
}

.petland-bp__nonelist li {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 0.9375rem;
	gap: 9px;
}

.petland-bp__nonelist svg {
	color: var(--wp--preset--color--link-green);
	flex: 0 0 auto;
	height: 16px;
	width: 16px;
}

.petland-bp__nonewhy {
	background-color: #fff;
	border-radius: var(--wp--custom--radius--lg);
	padding: 26px 24px;
}

.petland-bp__nonewhy h3 {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

.petland-bp__nonewhy ul {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-bp__nonewhy li {
	display: flex;
	gap: 12px;
}

.petland-bp__nonewhyicon {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--link-green);
	display: inline-flex;
	flex: 0 0 auto;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.petland-bp__nonewhyicon svg {
	height: 17px;
	width: 17px;
}

.petland-bp__nonewhy li strong {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 0.9375rem;
}

.petland-bp__nonewhy li span:not(.petland-bp__nonewhyicon) {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.petland-bp__nonenote {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.55;
	margin: 20px 0 0;
	padding-top: 16px;
}

/* Fit / not-fit */

.petland-bp__fitsection {
	background-color: var(--wp--preset--color--value-green);
	border: 1px solid #cfe6d9;
	border-radius: var(--wp--custom--radius--xl);
	padding: clamp(28px, 4vw, 48px);
}

.petland-bp__fitsection .petland-bp__sectionlede {
	max-width: 52rem;
}

.petland-bp__fitgrid {
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	margin-top: 24px;
}

.petland-bp__traits {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-bp__trait {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px 14px;
}

.petland-bp__traitlabel {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
}

.petland-bp__traitvalue {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.petland-bp__fitcard {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	padding: 24px 26px;
}

.petland-bp__fityes,
.petland-bp__fitno {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.petland-bp__fityes {
	color: var(--wp--preset--color--link-green);
}

.petland-bp__fitno {
	color: var(--wp--preset--color--orange);
}

.petland-bp__fitcard ul {
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-bp__fitcard li {
	align-items: flex-start;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.875rem;
	gap: 8px;
	line-height: 1.5;
}

.petland-bp__fitcard svg {
	flex: 0 0 auto;
	height: 15px;
	margin-top: 3px;
	width: 15px;
}

.petland-bp__fitcol:first-child svg {
	color: var(--wp--preset--color--link-green);
}

.petland-bp__fitcol:last-child svg {
	color: var(--wp--preset--color--orange);
}

/* Expandable breed guide cards */

.petland-bp__about {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 64px;
}

.petland-bp__aboutlede {
	font-size: 1.0625rem;
	max-width: 54rem;
}

.petland-bp__aboutgrid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 32px;
}

.petland-bp__aboutcard {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.petland-bp__aboutcard summary {
	align-items: center;
	cursor: pointer;
	display: grid;
	gap: 16px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	list-style: none;
	min-height: 112px;
	padding: 22px 24px;
}

.petland-bp__aboutcard summary::-webkit-details-marker {
	display: none;
}

.petland-bp__aboutcard summary:hover strong {
	color: var(--wp--preset--color--orange);
}

.petland-bp__abouticon {
	align-items: center;
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.petland-bp__abouticon svg {
	height: 18px;
	width: 18px;
}

.petland-bp__aboutcopy {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.petland-bp__aboutcopy strong {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 700;
	transition: color var(--wp--custom--transition);
}

.petland-bp__aboutcopy > span {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
}

.petland-bp__aboutchev {
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	transition: transform var(--wp--custom--transition);
}

.petland-bp__aboutchev svg {
	height: 17px;
	width: 17px;
}

.petland-bp__aboutcard[open] .petland-bp__aboutchev {
	transform: rotate(180deg);
}

.petland-bp__aboutbody {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
	padding: 20px 24px 24px 88px;
}

.petland-bp__aboutbody p {
	margin: 0;
}

/* ==========================================================================
   FAQs — the centre of the page
   ==========================================================================

   Native <details>/<summary>: works with scripts off, keyboard-operable and
   screen-reader-announced for free, and crawlers read collapsed content. A
   div-and-click accordion gives up all four.

   CSS columns rather than a grid, so the DOM stays one sequential list — which is
   what the FAQPage structured data describes.
   ========================================================================== */

.petland-bp__faqcols {
	column-gap: 22px;
	margin-top: 24px;
}

@media (min-width: 62em) {
	.petland-bp__faqcols {
		column-count: 2;
	}
}

.petland-bp__faq {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	/* break-inside stops a question splitting across the column gutter. */
	break-inside: avoid;
	margin-bottom: 10px;
}

.petland-bp__faq summary {
	align-items: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 12px;
	justify-content: space-between;
	list-style: none;
	min-height: 52px;
	padding: 12px 16px;
}

.petland-bp__faq summary::-webkit-details-marker {
	display: none;
}

.petland-bp__faq summary:hover {
	color: var(--wp--preset--color--orange);
}

.petland-bp__faqchev {
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	flex: 0 0 auto;
	transition: transform var(--wp--custom--transition);
}

.petland-bp__faqchev svg {
	height: 16px;
	width: 16px;
}

.petland-bp__faq[open] .petland-bp__faqchev {
	transform: rotate(180deg);
}

.petland-bp__faqa {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	padding: 14px 16px 16px;
}

.petland-bp__faqa p {
	margin: 0 0 0.8em;
}

.petland-bp__faqa p:last-child {
	margin-bottom: 0;
}

/* Why Petland */

.petland-bp__whygrid {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	margin-top: 26px;
}

.petland-bp__why {
	display: grid;
	gap: 22px 18px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-bp__why li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.petland-bp__whyicon {
	align-items: center;
	border: 1px solid #f3ddd0;
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	height: 38px;
	justify-content: center;
	margin-bottom: 6px;
	width: 38px;
}

.petland-bp__whyicon svg {
	height: 17px;
	width: 17px;
}

.petland-bp__whytitle {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.petland-bp__whybody {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.petland-bp__origin {
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: var(--wp--custom--radius--lg);
	padding: 22px 24px;
	position: relative;
}

.petland-bp__originicon {
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	margin-bottom: 10px;
}

.petland-bp__originicon svg {
	height: 24px;
	width: 24px;
}

.petland-bp__origin h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.petland-bp__origin p {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0 0 12px;
}

.petland-bp__origin a {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 6px;
	text-decoration: none;
}

.petland-bp__origin a:hover {
	text-decoration: underline;
}

.petland-bp__origin a svg {
	height: 14px;
	width: 14px;
}

/* Stores */

.petland-bp__storegrid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin-top: 24px;
}

.petland-bp__store {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 20px 22px;
}

.petland-bp__store h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0;
}

.petland-bp__storeaddr {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 6px 0 0;
}

.petland-bp__storecount {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 7px;
	margin: 10px 0 0;
}

.petland-bp__dot {
	background-color: var(--wp--preset--color--green);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 7px;
	width: 7px;
}

.petland-bp__store a {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 6px;
	margin-top: 14px;
	text-decoration: none;
}

.petland-bp__store a:hover {
	text-decoration: underline;
}

.petland-bp__store a svg {
	height: 14px;
	width: 14px;
}

.petland-bp__financing {
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: var(--wp--custom--radius--lg);
	padding: 22px 24px;
}

.petland-bp__financing h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}

.petland-bp__financing p {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 8px 0 12px;
}

.petland-bp__financing a {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 6px;
	text-decoration: none;
}

.petland-bp__financing a:hover {
	text-decoration: underline;
}

.petland-bp__financing a svg {
	height: 14px;
	width: 14px;
}

.petland-bp__disclaimer {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 52px 0 0;
	padding-top: 22px;
}

@media (max-width: 900px) {
	/* Hero stacks: photo above the text so the breed is seen before it is read. */
	.petland-bp__hero {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.petland-bp__heromedia {
		grid-row: 1;
		min-height: 240px;
	}

	.petland-bp__herotext {
		padding: 28px 24px 32px;
	}

	.petland-bp__none,
	.petland-bp__fitgrid,
	.petland-bp__whygrid,
	.petland-bp__aboutgrid {
		grid-template-columns: 1fr;
	}

	.petland-bp__none {
		padding: 28px 22px;
	}
}

@media (max-width: 768px) {
	.petland-bp__section {
		margin-top: 48px;
	}

	.petland-bp__h2 {
		font-size: 1.4375rem;
	}

	.petland-bp__stats {
		gap: 18px 0;
		padding: 20px 8px;
	}

	/* Separators only make sense while the stats are in one row. */
	.petland-bp__stat + .petland-bp__stat::before {
		display: none;
	}

	.petland-bp__fitsection {
		padding: 26px 20px;
	}

	.petland-bp__about {
		padding-top: 44px;
	}

	.petland-bp__aboutcard summary {
		gap: 12px;
		min-height: 96px;
		padding: 18px;
	}

	.petland-bp__abouticon {
		height: 42px;
		width: 42px;
	}

	.petland-bp__aboutbody {
		padding: 18px;
	}
}

/* ==========================================================================
   Why Petland
   ==========================================================================

   Structure follows the franchise reference: dark hero, centred section headings,
   accordion-driven body, dark closing CTA.

   The body is `post_content` and the accordions are core/details blocks, so staff
   edit this page in the block editor with no custom fields. That matters for a page
   whose content is mostly legal and policy wording — it has to be changeable
   without a developer in the loop.
   ========================================================================== */

.petland-why {
	background-color: var(--wp--preset--color--page);
	padding-block: 0;
}

/* Hero band — ink, not the reference's slate; a second dark would duplicate a token. */

.petland-whyhero {
	background-color: var(--wp--preset--color--ink);
	background-image: radial-gradient(120% 140% at 85% 0%, rgba(240, 75, 24, 0.22) 0%, transparent 60%);
	border-radius: var(--wp--custom--radius--xl);
	color: #fff;
	margin-top: 28px;
	overflow: hidden;
	padding: 64px 48px;
}

/*
 * Story-led pages use the global photograph as their actual hero instead of
 * stacking a second dark card beneath the photographic masthead. The masthead
 * becomes the transparent navigation layer and the page hero supplies the image.
 */
.page-template-page-contact .petland-masthead,
.page-template-page-breeds .petland-masthead,
.petland-breeds-surface .petland-masthead,
.page-template-page-standard .petland-masthead,
.page-template-page-why-petland .petland-masthead,
.page-template-page-financing .petland-masthead,
.page-template-page-products .petland-masthead,
.page-template-page-claims .petland-masthead,
.page-template-page-petland-cares .petland-masthead {
	background: transparent;
	left: 0;
	min-height: 0;
	position: absolute;
	right: 0;
	top: 0;
}

body.admin-bar.page-template-page-contact .petland-masthead,
body.admin-bar.page-template-page-breeds .petland-masthead,
body.admin-bar.petland-breeds-surface .petland-masthead,
body.admin-bar.page-template-page-standard .petland-masthead,
body.admin-bar.page-template-page-why-petland .petland-masthead,
body.admin-bar.page-template-page-financing .petland-masthead,
body.admin-bar.page-template-page-products .petland-masthead,
body.admin-bar.page-template-page-claims .petland-masthead,
body.admin-bar.page-template-page-petland-cares .petland-masthead {
	top: 32px;
}

.page-template-page-contact .petland-whyhero,
.page-template-page-why-petland .petland-whyhero,
.page-template-page-financing .petland-whyhero {
	align-items: flex-end;
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(90deg, rgba(13, 15, 16, 0.78) 0%, rgba(13, 15, 16, 0.48) 46%, rgba(13, 15, 16, 0.12) 76%),
		var(--petland-hero-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0;
	box-sizing: border-box;
	display: flex;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	max-width: none;
	min-height: 500px;
	padding: 180px max(24px, calc((100vw - 1320px) / 2)) 72px;
	width: 100vw;
}

.page-template-page-contact .petland-whyhero__inner,
.page-template-page-why-petland .petland-whyhero__inner,
.page-template-page-financing .petland-whyhero__inner {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.petland-whyhero__inner {
	max-width: 42rem;
}

.petland-whyhero__kicker {
	color: #f8a583;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.petland-whyhero__title {
	color: #fff;
	font-size: clamp(2.25rem, 4.2vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
}

.petland-whyhero__lede {
	color: rgba(255, 255, 255, 0.78);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 18px 0 0;
	max-width: 34rem;
}

.petland-whyhero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.petland-whyhero__btn {
	align-items: center;
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.petland-whyhero__btn svg {
	height: 16px;
	width: 16px;
}

.petland-whyhero__btn--primary {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-whyhero__btn--primary:hover {
	background-color: var(--wp--preset--color--orange-dark);
	border-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

/* Ghost on a dark field needs a light border, not the page border token. */
.petland-whyhero__btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.petland-whyhero__btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	text-decoration: none;
}

/* Editor-authored body */

.petland-why__body {
	padding-block: 56px 8px;
}

/*
 * Scoped through .entry-content, not as a direct child of the body wrapper.
 *
 * core/post-content renders its own `.entry-content.wp-block-post-content` div, so
 * `.petland-why__body > h2` matched nothing — the section headings and intros were
 * silently unstyled while the CSS looked correct.
 */
.petland-why__body .entry-content > h2 {
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 56px auto 8px;
	max-width: 40rem;
	text-align: center;
}

.petland-why__body .entry-content > h2:first-child {
	margin-top: 0;
}

.petland-why__body .entry-content > p {
	color: var(--wp--preset--color--muted);
	margin: 0 auto 28px;
	max-width: 42rem;
	text-align: center;
}

/*
 * core/details styled as an accordion. Native disclosure rather than a scripted
 * one: keyboard and screen-reader behaviour comes free, collapsed text is still
 * indexed, and it keeps working with scripts off.
 */
.petland-why__body .wp-block-details {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	margin: 0 auto 10px;
	max-width: 52rem;
	padding: 0;
}

.petland-why__body .wp-block-details > summary {
	align-items: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 14px;
	justify-content: space-between;
	list-style: none;
	min-height: 58px;
	padding: 14px 20px;
}

.petland-why__body .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.petland-why__body .wp-block-details > summary:hover {
	color: var(--wp--preset--color--orange);
}

/* Chevron drawn in CSS, since the block gives us no element to hook. */
.petland-why__body .wp-block-details > summary::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	flex: 0 0 auto;
	height: 8px;
	margin-right: 4px;
	opacity: 0.55;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition);
	width: 8px;
}

.petland-why__body .wp-block-details[open] > summary::after {
	transform: rotate(-135deg);
}

.petland-why__body .wp-block-details > :not(summary) {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
	padding: 16px 20px;
}

.petland-why__body .wp-block-details > :not(summary) + :not(summary) {
	border-top: 0;
	padding-top: 0;
}

/* Closing CTA band */

.petland-whycta {
	background-color: var(--wp--preset--color--ink);
	background-image: radial-gradient(110% 160% at 15% 100%, rgba(240, 75, 24, 0.24) 0%, transparent 62%);
	border-radius: var(--wp--custom--radius--xl);
	margin: 64px 0 0;
	padding: 56px 40px;
	text-align: center;
}

.petland-whycta__title {
	color: #fff;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 auto;
	max-width: 34rem;
}

.petland-whycta__lede {
	color: rgba(255, 255, 255, 0.78);
	margin: 14px auto 0;
	max-width: 36rem;
}

.petland-whycta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}

@media (max-width: 768px) {
	.petland-whyhero {
		padding: 40px 24px;
	}

	.page-template-page-contact .petland-masthead,
	.page-template-page-why-petland .petland-masthead,
	.page-template-page-financing .petland-masthead,
	.page-template-page-products .petland-masthead,
	.page-template-page-claims .petland-masthead,
	.page-template-page-petland-cares .petland-masthead {
		min-height: 0;
	}

	.page-template-page-contact .petland-whyhero,
	.page-template-page-why-petland .petland-whyhero,
	.page-template-page-financing .petland-whyhero {
		background-image:
			linear-gradient(90deg, rgba(13, 15, 16, 0.76) 0%, rgba(13, 15, 16, 0.42) 100%),
			var(--petland-hero-image, none);
		min-height: 420px;
		padding: 150px 24px 48px;
	}

	.petland-why__body {
		padding-block: 40px 4px;
	}

	.petland-why__body > h2 {
		margin-top: 40px;
	}

	.petland-whycta {
		margin-top: 44px;
		padding: 40px 22px;
	}
}

/* ==========================================================================
   Financing guide
   ========================================================================== */

.petland-finance__body {
	box-sizing: border-box;
	max-width: 1440px !important;
	padding: 72px 28px 80px;
}

.petland-finance__body .entry-content,
.petland-finance__body .entry-content > * {
	max-width: none;
}

.petland-finance__body .entry-content > * {
	margin-block-start: 0;
}

.petland-finance-intro {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 18px 50px rgba(39, 29, 20, 0.08);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	margin-bottom: 76px !important;
	overflow: hidden;
}

.petland-finance-intro__copy {
	max-width: none !important;
	padding: clamp(36px, 5vw, 68px);
}

.petland-finance-kicker {
	color: var(--wp--preset--color--orange) !important;
	font-size: 0.74rem !important;
	font-weight: 750;
	letter-spacing: 0.11em;
	margin: 0 0 16px !important;
	text-transform: uppercase;
}

.petland-finance-intro h2,
.petland-finance-section > h2,
.petland-finance-process__intro h2,
.petland-finance-faq > h2 {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 4vw, 3.35rem);
	letter-spacing: -0.045em;
	line-height: 1.05;
	margin: 0;
}

.petland-finance-intro h2 em,
.petland-finance-section > h2 em,
.petland-finance-process__intro h2 em {
	color: var(--wp--preset--color--orange);
	font-style: normal;
}

.petland-finance-intro__copy > p:not(.petland-finance-kicker) {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.7;
	margin: 22px 0 0;
	max-width: 42rem;
}

.petland-finance-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.petland-finance-highlights li {
	color: #4d5864;
	font-size: 0.82rem;
	font-weight: 650;
	padding-left: 20px;
	position: relative;
}

.petland-finance-highlights li::before {
	color: var(--wp--preset--color--orange);
	content: "✓";
	font-weight: 800;
	left: 0;
	position: absolute;
}

.petland-finance-actions {
	gap: 12px;
	margin-top: 30px;
}

.petland-finance-button .wp-block-button__link {
	background-color: var(--wp--preset--color--orange);
	border: 1px solid var(--wp--preset--color--orange);
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 14px 22px;
}

.petland-finance-button--ghost .wp-block-button__link {
	background-color: #fff;
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.petland-finance-intro__media {
	align-items: flex-end;
	background-color: var(--wp--preset--color--orange-soft);
	display: flex;
	min-height: 450px;
	padding: 24px;
	position: relative;
}

.petland-finance-intro__image {
	inset: 0;
	margin: 0;
	position: absolute;
}

.petland-finance-intro__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.petland-finance-intro__media p {
	background-color: rgba(255, 255, 255, 0.94);
	border-radius: 10px;
	color: var(--wp--preset--color--ink);
	font-size: 0.82rem;
	font-weight: 700;
	margin: 0;
	padding: 12px 16px;
	position: relative;
	z-index: 1;
}

.petland-finance-section {
	background: linear-gradient(145deg, #fff9f5, #f8f3ed);
	border-radius: var(--wp--custom--radius--xl);
	margin-bottom: 76px !important;
	max-width: none !important;
	padding: clamp(38px, 5vw, 68px);
	text-align: center;
}

.petland-finance-section__lede {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 18px auto 0;
	max-width: 48rem;
}

.petland-finance-section .petland-finance-kicker {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: none !important;
	text-align: center !important;
	width: 100%;
}

.petland-finance-cards {
	align-items: stretch !important;
	display: grid !important;
	gap: 18px !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 36px auto 0 !important;
	max-width: 960px !important;
	width: 100%;
}

.petland-finance-cards > .wp-block-column {
	display: flex;
}

.petland-finance-card {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-sizing: border-box;
	height: 100%;
	max-width: none !important;
	padding: 28px;
	text-align: center;
	width: 100%;
}

.petland-finance-card h3 {
	color: var(--wp--preset--color--ink);
	font-size: 1.15rem;
	margin: 0 0 12px;
}

.petland-finance-card p {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0 auto;
	max-width: 16rem;
}

.petland-finance-process {
	display: grid;
	gap: clamp(36px, 7vw, 100px);
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	margin-bottom: 76px !important;
}

.petland-finance-process__intro {
	max-width: none !important;
}

.petland-finance-process__intro h2,
.petland-finance-faq > h2 {
	font-size: clamp(1.8rem, 3.2vw, 2.55rem);
}

.petland-finance-process__intro > p:not(.petland-finance-kicker) {
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	margin: 18px 0 0;
}

.petland-finance-steps {
	counter-reset: finance-step;
	display: grid;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-finance-steps li {
	counter-increment: finance-step;
	display: grid;
	gap: 5px 18px;
	grid-template-columns: 44px minmax(0, 1fr);
}

.petland-finance-steps li::before {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: 50%;
	color: #fff;
	content: counter(finance-step);
	display: flex;
	font-weight: 750;
	grid-row: 1 / 3;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.petland-finance-steps strong {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
}

.petland-finance-steps span {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.petland-finance-faq {
	margin-bottom: 28px !important;
	max-width: 62rem !important;
}

.petland-finance-faq > h2 {
	margin-bottom: 24px;
	text-align: center;
}

.petland-finance-faq .wp-block-details {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	margin: 0 0 10px;
	padding: 0;
}

.petland-finance-faq summary {
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 20px 22px;
}

.petland-finance-faq details p {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	line-height: 1.65;
	margin: 0;
	padding: 18px 22px;
}

.petland-finance-disclosure {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	max-width: 62rem !important;
	padding: 26px 28px;
}

.petland-finance-disclosure h3 {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	margin: 0;
}

.petland-finance-disclosure p {
	color: var(--wp--preset--color--muted);
	font-size: 0.78rem;
	line-height: 1.65;
	margin: 10px 0 0;
}

@media (max-width: 900px) {
	.petland-finance-intro,
	.petland-finance-process {
		grid-template-columns: 1fr;
	}

	.petland-finance-intro__media {
		min-height: 340px;
	}

	.petland-finance-cards {
		grid-template-columns: 1fr;
		max-width: 34rem !important;
	}
}

@media (max-width: 640px) {
	.petland-finance__body {
		padding: 44px 18px 56px;
	}

	.petland-finance-intro,
	.petland-finance-section,
	.petland-finance-process {
		margin-bottom: 52px !important;
	}

	.petland-finance-intro__copy,
	.petland-finance-section {
		padding: 30px 22px;
	}

	.petland-finance-highlights {
		flex-direction: column;
	}
}

/* ==========================================================================
   Why Petland editorial story
   ========================================================================== */

.page-template-page-why-petland .petland-whyhero__inner {
	margin: 0 auto;
	max-width: 54rem;
	text-align: center;
}

.page-template-page-why-petland .petland-whyhero__lede {
	margin-inline: auto;
}

.petland-story__body {
	box-sizing: border-box;
	max-width: 1440px !important;
	padding: 72px 28px 80px;
}

.petland-story__body .entry-content {
	max-width: none;
}

.petland-story__body .entry-content > * {
	margin-block-start: 0;
}

.petland-story-intro,
.petland-story-card {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 10px 30px rgba(26, 31, 36, 0.055);
}

.petland-story-intro {
	margin-bottom: 28px !important;
	max-width: none !important;
	padding: clamp(36px, 5vw, 64px);
	text-align: center;
}

.petland-story-kicker {
	color: var(--wp--preset--color--orange) !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 12px !important;
	text-transform: uppercase;
}

.petland-story-intro h2 {
	color: #46515d;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0;
	text-transform: none;
}

.petland-story-intro > p:not(.petland-story-kicker) {
	color: var(--wp--preset--color--muted);
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 20px auto 0;
	max-width: 52rem;
}

.petland-story-checks {
	display: inline-grid;
	gap: 12px;
	list-style: none;
	margin: 28px auto 0;
	padding: 0;
	text-align: left;
}

.petland-story-checks li {
	color: var(--wp--preset--color--body);
	font-size: 0.95rem;
	line-height: 1.45;
	padding-left: 30px;
	position: relative;
}

.petland-story-checks li::before {
	color: var(--wp--preset--color--orange);
	content: "✓";
	font-size: 1.25rem;
	font-weight: 800;
	left: 0;
	position: absolute;
	top: -3px;
}

.petland-story-grid,
.petland-story-panels {
	align-items: stretch !important;
	gap: 24px !important;
	margin-bottom: 28px !important;
	max-width: none !important;
}

.petland-story-grid > .wp-block-column,
.petland-story-panels > .wp-block-column {
	display: flex;
}

.petland-story-card {
	box-sizing: border-box;
	height: 100%;
	max-width: none !important;
	padding: 34px 36px;
	width: 100%;
}

.petland-story-card h2 {
	border-bottom: 2px solid var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	letter-spacing: 0.015em;
	line-height: 1.2;
	margin: 0 0 20px;
	padding-bottom: 14px;
	text-transform: uppercase;
}

.petland-story-card p {
	color: var(--wp--preset--color--body);
	font-size: 0.96rem;
	line-height: 1.7;
	margin: 0;
}

.petland-story-card p + p {
	margin-top: 14px;
}

.petland-story-card--wide {
	height: auto;
	margin-bottom: 28px !important;
	padding-block: 36px;
}

.petland-story-card--wide h2 {
	border-bottom: 0;
	color: #46515d;
	padding-bottom: 0;
}

.petland-story-panel {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 10px 30px rgba(26, 31, 36, 0.1);
	box-sizing: border-box;
	color: #fff;
	height: 100%;
	max-width: none !important;
	padding: 38px 36px;
	width: 100%;
}

.petland-story-panel--ink {
	background-color: #46515d;
}

.petland-story-panel--orange {
	background: linear-gradient(145deg, #df501b, #f06b20);
}

.petland-story-panel h2 {
	color: #fff;
	font-size: clamp(1.35rem, 2.5vw, 1.8rem);
	letter-spacing: 0.025em;
	margin: 0 0 22px;
	text-transform: uppercase;
}

.petland-story-panel ul {
	display: grid;
	gap: 13px;
	margin: 0;
	padding-left: 20px;
}

.petland-story-panel li,
.petland-story-panel p {
	color: rgba(255, 255, 255, 0.94);
	font-size: 0.94rem;
	line-height: 1.6;
}

.petland-story-panel__note {
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.78rem !important;
	margin: 22px 0 0;
	padding-top: 18px;
}

@media (max-width: 780px) {
	.petland-story__body {
		padding: 44px 18px 56px;
	}

	.petland-story-grid,
	.petland-story-panels {
		flex-direction: column;
	}

	.petland-story-card,
	.petland-story-panel {
		padding: 28px 24px;
	}
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.petland-contact {
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 2.15fr) minmax(320px, 0.95fr);
	margin: 0 auto;
	max-width: 1320px;
}

.petland-contact__h2 {
	color: #46515d;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
	text-align: left;
}

.petland-contact__lede {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 5px 0 0;
	text-align: left;
}

.petland-contact__form,
.petland-contact__stores-card {
	background-color: #fff;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 8px 28px rgba(26, 31, 36, 0.08);
}

.petland-contact__form {
	padding: 34px 40px 36px;
}

.petland-contact__cardhead {
	align-items: flex-start;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	gap: 13px;
	margin-bottom: 26px;
	padding-bottom: 22px;
}

.petland-contact__cardhead--stores {
	align-items: center;
	margin: 0 26px;
	padding: 28px 0 18px;
}

.petland-contact__headicon {
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
}

.petland-contact__headicon svg {
	height: 23px;
	width: 23px;
}

.petland-contact__grid {
	display: grid;
	gap: 17px 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.petland-contact__form .petland-modal__field label {
	font-size: 0.8125rem;
	font-weight: 650;
}

.petland-contact__form .petland-modal__field input,
.petland-contact__form .petland-modal__field select,
.petland-contact__form .petland-modal__field textarea {
	background-color: #fff;
	border-color: #dfdfdc;
}

.petland-contact__form .petland-modal__field textarea {
	min-height: 140px;
}

.petland-contact__form .petland-modal__consent {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 22px;
	padding-top: 18px;
}

.petland-contact__form .petland-modal__submit {
	border-radius: 8px;
	min-width: 180px;
}

.petland-contact__done {
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--lg);
	padding: 32px 28px;
	text-align: center;
}

.petland-contact__done[hidden] {
	display: none;
}

.petland-contact__done h3 {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.petland-contact__done p {
	color: var(--wp--preset--color--muted);
	margin: 8px 0 0;
}

/* Store details come from Petland_Store_Info, never retyped. */

.petland-contact__stores {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.petland-contact__store {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0 26px;
	padding: 24px 0;
}

.petland-contact__store:last-child {
	border-bottom: 0;
}

.petland-contact__store h3 {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 18px 54px;
}

.petland-contact__detail {
	align-items: flex-start;
	display: flex;
	gap: 14px;
	margin-top: 15px;
}

.petland-contact__detailicon {
	align-items: center;
	background: linear-gradient(145deg, #e44d1b, #ff8700);
	border-radius: 9px;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.petland-contact__detailicon svg {
	height: 18px;
	width: 18px;
}

.petland-contact__detail p {
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.9rem;
	flex-direction: column;
	line-height: 1.5;
	margin: 1px 0 0;
}

.petland-contact__detail strong {
	color: #4d5864;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.035em;
	margin-bottom: 3px;
	text-transform: uppercase;
}

.petland-contact__tel a {
	color: var(--wp--preset--color--orange);
	font-weight: 700;
	text-decoration: none;
}

.petland-contact__tel a:hover {
	text-decoration: underline;
}

.petland-contact__hours {
	white-space: normal;
}

.petland-contact__dir {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 6px;
	margin: 16px 0 0 54px;
	text-decoration: none;
}

.petland-contact__dir:hover {
	text-decoration: underline;
}

.petland-contact__dir svg {
	height: 14px;
	width: 14px;
}

.petland-contact__social {
	background: linear-gradient(135deg, #df501b, #ff8700);
	border-radius: var(--wp--custom--radius--lg);
	color: #fff;
	padding: 22px 24px;
}

.petland-contact__social h2 {
	align-items: center;
	display: flex;
	font-size: 1.05rem;
	gap: 10px;
	margin: 0;
}

.petland-contact__social h2 svg {
	height: 18px;
	width: 18px;
}

.petland-contact__social ul {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.petland-contact__social a {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
	display: flex;
	height: 44px;
	justify-content: center;
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
	width: 44px;
}

.petland-contact__social a:hover {
	background-color: rgba(255, 255, 255, 0.32);
	transform: translateY(-2px);
}

.petland-contact__social a svg {
	height: 20px;
	width: 20px;
}

@media (max-width: 900px) {
	.petland-contact {
		gap: 32px;
		grid-template-columns: 1fr;
	}

	.petland-contact__stores {
		display: grid;
		gap: 20px;
		grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr);
	}
}

@media (max-width: 640px) {
	.petland-contact__grid {
		grid-template-columns: 1fr;
	}

	.petland-contact__form {
		padding: 26px 20px 28px;
	}

	.petland-contact__stores {
		display: flex;
	}

	.petland-contact__cardhead--stores,
	.petland-contact__store {
		margin-inline: 20px;
	}
}

/* ==========================================================================
   Blog
   ========================================================================== */

.petland-blog {
	background-color: var(--wp--preset--color--page);
	padding-block: 0 64px;
}

.petland-blog__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
	margin-top: 40px;
}

.petland-blog__card {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color var(--wp--custom--transition);
}

@media (hover: hover) {
	.petland-blog__card:hover {
		border-color: #d8d5d0;
	}
}

.petland-blog__card .wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
	margin: 0;
	overflow: hidden;
}

.petland-blog__card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.petland-blog__card .wp-block-post-title {
	font-size: 1.1875rem;
	letter-spacing: -0.02em;
	line-height: 1.28;
	margin: 0;
	padding: 18px 20px 0;
}

.petland-blog__card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-blog__card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--orange);
}

.petland-blog__card .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	padding: 8px 20px 0;
}

.petland-blog__card .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.6;
	padding: 10px 20px 20px;
}

.petland-blog__card .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--orange);
	font-weight: 600;
}

/* Single post: a readable measure, not the full wide container. */

.petland-post {
	background-color: var(--wp--preset--color--page);
	padding-block: 48px 64px;
}

.petland-post__title {
	font-size: clamp(2rem, 3.6vw, 2.875rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 auto 14px;
	max-width: 44rem;
}

.petland-post__meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 0 auto 28px;
	max-width: 44rem;
}

.petland-post__content {
	margin-inline: auto;
	max-width: 44rem;
}

.petland-post__content p,
.petland-post__content ul,
.petland-post__content ol {
	color: var(--wp--preset--color--body, var(--wp--preset--color--muted));
	font-size: 1.0625rem;
	line-height: 1.7;
}

.petland-post__content h2 {
	font-size: 1.625rem;
	letter-spacing: -0.025em;
	margin-top: 2em;
}

.petland-post__content h3 {
	font-size: 1.25rem;
	margin-top: 1.6em;
}

.petland-post__content img {
	border-radius: var(--wp--custom--radius--md);
	height: auto;
	max-width: 100%;
}

/* ==========================================================================
   Home page
   ==========================================================================
   Section bands alternate white and warm, each one owning its own vertical
   rhythm, so a section can be reordered or removed in the editor without
   leaving a double-padded gap behind it.
   ========================================================================== */

.petland-home {
	--petland-home-gutter: clamp(24px, 3vw, 48px);
	background-color: var(--wp--preset--color--base);
}

.petland-home *,
.petland-home *::before,
.petland-home *::after {
	box-sizing: border-box;
}

/* Shared section furniture */

.petland-hsec {
	padding: 64px 0;
}

.petland-hsec--warm {
	background-color: var(--wp--preset--color--warm);
}

.petland-hsec__inner,
.petland-hh__inner {
	margin: 0 auto;
	max-width: 1440px;
	padding-left: var(--petland-home-gutter);
	padding-right: var(--petland-home-gutter);
	width: 100%;
}

.petland-hsec__head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	justify-content: space-between;
	margin-bottom: 28px;
}

.petland-hsec__kicker {
	color: var(--wp--preset--color--orange);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.petland-hsec__title {
	font-size: clamp(1.875rem, 3.4vw, 2.625rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0;
}

.petland-hsec__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-top: 28px;
}

.petland-hlink {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 7px;
	text-decoration: none;
	white-space: nowrap;
}

.petland-hlink:hover {
	text-decoration: underline;
}

.petland-hlink svg {
	height: 15px;
	width: 15px;
}

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

.petland-hh {
	background-color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(620px, 78svh, 760px);
	padding: 96px 0 0;
	position: relative;
	overflow: hidden;
}

/*
 * The photo is a background layer with a scrim rather than an <img>, because the
 * headline has to stay readable over whatever photograph the client supplies. A
 * left-weighted gradient keeps the text side dark while leaving the right of the
 * frame — where the puppy usually is — untouched.
 */
.petland-hh--photo::before {
	background-image: var(--petland-hh-image);
	background-position: center 30%;
	background-size: cover;
	content: "";
	inset: 0;
	position: absolute;
}

.petland-hh--photo::after {
	background-image: linear-gradient(100deg, rgba(12, 13, 14, 0.88) 0%, rgba(12, 13, 14, 0.66) 42%, rgba(12, 13, 14, 0.18) 78%);
	content: "";
	inset: 0;
	position: absolute;
}

.petland-hh__inner {
	padding-bottom: 54px;
	position: relative;
	z-index: 2;
}

.petland-hh__kicker {
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.petland-hh__title {
	color: #fff;
	font-size: clamp(2.75rem, 6.4vw, 5rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.98;
	margin: 0 0 20px;
	max-width: 11ch;
}

/*
 * The marker highlight from the reference. A painted box behind the words rather
 * than a colour change, so the accent survives on a photograph of any brightness
 * — coloured text alone disappeared over a light coat.
 */
.petland-hh__mark {
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--xs);
	box-decoration-break: clone;
	color: #fff;
	padding: 0 0.16em 0.06em;
	-webkit-box-decoration-break: clone;
}

.petland-hh__lede {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.125rem;
	margin: 0 0 30px;
	max-width: 30em;
}

.petland-hh__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.petland-hh__cta {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 700;
	gap: 12px;
	padding: 15px 15px 15px 26px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
}

.petland-hh__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

/* On a dark panel the filled orange has less to push against, so invert it. */
.petland-hh__cta--light {
	background-color: #fff;
	color: var(--wp--preset--color--ink);
}

.petland-hh__cta--light:hover {
	background-color: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
}

.petland-hh__ctaicon {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.22);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.petland-hh__cta--light .petland-hh__ctaicon {
	background-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-hh__ctaicon svg {
	height: 14px;
	width: 14px;
}

.petland-hh__phone {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 9px;
	padding: 14px 24px;
	text-decoration: none;
}

.petland-hh__phone:hover {
	background-color: rgba(255, 255, 255, 0.24);
	color: #fff;
	text-decoration: none;
}

.petland-hh__phone svg {
	height: 15px;
	width: 15px;
}

.petland-hh__claims {
	backdrop-filter: blur(6px);
	background-color: rgba(12, 13, 14, 0.58);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 15px 24px;
	position: relative;
	z-index: 2;
}

.petland-hh__claims li {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 8px;
	margin: 0;
}

.petland-hh__claimicon {
	align-items: center;
	color: var(--wp--preset--color--green);
	display: flex;
}

.petland-hh__claimicon svg {
	height: 16px;
	width: 16px;
}

/* --------------------------------------------------------------------------
   Puppy rail
   -------------------------------------------------------------------------- */

.petland-hgrid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-hgrid > li {
	display: flex;
	min-width: 0;
}

.petland-hgrid > li > .petland-card {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Breed carousel
   -------------------------------------------------------------------------- */

.petland-hseg {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	gap: 2px;
	padding: 4px;
}

.petland-hseg__btn {
	appearance: none;
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 8px 18px;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.petland-hseg__btn:hover {
	color: var(--wp--preset--color--ink);
}

.petland-hseg__btn.is-active {
	background-color: var(--wp--preset--color--ink);
	color: #fff;
}

/*
 * Native overflow scrolling with snap points. Scrollbar hidden but scrolling
 * itself is never disabled, so a trackpad, a touch swipe and the keyboard all
 * still work if the arrow buttons never get their script.
 */
/*
 * The inset lives on the track, not on this scroll container.
 *
 * With `padding-left` here, snap-align:start settles the first cell against the
 * padding edge, so the resting scrollLeft is 24 rather than 0 — which meant the
 * "previous" arrow never met its disabled condition and sat there looking live
 * while doing nothing. Padding the track makes 0 the true start.
 */
.petland-hrail {
	margin-left: calc(var(--petland-home-gutter) * -1);
	margin-right: calc(var(--petland-home-gutter) * -1);
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.petland-hrail::-webkit-scrollbar {
	display: none;
}

.petland-hrail__track {
	display: flex;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0 var(--petland-home-gutter);
}

.petland-hrail__cell {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
	width: 208px;
}

.petland-hrail__cell[hidden] {
	display: none;
}

/*
 * Shown when the selected store has none of these breeds. Strongsville is in
 * exactly that position today, so this is a real state rather than a defensive
 * one, and a blank rail with no explanation reads as a broken page.
 */
.petland-hrail__empty {
	background-color: var(--wp--preset--color--base);
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--muted);
	margin: 0;
	padding: 34px 26px;
	text-align: center;
}

.petland-hrail__empty[hidden] {
	display: none;
}

.petland-hrail__empty strong {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 1.0625rem;
	margin-bottom: 6px;
}

.petland-hrail__nav {
	display: flex;
	gap: 8px;
}

.petland-hrail__btn {
	align-items: center;
	appearance: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	height: 42px;
	justify-content: center;
	transition: background-color var(--wp--custom--transition), opacity var(--wp--custom--transition);
	width: 42px;
}

.petland-hrail__btn:hover {
	background-color: var(--wp--preset--color--warm);
}

.petland-hrail__btn[disabled] {
	cursor: default;
	opacity: 0.4;
}

/* The chevron points down; rotate it rather than shipping two more icons. */
.petland-hrail__btn svg {
	height: 18px;
	width: 18px;
}

[data-petland-rail-prev] svg {
	transform: rotate(90deg);
}

[data-petland-rail-next] svg {
	transform: rotate(-90deg);
}

.petland-bcard {
	color: inherit;
	display: block;
	text-decoration: none;
}

.petland-bcard__media {
	aspect-ratio: 1 / 1;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	overflow: hidden;
	position: relative;
}

.petland-bcard__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.petland-bcard__noimg {
	align-items: center;
	color: #cfccc6;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.petland-bcard__noimg svg {
	height: 40px;
	width: 40px;
}

.petland-bcard__foot {
	align-items: baseline;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	padding: 12px 4px 0;
}

.petland-bcard__name {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.petland-bcard:hover .petland-bcard__name {
	text-decoration: underline;
}

/*
 * A count, not a label. The word "available" repeated twelve times across a rail
 * is noise; the number beside a breed name reads correctly on its own.
 */
.petland-bcard__count {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Editorial split with attached listings
   -------------------------------------------------------------------------- */

.petland-hsplit {
	padding: 88px 0;
}

.petland-hsplit__inner {
	align-items: center;
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr 1.1fr 1fr;
	margin: 0 auto;
	max-width: 1440px;
	padding-left: var(--petland-home-gutter);
	padding-right: var(--petland-home-gutter);
}

.petland-hsplit__mid {
	text-align: center;
}

.petland-hsplit__title {
	font-size: clamp(1.875rem, 3.2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0 0 14px;
}

.petland-hsplit__lede {
	color: var(--wp--preset--color--muted);
	margin: 0 auto 26px;
	max-width: 26em;
}

.petland-hpanel {
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	position: relative;
}

/* Staggered, so the middle column does not read as a gap between two identical blocks. */
.petland-hpanel--right {
	margin-top: 56px;
}

.petland-hpanel__img {
	aspect-ratio: 4 / 5;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.petland-hchip {
	align-items: center;
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, 0.92);
	border-radius: var(--wp--custom--radius--lg);
	bottom: 14px;
	color: var(--wp--preset--color--ink);
	display: flex;
	gap: 11px;
	left: 14px;
	padding: 10px 12px;
	position: absolute;
	right: 14px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
}

.petland-hchip:hover {
	background-color: #fff;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-hchip__thumb {
	border-radius: var(--wp--custom--radius--sm);
	flex: 0 0 auto;
	height: 46px;
	overflow: hidden;
	width: 46px;
}

.petland-hchip__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.petland-hchip__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.petland-hchip__name {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.petland-hchip__breed {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.petland-hchip__go {
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	margin-left: auto;
	padding: 8px 16px;
}

/* --------------------------------------------------------------------------
   Lifestyle panel
   -------------------------------------------------------------------------- */

.petland-hlife {
	padding: 0 0 72px;
}

.petland-hlife__inner {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
	max-width: 1440px;
	padding-left: var(--petland-home-gutter);
	padding-right: var(--petland-home-gutter);
}

.petland-hlife__photo {
	align-items: flex-start;
	background-color: var(--wp--preset--color--ink);
	background-image:
		linear-gradient(180deg, rgba(12, 13, 14, 0.08) 18%, rgba(12, 13, 14, 0.78) 100%),
		var(--petland-lifestyle-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 460px;
	padding: 38px;
}

.petland-hlife__kicker {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.petland-hlife__title {
	color: #fff;
	font-size: clamp(1.75rem, 2.8vw, 2.375rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 24px;
}

.petland-hlife__panel {
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--xl);
	padding: 38px;
}

.petland-hwords {
	list-style: none;
	margin: 6px 0 22px;
	padding: 0;
}

.petland-hwords li {
	margin: 0;
}

.petland-hwords a {
	color: rgba(21, 23, 25, 0.34);
	display: block;
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.16;
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}

.petland-hwords li.is-lead a,
.petland-hwords a:hover,
.petland-hwords a:focus-visible {
	color: var(--wp--preset--color--ink);
}

.petland-hlife__note {
	color: var(--wp--preset--color--muted);
	margin: 0;
	max-width: 26em;
}

/* --------------------------------------------------------------------------
   Locations
   -------------------------------------------------------------------------- */

.petland-hstores {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-hstore {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	margin: 0;
	padding: 28px;
}

.petland-hstore__city {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

.petland-hstore__addr {
	color: var(--wp--preset--color--muted);
	margin: 0 0 18px;
}

.petland-hstore__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.petland-hstore__phone,
.petland-hstore__dir {
	align-items: center;
	border-radius: var(--wp--custom--radius--pill);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	padding: 11px 20px;
	text-decoration: none;
}

.petland-hstore__phone {
	background-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-hstore__phone:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-hstore__dir {
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

.petland-hstore__dir:hover {
	background-color: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-hstore__phone svg,
.petland-hstore__dir svg {
	height: 15px;
	width: 15px;
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.petland-hblog {
	padding: 64px 0;
}

.petland-hblog__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr 1fr;
}

.petland-hlead {
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	overflow: hidden;
	position: relative;
}

.petland-hlead__img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.petland-hlead__body {
	background-image: linear-gradient(to top, rgba(12, 13, 14, 0.88), rgba(12, 13, 14, 0));
	padding: 40px 30px 28px;
	position: relative;
	z-index: 2;
}

.petland-hlead__meta {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0 0 8px;
}

.petland-hlead__title {
	font-size: clamp(1.375rem, 2.2vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.18;
	margin: 0 0 14px;
}

.petland-hlead__title a {
	color: #fff;
	text-decoration: none;
}

.petland-hlead__title a:hover {
	text-decoration: underline;
}

.petland-hlead__more {
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	padding-bottom: 2px;
}

.petland-hlist {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-hlist li {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 16px 0;
}

.petland-hlist li:first-child {
	padding-top: 0;
}

.petland-hlist li:last-child {
	border-bottom: 0;
}

.petland-hlist__num {
	/*
	 * The border token put these at 1.23:1 — aria-hidden, so not a WCAG failure,
	 * but invisible, which means the numbering was doing nothing. Muted clears
	 * 5.79:1 and reads as an ordinal marker; the size and weight keep it clearly
	 * subordinate to the headline beside it.
	 */
	color: var(--wp--preset--color--muted);
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	width: 26px;
}

.petland-hlist__thumb {
	border-radius: var(--wp--custom--radius--md);
	flex: 0 0 auto;
	height: 74px;
	overflow: hidden;
	width: 96px;
}

.petland-hlist__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.petland-hlist__body {
	min-width: 0;
}

.petland-hlist__title {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.32;
	margin: 0 0 4px;
}

.petland-hlist__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.petland-hlist__title a:hover {
	text-decoration: underline;
}

.petland-hlist__meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Home page: narrow
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.petland-hsplit__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	/*
	 * The stagger is a three-column device. Stacked, a top margin on the second
	 * panel is just an inconsistent gap.
	 */
	.petland-hpanel--right {
		margin-top: 0;
	}

	.petland-hsplit__mid {
		grid-column: 1 / -1;
		order: -1;
	}

	.petland-hgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.petland-hlife__inner,
	.petland-hblog__grid {
		grid-template-columns: 1fr;
	}

	.petland-hlife__photo {
		min-height: 340px;
	}
}

@media (max-width: 768px) {
	.petland-home {
		--petland-home-gutter: 18px;
	}

	.petland-hsec,
	.petland-hsplit,
	.petland-hblog {
		padding: 46px 0;
	}

	.petland-hlife {
		padding-bottom: 46px;
	}

	.petland-hsplit__inner {
		grid-template-columns: 1fr;
	}

	.petland-hsplit__mid {
		grid-column: auto;
	}

	.petland-hh {
		min-height: 520px;
		padding-top: 60px;
	}

	.petland-hh__claims {
		gap: 8px 20px;
		justify-content: flex-start;
		padding: 13px 20px;
	}

	.petland-hh__claims li {
		font-size: 0.8125rem;
	}

	.petland-hsec__inner,
	.petland-hh__inner,
	.petland-hsplit__inner,
	.petland-hlife__inner {
		padding-left: 18px;
		padding-right: 18px;
	}

	.petland-trust {
		padding-left: 18px;
		padding-right: 18px;
	}

	.petland-hlife__photo,
	.petland-hlife__panel {
		padding: 26px;
	}

	.petland-hstore {
		padding: 22px;
	}

	.petland-hlead__body {
		padding: 32px 22px 22px;
	}

	/*
	 * Thumbnails go. At this width the row is a number, a 96px image and a headline
	 * with about 150px left for the headline itself, which wraps to four lines.
	 */
	.petland-hlist__thumb {
		display: none;
	}
}

@media (max-width: 600px) {
	.petland-hgrid {
		gap: 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.petland-hrail__cell {
		width: 168px;
	}

	.petland-hh__actions .petland-hh__cta,
	.petland-hh__actions .petland-hh__phone {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 420px) {
	.petland-hgrid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Puppy detail page
   ========================================================================== */

.petland-pp {
	margin: 0 auto;
	max-width: 1540px;
	padding: 0 24px 74px;
}

.petland-pp *,
.petland-pp *::before,
.petland-pp *::after {
	box-sizing: border-box;
}

.petland-pp__crumbs {
	padding: 22px 0 18px;
}

.petland-pp__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-pp__crumbs li {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	margin: 0;
}

.petland-pp__crumbs li + li::before {
	content: "/";
	margin-right: 10px;
	opacity: 0.5;
}

.petland-pp__crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.petland-pp__crumbs a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.petland-pp__crumbs [aria-current="page"] {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* Gallery beside the rail */

.petland-pp__top {
	align-items: flex-start;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) 400px;
}

.petland-pg {
	display: grid;
	gap: 14px;
	grid-template-columns: 92px minmax(0, 1fr);
}

/*
 * The stage owns the ratio so switching slides never changes the page height —
 * a gallery that reflows on every click drags the rail up and down with it.
 */
.petland-pg__stage {
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--xl);
	grid-column: 2;
	overflow: hidden;
	position: relative;
}

.petland-pg__slide {
	display: none;
	inset: 0;
	position: absolute;
}

/*
 * `.is-active` is printed by PHP on the first slide, so the photo is visible before
 * any script runs. The script only moves the class.
 */
.petland-pg__slide.is-active {
	display: block;
}

.petland-pg__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/*
 * Portrait clips should be seen from top to bottom. The stage keeps its stable
 * gallery ratio while the unused side space becomes a quiet resting surface
 * instead of cropping the video to fill the width.
 */
.petland-pg__slide[data-petland-slide-video] {
	background:
		radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.96) 0%, rgba(248, 246, 242, 0.92) 58%, rgba(239, 235, 229, 0.96) 100%),
		var(--wp--preset--color--warm);
}

.petland-pg__video {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.petland-pg__counter {
	background-color: rgba(21, 23, 25, 0.68);
	border-radius: var(--wp--custom--radius--pill);
	bottom: 14px;
	color: #fff;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0;
	padding: 5px 12px;
	position: absolute;
	right: 14px;
}

.petland-pg__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	grid-column: 1;
	grid-row: 1;
}

.petland-pg__thumb {
	appearance: none;
	aspect-ratio: 1 / 1;
	background: none;
	background-color: var(--wp--preset--color--warm);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	position: relative;
	transition: border-color var(--wp--custom--transition);
	width: 100%;
}

.petland-pg__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.petland-pg__thumb.is-active {
	border-color: var(--wp--preset--color--orange);
}

.petland-pg__thumbplay {
	align-items: center;
	background-color: rgba(21, 23, 25, 0.6);
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: flex;
	height: 26px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
}

.petland-pg__thumbplay svg {
	height: 12px;
	width: 12px;
}

/* Booking rail */

.petland-pp__railwrap {
	/*
	 * Sticky through the long scroll so the primary action stays reachable. The
	 * offset clears the masthead band plus the promo bar; both are above the fold
	 * on this page, and a rail that tucks under them is worse than one that scrolls.
	 */
	position: sticky;
	top: 24px;
}

.petland-pr {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 28px;
}

.petland-pr__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-bottom: 4px;
}

.petland-pr__name {
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
}

.petland-pr__status {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--link-green);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 5px 12px;
}

.petland-pr__status--sold {
	background-color: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--muted);
}

.petland-pr__favorite {
	align-items: center;
	appearance: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 7px;
	margin-left: auto;
	min-height: 40px;
	padding: 8px 13px;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.petland-pr__favorite:hover {
	border-color: rgba(213, 65, 20, 0.4);
	transform: translateY(-1px);
}

.petland-pr__favorite svg {
	height: 16px;
	width: 16px;
}

.petland-pr__favorite.is-saved {
	background: var(--wp--preset--color--value-green);
	border-color: rgba(20, 132, 77, 0.22);
	color: var(--wp--preset--color--link-green);
}

.petland-pr__breed {
	margin: 0 0 20px;
}

.petland-pr__breed a {
	color: var(--wp--preset--color--orange);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.petland-pr__breed a:hover {
	text-decoration: underline;
}

.petland-pr__facts {
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 0;
	margin: 0 0 20px;
}

.petland-pr__facts > div {
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 10px 0;
}

.petland-pr__facts dt {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 0;
}

.petland-pr__facts dd {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.petland-pr__fact-link {
	color: inherit;
	text-decoration-color: rgba(213, 65, 20, 0.42);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.petland-pr__fact-link:hover {
	color: var(--wp--preset--color--orange);
}

.petland-pr__reference {
	align-items: baseline;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.75rem;
	gap: 6px;
	justify-content: flex-end;
	letter-spacing: 0.025em;
	margin: -8px 0 20px;
}

.petland-pr__reference strong {
	color: inherit;
	font-weight: 600;
}

.petland-pr__price {
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--lg);
	margin-bottom: 18px;
	padding: 18px;
}

.petland-pr__pricehead {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 6px;
}

.petland-pr__pricenote {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0;
}

.petland-pr__financing {
	align-items: center;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 7px;
	margin-top: 10px;
	text-decoration: none;
}

.petland-pr__financing:hover {
	text-decoration: underline;
}

.petland-pr__financing svg {
	height: 15px;
	width: 15px;
}

.petland-pr__soldnote {
	color: var(--wp--preset--color--muted);
	margin: 0 0 16px;
}

.petland-pr__cta {
	align-items: center;
	appearance: none;
	background-color: var(--wp--preset--color--orange);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	color: #fff;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	gap: 10px;
	justify-content: center;
	padding: 16px 22px;
	transition: background-color var(--wp--custom--transition);
	width: 100%;
}

.petland-pr__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
}

.petland-pr__cta svg {
	height: 16px;
	width: 16px;
}

.petland-pr__availability-note {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 8px;
	justify-content: center;
	line-height: 1.4;
	margin-bottom: 0;
	margin-top: 12px;
	text-align: center;
}

.petland-pr__availability-note::before {
	background-color: var(--wp--preset--color--green);
	border-radius: 50%;
	content: '';
	flex: 0 0 7px;
	height: 7px;
	width: 7px;
}

.petland-pr__call {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 20px;
	padding-top: 18px;
	text-align: center;
}

.petland-pr__callhead {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 0 0 10px;
}

.petland-pr__phone {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 1rem;
	font-weight: 700;
	gap: 9px;
	justify-content: center;
	padding: 12px 22px;
	text-decoration: none;
}

.petland-pr__phone:hover {
	background-color: var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
}

.petland-pr__phone svg {
	height: 15px;
	width: 15px;
}

/*
 * A compact desktop rhythm keeps the identity, facts and conversion actions in
 * one laptop viewport. Larger screens retain the roomier card above.
 */
@media (min-width: 1025px) and (max-height: 900px) {
	.petland-pr {
		padding: 22px;
	}

	.petland-pr__head {
		flex-wrap: nowrap;
	}

	.petland-pr__name {
		font-size: 2.25rem;
	}

	.petland-pr__favorite {
		flex: 0 0 40px;
		height: 40px;
		justify-content: center;
		padding: 0;
		width: 40px;
	}

	.petland-pr__favorite span {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.petland-pr__breed {
		margin-bottom: 14px;
	}

	.petland-pr__facts {
		margin-bottom: 14px;
	}

	.petland-pr__facts > div {
		padding: 7px 0;
	}

	.petland-pr__reference {
		margin: -4px 0 14px;
	}

	.petland-pr__cta {
		padding: 14px 20px;
	}

	.petland-pr__availability-note {
		margin-top: 9px;
	}

	.petland-pr__call {
		margin-top: 14px;
		padding-top: 14px;
	}

	.petland-pr__callhead {
		margin-bottom: 7px;
	}

	.petland-pr__phone {
		padding: 10px 20px;
	}
}

/* Sections */

.petland-pp__section {
	padding-top: 56px;
}

.petland-pp__h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.12;
	margin: 0 0 12px;
}

.petland-pp__kicker {
	color: var(--wp--preset--color--orange);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.petland-pp__summary {
	color: var(--wp--preset--color--muted);
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 14px;
}

.petland-pp__prose {
	max-width: 64ch;
}

.petland-pp__prose p {
	margin: 0 0 14px;
}

.petland-pp__includedlede {
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
	max-width: 68ch;
}

.petland-pp__includedgrid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.petland-pp__includedcard {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	margin: 0;
	min-height: 190px;
	padding: 22px;
}

.petland-pp__includedicon {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: 50%;
	color: var(--wp--preset--color--link-green);
	display: inline-flex;
	height: 46px;
	justify-content: center;
	margin-bottom: 22px;
	width: 46px;
}

.petland-pp__includedicon svg {
	height: 20px;
	width: 20px;
}

.petland-pp__includedcard strong {
	color: var(--wp--preset--color--ink);
	font-size: 0.9875rem;
	line-height: 1.35;
}

.petland-pp__includedcard > span:last-child {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin-top: 8px;
}

.petland-pp__supportdetails {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 40px;
	padding-top: 32px;
}

.petland-pp__supportdetails > h3 {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.petland-pp__acc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	max-width: 860px;
}

@media (max-width: 600px) {
	.petland-pp__includedgrid {
		grid-template-columns: 1fr 1fr;
	}

	.petland-pp__includedcard {
		min-height: 170px;
		padding: 18px;
	}

	.petland-pp__includedicon {
		height: 42px;
		margin-bottom: 18px;
		width: 42px;
	}
}

@media (max-width: 390px) {
	.petland-pp__includedgrid {
		grid-template-columns: 1fr;
	}

	.petland-pp__includedcard {
		min-height: 0;
	}
}

.petland-pp__ticks {
	display: grid;
	gap: 8px 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.petland-pp__ticks li {
	align-items: flex-start;
	display: flex;
	gap: 9px;
	margin: 0;
}

.petland-pp__ticks svg {
	color: var(--wp--preset--color--green);
	flex: 0 0 auto;
	height: 17px;
	margin-top: 3px;
	width: 17px;
}

.petland-pp__dl {
	display: grid;
	gap: 0;
	margin: 0;
}

.petland-pp__dl > div {
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 9px 0;
}

.petland-pp__dl > div:last-child {
	border-bottom: 0;
}

.petland-pp__dl dt {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.petland-pp__dl dd {
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.petland-pp__legal {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 10px 0 0;
}

/* Breed quick facts */

.petland-pbreed {
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--xl);
	display: grid;
	gap: 32px;
	grid-template-columns: 300px minmax(0, 1fr);
	padding: 28px;
}

.petland-pbreed__media {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.petland-pbreed__img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.petland-pbreed__about {
	color: var(--wp--preset--color--muted);
	margin: 0 0 18px;
	max-width: 60ch;
}

.petland-pbreed__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.petland-pbreed__stats li {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	margin: 0;
	padding: 12px 16px;
}

.petland-pbreed__statlabel {
	color: var(--wp--preset--color--muted);
	display: block;
	font-size: 0.8125rem;
	margin-bottom: 2px;
}

.petland-pbreed__statvalue {
	display: block;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Ask form */

.petland-pask__inner {
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--xl);
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) 460px;
	padding: 38px;
	position: relative;
}

.petland-pask__lede {
	color: var(--wp--preset--color--muted);
	margin: 0 0 18px;
}

.petland-pask__form {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	padding: 26px;
}

.petland-pask__formhead {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 16px;
}

.petland-pask__field {
	margin-bottom: 14px;
}

.petland-pask__field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 5px;
}

.petland-pask__field input,
.petland-pask__field textarea {
	appearance: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink);
	font: inherit;
	padding: 12px 14px;
	width: 100%;
}

.petland-pask__field input:focus-visible,
.petland-pask__field textarea:focus-visible {
	border-color: var(--wp--preset--color--orange);
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 1px;
}

.petland-pask__consent {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	margin: 6px 0 4px;
}

.petland-pask__error {
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 4px 0 0;
}

.petland-pask__error[hidden] {
	display: none;
}

.petland-pask__submit {
	margin-top: 14px;
	width: 100%;
}

.petland-pask__status {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 10px 0 0;
	min-height: 1.2em;
}

.petland-pask__done {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	gap: 14px;
	grid-column: 2;
	padding: 26px;
}

.petland-pask__done[hidden] {
	display: none;
}

.petland-pask__doneicon {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--link-green);
	display: flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	width: 40px;
}

.petland-pask__done p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Puppy detail: narrow
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.petland-pp__top {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Sticky is a desktop device. Stacked, a sticky rail would pin a 500px card over
	 * the content the visitor scrolled down to read.
	 */
	.petland-pp__railwrap {
		position: static;
	}

	.petland-pbreed,
	.petland-pask__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.petland-pask__done {
		grid-column: 1;
	}

	.petland-pbreed__media {
		max-width: 300px;
	}
}

@media (max-width: 768px) {
	.petland-pp {
		padding: 0 18px 46px;
	}

	.petland-pp__section {
		padding-top: 40px;
	}

	/*
	 * Thumbnails move under the stage. In a 92px side column they were fine at
	 * desktop, but beside a stage narrowed to a phone they take a fifth of the width
	 * from the photo that matters.
	 */
	.petland-pg {
		grid-template-columns: minmax(0, 1fr);
	}

	.petland-pg__stage {
		aspect-ratio: 1 / 1;
		grid-column: 1;
	}

	.petland-pg__thumbs {
		flex-direction: row;
		grid-column: 1;
		grid-row: 2;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.petland-pg__thumbs::-webkit-scrollbar {
		display: none;
	}

	.petland-pg__thumb {
		flex: 0 0 auto;
		width: 68px;
	}

	.petland-pr,
	.petland-pask__inner,
	.petland-pask__form,
	.petland-pbreed {
		padding: 22px;
	}
}

/* ==========================================================================
   Products & nutrition
   ========================================================================== */

.petland-products-page,
.petland-products {
	background: #fff;
}

.petland-products-page {
	overflow: clip;
}

.petland-producthero {
	align-items: flex-end;
	background-color: var(--wp--preset--color--ink);
	background-image: linear-gradient(90deg, rgba(13, 15, 16, 0.82) 0%, rgba(13, 15, 16, 0.46) 48%, rgba(13, 15, 16, 0.14) 78%), var(--petland-products-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	margin-inline: calc(50% - 50vw);
	min-height: 520px;
	padding: 190px max(24px, calc((100vw - 1320px) / 2)) 72px;
	width: 100vw;
}

.petland-producthero__inner {
	max-width: 48rem;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.petland-producthero__kicker,
.petland-products__eyebrow,
.petland-products-cta__eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.petland-producthero__kicker {
	color: #ff9f75;
	margin: 0 0 12px;
}

.petland-producthero__title {
	color: #fff;
	font-size: clamp(2.75rem, 5vw, 4.25rem);
	letter-spacing: -0.045em;
	line-height: 0.98;
	margin: 0;
}

.petland-producthero__location {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 18px 0 0;
}

.petland-products__intro {
	margin: 0 auto;
	max-width: 800px;
	padding: 72px 24px 38px;
	text-align: center;
}

.petland-products__eyebrow {
	color: var(--wp--preset--color--orange);
	margin: 0 0 14px;
}

.petland-products__intro h2 {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -0.04em;
	line-height: 1.06;
	margin: 0;
}

.petland-products__rule {
	background: linear-gradient(90deg, var(--wp--preset--color--orange), #ff9b19);
	border-radius: 999px;
	display: block;
	height: 4px;
	margin: 22px auto;
	width: 66px;
}

.petland-products__intro > p:last-child {
	color: var(--wp--preset--color--muted);
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0;
}

.petland-products__categories {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0 auto;
	max-width: 1320px;
	padding: 14px 24px 72px;
}

.petland-product-card {
	background: #fffaf7;
	border: 1px solid #eadfd8;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 12px 32px rgba(22, 18, 15, 0.045);
	min-height: 230px;
	padding: 26px 22px;
	text-align: left;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.petland-product-card:hover {
	border-color: rgba(240, 75, 24, 0.36);
	box-shadow: 0 18px 40px rgba(22, 18, 15, 0.08);
	transform: translateY(-3px);
}

.petland-product-card__icon {
	align-items: center;
	background: #fff0e9;
	border-radius: 50%;
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.petland-product-card__icon svg {
	height: 21px;
	width: 21px;
}

.petland-product-card h3 {
	color: var(--wp--preset--color--ink);
	font-size: 1.08rem;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 20px 0 9px;
}

.petland-product-card p {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
}

.petland-products-cta {
	background: linear-gradient(112deg, #d94318 0%, #f48b09 100%);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 22px 50px rgba(198, 64, 21, 0.2);
	color: #fff;
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
	margin: 0 auto 8px;
	max-width: 1272px;
	overflow: hidden;
	padding: 54px;
	position: relative;
}

.petland-products-cta::after {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	content: "";
	height: 260px;
	position: absolute;
	right: -90px;
	top: -120px;
	width: 260px;
}

.petland-products-cta__intro,
.petland-products-cta__locations {
	position: relative;
	z-index: 1;
}

.petland-products-cta__eyebrow {
	color: rgba(255, 255, 255, 0.74);
	margin: 0 0 12px;
}

.petland-products-cta__intro h2 {
	color: #fff;
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	letter-spacing: -0.035em;
	line-height: 1.08;
	margin: 0;
	text-transform: capitalize;
}

.petland-products-cta__intro > p:last-child {
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.65;
	margin: 16px 0 0;
	max-width: 34rem;
}

.petland-products-cta__locations {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.petland-products-location {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	padding: 20px;
}

.petland-products-location h3 {
	font-size: 1rem;
	margin: 0;
}

.petland-products-location > p {
	color: var(--wp--preset--color--muted);
	font-size: 0.82rem;
	margin: 5px 0 15px;
}

.petland-products-location__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.petland-products-location__actions a {
	align-items: center;
	background: #fff;
	border: 1px solid #e5d8d0;
	border-radius: 999px;
	color: var(--wp--preset--color--orange-dark);
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 700;
	gap: 6px;
	min-height: 38px;
	padding: 0 12px;
	text-decoration: none;
}

.petland-products-location__actions a:hover {
	background: #fff4ee;
	border-color: rgba(240, 75, 24, 0.36);
	text-decoration: none;
}

.petland-products-location__actions svg {
	height: 15px;
	width: 15px;
}

@media (max-width: 1080px) {
	.petland-products__categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.petland-products-cta {
		grid-template-columns: 1fr;
		margin-inline: 24px;
	}
}

@media (max-width: 700px) {
	.petland-producthero {
		background-image: linear-gradient(90deg, rgba(13, 15, 16, 0.78) 0%, rgba(13, 15, 16, 0.34) 100%), var(--petland-products-image, none);
		background-position: 58% center;
		min-height: 440px;
		padding: 154px 22px 46px;
	}

	.petland-producthero__title {
		font-size: clamp(2.45rem, 12vw, 3.4rem);
	}

	.petland-producthero__location {
		font-size: 0.92rem;
	}

	.petland-products__intro {
		padding: 52px 22px 26px;
	}

	.petland-products__intro > p:last-child {
		font-size: 0.98rem;
	}

	.petland-products__categories {
		grid-template-columns: 1fr;
		padding: 10px 18px 52px;
	}

	.petland-product-card {
		min-height: 0;
	}

	.petland-products-cta {
		border-radius: var(--wp--custom--radius--lg);
		gap: 28px;
		margin-inline: 18px;
		padding: 34px 22px;
	}

	.petland-products-cta__locations {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Claims & warranty
   ========================================================================== */

.petland-claims-page,
.petland-claims {
	background: #fff;
}

.petland-claims-page {
	overflow: clip;
}

.petland-claims-hero {
	align-items: stretch;
	background: linear-gradient(105deg, #fff 0%, #fff 52%, #fff6f1 100%);
	box-sizing: border-box;
	display: grid;
	gap: clamp(36px, 6vw, 84px);
	grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
	margin: 0 auto;
	max-width: 1320px;
	min-height: 700px;
	padding: 180px 24px 72px;
}

.petland-claims-hero__copy {
	align-self: center;
	max-width: 640px;
}

.petland-claims__eyebrow {
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.petland-claims-hero h1 {
	color: var(--wp--preset--color--ink);
	font-size: clamp(3rem, 5.4vw, 4.8rem);
	letter-spacing: -0.055em;
	line-height: 0.98;
	margin: 0;
}

.petland-claims-hero h1::first-line {
	color: var(--wp--preset--color--ink);
}

.petland-claims-hero__lede {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.65;
	margin: 24px 0 0;
	max-width: 600px;
}

.petland-claims-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.petland-claims-hero__points li {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 0.9rem;
	font-weight: 650;
	gap: 8px;
}

.petland-claims-hero__points svg {
	color: var(--wp--preset--color--orange);
	height: 18px;
	width: 18px;
}

.petland-claims-hero__media {
	background-color: #f7e8df;
	background-image: var(--petland-claims-image, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 24px 54px rgba(55, 32, 20, 0.12);
	min-height: 470px;
}

.petland-claims__section-head {
	margin: 0 auto 42px;
	max-width: 760px;
	text-align: center;
}

.petland-claims__section-head h2 {
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	letter-spacing: -0.04em;
	line-height: 1.08;
	margin: 0;
}

.petland-claims-contact,
.petland-claims-faq {
	margin: 0 auto;
	max-width: 1320px;
	padding: 82px 24px;
}

.petland-claims-contact__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.petland-claims-contact__card {
	align-items: center;
	background: #fff;
	border: 1px solid #e6dcd6;
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
	min-height: 235px;
	padding: 30px 22px;
	text-align: center;
}

.petland-claims-contact__icon {
	align-items: center;
	background: #fbe7dc;
	border-radius: 50%;
	color: var(--wp--preset--color--orange-dark);
	display: flex;
	height: 58px;
	justify-content: center;
	width: 58px;
}

.petland-claims-contact__icon svg {
	height: 25px;
	width: 25px;
}

.petland-claims-contact__card h3 {
	color: var(--wp--preset--color--muted);
	font-size: 0.74rem;
	letter-spacing: 0.13em;
	margin: 18px 0 13px;
	text-transform: uppercase;
}

.petland-claims-contact__card a,
.petland-claims-contact__card strong {
	color: var(--wp--preset--color--orange-dark);
	font-size: clamp(1rem, 1.6vw, 1.22rem);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.petland-claims-contact__card strong {
	color: var(--wp--preset--color--ink);
}

.petland-claims-contact__card p {
	color: var(--wp--preset--color--muted);
	font-size: 0.87rem;
	margin: 14px 0 0;
}

.petland-claims-note {
	background: #fff8f3;
	border: 1px solid #e9ddd5;
	border-radius: var(--wp--custom--radius--md);
	margin: 34px auto 0;
	max-width: 1000px;
	padding: 22px 26px;
}

.petland-claims-note strong {
	color: var(--wp--preset--color--orange-dark);
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.petland-claims-note p {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 8px 0 0;
}

.petland-claims-process {
	background: #fbf7f3;
	margin-inline: calc(50% - 50vw);
	padding: 82px max(24px, calc((100vw - 1180px) / 2));
	width: 100vw;
}

.petland-claims-process__inner {
	align-items: start;
	display: grid;
	gap: clamp(44px, 6vw, 84px);
	grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
	margin: 0 auto;
	max-width: 1180px;
}

.petland-claims-process__media {
	align-self: stretch;
	border-radius: 22px;
	box-shadow: 0 18px 50px rgba(35, 30, 27, 0.09);
	margin: 0;
	min-height: 570px;
	overflow: hidden;
}

.petland-claims-process__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: 43% center;
	width: 100%;
}

.petland-claims-process__content .petland-claims__section-head {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

.petland-claims-process__content:only-child {
	grid-column: 1 / -1;
	margin: 0 auto;
	max-width: 820px;
	width: 100%;
}

.petland-claims-steps {
	counter-reset: claims;
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	max-width: none;
	padding: 0;
}

.petland-claims-steps li {
	display: grid;
	gap: 22px;
	grid-template-columns: 52px minmax(0, 1fr);
	padding: 18px 0;
	position: relative;
}

.petland-claims-steps li:not(:last-child)::after {
	background: #e5d7cf;
	content: "";
	height: calc(100% - 44px);
	left: 25px;
	position: absolute;
	top: 62px;
	width: 2px;
}

.petland-claims-steps__number {
	align-items: center;
	background: var(--wp--preset--color--orange);
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-weight: 700;
	height: 50px;
	justify-content: center;
	position: relative;
	width: 50px;
	z-index: 1;
}

.petland-claims-steps h3 {
	font-size: 1.05rem;
	margin: 3px 0 7px;
}

.petland-claims-steps p {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0;
}

.petland-claims-faq__list {
	margin: 0 auto;
	max-width: 980px;
}

.petland-claims-faq details {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: 12px;
	overflow: hidden;
}

.petland-claims-faq summary {
	align-items: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font-weight: 650;
	justify-content: space-between;
	list-style: none;
	min-height: 68px;
	padding: 18px 22px;
}

.petland-claims-faq summary::-webkit-details-marker {
	display: none;
}

.petland-claims-faq summary::after {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
	height: 8px;
	margin-left: 20px;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition);
	width: 8px;
}

.petland-claims-faq details[open] summary {
	background: #fff1e8;
	color: var(--wp--preset--color--orange-dark);
}

.petland-claims-faq details[open] summary::after {
	transform: rotate(-135deg);
}

.petland-claims-faq details p {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0;
	padding: 20px 22px;
}

.petland-claims-cta {
	align-items: center;
	background: linear-gradient(112deg, #d94318 0%, #b84a1c 100%);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: 0 22px 50px rgba(174, 64, 24, 0.19);
	color: #fff;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin: 0 auto 8px;
	max-width: 1272px;
	overflow: hidden;
	padding: 48px 42px;
	position: relative;
}

.petland-claims-cta::after {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	content: "";
	height: 240px;
	position: absolute;
	right: -80px;
	top: -80px;
	width: 240px;
}

.petland-claims-cta > * {
	position: relative;
	z-index: 1;
}

.petland-claims-cta h2 {
	color: #fff;
	font-size: clamp(1.55rem, 2.7vw, 2.2rem);
	letter-spacing: -0.035em;
	margin: 0;
}

.petland-claims-cta p {
	color: rgba(255, 255, 255, 0.82);
	margin: 11px 0 0;
}

.petland-claims-cta__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 10px;
}

.petland-claims-cta__button {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 700;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	text-decoration: none;
}

.petland-claims-cta__button:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	text-decoration: none;
}

.petland-claims-cta__button--light,
.petland-claims-cta__button--light:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--orange-dark);
}

.petland-claims-cta__button svg {
	height: 16px;
	width: 16px;
}

@media (max-width: 980px) {
	.petland-claims-hero {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
	}

	.petland-claims-contact__grid {
		grid-template-columns: 1fr 1fr;
	}

	.petland-claims-contact__card:last-child {
		grid-column: 1 / -1;
	}

	.petland-claims-process__inner {
		gap: 40px;
		grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
	}

	.petland-claims-process__media {
		min-height: 540px;
	}

	.petland-claims-cta {
		align-items: flex-start;
		flex-direction: column;
		margin-inline: 24px;
	}
}

@media (max-width: 700px) {
	.petland-claims-hero {
		gap: 30px;
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 150px 18px 54px;
	}

	.petland-claims-hero h1 {
		font-size: clamp(2.6rem, 13vw, 3.5rem);
	}

	.petland-claims-hero__media {
		min-height: 340px;
		order: -1;
	}

	.petland-claims-contact,
	.petland-claims-faq {
		padding: 58px 18px;
	}

	.petland-claims-contact__grid {
		grid-template-columns: 1fr;
	}

	.petland-claims-contact__card:last-child {
		grid-column: auto;
	}

	.petland-claims-contact__card {
		min-height: 0;
	}

	.petland-claims-process {
		padding-block: 58px;
	}

	.petland-claims-process__inner {
		gap: 34px;
		grid-template-columns: 1fr;
	}

	.petland-claims-process__media {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.petland-claims-process__media img {
		object-position: center 44%;
	}

	.petland-claims-steps li {
		gap: 15px;
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.petland-claims-steps__number {
		height: 42px;
		width: 42px;
	}

	.petland-claims-steps li:not(:last-child)::after {
		left: 20px;
		top: 54px;
	}

	.petland-claims-cta {
		border-radius: var(--wp--custom--radius--lg);
		margin-inline: 18px;
		padding: 34px 22px;
	}

	.petland-claims-cta__actions,
	.petland-claims-cta__button {
		width: 100%;
	}

	.petland-claims-cta__button {
		box-sizing: border-box;
		justify-content: center;
	}
}

/* ==========================================================================
   Saved puppies
   ========================================================================== */

.petland-favs {
	margin: 0 auto;
	max-width: 1540px;
	padding: 40px 24px 74px;
}

.petland-favs *,
.petland-favs *::before,
.petland-favs *::after {
	box-sizing: border-box;
}

.petland-favs__title {
	font-size: clamp(1.875rem, 3.4vw, 2.625rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0 0 22px;
}

.petland-favs__loading {
	color: var(--wp--preset--color--muted);
	margin: 0;
	padding: 20px 0;
}

.petland-favs__loading[hidden],
.petland-favs__empty[hidden],
.petland-favs__grid[hidden],
.petland-favs__gone[hidden],
.petland-favs__note[hidden] {
	display: none;
}

/*
 * The empty state is the common case for a first visit, so it gets real space and a way
 * out rather than a bare line of text.
 */
.petland-favs__empty {
	background-color: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--xl);
	padding: 54px 26px;
	text-align: center;
}

.petland-favs__empty h2 {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

.petland-favs__empty p {
	color: var(--wp--preset--color--muted);
	margin: 0 auto 22px;
	max-width: 34em;
}

.petland-favs__cta {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 700;
	gap: 10px;
	padding: 14px 26px;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition);
}

.petland-favs__cta:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-favs__cta svg {
	height: 15px;
	width: 15px;
}

/* Saved puppies that have since gone home. */
.petland-favs__gone {
	background-color: var(--wp--preset--color--orange-soft);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	margin: 0 0 22px;
	padding: 13px 16px;
}

.petland-favs__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-favs__cell {
	display: flex;
	min-width: 0;
}

.petland-favs__cell > .petland-card {
	width: 100%;
}

.petland-favs__note {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin: 26px 0 0;
}

@media (max-width: 768px) {
	.petland-favs {
		padding: 26px 18px 46px;
	}

	.petland-favs__empty {
		padding: 38px 20px;
	}

	.petland-favs__grid {
		gap: 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Saved puppies: summary bar
   -------------------------------------------------------------------------- */

.petland-favs__bar {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	justify-content: space-between;
	margin: 0 0 26px;
	padding: 18px 22px;
}

.petland-favs__bar[hidden] {
	display: none;
}

.petland-favs__count {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.petland-favs__stores {
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	margin: 2px 0 0;
}

.petland-favs__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.petland-favs__book {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 9px;
	padding: 12px 22px;
	text-decoration: none;
}

.petland-favs__book:hover {
	background-color: var(--wp--preset--color--orange-dark);
	color: #fff;
	text-decoration: none;
}

.petland-favs__book svg {
	height: 14px;
	width: 14px;
}

.petland-favs__clear {
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	padding: 12px 6px;
	text-decoration: underline;
}

.petland-favs__clear:hover {
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   "Keep an eye on these" prompt
   --------------------------------------------------------------------------
   A card, not a modal. It does not trap focus or block the page — someone
   browsing puppies must be able to ignore it and carry on, which is the whole
   reason this is offered instead of a registration wall.
   -------------------------------------------------------------------------- */

.petland-fprompt {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 22px;
	bottom: 20px;
	box-sizing: border-box;
	box-shadow: 0 24px 70px rgba(28, 29, 31, 0.16), 0 4px 16px rgba(28, 29, 31, 0.06);
	max-height: calc(100vh - 40px);
	max-width: none;
	overflow-y: auto;
	padding: 26px;
	position: fixed;
	right: 20px;
	width: min(456px, calc(100vw - 40px));
	z-index: 40;
}

.petland-fprompt *,
.petland-fprompt *::before,
.petland-fprompt *::after {
	box-sizing: border-box;
}

.petland-fprompt[hidden] {
	display: none;
}

.petland-fprompt__close {
	align-items: center;
	appearance: none;
	background: var(--wp--preset--color--warm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: inline-flex;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 16px;
	top: 16px;
	transition: background-color 160ms ease, color 160ms ease;
	width: 34px;
}

.petland-fprompt__close:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.petland-fprompt__close svg {
	height: 16px;
	width: 16px;
}

.petland-fprompt__eyebrow {
	background: var(--wp--preset--color--orange-soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--orange);
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	padding: 7px 10px;
	text-transform: uppercase;
}

.petland-fprompt__title {
	font-size: clamp(1.4rem, 4vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.12;
	margin: 0 0 9px;
	padding-right: 38px;
}

.petland-fprompt__lede {
	color: var(--wp--preset--color--muted);
	font-size: 0.925rem;
	line-height: 1.55;
	margin: 0 0 20px;
}

.petland-fprompt__row {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1.2fr;
	min-width: 0;
}

.petland-fprompt__row input,
.petland-fprompt__phone {
	appearance: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	font: inherit;
	height: 50px;
	max-width: 100%;
	min-width: 0;
	padding: 0 14px;
	width: 100%;
}

.petland-fprompt__phone {
	margin-top: 10px;
}

.petland-fprompt__row input:focus-visible,
.petland-fprompt__phone:focus-visible {
	border-color: var(--wp--preset--color--orange);
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 1px;
}

.petland-fprompt__consent {
	align-items: flex-start;
	background: var(--wp--preset--color--warm);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font-size: 0.78rem;
	gap: 11px;
	line-height: 1.48;
	margin: 14px 0 0;
	padding: 13px 14px;
}

.petland-fprompt__consent input {
	accent-color: var(--wp--preset--color--orange);
	flex: 0 0 auto;
	height: 18px;
	margin: 1px 0 0;
	width: 18px;
}

.petland-fprompt__consent strong {
	display: block;
	font-size: 0.8125rem;
	margin-bottom: 5px;
}

.petland-fprompt__consent-copy {
	color: var(--wp--preset--color--muted);
	display: block;
}

.petland-fprompt__consent-copy a {
	color: var(--wp--preset--color--orange-dark);
	font-weight: 650;
}

.petland-fprompt__terms {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 8px 4px 0 43px;
}

.petland-fprompt__terms summary {
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font-weight: 700;
	list-style-position: outside;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.petland-fprompt__termscopy {
	padding-top: 8px;
}

.petland-fprompt__termscopy :first-child {
	margin-top: 0;
}

.petland-fprompt__termscopy :last-child {
	margin-bottom: 0;
}

.petland-fprompt__error {
	color: var(--wp--preset--color--orange-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 6px 0 0;
}

.petland-fprompt__error[hidden] {
	display: none;
}

.petland-fprompt__actions {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-top: 18px;
}

.petland-fprompt__submit {
	appearance: none;
	background-color: var(--wp--preset--color--orange);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: 48px;
	padding: 12px 25px;
}

.petland-fprompt__submit:hover {
	background-color: var(--wp--preset--color--orange-dark);
}

.petland-fprompt__skip {
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 12px 6px;
	text-decoration: underline;
}

.petland-fprompt__fine {
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	margin: 11px 0 0;
}

.petland-fprompt__done {
	align-items: center;
	display: flex;
	gap: 12px;
}

.petland-fprompt__done[hidden] {
	display: none;
}

.petland-fprompt__doneicon {
	align-items: center;
	background-color: var(--wp--preset--color--value-green);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--link-green);
	display: flex;
	flex: 0 0 auto;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.petland-fprompt__done p {
	margin: 0;
}

@media (max-width: 600px) {
	.petland-fprompt {
		border-radius: 20px 20px 0 0;
		bottom: 0;
		left: 8px;
		max-height: min(88vh, 700px);
		max-width: none;
		padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
		right: 8px;
		width: auto;
	}

	.petland-fprompt__row {
		grid-template-columns: 1fr;
	}

	.petland-fprompt__terms {
		margin-left: 43px;
	}

	.petland-favs__bar {
		padding: 16px 18px;
	}
}

/* Uploaded financing card artwork.
 *
 * Doubled class rather than a single one: airy.css defines .petland-financing__card-art with
 * a gradient and 30px of padding, and it loads after this file — at equal specificity it
 * would win and the image would sit on an orange gradient inside a thick border.
 *
 * object-fit is contain, not cover. This is a picture of a card, and a cropped credit card
 * reads as a broken image rather than a design choice. */
.petland-financing__card-art.petland-financing__card-art--image {
	align-items: center;
	background: var(--wp--preset--color--warm);
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 18px;
}

.petland-financing__card-img {
	border-radius: 12px;
	display: block;
	height: auto;
	max-height: 234px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* Reserved state, in place of the primary action.
 *
 * Ink rather than brand orange: this is a fact about availability, not a promotion, and
 * orange would read as a badge pulling you toward a puppy you cannot have. */
.petland-card__heldnote {
	align-items: center;
	background: var(--wp--preset--color--warm);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	display: flex;
	font-size: 0.875rem;
	font-weight: 650;
	gap: 7px;
	justify-content: center;
	margin: 16px 0 0;
	min-height: 44px;
	padding: 6px 12px;
}

.petland-card__heldnote svg {
	color: var(--wp--preset--color--muted);
	flex: none;
	height: 15px;
	width: 15px;
}

/* The waiting-list action. Outlined, because it is a real offer but a lesser one than
   meeting a puppy you can actually have. */
.petland-card__notify {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--orange);
	display: flex;
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	margin-top: 8px;
	min-height: 48px;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
	width: 100%;
}

.petland-card__notify:hover,
.petland-card__notify:focus-visible {
	background-color: var(--wp--preset--color--warm);
	border-color: var(--wp--preset--color--orange);
}

.petland-card__notify svg {
	height: 14px;
	transition: transform var(--wp--custom--transition);
	width: 14px;
}

.petland-card__notify:hover svg {
	transform: translateX(3px);
}