/*
Theme Name: Creative Core Group
Theme URI: https://creativecoregroup.com
Author: Creative Core Group
Author URI: https://creativecoregroup.com
Description: A minimal, dependency-free WordPress block theme for pet retail. Design tokens live in theme.json and are overridable per site from Configuration > Brand; live inventory syncs from a kennel management system into a native custom post type. No page builder, no build step.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.19.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petland-core
Tags: block-theme, full-site-editing, custom-colors, custom-menu, editor-style, featured-images
*/

/*
 * Dimensions in this file were measured from the franchise reference rendering
 * with getComputedStyle at a 1476px viewport, then written as our own rules.
 * Where a value looks oddly specific (10px sidebar padding, 6.4px button
 * padding, -0.8px tracking) it is measured, not invented — don't "tidy" it.
 *
 * Breakpoints, smallest last, so the narrow overrides win on source order:
 *
 *   75em   / 1200px  fixed three-column grid; below this the count is intrinsic
 *   64em   / 1024px  filter sidebar becomes a disclosure panel
 *   47.99em/  767px  single-column page layout
 *   599px           WordPress collapses core/navigation to its own hamburger
 *   22em   /  352px  both store blocks stop fitting side by side
 *
 * Touch sizing is a separate concern from width and lives in its own block near
 * the end of the file, keyed off `pointer: coarse` as well as a width clause.
 */

/* ==========================================================================
   Token migration shim
   ==========================================================================

   theme.json now carries the redesign's palette. The component rules below this
   point were written against the previous one, and a CSS custom property that
   resolves to nothing does not fall back — the whole declaration is dropped, so
   an orphaned token name means an invisible border or a transparent background
   rather than a loud error.

   Rather than rewrite 2,400 lines in one pass and verify none of it, the old
   names are aliased onto the new palette here. Components render in the new
   colours immediately, and each alias gets deleted as the component that used it
   is rebuilt. When this block is empty the migration is finished.

   Aliases, not duplicates: there is still exactly one source of truth per colour.
   ========================================================================== */

:root {
	/* Renamed. */
	--wp--preset--color--surface: var(--wp--preset--color--warm);
	--wp--preset--color--body: var(--wp--preset--color--muted);

	/*
	 * Retired. The old palette carried three accent hues for badges and buttons
	 * that the redesign deliberately drops — "too many colors" is called out as
	 * something to avoid. They collapse onto the two the new system has.
	 */
	--wp--preset--color--orange-light: var(--wp--preset--color--orange);
	--wp--preset--color--navy: var(--wp--preset--color--ink);
	--wp--preset--color--blue: var(--wp--preset--color--link-blue);

	/* The redesign has no full-width gradient surfaces; these flatten. */
	--wp--preset--gradient--promo: var(--wp--preset--color--orange);
	--wp--preset--gradient--orange-panel: var(--wp--preset--color--orange);

	/* Custom shadow map, replaced by the preset scale in theme.json. */
	--wp--custom--shadow--card: var(--wp--preset--shadow--card);
	--wp--custom--shadow--header: var(--wp--preset--shadow--card);
	--wp--custom--shadow--lifted: var(--wp--preset--shadow--lifted);
	--wp--custom--shadow--panel: var(--wp--preset--shadow--float);

	/* One family now, so the display alias points at it. */
	--wp--preset--font-family--display: var(--wp--preset--font-family--sans);
}

/* Reference body is white — the grey belongs to the listing section, not body. */
.petland-archive {
	background-color: var(--wp--preset--color--page);
}

/*
 * Templates own their vertical rhythm via section padding. Core's default
 * blockGap margin between top-level blocks otherwise leaves a white band
 * between the promo bar and the grey listing section.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

:root {
	--petland-max: 1320px;
	--petland-sidebar: 280px;
	--petland-transition: 150ms ease;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

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

:where(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

/*
 * Shared reset for every button this theme styles itself.
 *
 * A <button> is not a neutral box: the UA gives it a 2px outset black border
 * and it does not inherit font-family. Any element switched from <a> to
 * <button> therefore gains a black outline and silently drops off the brand
 * typeface. Reset here rather than per-component so the next button added
 * cannot reintroduce it. Deliberately not the `font` shorthand — that would
 * clobber the size and weight each component sets below.
 */
.petland-puppy-card__badge,
.petland-promo__close,
.petland-filters__submit,
.petland-consent__toggle,
.petland-archive__intro-toggle {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* ==========================================================================
   Tier 1 — orange brand bar
   ========================================================================== */

.petland-brandbar {
	position: relative;
	z-index: 21;
}

.petland-brandbar__inner {
	row-gap: 12px !important;
}

.petland-brandbar__brand {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The wordmark is a colour logo on orange, so keep it on a white chip unless a
   white-on-transparent version is supplied. */
.petland-brandbar .petland-brand img {
	max-width: 190px;
}

.petland-brandbar__group {
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
}

.petland-brandbar .petland-brand--text a {
	color: #fff;
}

/* Location blocks */

.petland-locbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petland-locbar__item {
	text-align: right;
}

.petland-locbar p {
	margin: 0;
}

.petland-locbar__city {
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.petland-locbar__phone a {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 1.0625rem;
	font-weight: 700;
	gap: 6px;
	line-height: 1.3;
	text-decoration: none;
}

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

.petland-locbar__directions a {
	align-items: center;
	color: rgba(255, 255, 255, 0.88);
	display: inline-flex;
	font-size: 0.75rem;
	gap: 4px;
	text-decoration: none;
}

.petland-locbar__directions a:hover,
.petland-locbar__phone a:hover {
	color: #fff;
	text-decoration: underline;
}

.petland-locbar__directions svg {
	height: 12px;
	width: 12px;
}

/* ==========================================================================
   Tier 2 — nav bar with drawer trigger
   ========================================================================== */

.petland-navbar {
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: relative;
	z-index: 20;
}

.petland-navbar__inner {
	row-gap: 10px !important;
}

.petland-menubtn {
	align-items: center;
	background-color: #16202c;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 8px;
	letter-spacing: 0.08em;
	padding: 11px 20px;
	text-transform: uppercase;
	transition: background-color var(--petland-transition);
}

.petland-menubtn:hover {
	background-color: #24313f;
}

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

/* ==========================================================================
   Off-canvas drawer
   ========================================================================== */

.petland-drawer {
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 9998;
}

.petland-drawer__backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 200ms ease;
}

.petland-drawer__panel {
	bottom: 0;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	left: 0;
	max-width: 88vw;
	overflow-y: auto;
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	transition: transform 220ms ease;
	width: 380px;
}

/* Open state, toggled by JS. */
.petland-drawer.is-open {
	pointer-events: auto;
}

.petland-drawer.is-open .petland-drawer__backdrop {
	opacity: 1;
}

.petland-drawer.is-open .petland-drawer__panel {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.petland-drawer__backdrop,
	.petland-drawer__panel {
		transition: none;
	}
}

.petland-drawer__head {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	padding: 20px 24px;
}

.petland-drawer__title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 900;
	margin: 0;
}

.petland-drawer__close {
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	justify-content: center;
	padding: 4px;
	transition: color var(--petland-transition);
}

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

.petland-drawer__close svg {
	height: 22px;
	width: 22px;
}

/* Drawer nav */

.petland-drawer__nav {
	padding: 8px 0;
}

.petland-drawer__nav .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.petland-drawer__nav .wp-block-navigation-item {
	width: 100%;
}

.petland-drawer__nav .wp-block-navigation-item__content {
	border-left: 3px solid transparent;
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 1rem;
	font-weight: 500;
	padding: 13px 24px;
	text-decoration: none;
	transition: background-color var(--petland-transition), color var(--petland-transition);
	width: 100%;
}

.petland-drawer__nav .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--orange);
}

/* Active item: orange text on a tint with an orange edge. */
.petland-drawer__nav .current-menu-item > .wp-block-navigation-item__content,
.petland-drawer__nav .wp-block-navigation-item.is-current > .wp-block-navigation-item__content {
	background-color: #fdf1ec;
	border-left-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
	font-weight: 700;
}

/*
 * Core renders the submenu toggle as a 10px glyph, which is a fine hover target
 * on a desktop dropdown and unusable in a drawer opened by thumb. The drawer is
 * touch-driven at every width, so this is sized outside a media query.
 */
.petland-drawer__nav .wp-block-navigation__submenu-icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
}

.petland-drawer__nav .wp-block-navigation__submenu-icon svg {
	height: 14px;
	width: 14px;
}

/* Submenus expand inline rather than flying out. */
.petland-drawer__nav .wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: none;
	left: auto;
	min-width: 0;
	opacity: 1;
	padding: 0;
	position: static;
	visibility: visible;
	width: 100%;
}

.petland-drawer__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
	padding-left: 40px;
}

/* Gap for this range is set in the Narrow screens section at the end. */
@media (max-width: 40em) {
	.petland-locbar__item {
		text-align: left;
	}
}

/* ==========================================================================
   Header — white bar, measured nav at 16px/600, links at 65% black
   ========================================================================== */

.petland-header {
	box-shadow: var(--wp--custom--shadow--header);
	position: relative;
	z-index: 20;
}

.petland-header__inner {
	row-gap: 1rem !important;
}

.petland-header .wp-block-site-logo img,
.petland-brand img {
	display: block;
	height: auto;
	max-width: 180px;
	width: auto;
}

/* Text fallback shown until a logo file is added. */
.petland-brand--text a {
	color: var(--wp--preset--color--orange);
	font-size: 1.375rem;
	font-weight: 900;
	letter-spacing: -0.4px;
	text-decoration: none;
}

.petland-nav {
	flex: 1 1 auto;
}

.petland-nav .wp-block-navigation__container {
	gap: clamp(0.5rem, 1.1vw, 1rem);
}

.petland-nav .wp-block-navigation-item__content {
	color: rgba(0, 0, 0, 0.65) !important;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	padding: 8px;
	text-decoration: none;
}

.petland-nav .wp-block-navigation-item__content:hover,
.petland-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--orange);
}

.petland-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--custom--shadow--card);
	padding-block: 6px;
}

.petland-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 7px 18px;
}

/* Header store block */

.petland-store-info {
	line-height: 1.35;
	text-align: right;
}

.petland-store-info p {
	margin: 0;
}

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

.petland-store-info__address {
	color: var(--wp--preset--color--body);
	font-size: 0.8125rem;
}

.petland-store-info__phone a {
	align-items: center;
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.9375rem;
	font-weight: 700;
	gap: 6px;
	text-decoration: none;
}

.petland-store-info__phone svg {
	color: var(--wp--preset--color--orange);
	height: 15px;
	width: 15px;
}

/* ==========================================================================
   Promo bar — measured: 1200px container, 16px gap, 49px tall
   ========================================================================== */

.petland-promo {
	background: var(--wp--preset--gradient--promo);
	color: #fff;
	position: relative;
	z-index: 10;
}

.petland-promo__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
	min-height: 49px;
	padding: 8px 16px;
	position: relative;
}

.petland-promo p {
	margin: 0;
}

.petland-promo__headline {
	font-size: 1rem;
	font-weight: 700;
}

.petland-promo__offer {
	font-size: 0.9375rem;
}

.petland-promo__countdown {
	display: flex;
	gap: 4px;
}

.petland-promo__unit {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.22);
	border-radius: var(--wp--custom--radius--xs);
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	min-width: 32px;
	padding: 5px 6px;
}

.petland-promo__value {
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.petland-promo__label {
	font-size: 0.5625rem;
	letter-spacing: 0.08em;
	opacity: 0.9;
	text-transform: uppercase;
}

/* Measured: 14px/600, 4px radius, 6.4px vertical padding */
.petland-promo__cta {
	background-color: #fff;
	border-radius: var(--wp--custom--radius--xs);
	color: #333;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 6.4px 16px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--petland-transition);
	white-space: nowrap;
}

.petland-promo__cta:hover {
	background-color: #f0f0f0;
	text-decoration: none;
}

.petland-promo__close {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.2);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 30px;
	justify-content: center;
	padding: 0;
	transition: background-color var(--petland-transition);
	width: 30px;
}

.petland-promo__close:hover {
	background-color: rgba(0, 0, 0, 0.35);
}

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

@media (min-width: 62em) {
	.petland-promo__close {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ==========================================================================
   Archive header — measured h1 40px/900/-0.8px, count 17px/700
   ========================================================================== */

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

.petland-archive__title {
	margin: 0;
}

.petland-breadcrumb {
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
	margin: 0;
}

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

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

.petland-available-count {
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	text-align: right;
}

/* ==========================================================================
   Archive SEO intro — indexable prose between the title and the filters
   ========================================================================== */

/*
 * The wrapper is alignwide so the copy starts on the same left edge as the H1,
 * but the measure is capped well short of that: 1320px of running text is far
 * too wide to read comfortably.
 */
.petland-archive__intro-wrap {
	margin-block-start: 10px;
}

.petland-archive__intro {
	max-width: 62rem;
}

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

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

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

/*
 * Two lines collapsed. Long SEO copy otherwise pushes the grid below the fold,
 * and the puppies are what visitors came for — the text is here for crawlers
 * and for the minority who want the detail, so it opens on request.
 */
.petland-archive__intro-text.is-clamped {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.petland-archive__intro-toggle {
	background: none;
	color: var(--wp--preset--color--orange);
	font-size: 0.9375rem;
	font-weight: 700;
	margin-top: 4px;
	padding: 0;
	text-decoration: underline;
}

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

.petland-archive__layout {
	align-items: flex-start;
}

@media (max-width: 781px) {
	.petland-archive__meta,
	.petland-available-count,
	.petland-breadcrumb {
		text-align: left;
	}
}

/* ==========================================================================
   Filter sidebar — measured: 280px wide, 10px padding, 12px radius
   ========================================================================== */

.petland-filters {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 10px;
}

.petland-filters__group {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
}

.petland-filters__group:last-of-type {
	margin-bottom: 0;
}

/* Measured: 18px/700, 12px bottom padding */
.petland-filters__legend {
	align-items: center;
	border-bottom: 2px solid var(--wp--preset--color--orange);
	color: var(--wp--preset--color--ink);
	display: flex;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	gap: 8px;
	line-height: 1.2;
	padding: 0 0 12px;
	width: 100%;
}

.petland-filters__legend svg {
	color: var(--wp--preset--color--ink);
	height: 19px;
	width: 19px;
}

.petland-filters__list {
	list-style: none;
	margin: 0;
	padding: 12px 4px 0;
}

.petland-filters__list--scroll {
	max-height: 26rem;
	overflow-y: auto;
}

.petland-filters__item label {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 10px;
	padding: 6px 0;
}

.petland-filters__item input[type="checkbox"] {
	accent-color: var(--wp--preset--color--orange);
	flex: 0 0 auto;
	height: 18px;
	margin: 0;
	width: 18px;
}

.petland-filters__name {
	color: var(--wp--preset--color--ink);
	flex: 1 1 auto;
	font-size: 1rem;
}

.petland-filters__item label:hover .petland-filters__name {
	color: var(--wp--preset--color--orange);
}

.petland-filters__count {
	color: var(--wp--preset--color--muted);
	flex: 0 0 auto;
	font-size: 0.9375rem;
}

.petland-filters__submit {
	background-color: var(--wp--preset--color--orange);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: #fff;
	cursor: pointer;
	font-weight: 700;
	margin-top: 1rem;
	padding: 10px 20px;
	width: 100%;
}

/* ==========================================================================
   Breed heading — shown when exactly one breed is filtered
   ========================================================================== */

.petland-breed-heading {
	max-width: 62rem;
}

.petland-breed-heading__intro {
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 600;
	margin: 10px 0 0;
}

.petland-breed-heading__body {
	margin-top: 12px;
}

.petland-breed-heading__text {
	color: var(--wp--preset--color--body);
	font-size: 1rem;
	line-height: 1.6;
}

.petland-breed-heading__text p {
	margin: 0 0 0.8em;
}

.petland-breed-heading__text p:last-child {
	margin-bottom: 0;
}

.petland-breed-heading__text.is-clamped {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.petland-breed-heading__toggle {
	background: none;
	border: 0;
	color: var(--wp--preset--color--orange);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	margin-top: 6px;
	padding: 0;
	text-decoration: underline;
}

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

.petland-breed-traits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.petland-breed-traits__item {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xs);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 7px 12px;
}

.petland-breed-traits__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.petland-breed-traits__value {
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
	font-weight: 700;
}

/* Scored traits */

.petland-breed-scores {
	display: grid;
	gap: 10px;
	margin-top: 18px;
	max-width: 30rem;
}

.petland-breed-score {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: 9rem 1fr 3rem;
}

.petland-breed-score__label {
	color: var(--wp--preset--color--body);
	font-size: 0.875rem;
	font-weight: 600;
}

.petland-breed-score__track {
	background-color: var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	display: block;
	height: 8px;
	overflow: hidden;
}

.petland-breed-score__fill {
	background-color: var(--wp--preset--color--orange);
	border-radius: inherit;
	display: block;
	height: 100%;
}

.petland-breed-score__value {
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

.petland-breed-hypo {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: 4px 0 0;
}

.petland-breed-hypo__label {
	color: var(--wp--preset--color--body);
	font-size: 0.875rem;
	font-weight: 600;
}

.petland-breed-hypo__value {
	border-radius: var(--wp--custom--radius--pill);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 12px;
	text-transform: uppercase;
}

.petland-breed-hypo__value--yes {
	background-color: #e3f4e6;
	color: #1e7a34;
}

.petland-breed-hypo__value--no {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--body);
}

@media (max-width: 32em) {
	.petland-breed-score {
		grid-template-columns: 7rem 1fr 2.6rem;
		gap: 8px;
	}
}

/* Breed image picker in the taxonomy admin. */
.petland-breed-image__preview img {
	border-radius: 4px;
	display: block;
	height: auto;
	margin-bottom: 6px;
	max-width: 80px;
}

/* ==========================================================================
   Search bar — filter toggle / location / search / sort
   ========================================================================== */

.petland-searchbar {
	align-items: stretch;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
	display: flex;
	margin: 0 0 24px;
	min-height: 58px;
	overflow: hidden;
}

/* Filter toggle */

.petland-searchbar__filters {
	align-items: center;
	background: none;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 0 20px;
	transition: color var(--petland-transition);
}

.petland-searchbar__filters:hover,
.petland-searchbar__filters[aria-expanded="true"] {
	color: var(--wp--preset--color--orange);
}

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

/* Location segment */

.petland-searchbar__location {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	margin: 0;
	padding: 0 18px;
	position: relative;
}

.petland-searchbar__location svg {
	flex: 0 0 auto;
	height: 17px;
	width: 17px;
}

.petland-searchbar__location select {
	appearance: none;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	padding: 0 22px 0 0;
}

.petland-searchbar__location select option {
	color: var(--wp--preset--color--ink);
}

/*
 * Explicit dimensions are required, not optional: an inline SVG with no
 * width/height expands to fill its container, which rendered the chevron at
 * several hundred pixels across the sort control.
 */
.petland-searchbar__location > svg:last-child,
.petland-searchbar__sort > svg:last-child {
	height: 16px;
	pointer-events: none;
	position: absolute;
	right: 14px;
	width: 16px;
}

.petland-searchbar__location > svg:last-child {
	right: 14px;
}

.petland-searchbar__location--static span {
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Search field */

.petland-searchbar__search {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 12px;
	min-width: 0;
	padding: 0 18px;
	transition: box-shadow var(--petland-transition);
}

.petland-searchbar__search:focus-within {
	box-shadow: inset 0 0 0 1px rgba(213, 65, 20, 0.52), 0 0 0 3px rgba(213, 65, 20, 0.1);
}

.petland-searchbar__search svg {
	color: var(--wp--preset--color--muted);
	flex: 0 0 auto;
	height: 19px;
	width: 19px;
}

/*
 * `align-self: stretch` is a hit-area fix, not a visual one. The input has no
 * border or background, and a UA `line-height: normal` it does not inherit from
 * the body, so its box was only 19px tall inside a 58px bar — most of the area
 * that reads as "the search field" was not tappable. Stretching costs nothing
 * visually because Chrome and Safari centre single-line input text vertically.
 */
.petland-searchbar__search input {
	align-self: stretch;
	background: none;
	border: 0;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
	padding: 0;
	width: 100%;
}

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

.petland-searchbar__search input:focus,
.petland-searchbar__search input:focus-visible {
	box-shadow: none;
	outline: 0;
}

/* Sort */

.petland-searchbar__sort {
	align-items: center;
	border-left: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	padding: 0 18px;
	position: relative;
}

.petland-searchbar__sort > svg:first-child {
	color: var(--wp--preset--color--ink);
	height: 18px;
	width: 18px;
}

/* Stretched for the same hit-area reason as the search input above. */
.petland-searchbar__sort select {
	align-self: stretch;
	appearance: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	padding: 0 22px 0 0;
}

/* Reset sits inside the bar now that it has replaced the breed toolbar. */
.petland-searchbar__reset {
	align-items: center;
	border-left: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--body);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 6px;
	padding: 0 18px;
	text-decoration: none;
}

.petland-searchbar__reset:hover {
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}

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

.petland-searchbar__go {
	background-color: var(--wp--preset--color--orange);
	border: 0;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	padding: 0 20px;
}

/*
 * The sidebar is a toggleable panel until there is room for it alongside the
 * grid. 280px of a 782px viewport is 36% of the screen spent on filters, so the
 * cut-off is 64em rather than the 781px it used to be — tablets get the toggle.
 *
 * Above the cut-off the sidebar is permanent, which would leave the toggle in
 * the search bar as a control that changes nothing. It is hidden there instead.
 */
@media (max-width: 63.99em) {
	.petland-archive__sidebar {
		display: none;
	}

	.petland-archive__sidebar.is-open {
		display: block;
	}
}

@media (min-width: 64em) {
	/*
	 * Above the cut-off the sidebar is permanent, so the funnel collapses it
	 * rather than revealing it — same control, inverted default. Which class
	 * the button toggles is decided in JS, since the meaning flips here.
	 */
	.petland-archive__sidebar.is-collapsed {
		display: none;
	}
}

@media (max-width: 47.99em) {
	.petland-searchbar {
		flex-wrap: wrap;
		min-height: 0;
		padding: 8px;
	}

	.petland-searchbar__location {
		border-radius: var(--wp--custom--radius--xs);
		order: 1;
		padding: 10px 14px;
	}

	.petland-searchbar__filters {
		order: 0;
		padding: 10px 14px;
	}

	.petland-searchbar__search {
		flex: 1 1 100%;
		order: 3;
		padding: 10px 4px;
	}

	.petland-searchbar__sort {
		border-left: 0;
		order: 2;
		padding: 10px 14px;
	}
}

/* ==========================================================================
   Toolbar — measured select: 15px/700, 8px radius, 10/38/10/14 padding
   ========================================================================== */

.petland-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.petland-toolbar__form {
	margin: 0;
}

.petland-select {
	position: relative;
}

.petland-select select {
	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);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	max-width: 360px;
	min-width: 256px;
	padding: 10px 38px 10px 14px;
}

.petland-select svg {
	color: var(--wp--preset--color--ink);
	height: 18px;
	pointer-events: none;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
}

/* Measured: 13px/700, muted slate */
.petland-toolbar__reset {
	align-items: center;
	color: var(--wp--preset--color--body);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 700;
	gap: 6px;
	text-decoration: none;
}

.petland-toolbar__reset:hover {
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}

.petland-toolbar__reset.is-inactive {
	opacity: 0.55;
	pointer-events: none;
}

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

.petland-archive__rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--ink);
	margin-block: 16px 24px;
	opacity: 1;
}

/* ==========================================================================
   Puppy grid + card — measured card: 311px wide, 12px radius, 0 4px 16px/8%
   ========================================================================== */

/*
 * Column count is intrinsic below the wide breakpoint, fixed above it.
 *
 * The fixed count used to start at 48em, which meant three columns were forced
 * as soon as the sidebar reappeared — at 782px that left each card 125px wide.
 * auto-fill derives the count from the space actually available, so the band
 * between phone and desktop resolves to one or two columns on its own.
 *
 * The `min()` floor matters: a bare `minmax(17.5rem, 1fr)` cannot shrink below
 * 280px, so on a 320px phone the track would overflow its container. Falling
 * back to 100% lets the single column match the column width instead.
 */
.petland-puppy-grid {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 1200px: the first width where sidebar + three ~264px cards all fit. */
@media (min-width: 75em) {
	.petland-puppy-grid {
		grid-template-columns: repeat(var(--petland-columns, 3), minmax(0, 1fr));
	}
}

.petland-puppy-card {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow var(--petland-transition), transform var(--petland-transition);
}

@media (prefers-reduced-motion: no-preference) {
	.petland-puppy-card:focus-within,
	.petland-puppy-card:hover {
		box-shadow: var(--wp--custom--shadow--lifted);
		transform: translateY(-3px);
	}
}

/* Media */

.petland-puppy-card__media {
	position: relative;
}

/*
 * The link is the square frame and the image fills it absolutely. Putting the
 * aspect-ratio on the wrapper rather than the <img> means no width/height
 * attribute or intrinsic ratio can defeat the crop — the photo always covers
 * the square, zooming in as needed.
 */
.petland-puppy-card__media-link {
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--surface);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

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

/* Measured badge text: 12px/700, 0.6px tracking, uppercase */
.petland-puppy-card__badge {
	align-items: center;
	background-color: var(--wp--preset--color--orange);
	border-radius: var(--wp--custom--radius--xs);
	color: #fff;
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	gap: 6px;
	left: 12px;
	letter-spacing: 0.6px;
	line-height: 1;
	padding: 8px 12px;
	position: absolute;
	text-decoration: none;
	text-transform: uppercase;
	top: 12px;
	transition: background-color var(--petland-transition);
}

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

.petland-puppy-card__badge svg {
	height: 14px;
	width: 14px;
}

.petland-puppy-card__location {
	align-items: center;
	background-color: #fff;
	border-radius: var(--wp--custom--radius--xs);
	bottom: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
	color: var(--wp--preset--color--ink);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 5px;
	line-height: 1;
	padding: 7px 10px;
	position: absolute;
	right: 12px;
}

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

/* Body */

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

.petland-puppy-card__breed {
	color: var(--wp--preset--color--orange);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.petland-puppy-card__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: -0.4px;
	line-height: 1.15;
	margin: 0;
}

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

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

/* Stat boxes */

.petland-puppy-card__stats {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
}

.petland-puppy-card__stat {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-height: 62px;
	padding: 8px 4px;
	text-align: center;
}

.petland-puppy-card__stat-icon {
	color: var(--wp--preset--color--orange);
	display: flex;
}

.petland-puppy-card__stat-icon svg {
	height: 16px;
	width: 16px;
}

/* Dates like 07-24-2024 must not break across lines in a narrow box. */
.petland-puppy-card__stat-value {
	color: var(--wp--preset--color--body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* Action buttons */

.petland-puppy-card__actions {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr 1.55fr;
	margin-top: 2px;
}

.petland-action {
	align-items: center;
	border-radius: var(--wp--custom--radius--sm);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	line-height: 1.15;
	min-height: 46px;
	padding: 7px 4px;
	text-align: center;
	text-decoration: none;
	transition: filter var(--petland-transition);
}

.petland-action:hover {
	filter: brightness(0.92);
	text-decoration: none;
}

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

.petland-action__label {
	font-size: 0.8125rem;
	font-weight: 700;
}

.petland-action__sub {
	font-size: 0.6875rem;
	font-weight: 400;
	opacity: 0.95;
}

.petland-action--call {
	background-color: var(--wp--preset--color--green);
}

.petland-action--contact {
	background-color: var(--wp--preset--color--orange);
}

.petland-action--visit {
	background-color: var(--wp--preset--color--blue);
	flex-direction: row;
	gap: 6px;
}

.petland-action--visit .petland-action__stack {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

/* More info — measured 16px/600, slate, wrapper pins it to the card bottom */

.petland-puppy-card__more-wrap {
	margin-top: auto;
	padding-top: 12px;
}

.petland-puppy-card__more {
	align-items: center;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--body);
	display: flex;
	font-size: 1rem;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.5;
	padding: 14px;
	text-decoration: none;
}

.petland-puppy-card__more:hover {
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}

.petland-puppy-card__more svg {
	height: 16px;
	transition: transform var(--petland-transition);
	width: 16px;
}

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

/* ==========================================================================
   Pagination / empty / end note
   ========================================================================== */

.petland-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 32px;
}

.petland-pagination .page-numbers {
	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-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	padding: 11px 15px;
	text-decoration: none;
}

.petland-pagination .page-numbers:hover {
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
}

.petland-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: #fff;
}

.petland-empty,
.petland-endnote {
	color: var(--wp--preset--color--body);
	font-size: 1rem;
	font-weight: 600;
	margin: 32px 0 0;
	text-align: center;
}

/* ==========================================================================
   Closing CTA panel — measured: 20px radius, 60/48 padding,
   linear-gradient(135deg, #d45224, #fc8f04), 0 18px 40px rgba(212,82,36,.28)
   ========================================================================== */

.petland-cta {
	background: var(--wp--preset--gradient--orange-panel);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--panel);
	color: #fff;
	overflow: hidden;
	position: relative;
}

/* Paw watermarks, decorative only. */
.petland-cta::before,
.petland-cta::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="%23ffffff" opacity="0.13"><ellipse cx="50" cy="66" rx="21" ry="17"/><ellipse cx="24" cy="40" rx="9" ry="12"/><ellipse cx="42" cy="26" rx="9" ry="13"/><ellipse cx="62" cy="26" rx="9" ry="13"/><ellipse cx="79" cy="41" rx="9" ry="12"/></g></svg>');
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	position: absolute;
}

.petland-cta::before {
	height: 120px;
	left: 2%;
	top: 8%;
	transform: rotate(-18deg);
	width: 120px;
}

.petland-cta::after {
	bottom: 6%;
	height: 150px;
	right: 3%;
	transform: rotate(14deg);
	width: 150px;
}

.petland-cta__inner {
	margin: 0 auto;
	max-width: 46rem;
	padding: 60px 48px;
	position: relative;
	text-align: center;
	z-index: 1;
}

.petland-cta__icon {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	display: inline-flex;
	height: 68px;
	justify-content: center;
	margin-bottom: 20px;
	width: 68px;
}

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

/* Measured: 38.4px/900, -0.768px tracking, 43px line-height */
.petland-cta__title {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: -0.768px;
	line-height: 1.12;
	margin: 0 0 16px;
}

.petland-cta__text {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 auto 28px;
	max-width: 34rem;
}

.petland-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

.petland-cta__button {
	align-items: center;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	gap: 8px;
	padding: 13px 28px;
	text-decoration: none;
	transition: background-color var(--petland-transition), color var(--petland-transition);
}

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

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

.petland-cta__button--solid:hover {
	background-color: #f4f4f4;
	text-decoration: none;
}

.petland-cta__button--outline {
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff;
}

.petland-cta__button--outline:hover {
	background-color: rgba(255, 255, 255, 0.16);
	text-decoration: none;
}

/* ==========================================================================
   Back to top — measured: 48px tall, pill, 10/20 padding, 14.4px/700, 8px gap
   ========================================================================== */

.petland-back-to-top-wrap {
	display: flex;
	justify-content: center;
	margin-top: -24px;
	position: relative;
	z-index: 2;
}

.petland-back-to-top {
	align-items: center;
	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--body);
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 700;
	gap: 8px;
	min-height: 48px;
	padding: 10px 20px;
	text-decoration: none;
}

.petland-back-to-top:hover {
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}

.petland-back-to-top svg {
	height: 17px;
	width: 17px;
}

/* ==========================================================================
   Footer — measured heading: 16px/700 uppercase
   ========================================================================== */

.petland-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

.petland-footer__heading,
.petland-footer-store__city {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1.92px;
	line-height: 1.2;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.petland-footer-store p {
	margin: 0 0 8px;
}

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

.petland-footer-store__socials a {
	color: var(--wp--preset--color--ink);
	display: block;
	transition: color var(--petland-transition);
}

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

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

.petland-footer-store__address,
.petland-footer-store__address a,
.petland-footer-store__phone a {
	color: var(--wp--preset--color--orange);
	font-size: 1rem;
}

.petland-footer-store__phone a {
	text-decoration: underline;
}

.petland-footer-store__hours,
.petland-footer-store__permit {
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
}

.petland-footer__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	text-decoration: none;
}

.petland-footer__nav .wp-block-navigation-item__content:hover,
.petland-footer__nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--orange);
}

/* Franchise seal */

.petland-seal {
	text-align: center;
}

.petland-seal__image {
	height: auto;
	max-width: 150px;
}

.petland-seal__placeholder {
	align-items: center;
	border: 2px dashed var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	display: flex;
	font-size: 0.6875rem;
	height: 150px;
	justify-content: center;
	line-height: 1.3;
	margin: 0 auto;
	padding: 1rem;
	text-align: center;
	width: 150px;
}

.petland-seal__caption {
	color: var(--wp--preset--color--body);
	font-size: 0.8125rem;
	margin: 12px 0 0;
}

.petland-footer__legal .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

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

/* ==========================================================================
   Single puppy fact list
   ========================================================================== */

.petland-puppy-facts {
	border-top: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: 0;
	margin: 0;
}

.petland-puppy-facts__row {
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 10px 0;
}

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

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

/* ==========================================================================
   Narrow screens
   ==========================================================================

   Breakpoints, and why each one exists:

     63.99em / 1023px  sidebar cut-off — see .petland-archive__sidebar
     47.99em /  767px  single-column layout; cards go full width
       599px           WordPress collapses core/navigation to its own hamburger
     30em    /  480px  small phones, where a 40px H1 stops fitting

   Touch sizing: everything clears the WCAG 2.5.8 minimum of 24px, and controls
   that carry a conversion — phone links, Ask About Me, the promo CTA, dismiss
   buttons — are lifted past 40px toward the 44px platform guideline. They are
   not uniformly 44px on purpose: several sit in bars whose heights were
   measured against the reference rendering, and growing those would distort
   the desktop match this theme was built to hold.
   ========================================================================== */

@media (max-width: 63.99em) {
	/* The panel is full width once it is a disclosure rather than a column. */
	.petland-archive__sidebar.is-open {
		flex-basis: 100% !important;
	}

	/*
	 * The breed list scrolls inside a 26rem box on desktop, which on a phone
	 * means a scroll region nested in the page scroll — the inner one swallows
	 * the flick. Let it run to full height and scroll with the document.
	 */
	.petland-filters__list--scroll {
		max-height: none;
		overflow-y: visible;
	}
}

@media (max-width: 47.99em) {
	/*
	 * The H1 is 40px from theme.json to match the reference desktop rendering.
	 * "Puppies For Sale" happens to fit a 320px screen at that size, but the
	 * breed headings do not — "Bernese Mountain Dog Puppies for Sale" is five
	 * wrapped lines and 240px of vertical space before any puppy is visible.
	 */
	.petland-archive__title {
		font-size: 1.875rem;
		letter-spacing: -0.4px;
		line-height: 1.15;
	}

	/* Feed breed names arrive from Petkey and some are long single words. */
	.petland-archive__title,
	.petland-puppy-card__title {
		overflow-wrap: break-word;
	}

	.petland-breed-heading__intro {
		font-size: 1rem;
	}

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

	.petland-action--visit {
		grid-column: 1 / -1;
	}

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

	.petland-toolbar__form {
		flex: 1 1 100%;
	}

	.petland-cta__inner {
		padding: 40px 24px;
	}

	/* Two half-width buttons at this size truncate their labels; stack them. */
	.petland-cta__actions {
		flex-direction: column;
	}

	.petland-cta__button {
		justify-content: center;
		width: 100%;
	}

	/*
	 * The 40px desktop column gap costs a fifth of a 320px screen. Tightening
	 * it is what keeps both stores side by side down to 360px.
	 */
	.petland-locbar {
		gap: 6px 20px;
	}

	/* --- Promo bar ----------------------------------------------------- */

	/*
	 * Four stacked rows made the bar 191px tall, so between it and the two
	 * header tiers 415px of a 390x844 phone was chrome before the H1. Tightening
	 * the gaps and the countdown keeps all four rows and their content while
	 * giving the page back roughly a third of that.
	 */
	.petland-promo__inner {
		gap: 8px 12px;
		min-height: 0;
		padding: 10px 14px;
	}

	.petland-promo__headline {
		font-size: 0.9375rem;
		line-height: 1.3;
		text-align: center;
	}

	.petland-promo__offer {
		font-size: 0.8125rem;
		line-height: 1.3;
	}

	.petland-promo__unit {
		min-width: 28px;
		padding: 3px 5px;
	}

	.petland-promo__value {
		font-size: 0.9375rem;
	}
}

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

   Keyed off pointer capability as well as width. Width alone gets this wrong in
   both directions: an iPad in landscape is 1024–1366px and entirely thumb-
   driven, while a 700px-wide window on a desktop is still a mouse. `pointer:
   coarse` catches the tablet; the width clause catches phones in browsers that
   report pointer capability unreliably, and keeps the rules testable by resizing
   a desktop window.

   Sizes are not uniformly 44px. Everything clears the WCAG 2.5.8 minimum of
   24px, and controls carrying a conversion — phone numbers, Ask About Me, the
   promo CTA, dismiss buttons, pagination — go past 40px toward the platform
   guideline. Controls sitting in bars whose heights were measured against the
   reference rendering are lifted only as far as that measurement tolerates,
   because distorting the desktop match to chase a round number is a bad trade.

   Not listed here, and deliberately: the 18px filter checkboxes. Each one sits
   inside a <label> with 6px block padding, so the real target is the 30px label
   row, not the box. An audit that measures the input alone under-reports it.
   ========================================================================== */

@media (hover: none) and (pointer: coarse), (max-width: 63.99em) {
	/* The primary conversion on the card, previously 30px tall. */
	.petland-puppy-card__badge {
		min-height: 40px;
	}

	/*
	 * `align-self: stretch` on these controls is not enough once the bar wraps:
	 * the segments are then only as tall as their own content, so there is no
	 * spare height to stretch into. Moving the segment's vertical padding onto
	 * the control makes that padding part of the tap target rather than dead
	 * space beside it, and the segment height barely changes.
	 */
	.petland-searchbar__search,
	.petland-searchbar__sort {
		padding-block: 0;
	}

	.petland-searchbar__search input,
	.petland-searchbar__sort select {
		min-height: 44px;
	}

	.petland-pagination .page-numbers {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	.petland-promo__cta {
		align-items: center;
		display: inline-flex;
		min-height: 40px;
	}

	.petland-promo__close {
		height: 36px;
		width: 36px;
	}

	.petland-drawer__close {
		height: 44px;
		justify-content: flex-end;
		width: 44px;
	}

	.petland-modal__close {
		height: 40px;
		width: 40px;
	}

	/*
	 * Tapping a phone number is the likeliest action on this page from a phone,
	 * and both of these were 19–22px. Padding rather than min-height so the
	 * inline-flex box grows symmetrically around the text.
	 */
	.petland-locbar__phone a,
	.petland-footer-store__phone a {
		padding-block: 7px;
	}

	.petland-locbar__directions a,
	.petland-footer-store__address a {
		padding-block: 5px;
	}

	/*
	 * 21px wide before this — a social icon needs a square target. The gap comes
	 * down to compensate: 40px boxes with the desktop 14px gap would push the
	 * icons twice as far apart as the design intends.
	 */
	.petland-footer-store__socials {
		gap: 4px;
	}

	.petland-footer-store__socials a {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 40px;
		min-width: 40px;
	}

	.petland-footer__nav .wp-block-navigation-item__content,
	.petland-footer__legal .wp-block-navigation-item__content {
		padding-block: 10px;
	}

	/*
	 * Inline anchors: vertical padding does not change layout height but is
	 * still honoured for hit testing, so these widen the target for free.
	 */
	.petland-breadcrumb a,
	.petland-puppy-card__title a,
	.petland-brand--text a {
		padding-block: 6px;
	}

	.petland-archive__intro-toggle {
		margin-top: 0;
		padding-block: 8px;
	}
}

/*
 * Below 600px WordPress collapses core/navigation into its own overlay
 * hamburger, which lands beside the drawer's MENU button — two triggers for
 * overlapping link sets, one of them a 24px icon. The drawer carries every
 * link the inline nav does and eight more, so the inline nav steps aside.
 */
@media (max-width: 599px) {
	.petland-navbar .petland-nav {
		display: none;
	}

	.petland-navbar__inner {
		justify-content: space-between;
	}
}

/*
 * 22em / 352px, not the 30em you might reach for first. Two store blocks side
 * by side need 131px each for the phone number to stay on one line, which a
 * 360px screen still affords once the column gap is tightened above. Stacking
 * them any earlier trades a 66px location strip for a 175px one and pushes the
 * H1 further down every mid-size phone — the opposite of the intent.
 */
@media (max-width: 22em) {
	.petland-archive__title {
		font-size: 1.625rem;
	}

	/* Three stat columns leave ~85px each; two is legible, three is not. */
	.petland-puppy-card__stats {
		grid-template-columns: 1fr 1fr;
	}

	.petland-locbar {
		gap: 10px 0;
	}

	.petland-locbar__item {
		flex: 1 1 100%;
	}
}