/*!
 * WooCommerce Pet Gallery — front-end styles.
 *
 * Built on the petland theme's design tokens (theme-polish.css: --ui-*,
 * accessibility.css: --brand-*), each with a neutral fallback so the gallery
 * still looks finished on any other theme. A store's colour scheme therefore
 * flows straight through; nothing here hard-codes the brand orange.
 *
 * Every rule is scoped under .wcpk-gallery (or the <dialog>, which the
 * browser moves to the top layer). Headings carry a :not(#…) ID-weight bump
 * plus !important on size and margin because the theme sizes `.container h1–h4`
 * with !important through long :not() chains — without it the gallery's
 * headings shrank to caption size on phones.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

/* The dialog always renders inside a .wcpk-gallery and inherits these, so a
   per-site colour override set on the gallery reaches it too. */
.wcpk-gallery {
	--wcpk-primary: var(--bs-primary, #c5511c);
	/* petland publishes AA-checked fill/text variants of its primary. PEP and
	   its forks don't, and their raw orange (#F26322) is ~3.2:1 on white, so
	   the fallback darkens it until white-on-fill and text-on-white pass AA. */
	--wcpk-primary-fill: var(--brand-fill, color-mix(in srgb, var(--wcpk-primary) 78%, #000));
	--wcpk-primary-text: var(--brand-text, var(--ui-primary, color-mix(in srgb, var(--wcpk-primary) 78%, #000)));
	--wcpk-primary-soft: var(--ui-primary-soft, color-mix(in srgb, var(--wcpk-primary) 8%, transparent));
	--wcpk-primary-tint: var(--ui-primary-tint, color-mix(in srgb, var(--wcpk-primary) 15%, transparent));
	--wcpk-ink: var(--ui-ink, #0f172a);
	--wcpk-ink-soft: var(--ui-ink-soft, #475569);
	--wcpk-muted: var(--ui-ink-faint, #5f6b7a);
	--wcpk-body: var(--bs-body-color, #4c4c4c);
	--wcpk-surface: var(--ui-surface, #fff);
	--wcpk-sunken: var(--ui-surface-sunken, #f8fafc);
	--wcpk-muted-bg: var(--ui-surface-muted, #f1f5f9);
	--wcpk-line: var(--ui-border, #e2e8f0);
	--wcpk-line-strong: var(--ui-border-strong, #cbd5e1);
	--wcpk-radius-lg: var(--ui-radius, 14px);
	--wcpk-radius: var(--ui-radius-sm, 10px);
	--wcpk-radius-sm: 8px;
	--wcpk-shadow: var(--ui-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08));
	--wcpk-shadow-lift: var(--ui-shadow-lift, 0 10px 25px -8px rgba(15, 23, 42, .15));
	--wcpk-ease: var(--ui-transition, 220ms cubic-bezier(.4, 0, .2, 1));
	--wcpk-female: #be3e5b;
	--wcpk-male: #2f5f9e;
}

/* ==========================================================================
   Base
   ========================================================================== */

.wcpk-gallery {
	position: relative;
	color: var(--wcpk-body);
	font-family: inherit;
	line-height: 1.55;
	box-sizing: border-box;
}

.wcpk-gallery *,
.wcpk-gallery *::before,
.wcpk-gallery *::after { box-sizing: border-box; }

.wcpk-gallery img { max-width: 100%; height: auto; display: block; }

/* Component display rules below would otherwise beat the `hidden` attribute
   on themes without a global [hidden] rule: the loading overlay covered the
   grid for good and "Load more" never went away. */
.wcpk-gallery [hidden] { display: none !important; }

.wcpk-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wcpk-helper-form { display: none !important; }

/* Page width for templates the plugin owns end to end (single page, the
   plugin archive, the clean-layout page). Inside a theme .container the
   shortcode simply fills it. */
.wcpk-container,
.wcpk-page-wrap {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 1.5rem);
}
.wcpk-page-wrap .wcpk-container { padding-inline: 0; }

.wcpk-single__content a,
.wcpk-breed__desc a,
.wcpk-breed__more a,
.wcpk-trait a { color: var(--wcpk-primary-text); }

/* ==========================================================================
   Headings
   ========================================================================== */

.wcpk-gallery .wcpk-page-title:not(#wcpk-x),
.wcpk-gallery .wcpk-section__title:not(#wcpk-x),
.wcpk-gallery .wcpk-hero__heading:not(#wcpk-x),
.wcpk-gallery .wcpk-heading:not(#wcpk-x),
.wcpk-gallery .wcpk-single__title:not(#wcpk-x),
.wcpk-gallery .wcpk-panel__title:not(#wcpk-x),
.wcpk-gallery .wcpk-card__title:not(#wcpk-x) {
	font-family: inherit;
	color: var(--wcpk-ink);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	padding: 0;
	text-transform: none;
}

.wcpk-gallery .wcpk-page-title:not(#wcpk-x) {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
	margin: clamp(1.25rem, 3vw, 2rem) 0 .35rem !important;
}

/* Title as the hero's eyebrow: the page <h1>, set small and spaced so the
   hero heading below it has room instead of colliding with a second big title. */
.wcpk-gallery .wcpk-page-title.wcpk-page-title--eyebrow:not(#wcpk-x) {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 1rem !important;
	color: var(--wcpk-primary-text);
	font-size: .8rem !important;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.wcpk-gallery .wcpk-page-title--eyebrow:not(#wcpk-x)::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wcpk-primary);
}

/* Store copy from the "Pet Gallery" page, under the theme banner. */
.wcpk-page-intro {
	max-width: 62rem;
	margin: .75rem 0 0;
	color: var(--wcpk-body, #4c4c4c);
	font-size: 1.02rem;
	line-height: 1.7;
}
.wcpk-page-intro > :first-child { margin-top: 0; }
/* Under a theme banner there is no plugin title above it. */
.wcpk-gallery > .wcpk-page-intro:first-child,
.wcpk-gallery > style + .wcpk-page-intro { margin-top: clamp(1.25rem, 3vw, 2rem); }
.wcpk-page-intro > :last-child { margin-bottom: 0; }
.wcpk-page-wrap--family { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

.wcpk-eyebrow {
	margin: 0 0 .4rem;
	color: var(--wcpk-primary-text);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
}

.wcpk-hero__accent,
.wcpk-section__accent,
.wcpk-heading__accent {
	font-style: normal;
	color: var(--wcpk-primary-text);
}

/* Section title in the theme's .section-title geometry: centred, accent word
   in the primary colour, a short primary bar underneath. Copied rather than
   reusing the class so it holds up without the theme. */
.wcpk-gallery .wcpk-heading:not(#wcpk-x) {
	position: relative;
	text-align: center;
	font-size: clamp(1.6rem, 3vw, 2.25rem) !important;
	margin: 0 0 clamp(2rem, 4vw, 2.75rem) !important;
	padding-bottom: 1.1rem;
}
.wcpk-gallery .wcpk-heading:not(#wcpk-x)::before,
.wcpk-gallery .wcpk-heading:not(#wcpk-x)::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
/* A faint full rule with the short primary bar centred on it. */
.wcpk-gallery .wcpk-heading:not(#wcpk-x)::before {
	bottom: 1px;
	width: min(14rem, 60%);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wcpk-line), transparent);
}
.wcpk-gallery .wcpk-heading:not(#wcpk-x)::after {
	bottom: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--wcpk-primary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wcpk-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;
	padding: .6rem 1.2rem;
	border: 1.5px solid transparent;
	border-radius: var(--wcpk-radius);
	font-family: inherit;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .005em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background var(--wcpk-ease), color var(--wcpk-ease), border-color var(--wcpk-ease), box-shadow var(--wcpk-ease), transform var(--wcpk-ease);
}

.wcpk-gallery .wcpk-cta--primary,
.wcpk-gallery .wcpk-card__cta {
	background: linear-gradient(135deg, var(--wcpk-primary-fill) 0%, var(--wcpk-primary-text) 100%);
	color: #fff;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wcpk-primary) 25%, transparent);
}
.wcpk-gallery .wcpk-cta--primary:hover,
.wcpk-gallery .wcpk-card__cta:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wcpk-primary) 38%, transparent);
}

.wcpk-gallery .wcpk-cta--ghost {
	background: var(--wcpk-surface);
	color: var(--wcpk-ink);
	border-color: var(--wcpk-line);
}
.wcpk-gallery .wcpk-cta--ghost:hover {
	color: var(--wcpk-primary-text);
	border-color: var(--wcpk-primary);
	background: var(--wcpk-primary-soft);
}

/* Link-mode CTAs are <a>: petland's accessibility layer recolours and
   underlines every `.entry-content a:not(.btn)` with !important, which turned
   a button placed on an ordinary page into orange text on orange. */
.wcpk-gallery a.wcpk-cta:not(#wcpk-x) { text-decoration: none !important; }
.wcpk-gallery a.wcpk-cta--primary:not(#wcpk-x),
.wcpk-gallery a.wcpk-card__cta:not(#wcpk-x) { color: #fff !important; }
.wcpk-gallery a.wcpk-cta--ghost:not(#wcpk-x) { color: var(--wcpk-ink) !important; }
.wcpk-gallery a.wcpk-cta--ghost:not(#wcpk-x):hover { color: var(--wcpk-primary-text) !important; }

/* After the fill rules, so no variant's box-shadow can replace the ring.
   ID weight because petland's `button:focus-visible:not(.btn):not(…)` (0,3,1)
   loads later and squares every <button>'s corners to 6px on keyboard focus;
   the radius is restated for the same reason. The dialog renders inside
   .wcpk-gallery, so this covers any CTA placed in it too. */
.wcpk-gallery .wcpk-cta:not(#wcpk-x):focus-visible {
	outline: 2px solid var(--wcpk-primary-text);
	outline-offset: 2px;
	border-radius: var(--wcpk-radius);
}

.wcpk-cta__icon { width: 16px; height: 16px; flex: none; }

/* Busy state during append, so existing cards aren't covered by the overlay. */
.wcpk-cta.is-loading { pointer-events: none; opacity: .65; }
.wcpk-cta.is-loading::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: wcpk-spin .7s linear infinite;
}

/* ==========================================================================
   Hero (optional; petland renders its own banner and passes hero="no")
   ========================================================================== */

.wcpk-hero {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) {
	.wcpk-hero { grid-template-columns: 1.1fr 1fr; }
}

.wcpk-gallery .wcpk-hero__heading:not(#wcpk-x) {
	font-size: clamp(2rem, 4.4vw, 3.25rem) !important;
	line-height: 1.08;
	margin: 0 0 1rem !important;
}
.wcpk-hero__intro { margin: 0 0 1.5rem; font-size: 1.05rem; max-width: 36rem; }
.wcpk-hero__intro p { margin: 0 0 .75em; }
.wcpk-hero__intro p:last-child { margin-bottom: 0; }
.wcpk-hero__actions { margin: 0 0 1.75rem; }

.wcpk-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
	margin: 0;
	max-width: 30rem;
}
.wcpk-stats__item {
	/* Number pinned to the bottom so a label that wraps on a phone doesn't
	   knock it out of line with its neighbours. */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .25rem;
	padding: .75rem .9rem;
	background: var(--wcpk-sunken);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius);
}
.wcpk-stats dt {
	color: var(--wcpk-muted);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.wcpk-stats dd { margin: .15rem 0 0; color: var(--wcpk-ink); font-size: 1.35rem; font-weight: 700; }

.wcpk-polaroids {
	position: relative;
	aspect-ratio: 5 / 4;
	max-width: 520px;
	width: 100%;
	justify-self: center;
}
.wcpk-polaroid {
	position: absolute;
	width: 44%;
	margin: 0;
	padding: 6px 6px 22px;
	background: #fff;
	border-radius: 6px;
	box-shadow: var(--wcpk-shadow-lift);
	transition: transform var(--wcpk-ease);
}
.wcpk-polaroid img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 3px; }
.wcpk-polaroid:nth-child(1) { top: 8%; left: 0; transform: rotate(-7deg); z-index: 3; }
.wcpk-polaroid:nth-child(2) { top: 0; left: 30%; transform: rotate(4deg); z-index: 4; }
.wcpk-polaroid:nth-child(3) { top: 12%; right: 0; transform: rotate(8deg); z-index: 2; }
.wcpk-polaroid:nth-child(4) { bottom: 0; left: 12%; transform: rotate(-3deg); z-index: 5; }
.wcpk-polaroid:nth-child(5) { bottom: 4%; right: 8%; transform: rotate(5deg); z-index: 1; }
.wcpk-polaroid:hover { transform: rotate(0) translateY(-4px); z-index: 10; }

/* ==========================================================================
   Filter bar (archive toolbar)
   ========================================================================== */

.wcpk-gallery .wcpk-filter {
	display: grid;
	grid-template-columns: 1fr;
	gap: .75rem;
	margin: 1.25rem 0 clamp(1.75rem, 3vw, 2.25rem);
	padding: .9rem;
	background: var(--wcpk-surface);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius-lg);
	box-shadow: var(--wcpk-shadow);
}
/* Phones and small tablets: two across, the long breed list (first in the
   source, so visual and tab order agree) on its own row. Up to 768px rather
   than 576px because petland's 540px container can't fit three 170px tracks,
   which left Gender alone on a half-empty second row. With only one other
   field (no type filter) the two share a row instead. */
@media (max-width: 767.98px) {
	.wcpk-gallery .wcpk-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wcpk-filter__field--breed:not(:nth-last-child(2)) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
	.wcpk-gallery .wcpk-filter { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
}

.wcpk-filter__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.wcpk-filter__field label {
	margin: 0;
	color: var(--wcpk-muted);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Two classes deep so theme-polish's `select:not(...)` (0,1,1) doesn't win.
   The no-JS form's selects get the same look without needing the class. */
.wcpk-gallery select.wcpk-select,
.wcpk-gallery .wcpk-filter--noscript select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: .6rem 2.5rem .6rem .9rem;
	border: 1.5px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius);
	background: var(--wcpk-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .95rem center;
	color: var(--wcpk-ink);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.3;
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--wcpk-ease), box-shadow var(--wcpk-ease);
}
.wcpk-gallery select.wcpk-select:hover,
.wcpk-gallery .wcpk-filter--noscript select:hover { border-color: var(--wcpk-line-strong); }
.wcpk-gallery select.wcpk-select:focus,
.wcpk-gallery .wcpk-filter--noscript select:focus { border-color: var(--wcpk-primary-text); }
/* The AA text token, not the raw brand colour: lime, light-blue, olive, teal
   and mustard primaries are under the 3:1 a focus indicator needs on white.
   An outline rather than only a border/shadow, since this rule outranks the
   theme's own :focus-visible ring. */
.wcpk-gallery select.wcpk-select:focus-visible,
.wcpk-gallery .wcpk-filter--noscript select:focus-visible {
	outline: 2px solid var(--wcpk-primary-text);
	outline-offset: 2px;
}

/* ==========================================================================
   Section header above the grid
   ========================================================================== */

.wcpk-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .75rem 1rem;
	margin: 0 0 1.25rem;
}
.wcpk-gallery .wcpk-section__title:not(#wcpk-x) {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
	margin: 0 !important;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.wcpk-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(.6rem, 1.6vw, 1.25rem);
	min-height: 200px;
}
@media (min-width: 992px) {
	.wcpk-gallery--cols-3 .wcpk-grid,
	.wcpk-gallery--cols-4 .wcpk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.wcpk-gallery--cols-4 .wcpk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Related pets: a short row (3 of a breed) centres instead of leaving the
   fourth column empty on the right. */
.wcpk-grid--related {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 0;
	--wcpk-cols: 2;
}
.wcpk-grid--related > .wcpk-card {
	flex: 0 0 calc((100% - (var(--wcpk-cols) - 1) * clamp(.6rem, 1.6vw, 1.25rem)) / var(--wcpk-cols));
}
@media (min-width: 992px) { .wcpk-grid--related { --wcpk-cols: 3; } }
@media (min-width: 1200px) { .wcpk-grid--related { --wcpk-cols: 4; } }

/* The grid only takes focus programmatically (holding it while a retry
   reloads), never from the keyboard, so it needs no ring of its own. */
[data-wcpk-grid]:focus { outline: none; }

.wcpk-grid__loading {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 6rem;
	background: color-mix(in srgb, var(--wcpk-surface) 72%, transparent);
	border-radius: var(--wcpk-radius-lg);
}
.wcpk-spinner {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--wcpk-line);
	border-top-color: var(--wcpk-primary);
	animation: wcpk-spin .8s linear infinite;
}
@keyframes wcpk-spin { to { transform: rotate(360deg); } }

/* Messages about the whole grid span it rather than sitting in a column. */
.wcpk-empty,
.wcpk-notice {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
	text-align: center;
	background: var(--wcpk-sunken);
	border: 1px dashed var(--wcpk-line-strong);
	border-radius: var(--wcpk-radius-lg);
}
.wcpk-empty p,
.wcpk-notice p { margin: 0; color: var(--wcpk-ink-soft); }
.wcpk-empty p { font-size: 1.05rem; font-weight: 600; color: var(--wcpk-ink); }
.wcpk-empty::before {
	content: "";
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wcpk-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center;
}
.wcpk-notice--error { background: #fef2f2; border: 1px solid #fecaca; }
.wcpk-notice--error p { color: #991b1b; }

/* ==========================================================================
   Card — the theme's product card anatomy
   ========================================================================== */

.wcpk-card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--wcpk-surface);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius-lg);
	box-shadow: var(--wcpk-shadow);
	transition: transform var(--wcpk-ease), box-shadow var(--wcpk-ease), border-color var(--wcpk-ease);
}
.wcpk-card:hover {
	transform: translateY(-3px);
	border-color: var(--wcpk-line-strong);
	box-shadow: var(--wcpk-shadow-lift);
}

/* Square frame + cover: feed photos are a square shot centred on an 800x600
   white canvas, so this crops exactly to the photo, and every card in a row
   gets the same image height whatever the source. */
.wcpk-card__photo {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wcpk-muted-bg);
}
.wcpk-gallery .wcpk-card__photo img:not(#wcpk-x) {
	border-radius: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.wcpk-card:hover .wcpk-card__photo img { transform: scale(1.03); }

/* On-photo chips: 8px radius, uppercase micro type, a lifting shadow. The
   badge sits top-right because stores burn their logo into the top-left. */
.wcpk-card__badge {
	position: absolute;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem .55rem;
	border-radius: var(--wcpk-radius-sm);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
	pointer-events: none;
}
.wcpk-card__badge { top: .6rem; right: .6rem; background: var(--wcpk-primary-fill); color: #fff; }

.wcpk-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: .8rem .9rem .75rem;
}
.wcpk-gallery .wcpk-card__title:not(#wcpk-x) {
	margin: 0 !important;
	font-size: 1.0625rem !important;
	line-height: 1.25;
}
/* Clamp on the link, not the heading: overflow on the h3 would clip the
   link's focus ring. The stretched ::before makes the whole card clickable;
   its containing block is the card, so the clamp doesn't confine it. */
.wcpk-gallery .wcpk-card__title a:not(#wcpk-x) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: inherit !important;
	text-decoration: none !important;
}
.wcpk-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
/* The ring moves to the whole card only where :has() works; elsewhere the
   link keeps its own outline rather than losing focus visibility entirely. */
@supports selector(:has(*)) {
	.wcpk-card__title a:focus-visible { outline: none; }
	.wcpk-card:has(.wcpk-card__title a:focus-visible) {
		outline: 3px solid var(--wcpk-primary-text);
		outline-offset: 2px;
	}
}

.wcpk-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .5rem;
	margin: 0;
	color: var(--wcpk-ink-soft);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
}
/* Separator after each item rather than before, so a wrapped line never
   starts with a stray dot. */
.wcpk-card__meta > span:not(:last-child)::after {
	content: "·";
	content: "·" / ""; /* decorative: not announced; ignored where unsupported */
	margin-left: .5rem;
	color: var(--wcpk-line-strong);
}
.wcpk-card__gender--female { color: var(--wcpk-female); }
.wcpk-card__gender--male { color: var(--wcpk-male); }

/* The action sits above the stretched title link. */
.wcpk-card__cta { position: relative; z-index: 2; }
.wcpk-card > .wcpk-card__cta { margin: 0 .9rem .9rem; }

/* Two-up cards on a phone are ~170px wide: drop the type word (the page is
   already about pets) and tighten the action so its label stays on one line. */
@container (max-width: 230px) {
	.wcpk-card__body { padding: .7rem .7rem .6rem; }
	.wcpk-card__meta { font-size: .66rem; letter-spacing: .04em; }
	.wcpk-card__type { display: none; }
	.wcpk-card > .wcpk-card__cta { margin: 0 .7rem .7rem; padding: .5rem .55rem; font-size: .8rem; gap: .35rem; }
	.wcpk-card__cta .wcpk-cta__icon { display: none; }
	.wcpk-card__badge { font-size: .6rem; padding: .25rem .45rem; }
}

/* ==========================================================================
   Load more, no-JS pager
   ========================================================================== */

.wcpk-loadmore { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: center; }
.wcpk-loadmore .wcpk-cta { min-width: 12rem; }
.wcpk-loadmore__hint { margin: 1rem 0 0; color: var(--wcpk-muted); }

/* Same grid as the JS bar; the Filter button takes the full row on narrow
   screens and a column of the single row from 768px. */
.wcpk-gallery .wcpk-filter.wcpk-filter--noscript { margin: 0 0 1.25rem; }
@media (max-width: 767.98px) {
	.wcpk-filter--noscript > .wcpk-cta { grid-column: 1 / -1; }
	.wcpk-filter--noscript .wcpk-filter__field--breed:nth-last-child(3) { grid-column: auto; }
}
@media (min-width: 768px) {
	.wcpk-gallery .wcpk-filter.wcpk-filter--noscript {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
}
.wcpk-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ==========================================================================
   Dialog (plugin-owned inquiry modal)
   ========================================================================== */

.wcpk-dialog {
	width: calc(100% - 2rem);
	max-width: 540px;
	max-height: calc(100dvh - 2rem);
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--wcpk-radius-lg);
	background: var(--wcpk-surface);
	color: var(--wcpk-body);
	font-family: inherit;
	box-shadow: 0 30px 80px -30px rgba(15, 23, 42, .45);
}
.wcpk-dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.wcpk-dialog__inner { display: flex; flex-direction: column; gap: .9rem; padding: 1.5rem; border-top: 3px solid var(--wcpk-primary); }
.wcpk-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wcpk-dialog__pet { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.wcpk-dialog__pet img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--wcpk-radius); background: var(--wcpk-muted-bg); }
.wcpk-dialog__pet img[src=""],
.wcpk-dialog__pet img:not([src]) { display: none; }
.wcpk-dialog__pet-title { margin: 0; color: var(--wcpk-ink); font-weight: 700; }
.wcpk-dialog__pet-sub { margin: 0; color: var(--wcpk-muted); font-size: .82rem; }
.wcpk-dialog__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 1px solid var(--wcpk-line);
	border-radius: 50%;
	background: var(--wcpk-surface);
	color: var(--wcpk-ink);
	cursor: pointer;
}
.wcpk-dialog__close:hover { background: var(--wcpk-sunken); }
/* Beats petland's 6px `button:focus-visible` radius (see .wcpk-cta). */
.wcpk-dialog__close:not(#wcpk-x):focus-visible {
	outline: 2px solid var(--wcpk-primary-text);
	outline-offset: 2px;
	border-radius: 50%;
}
.wcpk-dialog .wcpk-dialog__title:not(#wcpk-x) {
	margin: 0 !important;
	padding: 0;
	color: var(--wcpk-ink);
	font-family: inherit;
	font-weight: 700;
	line-height: 1.25;
	font-size: 1.3rem !important;
	letter-spacing: -.01em;
}
.wcpk-dialog__lede { margin: 0; color: var(--wcpk-ink-soft); font-size: .95rem; }

/* ==========================================================================
   Widget
   ========================================================================== */

.wcpk-grid--widget { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; min-height: 0; }
.wcpk-card--widget .wcpk-card__body { padding: .55rem .65rem .6rem; }
.wcpk-gallery .wcpk-card--widget .wcpk-card__title:not(#wcpk-x) { font-size: .9rem !important; }
.wcpk-card--widget .wcpk-card__badge { top: .4rem; right: .4rem; font-size: .6rem; }

/* ==========================================================================
   Single pet page — the theme's product page language
   ========================================================================== */

.wcpk-single { padding: clamp(1.25rem, 3vw, 2.25rem) 0 0; }

.wcpk-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	color: var(--wcpk-muted);
	font-size: .85rem;
}
.wcpk-breadcrumb li + li::before { content: "/"; content: "/" / ""; margin-right: .35rem; color: var(--wcpk-line-strong); }
.wcpk-breadcrumb a { color: var(--wcpk-primary-text); text-decoration: none; font-weight: 600; }
.wcpk-breadcrumb a:hover { text-decoration: underline; }

.wcpk-adopted-note {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 1.25rem;
	padding: .8rem 1rem;
	background: var(--wcpk-primary-soft);
	border: 1px solid var(--wcpk-primary-tint);
	border-radius: var(--wcpk-radius);
	color: var(--wcpk-ink);
}
.wcpk-adopted-note > svg { flex: none; color: var(--wcpk-primary); }
.wcpk-adopted-note p { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; min-width: 0; margin: 0; font-size: .95rem; }
/* Allowed to wrap: a long breed ("Cavalier King Charles Spaniel") on one
   unbreakable line ran past the note and off a 360px screen. */
.wcpk-adopted-note a {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	min-width: 0;
	color: var(--wcpk-primary-text);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.wcpk-adopted-note a:hover { text-decoration: underline; }

.wcpk-single__layout {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	align-items: start;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 992px) {
	.wcpk-single__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.wcpk-single__media { position: sticky; top: 1.5rem; }
}

.wcpk-single__photo {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wcpk-muted-bg);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius-lg);
	box-shadow: var(--wcpk-shadow);
}
.wcpk-gallery .wcpk-single__photo img:not(#wcpk-x) {
	border-radius: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.wcpk-single__photo .wcpk-card__badge { top: 1rem; right: 1rem; padding: .4rem .7rem; font-size: .75rem; }

.wcpk-single__detail { display: grid; gap: 1rem; min-width: 0; }

.wcpk-panel {
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: var(--wcpk-surface);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius-lg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.wcpk-single__heading { margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--wcpk-line); }
.wcpk-gallery .wcpk-single__title:not(#wcpk-x) {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important;
	margin: 0 !important;
}
.wcpk-single__subtitle { margin: .35rem 0 0; color: var(--wcpk-ink-soft); font-size: 1rem; font-weight: 500; }

.wcpk-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .6rem;
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	background: var(--wcpk-sunken);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius);
	color: var(--wcpk-ink-soft);
	font-size: .92rem;
}
.wcpk-status strong { color: var(--wcpk-ink); }
.wcpk-status__dot {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--wcpk-primary);
	box-shadow: 0 0 0 4px var(--wcpk-primary-tint);
}

.wcpk-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .65rem;
	margin: 0;
}
@media (min-width: 768px) {
	.wcpk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
	.wcpk-facts { grid-template-columns: 1fr; }
}
.wcpk-fact {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 58px;
	padding: .65rem .75rem .65rem calc(.75rem + 36px + .65rem);
	background: var(--wcpk-sunken);
	border: 1px solid var(--wcpk-line);
	border-radius: var(--wcpk-radius);
}
.wcpk-fact__icon {
	position: absolute;
	top: 50%;
	left: .75rem;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: none;
	border-radius: 50%;
	background: var(--wcpk-primary-soft);
	color: var(--wcpk-primary-text);
}
.wcpk-fact dt {
	color: var(--wcpk-muted);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.3;
}
.wcpk-fact dd { margin: .1rem 0 0; color: var(--wcpk-ink); font-size: .9rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.wcpk-single__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.wcpk-single__actions .wcpk-cta { flex: 1 1 14rem; }

/* Inquiry panel: the theme's .inquire-form — primary bar on top, tinted wash. */
.wcpk-panel--form {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--wcpk-primary-soft), var(--wcpk-surface) 9rem);
	border-color: var(--wcpk-primary-tint);
}
.wcpk-panel--form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--wcpk-primary-fill), var(--wcpk-primary-text));
}
.wcpk-gallery .wcpk-panel__title:not(#wcpk-x) { font-size: 1.3rem !important; margin: 0 0 .35rem !important; }
.wcpk-panel__lede { margin: 0 0 1rem; color: var(--wcpk-ink-soft); font-size: .95rem; }
.wcpk-panel__form .gform_wrapper { margin: 0; padding: 0; border: 0; background: none; }

.wcpk-single__content > :first-child { margin-top: 0; }
.wcpk-single__content > :last-child { margin-bottom: 0; }

/* Breed band — the theme's grey "Breed Info" section, in panel form. */
.wcpk-band {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: var(--wcpk-muted-bg);
}
.wcpk-breed { display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
@media (min-width: 992px) {
	.wcpk-breed { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	.wcpk-breed--no-image { grid-template-columns: 1fr; }
}
.wcpk-breed__image { margin: 0; overflow: hidden; border-radius: var(--wcpk-radius-lg); box-shadow: var(--wcpk-shadow); }
.wcpk-breed__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 992px) {
	.wcpk-breed__image img { aspect-ratio: 4 / 3; }
}
.wcpk-breed__desc p { margin: 0 0 1em; line-height: 1.7; }
.wcpk-breed__desc > :last-child { margin-bottom: 0; }
.wcpk-breed__more { margin: 1.25rem 0 0; font-weight: 700; }

.wcpk-traits { display: grid; gap: .65rem; margin: 1.5rem 0 0; }
@media (min-width: 768px) {
	.wcpk-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wcpk-trait { padding: .8rem .9rem; background: var(--wcpk-sunken); border: 1px solid var(--wcpk-line); border-radius: var(--wcpk-radius); }
.wcpk-trait dt { color: var(--wcpk-ink); font-weight: 700; }
.wcpk-trait dd { margin: .25rem 0 0; font-size: .92rem; }
.wcpk-trait dd > :last-child { margin-bottom: 0; }
.wcpk-trait-note { margin: .65rem 0 0; padding: .8rem .9rem; background: var(--wcpk-sunken); border: 1px solid var(--wcpk-line); border-radius: var(--wcpk-radius); font-size: .92rem; }
.wcpk-trait-note > :last-child { margin-bottom: 0; }

.wcpk-related { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.wcpk-related__more { margin: clamp(1.5rem, 3vw, 2rem) 0 0; text-align: center; }

/* ==========================================================================
   Motion
   ========================================================================== */

/* Pseudo-elements listed explicitly: `*` doesn't match them, which left the
   Load more spinner (::before) turning. Iteration count 1, because a 0.01ms
   infinite loop paints a random angle every frame and flickers. The spinners
   then hold still; the overlay and dimmed button still signal "busy". The
   polaroids keep their resting tilt (static, not motion): a reset on plain
   .wcpk-polaroid never beat the :nth-child rotations anyway. */
@media (prefers-reduced-motion: reduce) {
	.wcpk-gallery *,
	.wcpk-gallery *::before,
	.wcpk-gallery *::after,
	.wcpk-dialog * {
		transition: none !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.wcpk-spinner,
	.wcpk-cta.is-loading::before { animation: none !important; }
	.wcpk-card:hover,
	.wcpk-card:hover .wcpk-card__photo img,
	.wcpk-polaroid:hover { transform: none; }
}