/*
 * Theme Polish — subtle, site-wide refinements that carry the concierge
 * modal's aesthetic into the rest of the theme.
 *
 * Principles:
 *   - No color swaps (primary red stays)
 *   - No structural changes (layouts unchanged)
 *   - Softer shadows, rounded corners, consistent focus rings
 *   - Touch transitions + hover states only where we want them
 *   - Respect prefers-reduced-motion
 */

:root {
	--ui-ink:            #0f172a;
	--ui-ink-soft:       #475569;
	--ui-ink-faint:      #5f6b7a; /* a11y: darkened from #94a3b8 (2.6:1) to meet WCAG AA 4.5:1 on white (~5.4:1) */
	--ui-surface:        #ffffff;
	--ui-surface-sunken: #f8fafc;
	--ui-surface-muted:  #f1f5f9;
	--ui-border:         #e2e8f0;
	--ui-border-strong:  #cbd5e1;
	/* --ui-primary is consumed mostly as TEXT colour (105 rules), so it must be
	   the AA-checked text token, not the raw brand colour — the raw Pantone of
	   the lighter schemes is ~1.7-2.5:1 on white. --brand-text is #b34700 on
	   Standard, i.e. exactly the value this resolved to before. */
	--ui-primary:        var( --brand-text, var( --bs-primary, #dc3545 ) );
	/* Solid fills that carry white text use the fill token instead. */
	--ui-primary-fill:   var( --brand-fill, var( --ui-primary ) );
	/* Track the active colour scheme instead of Bootstrap red. --bs-primary-rgb
	   is set by style.css (Standard) and overridden per scheme; the literal is
	   kept as the var() fallback. */
	--ui-primary-soft:   rgba( var( --bs-primary-rgb, 220, 53, 69 ), .08 );
	--ui-primary-tint:   rgba( var( --bs-primary-rgb, 220, 53, 69 ), .15 );
	--ui-success:        #16a34a;
	--ui-success-soft:   rgba( 22, 163, 74, .08 );
	--ui-danger:         #dc2626;
	--ui-info:           #0ea5e9;
	--ui-radius:         14px;
	--ui-radius-sm:      10px;
	--ui-shadow-xs:      0 1px 2px rgba( 15, 23, 42, .05 );
	--ui-shadow-sm:      0 1px 2px rgba( 15, 23, 42, .06 ), 0 1px 3px rgba( 15, 23, 42, .08 );
	--ui-shadow:         0 4px 14px rgba( 15, 23, 42, .08 );
	--ui-shadow-lift:    0 10px 25px -8px rgba( 15, 23, 42, .15 );
	--ui-transition:     220ms cubic-bezier( .4, 0, .2, 1 );
}

/* ============================================================
   Typography — tiny tightening
============================================================ */

h1, h2, h3, .h1, .h2, .h3,
.page-title, .entry-title {
	letter-spacing: -.01em;
}

/* ============================================================
   Buttons — pill shape + subtle gradient primary + lift on hover
   Scoped to Bootstrap's .btn so non-button elements aren't touched.
============================================================ */

.btn {
	border-radius: 999px;
	font-weight: 600;
	padding: .55rem 1.15rem;
	transition:
		background var( --ui-transition ),
		border-color var( --ui-transition ),
		color var( --ui-transition ),
		transform var( --ui-transition ),
		box-shadow var( --ui-transition );
}

.btn:focus,
.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var( --ui-primary-soft );
}

/* Primary buttons: brand fill with a touch of gradient + depth.
   NOTE: this `background` shorthand loads at priority 30 — AFTER the colour
   scheme files — so it overrides their --bs-btn-bg. Both stops must therefore
   be scheme tokens, or every scheme's primary button fades to crimson. */
.btn-primary {
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100%);
	border-color: transparent;
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .25 );
	color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
	background: linear-gradient( 135deg, var( --brand-text, #c02232 ) 0%, var( --bs-primary-dark, #a31828 ) 100%);
	border-color: transparent;
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .38 );
	transform: translateY( -1px );
	color: #fff;
}

.btn-primary:active {
	transform: translateY( 0 );
	box-shadow: 0 2px 6px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .25 );
}

/* Outline-primary: softer border, hover fills with gradient. */
.btn-outline-primary {
	border-width: 1.5px;
	background: transparent;
	color: var( --ui-primary );
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100%);
	border-color: transparent;
	color: #fff;
	transform: translateY( -1px );
}

/* Secondary/dark/light — subtle pill restyle, no color change. */
.btn-dark,
.btn-secondary {
	background: var( --ui-ink );
	border-color: transparent;
	color: #fff;
}

.btn-dark:hover,
.btn-secondary:hover {
	background: #1e293b;
	transform: translateY( -1px );
	border-color: transparent;
	color: #fff;
}

.btn-outline-dark,
.btn-outline-secondary {
	border-width: 1.5px;
}

.btn-light {
	background: var( --ui-surface );
	border: 1.5px solid var( --ui-border );
	color: var( --ui-ink );
}

.btn-light:hover {
	background: var( --ui-surface-sunken );
	border-color: var( --ui-border-strong );
}

.btn-lg {
	padding: .85rem 1.5rem;
	font-size: 1rem;
}

.btn-sm {
	padding: .4rem .9rem;
	font-size: .82rem;
}

/* ============================================================
   Forms — rounded, focus ring in primary soft
============================================================ */

.form-control,
.form-select,
.input-text,
input[type="text"]:not( [class*="wp-block" ] ):not( .form-check-input ),
input[type="email"]:not( [class*="wp-block" ] ),
input[type="tel"]:not( [class*="wp-block" ] ),
input[type="number"]:not( [class*="wp-block" ] ),
input[type="password"]:not( [class*="wp-block" ] ),
input[type="search"]:not( [class*="wp-block" ] ),
textarea:not( [class*="wp-block" ] ),
select:not( .concierge-addon-variation ) {
	border-radius: var( --ui-radius-sm );
	border: 1.5px solid var( --ui-border );
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition );
	padding: .6rem .9rem;
}

.form-control:focus,
.form-select:focus,
.input-text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var( --ui-primary );
	outline: none;
	box-shadow: 0 0 0 4px var( --ui-primary-soft );
}

.form-check-input:focus {
	border-color: var( --ui-primary );
	box-shadow: 0 0 0 4px var( --ui-primary-soft );
}

.form-check-input:checked {
	background-color: var( --ui-primary-fill );
	border-color: var( --ui-primary );
}

.form-label {
	font-weight: 600;
	color: var( --ui-ink );
	letter-spacing: .01em;
}

/* ============================================================
   Cards — rounded, soft shadow, optional hover lift
============================================================ */

.card {
	border-radius: var( --ui-radius );
	border: 1px solid var( --ui-border );
	box-shadow: var( --ui-shadow-xs );
	transition: box-shadow var( --ui-transition ), transform var( --ui-transition );
}

/* Only lift cards that behave like clickable tiles (inside a link or with a hover class). */
a > .card:hover,
.card.card-hover:hover,
.card-hover:hover > .card {
	box-shadow: var( --ui-shadow-lift );
	transform: translateY( -2px );
}

.card-header {
	border-top-left-radius: var( --ui-radius );
	border-top-right-radius: var( --ui-radius );
	border-bottom-color: var( --ui-border );
}

.card-footer {
	border-bottom-left-radius: var( --ui-radius );
	border-bottom-right-radius: var( --ui-radius );
	border-top-color: var( --ui-border );
	background: var( --ui-surface-sunken );
}

/* ============================================================
   Badges — pill, consistent sizing
============================================================ */

.badge {
	border-radius: 999px;
	padding: .35em .75em;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ============================================================
   WooCommerce notices — rounded, softer palette
============================================================ */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var( --ui-radius );
	padding: .9rem 1.15rem;
	border: 1px solid transparent;
	box-shadow: var( --ui-shadow-xs );
	font-weight: 500;
}

.woocommerce-info {
	background: rgba( 14, 165, 233, .08 );
	border-color: rgba( 14, 165, 233, .2 );
	color: #075985;
}
.woocommerce-info::before,
.woocommerce-info a { color: inherit; }

.woocommerce-message {
	background: var( --ui-success-soft );
	border-color: rgba( 22, 163, 74, .2 );
	color: #14532d;
}
.woocommerce-message::before { color: var( --ui-success ); }

.woocommerce-error {
	background: rgba( 220, 38, 38, .06 );
	border-color: rgba( 220, 38, 38, .2 );
	color: #7f1d1d;
}

/* ============================================================
   Pagination — pill
============================================================ */

.page-link,
.woocommerce-pagination .page-numbers {
	border-radius: 999px;
	margin: 0 2px;
	border: 1.5px solid var( --ui-border );
	color: var( --ui-ink );
	transition: background var( --ui-transition ), border-color var( --ui-transition ), color var( --ui-transition );
	padding: .45rem .85rem;
}

.page-link:hover,
.woocommerce-pagination .page-numbers:hover {
	border-color: var( --ui-primary );
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
}

.page-item.active .page-link,
.woocommerce-pagination .page-numbers.current {
	background: var( --ui-primary-fill );
	border-color: var( --ui-primary );
	color: #fff;
}

/* ============================================================
   Shop product loop — subtle card treatment if the theme uses
   bare .product .wc-block-grid__product markup
============================================================ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	padding: 0;
}

.woocommerce ul.products li.product a img {
	border-radius: var( --ui-radius-sm );
	transition: transform var( --ui-transition );
}

.woocommerce ul.products li.product:hover a img {
	transform: scale( 1.02 );
}

.woocommerce ul.products li.product .price {
	color: var( --ui-primary );
	font-weight: 700;
}

/* Single product price */
.product .summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var( --ui-primary );
	font-weight: 700;
}

/* ============================================================
   Tabs — subtle pill/underline
============================================================ */

.nav-tabs {
	border-bottom: 1px solid var( --ui-border );
}

.nav-tabs .nav-link {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var( --ui-ink-soft );
	font-weight: 600;
	padding: .65rem 1rem;
	margin-bottom: -1px;
	transition: color var( --ui-transition ), border-color var( --ui-transition );
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	border-color: transparent;
	color: var( --ui-ink );
	background: transparent;
}

.nav-tabs .nav-link.active {
	background: transparent;
	color: var( --ui-primary );
	border-color: transparent;
	border-bottom-color: var( --ui-primary );
}

/* WooCommerce product tabs (single product page) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	border-bottom: 1px solid var( --ui-border );
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: .65rem 1rem;
	color: var( --ui-ink-soft );
	font-weight: 600;
	text-decoration: none;
	transition: color var( --ui-transition );
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
	color: var( --ui-ink );
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border-bottom-color: var( --ui-primary );
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var( --ui-primary );
}

/* ============================================================
   Links — consistent hover transition
============================================================ */

a {
	transition: color var( --ui-transition );
}

/* ============================================================
   Dropdowns — subtle polish
============================================================ */

.dropdown-menu {
	border-radius: var( --ui-radius-sm );
	border: 1px solid var( --ui-border );
	box-shadow: var( --ui-shadow );
	padding: .4rem;
}

.dropdown-item {
	border-radius: 8px;
	padding: .5rem .75rem;
	font-weight: 500;
	transition: background var( --ui-transition ), color var( --ui-transition );
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
}

.dropdown-item.active,
.dropdown-item:active {
	background: var( --ui-primary-fill );
	color: #fff;
}

/* ============================================================
   Table polish (account pages, order tables)
============================================================ */

.woocommerce table.shop_table,
.woocommerce-MyAccount-content table.shop_table {
	border-radius: var( --ui-radius );
	overflow: hidden;
	border: 1px solid var( --ui-border );
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table thead th {
	background: var( --ui-surface-sunken );
	color: var( --ui-ink );
	font-weight: 600;
	padding: .85rem 1rem;
	border-bottom: 1px solid var( --ui-border );
}

.woocommerce table.shop_table tbody td,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	padding: .85rem 1rem;
	border-top: 1px solid var( --ui-border );
}

/* ============================================================
   My Account navigation — modern side nav
============================================================ */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: .65rem .9rem;
	border-radius: var( --ui-radius-sm );
	color: var( --ui-ink-soft );
	text-decoration: none;
	font-weight: 500;
	transition: all var( --ui-transition );
}

.woocommerce-MyAccount-navigation ul li a:hover {
	background: var( --ui-surface-sunken );
	color: var( --ui-ink );
}

.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	font-weight: 600;
}

/* ============================================================
   Typography — body rhythm
============================================================ */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p { line-height: 1.6; }

/* Section headers (sitewide pattern: "Our available **pets**") */
.h1.text-primary, .h2.text-primary, .h3.text-primary,
h1.text-primary, h2.text-primary, h3.text-primary {
	color: var( --ui-primary ) !important;
}

/* Short split-color section underline — lighter than Bootstrap's default hr */
hr.section-divider,
.section-title + hr,
h2 + hr[class*="primary"] {
	border: 0;
	width: 56px;
	height: 3px;
	background: linear-gradient( 90deg, var( --ui-primary ), var( --bs-primary-dark, var( --ui-primary ) ) );
	border-radius: 999px;
	margin: .65rem auto 1.5rem;
	opacity: 1;
}

/* ============================================================
   Header (header.php — orange nav + gray secondary nav)
============================================================ */

/* Logo — subtle scale on hover for "alive" feel */
.navbar-brand img,
.navbar-brand svg,
.header-logo img {
	transition: transform var( --ui-transition );
}
.navbar-brand:hover img,
.navbar-brand:hover svg,
.header-logo:hover img { transform: scale( 1.02 ); }

/* Header tagline — small subscript line directly under the logo,
   admin-configurable via Theme Options → Tagline. Desktop-only
   (mirrors the desktop logo's xl+ visibility via d-none d-xl-block in
   the markup). Renders as a styled <span>, not a heading, so it
   doesn't pollute the page outline. */
.navbar-brand__tagline {
	margin-top: 2px;
	color: inherit;
	opacity: .82;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.15;
	text-transform: none;
	text-decoration: none;
	max-width: 100%;
	white-space: normal;
}

/* Main orange navbar — keep bg-primary; refine padding + weight */
header .navbar.bg-primary {
	padding-top: .85rem;
	padding-bottom: .85rem;
	box-shadow: 0 1px 0 rgba( 0, 0, 0, .06 );
}

/* Call-us phone list in the orange navbar (desktop) — subtler treatment */
header .navbar.bg-primary .store-info .nav-link {
	padding: .25rem .6rem;
	border-radius: var( --ui-radius-sm );
	transition: background var( --ui-transition );
}
header .navbar.bg-primary .store-info .nav-link:hover,
header .navbar.bg-primary .store-info .nav-link:focus {
	background: rgba( 255, 255, 255, .12 );
	color: #fff;
}

header .navbar.bg-primary .store-info .nav-item.phone span {
	letter-spacing: .01em;
}

/* Each location card — name, phone, directions all stacked + right-aligned.
   The wrapper <li> already lays things out vertically; we just push every
   child to the right edge so the three lines read as a clean column. */
header .navbar.bg-primary .store-info .nav-item.phone {
	text-align: right;
	padding-bottom: .35rem;
}
header .navbar.bg-primary .store-info .nav-item.phone .nav-link {
	text-align: right;
}
header .navbar.bg-primary .store-info .nav-item.phone .nav-link > .d-block {
	font-size: .82rem;
	opacity: .92;
}

/* "Driving directions" subline under each store phone (desktop). White,
   right-aligned, with a touch of breathing room above so it sits clearly
   below the phone number rather than crowding it. */
header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .3rem;
	margin-top: .35rem;
	padding-top: 0;
	padding-bottom: .15rem;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.1;
	color: #fff;
	text-decoration: none;
}
header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions:hover,
header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions:focus {
	color: #fff;
	text-decoration: underline;
	background: transparent;
}
header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions .bi {
	font-size: .8rem;
}

/* Mobile "Call Us" dropdown — force a deterministic light surface +
   dark text regardless of color scheme. The dropdown was inheriting
   dark-on-dark from the navbar's white-text context in some schemes
   and from .store-info's color cascade, which made the phone strong-text
   and the directions icon vanish on dark backgrounds. */
header .navbar.bg-primary .store-info .dropdown-menu {
	background: #fff;
	color: #1f2937;
	border: 1px solid rgba( 0, 0, 0, .08 );
}

header .navbar.bg-primary .store-info .store-info__dropdown-row {
	display: flex;
	align-items: stretch;
	gap: .25rem;
}

header .navbar.bg-primary .store-info .store-info__dropdown-row .dropdown-item.phone {
	color: #1f2937;
}
header .navbar.bg-primary .store-info .store-info__dropdown-row .dropdown-item.phone strong {
	color: var( --ui-primary, #dc2626 );
}
header .navbar.bg-primary .store-info .store-info__dropdown-row .dropdown-item.phone:hover,
header .navbar.bg-primary .store-info .store-info__dropdown-row .dropdown-item.phone:focus {
	background: rgba( 220, 38, 38, .08 );
	color: #1f2937;
}

header .navbar.bg-primary .store-info .store-info__dir-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	flex-shrink: 0;
	color: var( --ui-primary, #dc2626 );
	background: transparent;
	border-radius: var( --ui-radius-sm );
	margin: .25rem .5rem .25rem 0;
	transition: background var( --ui-transition ), color var( --ui-transition );
	text-decoration: none;
}
header .navbar.bg-primary .store-info .store-info__dir-icon:hover,
header .navbar.bg-primary .store-info .store-info__dir-icon:focus {
	background: rgba( 220, 38, 38, .12 );
	color: var( --ui-primary, #dc2626 );
	text-decoration: none;
}
header .navbar.bg-primary .store-info .store-info__dir-icon .bi {
	font-size: 1.1rem;
}

/* Mobile icon nav inside the orange navbar — unified hit area + hover */
header .navbar.bg-primary nav.d-lg-none .nav-link {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	transition: background var( --ui-transition );
}
header .navbar.bg-primary nav.d-lg-none .nav-link:hover,
header .navbar.bg-primary nav.d-lg-none .nav-link:focus {
	background: rgba( 255, 255, 255, .15 );
}

/* Cart badge on the cart icon — keep pill, keep brand, minor polish */
header .navbar.bg-primary .nav-link .badge,
header .navbar.bg-primary .nav-link .badge.text-bg-primary {
	font-size: .62rem !important;
	padding: .18rem .4rem !important;
	min-width: 18px;
	text-align: center;
	border: 1.5px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 );
}

/* Navbar toggler (hamburger for mobile) — subtler border when collapsed */
header .navbar .navbar-toggler {
	border: 0;
	padding: .35rem .55rem;
	border-radius: var( --ui-radius-sm );
	transition: background var( --ui-transition );
}
header .navbar .navbar-toggler:hover,
header .navbar .navbar-toggler:focus {
	background: rgba( 255, 255, 255, .15 );
	box-shadow: none !important;
}

/* "Pet Delivery" button in the orange navbar — cleaner pill with subtle lift */
header .navbar.bg-primary .navbar-text .btn.btn-primary {
	background: rgba( 255, 255, 255, .15 );
	border: 1.5px solid rgba( 255, 255, 255, .3 );
	color: #fff;
	border-radius: 999px;
	padding: .55rem 1.1rem;
	font-weight: 600;
	transition: all var( --ui-transition );
	box-shadow: none;
}
header .navbar.bg-primary .navbar-text .btn.btn-primary:hover {
	background: rgba( 255, 255, 255, .25 );
	border-color: rgba( 255, 255, 255, .5 );
	transform: translateY( -1px );
}

/* Dropdown menu shown from the mobile "Call Us" pill */
header .navbar.bg-primary .dropdown-menu {
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius-sm );
	box-shadow: var( --ui-shadow );
	padding: .5rem;
	min-width: 240px;
}

header .navbar.bg-primary .dropdown-menu .dropdown-item.phone {
	border-radius: 8px;
	padding: .55rem .75rem;
	font-size: .85rem;
	color: var( --ui-ink-soft );
	transition: all var( --ui-transition );
}
header .navbar.bg-primary .dropdown-menu .dropdown-item.phone strong {
	color: var( --ui-primary );
	font-weight: 700;
	margin-top: .15rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
header .navbar.bg-primary .dropdown-menu .dropdown-item.phone:hover {
	background: var( --ui-primary-soft );
	color: var( --ui-ink );
}

/* Call Us pill on mobile ("btn btn-outline-white rounded-pill") */
header .navbar.bg-primary .btn.btn-outline-white {
	background: rgba( 0, 0, 0, .14 ); /* a11y: dark tint (was 12% white) darkens the orange behind the white label so it passes AA */
	border: 1.5px solid rgba( 255, 255, 255, .4 );
	color: #fff;
	border-radius: 999px;
	padding: .5rem 1rem;
	font-weight: 600;
	transition: all var( --ui-transition );
}
header .navbar.bg-primary .btn.btn-outline-white:hover,
header .navbar.bg-primary .btn.btn-outline-white:focus,
header .navbar.bg-primary .btn.btn-outline-white.show {
	background: #fff;
	color: var( --ui-primary );
	border-color: #fff;
}

/* Secondary gray nav row (below the orange navbar, desktop only).
   Selector tracks the navbar breakpoint flip from lg → xl (2026-05);
   matches both classes for forward/back-compat with cached HTML. */
header > .container.d-xl-block,
header > .container.d-lg-block {
	padding-top: .65rem;
	padding-bottom: .65rem;
}

/* MENU button in the secondary row */
header > .container .btn.btn-black {
	border-radius: 999px !important;
	padding: .45rem 1rem !important;
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .78rem !important;
	text-transform: uppercase;
	background: var( --ui-ink ) !important;
	border-color: var( --ui-ink ) !important;
	color: #fff !important;
	box-shadow: var( --ui-shadow-sm );
	transition: all var( --ui-transition );
}
header > .container .btn.btn-black:hover {
	background: var( --ui-primary-fill ) !important;
	border-color: var( --ui-primary ) !important;
	transform: translateY( -1px );
}

/* Secondary nav links (underline style) — cleaner hover */
header .nav.nav-underline .nav-link {
	color: var( --ui-ink-soft );
	font-weight: 500;
	padding: .4rem .65rem;
	border-radius: 6px;
	border-bottom: 0 !important;
	transition: color var( --ui-transition ), background var( --ui-transition );
}
header .nav.nav-underline .nav-link:hover,
header .nav.nav-underline .nav-link:focus {
	color: var( --ui-primary );
	background: var( --ui-primary-soft );
}

/* Desktop quick-nav icons (account, search, wishlist, cart) */
header > .container .nav.nav-underline.flex-nowrap .nav-link {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --ui-ink-soft );
	margin: 0 2px;
	transition: all var( --ui-transition );
}
header > .container .nav.nav-underline.flex-nowrap .nav-link:hover {
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
}

header > .container .nav.nav-underline.flex-nowrap .nav-link .badge {
	font-size: .62rem;
	padding: .18rem .4rem;
	border: 1.5px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .2 );
}

/* ============================================================
   Header — Account "Hello, {name}" pill + triad symmetric spacing.
   These rules used to live in /css/favorites.css, which is only
   enqueued when the Favorites feature flag is on. The result was
   that turning Favorites OFF made the cart + account icons fall
   back to the 38×38 circle clamp from the rule above, squishing
   the "Hello, {name}" text and visibly misaligning the icons.
   Lifted into theme-polish.css so the layout is correct on every
   site regardless of feature flags.
============================================================ */

header > .container .nav.nav-underline.flex-nowrap .site-favorites-link,
header > .container .nav.nav-underline.flex-nowrap .site-cart-link,
header > .container .nav.nav-underline.flex-nowrap .site-account-link {
	margin: 0 8px;
}

/* Account link with the Hello chip — breaks out of the 38×38 clamp. */
header > .container .nav.nav-underline.flex-nowrap .site-account-link.site-account-link--hello {
	width: auto;
	height: auto;
}

.site-account-link.site-account-link--hello {
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}

.site-account-link.site-account-link--hello:hover {
	background: rgba( 242, 99, 34, .08 );
	color: #b34700;
}

.site-account-hello {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.1;
	text-align: left;
	max-width: 180px;
}

.site-account-hello__pre {
	font-size: .68rem;
	font-weight: 500;
	color: #6b7280;
	letter-spacing: .02em;
	text-transform: lowercase;
}

.site-account-link.site-account-link--hello:hover .site-account-hello__pre {
	color: inherit;
	opacity: .7;
}

.site-account-hello__name {
	font-size: .88rem;
	font-weight: 700;
	color: inherit;
	letter-spacing: -.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 140px;
}

@media (max-width: 1199.98px) {
	/* Below xl the nav is already tight; keep the icon, hide the text. */
	.site-account-hello { display: none; }
}

/* Offcanvas menu (left side navigation drawer) — soft polish */
.offcanvas#offcanvasNavigation,
.offcanvas#offcanvasSearch {
	border-radius: 0 var( --ui-radius ) var( --ui-radius ) 0;
	box-shadow: 0 20px 60px -10px rgba( 15, 23, 42, .3 );
}

.offcanvas#offcanvasNavigation .offcanvas-header,
.offcanvas#offcanvasSearch .offcanvas-header {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var( --ui-border );
}

.offcanvas#offcanvasNavigation .offcanvas-title,
.offcanvas#offcanvasSearch .offcanvas-title {
	font-size: 1rem;
	font-weight: 700;
	color: var( --ui-ink );
	letter-spacing: -.005em;
}

.offcanvas .primary-menu .menu-item a,
.offcanvas .primary-menu a {
	padding: .65rem 1.5rem;
	color: var( --ui-ink-soft );
	font-weight: 500;
	transition: all var( --ui-transition );
	border-left: 3px solid transparent;
}

.offcanvas .primary-menu .menu-item a:hover,
.offcanvas .primary-menu .menu-item.current-menu-item a,
.offcanvas .primary-menu a:hover {
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	border-left-color: var( --ui-primary );
}

/* Search offcanvas dark header polish */
.offcanvas#offcanvasSearch .offcanvas-header.text-bg-black {
	background: linear-gradient( 135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* ============================================================
   Hero (homepage)
============================================================ */

.hero,
.banner-home {
	position: relative;
}

.hero .btn-primary,
.banner-home .btn-primary,
.hero a.btn-lg,
.banner-home a.btn-lg {
	padding: .95rem 1.8rem;
}

/* Softer text shadow on hero copy */
.hero h1, .hero h2,
.banner-home h1, .banner-home h2 {
	text-shadow: 0 2px 20px rgba( 0, 0, 0, .25 );
}

/* ============================================================
   Pet cards — clean, modal-quality redesign.
   Targets: the existing markup on home + archive where each card is:
     <li class="product">
       <div class="card">
         <div class="border ...">   ← this is the frame we polish
           <div class="unlock-price-image-container">
             <img>
             <div class="blurred-corner-price">...unlock pill...</div>
             + in-image badges (views, just-arrived)
           </div>
           <div class="card-body"> name, breed, breeder, buttons </div>
   IMPORTANT: do NOT use wildcard selectors like [class*="unlock"] — they
   accidentally match .unlock-price-image-container (the big wrapper) and
   turn the whole image area into an oval.
============================================================ */

/* The <li> cell is a flex child of the grid — keep transparent; polish the frame. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0 8px;
}

/* The inner frame (wrapped around each pet) — THIS is the card. */
li.product .card > .border,
li.product .card > div[class*="rounded-"],
.pet-card > .border,
.product-card > .border {
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius ) !important;
	box-shadow: var( --ui-shadow-sm );
	background: var( --ui-surface );
	overflow: hidden;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition ), border-color var( --ui-transition );
}

li.product .card > .border:hover,
.pet-card > .border:hover,
.product-card > .border:hover {
	transform: translateY( -3px );
	box-shadow: var( --ui-shadow-lift );
	border-color: var( --ui-border-strong ) !important;
}

/* Remove the old double-border on outer card wrapper */
li.product .card.border-0 {
	border: 0 !important;
	box-shadow: none !important;
}

/* -----------------------------------------------------------
   Image container — kill the circular background bug.
   This was the root cause of the "dark ovals behind each card".
----------------------------------------------------------- */
.unlock-price-image-container {
	background: var( --ui-surface-muted ) !important;
	border-radius: 0 !important;
	overflow: hidden;
	width: 100% !important;
	height: auto !important;
	box-shadow: none !important;
}

/* Image fills the ratio box cleanly */
li.product .ratio img,
.pet-card .ratio img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform var( --ui-transition );
}

li.product .card > .border:hover img {
	transform: scale( 1.03 );
}

/* -----------------------------------------------------------
   Overlay layering (z-index) — deliberate stacking order:
     image: 0
     unlock pill: 4   (top-left, prominent)
     view indicator: 5 (bottom-left)
     badge stack: 5   (bottom-right)
     modal triggers: 10+
----------------------------------------------------------- */

/* -----------------------------------------------------------
   UNLOCK PRICING PILL — top-left (restored to its original position
   from pet-inquiry-modal.css). Polish gives it pill-round corners,
   softer shadow, and a clean gradient border instead of square edges.
----------------------------------------------------------- */
.blurred-corner-price {
	/* Flow inside the .card-corner-tl column (relative, not absolute) so the
	   pill shares the column's single 8px/6px offset and left-aligns with the
	   Coming Soon + Custom Sales badges. relative (not static) keeps it as the
	   positioning context for the inset .price-text-under-blur. */
	position: relative !important;
	z-index: 4 !important;
	min-width: 140px;
	width: auto !important;
	height: auto !important;
	border-radius: 999px !important;
	display: inline-block !important;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, .25 ), 0 1px 3px rgba( 15, 23, 42, .15 );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
	user-select: none;
	-webkit-user-select: none;
}

.blurred-corner-price:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 22px rgba( 15, 23, 42, .3 ), 0 2px 6px rgba( 15, 23, 42, .18 );
}

.blurred-corner-price:active { transform: translateY( 0 ); }

/* Price text underneath the blur — kept as original */
.price-text-under-blur {
	position: absolute !important;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: 800;
	color: #15803d;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .15 );
	z-index: 1;
	pointer-events: none;
	letter-spacing: -.01em;
}

.price-block-small {
	font-size: .6em;
	vertical-align: middle;
	line-height: 1;
}

/* Glass overlay on top of the blurred price */
.blur-glass-overlay {
	position: relative;
	width: 100%;
	backdrop-filter: blur( 4px ) saturate( 130% );
	-webkit-backdrop-filter: blur( 4px ) saturate( 130% );
	background: linear-gradient( 135deg, rgba( 255, 255, 255, .6 ) 0%, rgba( 255, 255, 255, .4 ) 100% );
	border: 1px solid rgba( 255, 255, 255, .7 );
	border-radius: 999px !important;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .55 );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .55rem 1rem;
	transition: background var( --ui-transition );
}

.blurred-corner-price:hover .blur-glass-overlay {
	background: linear-gradient( 135deg, rgba( 255, 255, 255, .7 ) 0%, rgba( 255, 255, 255, .5 ) 100% );
}

.unlock-pricing-cta {
	position: relative !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center;
	gap: .4rem;
	font-size: .68rem !important;
	font-weight: 800 !important;
	color: #1f2937 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase;
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba( 255, 255, 255, .8 );
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	height: auto !important;
	pointer-events: none;
	white-space: nowrap;
	transition: color var( --ui-transition );
}

.blurred-corner-price:hover .unlock-pricing-cta {
	color: var( --ui-primary ) !important;
}

.unlock-pricing-cta svg {
	flex-shrink: 0;
	opacity: .85;
	filter: drop-shadow( 0 1px 1px rgba( 255, 255, 255, .8 ) );
	transition: opacity var( --ui-transition );
}

.blurred-corner-price:hover .unlock-pricing-cta svg { opacity: 1; }

.unlock-pricing-cta span {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* -----------------------------------------------------------
   TOP-RIGHT / "d-flex gap-2 p-2" badges row — used for Views count
   and "Just arrived". Original markup uses flex positioning INSIDE
   the ratio div. Let it stay in normal flow (don't absolute-position
   over the image) OR repositioned at top-right if detected.
----------------------------------------------------------- */
li.product .card .position-relative > .d-flex.gap-2 {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	z-index: 3;
	padding: 0;
	pointer-events: none;
	justify-content: flex-end;
}

li.product .card .position-relative > .d-flex.gap-2 > * {
	pointer-events: auto;
}

/* Individual badge styling — unify all variants */
li.product .badge {
	border-radius: 999px !important;
	padding: .3rem .65rem !important;
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba( 15, 23, 42, .15 );
	line-height: 1.2;
}

/* Green "Available Now" / success badge → white pill + green dot */
li.product .badge.bg-success,
li.product .badge.text-bg-success {
	background: #fff !important;
	color: #15803d !important;
	border: 1px solid rgba( 22, 163, 74, .25 );
}
li.product .badge.bg-success::before,
li.product .badge.text-bg-success::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
	margin-right: .4rem;
	vertical-align: middle;
}

/* Orange "Just arrived" badge → subtle warm pill */
li.product .badge.bg-warning,
li.product .badge.text-bg-warning,
li.product .badge.bg-primary {
	background: linear-gradient( 135deg, var( --bs-primary ) 0%, var( --bs-primary-dark ) 100%) !important;
	color: #fff !important;
}

/* Dark/black badge (views count) → frosted dark pill */
li.product .badge.bg-dark,
li.product .badge.bg-black,
li.product .badge.text-bg-dark {
	background: rgba( 15, 23, 42, .75 ) !important;
	color: #fff !important;
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
}

/* Specific named badges from the original theme CSS, re-polished */
li.product .badge-popular,
li.product .badge-interested {
	background: linear-gradient( 135deg, #ec4899 0%, #be185d 100%) !important;
	color: #fff !important;
	animation: none !important;
}
li.product .badge-new-arrival {
	background: linear-gradient( 135deg, #3b82f6 0%, #2563eb 100%) !important;
	color: #fff !important;
}
li.product .badge-new-week {
	background: linear-gradient( 135deg, #10b981 0%, #059669 100%) !important;
	color: #fff !important;
}

/* Product badge stack (bottom-right corner of image, z:5 per original) */
li.product .product-badge-stack,
li.product .product-badge-stack-single {
	position: absolute !important;
	bottom: 10px !important;
	right: 10px !important;
	top: auto !important;
	left: auto !important;
	z-index: 5 !important;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	pointer-events: none;
}

li.product .product-badge-stack > *,
li.product .product-badge-stack-single > * {
	pointer-events: auto;
}

/* View-count visual weight variants */
li.product .badge-view-neutral {
	background: rgba( 15, 23, 42, .75 ) !important;
	color: #fff !important;
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	border-radius: 999px !important;
	padding: .3rem .65rem !important;
	font-size: .68rem !important;
}
li.product .badge-view-warm {
	background: linear-gradient( 135deg, #3b82f6 0%, #2563eb 100%) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: .3rem .65rem !important;
	font-size: .68rem !important;
}
li.product .badge-view-hot {
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100%) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: .3rem .65rem !important;
	font-size: .68rem !important;
}

/* -----------------------------------------------------------
   "View / details" indicator — bottom-left of image (original position)
----------------------------------------------------------- */
.product-details-indicator {
	position: absolute !important;
	bottom: 10px !important;
	left: 10px !important;
	top: auto !important;
	right: auto !important;
	z-index: 5 !important;
	backdrop-filter: blur( 6px ) saturate( 130% );
	-webkit-backdrop-filter: blur( 6px ) saturate( 130% );
	background: rgba( 255, 255, 255, .88 ) !important;
	border: 1px solid rgba( 255, 255, 255, .7 ) !important;
	border-radius: 999px !important;
	padding: .3rem .7rem !important;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .68rem !important;
	font-weight: 700 !important;
	color: #1f2937 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: 0 1px 1px rgba( 255, 255, 255, .6 );
	box-shadow: 0 2px 6px rgba( 15, 23, 42, .15 ), inset 0 1px 0 rgba( 255, 255, 255, .5 );
	transition: background var( --ui-transition ), box-shadow var( --ui-transition ), transform var( --ui-transition );
	user-select: none;
	-webkit-user-select: none;
}

li.product .card > .border:hover .product-details-indicator,
.card:hover .product-details-indicator {
	background: #fff !important;
	box-shadow: 0 4px 12px rgba( 15, 23, 42, .2 );
	transform: translateY( -1px );
}

.product-details-indicator .bi {
	font-size: .75rem;
	opacity: .85;
	transition: opacity var( --ui-transition );
}

.card:hover .product-details-indicator .bi { opacity: 1; }

/* -----------------------------------------------------------
   Card body (below image) — pet name, breed, breeder, buttons
----------------------------------------------------------- */
li.product .card-body,
li.product .card .card-body {
	padding: 1rem;
	background: var( --ui-surface );
}

/* Pet name ("Lily - Female #22144") */
li.product h2.woocommerce-loop-product__title,
li.product h3.woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title {
	font-size: .92rem !important;
	font-weight: 500 !important;
	color: var( --ui-ink-soft ) !important;
	margin: 0 0 .2rem !important;
	letter-spacing: -.005em;
}

/* Breed ("YORKSHIRE TERRIER") — the primary line */
li.product .breed-name,
li.product [class*="breed-"] strong,
li.product .text-uppercase.fw-bold,
li.product .card-body > .fw-bold {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var( --ui-ink ) !important;
	letter-spacing: -.005em !important;
	line-height: 1.2 !important;
	margin: 0 0 .5rem !important;
}

/* Breeder + USDA info (the tiny gray lines) */
li.product .text-muted.small,
li.product small.text-muted {
	color: var( --ui-ink-faint ) !important;
	font-size: .75rem !important;
	line-height: 1.4 !important;
}

/* Bottom actions row — "Get My Info" + phone */
li.product .card-body .btn,
li.product .card .btn:not( .product-btn-phone ) {
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: .5rem 1rem !important;
	font-size: .85rem !important;
	box-shadow: none !important;
}

/* "Get My Info" style — primary gradient pill */
li.product .btn.btn-primary,
li.product .btn.btn-danger,
li.product .btn-unlock-price {
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100%) !important;
	border: 0 !important;
	color: #fff !important;
}

li.product .btn.btn-primary:hover,
li.product .btn.btn-danger:hover,
li.product .btn-unlock-price:hover {
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .3 ) !important;
	transform: translateY( -1px );
}

/* Phone button — solid near-black pill, same size as primary */
li.product .btn.btn-black,
li.product .btn.btn-dark,
li.product .product-btn-phone {
	background: #0a0a0a !important;
	color: #ffffff !important;
	border: 1.5px solid #0a0a0a !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: .5rem 1rem !important;
	box-shadow: none !important;
	transition: all var( --ui-transition );
}

li.product .btn.btn-black:hover,
li.product .btn.btn-dark:hover,
li.product .product-btn-phone:hover {
	background: #1f1f1f !important;
	color: #ffffff !important;
	border-color: #1f1f1f !important;
	transform: translateY( -1px );
}

/* If the old card used "rounded-1" (square) on buttons, override */
li.product .btn.rounded-1 {
	border-radius: 999px !important;
}

/* -----------------------------------------------------------
   "View" link that sits at bottom-left of the image
----------------------------------------------------------- */
li.product a[class*="view"]:not( .btn-unlock ):not( .product-btn-phone ),
li.product .product-view-link {
	background: rgba( 255, 255, 255, .95 ) !important;
	color: var( --ui-ink ) !important;
	border-radius: 999px !important;
	padding: .3rem .7rem !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	box-shadow: 0 2px 8px rgba( 15, 23, 42, .15 );
}

/* ============================================================
   "How Can We Help You?" 3-card row
============================================================ */

.help-cards .card,
.help-card,
.home-help-card {
	border-radius: var( --ui-radius );
	border: 1px solid var( --ui-border );
	box-shadow: var( --ui-shadow-sm );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
	overflow: hidden;
}

.help-cards .card:hover,
.help-card:hover,
.home-help-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --ui-shadow-lift );
}

.help-cards .card img,
.help-card img {
	border-top-left-radius: var( --ui-radius );
	border-top-right-radius: var( --ui-radius );
	transition: transform var( --ui-transition );
}

.help-cards .card:hover img,
.help-card:hover img {
	transform: scale( 1.03 );
}

.help-cards .card-body,
.help-card .card-body {
	padding: 1.5rem;
}

/* ============================================================
   "Getting Started" accordion (homepage)
============================================================ */

.accordion-item {
	border-radius: var( --ui-radius ) !important;
	border: 1px solid var( --ui-border ) !important;
	margin-bottom: .6rem;
	overflow: hidden;
	box-shadow: var( --ui-shadow-xs );
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
	border-radius: var( --ui-radius ) !important;
}

.accordion-button {
	font-weight: 600;
	padding: 1rem 1.25rem;
	background: var( --ui-surface );
	color: var( --ui-ink );
	box-shadow: none !important;
	transition: background var( --ui-transition ), color var( --ui-transition );
}

.accordion-button:not( .collapsed ) {
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	border-bottom: 1px solid var( --ui-border );
}

.accordion-button:focus {
	box-shadow: 0 0 0 4px var( --ui-primary-soft ) !important;
	z-index: 3;
}

.accordion-body {
	padding: 1.5rem 1.25rem;
	color: var( --ui-ink-soft );
	line-height: 1.65;
}

/* Override the thick orange Bootstrap header variant if present */
.accordion-button.bg-primary,
.accordion-button.text-bg-primary {
	background: var( --ui-surface ) !important;
	color: var( --ui-ink ) !important;
}

.accordion-button.bg-primary:not( .collapsed ),
.accordion-button.text-bg-primary:not( .collapsed ) {
	background: var( --ui-primary-soft ) !important;
	color: var( --ui-primary ) !important;
}

/* ============================================================
   Product single — clean reservation card (replaces purple PNG)
============================================================ */

.tp-reservation-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.15rem 1.25rem;
	background: linear-gradient( 135deg, var( --ui-surface ) 0%, var( --ui-surface-sunken ) 100%);
	border: 1.5px solid var( --ui-border );
	border-radius: var( --ui-radius );
	text-decoration: none;
	color: var( --ui-ink );
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition ), transform var( --ui-transition );
}

.tp-reservation-card:hover {
	border-color: var( --ui-primary );
	box-shadow: var( --ui-shadow-lift );
	transform: translateY( -1px );
	color: var( --ui-ink );
	text-decoration: none;
}

.tp-reservation-card__icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .3 );
}

.tp-reservation-card__body { flex: 1; min-width: 0; }

.tp-reservation-card__badge {
	display: inline-block;
	padding: .2rem .65rem;
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: .4rem;
}

.tp-reservation-card__title {
	margin: 0 0 .25rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

.tp-reservation-card__text {
	margin: 0 0 .65rem;
	font-size: .88rem;
	color: var( --ui-ink-soft );
	line-height: 1.5;
}

.tp-reservation-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	font-size: .88rem;
	color: var( --ui-primary );
	letter-spacing: -.005em;
}

.tp-reservation-card:hover .tp-reservation-card__cta {
	gap: .55rem;
}

@media (max-width: 575.98px) {
	.tp-reservation-card { flex-direction: column; padding: 1rem; }
}

/* ============================================================
   Product single — clean secondary CTA + phone link
============================================================ */

.tp-cta-stack {
	padding: 1rem 0;
}

/* Get My Info — branded soft-fill pill with prominent heart-circle icon.
   Loud enough to feel deliberate, but the soft-tinted bg keeps it from
   competing with the deposit hero's full brand-red gradient below. */
.tp-cta-secondary {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	padding: 1rem 1.65rem !important;
	min-height: 56px;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	border-radius: 999px !important;
	border: 2px solid var( --ui-primary ) !important;
	background: linear-gradient( 135deg, var( --ui-primary-soft ) 0%, rgba( var( --bs-primary-rgb, 220, 53, 69 ), .14 ) 100% ) !important;
	color: var( --ui-primary ) !important;
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .14 ) !important;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition ), background var( --ui-transition );
}

.tp-cta-secondary:hover,
.tp-cta-secondary:focus {
	background: linear-gradient( 135deg, rgba( var( --bs-primary-rgb, 220, 53, 69 ), .14 ) 0%, rgba( var( --bs-primary-rgb, 220, 53, 69 ), .22 ) 100% ) !important;
	color: var( --ui-primary ) !important;
	transform: translateY( -2px );
	box-shadow: 0 8px 22px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .25 ) !important;
	outline: none;
}

/* Filled white-on-red circle prefix replaces the bare outline heart. */
.tp-cta-secondary .bi-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var( --ui-primary-fill );
	color: #fff !important;
	font-size: .95rem !important;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .3 );
	transition: transform var( --ui-transition );
}

.tp-cta-secondary:hover .bi-heart,
.tp-cta-secondary:focus .bi-heart {
	transform: scale( 1.06 );
}

/* Make the bi-heart glyph filled even though markup uses the outline class. */
.tp-cta-secondary .bi-heart::before {
	content: '\F417'; /* bi-heart-fill */
}

/* Trailing arrow nudges right on hover. */
.tp-cta-secondary .bi-arrow-right {
	font-size: 1.05em;
	transition: transform var( --ui-transition );
}

.tp-cta-secondary:hover .bi-arrow-right,
.tp-cta-secondary:focus .bi-arrow-right {
	transform: translateX( 3px );
}

/* Phone CTA — solid dark pill with white text. Confident, conversion-style
   ask. Single treatment across all breakpoints — no desktop/mobile split. */
.tp-cta-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .95rem 1.5rem !important;
	min-height: 52px;
	border-radius: 999px;
	background: var( --ui-ink ) !important;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.005em;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, .25 );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-cta-phone:hover,
.tp-cta-phone:focus,
.tp-cta-phone:active {
	color: #fff !important;
	transform: translateY( -2px );
	box-shadow: 0 8px 22px rgba( 15, 23, 42, .35 );
	text-decoration: none !important;
	outline: none;
}

.tp-cta-phone svg {
	color: #fff !important;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Hero phone CTA — louder, full-width treatment used inside the
   pet-loved-callout (sits directly under the "loved" message on every
   breakpoint). The standard .tp-cta-phone (above) stays the desktop
   right-column pill. */
.tp-cta-phone--hero {
	display: flex !important;
	width: 100%;
	margin-bottom: 1rem;
	padding: 1rem 1.25rem !important;
	min-height: 64px;
	border-radius: var( --ui-radius-sm );
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% ) !important;
	color: #fff !important;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba( 220, 38, 38, .35 );
	gap: .85rem;
	justify-content: flex-start;
	text-align: left;
}

.tp-cta-phone--hero:hover,
.tp-cta-phone--hero:focus,
.tp-cta-phone--hero:active {
	box-shadow: 0 8px 22px rgba( 220, 38, 38, .45 );
	transform: translateY( -1px );
}

.tp-cta-phone--hero .tp-cta-phone__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .18 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	animation: loved-pulse 2.5s ease-in-out infinite;
}

.tp-cta-phone--hero .tp-cta-phone__icon .bi {
	font-size: 1.1rem;
	color: #fff;
}

.tp-cta-phone--hero .tp-cta-phone__label {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	flex: 1;
}

.tp-cta-phone--hero .tp-cta-phone__lead {
	font-size: .75rem;
	opacity: .85;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}

.tp-cta-phone--hero .tp-cta-phone__number {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.005em;
}

.tp-cta-phone--hero .bi-arrow-right {
	opacity: .85;
	font-size: 1rem;
	flex-shrink: 0;
}

/* ============================================================
   Product single — clean Promise card (replaces green gradient card)
============================================================ */

.tp-promise {
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	padding: 1.25rem 1.5rem;
	box-shadow: var( --ui-shadow-xs );
}

.tp-promise__header {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .85rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var( --ui-border );
	color: var( --ui-primary );
}

.tp-promise__header h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

.tp-promise__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.tp-promise__list li {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
}

.tp-promise__check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --ui-primary-fill );
	position: relative;
	margin-top: 2px;
	box-shadow: 0 1px 4px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .35 );
}

.tp-promise__check::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate( -50%, -65% ) rotate( -45deg );
}

.tp-promise__list li strong {
	display: block;
	color: var( --ui-ink );
	font-weight: 600;
	margin-bottom: 2px;
}

.tp-promise__list li span {
	color: var( --ui-ink-soft );
	font-size: .87rem;
	line-height: 1.45;
}

/* ============================================================
   Product single — image gallery + misc polish
============================================================ */

.woocommerce-product-gallery {
	border-radius: var( --ui-radius );
	overflow: hidden;
}

.woocommerce-product-gallery__image img {
	border-radius: var( --ui-radius-sm );
}

/* Product page breed-learn-more accordion uses .accordion rules above */

/* Single-product deposit/full tabs (WooCommerce Deposits plugin) */
.wc-deposits-option-switch-tabs .nav-link {
	border-radius: 999px;
	border: 1.5px solid var( --ui-border );
	color: var( --ui-ink-soft );
	font-weight: 600;
}

.wc-deposits-option-switch-tabs .nav-link.active {
	background: var( --ui-primary-fill );
	border-color: var( --ui-primary );
	color: #fff;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
	font-size: .85rem;
	color: var( --ui-ink-faint );
}
.woocommerce-breadcrumb a {
	color: var( --ui-ink-soft );
}
.woocommerce-breadcrumb a:hover { color: var( --ui-primary ); }

/* ============================================================
   Footer (footer.php)
   Three-row structure:
     1. "Get in Touch" strip (.navbar.bg-gray)
     2. Main footer (.footer with locations + quick links + logo)
     3. Payment icons strip + copyright
============================================================ */

/* Inherit link color, let each section's background stay as Bootstrap assigns */
footer a,
.site-footer a {
	color: var( --ui-ink-soft );
	text-decoration: none;
	transition: color var( --ui-transition );
}
footer a:hover,
.site-footer a:hover {
	color: var( --ui-primary );
}

/* -----------------------------------------------------------
   Row 1 — "Get in Touch" strip
----------------------------------------------------------- */
footer .navbar.bg-gray {
	background: var( --ui-surface-sunken ) !important;
	border-bottom: 1px solid var( --ui-border );
	padding-top: 1rem;
	padding-bottom: 1rem;
}

footer .navbar.bg-gray p {
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

/* Contact button (already .btn-primary — handled by base rules) */
footer .navbar.bg-gray .btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

/* Back-to-top button — give it a softer pill feel */
footer .navbar.bg-gray .btn.btn-black {
	background: var( --ui-surface );
	color: var( --ui-ink );
	border: 1.5px solid var( --ui-border );
	padding: .55rem .9rem;
	transition: all var( --ui-transition );
}
footer .navbar.bg-gray .btn.btn-black:hover {
	background: var( --ui-ink );
	color: #fff;
	border-color: var( --ui-ink );
	transform: translateY( -1px );
}

/* -----------------------------------------------------------
   Row 2 — Main footer body
----------------------------------------------------------- */
footer .footer {
	background: var( --ui-surface );
	color: var( --ui-ink-soft );
}

footer .footer h3.h6 { /* a11y: footer section headings moved h4->h3 for valid heading order (WCAG 1.3.1); styling unchanged */
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --ui-ink );
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var( --ui-border );
}

footer .footer h3.h6.text-primary {
	color: var( --ui-primary ) !important;
	border-bottom-color: var( --ui-primary-soft );
}

/* Footer nav lists (Quick Links, Account) */
footer .footer .nav.flex-column .nav-item {
	margin-bottom: 0;
}

footer .footer .nav.flex-column .nav-link {
	padding: .4rem 0;
	font-size: .88rem;
	color: var( --ui-ink-soft );
	font-weight: 500;
	border-radius: 0;
	transition: color var( --ui-transition ), padding var( --ui-transition );
}

footer .footer .nav.flex-column .nav-link:hover,
footer .footer .nav.flex-column .nav-link:focus {
	color: var( --ui-primary );
	padding-left: .35rem;
}

footer .footer .nav.flex-column .nav-link::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 1px;
	background: var( --ui-primary-fill );
	vertical-align: middle;
	margin-right: 0;
	transition: width var( --ui-transition ), margin-right var( --ui-transition );
}
footer .footer .nav.flex-column .nav-link:hover::before {
	width: .5rem;
	margin-right: .35rem;
}

/* Location cards — soft, modern */
footer .footer-location-cards li .card {
	border-radius: var( --ui-radius );
	border: 1px solid var( --ui-border );
	box-shadow: var( --ui-shadow-xs );
	transition: box-shadow var( --ui-transition ), transform var( --ui-transition );
}

footer .footer-location-cards li .card:hover {
	box-shadow: var( --ui-shadow-sm );
	transform: translateY( -1px );
}

footer .footer-location-cards li .card.border-gray {
	border-color: var( --ui-border ) !important;
}

footer .footer-location-cards .card-body {
	padding: 1.1rem 1.15rem;
}

footer .footer-location-cards h5 {
	font-size: .92rem;
	font-weight: 700;
	color: var( --ui-ink );
	letter-spacing: -.005em;
}

footer .footer-location-cards .phone {
	color: var( --ui-ink );
	font-weight: 600;
	transition: color var( --ui-transition );
}
footer .footer-location-cards .phone:hover {
	color: var( --ui-primary );
}

/* Social icons inside footer — concierge avatar feel */
footer .footer-location-cards a[href*="facebook"],
footer .footer-location-cards a[href*="instagram"],
footer .footer-location-cards a[href*="tiktok"],
footer .footer-location-cards a[href*="threads"],
footer .footer-location-cards a[href*="pinterest"],
footer .footer-location-cards a[href*="youtube"],
footer .footer-location-cards a[href*="twitter"],
footer .footer-location-cards a[href*="/x.com"] {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --ui-surface-sunken );
	border: 1px solid var( --ui-border );
	color: var( --ui-ink-soft );
	transition: all var( --ui-transition );
}
footer .footer-location-cards a[href*="facebook"]:hover,
footer .footer-location-cards a[href*="instagram"]:hover,
footer .footer-location-cards a[href*="tiktok"]:hover,
footer .footer-location-cards a[href*="threads"]:hover,
footer .footer-location-cards a[href*="pinterest"]:hover,
footer .footer-location-cards a[href*="youtube"]:hover,
footer .footer-location-cards a[href*="twitter"]:hover,
footer .footer-location-cards a[href*="/x.com"]:hover {
	background: var( --ui-primary-fill );
	border-color: var( --ui-primary );
	color: #fff;
	transform: translateY( -2px );
}

/* Reviews widget inside footer */
footer .footer [class*="csr-ratings"],
footer .footer .csr-ratings {
	margin: .25rem 0;
}

/* -----------------------------------------------------------
   Row 3 — Payment icons + copyright
----------------------------------------------------------- */
footer .footer-payment-icons {
	color: var( --ui-ink-faint );
	gap: 1rem !important;
}

footer .footer-payment-icons svg {
	height: 22px;
	opacity: .5;
	transition: opacity var( --ui-transition );
}

footer .footer-payment-icons:hover svg,
footer .footer-payment-icons svg:hover {
	opacity: .85;
}

footer > .border-top.border-gray {
	border-color: var( --ui-border ) !important;
	background: var( --ui-surface );
}

/* Copyright strip — tighter typography */
footer > .border-top:last-child,
footer > .border-top:last-of-type {
	background: var( --ui-surface-sunken );
	border-color: var( --ui-border ) !important;
}

footer > .border-top:last-child p,
footer > .border-top:last-of-type p {
	color: var( --ui-ink-faint );
	letter-spacing: .01em;
	line-height: 1.6;
}

footer > .border-top:last-child p a,
footer > .border-top:last-of-type p a {
	color: var( --ui-ink-soft );
	text-decoration: none;
	font-weight: 500;
}
footer > .border-top:last-child p a:hover,
footer > .border-top:last-of-type p a:hover {
	color: var( --ui-primary );
}

footer > .border-top:last-child p a u,
footer > .border-top:last-of-type p a u {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* -----------------------------------------------------------
   Google reviews widget banner (if present) above footer
----------------------------------------------------------- */
.border-top.border-gray.pt-2 {
	background: var( --ui-surface-sunken );
	border-color: var( --ui-border ) !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem;
}

/* ============================================================
   Shop By Pet pill row (homepage)
============================================================ */

.shop-by-pet .btn,
.shop-by-pet a.btn-outline-primary {
	padding: .5rem 1.15rem;
	font-weight: 600;
}

/* ============================================================
   "Industry Recognition" section
============================================================ */

.industry-recognition,
.awards-section {
	padding: 2rem 0;
}

.industry-recognition img,
.awards-section img {
	opacity: .7;
	transition: opacity var( --ui-transition );
	filter: grayscale( 20% );
}

.industry-recognition img:hover,
.awards-section img:hover {
	opacity: 1;
	filter: grayscale( 0 );
}

/* ============================================================
   "Get in Touch" section
============================================================ */

.get-in-touch,
.contact-strip {
	background: var( --ui-surface-sunken );
	border-top: 1px solid var( --ui-border );
	border-bottom: 1px solid var( --ui-border );
}

/* ============================================================
   Archive / category pages
============================================================ */

.woocommerce-result-count {
	color: var( --ui-ink-faint );
	font-size: .88rem;
}

.woocommerce-ordering select {
	padding: .45rem 2rem .45rem .85rem;
}

/* Category header banner */
.category-banner,
.archive-banner,
.banner-woo {
	border-radius: var( --ui-radius );
	overflow: hidden;
}

/* ============================================================
   Forms — Gravity Forms
============================================================ */

.gform_wrapper .gfield label,
.gform_wrapper label.gfield_label {
	font-weight: 600;
	color: var( --ui-ink );
}

.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
	border-radius: var( --ui-radius-sm );
	border: 1.5px solid var( --ui-border );
	padding: .7rem .9rem;
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition );
}

.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus {
	border-color: var( --ui-primary );
	box-shadow: 0 0 0 4px var( --ui-primary-soft );
	outline: none;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	border-radius: 999px;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100%);
	border: 0;
	color: #fff;
	font-weight: 600;
	padding: .75rem 1.5rem;
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .25 );
	transition: all var( --ui-transition );
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .38 );
}

/* ============================================================
   Checkout refinements (placeholder — full polish appended at file end)
============================================================ */

.woocommerce-checkout #place_order,
.woocommerce #place_order {
	padding: .95rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
}

/* ============================================================
   Modals — polished chrome (2026-04). Matches .tp-section design
   language: white surface, soft border, lifted shadow, primary-
   color icon accent in title. Concierge, videoMeetingModal and
   #petVideoModal opt out — they ship their own custom chrome.
============================================================ */

.modal-content:not( .concierge-content ):not( .concierge-video-content ):not( .video-meeting-modal ):not( .pet-video-modal__content ) {
	border-radius: var( --ui-radius );
	border: 0;
	background: var( --ui-surface );
	color: var( --ui-ink );
	box-shadow: 0 30px 80px -20px rgba( 15, 23, 42, .35 );
	overflow: hidden;
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-header {
	padding: 1rem 1.5rem;
	background: var( --ui-surface );
	color: var( --ui-ink );
	border-bottom: 1px solid var( --ui-border );
	align-items: center;
	gap: .65rem;
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-title {
	font-weight: 700;
	font-size: 1.1rem !important;
	color: var( --ui-ink );
	letter-spacing: -.01em;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 !important;
	line-height: 1.3;
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-title > i,
.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-title > .bi {
	color: var( --ui-primary );
	font-size: 1em;
	flex-shrink: 0;
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-header .btn-close {
	margin: 0 -.25rem 0 auto;
	opacity: .65;
	filter: none;
	transition: opacity var( --ui-transition );
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-header .btn-close:hover,
.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-header .btn-close:focus {
	opacity: 1;
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-body {
	padding: 1.25rem 1.5rem;
	color: var( --ui-ink );
	background: var( --ui-surface );
}

.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-footer {
	padding: .85rem 1.5rem;
	background: var( --ui-surface-sunken );
	border-top: 1px solid var( --ui-border );
	gap: .5rem;
}

/* Drop the horizontal-scroll behavior nav-pills inherits — modals
   don't need it and it breaks the right-aligned button rhythm. */
.modal-footer.nav.nav-pills {
	overflow: visible;
	flex-wrap: wrap;
}

@media (max-width: 575.98px) {
	.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-header { padding: .85rem 1.15rem; }
	.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-body { padding: 1rem 1.15rem; }
	.modal:not( #concierge-modal ):not( #galleryModal ):not( #petVideoModal ) .modal-footer { padding: .75rem 1.15rem; }
}

/* ============================================================
   Form Modals (.tp-form-modal) — Gravity-Form-bearing modals
   like Pet Inquiry, Unlock Pricing, Contact, Schedule a Visit,
   plus the favorites Email-a-Friend custom form. Wider on
   desktop, polished form chrome that matches the theme tokens
   instead of Gravity Forms' default orbital look.

   Opt-in via the .tp-form-modal class on the .modal-dialog.
   The size-class selector excludes admin overrides (modal-lg /
   modal-xl) so admins can still pick a wider size if needed.
============================================================ */

.tp-form-modal:not( .modal-lg ):not( .modal-xl ):not( .modal-sm ) {
	--bs-modal-width: 720px;
}

@media (min-width: 1200px) {
	.tp-form-modal:not( .modal-lg ):not( .modal-xl ):not( .modal-sm ) {
		--bs-modal-width: 760px;
	}
}

/* Roomier body padding — these modals always have multiple sections
   stacked (pet card → callout → bubbles → form), so they need air. */
.tp-form-modal .modal-body {
	padding: 1.5rem 1.75rem !important;
}

@media (max-width: 575.98px) {
	.tp-form-modal .modal-body { padding: 1.15rem 1.15rem !important; }
}

/* --- Pet info card (top of #petInquiry / #unlockPriceModal) --- */

.tp-form-modal .card-pet-inquiry {
	background: var( --ui-surface-sunken );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius-sm );
	box-shadow: none;
	margin-bottom: 1.25rem;
	overflow: hidden;
}

.tp-form-modal .card-pet-inquiry .ratio { width: 88px !important; }

/* Defend the aspect-ratio spacer against a global `.ratio::before {
   padding-top: 45vh }` rule injected via Appearance → Customize →
   Additional CSS, which otherwise stretches this 88px square thumbnail
   to ~45% of the viewport height. */
.tp-form-modal .card-pet-inquiry .ratio::before { padding-top: var(--bs-aspect-ratio); }

.tp-form-modal .card-pet-inquiry .card-body { padding: 0.75rem 0.95rem; }

.tp-form-modal .card-pet-inquiry .card-title {
	color: var( --ui-ink );
	font-weight: 700;
	font-size: 0.95rem !important;
}

.tp-form-modal .card-pet-inquiry .card-text {
	color: var( --ui-ink-soft );
	opacity: 1 !important;
}

/* --- "How it works" callout (#unlockPriceModal info box) --- */

.tp-form-modal .unlock-price-how-it-works {
	background: var( --ui-surface-sunken );
	color: var( --ui-ink );
	border: 1px solid var( --ui-border );
	border-left: 3px solid var( --ui-info );
	border-radius: var( --ui-radius-sm );
	padding: 0.85rem 1rem;
	margin-bottom: 1.25rem;
}

.tp-form-modal .unlock-price-how-it-works .how-it-works-content {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.tp-form-modal .unlock-price-how-it-works svg {
	color: var( --ui-info );
	flex-shrink: 0;
	margin-top: 1px;
}

.tp-form-modal .unlock-price-how-it-works .how-it-works-label {
	color: var( --ui-ink );
	font-weight: 700;
	display: block;
	margin-bottom: 0.15rem;
}

.tp-form-modal .unlock-price-how-it-works .how-it-works-text {
	color: var( --ui-ink-soft );
	font-size: 0.9rem;
	line-height: 1.5;
}

/* --- Topic-bubbles section header --- */

.tp-form-modal #unlockPriceTopicSelector .form-label,
.tp-form-modal #inquiryTopicSelector .form-label,
.tp-form-modal [id$="TopicSelector"] .form-label {
	color: var( --ui-ink );
	font-size: 0.95rem;
	margin-bottom: 0.85rem !important;
}

.tp-form-modal [id$="TopicSelector"] .form-label .text-muted {
	font-size: 0.78rem;
	color: var( --ui-ink-faint ) !important;
	font-weight: 400;
}

/* --- Topic accordion (categories) --- */

.tp-form-modal .accordion-flush .accordion-item,
.tp-form-modal .accordion .accordion-item {
	background: var( --ui-surface );
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	overflow: hidden;
	margin-bottom: 0.5rem !important;
}

.tp-form-modal .accordion-flush .accordion-button,
.tp-form-modal .accordion .accordion-button {
	background: var( --ui-surface ) !important;
	color: var( --ui-ink );
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.7rem 1rem;
	box-shadow: none !important;
	transition: background var( --ui-transition );
}

.tp-form-modal .accordion-flush .accordion-button:hover,
.tp-form-modal .accordion .accordion-button:hover {
	background: var( --ui-surface-sunken ) !important;
}

.tp-form-modal .accordion-flush .accordion-button:not(.collapsed),
.tp-form-modal .accordion .accordion-button:not(.collapsed) {
	background: var( --ui-surface-sunken ) !important;
	color: var( --ui-primary );
}

.tp-form-modal .accordion-flush .accordion-button .emoji,
.tp-form-modal .accordion .accordion-button .emoji {
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

.tp-form-modal .accordion-flush .accordion-body,
.tp-form-modal .accordion .accordion-body {
	padding: 0.5rem 1rem 0.85rem;
}

/* --- Topic bubbles (the chip buttons inside each accordion body) --- */

.tp-form-modal .topic-bubble {
	--bs-btn-padding-y: 0.4rem;
	--bs-btn-padding-x: 0.85rem;
	--bs-btn-font-size: 0.825rem;
	--bs-btn-border-radius: 999px;
	font-weight: 500;
	border-width: 1.5px;
	text-align: left;
	line-height: 1.3;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-form-modal .topic-bubble:hover {
	transform: translateY( -1px );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

.tp-form-modal .topic-bubble:active,
.tp-form-modal .topic-bubble.active {
	transform: translateY( 0 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.1 );
}

.tp-form-modal .topic-bubble .emoji {
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

/* ============================================================
   Form fields inside .tp-form-modal — covers Gravity Forms
   AND the favorites custom-form modal (bare <input> / <textarea>).
   Polished borders, primary-color focus ring, comfortable touch
   targets, consistent typography.
============================================================ */

/* Strip the gform_wrapper's default border / padding — we draw the
   chrome on the modal body instead. */
.tp-form-modal .gform_wrapper {
	padding: 0 !important;
	border: 0 !important;
	margin-bottom: 0 !important;
	background: transparent !important;
}

.tp-form-modal .gform_wrapper .gfield {
	margin-bottom: 1rem;
}

.tp-form-modal .gform_wrapper .gfield_label,
.tp-form-modal form label:not( .gform-field-label--type-sub ):not( .gfield-choice-input + label ):not( .form-checkbox-label ) {
	color: var( --ui-ink );
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.4rem;
	display: block;
}

.tp-form-modal .gform_wrapper .gfield_required_text,
.tp-form-modal .gform_wrapper .gfield_required {
	color: var( --ui-ink-faint );
	font-weight: 400;
	font-size: 0.78rem;
	margin-left: 0.25rem;
}

/* The polished input — applies to BOTH .gform_wrapper inputs AND
   the favorites modal's bare <input>/<textarea> inside <form>. */
.tp-form-modal .gform_wrapper input[type="text"],
.tp-form-modal .gform_wrapper input[type="email"],
.tp-form-modal .gform_wrapper input[type="tel"],
.tp-form-modal .gform_wrapper input[type="url"],
.tp-form-modal .gform_wrapper input[type="number"],
.tp-form-modal .gform_wrapper input[type="password"],
.tp-form-modal .gform_wrapper textarea,
.tp-form-modal .gform_wrapper select,
.tp-form-modal form > div > input[type="text"],
.tp-form-modal form > div > input[type="email"],
.tp-form-modal form > div > input[type="tel"],
.tp-form-modal form > div > textarea {
	width: 100%;
	padding: 0.7rem 0.95rem;
	font-size: 0.95rem;
	color: var( --ui-ink );
	background: var( --ui-surface );
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-shadow: none !important;
	line-height: 1.4;
}

.tp-form-modal .gform_wrapper input[type="text"]:focus,
.tp-form-modal .gform_wrapper input[type="email"]:focus,
.tp-form-modal .gform_wrapper input[type="tel"]:focus,
.tp-form-modal .gform_wrapper input[type="url"]:focus,
.tp-form-modal .gform_wrapper input[type="number"]:focus,
.tp-form-modal .gform_wrapper input[type="password"]:focus,
.tp-form-modal .gform_wrapper textarea:focus,
.tp-form-modal .gform_wrapper select:focus,
.tp-form-modal form > div > input[type="text"]:focus,
.tp-form-modal form > div > input[type="email"]:focus,
.tp-form-modal form > div > input[type="tel"]:focus,
.tp-form-modal form > div > textarea:focus {
	outline: none;
	border-color: var( --ui-primary ) !important;
	box-shadow: 0 0 0 3px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.15 ) !important;
}

.tp-form-modal .gform_wrapper textarea,
.tp-form-modal form textarea {
	min-height: 110px;
	resize: vertical;
}

.tp-form-modal .gform_wrapper ::placeholder,
.tp-form-modal form ::placeholder {
	color: var( --ui-ink-faint );
	opacity: 1;
}

/* Sub-labels on split-name fields */
.tp-form-modal .gform_wrapper .gform-field-label--type-sub {
	color: var( --ui-ink-soft );
	font-size: 0.78rem;
	margin-top: 0.25rem;
}

/* First/Last name grid spacing */
.tp-form-modal .gform_wrapper .ginput_complex.ginput_container--name {
	gap: 0.75rem;
}

/* Checkboxes / radios */
.tp-form-modal .gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.4rem 0;
}

.tp-form-modal .gform_wrapper .gfield-choice-input {
	margin-top: 0.2rem;
	accent-color: var( --ui-primary );
	flex-shrink: 0;
}

.tp-form-modal .gform_wrapper .gform-field-label--type-inline {
	color: var( --ui-ink-soft );
	font-size: 0.88rem;
	line-height: 1.45;
	font-weight: 400;
}

/* --- Submit button — branded gradient, full-width, prominent --- */

.tp-form-modal .gform_footer {
	padding: 1.25rem 0 0 !important;
	border-top: 1px solid var( --ui-border );
	margin-top: 1.25rem !important;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tp-form-modal .gform_footer input[type="submit"],
.tp-form-modal .gform_footer .gform_button {
	width: 100%;
	padding: 0.85rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff !important;
	background: linear-gradient( 135deg, var( --bs-primary ) 0%, var( --bs-primary-dark, #d14d16 ) 100% ) !important;
	border: 0 !important;
	border-radius: var( --ui-radius-sm ) !important;
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.28 );
	transition: opacity 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
	cursor: pointer;
}

.tp-form-modal .gform_footer input[type="submit"]:hover,
.tp-form-modal .gform_footer .gform_button:hover {
	opacity: 0.95;
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.4 );
}

.tp-form-modal .gform_footer .text-body-secondary,
.tp-form-modal .gform_footer .small {
	color: var( --ui-ink-faint ) !important;
	font-size: 0.78rem;
}

.tp-form-modal .gform_footer .text-body-secondary a {
	color: var( --ui-ink-soft );
	text-decoration: underline;
	text-decoration-color: var( --ui-border-strong );
}

/* --- Validation errors --- */

.tp-form-modal .gform_wrapper .gfield_validation_message,
.tp-form-modal .gform_wrapper .gfield_error label {
	color: var( --ui-danger );
	font-size: 0.85rem;
}

.tp-form-modal .gform_wrapper .gfield_error input,
.tp-form-modal .gform_wrapper .gfield_error textarea,
.tp-form-modal .gform_wrapper .gfield_error select {
	border-color: var( --ui-danger ) !important;
	box-shadow: 0 0 0 3px rgba( 220, 38, 38, 0.12 ) !important;
}

.tp-form-modal .gform_wrapper .gform_validation_errors {
	background: rgba( 220, 38, 38, 0.06 );
	border: 1px solid rgba( 220, 38, 38, 0.25 );
	color: var( --ui-danger );
	padding: 0.85rem 1rem;
	border-radius: var( --ui-radius-sm );
	margin-bottom: 1rem;
}

/* --- Favorites custom form (#pepFavFriendModal) — match polish --- */

.tp-form-modal form > div {
	margin-bottom: 1rem;
}

.tp-form-modal form button[type="submit"]:not( .topic-bubble ):not( [data-action] ) {
	width: 100%;
	padding: 0.85rem 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	background: linear-gradient( 135deg, var( --bs-primary ) 0%, var( --bs-primary-dark, #d14d16 ) 100% );
	border: 0;
	border-radius: var( --ui-radius-sm );
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.28 );
	transition: opacity 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
	margin-top: 0.5rem;
}

.tp-form-modal form button[type="submit"]:not( .topic-bubble ):not( [data-action] ):hover {
	opacity: 0.95;
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.4 );
}

/* ============================================================
   Shipping marketing card (.tp-shipping-card) — rendered on the
   /cart shipping picker. Replaces the legacy black-overlay card
   with a polished tp-section-style component (white surface,
   light border, rounded, soft shadow). Image is optional.

   Used in: /woocommerce/cart/cart-shipping.php
============================================================ */

.tp-shipping-card {
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	box-shadow: var( --ui-shadow-xs );
	overflow: hidden;
}

.tp-shipping-card__media {
	background: var( --ui-surface-sunken );
}

.tp-shipping-card__image {
	display: block;
	width: 100%;
	height: 12rem;
	object-fit: cover;
}

.tp-shipping-card__head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1.15rem;
	border-bottom: 1px solid var( --ui-border );
	background: var( --ui-surface );
}

.tp-shipping-card__head > i {
	color: var( --ui-primary );
	font-size: 1.15rem;
	flex-shrink: 0;
}

.tp-shipping-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

.tp-shipping-card__price {
	margin-left: auto;
	font-weight: 700;
	color: var( --ui-ink );
	font-size: .95rem;
	white-space: nowrap;
}

.tp-shipping-card__body {
	padding: 1rem 1.15rem;
	color: var( --ui-ink );
}

.tp-shipping-card__body p:last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
	.tp-shipping-card__image { height: 9rem; }
	.tp-shipping-card__head  { padding: .7rem .95rem; }
	.tp-shipping-card__body  { padding: .85rem .95rem; }
}

/* Thank-you "What happens next" section — uses tp-section, just
   add a small bottom margin to separate from the order summary. */
.tp-shipping-next-steps { margin-top: 1.5rem; }
.tp-shipping-next-steps .tp-section__body p:last-child { margin-bottom: 0; }

/* ============================================================
   Search form
============================================================ */

.search-form input[type="search"],
.wp-block-search__input {
	border-radius: 999px;
	padding: .6rem 1.15rem;
	border: 1.5px solid var( --ui-border );
}

.search-form button,
.wp-block-search__button {
	border-radius: 999px;
	padding: .6rem 1.25rem;
}

/* ============================================================
   404 page
============================================================ */

.error-404,
.not-found {
	text-align: center;
	padding: 3rem 1.5rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	box-shadow: var( --ui-shadow-xs );
	margin: 2rem 0;
}

/* ============================================================
   Blog archive / post list
============================================================ */

article.post,
article.hentry,
.post-card {
	border-radius: var( --ui-radius );
	padding: 1.5rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	box-shadow: var( --ui-shadow-xs );
	transition: box-shadow var( --ui-transition ), transform var( --ui-transition );
	margin-bottom: 1.25rem;
}

article.post:hover,
article.hentry:hover,
.post-card:hover {
	box-shadow: var( --ui-shadow-lift );
	transform: translateY( -2px );
}

/* ============================================================
   Small quality-of-life fixes
============================================================ */

/* Selection color */
::selection {
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
}

/* Focus-visible ring for any focusable element without a custom one */
a:focus-visible,
button:focus-visible:not( .btn ):not( .concierge-close ),
[role="button"]:focus-visible {
	outline: 2px solid var( --ui-primary );
	outline-offset: 2px;
	border-radius: 6px;
}

/* Consistent hr */
hr:not( [class] ) {
	border: 0;
	border-top: 1px solid var( --ui-border );
	opacity: 1;
	margin: 1.5rem 0;
}

/* ============================================================
   Accessibility — honor reduced motion preference
============================================================ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* =====================================================================
 * Single-product "Learn more about this breed" accordion.
 * Markup: /woocommerce/single-product/tabs/tabs.php (scoped under
 * .breed-info-accordion).
 *
 * Previous styling used .bg-info / .text-info / shadow-lg / mb-4 which
 * rendered blue and left a big bottom gap above related products. The
 * block below switches to the theme's orange primary, softens the
 * treatment, and tightens the bottom spacing.
 * =================================================================== */
.breed-info-accordion {
	margin: 1.5rem 0 1rem;
}

.breed-info-accordion__item {
	background: #fff;
	border: 1px solid rgba(242, 99, 34, 0.18);
	border-radius: 0.875rem !important;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.breed-info-accordion__item:hover {
	border-color: rgba(242, 99, 34, 0.35);
	box-shadow: 0 8px 20px rgba(242, 99, 34, 0.08);
}

/* Button — the visible trigger. */
.breed-info-accordion__trigger.accordion-button {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.25rem;
	background: linear-gradient(135deg, #fff7f3 0%, #fffaf5 100%);
	color: #111;
	font-weight: 700;
	line-height: 1.25;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.breed-info-accordion__trigger.accordion-button:hover {
	background: linear-gradient(135deg, #ffeadd 0%, #fff7f3 100%);
}

.breed-info-accordion__trigger.accordion-button:focus {
	box-shadow: 0 0 0 3px rgba(242, 99, 34, 0.2) !important;
	outline: 0;
}

.breed-info-accordion__trigger.accordion-button:not(.collapsed) {
	background: linear-gradient(135deg, var(--brand-fill) 0%, var(--brand-text, #b34700) 100%);
	color: #fff;
}

.breed-info-accordion__trigger.accordion-button::after {
	margin-left: auto;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F26322' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	transition: transform 0.25s ease;
}

.breed-info-accordion__trigger.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	transform: rotate(-180deg);
}

/* Icon tile inside the trigger. */
.breed-info-accordion__icon {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #F26322;
	border-radius: 10px;
	font-size: 1.1rem;
	box-shadow: 0 2px 6px rgba(242, 99, 34, 0.22);
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.breed-info-accordion__trigger.accordion-button:not(.collapsed) .breed-info-accordion__icon {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Label stack: kicker on top, title below. */
.breed-info-accordion__label {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	text-align: left;
	min-width: 0;
}

.breed-info-accordion__kicker {
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #b34700;
	line-height: 1.2;
}

.breed-info-accordion__trigger.accordion-button:not(.collapsed) .breed-info-accordion__kicker {
	color: #ffd5b8;
}

.breed-info-accordion__title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* Body + sections */
.breed-info-accordion__body {
	padding: 1.5rem 1.5rem 1.25rem;
	background: #fdfdfd;
}

.breed-info-section {
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #f3f4f6;
}

.breed-info-section:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.breed-info-section__heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #111 !important;
	letter-spacing: -0.005em;
	margin: 0 0 0.625rem !important;
	line-height: 1.3;
}

.breed-info-section__heading::before {
	display: none;
}

.breed-info-section__heading .bi {
	font-size: 0.9rem;
	color: #F26322;
}

.breed-info-section__body {
	color: #374151;
	font-size: 0.95rem;
	line-height: 1.55;
}

.breed-info-section__body > :first-child {
	margin-top: 0;
}

.breed-info-section__body > :last-child {
	margin-bottom: 0;
}

.breed-info-section__body p {
	margin: 0 0 0.75rem;
}

.breed-info-section__body a:not(.btn) {
	color: #b34700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.breed-info-section__body a:not(.btn):hover {
	color: #8f3800;
}

/* Tighten tabs-wrapper bottom spacing — prior .mb-4 on the template
 * wrapper caused the big gap above the related products section. */
.woocommerce div.product .woocommerce-tabs.breed-info-accordion,
.woocommerce-tabs.breed-info-accordion {
	margin-bottom: 1rem !important;
}

@media (max-width: 575.98px) {
	.breed-info-accordion__trigger.accordion-button {
		padding: 0.75rem 1rem;
		gap: 0.625rem;
	}

	.breed-info-accordion__icon {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		font-size: 1rem;
	}

	.breed-info-accordion__title {
		font-size: 0.95rem;
	}

	.breed-info-accordion__body {
		padding: 1.25rem 1rem 1rem;
	}
}

/* ============================================================
   Pet single — price panel
   add-ons/woo-product/summary-right.php. First element of the right-hand
   column, so it is the page's commercial anchor.

   ┌───────────────────────────────┐
   │ PRICE                         │
   │ $49.99   $̶5̶9̶.̶9̶9̶               │
   │ ( Or apply for financing → )  │
   ├───────────────────────────────┤
   │ ✓ Includes vaccinations, …    │   ← sunken footer strip
   └───────────────────────────────┘

   NOTE: this is a VISUAL change to an element that ALREADY renders on any site
   with Theme Options → Commerce → Display & Purchase → "Show prices on browse
   surfaces" ON. It changes nothing about WHAT shows or WHEN — the default
   state (prices hidden) is untouched — but a site currently showing prices
   goes from a borderless column with a bottom rule to a bordered panel, and
   the sale strikethrough moves from before the price to after it.
============================================================ */

.tp-price {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	/* bottom padding is 0 — .tp-price__sub supplies the footer strip */
	padding: 1.1rem 1.25rem 0;
	margin: 0 0 1.25rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	box-shadow: var( --ui-shadow-xs );
}

/* Flush-top is right on lg+ (first child of the summary column, aligning with
   the gallery's top edge). Below lg the column stacks under the gallery and
   needs a gap — the row sets horizontal gutters only. */
@media (max-width: 991.98px) {
	.tp-price { margin-top: 1rem; }
}

.tp-price__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --ui-ink-faint );
}

/* #price stays on this element. Verified nothing reads it: no
   getElementById('price') / '#price' / querySelector('#price') anywhere in js/,
   and no stylesheet carries a #price rule. The only other id="price" is on the
   mutually-exclusive non-pet branch of summary-right.php. */
.tp-price__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .55rem;
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var( --ui-primary );
	line-height: 1.1;
}

.tp-price__amount .woocommerce-Price-amount,
.tp-price__amount .price,
.tp-price__amount bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* If a plugin wraps the price in its own .price, that wrapper has to be the
   flex container too or the del/ins ordering below stops applying. */
.tp-price__amount .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .55rem;
}

/* Sale: the price actually paid reads first, the struck original trails it.
   Safe under WCAG 1.3.2 because wc_format_sale_price() ships the
   .screen-reader-text announcement — see partials/pet-price-row.php. */
.tp-price__amount ins {
	order: 1;
	text-decoration: none;
	background: none;              /* UA default on <ins> in some engines */
	color: inherit;
}

.tp-price__amount del {
	order: 2;
	margin: 0;                     /* column-gap owns the spacing now */
	color: var( --ui-ink-faint );
	font-size: 1.05rem;
	font-weight: 600;
	opacity: 1;                    /* was .7, which dragged 5.1:1 down to ~3.6:1 */
	text-decoration-thickness: from-font;
}

/* Financing pill sits inside the padded body, above the footer strip. On
   --ui-surface rather than --ui-surface-sunken so it does not vanish into it. */
.tp-price__financing {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin: .65rem 0 0;
	padding: .35rem .7rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 600;
	color: var( --ui-ink-soft );
	text-decoration: none;
	width: fit-content;
	transition: color var( --ui-transition ), border-color var( --ui-transition );
}

.tp-price__financing:hover,
.tp-price__financing:focus {
	color: var( --ui-primary );
	border-color: var( --ui-primary );
}

/* The trust line becomes the panel's footer strip — the sunken fill is what
   ties this panel to the card row visually. order:3 keeps it last even though
   summary-right.php emits it BEFORE the financing link (label and amount
   default to order 0). Inner radius rather than overflow:hidden on the parent,
   so the financing pill's focus ring is never clipped. */
.tp-price__sub {
	order: 3;
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: .75rem -1.25rem 0;
	padding: .6rem 1.25rem;
	background: var( --ui-surface-sunken );
	border-top: 1px solid var( --ui-border );
	border-radius: 0 0 calc( var( --ui-radius ) - 1px ) calc( var( --ui-radius ) - 1px );
	font-size: .82rem;
	color: var( --ui-ink-soft );
}

.tp-price__sub i {
	flex: 0 0 auto;
	color: var( --ui-success );
	font-size: .9rem;
}

@media (max-width: 575.98px) {
	.tp-price         { padding: .95rem 1rem 0; }
	.tp-price__amount { font-size: 1.7rem; }
	.tp-price__sub    { margin: .65rem -1rem 0; padding: .55rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.tp-price__financing { transition: none; }
}

/* (Pet single CTA mobile override block removed — .tp-cta-secondary and
   .tp-cta-phone now have a single consistent treatment across all
   breakpoints, defined above. Min-heights of 56/52px are already
   ≥ recommended 48px touch target.) */

/* ============================================================
   Pet single — share section (replaces inline-gradient card)
============================================================ */

.tp-share-card {
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var( --ui-shadow-xs );
}

.tp-share-card__header {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .85rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var( --ui-border );
	color: var( --ui-primary );
}

.tp-share-card__header h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

.tp-share-card__intro {
	color: var( --ui-ink-soft );
	font-size: .92rem;
	margin-bottom: 1rem;
	line-height: 1.45;
}

.tp-share-card__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.tp-share-card__row .btn {
	border-radius: 999px !important;
	font-size: .88rem !important;
	padding: .55rem 1rem !important;
	min-height: 40px;
}

.tp-share-btn--instagram {
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ) !important;
	color: #fff !important;
	border: 0 !important;
}

.tp-share-btn--instagram:hover,
.tp-share-btn--instagram:focus {
	color: #fff !important;
	filter: brightness( 1.05 );
}

@media (max-width: 575.98px) {
	.tp-share-card__row .btn { flex: 1 1 calc( 50% - .25rem ); justify-content: center; }
}

/* ============================================================
   Pet single — testimonials (replaces inline-gradient card)
============================================================ */

.tp-testimonial-card {
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var( --ui-shadow-xs );
}

.tp-testimonial-card__header {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .85rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var( --ui-border );
	color: var( --ui-primary );
}

.tp-testimonial-card__header h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

.tp-testimonial-card__list {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.tp-testimonial-card__item:not( :last-child ) {
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var( --ui-border );
}

.tp-testimonial-card__head {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin-bottom: .5rem;
}

.tp-testimonial-card__avatar {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --ui-primary-fill );
	color: #fff;
	font-size: 1rem;
}

.tp-testimonial-card__stars {
	color: #f59e0b;
	font-size: .85rem;
	letter-spacing: 1px;
}

.tp-testimonial-card__name {
	display: block;
	color: var( --ui-ink );
	font-weight: 700;
	font-size: .95rem;
}

.tp-testimonial-card__pet-type {
	color: var( --ui-ink-faint );
	font-size: .78rem;
}

.tp-testimonial-card__quote {
	margin: 0;
	padding-left: 3rem;
	color: var( --ui-ink-soft );
	font-size: .92rem;
	font-style: italic;
	line-height: 1.5;
}

.tp-testimonial-card__more {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 1rem;
	padding: .5rem 1rem;
	border-radius: 999px;
	color: var( --ui-ink-soft );
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var( --ui-border );
	transition: color var( --ui-transition ), border-color var( --ui-transition );
}

.tp-testimonial-card__more:hover,
.tp-testimonial-card__more:focus {
	color: var( --ui-primary );
	border-color: var( --ui-primary );
}

@media (max-width: 575.98px) {
	.tp-testimonial-card__quote { padding-left: 0; }
}

/* ============================================================
   Pet single — CTA cards (in-store + virtual visit)
   Premium "Limited spots, book now" treatment: gradient surface,
   live calendar tile (when default icon), shimmering urgency badge,
   pill CTA. Designed to outclass third-party banners.
============================================================ */

.tp-cta-card {
	display: block;
	position: relative;
	overflow: hidden;
	background: linear-gradient( 180deg, #ffffff 0%, #fff5f5 100% );
	border: 1px solid rgba( 220, 38, 38, .14 );
	border-radius: calc( var( --ui-radius ) + 4px );
	padding: 1.25rem 1.4rem;
	box-shadow: 0 6px 20px rgba( 15, 23, 42, .06 ), 0 2px 6px rgba( 15, 23, 42, .04 );
	color: var( --ui-ink );
	text-decoration: none;
	isolation: isolate;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition ), border-color var( --ui-transition );
}

/* Brand-red ribbon stripe down the left edge. */
.tp-cta-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: linear-gradient( 180deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	z-index: 1;
}

/* Soft radial accent in the upper-right adds depth. */
.tp-cta-card::after {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 220px; height: 220px;
	background: radial-gradient( circle at center, rgba( 220, 38, 38, .08 ) 0%, transparent 70% );
	pointer-events: none;
	z-index: 0;
}

.tp-cta-card:hover,
.tp-cta-card:focus {
	color: var( --ui-ink );
	border-color: rgba( 220, 38, 38, .35 );
	box-shadow: 0 14px 30px rgba( 220, 38, 38, .15 ), 0 4px 10px rgba( 15, 23, 42, .06 );
	text-decoration: none;
}

@media (min-width: 769px) {
	.tp-cta-card:hover { transform: translateY( -3px ); }
}

/* Decorative paw-print pattern in the bottom-right quadrant. */
.tp-cta-card__pattern {
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 50%;
	height: 70%;
	background-color: rgba( 220, 38, 38, .07 );
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='14' cy='20' r='5'/><circle cx='32' cy='12' r='5'/><circle cx='50' cy='20' r='5'/><ellipse cx='32' cy='44' rx='14' ry='10'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='14' cy='20' r='5'/><circle cx='32' cy='12' r='5'/><circle cx='50' cy='20' r='5'/><ellipse cx='32' cy='44' rx='14' ry='10'/></svg>");
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 64px 64px;
	mask-size: 64px 64px;
	pointer-events: none;
	z-index: 0;
	opacity: .55;
}

.tp-cta-card__inner {
	position: relative;
	z-index: 2;
	display: flex;
	gap: 1.1rem;
	align-items: center;
}

/* Default round icon (used when icon != bi-calendar-check). */
.tp-cta-card__icon {
	position: relative;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	color: #fff;
	font-size: 1.7rem;
	box-shadow: 0 6px 16px rgba( 220, 38, 38, .3 );
	animation: tp-cta-icon-pulse 3s ease-in-out infinite;
}

/* Calendar tile variant — replaces the round icon when admin keeps the
   default `bi bi-calendar-check`. White tile with red header, today's
   day numeral. Reads like a real desk calendar. */
.tp-cta-card__icon--calendar {
	width: 68px;
	height: 76px;
	flex-direction: column;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	padding: 0;
	border: 1px solid rgba( 15, 23, 42, .1 );
	box-shadow: 0 8px 18px rgba( 15, 23, 42, .14 ), 0 2px 4px rgba( 15, 23, 42, .08 );
}

/* Two ring-binder dots above the red header strip. */
.tp-cta-card__icon--calendar::before,
.tp-cta-card__icon--calendar::after {
	content: '';
	position: absolute;
	top: 3px;
	width: 4px;
	height: 6px;
	background: rgba( 15, 23, 42, .65 );
	border-radius: 2px;
	z-index: 2;
	animation: none;
}

.tp-cta-card__icon--calendar::before { left: 18px; }
.tp-cta-card__icon--calendar::after  { right: 18px; }

.tp-cta-card__cal-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 22px;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	color: #fff;
	font-size: .55rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tp-cta-card__cal-day {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var( --ui-ink );
	font-size: 1.85rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.tp-cta-card__body { flex: 1; min-width: 0; position: relative; z-index: 2; }

/* Eyebrow + badge live on the same row at the top of the body. */
.tp-cta-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .35rem;
}

.tp-cta-card__eyebrow {
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --ui-primary );
}

.tp-cta-card__title {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: var( --ui-ink );
	margin: 0 0 .4rem;
	letter-spacing: -.015em;
	line-height: 1.2;
}

.tp-cta-card__title i { color: var( --ui-primary ); font-size: .95em; }

.tp-cta-card__text {
	color: var( --ui-ink-soft );
	font-size: .9rem;
	line-height: 1.5;
	margin: 0 0 .85rem;
}

/* CTA pill — promoted from text link to a real pressable button. */
.tp-cta-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .6rem 1.15rem;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	color: #fff;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .005em;
	box-shadow: 0 4px 12px rgba( 220, 38, 38, .28 );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition ), gap var( --ui-transition );
}

.tp-cta-card__cta i { color: #fff; font-size: 1em; transition: transform var( --ui-transition ); }

.tp-cta-card:hover .tp-cta-card__cta {
	gap: .65rem;
	box-shadow: 0 8px 20px rgba( 220, 38, 38, .42 );
	transform: translateY( -1px );
}
.tp-cta-card:hover .tp-cta-card__cta i { transform: translateX( 2px ); }

/* Urgency badge — inline on the same row as the eyebrow. */
.tp-cta-card__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .65rem;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	color: #fff;
	border-radius: 999px;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 3px 8px rgba( 220, 38, 38, .3 );
	overflow: hidden;
	white-space: nowrap;
}

.tp-cta-card__badge i { font-size: .9em; }

/* Shimmer sweep — left to right white sheen. */
.tp-cta-card__badge::after {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient( 105deg, transparent 0%, rgba( 255, 255, 255, .55 ) 50%, transparent 100% );
	animation: tp-badge-shimmer 2.6s ease-in-out infinite;
}

@keyframes tp-badge-shimmer {
	0%, 30% { left: -100%; }
	60%, 100% { left: 100%; }
}

@keyframes tp-cta-icon-pulse {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.04 ); }
}

@media (prefers-reduced-motion: reduce) {
	.tp-cta-card__icon,
	.tp-cta-card__badge::after { animation: none !important; }
	.tp-cta-card:hover { transform: none; }
}

@media (max-width: 575.98px) {
	.tp-cta-card { padding: 1rem 1.1rem; }
	.tp-cta-card__inner { flex-direction: column; text-align: center; align-items: stretch; gap: .75rem; }
	.tp-cta-card__icon { margin: 0 auto; }
	.tp-cta-card__head { justify-content: center; gap: .65rem; flex-wrap: wrap; }
	.tp-cta-card__title { justify-content: center; }
	.tp-cta-card__cta { justify-content: center; width: 100%; padding: .7rem 1.1rem; font-size: .9rem; }
}

/* ============================================================
   Pet single — universal soft section card
   Use for any standalone content section on the pet single page
   (inquiry form, testimonials, share, promise, etc.) so they all
   share the same border-radius, faint border, subtle shadow.
============================================================ */

.tp-section {
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var( --ui-shadow-xs );
}

.tp-section__header {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding-bottom: .85rem;
	margin-bottom: 1rem;
	border-bottom: 1px dashed var( --ui-border );
	color: var( --ui-primary );
}

.tp-section__header h4,
.tp-section__header h2 { /* a11y: single-pet sections promoted h4->h2 for valid heading order — same styling */
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	color: var( --ui-ink );
	letter-spacing: -.01em;
}

.tp-section__intro {
	color: var( --ui-ink-soft );
	font-size: .92rem;
	margin-bottom: 1rem;
	line-height: 1.45;
}

.tp-section__body { color: var( --ui-ink ); }

@media (max-width: 575.98px) {
	.tp-section { padding: 1rem 1.15rem; }
}

/* ============================================================
   Pet single — gallery container (replaces hard primary border)
============================================================ */

.pet-gallery-container {
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	box-shadow: var( --ui-shadow-xs );
	background: var( --ui-surface );
}

/* Soften legacy hard borders inside content scoped to the single page
   so existing templates that still pass `.border-2 .border-primary`
   on a card don't fight the polished baseline. */
.tp-section .card,
.pet-gallery-container,
.tp-image-card {
	box-shadow: var( --ui-shadow-xs );
}

/* ============================================================
   Pet single — image-mode CTA card (banner / image-only links)
============================================================ */

.tp-image-card {
	display: block;
	overflow: hidden;
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	box-shadow: var( --ui-shadow-xs );
	transition: box-shadow var( --ui-transition ), transform var( --ui-transition );
	text-decoration: none;
}

.tp-image-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

@media (min-width: 769px) {
	.tp-image-card:hover {
		box-shadow: var( --ui-shadow );
		transform: translateY( -2px );
	}
}

/* ============================================================
   Pet single — adopted alternatives mini-card softening
============================================================ */

.tp-alt-pet-card {
	display: block;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius-sm );
	box-shadow: var( --ui-shadow-xs );
	overflow: hidden;
	height: 100%;
	transition: box-shadow var( --ui-transition ), transform var( --ui-transition );
	text-decoration: none;
	color: var( --ui-ink );
}

.tp-alt-pet-card:hover,
.tp-alt-pet-card:focus {
	box-shadow: var( --ui-shadow );
	border-color: var( --ui-primary );
	color: var( --ui-ink );
	text-decoration: none;
}

@media (min-width: 769px) {
	.tp-alt-pet-card:hover { transform: translateY( -2px ); }
}

.tp-alt-pet-card__body {
	padding: .65rem .75rem;
	text-align: center;
}

.tp-alt-pet-card__name {
	display: block;
	font-size: .88rem;
	font-weight: 700;
	color: var( --ui-ink );
	margin-bottom: .15rem;
}

.tp-alt-pet-card__price {
	font-size: .82rem;
	font-weight: 600;
	color: var( --ui-primary );
}

/* ============================================================
   Pet single — inquiry form section ("Get More Information")
   Universal: targets .tp-section.inquire-form + generic Gravity
   Forms classes only (no per-form #gform_wrapper_<id> selectors),
   so it works on every site regardless of which form ID is chosen
   in Theme Options → gform_page.
============================================================ */

/* --- Section chrome lift: gradient top stripe + stronger shadow --- */

.tp-section.inquire-form,
.tp-section .inquire-form {
	position: relative;
}

.tp-section.inquire-form {
	background: rgb( 35 12 1 / 12% );
	border-color: rgba( var( --bs-primary-rgb ), 0.2 );
	box-shadow: var( --ui-shadow-sm );
	overflow: hidden;
}

.tp-section.inquire-form::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		135deg,
		var( --bs-primary, #f26322 ) 0%,
		var( --bs-primary-dark, #d14d16 ) 100%
	);
	border-radius: var( --ui-radius ) var( --ui-radius ) 0 0;
}

/* Header icon polish — pill-style tinted circle around the envelope icon. */
.tp-section.inquire-form .tp-section__header > .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	border-radius: 999px;
	flex-shrink: 0;
}

.tp-section.inquire-form .tp-section__header h4,
.tp-section.inquire-form .tp-section__header h2 {
	font-size: 1.1rem;
}

/* --- Wrapper reset: neutralize Gravity Forms' orbital-theme padding/border
       so our spacing/borders win without an arms race of !important --- */

.tp-section .inquire-form .gform_wrapper {
	margin-top: .25rem;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Defense-in-depth: orbital theme paints opaque white on inner GF containers,
   which would cover the section's tinted background. Force transparent on
   every layer of form chrome inside .tp-section .inquire-form. */
.tp-section .inquire-form .tp-section__body,
.tp-section .inquire-form form,
.tp-section .inquire-form .gform_wrapper .gform_body,
.tp-section .inquire-form .gform_wrapper .gform-body,
.tp-section .inquire-form .gform_wrapper .gform_fields {
	background: transparent !important;
}

/* --- Field spacing --- */

.tp-section .inquire-form .gform_wrapper .gfield {
	margin-bottom: 1rem;
}

/* Hidden fields (gfield_visibility_hidden) — defensive: GF hides via JS,
   but ensure no layout impact even if the script is delayed. */
.tp-section .inquire-form .gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}

/* --- Labels --- */

.tp-section .inquire-form .gform_wrapper .gfield_label,
.tp-section .inquire-form .gform_wrapper legend.gfield_label {
	color: var( --ui-ink );
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.4rem;
	display: block;
}

.tp-section .inquire-form .gform_wrapper .gfield_required,
.tp-section .inquire-form .gform_wrapper .gfield_required_text {
	color: var( --ui-ink-faint );
	font-weight: 400;
	font-size: 0.78rem;
	margin-left: 0.25rem;
}

/* --- Inputs / textareas / selects — the polished baseline --- */

.tp-section .inquire-form .gform_wrapper input[type="text"],
.tp-section .inquire-form .gform_wrapper input[type="email"],
.tp-section .inquire-form .gform_wrapper input[type="tel"],
.tp-section .inquire-form .gform_wrapper input[type="url"],
.tp-section .inquire-form .gform_wrapper input[type="number"],
.tp-section .inquire-form .gform_wrapper input[type="password"],
.tp-section .inquire-form .gform_wrapper input[type="date"],
.tp-section .inquire-form .gform_wrapper input[type="search"],
.tp-section .inquire-form .gform_wrapper textarea,
.tp-section .inquire-form .gform_wrapper select {
	width: 100%;
	padding: 0.85rem 1.05rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var( --ui-ink );
	background: var( --ui-surface );
	border: 1px solid var( --ui-border-strong ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	box-shadow: var( --ui-shadow-xs ) !important;
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition ), transform var( --ui-transition );
}

.tp-section .inquire-form .gform_wrapper input[type="text"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="email"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="tel"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="url"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="number"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="password"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="date"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper input[type="search"]:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper textarea:hover:not(:focus),
.tp-section .inquire-form .gform_wrapper select:hover:not(:focus) {
	box-shadow: var( --ui-shadow-sm ) !important;
}

/* Native select: keep room for the GF orbital theme's dropdown chevron icon. */
.tp-section .inquire-form .gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	background-image: var( --gf-icon-ctrl-select );
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 0.65rem auto;
	padding-right: 2.25rem;
}

/* --- Focus state --- */

.tp-section .inquire-form .gform_wrapper input:focus,
.tp-section .inquire-form .gform_wrapper textarea:focus,
.tp-section .inquire-form .gform_wrapper select:focus {
	outline: 0;
	border-color: var( --ui-primary ) !important;
	box-shadow: 0 0 0 3px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.15 ) !important;
}

/* --- Textarea sizing --- */

.tp-section .inquire-form .gform_wrapper textarea {
	min-height: 110px;
	resize: vertical;
}

/* --- Placeholders --- */

.tp-section .inquire-form .gform_wrapper ::placeholder {
	color: var( --ui-ink-faint );
	opacity: 1;
}

/* --- Split-name field (First / Last) — sub-labels + grid gap --- */

.tp-section .inquire-form .gform_wrapper .gform-field-label--type-sub {
	color: var( --ui-ink-soft );
	font-size: 0.78rem;
	margin-top: 0.25rem;
}

.tp-section .inquire-form .gform_wrapper .ginput_complex.ginput_container--name,
.tp-section .inquire-form .gform_wrapper .gform-grid-row {
	gap: 0.75rem;
}

.tp-section .inquire-form .gform_wrapper .ginput_complex .gform-grid-col {
	min-width: 0;
}

/* --- Checkboxes / radios — flex-aligned with branded accent --- */

.tp-section .inquire-form .gform_wrapper .gfield_checkbox,
.tp-section .inquire-form .gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.tp-section .inquire-form .gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.4rem 0;
}

.tp-section .inquire-form .gform_wrapper .gfield-choice-input {
	margin-top: 0.2rem;
	accent-color: var( --ui-primary );
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.tp-section .inquire-form .gform_wrapper .gform-field-label--type-inline,
.tp-section .inquire-form .gform_wrapper .gfield-choice-input + label {
	color: var( --ui-ink-soft );
	font-size: 0.9rem;
	line-height: 1.45;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}

/* --- Footer + submit button — branded gradient, full-width --- */

.tp-section .inquire-form .gform_footer,
.tp-section .inquire-form .gform-footer {
	padding: 1.25rem 0 0 !important;
	margin-top: 1.25rem !important;
	border-top: 1px solid var( --ui-border );
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tp-section .inquire-form .gform_wrapper input[type="submit"],
.tp-section .inquire-form .gform_wrapper .gform_button,
.tp-section .inquire-form .gform-footer input[type="submit"],
.tp-section .inquire-form .gform-footer .gform_button {
	width: 100%;
	padding: 0.85rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff !important;
	background: linear-gradient(
		135deg,
		var( --bs-primary ) 0%,
		var( --bs-primary-dark, #d14d16 ) 100%
	) !important;
	border: 0 !important;
	border-radius: var( --ui-radius-sm ) !important;
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.28 );
	transition: opacity var( --ui-transition ), transform var( --ui-transition ), box-shadow var( --ui-transition );
	cursor: pointer;
}

.tp-section .inquire-form .gform_wrapper input[type="submit"]:hover,
.tp-section .inquire-form .gform_wrapper .gform_button:hover,
.tp-section .inquire-form .gform-footer input[type="submit"]:hover,
.tp-section .inquire-form .gform-footer .gform_button:hover {
	opacity: 0.95;
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 242, 99, 34 ), 0.4 );
}

.tp-section .inquire-form .gform-footer .text-body-secondary,
.tp-section .inquire-form .gform-footer .small,
.tp-section .inquire-form .gform_footer .text-body-secondary,
.tp-section .inquire-form .gform_footer .small {
	color: var( --ui-ink-faint ) !important;
	font-size: 0.78rem;
}

.tp-section .inquire-form .gform-footer .text-body-secondary a,
.tp-section .inquire-form .gform_footer .text-body-secondary a {
	color: var( --ui-ink-soft );
	text-decoration: underline;
	text-decoration-color: var( --ui-border-strong );
}

/* --- Validation errors --- */

.tp-section .inquire-form .gform_wrapper .gfield_validation_message,
.tp-section .inquire-form .gform_wrapper .gfield_error label {
	color: var( --ui-danger );
	font-size: 0.85rem;
}

.tp-section .inquire-form .gform_wrapper .gfield_error input,
.tp-section .inquire-form .gform_wrapper .gfield_error textarea,
.tp-section .inquire-form .gform_wrapper .gfield_error select {
	border-color: var( --ui-danger ) !important;
	box-shadow: 0 0 0 3px rgba( 220, 38, 38, 0.12 ) !important;
}

.tp-section .inquire-form .gform_wrapper .gform_validation_errors {
	background: rgba( 220, 38, 38, 0.06 );
	border: 1px solid rgba( 220, 38, 38, 0.25 );
	color: var( --ui-danger );
	padding: 0.85rem 1rem;
	border-radius: var( --ui-radius-sm );
	margin-bottom: 1rem;
}

/* --- Mobile compaction --- */

@media (max-width: 575.98px) {
	.tp-section.inquire-form .tp-section__header > .bi {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.9rem;
	}

	.tp-section .inquire-form .gform_wrapper input[type="text"],
	.tp-section .inquire-form .gform_wrapper input[type="email"],
	.tp-section .inquire-form .gform_wrapper input[type="tel"],
	.tp-section .inquire-form .gform_wrapper input[type="url"],
	.tp-section .inquire-form .gform_wrapper input[type="number"],
	.tp-section .inquire-form .gform_wrapper input[type="password"],
	.tp-section .inquire-form .gform_wrapper textarea,
	.tp-section .inquire-form .gform_wrapper select {
		font-size: 16px; /* iOS focus-zoom prevention */
	}
}

/* ============================================================
   Pet single — Pet Details section (replaces card border-2 border-primary)
============================================================ */

/* Status banner sits at top of the section body — colored tint by status. */
.tp-detail-status {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .75rem 1rem;
	margin-bottom: 1.25rem;
	border-radius: var( --ui-radius-sm );
	font-size: .92rem;
	line-height: 1.4;
}

.tp-detail-status i { font-size: 1.1rem; flex-shrink: 0; }

.tp-detail-status strong { font-weight: 700; }

.tp-detail-status--available {
	background: var( --ui-success-soft );
	color: #15803d;
	border: 1px solid rgba( 22, 163, 74, .25 );
}
.tp-detail-status--available i { color: var( --ui-success ); }

.tp-detail-status--info {
	background: rgba( 14, 165, 233, .08 );
	color: #075985;
	border: 1px solid rgba( 14, 165, 233, .22 );
}
.tp-detail-status--info i { color: var( --ui-info ); }

.tp-detail-status--adopted {
	background: var( --ui-surface-sunken );
	color: var( --ui-ink-soft );
	border: 1px solid var( --ui-border );
}
.tp-detail-status--adopted i { color: var( --ui-ink-faint ); }

.tp-detail-status__divider {
	margin: 0 .15rem;
	color: var( --ui-ink-faint );
}

/* Detail grid — 2 cols on mobile, 3 cols on tablet+, soft bordered cells. */
.tp-detail-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: .65rem;
}

@media (min-width: 768px) {
	.tp-detail-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}

.tp-detail-row {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .65rem .75rem;
	background: var( --ui-surface-sunken );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius-sm );
	min-width: 0;
	transition: border-color var( --ui-transition ), background var( --ui-transition );
}

.tp-detail-row:hover {
	border-color: var( --ui-primary-tint );
	background: var( --ui-primary-soft );
}

.tp-detail-row__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	font-size: 1.05rem;
}

.tp-detail-row__body {
	flex: 1;
	min-width: 0;
}

.tp-detail-row__label {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --ui-ink-faint );
	line-height: 1.2;
	margin-bottom: .15rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tp-detail-row__value {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var( --ui-ink );
	line-height: 1.3;
	word-break: break-word;
}

@media (max-width: 380px) {
	.tp-detail-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Pet single — gallery polish (v2)
   Restrained palette: white glass + brand red + slate ink.
   No green/amber/olive/dual-blue gradients — matches the rest of the page.
============================================================ */

/* Outer container */
.pet-gallery-container {
	background: var( --ui-surface-sunken );
}

/* --- Top-LEFT corner: status badge stack --- */
.tp-gallery-corner {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	pointer-events: none;
}
.tp-gallery-corner > * { pointer-events: auto; }

/* Status badge — white glass pill with a colored dot. One restrained design;
   the dot is the only color cue, text is slate ink. */
.tp-gallery-badge {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .42rem .9rem .42rem .75rem;
	background: rgba( 255, 255, 255, .96 );
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --ui-ink );
	box-shadow: 0 4px 14px rgba( 15, 23, 42, .18 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	white-space: nowrap;
}

.tp-gallery-badge::before {
	content: '';
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var( --ui-ink-faint );
	box-shadow: 0 0 0 0 rgba( 0, 0, 0, .2 );
}

.tp-gallery-badge i {
	color: var( --ui-ink-soft );
	font-size: .9em;
}

/* Variants — only the dot/icon color changes, text stays slate. */
.tp-gallery-badge--available::before { background: #16a34a; animation: tp-dot-pulse 1.6s ease-out infinite; }
.tp-gallery-badge--available i        { color: #16a34a; }

.tp-gallery-badge--coming::before    { background: var( --ui-primary-fill ); animation: tp-dot-pulse 1.6s ease-out infinite; }
.tp-gallery-badge--coming i          { color: var( --ui-primary ); }

.tp-gallery-badge--adopted::before   { background: #94a3b8; }
.tp-gallery-badge--adopted i         { color: #94a3b8; }

@keyframes tp-dot-pulse {
	0%,100% { opacity: 1; transform: scale( 1 ); }
	50%     { opacity: .55; transform: scale( 1.25 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.tp-gallery-badge::before { animation: none !important; }
}

/* --- Top-RIGHT enlarge control --- */
/* Sits in the top-right corner by default (right:1rem, matching the top-left
   .tp-gallery-corner offset). When the favorites heart is present it shifts to
   the LEFT of the heart (.pep-fav-toggle--gallery is top:1rem, right:1rem, 48px)
   so the two read as a single 'controls' cluster without overlapping. The heart
   renders nothing when favorites is off, so :has() keeps the enlarge in the
   corner in that case. */

.tp-gallery-enlarge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .96 );
	color: var( --ui-primary );
	font-size: 1.05rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, .18 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition ), color var( --ui-transition );
}

.tp-gallery-enlarge:hover,
.tp-gallery-enlarge:focus {
	color: var( --ui-primary );
	transform: scale( 1.06 );
	box-shadow: 0 6px 20px rgba( 15, 23, 42, .25 );
	outline: none;
}

/* Heart present → tuck the enlarge to its left (heart at right:1rem, 48px wide). */
.pet-gallery-container:has( .pep-fav-toggle ) .tp-gallery-enlarge {
	right: 4.5rem;
}

@media (max-width: 575.98px) {
	.tp-gallery-enlarge { width: 42px; height: 42px; right: 1rem; font-size: .95rem; }
	.pet-gallery-container:has( .pep-fav-toggle ) .tp-gallery-enlarge { right: 4rem; }
	.pep-fav-toggle--gallery { width: 42px !important; height: 42px !important; }
}

/* --- Middle-right stack: views, popularity, unlock pricing --- */
.tp-gallery-stack {
	position: absolute;
	right: 1rem;
	bottom: 6.5rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
	max-width: 75%;
	pointer-events: none;
}
.tp-gallery-stack > * { pointer-events: auto; }

/* Counter / popularity pill — same shape as status badge, but smaller and
   quieter. Brand-red icon does the differentiating; text stays slate. */
.tp-gallery-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .8rem;
	background: rgba( 255, 255, 255, .96 );
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 700;
	color: var( --ui-ink );
	box-shadow: 0 3px 12px rgba( 15, 23, 42, .18 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	white-space: nowrap;
}

.tp-gallery-pill i {
	color: var( --ui-primary );
	font-size: .92em;
}

.tp-gallery-pill strong {
	font-weight: 800;
	color: var( --ui-ink );
}

/* Tiered view-count pills: hot (51+), warm (11-50), neutral (1-10).
   Same shape as the base pill, but each tier has its own color so
   high-traffic pets read instantly from the gallery overlay. */

.tp-gallery-pill--hot {
	background: linear-gradient( 135deg, #ef4444 0%, #dc2626 100% );
	color: #fff;
	border: 0;
	box-shadow: 0 4px 16px rgba( 220, 38, 38, .45 );
	padding: .42rem .9rem;
	font-size: .82rem;
	animation: tp-gallery-pill-pulse 2.4s ease-in-out infinite;
}
.tp-gallery-pill--hot i,
.tp-gallery-pill--hot strong { color: #fff; }
.tp-gallery-pill--hot i {
	font-size: 1em;
	filter: drop-shadow( 0 1px 1px rgba( 0, 0, 0, .2 ) );
	animation: tp-gallery-flame-flicker 1.6s ease-in-out infinite;
	transform-origin: 50% 75%;
}
.tp-gallery-pill__label {
	opacity: .9;
	font-weight: 600;
}
.tp-gallery-pill__badge {
	display: inline-flex;
	align-items: center;
	margin-left: .35rem;
	padding: .12rem .5rem;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .22 );
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@keyframes tp-gallery-flame-flicker {
	0%, 100% { transform: scale( 1 ) rotate( -1deg ); opacity: 1; }
	25%      { transform: scale( 1.08 ) rotate( 2deg ); opacity: .95; }
	50%      { transform: scale( .96 ) rotate( -2deg ); opacity: 1; }
	75%      { transform: scale( 1.04 ) rotate( 1deg ); opacity: .92; }
}

.tp-gallery-pill--warm {
	background: linear-gradient( 135deg, #f59e0b 0%, #ea580c 100% );
	color: #fff;
	border: 0;
	box-shadow: 0 4px 14px rgba( 234, 88, 12, .35 );
	padding: .4rem .85rem;
	font-size: .8rem;
}
.tp-gallery-pill--warm i,
.tp-gallery-pill--warm strong { color: #fff; }

.tp-gallery-pill--neutral {
	background: rgba( 15, 23, 42, .82 );
	color: #fff;
	border: 0;
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	box-shadow: 0 3px 12px rgba( 15, 23, 42, .25 );
}
.tp-gallery-pill--neutral i,
.tp-gallery-pill--neutral strong { color: #fff; }
.tp-gallery-pill--neutral i { opacity: .85; }

@keyframes tp-gallery-pill-pulse {
	0%, 100% {
		box-shadow: 0 4px 16px rgba( 220, 38, 38, .45 ), 0 0 0 0 rgba( 220, 38, 38, .35 );
	}
	50% {
		box-shadow: 0 4px 16px rgba( 220, 38, 38, .45 ), 0 0 0 8px rgba( 220, 38, 38, 0 );
	}
}

/* Unlock Pricing button — brand-red gradient pill, matches the hero deposit
   button's family. Replaces the olive-green block. */
.tp-gallery-unlock {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.1rem;
	margin-top: .15rem;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .01em;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .35 );
	cursor: pointer;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-gallery-unlock:hover,
.tp-gallery-unlock:focus {
	transform: translateY( -2px );
	box-shadow: 0 10px 24px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .45 );
	color: #fff;
	outline: none;
}

.tp-gallery-unlock i { font-size: .95em; opacity: .9; }

@media (max-width: 575.98px) {
	.tp-gallery-stack  { right: .75rem; bottom: 5.5rem; gap: .4rem; }
	.tp-gallery-unlock { padding: .55rem .9rem; font-size: .82rem; }
	.tp-gallery-pill   { font-size: .72rem; padding: .3rem .65rem; }
}

/* --- Bottom title overlay --- */
.tp-gallery-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 4rem 1rem .85rem;
	background: linear-gradient( to top, rgba( 0, 0, 0, .82 ) 0%, rgba( 0, 0, 0, .35 ) 55%, transparent 100% );
	pointer-events: none;
}
.tp-gallery-title > * { pointer-events: auto; }

/* --- Subscribe & Save badge --- */
.tp-gallery-subscribe {
	position: absolute;
	left: 1rem;
	bottom: 6.5rem;
	z-index: 3;
	pointer-events: none;
}
.tp-gallery-subscribe img {
	width: 9rem;
	max-width: 30vw;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, .55 ) );
}

/* --- Thumbnail row --- */
.tp-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: .55rem;
	margin-bottom: 1rem;
}

.tp-gallery-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var( --ui-radius-sm );
	overflow: hidden;
	border: 2px solid transparent;
	background: var( --ui-surface-sunken );
	cursor: pointer;
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition ), transform var( --ui-transition );
}

.tp-gallery-thumb:hover {
	border-color: var( --ui-border-strong );
}

.tp-gallery-thumb.active,
.tp-gallery-thumb.is-active {
	border-color: var( --ui-primary );
	box-shadow: 0 0 0 3px var( --ui-primary-soft );
}

.tp-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var( --ui-transition );
}

.tp-gallery-thumb:hover img { transform: scale( 1.06 ); }

.tp-gallery-thumb__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* (The video thumbnail styles that lived here are gone — the video is no longer
   a slide, so there is no video thumb. See .pet-video-cue further down.) */

/* --- Fullscreen modal carousel — matches the archive card lightbox
   (#cardImageModal): the photo floats on the dimmed backdrop instead of sitting
   in a black box. Transparent content + rounded, shadowed image, capped to the
   viewport so portrait or landscape both fit cleanly and stay centered. --- */
#galleryModal .modal-content {
	background: transparent;
	border: 0;
	box-shadow: none;
}
#galleryModal .btn-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
}
/* Direct-child img = photo slides only; the video slide keeps its 16:9 box. */
#galleryModal .carousel-item > img {
	display: block;
	margin-inline: auto;
	max-height: 85vh;
	width: auto;
	border-radius: var( --ui-radius );
	box-shadow: 0 1rem 3rem rgba( 0, 0, 0, .5 );
}

/* --- Carousel chevron controls (main + modal) --- */
.pet-gallery-container .carousel-control-prev,
.pet-gallery-container .carousel-control-next,
#galleryModal .carousel-control-prev,
#galleryModal .carousel-control-next {
	width: 48px;
	height: 48px;
	top: 50%;
	transform: translateY( -50% );
	background: rgba( 255, 255, 255, .96 );
	border-radius: 50%;
	margin: 0 1rem;
	opacity: 0;
	box-shadow: 0 4px 14px rgba( 15, 23, 42, .25 );
	transition: opacity var( --ui-transition );
	bottom: auto;
}

.pet-gallery-container:hover .carousel-control-prev,
.pet-gallery-container:hover .carousel-control-next,
#galleryModal .carousel-control-prev,
#galleryModal .carousel-control-next {
	opacity: 1;
}

.pet-gallery-container .carousel-control-prev-icon,
.pet-gallery-container .carousel-control-next-icon,
#galleryModal .carousel-control-prev-icon,
#galleryModal .carousel-control-next-icon {
	width: 18px;
	height: 18px;
	background-image: none;
	position: relative;
}

.pet-gallery-container .carousel-control-prev-icon::after,
#galleryModal .carousel-control-prev-icon::after {
	content: '';
	position: absolute;
	left: 5px; top: 4px;
	width: 10px; height: 10px;
	border-left: 2.5px solid var( --ui-primary );
	border-bottom: 2.5px solid var( --ui-primary );
	transform: rotate( 45deg );
}

.pet-gallery-container .carousel-control-next-icon::after,
#galleryModal .carousel-control-next-icon::after {
	content: '';
	position: absolute;
	right: 5px; top: 4px;
	width: 10px; height: 10px;
	border-right: 2.5px solid var( --ui-primary );
	border-top: 2.5px solid var( --ui-primary );
	transform: rotate( 45deg );
}

@media (max-width: 575.98px) {
	.pet-gallery-container .carousel-control-prev,
	.pet-gallery-container .carousel-control-next {
		width: 40px; height: 40px;
		opacity: 1;
		margin: 0 .5rem;
	}
}

/* ============================================================
   Video cue — poster-thumbnail badge on the main gallery image.
   The pet video is no longer a carousel slide; this badge is the only way in
   and it opens #petVideoModal, which autoplays it. Pinned bottom-LEFT: the only
   corner not already claimed by the status pill (top-left), the enlarge button
   and favourites heart (top-right), or the unlock-pricing stack (bottom-right),
   and it sits above the title gradient rather than inside it.
============================================================ */

.pet-video-cue {
	position: absolute;
	left: 1rem;
	bottom: 6.5rem; /* same shelf as .tp-gallery-stack, clear of the title overlay */
	z-index: 4;
	width: 108px;
	max-width: 34%;
	display: block;
	padding: 4px 4px 0;
	border: 0;
	border-radius: 14px;
	background: rgba( 255, 255, 255, .96 );
	box-shadow: 0 6px 20px rgba( 15, 23, 42, .28 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
	cursor: pointer;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

.pet-video-cue:hover,
.pet-video-cue:focus-visible {
	transform: translateY( -3px );
	box-shadow: 0 10px 26px rgba( 15, 23, 42, .38 );
}

.pet-video-cue:focus-visible {
	outline: 3px solid rgba( var( --bs-primary-rgb, 220, 53, 69 ), .55 );
	outline-offset: 2px;
}

.pet-video-cue__frame {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: #0f172a;
}

.pet-video-cue__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness( .82 );
	transition: filter var( --ui-transition );
}

.pet-video-cue:hover .pet-video-cue__frame img { filter: brightness( .66 ); }

.pet-video-cue__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .96 );
	color: #dc3545;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .35 );
	pointer-events: none;
}

.pet-video-cue__play i {
	font-size: 1rem;
	line-height: 1;
	margin-left: 2px;
}

.pet-video-cue__label {
	display: block;
	padding: .34rem 0 .4rem;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --ui-ink );
	text-align: center;
	line-height: 1;
}

/* No poster returned by the oEmbed lookup — collapse to a compact square tile
   rather than an empty widescreen box. */
.pet-video-cue--noposter { width: 76px; }
.pet-video-cue--noposter .pet-video-cue__frame { aspect-ratio: 1 / 1; }

/* Pulse ring — the whole point of the badge is that people were missing the
   video, so it announces itself once every couple of seconds. */
.pet-video-cue::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 0 rgba( var( --bs-primary-rgb, 220, 53, 69 ), .5 );
	animation: pet-video-cue-pulse 2.4s ease-out infinite;
}

@keyframes pet-video-cue-pulse {
	0%   { box-shadow: 0 0 0 0 rgba( var( --bs-primary-rgb, 220, 53, 69 ), .5 ); }
	70%  { box-shadow: 0 0 0 16px rgba( var( --bs-primary-rgb, 220, 53, 69 ), 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( var( --bs-primary-rgb, 220, 53, 69 ), 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.pet-video-cue::after { animation: none; }
	.pet-video-cue { transition: none; }
	.pet-video-cue:hover,
	.pet-video-cue:focus-visible { transform: none; }
}

/* Subscribe & Save badge shares the bottom-left corner — stack the cue above it. */
.pet-gallery-container:has( .tp-gallery-subscribe ) .pet-video-cue { bottom: 10.5rem; }

@media (max-width: 575.98px) {
	.pet-video-cue { left: .75rem; bottom: 5.5rem; width: 88px; border-radius: 12px; }
	.pet-video-cue__play { width: 26px; height: 26px; }
	.pet-video-cue__play i { font-size: .85rem; }
	.pet-video-cue__label { font-size: .58rem; letter-spacing: .06em; }
	.pet-gallery-container:has( .tp-gallery-subscribe ) .pet-video-cue { bottom: 9.5rem; }
}

/* Video-only pet: the poster frame stands in as the main image. */
.pet-video-only img { filter: brightness( .78 ); }

/* --- Video modal --- */
.pet-video-modal__content {
	background: #0b0b0b;
	border: 0;
	border-radius: var( --ui-radius, .75rem );
	overflow: hidden;
}

.pet-video-modal__header {
	border: 0;
	padding: .8rem 1rem;
	background: #0b0b0b;
}

.pet-video-modal__header .modal-title {
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.pet-video-modal__frame { background: #000; }

.pet-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================
   Cart page — empty cart button (subtle outline next to update cart)
============================================================ */

.petland-cart-empty {
	background: transparent !important;
	color: var( --ui-ink-soft ) !important;
	border: 1.5px solid var( --ui-border-strong ) !important;
	margin-right: .5rem;
	font-weight: 600;
	transition: color var( --ui-transition ), border-color var( --ui-transition );
}

.petland-cart-empty:hover,
.petland-cart-empty:focus {
	color: var( --ui-primary ) !important;
	border-color: var( --ui-primary ) !important;
	background: var( --ui-primary-soft ) !important;
}

.petland-cart-empty i { font-size: .95em; }

/* ============================================================

/* ============================================================
   Cart — premium pet-product card (v2)
   Higher specificity (.petland-cart-item.tp-cart-pet) so cart.css's
   default .petland-cart-item grid doesn't fight us. Flexbox layout —
   photo has a rigid width via flex-basis, body owns the remaining row.
============================================================ */

.petland-cart-item.tp-cart-pet {
	display: flex;
	flex-direction: row;
	gap: 1.25rem;
	padding: 1.25rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	box-shadow: var( --ui-shadow-xs );
	margin-bottom: 1rem;
	align-items: flex-start; /* keep photo from stretching with body height */
	grid-template-columns: none; /* nuke cart.css's grid template */
}

.petland-cart-item.tp-cart-pet > .tp-cart-pet__photo {
	flex: 0 0 200px;
	width: 200px;
	max-width: 200px;
	aspect-ratio: 1 / 1;
	border-radius: var( --ui-radius-sm );
	overflow: hidden;
	background: var( --ui-surface-sunken );
	align-self: flex-start;
	margin: 0;
}

.petland-cart-item.tp-cart-pet > .tp-cart-pet__photo a,
.petland-cart-item.tp-cart-pet > .tp-cart-pet__photo img {
	display: block;
	width: 100%;
	height: 100%;
}

.petland-cart-item.tp-cart-pet > .tp-cart-pet__photo img {
	object-fit: cover;
	transition: transform var( --ui-transition );
}

.petland-cart-item.tp-cart-pet > .tp-cart-pet__photo a:hover img {
	transform: scale( 1.04 );
}

.petland-cart-item.tp-cart-pet > .tp-cart-pet__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* Mobile: stack photo above body */
@media (max-width: 767.98px) {
	.petland-cart-item.tp-cart-pet {
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
	}

	.petland-cart-item.tp-cart-pet > .tp-cart-pet__photo {
		flex: 0 0 auto;
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
		aspect-ratio: 4 / 3;
	}
}

/* --- Top row: name + breed/gender on the left, remove on the right --- */

.tp-cart-pet__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.tp-cart-pet__title {
	flex: 1 1 auto;
	min-width: 0;
}

.tp-cart-pet__name {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var( --ui-ink );
	text-decoration: none;
	line-height: 1.2;
	margin: 0;
}

a.tp-cart-pet__name:hover,
a.tp-cart-pet__name:focus {
	color: var( --ui-primary );
	text-decoration: none;
}

.tp-cart-pet__subhead {
	margin: .25rem 0 0;
	color: var( --ui-ink-soft );
	font-size: .92rem;
	font-weight: 500;
}

.tp-cart-pet__sep {
	margin: 0 .35rem;
	color: var( --ui-ink-faint );
}

@media (max-width: 575.98px) {
	.tp-cart-pet__name { font-size: 1.15rem; }
	.tp-cart-pet__subhead { font-size: .85rem; }
}

/* Remove pill in the head row — overrides cart.css .petland-cart-item-remove. */
.petland-cart-item.tp-cart-pet .petland-cart-item-remove {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	color: var( --ui-ink-faint );
	text-decoration: none;
	border: 1px solid var( --ui-border );
	background: var( --ui-surface );
	transition: color var( --ui-transition ), border-color var( --ui-transition ), background var( --ui-transition );
	white-space: nowrap;
}

.petland-cart-item.tp-cart-pet .petland-cart-item-remove::before {
	content: '×';
	font-size: 1.05rem;
	line-height: 1;
}

.petland-cart-item.tp-cart-pet .petland-cart-item-remove:hover,
.petland-cart-item.tp-cart-pet .petland-cart-item-remove:focus {
	color: var( --ui-primary );
	border-color: var( --ui-primary );
	background: var( --ui-primary-soft );
}

/* --- Status pill: tighten so it sits inline cleanly --- */

.petland-cart-item.tp-cart-pet .tp-detail-status {
	margin: 0;
	padding: .55rem .85rem;
	font-size: .85rem;
}

/* --- Price + qty row --- */

.tp-cart-pet__commerce {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .65rem .85rem;
	background: var( --ui-surface-sunken );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius-sm );
	flex-wrap: wrap;
}

.tp-cart-pet__price {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.4rem;
	font-weight: 800;
	color: var( --ui-primary );
	letter-spacing: -.015em;
	line-height: 1.1;
}

.tp-cart-pet__price .woocommerce-Price-amount,
.tp-cart-pet__price ins,
.tp-cart-pet__price .price,
.tp-cart-pet__price bdi {
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
	text-decoration: none;
}

.tp-cart-pet__price del {
	color: var( --ui-ink-faint );
	font-size: .95rem;
	font-weight: 600;
	margin-right: .4rem;
	opacity: .7;
}

.tp-cart-pet__qty {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.petland-cart-item.tp-cart-pet .tp-cart-pet__qty .quantity {
	margin: 0;
}

.petland-cart-item.tp-cart-pet .tp-cart-pet__qty input.qty {
	width: 60px;
	height: 36px;
	padding: 0 .5rem;
	border-radius: var( --ui-radius-sm );
	border: 1px solid var( --ui-border-strong );
	text-align: center;
	font-weight: 600;
}

.petland-cart-item.tp-cart-pet .tp-cart-pet__qty input.qty:focus {
	border-color: var( --ui-primary );
	box-shadow: 0 0 0 4px var( --ui-primary-soft );
	outline: 0;
}

@media (max-width: 575.98px) {
	.tp-cart-pet__price { font-size: 1.2rem; }
}

/* --- Detail grid spacing inside the cart card --- */

.petland-cart-item.tp-cart-pet .tp-cart-pet__grid {
	gap: .5rem;
}

/* --- Includes line — tinted green panel, wraps cleanly --- */

.tp-cart-pet__includes {
	list-style: none;
	margin: 0;
	padding: .75rem 1rem;
	background: var( --ui-success-soft );
	border: 1px solid rgba( 22, 163, 74, .22 );
	border-radius: var( --ui-radius-sm );
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: .5rem .85rem;
}

@media (min-width: 992px) {
	.tp-cart-pet__includes { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}

.tp-cart-pet__includes li {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .8rem;
	font-weight: 600;
	color: #15803d;
	min-width: 0;
	line-height: 1.25;
}

.tp-cart-pet__check {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --ui-success );
	position: relative;
	box-shadow: 0 1px 3px rgba( 22, 163, 74, .35 );
}

.tp-cart-pet__check::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translate( -50%, -65% ) rotate( -45deg );
}

@media (max-width: 380px) {
	.tp-cart-pet__includes { grid-template-columns: 1fr; }
	.tp-cart-pet__commerce { flex-direction: column; align-items: stretch; gap: .65rem; }
	.tp-cart-pet__qty { justify-content: flex-end; }
}

/* ============================================================
   Checkout — comprehensive polish
   Same design language as cart + pet single. Sections render as
   .tp-section-style cards with brand-red icon headers, dashed
   underline, white surface, soft shadow. Every WC-toggle-aware
   subsection (coupon, shipping, order notes, payment, account)
   inherits the same chrome.
============================================================ */

body.woocommerce-checkout main#content,
body.woocommerce-checkout main.site-main {
	padding-top: 1.5rem;
}

body.woocommerce-checkout .container > .page-title {
	margin: 0 0 1.5rem !important;
	font-size: clamp( 1.75rem, 4vw, 2.5rem ) !important;
	font-weight: 800 !important;
	letter-spacing: -.015em;
	color: var( --ui-ink );
}

/* --- Section card chrome --- */
/* Targets WC's stable class names — works whether the template was edited or not. */

.woocommerce-checkout .tp-checkout-section,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-account-fields,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_wrapper {
	background: var( --ui-surface ) !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius ) !important;
	padding: 1.5rem !important;
	margin-bottom: 1.25rem !important;
	box-shadow: var( --ui-shadow-xs );
}

/* Order notes section is wrapped in .woocommerce-additional-fields when notes
   are enabled. Don't apply card chrome unconditionally — only when there's
   actual content (an h3 indicates the field block is enabled). */
.woocommerce-checkout .woocommerce-additional-fields:has( h3 ) {
	background: var( --ui-surface ) !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius ) !important;
	padding: 1.5rem !important;
	margin-bottom: 1.25rem !important;
	box-shadow: var( --ui-shadow-xs );
}

@media (max-width: 575.98px) {
	.woocommerce-checkout .tp-checkout-section,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields,
	.woocommerce-checkout .woocommerce-account-fields,
	.woocommerce-checkout .woocommerce-form-coupon,
	.woocommerce-checkout .woocommerce-additional-fields:has( h3 ),
	.woocommerce-checkout #order_review {
		padding: 1.15rem !important;
	}
}

/* --- Section headings: icon + bold slate title + dashed underline --- */
/* Reuses the .tp-section__header visual language. */

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3:not( .tp-checkout-shipping-toggle ),
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout .woocommerce-account-fields h3,
.woocommerce-checkout .woocommerce-form-coupon h3,
.woocommerce-checkout #order_review h3,
.woocommerce-checkout .tp-checkout-section--payment h3,
.woocommerce-checkout #order_review_heading {
	display: flex !important;
	align-items: center;
	gap: .55rem;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	color: var( --ui-ink ) !important;
	margin: 0 0 1rem !important;
	padding: 0 0 .85rem !important;
	border-bottom: 1px dashed var( --ui-border ) !important;
	text-transform: none !important;
	letter-spacing: -.015em !important;
}

.woocommerce-checkout .woocommerce-billing-fields h3::before,
.woocommerce-checkout .woocommerce-shipping-fields h3:not( .tp-checkout-shipping-toggle )::before,
.woocommerce-checkout .woocommerce-additional-fields h3::before,
.woocommerce-checkout .woocommerce-account-fields h3::before,
.woocommerce-checkout .woocommerce-form-coupon h3::before,
.woocommerce-checkout #order_review h3::before,
.woocommerce-checkout .tp-checkout-section--payment h3::before,
.woocommerce-checkout #order_review_heading::before {
	font-family: 'bootstrap-icons';
	font-size: 1.1rem;
	color: var( --ui-primary );
	flex-shrink: 0;
	line-height: 1;
}

/* Section-specific icons */
.woocommerce-checkout .woocommerce-billing-fields h3::before { content: '\F4DB'; }      /* person-lines-fill */
.woocommerce-checkout .woocommerce-shipping-fields h3:not( .tp-checkout-shipping-toggle )::before { content: '\F5EA'; }     /* truck */
.woocommerce-checkout .woocommerce-additional-fields h3::before { content: '\F264'; }   /* chat-square-text */
.woocommerce-checkout .woocommerce-account-fields h3::before { content: '\F47B'; }      /* lock */
.woocommerce-checkout .woocommerce-form-coupon h3::before { content: '\F5AF'; }         /* tag-fill */
.woocommerce-checkout #order_review h3::before,
.woocommerce-checkout #order_review_heading::before { content: '\F171'; }                /* bag-check */
.woocommerce-checkout .tp-checkout-section--payment h3::before { content: '\F2DC'; }    /* credit-card */

/* Payment heading specifically — when WC duplicates the order_review_heading
   inside the payment box, only show one icon + title. */
.woocommerce-checkout .tp-checkout-section--payment #order_review_heading::before {
	content: '\F2DC';
}

/* --- Shipping checkbox heading (Ship to a different address?) --- */

.woocommerce-checkout .tp-checkout-shipping-toggle {
	display: flex !important;
	align-items: center;
	gap: .65rem;
	margin: 0 !important;
	padding: 0 0 .85rem !important;
	border-bottom: 1px dashed var( --ui-border );
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var( --ui-ink ) !important;
}

.woocommerce-checkout .tp-checkout-shipping-toggle::before {
	content: '\F5EA'; /* truck */
	font-family: 'bootstrap-icons';
	font-size: 1.05rem;
	color: var( --ui-primary );
	flex-shrink: 0;
}

.woocommerce-checkout .tp-checkout-shipping-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --ui-primary );
	cursor: pointer;
}

.woocommerce-checkout .tp-checkout-shipping-toggle label {
	font-weight: 700 !important;
	cursor: pointer;
	flex: 1;
	margin: 0;
}

.woocommerce-checkout .shipping_address {
	padding-top: 1rem !important;
}

/* --- Form fields --- */
/* Inputs / selects / textareas — same polished feel as account modal. */

.woocommerce-checkout .form-row {
	margin-bottom: 1rem !important;
	padding: 0 !important;
}

.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
	color: var( --ui-ink );
	letter-spacing: .01em;
}

.woocommerce-checkout .form-row label .required,
.woocommerce-checkout .form-row label .optional {
	color: var( --ui-primary );
	font-weight: 700;
	margin-left: .15rem;
	text-decoration: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container--default .select2-selection--single {
	width: 100% !important;
	padding: .65rem .85rem !important;
	border: 1px solid var( --ui-border-strong ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	font-size: .95rem !important;
	font-weight: 500 !important;
	color: var( --ui-ink ) !important;
	background: var( --ui-surface ) !important;
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition );
	min-height: 44px;
	box-shadow: none !important;
}

.woocommerce-checkout .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var( --ui-primary ) !important;
	box-shadow: 0 0 0 4px var( --ui-primary-soft ) !important;
	outline: 0 !important;
}

/* Select2 quirks — center the dropdown arrow vertically with our taller field */
.woocommerce-checkout .select2-container--default .select2-selection--single {
	height: auto !important;
	display: flex;
	align-items: center;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.4 !important;
	color: var( --ui-ink ) !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: .5rem !important;
}

/* Two-column rows where WC outputs them (form-row-first / form-row-last) */
.woocommerce-checkout .form-row-first { width: calc( 50% - .5rem ); float: left; }
.woocommerce-checkout .form-row-last { width: calc( 50% - .5rem ); float: right; }
.woocommerce-checkout .form-row-wide { clear: both; width: 100%; }

@media (max-width: 575.98px) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last { width: 100%; float: none; }
}

/* --- Account fields ("Create an account?" toggle + password field) --- */

.woocommerce-checkout .woocommerce-account-fields {
	display: block;
}

.woocommerce-checkout .woocommerce-account-fields .form-row.create-account {
	background: var( --ui-surface-sunken );
	padding: .85rem 1rem !important;
	border-radius: var( --ui-radius-sm );
	border: 1px solid var( --ui-border );
	margin-bottom: 1rem !important;
}

.woocommerce-checkout .woocommerce-account-fields .form-row.create-account label {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-weight: 600;
	color: var( --ui-ink );
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-account-fields .form-row.create-account input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --ui-primary );
}

/* --- Coupon section --- */

.woocommerce-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 1.25rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-message {
	background: var( --ui-surface ) !important;
	border: 1px dashed var( --ui-primary-tint ) !important;
	border-radius: var( --ui-radius-sm );
	color: var( --ui-ink-soft );
	padding: .75rem 1rem !important;
	margin: 0 0 1rem !important;
	font-size: .9rem;
	display: flex;
	align-items: center;
	gap: .55rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-message::before {
	content: '\F5AF'; /* tag-fill */
	font-family: 'bootstrap-icons';
	color: var( --ui-primary );
	font-size: 1rem;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon {
	color: var( --ui-primary );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: auto;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon:hover {
	text-decoration: none;
}

.woocommerce-checkout .tp-checkout-coupon-hint {
	color: var( --ui-ink-soft );
	font-size: .9rem;
	margin: 0 0 .85rem !important;
}

.woocommerce-checkout .tp-checkout-coupon-row {
	display: flex;
	gap: .55rem;
	align-items: stretch;
}

.woocommerce-checkout .tp-checkout-coupon-input {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout .tp-checkout-coupon-apply {
	flex-shrink: 0;
	border-radius: 999px !important;
	padding: .65rem 1.4rem !important;
	font-weight: 700 !important;
	text-transform: none !important;
}

@media (max-width: 480px) {
	.woocommerce-checkout .tp-checkout-coupon-row { flex-direction: column; }
	.woocommerce-checkout .tp-checkout-coupon-apply { width: 100%; }
}

/* --- Order review (left column, sticky) --- */

@media (min-width: 992px) {
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .col-lg-4 > .woocommerce-form-coupon-toggle,
	.woocommerce-checkout .col-lg-4 > .woocommerce-form-coupon {
		position: relative;
	}

	.woocommerce-checkout .col-lg-4 {
		position: sticky;
		top: 1rem;
		align-self: flex-start;
	}
}

/* Order review table — flat, no outer border, side-padding via row */
.woocommerce-checkout #order_review .shop_table,
.woocommerce-checkout #order_review table {
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: transparent !important;
}

.woocommerce-checkout #order_review .shop_table thead {
	display: none; /* column titles redundant with the cart-style rows */
}

.woocommerce-checkout #order_review .shop_table tbody {
	display: block;
}

.woocommerce-checkout #order_review .shop_table tbody tr {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	padding: .75rem .25rem !important;
	border: 0 !important;
	border-bottom: 1px dashed var( --ui-border ) !important;
	background: transparent !important;
}

.woocommerce-checkout #order_review .shop_table tbody tr:last-child {
	border-bottom: 0 !important;
}

.woocommerce-checkout #order_review .shop_table tbody td,
.woocommerce-checkout #order_review .shop_table tbody th {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	vertical-align: top !important;
	font-size: .92rem !important;
	line-height: 1.4 !important;
}

.woocommerce-checkout #order_review .shop_table tbody td.product-name,
.woocommerce-checkout #order_review .shop_table tbody th.product-name {
	flex: 1 1 auto !important;
	min-width: 0;
	color: var( --ui-ink ) !important;
	font-weight: 600 !important;
	text-align: left !important;
	padding-right: .5rem !important;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .35rem;
}

.woocommerce-checkout #order_review .shop_table tbody td.product-total,
.woocommerce-checkout #order_review .shop_table tbody th.product-total {
	flex: 0 0 auto !important;
	text-align: right !important;
	color: var( --ui-ink ) !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.woocommerce-checkout #order_review .shop_table tbody .product-quantity {
	color: var( --ui-ink-soft );
	font-weight: 500;
	font-size: .85rem;
	margin: 0;
}

/* Inline "Remove" link injected by woo-checkout.php on the
   woocommerce_cart_item_name filter — discrete outline pill that
   matches the polish system instead of jarring red text. */
.woocommerce-checkout .checkout-remove-item {
	display: inline-flex !important;
	align-items: center;
	gap: .25rem;
	padding: .12rem .5rem;
	margin: 0 .5rem 0 0 !important;
	border-radius: 999px;
	border: 1px solid var( --ui-border );
	background: var( --ui-surface );
	color: var( --ui-ink-faint ) !important;
	font-size: .7rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	line-height: 1.2;
	flex-shrink: 0;
	transition: color var( --ui-transition ), border-color var( --ui-transition ), background var( --ui-transition );
}

.woocommerce-checkout .checkout-remove-item:hover,
.woocommerce-checkout .checkout-remove-item:focus {
	color: var( --ui-primary ) !important;
	border-color: var( --ui-primary ) !important;
	background: var( --ui-primary-soft );
	text-decoration: none !important;
}

.woocommerce-checkout .checkout-remove-item svg {
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
}

/* Totals tfoot */
.woocommerce-checkout #order_review .shop_table tfoot {
	display: block;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var( --ui-border );
}

.woocommerce-checkout #order_review .shop_table tfoot tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0 .25rem;
}

.woocommerce-checkout #order_review .shop_table tfoot tr:not( :last-child ):not( .order-total ) {
	border-bottom: 1px dashed var( --ui-border );
}

.woocommerce-checkout #order_review .shop_table tfoot th,
.woocommerce-checkout #order_review .shop_table tfoot td {
	padding: .7rem 0 !important;
	border: 0 !important;
	font-size: .92rem !important;
	background: transparent !important;
	line-height: 1.4 !important;
}

.woocommerce-checkout #order_review .shop_table tfoot th {
	color: var( --ui-ink-soft ) !important;
	font-weight: 500 !important;
	text-align: left !important;
}

.woocommerce-checkout #order_review .shop_table tfoot td {
	color: var( --ui-ink ) !important;
	font-weight: 600 !important;
	text-align: right !important;
	white-space: nowrap !important;
}

/* Shipping row — sunken sub-card. Label + method + Change button on the
   left, price aligned right at the top so layout reads cleanly. */
.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost {
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: .85rem !important;
	padding: .9rem 1rem !important;
	background: var( --ui-surface-sunken );
	border-radius: var( --ui-radius-sm );
	border: 1px solid var( --ui-border );
	margin: .5rem 0;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost th {
	flex: 1 1 auto !important;
	min-width: 0;
	display: flex !important;
	flex-direction: column;
	gap: .35rem;
	align-items: flex-start !important;
	text-align: left !important;
	padding: 0 !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost td {
	flex: 0 0 auto !important;
	padding: 0 !important;
	text-align: right !important;
	color: var( --ui-primary ) !important;
	font-weight: 700 !important;
	font-size: .98rem !important;
	white-space: nowrap !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost p {
	margin: 0 !important;
	font-size: .85rem;
	color: var( --ui-ink-soft );
	line-height: 1.3;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost p.fw-bold {
	color: var( --ui-ink );
	font-weight: 700 !important;
	text-transform: uppercase;
	font-size: .72rem !important;
	letter-spacing: .08em;
	margin: 0 !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost a.btn {
	display: inline-flex !important;
	align-items: center;
	gap: .35rem;
	padding: .35rem .85rem !important;
	border-radius: 999px !important;
	background: var( --ui-surface ) !important;
	color: var( --ui-primary ) !important;
	border: 1px solid var( --ui-primary ) !important;
	font-size: .78rem !important;
	font-weight: 600 !important;
	margin: .15rem 0 0 !important;
	text-decoration: none !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost a.btn:hover,
.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost a.btn:focus {
	background: var( --ui-primary-fill ) !important;
	color: #fff !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.shipping_cost a.btn .bi {
	font-size: .9em !important;
}

/* Order total — brand-red tinted band */
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total {
	margin-top: .65rem !important;
	padding: 0 1rem !important;
	background: var( --ui-primary-soft );
	border-radius: var( --ui-radius-sm );
}

.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td {
	padding: .9rem 0 !important;
	font-size: 1.15rem !important;
	font-weight: 800 !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.order-total th {
	color: var( --ui-ink ) !important;
}

.woocommerce-checkout #order_review .shop_table tfoot tr.order-total td {
	color: var( --ui-primary ) !important;
}

.woocommerce-checkout #order_review .shop_table .woocommerce-Price-amount,
.woocommerce-checkout #order_review .shop_table .woocommerce-Price-currencySymbol,
.woocommerce-checkout #order_review .shop_table strong,
.woocommerce-checkout #order_review .shop_table bdi {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* --- Payment block --- */

.woocommerce-checkout #payment {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.woocommerce-checkout #payment .payment_methods {
	list-style: none !important;
	margin: 0 0 1rem !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.woocommerce-checkout #payment .wc_payment_method,
.woocommerce-checkout #payment .payment_methods li {
	background: var( --ui-surface ) !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	padding: .85rem 1rem !important;
	margin: 0 !important;
	transition: border-color var( --ui-transition ), background var( --ui-transition );
}

.woocommerce-checkout #payment .wc_payment_method:has( input[type="radio"]:checked ),
.woocommerce-checkout #payment .payment_methods li:has( input[type="radio"]:checked ) {
	border-color: var( --ui-primary ) !important;
	background: var( --ui-primary-soft ) !important;
	box-shadow: 0 0 0 1px var( --ui-primary );
}

.woocommerce-checkout #payment .wc_payment_method label,
.woocommerce-checkout #payment .payment_methods li label {
	display: flex !important;
	align-items: center;
	gap: .55rem;
	font-weight: 600 !important;
	color: var( --ui-ink ) !important;
	cursor: pointer;
	margin: 0 !important;
}

.woocommerce-checkout #payment .wc_payment_method input[type="radio"],
.woocommerce-checkout #payment .payment_methods input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --ui-primary );
	flex-shrink: 0;
}

.woocommerce-checkout #payment .payment_box {
	margin-top: .85rem !important;
	padding: 1rem !important;
	background: var( --ui-surface-sunken ) !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	font-size: .92rem;
	color: var( --ui-ink-soft );
}

.woocommerce-checkout #payment .payment_box::before {
	display: none !important; /* WC adds a default arrow that clashes */
}

.woocommerce-checkout #payment .payment_box p {
	margin: 0 0 .5rem;
}

.woocommerce-checkout #payment .payment_box p:last-child {
	margin-bottom: 0;
}

/* --- Terms acceptance --- */

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	background: var( --ui-surface-sunken );
	padding: .85rem 1rem !important;
	border-radius: var( --ui-radius-sm );
	border: 1px solid var( --ui-border );
	margin: 1rem 0 !important;
	font-size: .88rem;
	color: var( --ui-ink-soft );
	line-height: 1.5;
}

.woocommerce-checkout .form-row.validate-required.woocommerce-validated label {
	font-weight: 600;
	color: var( --ui-ink );
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: .55rem;
	cursor: pointer;
}

.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: .15rem 0 0 0;
	accent-color: var( --ui-primary );
	flex-shrink: 0;
}

/* --- Place order button --- */

.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100% !important;
	padding: 1rem 1.5rem !important;
	margin-top: 1rem !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	letter-spacing: .005em;
	border-radius: 999px !important;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% ) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .35 ) !important;
	cursor: pointer;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
	text-transform: none !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
	transform: translateY( -2px );
	box-shadow: 0 10px 28px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .45 ) !important;
	color: #fff !important;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% ) !important;
}

.woocommerce-checkout #place_order::after {
	content: '\F47A'; /* lock-fill — small trust signal */
	font-family: 'bootstrap-icons';
	font-size: .85em;
	opacity: .7;
}

.woocommerce-checkout #place_order:disabled,
.woocommerce-checkout #place_order.disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

/* --- WC notices on the checkout page --- */

.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	margin-bottom: 1.25rem;
	padding: .85rem 1.1rem !important;
	border-radius: var( --ui-radius-sm ) !important;
	border-width: 1px !important;
	border-style: solid !important;
	font-size: .92rem;
	box-shadow: var( --ui-shadow-xs );
}

.woocommerce-checkout .woocommerce-error {
	background: rgba( 220, 38, 38, .06 ) !important;
	border-color: rgba( 220, 38, 38, .25 ) !important;
	color: #991b1b !important;
}

.woocommerce-checkout .woocommerce-info {
	background: rgba( 14, 165, 233, .06 ) !important;
	border-color: rgba( 14, 165, 233, .22 ) !important;
	color: #075985 !important;
}

.woocommerce-checkout .woocommerce-message {
	background: var( --ui-success-soft ) !important;
	border-color: rgba( 22, 163, 74, .25 ) !important;
	color: #15803d !important;
}

/* --- Login prompt at top of checkout (returning customer toggle) --- */

.woocommerce-checkout .woocommerce-form-login-toggle {
	margin-bottom: 1.25rem;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	gap: .55rem;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before {
	content: '\F4DB'; /* person-lines-fill */
	font-family: 'bootstrap-icons';
	color: var( --ui-primary );
	font-size: 1rem;
}

.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin {
	color: var( --ui-primary );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: auto;
}

.woocommerce-checkout .woocommerce-form-login {
	background: var( --ui-surface ) !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius ) !important;
	padding: 1.5rem !important;
	margin-bottom: 1.25rem !important;
	box-shadow: var( --ui-shadow-xs );
}

/* --- Shipping methods offcanvas (theme already wraps in .offcanvas) --- */

#offcanvasShipping .offcanvas-header {
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% ) !important;
	color: #fff !important;
	padding: 1.15rem 1.5rem !important;
}

#offcanvasShipping .offcanvas-title {
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
}

#offcanvasShipping .offcanvas-body {
	padding: 1.5rem !important;
}

#offcanvasShipping .shipping-buttons #shipping_method li {
	display: flex !important;
	align-items: center;
	gap: .55rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius-sm );
	padding: .85rem 1rem !important;
	margin: 0 0 .55rem !important;
	transition: border-color var( --ui-transition ), background var( --ui-transition );
	cursor: pointer;
}

#offcanvasShipping .shipping-buttons #shipping_method li:has( input[type="radio"]:checked ) {
	border-color: var( --ui-primary );
	background: var( --ui-primary-soft );
}

#offcanvasShipping .shipping-buttons #shipping_method input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --ui-primary );
	flex-shrink: 0;
}

#offcanvasShipping .shipping-buttons #shipping_method label {
	font-weight: 600 !important;
	color: var( --ui-ink ) !important;
	cursor: pointer;
	margin: 0 !important;
}

/* --- Misc cleanup: remove WC's red "*" and asterisks in heading --- */

.woocommerce-checkout abbr.required {
	border: 0;
	color: var( --ui-primary );
	font-weight: 700;
	text-decoration: none;
}

/* Form tightening on smaller screens */
@media (max-width: 767.98px) {
	body.woocommerce-checkout #customer_details {
		flex-direction: column-reverse; /* form first, order review below */
	}
	body.woocommerce-checkout #customer_details > .col-lg-4,
	body.woocommerce-checkout #customer_details > .col-lg {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}
}

/* ============================================================
   Footer — comprehensive polish
   Matches the design system used on cart/checkout/pet-page.
============================================================ */

/* Top action bar (Get in Touch + Contact + Back-to-top) */
body footer .navbar.bg-gray {
	background: var( --ui-surface-sunken ) !important;
	border-top: 1px solid var( --ui-border );
	border-bottom: 1px solid var( --ui-border );
	padding: .85rem 0 !important;
}

body footer .navbar.bg-gray .container {
	display: flex !important;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

body footer .navbar.bg-gray > .container > p {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var( --ui-ink ) !important;
	letter-spacing: -.01em;
}

body footer .footer-cta-row {
	display: inline-flex !important;
	gap: .55rem !important;
	align-items: center;
}

/* Polished Contact button — brand-red gradient pill matching Place Order */
.tp-footer-contact {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.25rem;
	border-radius: 999px;
	background: linear-gradient( 135deg, var( --ui-primary-fill ) 0%, var( --brand-text, #b91c2e ) 100% );
	color: #fff !important;
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: .005em;
	text-decoration: none !important;
	border: 0;
	box-shadow: 0 4px 14px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .3 );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-footer-contact:hover,
.tp-footer-contact:focus {
	color: #fff !important;
	transform: translateY( -1px );
	box-shadow: 0 6px 20px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .42 );
	text-decoration: none !important;
}

.tp-footer-contact i { font-size: 1em; }

.tp-footer-contact.is-disabled {
	opacity: .55;
	pointer-events: none;
	cursor: not-allowed;
}

/* Back-to-top circular button */
.tp-footer-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --ui-surface );
	color: var( --ui-ink-soft ) !important;
	border: 1px solid var( --ui-border );
	font-size: 1rem;
	text-decoration: none !important;
	transition: color var( --ui-transition ), border-color var( --ui-transition ), background var( --ui-transition );
}

.tp-footer-top:hover,
.tp-footer-top:focus {
	color: var( --ui-primary ) !important;
	border-color: var( --ui-primary );
	background: var( --ui-primary-soft );
}

@media (max-width: 575.98px) {
	.tp-footer-contact { padding: .55rem 1rem; font-size: .85rem; }
	.tp-footer-top { width: 36px; height: 36px; font-size: .9rem; }
	body footer .navbar.bg-gray > .container > p { font-size: .95rem !important; }
}

/* Footer body — surface + spacing */
body footer .footer {
	background: var( --ui-surface ) !important;
}

body footer .footer h3.h6 { /* a11y: h4->h3 (heading order) — same appearance */
	font-size: .78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var( --ui-ink-faint ) !important;
	margin: 0 0 1rem !important;
}

body footer .footer h3.text-primary {
	color: var( --ui-ink-faint ) !important; /* override the hard primary tint — uses faint slate to match the polish system */
}

/* Quick links nav */
body footer .footer .nav.flex-column {
	gap: .35rem !important;
}

body footer .footer .nav-link {
	color: var( --ui-ink-soft ) !important;
	font-size: .92rem !important;
	font-weight: 500 !important;
	padding: 0 !important;
	transition: color var( --ui-transition );
}

body footer .footer .nav-link:hover,
body footer .footer .nav-link:focus {
	color: var( --ui-primary ) !important;
}

/* Locations cards container — multi-location safe */
body footer .footer-locations-cards .footer-location-cards {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

@media (max-width: 991.98px) {
	body footer .footer-locations-cards .footer-location-cards {
		display: flex;
		gap: .75rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 1rem;
		padding-bottom: .5rem !important;
		-webkit-overflow-scrolling: touch;
	}
	body footer .footer-locations-cards .footer-location-cards > li {
		flex: 0 0 78%;
		max-width: 78%;
		scroll-snap-align: start;
		min-width: 0;
	}
	body footer .footer-locations-cards .footer-location-cards::-webkit-scrollbar {
		height: 4px;
	}
	body footer .footer-locations-cards .footer-location-cards::-webkit-scrollbar-thumb {
		background: var( --ui-border-strong );
		border-radius: 999px;
	}
}

/* Payment icons row */
body footer .footer-payment-icons {
	gap: .85rem !important;
	padding: .25rem 0;
}

body footer .footer-payment-icons svg {
	max-height: 28px;
	width: auto;
	opacity: .65;
	transition: opacity var( --ui-transition );
}

body footer .footer-payment-icons span:hover svg {
	opacity: 1;
}

body footer .border-top.border-gray {
	border-top-color: var( --ui-border ) !important;
}

/* Copyright bar */
body footer .border-top.border-gray.py-2 {
	background: var( --ui-surface-sunken );
}

body footer .border-top.border-gray.py-2 p {
	color: var( --ui-ink-faint ) !important;
	font-size: .75rem !important;
	letter-spacing: .005em;
}

body footer .border-top.border-gray.py-2 p a {
	color: var( --ui-ink-soft ) !important;
}

body footer .border-top.border-gray.py-2 p a:hover,
body footer .border-top.border-gray.py-2 p a:focus {
	color: var( --ui-primary ) !important;
}

/* ============================================================
   Homepage — horizontal scroll for "Available Pets" on mobile
   2.2 cards visible at once. Already uses snap-slider on the <ul>;
   we just need to override the Bootstrap row-cols-1 width on mobile.
============================================================ */

@media (max-width: 575.98px) {
	#glide-products.row-cols-1 > * {
		flex: 0 0 auto !important;
		width: 47% !important;
		max-width: 47% !important;
		scroll-snap-align: start;
	}

	#glide-products {
		gap: .65rem !important;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: .5rem;
		padding-bottom: .5rem !important;
		-webkit-overflow-scrolling: touch;
	}

	#glide-products::-webkit-scrollbar {
		height: 4px;
	}

	#glide-products::-webkit-scrollbar-thumb {
		background: var( --ui-border-strong );
		border-radius: 999px;
	}
}

/* Slightly smaller for 2.5 cards on tiny screens (≤380px) */
@media (max-width: 380px) {
	#glide-products.row-cols-1 > * {
		width: 42% !important;
		max-width: 42% !important;
	}
}

/* ============================================================
   Homepage — "How Can We Help You?" horizontal scroll on mobile
   3 cards. Default Bootstrap stacks them vertically. On mobile
   we snap-scroll horizontally to compress vertical space.
============================================================ */

@media (max-width: 767.98px) {
	.section-quick-boxes .quick-boxes-row {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1rem;
		padding-bottom: .65rem !important;
		gap: .85rem !important;
		-webkit-overflow-scrolling: touch;
		margin-left: -.85rem;
		margin-right: -.85rem;
		padding-left: .85rem;
		padding-right: .85rem;
	}

	.section-quick-boxes .quick-boxes-row > .col {
		flex: 0 0 auto !important;
		width: 78% !important;
		max-width: 78% !important;
		scroll-snap-align: start;
	}

	.section-quick-boxes .quick-boxes-row::-webkit-scrollbar {
		height: 4px;
	}

	.section-quick-boxes .quick-boxes-row::-webkit-scrollbar-thumb {
		background: var( --ui-border-strong );
		border-radius: 999px;
	}

	.section-quick-boxes .quick-box-card {
		border-radius: var( --ui-radius ) !important;
		overflow: hidden;
	}
}

/* Tighter title on mobile to match the new tighter section */
@media (max-width: 575.98px) {
	.section-quick-boxes .section-title {
		font-size: 1.4rem !important;
		margin-bottom: 1rem;
	}
}

/* ============================================================
   Homepage — "Industry Recognition" horizontal scroll on mobile
   3-4 award logos. Same pattern as quick-boxes; smaller card width
   since logos are visually compact (shows ~2.4 cards).
============================================================ */

@media (max-width: 767.98px) {
	.section-credibility .credibility-row {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1rem;
		padding-bottom: .65rem !important;
		gap: .85rem !important;
		-webkit-overflow-scrolling: touch;
		margin-left: -.85rem;
		margin-right: -.85rem;
		padding-left: .85rem;
		padding-right: .85rem;
		justify-content: flex-start !important;
	}

	.section-credibility .credibility-row > .col {
		flex: 0 0 auto !important;
		width: 42% !important;
		max-width: 42% !important;
		scroll-snap-align: start;
	}

	.section-credibility .credibility-row::-webkit-scrollbar {
		height: 4px;
	}

	.section-credibility .credibility-row::-webkit-scrollbar-thumb {
		background: var( --ui-border-strong );
		border-radius: 999px;
	}
}

@media (max-width: 380px) {
	.section-credibility .credibility-row > .col {
		width: 48% !important;
		max-width: 48% !important;
	}
}

/* ============================================================
   Homepage — "Getting Started" accordion polish (.tp-accordion)
   White section cards with brand-red icon circles, smooth chevron
   rotation on expand, soft brand-red tint when active.
============================================================ */

.tp-getting-started .section-title {
	margin-bottom: 1.5rem;
}

.tp-accordion {
	display: flex;
	flex-direction: column;
	gap: .65rem;
}

.tp-accordion .accordion-item {
	background: var( --ui-surface ) !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius ) !important;
	overflow: hidden;
	box-shadow: var( --ui-shadow-xs );
	margin: 0 !important;
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-accordion .accordion-item:has( .accordion-button:not( .collapsed ) ),
.tp-accordion .accordion-item.is-active {
	border-color: var( --ui-primary ) !important;
	box-shadow: 0 0 0 1px var( --ui-primary-tint );
}

/* Reset Bootstrap's accordion-item rounded-corners override on first/last */
.tp-accordion > .accordion-item:first-of-type,
.tp-accordion > .accordion-item:last-of-type,
.tp-accordion > .accordion-item:first-of-type > .accordion-header .accordion-button,
.tp-accordion > .accordion-item:last-of-type > .accordion-header .accordion-button {
	border-radius: var( --ui-radius ) !important;
}

.tp-accordion .accordion-header { margin: 0; }

.tp-accordion .accordion-button {
	display: flex !important;
	align-items: center;
	gap: .85rem;
	width: 100%;
	padding: 1rem 1.15rem !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var( --ui-ink ) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: left;
	letter-spacing: -.005em;
	transition: background var( --ui-transition ), color var( --ui-transition );
}

.tp-accordion .accordion-button:hover {
	background: var( --ui-surface-sunken ) !important;
}

.tp-accordion .accordion-button:focus,
.tp-accordion .accordion-button:focus-visible {
	box-shadow: inset 0 0 0 4px var( --ui-primary-soft ) !important;
	outline: 0 !important;
	z-index: 3;
}

.tp-accordion .accordion-button:not( .collapsed ) {
	background: var( --ui-primary-soft ) !important;
	color: var( --ui-primary ) !important;
}

/* Icon circle */
.tp-accordion__icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var( --ui-primary-soft );
	color: var( --ui-primary );
	transition: background var( --ui-transition ), color var( --ui-transition ), transform var( --ui-transition );
}

.tp-accordion__icon i,
.tp-accordion__icon svg {
	font-size: 1.05rem !important;
	line-height: 1;
}

.tp-accordion__icon svg {
	width: 18px;
	height: 18px;
}

.tp-accordion .accordion-button:not( .collapsed ) .tp-accordion__icon {
	background: var( --ui-primary-fill );
	color: #fff;
	transform: scale( 1.04 );
}

.tp-accordion__title {
	flex: 1 1 auto;
	min-width: 0;
}

/* Chevron — replace Bootstrap's SVG arrow with a CSS one that rotates */
.tp-accordion .accordion-button::after {
	background-image: none !important;
	width: 11px !important;
	height: 11px !important;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	margin-top: -.25em;
	margin-left: .5rem;
	flex-shrink: 0;
	opacity: .7;
	transition: transform var( --ui-transition ), opacity var( --ui-transition );
}

.tp-accordion .accordion-button:not( .collapsed )::after {
	transform: rotate( -135deg );
	margin-top: .15em;
	opacity: 1;
}

/* Body */
.tp-accordion .accordion-body {
	padding: .25rem 1.15rem 1.25rem !important;
	color: var( --ui-ink-soft );
	font-size: .95rem;
	line-height: 1.6;
}

.tp-accordion .accordion-body p {
	margin: 0 0 .85rem;
}

.tp-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* CTA link inside accordion bodies — discrete brand-red link with arrow */
.tp-accordion__cta-row { margin: .75rem 0 0 !important; }

.tp-accordion__cta {
	display: inline-flex !important;
	align-items: center;
	gap: .35rem;
	padding: .55rem 1.15rem;
	border-radius: 999px;
	background: var( --ui-primary-fill );
	color: #fff !important;
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none !important;
	border: 0;
	box-shadow: 0 3px 10px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .25 );
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-accordion__cta:hover,
.tp-accordion__cta:focus {
	transform: translateY( -1px );
	box-shadow: 0 5px 14px rgba( var( --bs-primary-rgb, 220, 53, 69 ), .35 );
	color: #fff !important;
}

.tp-accordion__cta i {
	font-size: .95em;
	transition: transform var( --ui-transition );
}

.tp-accordion__cta:hover i {
	transform: translateX( 2px );
}

@media (max-width: 575.98px) {
	.tp-accordion .accordion-button {
		padding: .9rem 1rem !important;
		font-size: .98rem !important;
		gap: .65rem;
	}
	.tp-accordion__icon {
		width: 32px;
		height: 32px;
	}
	.tp-accordion__icon i { font-size: .92rem !important; }
	.tp-accordion .accordion-body {
		padding: .15rem 1rem 1.1rem !important;
		font-size: .92rem;
	}
}

/* ============================================================
   Pet archive — Sort dropdown
   The dropdown uses Popper strategy 'fixed' (set in archive-product.php)
   to escape the .input-group's overflow:hidden clipping. Without an
   explicit width constraint, fixed-strategy means the menu has no
   parent containing-block to inherit width from, so it can stretch.
============================================================ */

#sortByMenu.dropdown-menu {
	min-width: 220px;
	max-width: min( 280px, calc( 100vw - 2rem ) );
	width: max-content;
	padding: .35rem !important;
	border: 1px solid var( --ui-border ) !important;
	border-radius: var( --ui-radius-sm ) !important;
	box-shadow: var( --ui-shadow-lift );
	background: var( --ui-surface ) !important;
	z-index: 1080;
}

#sortByMenu .dropdown-item {
	display: flex !important;
	align-items: center;
	gap: .5rem;
	padding: .55rem .85rem !important;
	border-radius: var( --ui-radius-sm );
	font-size: .92rem;
	font-weight: 500;
	color: var( --ui-ink ) !important;
	background: transparent !important;
	transition: background var( --ui-transition ), color var( --ui-transition );
}

#sortByMenu .dropdown-item:hover,
#sortByMenu .dropdown-item:focus {
	background: var( --ui-primary-soft ) !important;
	color: var( --ui-primary ) !important;
	outline: none;
}

#sortByMenu .dropdown-item.active {
	background: var( --ui-primary-fill ) !important;
	color: #fff !important;
}

#sortByMenu .dropdown-item.active::after {
	content: '\F26A'; /* bi-check-lg */
	font-family: 'bootstrap-icons';
	font-size: .95em;
	margin-left: auto;
	opacity: .9;
}

#sortByMenu .dropdown-divider {
	margin: .35rem 0;
	border-top: 1px solid var( --ui-border );
}

/* The toggle button itself — keep matching the polished look */
#sortByDropdown {
	border-radius: 0 !important; /* it sits at the right edge of the input-group */
	font-weight: 600 !important;
}

#sortByDropdown:hover,
#sortByDropdown:focus {
	background: var( --ui-surface-sunken ) !important;
}

/* ============================================================
   Pet cards — collapse the "View" overlay to icon-only on mobile.
   /partials/loop-product.php renders <div class="product-details-indicator">
   <i class="bi bi-plus-circle"></i><span>View</span></div> as a corner
   badge on the image. Below 768px, hide the text label so only the
   "+" icon remains for a tighter tap target.
   ============================================================ */
@media (max-width: 767.98px) {
	.product-details-indicator span { display: none; }
}

/* ============================================================
   Video Gallery cards — partials/loop-video.php
   Vivid thumbnails, branded centered play badge, hover-only dim.
   Title sits below the thumbnail; whole tile is clickable into
   the #video modal (data-src is read by js/script.js videoModal()).
   ============================================================ */
.post-type-archive-pet-videos #page_banner {
	--bs-aspect-ratio: 20rem;
}

.video-card { isolation: isolate; }

.video-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.video-card__media {
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	transition: box-shadow .25s ease, transform .25s ease;
}

.video-card:hover .video-card__media {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
	transform: translateY(-2px);
}

.video-card__img {
	transition: opacity .25s ease, transform .35s ease;
}

.video-card:hover .video-card__img {
	opacity: .6;
	transform: scale(1.03);
}

.video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	display: grid;
	place-items: center;
	background: var(--bs-primary, #f26322);
	color: #fff;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	opacity: .92;
	transition: opacity .2s ease, transform .25s ease;
	pointer-events: none;
}

.video-card:hover .video-card__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.08);
}

.video-card__body { color: var(--bs-body-color); }

.video-card__body h2,
.video-card__body .h6 {
	color: inherit;
	line-height: 1.3;
}

.video-card:focus-within .video-card__play {
	outline: 3px solid rgba(255, 255, 255, .85);
	outline-offset: 2px;
}

/* ============================================================
   Pet card — price row
   partials/pet-price-row.php, between the name block and the CTA buttons in
   partials/loop-product.php.

   ┌──────────────────────────┐
   │ PRICE             $49.99 │
   └──────────────────────────┘

   Only renders on cards whose product category an admin opted in (Theme
   Options → Commerce → "Always show prices in these categories"), so every
   rule here is inert on existing sites until that is set.

   Sizing is CONTAINER-based, not viewport-based. woocommerce/loop/loop-start.php
   emits `row-cols-2 row-cols-lg-3 row-cols-xxl-N` (N from loop_shop_columns,
   filtered to 4 in functions.php), and page-favorites.php uses a different
   ladder again — so the same partial renders at very different widths for the
   same viewport, and a viewport media query cannot tell those apart.

   NOTE the thresholds below are compared against this element's CONTENT box
   (padding and border excluded), which is ~17px narrower than the row itself.
   They were tuned against measured 320/360/390 renders, not derived from card
   widths, so read them as "measured here", not as card geometry.

   flex-wrap + overflow-wrap are the fallback for engines without container
   queries: the amount drops to its own line instead of overflowing the panel.
   Never text-overflow: ellipsis — a truncated price is a correctness bug, not
   a cosmetic one.

   Landmine, recorded: never use the class names `label`, `number` or
   `price-container` inside this row. css/pet-inquiry-modal.css ships
   `color:#fff !important` on `.price-container .price .label` / `.number`, and
   its minified build loads AFTER this file — nesting the row under a
   .price-container would make the text invisible on a light panel.
============================================================ */

.tp-card-price {
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: .5rem;
	row-gap: .05rem;
	/* Lines up with the pet name above (its row is .p-2 = 8px) and the buttons
	   below (.p-1 outer + .px-1 inner = 8px). */
	margin: 0 .5rem .5rem;
	padding: .4rem .6rem;
	/* White, NOT --ui-surface-sunken. The amount is --ui-primary -> --brand-text,
	   and each scheme's --brand-text is certified against WHITE. A #f8fafc tint
	   multiplies every ratio by 0.956, which is fine for most schemes but takes
	   bright-blue (#0161f3, exactly 4.50:1 on white) down to 4.30:1 — under
	   WCAG AA. The border does the panel work instead of a fill. */
	background: var( --ui-surface );
	border: 1px solid var( --ui-border-strong );
	border-radius: var( --ui-radius-sm );
	/* The row sits UNDER the pet-name link's .stretched-link overlay, so it is
	   part of the card's click target. Declared rather than inferred from paint
	   order, because container-type applies layout containment and therefore
	   makes this a stacking context. Matches the `pe-none` already carried by
	   the custom sale badge in add-ons/utils/sales-badge.php. */
	pointer-events: none;
	transition: background var( --ui-transition ), border-color var( --ui-transition );
}

.tp-card-price__label {
	flex: 0 0 auto;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --ui-ink-faint );      /* 5.35:1 on white */
}

.tp-card-price__amount {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	column-gap: .35rem;
	font-size: .95rem;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.3;
	color: var( --ui-primary );        /* --brand-text; >= 4.50:1 on white in every scheme */
	text-align: right;
	overflow-wrap: anywhere;           /* never clip money */
}

/* Flatten whatever WooCommerce hands us. `.price` is defensive: get_price_html()
   does not emit it, but deposits / multi-currency plugins sometimes add one. */
.tp-card-price__amount .price,
.tp-card-price__amount .woocommerce-Price-amount,
.tp-card-price__amount bdi {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

/* …and if that wrapper IS present it has to be the flex container too, or the
   del/ins ordering below stops applying. */
.tp-card-price__amount .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	column-gap: .35rem;
}

/* Sale. WooCommerce emits <del>regular</del> <ins>sale</ins>; the number the
   customer actually pays reads first, the struck original trails it. Safe under
   WCAG 1.3.2 because wc_format_sale_price() supplies the screen-reader text —
   see the pre-7.x fallback in partials/pet-price-row.php. */
.tp-card-price__amount ins {
	order: 1;
	text-decoration: none;
	background: none;
	color: inherit;
}

.tp-card-price__amount del {
	order: 2;
	margin: 0;                         /* column-gap owns the spacing */
	font-size: .78rem;
	font-weight: 600;
	color: var( --ui-ink-faint );
	text-decoration-thickness: from-font;
}

/* ---- Container steps --------------------------------------------------
   Only DESCENDANTS appear here: a container query cannot style its own
   container, so .tp-card-price's own padding and margin stay in the viewport
   query below. */

/* Narrow card (archive 2-up at <= ~390px): shave the label and the amount a
   notch. The label is NEVER hidden — it is the only thing that says this
   number is a price and not a deposit or a monthly payment. */
@container (max-width: 200px) {
	.tp-card-price__label      { font-size: .58rem; letter-spacing: .05em; }
	.tp-card-price__amount     { font-size: .88rem; }
	.tp-card-price__amount del { font-size: .72rem; }
}

/* Very narrow (2-up at 320px) or a long amount: label on its own line, amount
   right-aligned beneath it. Still a label/value pair, never a truncated price. */
@container (max-width: 140px) {
	.tp-card-price__label,
	.tp-card-price__amount { flex-basis: 100%; }
	.tp-card-price__amount { font-size: .85rem; }
}

/* ---- Own-box responsive + motion -------------------------------------- */

@media (max-width: 575.98px) {
	.tp-card-price { margin: 0 .375rem .375rem; padding: .35rem .5rem; }
}

/* Whole-card hover affordance — reinforces that the row is inside the click
   target. The hover is on .card, so pointer-events:none here is no obstacle. */
.card:hover .tp-card-price {
	/* Border-only hover: tinting the fill would re-introduce the contrast loss
	   the base rule avoids, on the one scheme that has no headroom. */
	border-color: var( --ui-primary );
}

@media (prefers-reduced-motion: reduce) {
	.tp-card-price { transition: none; }
}

/* ---- One price per card / per pet page --------------------------------
   The custom sale badge ("NOW ONLY / $699", add-ons/utils/sales-badge.php) is a
   second, hand-typed price: override_display_amount is a free-text ACF field
   and need not agree with the authoritative one. On a surface that now carries
   a real price it is both a duplicate and a potential contradiction, in a
   different type scale and a different colour language. Retire it there and let
   the price own the money. The plain WooCommerce "Sale!" flash (.onsale) stays
   — a state flag, not a number, and it pairs well with the strikethrough.

   display:none, not visibility/opacity — it has to leave the accessibility
   tree too, or a screen reader announces a hidden contradictory price.

   No !important needed despite pet-inquiry-modal.min.css loading later: four
   classes beat its two, and those rules set position/top/left/right/margin,
   never display.

   The single-page rule is scoped to .tp-price--rule (set by summary-right.php
   only for an explicit per-category SHOW rule) precisely so it cannot fire on a
   site that merely has prices on globally. */
.card.has-card-price .card-corner-tl .price-container {
	display: none;
}

.single-product:has( .tp-price--rule ) .tp-gallery-corner .price-container {
	display: none;
}

/* ============================================================
   Homepage — "How Can We Help You?" quick boxes
   partials/section-quick-boxes.php

   The section shipped with empty <h3>/<p> elements whenever an ACF subfield
   was saved blank (ACF writes '' and the old `??` only caught null), so cards
   rendered a title-shaped gap and the buttons fell out of line. The partial no
   longer prints anything empty and derives a true description from each card's
   destination; these rules turn three loose photo cards into one deliberate
   row of routes.

   The structural device is the CATEGORY CHIP on the image — Browse / Learn /
   Visit. It names what each card is for, which is information the reader
   actually uses. Deliberately not 01/02/03: these are parallel paths, not a
   sequence, and numbering them would assert an order that is not real.

   Base styling (radius, hover lift) lives in style.css `.quick-box-card`;
   this block refines it and is loaded after.
============================================================ */

/* The section title reserves 72px below it for its underline rule. When an
   intro follows, that gap belongs between the intro and the cards instead —
   so close it here rather than fighting it with a negative margin, which
   breaks the moment the title's own spacing changes. Degrades to the original
   airier gap on engines without :has(). */
.section-quick-boxes .section-title:has( + .quick-boxes-intro ),
.section-credibility .section-title:has( + .credibility-intro ),
.tp-getting-started .section-title:has( + .getting-started-intro ) {
	margin-bottom: 1.4rem;
}

.section-quick-boxes .quick-boxes-intro {
	max-width: 46ch;
	margin: 0 auto 2.1rem;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var( --ui-ink-soft );
	text-wrap: pretty;
}

.section-quick-boxes .quick-box-card {
	position: relative;                       /* stretched-link containment */
	background: var( --ui-surface );
	border-radius: var( --ui-radius ) !important;
	overflow: hidden;
	box-shadow: var( --ui-shadow-sm ) !important;
	transition: transform 260ms cubic-bezier( .4, 0, .2, 1 ),
	            box-shadow 260ms cubic-bezier( .4, 0, .2, 1 );
}

.section-quick-boxes .quick-box-card:hover,
.section-quick-boxes .quick-box-card:focus-within {
	transform: translateY( -6px );
	box-shadow: var( --ui-shadow-lift ) !important;
}

/* Media is a ratio box, not a fixed height: the card keeps its proportions
   from the mobile scroller through to a 3-up desktop row. */
.section-quick-boxes .quick-box-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var( --ui-surface-muted );    /* no white flash before load */
}

.section-quick-boxes .quick-box-card__media .card-img-top {
	width: 100%;
	height: 100% !important;                  /* beats style.css's 220px */
	object-fit: cover;
	display: block;
	border-radius: 0;
	transform: scale( 1 );
	transition: transform 520ms cubic-bezier( .4, 0, .2, 1 );
}

.section-quick-boxes .quick-box-card:hover .quick-box-card__media .card-img-top,
.section-quick-boxes .quick-box-card:focus-within .quick-box-card__media .card-img-top {
	transform: scale( 1.05 );
}

/* The chip. Brand fill carries white text (--brand-fill is the AA-checked
   fill token; --brand-text is for text ON light, and would fail here). */
.section-quick-boxes .quick-box-card__label {
	position: absolute;
	top: .7rem;
	left: .7rem;
	z-index: 2;
	display: inline-block;
	padding: .3rem .7rem;
	background: var( --brand-fill, var( --ui-primary ) );
	color: #fff;
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.25;
	box-shadow: 0 2px 8px rgba( 15, 23, 42, .25 );
}

/* Left-aligned beats centred here: three centred short paragraphs read as
   three loose captions, and the eye has no common start edge to scan down. */
.section-quick-boxes .quick-box-card .card-body {
	padding: 1.3rem 1.3rem 1.45rem;
	text-align: left;
	gap: .5rem;
}

.section-quick-boxes .quick-box-card .card-title {
	margin: 0;
	font-size: 1.16rem;
	letter-spacing: -.015em;
	color: var( --ui-ink );
	text-wrap: balance;                       /* no one-word orphan line */
}

.section-quick-boxes .quick-box-card .card-text {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var( --ui-ink-soft );
	text-wrap: pretty;
}

/* Full-width action zone: a centred inline pill under left-aligned text looks
   stranded, and the block button gives the card a defined base. */
.section-quick-boxes .quick-box-card__cta {
	padding-top: 1.05rem;
}

.section-quick-boxes .quick-box-card .btn.stretched-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	--bs-btn-padding-x: 1.1rem;
	--bs-btn-padding-y: .68rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .035em;
}

.section-quick-boxes .quick-box-card__arrow {
	flex: 0 0 auto;
	transform: translateX( 0 );
	transition: transform 260ms cubic-bezier( .4, 0, .2, 1 );
}

.section-quick-boxes .quick-box-card:hover .quick-box-card__arrow {
	transform: translateX( 3px );
}

/* The button is the stretched link, so it owns the card's focus ring. Put the
   visible ring on the CARD instead — a 2px outline on a pill inside a shadowed
   card is easy to miss. */
.section-quick-boxes .quick-box-card .btn.stretched-link:focus-visible {
	outline: none;
}

.section-quick-boxes .quick-box-card:focus-within {
	outline: 3px solid var( --ui-primary );
	outline-offset: 3px;
}

@media (max-width: 575.98px) {
	.section-quick-boxes .quick-boxes-intro { font-size: .95rem; margin-bottom: 1.4rem; }
	.section-quick-boxes .quick-box-card .card-body { padding: 1.1rem 1.1rem 1.25rem; }
	.section-quick-boxes .quick-box-card .card-title { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
	.section-quick-boxes .quick-box-card,
	.section-quick-boxes .quick-box-card__media .card-img-top,
	.section-quick-boxes .quick-box-card__arrow { transition: none; }
	.section-quick-boxes .quick-box-card:hover,
	.section-quick-boxes .quick-box-card:focus-within { transform: none; }
	.section-quick-boxes .quick-box-card:hover .quick-box-card__media .card-img-top,
	.section-quick-boxes .quick-box-card:focus-within .quick-box-card__media .card-img-top { transform: none; }
	.section-quick-boxes .quick-box-card:hover .quick-box-card__arrow { transform: none; }
}

/* ============================================================
   Homepage — "Industry Recognition"
   partials/section-credibility.php

   Was four bare logos in a row. Three problems: no section intro, no caption
   (a logo alone asserts nothing a buyer can use), and four different source
   aspect ratios — 175x186, 175x251, 175x176 and a 175x44 wordmark — left at
   natural size, so nothing optically aligned and the wordmark looked broken
   beside the badges.

   Fix: one fixed-height logo well per mark with object-fit:contain, so every
   badge is optically centred on the same baseline whatever its shape, and a
   name plus a short factual note under each. The note describes the MARK, not
   the store, so it stays true on every Petland site.

   Quieter than the quick boxes directly above on purpose — this is supporting
   evidence, and two competing card treatments in a row would flatten both.
============================================================ */

.section-credibility .credibility-intro {
	max-width: 44ch;
	margin: 0 auto 1.9rem;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var( --ui-ink-soft );
	text-wrap: pretty;
}

.section-credibility .credibility-row {
	margin-bottom: 0;
}

.section-credibility .credibility-mark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
	height: 100%;
	padding: 1.15rem .9rem 1.25rem;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	text-align: center;
	text-decoration: none;
	transition: border-color 220ms cubic-bezier( .4, 0, .2, 1 ),
	            box-shadow 220ms cubic-bezier( .4, 0, .2, 1 ),
	            transform 220ms cubic-bezier( .4, 0, .2, 1 );
}

a.credibility-mark:hover,
a.credibility-mark:focus-visible {
	border-color: var( --ui-border-strong );
	box-shadow: var( --ui-shadow-sm );
	transform: translateY( -3px );
}

a.credibility-mark:focus-visible {
	outline: 3px solid var( --ui-primary );
	outline-offset: 3px;
}

/* The well. Fixed height + contain is what puts a 175x44 wordmark and a
   175x251 badge on the same optical line. */
.section-credibility .credibility-mark__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 82px;
}

.section-credibility .credibility-mark__logo picture {
	display: block;
	height: 100%;
}

.section-credibility .credibility-logo {
	max-width: 100%;
	max-height: 82px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* style.css fades the logo on hover; the card now owns the hover state, and a
   fading logo inside a lifting card reads as two unrelated effects. */
.section-credibility .credibility-logo:hover {
	opacity: 1;
}

.section-credibility .credibility-mark__name {
	font-size: .86rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --ui-ink );
	text-wrap: balance;
}

.section-credibility .credibility-mark__note {
	font-size: .76rem;
	line-height: 1.45;
	color: var( --ui-ink-faint );
	text-wrap: pretty;
}

@media (max-width: 767.98px) {
	.section-credibility .credibility-mark { padding: .95rem .7rem 1.05rem; }
	.section-credibility .credibility-mark__logo { height: 64px; }
	.section-credibility .credibility-logo { max-height: 64px; }
}

@media (max-width: 575.98px) {
	.section-credibility .credibility-intro { font-size: .95rem; margin-bottom: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.section-credibility .credibility-mark { transition: none; }
	a.credibility-mark:hover,
	a.credibility-mark:focus-visible { transform: none; }
}

/* ============================================================
   Homepage — "Getting Started" steps
   partials/section-contact.php

   Was a stack of collapsed bars floated vertically centred beside a photo, so
   the section showed no content at all until someone clicked, and the photo
   was the same file the quick boxes above already used.

   The number is the structural device, and here it is earned: these steps
   happen in this order — find a pet, ask what you need to ask, reserve it,
   arrange collection. (The quick boxes above are deliberately NOT numbered;
   those are parallel routes, and numbering them would assert an order that
   does not exist.)

   Each step carries a one-line summary while collapsed so the section reads
   without interaction, and the first step opens by default.
============================================================ */

.tp-getting-started .getting-started-intro {
	max-width: 48ch;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var( --ui-ink-soft );
	text-wrap: pretty;
}

/* The step number. Tabular so 01/02/03 share a width and the titles start on
   one optical line. */
.tp-steps .tp-step__num {
	flex: 0 0 auto;
	min-width: 2.1rem;
	font-size: .92rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	line-height: 1;
	color: var( --ui-ink-faint );
	transition: color var( --ui-transition );
}

.tp-steps .accordion-button:not( .collapsed ) .tp-step__num {
	color: var( --ui-primary );
}

/* Title + summary stack, so the button is a two-line block rather than a bare
   label. This is what makes a collapsed section still say something. */
.tp-steps .tp-step__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
	flex: 1 1 auto;
}

.tp-steps .tp-step__summary {
	font-size: .845rem;
	font-weight: 500;
	line-height: 1.45;
	color: var( --ui-ink-soft );
	letter-spacing: 0;
	text-wrap: pretty;
}

/* Once the panel is open the body says it better, and for store-authored steps
   the summary IS the body's first sentence — so retire it rather than print it
   twice. */
.tp-steps .accordion-button:not( .collapsed ) .tp-step__summary {
	display: none;
}

/* The button now wraps two lines; keep the number and icon aligned to the
   title rather than floating to the vertical middle of the block. */
.tp-steps .accordion-button {
	align-items: flex-start !important;
	padding-top: 1.05rem !important;
	padding-bottom: 1.05rem !important;
}

.tp-steps .accordion-button .tp-step__num,
.tp-steps .accordion-button .tp-accordion__icon {
	margin-top: .05rem;
}

.tp-steps .accordion-button::after {
	margin-top: .3rem;
}

/* The summary already carries the voice; the open state does not need to
   recolour the whole title row on top of the tinted background. */
.tp-steps .accordion-button:not( .collapsed ) .tp-accordion__title {
	color: var( --ui-primary );
}

/* Sticky at xl so the column reads as deliberate rather than as an image with
   a lot of empty space under it — the steps column grows as panels open, and
   the picture follows instead of stranding. */
@media (min-width: 1200px) {
	.tp-getting-started .getting-started-figure {
		position: sticky;
		top: 1.75rem;
	}
}

.tp-getting-started .getting-started-figure {
	margin: 0;
	max-width: 380px;
	border-radius: var( --ui-radius );
	overflow: hidden;
	box-shadow: var( --ui-shadow );
}

.tp-getting-started .getting-started-figure img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 440px;
	object-fit: cover;
}

@media (max-width: 575.98px) {
	.tp-getting-started .getting-started-intro { font-size: .95rem; margin-bottom: 1.4rem; }
	.tp-steps .tp-step__num { min-width: 1.75rem; font-size: .84rem; }
	.tp-steps .accordion-button { gap: .6rem !important; }
	.tp-steps .tp-step__summary { font-size: .8rem; }
}

/* ============================================================
   Hero — default art focal point on small screens
   partials/hero.php (slide 1 default, img.hero-img--gives-back)

   The hero is a FIXED-HEIGHT box (--bs-aspect-ratio: 20rem below sm), not a
   ratio, so object-fit:cover crops a 1804x569 banner very hard: at 390px wide
   only ~38% of the image width is visible.

   This photo is composed with its subject on the right — the handler at
   x~1400 of 1804, the puppy at x~1150 — which is what leaves the desktop
   headline a clear left side to sit on. A default centre crop therefore shows
   the empty cafe and clips both of them out of frame on a phone.

   80% slides the image left so the puppy AND the handler are both in shot,
   from 320px up. Scoped to this one image: the other slides are composed
   differently and a shared nudge would mis-frame them.

   EXTENDED TO 767.98px, 2026-10-15. This used to stop at 575.98px, on the
   reasoning that "from 576px the box is shorter (18rem) and wide enough that
   the default centre crop already contains both". The frame re-budget at :8583
   retired the 18rem step: the sm band is now ~356px tall rather than 288px, and
   a taller box at the same width crops HARDER horizontally, not softer. The
   arithmetic at 600x356 is a visible source window of x 423-1381 of 1804, which
   keeps the puppy at x~1150 but loses the handler at x~1400; at 80% the window
   is x 677-1635 and both are back in shot. By 768px the centre crop reaches
   x 1519 and contains them again on its own, so the bound stops there.
============================================================ */

@media (max-width: 767.98px) {
	#carousel-hero .hero-img--gives-back {
		object-position: 80% center;
	}
}

/* ============================================================
   Header — cosmetic pass (orange bar + grey nav + mobile)
   header.php

   ONE RULE ORGANISES THIS BLOCK: chrome gets rounded RECTANGLES, content
   keeps its pills. The pet cards, the quick boxes and the section CTAs are
   pills because that is the brand's friendly voice for "do this thing". The
   header is furniture — menu, phone, search, account — and furniture reading
   as a row of lozenges is what made the MENU button feel wrong next to
   everything else. Everything here lands on --ui-radius-sm (10px), the same
   corner the card rows use, so the chrome and the content look related
   without looking identical.

   Loaded after the earlier "Header" block in this file, so these win at equal
   specificity; a few rules need !important only because the originals used it.
============================================================ */

/* ---- Orange bar --------------------------------------------------- */

header .navbar.bg-primary {
	padding-top: .8rem;
	padding-bottom: .8rem;
	/* A real edge instead of a soft shadow: the grey bar sits directly below
	   and a blurred shadow between two flat fills just reads as a smudge. */
	box-shadow: inset 0 -1px 0 rgba( 0, 0, 0, .08 );
}

/* Store name under the logo. It sits directly beneath a heavy wordmark, so it
   wants LESS weight, not more — .h6 inherits a bold from Bootstrap and the two
   lines were competing. */
header .navbar.bg-primary .navbar-brand .h6 {
	font-size: .92rem;
	font-weight: 500;
	letter-spacing: 0;
	opacity: .92;
}

/* Location blocks. Each becomes a hoverable plate rather than loose text, and
   the numbers get tabular figures so two phone numbers of the same length line
   up digit-for-digit instead of drifting. */
header .navbar.bg-primary .store-info .nav-item.phone {
	position: relative;
}

header .navbar.bg-primary .store-info .nav-item.phone + .nav-item.phone::before {
	content: "";
	position: absolute;
	left: -.9rem;
	top: 18%;
	bottom: 18%;
	width: 1px;
	background: rgba( 255, 255, 255, .22 );
}

header .navbar.bg-primary .store-info .nav-item.phone .nav-link {
	border-radius: var( --ui-radius-sm );
	padding: .3rem .65rem;
}

header .navbar.bg-primary .store-info .nav-item.phone .nav-link span:last-child {
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

header .navbar.bg-primary .store-info .nav-item.phone .nav-link:hover,
header .navbar.bg-primary .store-info .nav-item.phone .nav-link:focus-visible {
	background: rgba( 255, 255, 255, .14 );
}

header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions {
	border-radius: var( --ui-radius-sm );
	opacity: .88;
}

header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions:hover,
header .navbar.bg-primary .store-info .nav-item.phone .nav-link--directions:focus-visible {
	opacity: 1;
	background: rgba( 255, 255, 255, .14 );
}

/* ---- Grey nav bar -------------------------------------------------- */

header > .container.d-xl-block,
header > .container.d-lg-block {
	padding-top: .55rem;
	padding-bottom: .55rem;
}

/* THE MENU TRIGGER — the mark, and nothing else.

   No fill, no border, no word. What carries the control now is the glyph:
   full --ui-ink at 14.44:1 against this bar's #e7e7e7, where the five text
   links beside it sit at 6.13:1. It is the darkest thing in the row. That
   is the discoverability answer — it stopped being a dark BLOCK and became
   a dark MARK.

   38x38 is not arbitrary: it is the exact box the account controls at the
   far right of this same bar already use, so the trigger joins a family the
   visitor has already met instead of being a one-off. It also leaves the
   bar's height unchanged, and clears WCAG 2.5.8 target size with room.

   NOT A .btn ANY MORE. header.php drops .btn/.btn-sm/.btn-black, which
   takes this element out of Bootstrap's --bs-btn-* cascade and out of
   style.css:13142 (`header .btn { border-radius: 0 !important }`) — the
   only reason the previous version needed !important on its own corner.
   Nothing here needs !important now. */
header > .container .site-menu-trigger {
	-webkit-appearance: none;
	appearance: none;
	flex: none;                            /* must not shrink inside the gap-3 row */
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var( --ui-radius-sm );  /* chrome gets rounded rectangles */
	color: var( --ui-ink );
	line-height: 1;
	cursor: pointer;
	transition: background var( --ui-transition ), color var( --ui-transition );
}

header > .container .site-menu-trigger .bi {
	font-size: 20px;
	line-height: 1;
}

/* Hover, focus and OPEN all raise the same white plate — so while the panel
   is open the trigger stays lit instead of going dead.

   White, not a brand tint, and that is a correctness fix rather than taste:
   --ui-primary-soft composites over THIS bar (#e7e7e7), not over white,
   giving #e3dad5, on which brand text measures 4.00:1 — under the 4.5:1
   AA floor. On a white plate the same brand is 5.50:1. */
header > .container .site-menu-trigger:hover,
header > .container .site-menu-trigger:focus-visible,
header > .container .site-menu-trigger[aria-expanded="true"] {
	background: var( --ui-surface );
	color: var( --ui-primary );
}

/* Ink ring, not brand: an orange ring 2px outside an orange glyph reads as
   decoration rather than as state. Ink is 14.44:1 on this bar. */
header > .container .site-menu-trigger:focus-visible {
	outline: 3px solid var( --ui-ink );
	outline-offset: 2px;
}

/* Legacy bridge. Deployment is per-file over SFTP and visitors can hold a
   cached page, so this stylesheet can be live while header.php is still the
   previous copy. For that window the old `.btn.btn-black` + <span>MENU</span>
   button is what renders, and the rules above do not match it. These give it
   the new look meanwhile.

   The word is CLIPPED, never display:none'd. Clipped text stays in the
   accessibility tree; hiding it would leave that button with no accessible
   name at all, because the <i> is aria-hidden and MENU was the only name.

   !important is required only to beat the earlier block at :821, which
   declares the ink fill with !important at this same specificity. */
header > .container .btn.btn-black {
	width: 38px;
	height: 38px;
	padding: 0 !important;
	gap: 0 !important;
	justify-content: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: var( --ui-radius-sm ) !important;
	color: var( --ui-ink ) !important;
	box-shadow: none !important;
	font-size: 0 !important;               /* collapses the inter-child gap */
}

header > .container .btn.btn-black .bi {
	font-size: 20px !important;
}

header > .container .btn.btn-black > span {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
}

header > .container .btn.btn-black:hover,
header > .container .btn.btn-black[aria-expanded="true"] {
	background: var( --ui-surface ) !important;
	color: var( --ui-primary ) !important;
}

/* Text links — a rounded plate on hover, on the same corner as the button. */
header .nav.nav-underline .nav-link {
	color: var( --ui-ink-soft );
	font-weight: 600;
	font-size: .9rem;
	padding: .45rem .7rem;
	border-radius: var( --ui-radius-sm );
	border-bottom: 0 !important;
	transition: color var( --ui-transition ), background var( --ui-transition );
}

/* AA FIX (defect shipped in 1.3.23). The plate was --ui-primary-soft, which
   composites over this bar's #e7e7e7 to #e3dad5; brand text on that is
   4.00:1, under the 4.5:1 AA floor for normal text. A white plate carries
   ink at 17.85:1 and brand at 5.50:1, and reads better besides — the grey
   bar becomes the ground and the links lift off it.

   Scoped to `header > .container` deliberately: this is the only element
   that selector matches (header.php:355, the grey bar), so the white plate
   cannot leak onto the orange bar's icon links, whose ground is #c5511c and
   whose maths is completely different. */
header > .container .nav.nav-underline .nav-link:hover,
header > .container .nav.nav-underline .nav-link:focus-visible {
	color: var( --ui-ink );
	background: var( --ui-surface );
}

header .nav.nav-underline .nav-link:focus-visible {
	outline: 3px solid var( --ui-primary );
	outline-offset: 1px;
}

/* You-are-here. The nav had no active state at all, so the header never told
   anyone where they were. */
header > .container .nav.nav-underline .nav-link.active,
header > .container .nav.nav-underline .current-menu-item > .nav-link,
header > .container .nav.nav-underline .nav-link[aria-current="page"] {
	color: var( --ui-primary );        /* 5.50:1 on the white plate below */
	background: var( --ui-surface );
	font-weight: 700;
}

/* Icon buttons — rounded squares, matching the chrome corner rather than
   sitting as circles among rectangles. */
header > .container .nav.nav-underline.flex-nowrap .nav-link {
	border-radius: var( --ui-radius-sm );
}

header > .container .nav.nav-underline.flex-nowrap .nav-link:focus-visible {
	outline: 3px solid var( --ui-primary );
	outline-offset: 2px;
}

/* The "Hello, {name}" chip reads as one object instead of an icon with text
   trailing after it. */
header > .container .nav.nav-underline.flex-nowrap .site-account-link.site-account-link--hello {
	border-radius: var( --ui-radius-sm );
	padding-inline: .5rem .7rem;
	background: transparent;
	transition: background var( --ui-transition );
}

/* Same plate, same reason. This one also repairs a PRE-EXISTING failure:
   :908 paints brand #b34700 on rgba(242,99,34,.08) over the bar = 4.05:1.
   The white plate below wins the background and lifts that text to 5.50:1. */
header > .container .nav.nav-underline.flex-nowrap .site-account-link.site-account-link--hello:hover {
	background: var( --ui-surface );
}

/* ---- Mobile -------------------------------------------------------- */

/* Hamburger — the same object as its desktop twin, on a different ground.

   THE BORDER IS GONE, and that is a fix rather than a trim: the 1px
   rgba(255,255,255,.35) hairline shipped in 1.3.23 measures 1.76:1 against
   the orange bar (#c5511c), well under the 3:1 WCAG 1.4.11 asks of a
   boundary. It was never what identified the control anyway — Bootstrap's
   glyph is a pure #fff stroke at 4.60:1 and does that on its own. Raising
   the alpha until the hairline passed would have made the control louder
   than the logo beside it; deleting it matches the desktop answer and
   removes the question.

   border-radius keeps !important only because style.css:13133 ships
   `.navbar-toggler { border: 0 !important; border-radius: 0 !important }`.

   FOR FUTURE EDITORS — do not add `display` to this block, and note that
   the @media wrapper is load-bearing, not cosmetic. `header .navbar
   .navbar-toggler` is (0,2,1); style.css:4595's `.navbar-expand-xl
   .navbar-toggler { display: none }` is (0,2,0) but sits inside
   @media (min-width: 1200px). Media queries contribute no specificity and
   this file loads after style.css, so an unscoped `display` here would
   un-hide the mobile hamburger on every desktop page — two live triggers
   for one panel, both carrying aria-expanded. The wrapper makes that
   impossible. */
@media (max-width: 1199.98px) {

	header .navbar .navbar-toggler {
		border-radius: var( --ui-radius-sm ) !important;
		border: 0 !important;
		padding: .4rem .6rem;
		transition: background var( --ui-transition );
	}

	/* Open state lights up too, matching the desktop trigger. */
	header .navbar .navbar-toggler:hover,
	header .navbar .navbar-toggler:focus-visible,
	header .navbar .navbar-toggler[aria-expanded="true"] {
		background: rgba( 255, 255, 255, .18 );
		box-shadow: none;
	}

	header .navbar .navbar-toggler:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 2px;
	}
}

/* "Call Us" — was a pill; now chrome like the rest of the bar. */
header .navbar.bg-primary .btn.btn-outline-white {
	border-radius: var( --ui-radius-sm ) !important;
	padding: .45rem .85rem !important;
	font-size: .82rem;
	letter-spacing: .01em;
}

/* Mobile icon row — rounded squares, consistent hit area. */
header .navbar.bg-primary nav.d-lg-none .nav-link,
header .navbar.bg-primary nav.d-xl-none .nav-link {
	border-radius: var( --ui-radius-sm );
}

/* ---- Off-canvas menu ------------------------------------------------
   A full redesign of the panel, not a retouch.

   WHAT WAS WRONG
   Thirteen rows at identical weight with no rhythm, Bootstrap's 4px
   triangle as the only hint that five of them open, sub-menus wearing
   `.dropdown-menu`'s bordered-box costume, and the most valuable space in
   the panel — the bottom, under the thumb — spent on two app-store badges.

   WHAT IT IS NOW
   A scrolling list with a fixed head and foot, rows sized for a thumb, a
   chevron that actually turns, and sub-menus that read as subordinate
   instead of as separate boxes.

   CONTRAST NOTE: the hover tint here is safe where the same tint was NOT
   safe on the grey header bar. --ui-primary-soft composites over THIS
   panel's white to #fbf2ed, where brand text measures 4.98:1; over the
   #e7e7e7 header bar it lands on #e3dad5 and measures 4.00:1. Same token,
   different ground, different answer.
--------------------------------------------------------------------- */

/* The panel carries Bootstrap's .rounded-end-1, whose utility radius is
   !important — matching it is the only way to lift the corner to 14px. */
#offcanvasNavigation {
	width: 400px;
	max-width: 86vw;
	border-top-right-radius: var( --ui-radius ) !important;
	border-bottom-right-radius: var( --ui-radius ) !important;
}

@media (max-width: 575.98px) {
	#offcanvasNavigation { width: min( 86vw, 360px ); }
}

/* ---- Head: stays put while the list scrolls under it ---- */
#offcanvasNavigation .offcanvas-header {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 1rem 1.1rem;
	background: var( --ui-surface );
	border-bottom: 1px solid var( --ui-border );
}

.offcanvas#offcanvasNavigation .offcanvas-title {
	text-transform: none;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var( --ui-ink );
}

/* The LIST scrolls, not the panel. With 13 rows and five expandable
   groups the body always overflows on a phone, and `mt-auto` alone just
   pushed the footer below the fold — the one place a thumb actually rests.
   Giving the body `overflow: hidden` and handing the scroll to the menu
   wrapper pins the head and the foot and scrolls only what is between them.
   min-height: 0 is required: a flex child will not shrink below its
   content without it, and the wrapper would push the footer out again. */
#offcanvasNavigation .offcanvas-body {
	padding: 0;
	overflow: hidden;
}

#offcanvasNavigation .primary-menu-wrapper {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;      /* no scroll chaining to the page behind */
	padding: .5rem 0;
	scrollbar-width: thin;
}

#offcanvasNavigation .primary-menu-wrapper::-webkit-scrollbar { width: 10px; }
#offcanvasNavigation .primary-menu-wrapper::-webkit-scrollbar-thumb {
	background: var( --ui-border-strong );
	border: 3px solid var( --ui-surface );
	border-radius: 999px;
}

#offcanvasNavigation .offcanvas-foot {
	flex: none;
}

/* ---- Rows ----
   48px minimum, which is a thumb rather than a cursor. The plate is inset
   so its corner is visible instead of bleeding to the panel edge. */
#offcanvasNavigation .primary-menu .nav-link,
#offcanvasNavigation .primary-menu a {
	display: flex;
	align-items: center;
	gap: .5rem;
	min-height: 48px;
	margin-inline: .55rem;
	padding: .5rem .7rem;
	border-radius: var( --ui-radius-sm );
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.25;
	color: var( --ui-ink ) !important;
	border-left: 0 !important;
	transition: background var( --ui-transition ), color var( --ui-transition );
}

#offcanvasNavigation .primary-menu .nav-link:hover,
#offcanvasNavigation .primary-menu a:hover,
#offcanvasNavigation .primary-menu .nav-link:focus-visible,
#offcanvasNavigation .primary-menu a:focus-visible {
	background: var( --ui-primary-soft );
	color: var( --ui-primary ) !important;
}

#offcanvasNavigation .primary-menu a:focus-visible {
	outline: 3px solid var( --ui-primary );
	outline-offset: -2px;              /* inside the plate, so it is never clipped */
}

#offcanvasNavigation .primary-menu .current-menu-item > a,
#offcanvasNavigation .primary-menu .menu-item.current-menu-item > a,
#offcanvasNavigation .primary-menu a[aria-current="page"] {
	background: var( --ui-primary-soft );
	color: var( --ui-primary ) !important;
	font-weight: 700;
}

/* ---- The chevron ----
   Bootstrap's .dropdown-toggle::after is a 4px CSS triangle that reads as
   a speck at this size. Replaced with a real chevron, pushed to the right
   edge so the row reads as "this opens", and rotated when it is open —
   driven off aria-expanded, which Bootstrap already maintains, so the
   indicator can never disagree with the state. */
#offcanvasNavigation .primary-menu .dropdown-toggle::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 2px 0 auto;
	border: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform var( --ui-transition );
	opacity: .55;
}

#offcanvasNavigation .primary-menu .dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate( 225deg ) translate( -2px, -2px );
	opacity: 1;
}

#offcanvasNavigation .primary-menu .dropdown-toggle[aria-expanded="true"] {
	background: var( --ui-surface-muted );
	color: var( --ui-ink ) !important;
}

/* ---- Sub-menus ----
   .dropdown-menu ships as a floating bordered box with a shadow. In a
   static in-panel list that is exactly wrong: it has to read as a branch
   of the row above, not as a separate surface. Flattened, indented, and
   given a rule on the left to carry the relationship. */
#offcanvasNavigation .primary-menu .submenu-menu,
#offcanvasNavigation .primary-menu .dropdown-menu {
	position: static !important;
	float: none;
	width: auto;
	min-width: 0;
	margin: .15rem .55rem .4rem 1.55rem;
	padding: .15rem 0;
	background: transparent;
	border: 0 !important;
	border-left: 2px solid var( --ui-border ) !important;
	border-radius: 0;
	box-shadow: none;
	transform: none !important;
}

#offcanvasNavigation .primary-menu .submenu-menu a,
#offcanvasNavigation .primary-menu .dropdown-menu a {
	min-height: 44px;                  /* the 44px comfortable-target figure */
	margin-inline: .35rem;
	padding: .4rem .6rem;
	font-size: .9rem;
	font-weight: 500;
	color: var( --ui-ink-soft ) !important;
}

#offcanvasNavigation .primary-menu .submenu-menu a:hover,
#offcanvasNavigation .primary-menu .dropdown-menu a:hover,
#offcanvasNavigation .primary-menu .submenu-menu a:focus-visible,
#offcanvasNavigation .primary-menu .dropdown-menu a:focus-visible {
	color: var( --ui-primary ) !important;
}

/* The Español row carries a small inline flag/icon; keep it from sitting
   on the text baseline. */
#offcanvasNavigation .primary-menu a img,
#offcanvasNavigation .primary-menu a svg {
	flex: none;
	vertical-align: middle;
}

/* ---- Foot ----
   What the app badges used to occupy. One primary action and the store
   name — the action because the bottom of a panel is where a thumb rests,
   the name because the panel can be the only chrome on screen on a phone. */
#offcanvasNavigation .offcanvas-foot {
	padding: .85rem 1.1rem 1.1rem;
	border-top: 1px solid var( --ui-border );
	background: var( --ui-surface );
}

#offcanvasNavigation .offcanvas-foot__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;
	padding: .75rem 1rem;
	border-radius: 999px;              /* content keeps its pills */
	background: var( --brand-fill, #c5511c );
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	transition: filter var( --ui-transition );
}

#offcanvasNavigation .offcanvas-foot__cta:hover,
#offcanvasNavigation .offcanvas-foot__cta:focus-visible {
	filter: brightness( .93 );
	color: #fff;
}

#offcanvasNavigation .offcanvas-foot__cta:focus-visible {
	outline: 3px solid var( --ui-ink );
	outline-offset: 2px;
}

#offcanvasNavigation .offcanvas-foot__store {
	margin: .6rem 0 0;
	text-align: center;
	font-size: .78rem;
	color: var( --ui-ink-faint );
}

/* ---- Close control ---- */
#offcanvasNavigation .btn-close {
	border-radius: var( --ui-radius-sm );
	padding: .55rem;
	opacity: .55;
	transition: opacity var( --ui-transition ), background var( --ui-transition );
}

#offcanvasNavigation .btn-close:hover,
#offcanvasNavigation .btn-close:focus-visible {
	opacity: 1;
	background: var( --ui-surface-muted );
	box-shadow: none;
}

#offcanvasNavigation .btn-close:focus-visible {
	outline: 3px solid var( --ui-primary );
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	header > .container .site-menu-trigger,
	header > .container .btn.btn-black,
	header .nav.nav-underline .nav-link,
	header .navbar .navbar-toggler,
	#offcanvasNavigation .primary-menu a,
	#offcanvasNavigation .primary-menu .dropdown-toggle::after,
	#offcanvasNavigation .offcanvas-foot__cta { transition: none; }
}

/* ============================================================
   Hero — the lead slide, in its own voice
   partials/hero.php slide 1 only (.hero-slide). Slides 2-4 and the
   promotional banner are deliberately untouched.

   WHAT THIS IS
   The original hero, kept: the copy sits ON the photograph, left aligned,
   white, behind a scrim. What changes is the TYPE and the MOBILE layout.

   WHY THE OLD ONE READ FLAT — three measured reasons, not opinions:
     1. style.css:11958 pins every hero heading to `font-weight: 300
        !important`. A 300-weight display line cannot carry a hero; it reads
        as a caption that happens to be large.
     2. The scale INVERTS at the top end. style.css ramps the headline
        1.2 -> 1.75 -> 2.25 -> 2.75rem up to 992px and then DROPS it to
        2rem at 1200px, so the biggest screens get the smallest headline.
     3. On a phone the headline rendered at 16px — smaller than this
        paragraph — while a 320px frame full of photo competed with it.

   EVERY SIZE HERE CARRIES !important, and that is not laziness: the rules
   it has to beat are themselves !important (style.css:11957-12020), and an
   !important declaration beats a non-important one at any specificity. Among
   !important declarations the more specific wins, which is why these are all
   scoped `#carousel-hero .hero-slide ...` (1,2,0) against their (1,0,1).

   CONTRAST IS GUARANTEED, NOT SAMPLED. White text over black at alpha
   >= 0.5347 clears 4.5:1 over ANY pixel, including pure white. Both scrims
   below hold >= 0.56 everywhere a glyph can land, so the ratio survives an
   admin swapping the photograph for something brighter.

   COLOUR SCHEMES: nothing here declares a brand colour except through
   --brand-fill on the CTA, where white-on-fill measures 4.60:1 in the worst
   of the ten schemes. The copy is white on a neutral scrim, so it is
   scheme-independent by construction.
============================================================ */

/* ---- The scrim ------------------------------------------------------
   Horizontal, like the original, but deeper under the column and clearing
   fully over the handler and the puppy instead of stopping at .35. */
#carousel-hero .hero-slide .hero-slide__scrim {
	background: linear-gradient( 90deg,
		rgba( 0, 0, 0, .74 )   0%,
		rgba( 0, 0, 0, .66 )  30%,
		rgba( 0, 0, 0, .58 )  52%,
		rgba( 0, 0, 0, .20 )  74%,
		rgba( 0, 0, 0, 0 )    92% ) !important;
}

/* ---- The eyebrow (H1 — the store name, which carries local search) ---- */
#carousel-hero .hero-slide .hero-slide__eyebrow {
	font-size: clamp( .7rem, .64rem + .22vw, .85rem ) !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	line-height: 1.3 !important;
	margin: 0 0 .5rem !important;
	color: rgba( 255, 255, 255, .88 );
	text-shadow: 0 1px 3px rgba( 0, 0, 0, .5 );
}

/* ---- The headline — this is the hero ---------------------------------
   Weight 800 and a near-solid leading. The jump from 300 to 800 is most of
   the "excitement"; the size is the rest. Capped at 4.25rem so a long store
   headline still fits the 448px frame at three lines. */
#carousel-hero .hero-slide .hero-slide__headline {
	font-size: clamp( 1.95rem, .95rem + 3.3vw, 4.25rem ) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -.022em !important;
	margin: 0 0 .7rem !important;
	text-wrap: balance;
	text-shadow: 0 2px 14px rgba( 0, 0, 0, .45 );
}

/* ---- The lede -------------------------------------------------------- */
#carousel-hero .hero-slide .hero-slide__lede {
	font-size: clamp( .95rem, .88rem + .36vw, 1.25rem ) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	margin: 0 0 1.35rem !important;
	max-width: 46ch;
	color: rgba( 255, 255, 255, .94 );
	text-shadow: 0 1px 6px rgba( 0, 0, 0, .55 );
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	max-height: 4.5em;    /* matches the clamp exactly so it cannot slice a line */
	overflow: hidden;
}

/* ---- The call to action ----------------------------------------------
   A pill, because the house rule is "chrome gets rounded rectangles,
   content keeps its pills" and this is the most content-ish thing here.

   The 1px white ring is load-bearing, not decoration: measured against the
   composited photo behind it, the fill alone is 1.10-2.06:1 in all ten
   schemes — a WCAG 1.4.11 failure today. The ring gives the control a
   boundary that does not depend on the scheme or the photograph. */
#carousel-hero .hero-slide .hero-slide__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;                       /* 52px — comfortably past the 44px floor */
	padding: .85rem 2rem !important;
	font-size: clamp( .95rem, .9rem + .2vw, 1.08rem ) !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	border-radius: 999px !important;
	background: var( --brand-fill, #c5511c ) !important;
	border: 1px solid rgba( 255, 255, 255, .55 ) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .28 ) !important;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition );
}

#carousel-hero .hero-slide .hero-slide__cta:hover {
	transform: translateY( -1px );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, .34 ) !important;
}

/* Two-tone ring. theme-polish.css:74 kills .btn outlines and style.css's
   .shadow !important then overrides the replacement, so this button has NO
   focus indicator today. White inside against the fill, ink outside against
   the photo — one of the two always has contrast, in every scheme. */
#carousel-hero .hero-slide .hero-slide__cta:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba( 15, 23, 42, .55 ) !important;
}

/* ---- Mobile ----------------------------------------------------------
   The part that looked bad, rebuilt rather than scaled down.

   THE OLD FAILURE: a horizontal gradient on a 360px-wide frame washes the
   ENTIRE picture — there is no "right side" for the puppy to live in — and
   the copy sat vertically centred on top of it at 16px. Everything competed
   and nothing won.

   THE FIX: turn the scrim through 90 degrees. Clear at the top so the puppy
   is fully lit, deep at the bottom where the words are, copy anchored to the
   bottom edge. The photograph gets the top half, the type gets the bottom
   half, and neither fights the other.

   Alphas are chosen against the 0.5347 floor, so white text clears 4.5:1
   over any pixel of any photograph an admin uploads. */
@media (max-width: 575.98px) {

	/* THE FRAME GETS TALLER — 20rem (320px) to 28rem (448px).
	   This is the root fix. At 320px there is no arrangement that shows the
	   puppy AND carries a 30px headline: the subject sits at 56% of the
	   gives-back-sm crop and the type needs the bottom 150px, so they
	   collide. 448px separates them with room to spare.

	   Applied to `#carousel-hero .ratio`, i.e. ALL FOUR slides, deliberately.
	   Scoping it to .hero-slide would make slide 1 taller than slides 2-4 and
	   the carousel would jump on every swipe. The other slides are the same
	   photo-plus-copy pattern and gain the same room. */
	#carousel-hero .ratio {
		--bs-aspect-ratio: 29rem;   /* 464px */
	}

	/* The scrim stays CLEAR over the puppy (it lands at ~56% of the frame)
	   and only goes deep below 62%, where the type starts. Alphas from 62%
	   down are all >= the 0.5347 floor, so the copy is guaranteed 4.5:1 over
	   any pixel while the subject keeps ~78% of its brightness. */
	#carousel-hero .hero-slide .hero-slide__scrim {
		background: linear-gradient( 180deg,
			rgba( 0, 0, 0, 0 )     0%,
			rgba( 0, 0, 0, .03 )  46%,
			rgba( 0, 0, 0, .12 )  55%,
			rgba( 0, 0, 0, .57 )  60%,
			rgba( 0, 0, 0, .80 )  78%,
			rgba( 0, 0, 0, .88 ) 100% ) !important;
	}

	/* The lede steps aside on phones. Eyebrow + a 30px headline + a
	   full-width button is the whole message; the supporting sentence is
	   what was pushing the type down onto the puppy, and the section
	   directly below the hero says the same thing with more room. */
	/* Visually hidden, NOT display:none.
	   The lede has to leave the phone layout — it was what pushed the type down
	   onto the puppy — but display:none takes it out of the accessibility tree
	   too, so screen-reader users lost admin-written copy that sighted desktop
	   users keep, and it disappears at a 320px reflow / 400% zoom as well.
	   Clipping keeps it available to assistive tech and to find-in-page while
	   costing no layout. */
	#carousel-hero .hero-slide .hero-slide__lede {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect( 0, 0, 0, 0 ) !important;
		clip-path: inset( 50% ) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Bottom-anchored, not centred. */
	#carousel-hero .hero-slide .hero-slide__copy {
		justify-content: flex-end !important;
		padding-bottom: .9rem !important;
	}

	#carousel-hero .hero-slide .hero-slide__eyebrow {
		font-size: .66rem !important;
		letter-spacing: .13em !important;
		margin-bottom: .3rem !important;
	}

	/* 30px, against the 16px it used to be. */
	/* Sized so eyebrow + headline + button total ~149px. That is 32% of the
	   464px frame, so the copy starts at ~68% — below the puppy's face at 56%
	   — which is what lets the scrim stay clear over her. */
	#carousel-hero .hero-slide .hero-slide__headline {
		font-size: 1.75rem !important;
		line-height: 1.06 !important;
		margin-bottom: .55rem !important;
	}

	#carousel-hero .hero-slide .hero-slide__cta {
		width: 100%;
		min-height: 3rem;    /* 48px */
		padding: .8rem 1.25rem !important;
	}
}

/* Between sm and lg the column is full width, which used to run the copy
   into the pale end of the gradient — the measured weak spot at 576-991px
   (worst 2.69:1). Holding the text to 62% of the frame keeps every glyph in
   the deep end. */
@media (min-width: 576px) and (max-width: 991.98px) {
	#carousel-hero .hero-slide .hero-slide__col {
		max-width: 62%;
	}

	/* The measured weak spot. Below lg the column is full width, which ran the
	   copy into the pale end of the gradient — worst pixel 2.69:1 at 576px and
	   2.81:1 at 768px, the only place the old hero actually failed AA. Holding
	   the column to 62% is half the fix; carrying the deep end of the scrim out
	   to 62% is the other half, so every glyph still sits above the 0.5347
	   floor. */
	#carousel-hero .hero-slide .hero-slide__scrim {
		background: linear-gradient( 90deg,
			rgba( 0, 0, 0, .76 )   0%,
			rgba( 0, 0, 0, .70 )  40%,
			rgba( 0, 0, 0, .60 )  62%,
			rgba( 0, 0, 0, .22 )  82%,
			rgba( 0, 0, 0, 0 )    96% ) !important;
	}

	#carousel-hero .hero-slide .hero-slide__lede {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		max-height: 3em;
	}
}

@media (prefers-reduced-motion: reduce) {
	#carousel-hero .hero-slide .hero-slide__cta { transition: none; }
	#carousel-hero .hero-slide .hero-slide__cta:hover { transform: none; }
}

/* ============================================================
   Hero — the frame, re-budgeted
   partials/hero.php  ·  all slides  ·  >= 576px only

   THE COMPLAINT
   "There is not enough room at the top and bottom inside the hero."
   Measured on petlandhoffmanestates.com, 2026-10-15, before this block:

     viewport   frame   copy block   above   below
      576px     288px     327px      4.3px   20.3px   <- copy OVERFLOWS the frame
      768px     352px     308px     45.9px   61.9px
      992px     416px     404px     30.2px   46.2px
     1200px     448px     430px     33.2px   49.2px
     1440px     448px     460px     18.2px   34.2px   <- copy OVERFLOWS the frame
     1680px     448px     479px      8.5px   24.5px   <- copy OVERFLOWS the frame

   WHY PADDING ALONE CANNOT FIX IT
   `.ratio::before` carries the whole height as `padding-top: var(--bs-aspect-ratio)`
   (style.css:6971) and `.ratio > *` is `position: absolute; height: 100%`
   (style.css:6976), so the copy layer is pinned to a FIXED box. Inside it the
   copy is `justify-content: center`, so `#carousel-hero .container`'s
   `padding: 2rem 0` (style.css:12004) does not push the frame open — it eats the
   centring slack, and once the slack is gone the block simply overflows. At
   1680px the container is 479px tall inside a 432px usable box: the declared
   2rem of breathing room is already 24px in deficit. Adding more padding to a
   fixed-height box makes the reported problem WORSE, not better.

   WHY NOT JUST A TALLER LADDER
   Because the frame is fixed and the copy is not. The type scale above is fluid
   (headline `clamp(1.95rem, .95rem + 3.3vw, 4.25rem)`), and the headline text is
   store-written — "Your Local Pet Store in Hoffman Estates, IL" wraps to three
   lines at 1440px where a shorter store name takes one. Any fixed number is
   therefore too small for some stores and too large for others. Hoffman Estates
   overflows a 28rem frame today; a 34rem frame would still overflow for a store
   with a longer name.

   WHAT THIS DOES INSTEAD
   Turns the frame off the `::before` padding trick and onto the copy itself, so
   the hero is as tall as its content needs plus a declared, fluid gutter, with a
   floor so a one-line headline still reads as a hero rather than a strip:

     - `.ratio::before { content: none }` removes the fixed-height spacer.
     - `.ratio` becomes a flex column with a `min-height` floor.
     - The copy layer goes back in flow (`position: relative`) and defines the
       height; the <picture> and the scrim stay absolute and fill whatever that
       turns out to be.
     - `.container`'s padding is now REAL breathing room, fluid from 44px at
       576px to 88px at 1600px+, and it is what the eye reads as "room".
     - The `.pb-5` override (style.css:12008, 16px) is zeroed INSIDE the hero so
       top and bottom come out symmetric. Scoped to `#carousel-hero` — the bare
       `.pb-5` utility is untouched site-wide.

   Measured after, same page and widths: 46.6 / 54.6 / 64.1 / 72.8 / 82.9 / 88px,
   identical above and below at every width, no overflow anywhere.

   ALL SLIDES, DELIBERATELY — same reasoning as the mobile block at :8473.
   Every rule here is keyed on `#carousel-hero .ratio`, never `.hero-slide`, so
   the four hard-coded slides AND the ACF `hero.slides` repeater rows (which emit
   `<div class="ratio bg-gray">` with no BEM classes, hero.php:339) share one
   height and the carousel cannot jump on swipe. `.glide__slide` is made a flex
   container so its `.ratio` stretches to the tallest slide instead of leaving a
   gap under the shorter ones.

   >= 576px ONLY. The phone layout below 576px is deliberately untouched: its
   scrim is a 180deg gradient whose stops are calibrated in PERCENT against the
   29rem frame (:8482), the copy is bottom-anchored, and it already has 280px of
   room above the headline. Changing the frame there would slide the subject and
   the type relative to the alpha ramp and put the measured 4.5:1 contrast floor
   at risk for nothing — mobile was never the complaint.
============================================================ */

@media (min-width: 576px) {

	/* The slide stretches; its frame fills it. Without this the shorter slides
	   (2 and 4 carry less copy) leave the photograph short of the slide's
	   bottom edge while the <li> itself is stretched by the flex row. */
	#carousel-hero .glide__slide { display: flex; }
	#carousel-hero .glide__slide > .ratio { flex: 1 1 auto; }

	/* Off the fixed-height spacer, onto the content. */
	#carousel-hero .ratio::before { content: none; }

	#carousel-hero .ratio {
		display: flex;
		flex-direction: column;
		/* The floor, for stores whose headline fits on one line. Tracks the
		   viewport the way the type does, so the hero keeps its proportions
		   instead of becoming a letterbox on a wide monitor. */
		min-height: clamp( 21rem, 15rem + 14vw, 31rem );
	}

	/* The copy layer rejoins the flow and becomes the thing that sets the
	   height. `.d-flex` rather than `.hero-slide__copy` so the repeater slides,
	   which have no BEM classes, are carried too — and it cannot collide with
	   the <picture> or the scrim, neither of which is a flex box. */
	#carousel-hero .ratio > .d-flex {
		position: relative;
		height: auto;
		flex: 1 1 auto;
		padding-bottom: 0 !important;   /* beats #carousel-hero .pb-5 (style.css:12008) */
	}

	/* The room itself. Beats style.css:12004-12007, which is !important. */
	#carousel-hero .container {
		padding-top: clamp( 2.75rem, 1.4rem + 4.2vw, 5.5rem ) !important;
		padding-bottom: clamp( 2.75rem, 1.4rem + 4.2vw, 5.5rem ) !important;
	}
}

/* ============================================================
   Hero — stop the slide list stealing the scroll gesture
   partials/hero.php:72

   THE COMPLAINT
   "When I scroll, the image in the hero moves a little bit, it feels weird."

   WHAT IT ACTUALLY IS
   The slide list is a real, native scroll container sitting full-bleed across
   the top of the homepage, directly under the pointer when a visitor first
   scrolls. Measured live: `overflow: auto` on BOTH axes (hero.php:72 asks for
   Bootstrap's `.overflow-auto`, which is the shorthand, style.css:7223),
   4320px of horizontal scroll room, and `scroll-snap-type: x mandatory`
   (style.css:11897).

   A trackpad gesture is two-dimensional. A vertical swipe almost always carries
   a few pixels of horizontal delta, and the browser hands that to the innermost
   horizontally-scrollable box under the cursor — this one. The photograph slides
   sideways a few px, then `mandatory` springs it back when the gesture ends.
   Nudge-and-return, on every scroll. That is the "it like moves" the user sees,
   and it is not a parallax effect: there is no `background-attachment`, no
   transform and no scroll listener anywhere near this element.

   RULED OUT BY MEASUREMENT, not assumption: no sticky or shrinking header
   (nothing on the homepage is position:sticky; `stickyHeader()` in js/script.js
   is a no-op here because `.sentinal` only exists on archive-product.php); the
   scrollbar gutter is reserved permanently by `.overflow-y-scroll` on <html>, so
   the viewport never changes width on first scroll; the carousel does not
   autoplay; and `.page-overlay-top` is already neutralised by `mb-0` so the hero
   does not overlap the section below it.

   The CSS below closes the two structural holes. The sideways nudge from a
   trackpad is a wheel-input problem that CSS cannot express, so it is handled
   by initSliderWheelGuard() in js/script.js.
============================================================ */

#carousel-hero .glide__slides {
	/* One axis. THIS IS THE MEASURED CAUSE of "the image moves a little bit",
	   and it is not subtle on a wide monitor. The copy block outgrows the fixed
	   frame, and the part that hangs past the frame's BOTTOM edge becomes real
	   scrollable overflow on a list that Bootstrap left scrollable on both axes.
	   Measured on petlandhoffmanestates.com, 2026-10-15, setting ul.scrollTop
	   and reading the photograph's position back:

	     1200px   container ends 17.2px INSIDE the frame   0px of slack   image moves 0px
	     1366px   container ends  6.8px inside             0px           0px
	     1440px   container ends  2.2px inside             0px           0px
	     1536px   container ends  3.7px PAST the frame     4px           image moves 3.5px
	     1600px   container ends  7.5px past               8px           image moves 7.5px
	     1680px   container ends  7.9px past               8px           image moves 8.0px
	     1920px   container ends  7.9px past               8px           image moves 8.0px
	     2560px   container ends  7.9px past               8px           image moves 8.0px

	   So on any display from ~1536px up, the first few pixels of a downward
	   gesture scrolled the HERO, not the page, and the photograph stepped up to
	   8px before the document moved at all. (Note the asymmetry: the copy
	   overflows the frame at the top too, but overflow at the START edge is
	   unreachable and creates no scroll range — only the bottom counts. That is
	   why the effect switches on at 1536px rather than scaling smoothly.)

	   The frame re-budget at :8583 already removes the overflow at source; this
	   makes the list structurally incapable of scrolling vertically regardless
	   of what a store's headline does. Both verified at 0px. It also fixes the
	   Windows/Linux variant, where the horizontal scrollbar is drawn INSIDE the
	   padding box and eats ~15px of height on its own. */
	overflow-x: auto !important;        /* beats .overflow-auto (style.css:7223) */
	overflow-y: hidden !important;

	/* Every other snap row in the theme hides its scrollbar — .section-pet-types
	   (style.css:12078), #glide-products (:6585), quick boxes (:6631),
	   credibility (:6683), footer locations (:6513). The hero is the one that
	   was missed, which is also why it is the one that steals height. */
	scrollbar-width: none;

	/* Touch devices get the same fix the wheel guard gives trackpads: a vertical
	   pan over the hero belongs to the page, not to the slider. Sideways swipes
	   still change slide. */
	touch-action: pan-y pinch-zoom;

	overscroll-behavior-x: none;
}

#carousel-hero .glide__slides::-webkit-scrollbar { display: none; }

/* ============================================================
   Pet card — a cleanup, not a rebuild
   partials/loop-product.php

   ZERO MARKUP CHANGES. Every condition, toggle, ACF read, modal trigger,
   data-attribute and lead field in that 655-line partial is untouched, which
   is the whole point: the card has 17 independent toggles and four modals
   hanging off it, and the only way to be certain none of them breaks is to
   not touch the PHP at all.

   WHAT WAS WRONG — measured on dev, not guessed:
     Get My Info   999px      Phone        999px
     Unlock badge  999px      "interested" 999px
     plus chip     999px      financing    12px
     CARD FRAME    14px
   Seven radii on one card, six of them pills, inside a 14px frame. The markup
   actually asks for `.rounded-1`; theme-polish.css:1247 overrode it with
   `li.product .btn.rounded-1 { 999px !important }`. The house rule we set on
   the header and the menu — chrome gets rounded RECTANGLES, content keeps its
   pills — had simply never reached this component.

   THE SCALE: 14px frame / 10px buttons and panels / 8px chips on the photo /
   50% for genuinely round icon targets. Four steps, each with a job.

   CASCADE — the thing that makes or breaks this block:
   css/pet-inquiry-modal.min.css is enqueued at PHP_INT_MAX (functions.php:1368)
   and therefore loads AFTER this file. At equal specificity IT wins. Every
   selector below is scoped `li.product .card …` (0,3,1 or higher), which beats
   its (0,1,0)/(0,2,0) rules without !important; !important appears only where
   min.css or an earlier theme-polish rule used it first. `li.product` is the
   wrapper WooCommerce core's content-product.php emits, verified present on all
   11 homepage cards, so it is the one hook that exists on every surface.
============================================================ */

/* ---- 1. The shape language ----------------------------------------- */

/* The two CTAs and anything else .btn-shaped inside the card. The existing
   999px rules are !important, so these must be too. */
li.product .card .btn,
li.product .card .btn.rounded-1,
li.product .card .product-btn-info,
li.product .card .product-btn-phone {
	border-radius: var( --ui-radius-sm ) !important;
}

/* Equal, comfortable rows. They were 40px; 44px is the comfortable-target
   figure and makes the two buttons read as one control group. */
li.product .card .product-btn-info,
li.product .card .product-btn-phone {
	min-height: 44px;
	padding-block: .55rem !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	letter-spacing: .005em;
}

/* Phone goes to the ink token instead of a near-black #0a0a0a, so the card
   has exactly two fills: brand (primary action) and ink (secondary). */
li.product .card .product-btn-phone {
	background: var( --ui-ink ) !important;
	border-color: var( --ui-ink ) !important;
	color: #fff !important;
}

/* Chips that sit ON the photograph. 8px, not 999px: a pill on a photo reads as
   a sticker, a soft rectangle reads as a label. */
li.product .card .card-corner-tl .badge,
li.product .card .product-badge-stack .badge,
li.product .card .badge-coming-soon,
li.product .card .badge-popular,
li.product .card .badge-interested,
li.product .card .arrival-badge,
li.product .card .badge-view-hot,
li.product .card .badge-view-warm,
li.product .card .badge-view-neutral,
li.product .card .onsale {
	border-radius: 8px !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	padding: .3rem .55rem !important;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, .18 ) !important;
}

/* ---- 2. Less on the photograph ------------------------------------- */

/* The decorative plus chip goes. It is aria-hidden, it duplicates the enlarge
   control two inches away, and the whole card is already a link — three
   affordances for one action. Nothing is lost to assistive tech because it was
   never exposed to it. */
li.product .card .product-details-indicator {
	display: none !important;
}

/* The fake price goes, the lock stays.
   css/accessibility.css:89 draws a decoy "$█,█99" in generated content under
   frosted glass. The owner has confirmed this badge does not reveal a price —
   it routes to a form where you ask the store. Showing invented numerals to
   imply a concealed figure is the one thing on this card that is not true, and
   it is also the noisiest object on it: four stacked layers, a blur filter and
   a gradient. What remains is the honest half — a lock and the label — as one
   solid chip. The element, its data-ref-id, its modal target and its click
   path are all untouched. */
li.product .card .blurred-corner-price {
	border-radius: 8px !important;
	min-width: 0 !important;
	background: rgba( 15, 23, 42, .82 ) !important;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, .18 ) !important;
	backdrop-filter: none !important;
}

li.product .card .blurred-corner-price .price-text-under-blur {
	display: none !important;
}

li.product .card .blurred-corner-price .blur-glass-overlay {
	position: static !important;
	background: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

li.product .card .blurred-corner-price .unlock-pricing-cta {
	display: flex !important;
	align-items: center;
	gap: .35rem;
	padding: .34rem .6rem !important;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	color: #fff !important;
	text-shadow: none !important;
}

li.product .card .blurred-corner-price:hover {
	background: rgba( 15, 23, 42, .92 ) !important;
	transform: none !important;
}

/* ---- 3. The text block --------------------------------------------- */

/* The hierarchy was upside down: the pet's NAME rendered at font-weight 300 —
   the lightest text on the card — under a breed line at 700 uppercase. The
   name is the reason someone clicks. It is now the heaviest thing in the
   block, and the breed becomes the tracked label it was always acting like. */
li.product .card .product-location {
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --ui-ink-faint ) !important;
	margin-bottom: .2rem !important;
}

li.product .card .product-name {
	font-size: 1.0625rem !important;   /* 17px */
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.01em;
	color: var( --ui-ink );
	margin-bottom: .1rem !important;
}

li.product .card .product-name a { color: var( --ui-ink ) !important; }

li.product .card .product-breed {
	font-size: .72rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	color: var( --ui-ink-soft ) !important;
	opacity: 1 !important;
}

/* Breeder / USDA — genuinely tertiary, so they stop competing at 12px. */
li.product .card .product-name ~ p,
li.product .card .product-breed ~ p {
	font-size: .7rem !important;
	color: var( --ui-ink-faint ) !important;
	margin-top: .15rem !important;
}

/* ---- 4. The bottom block ------------------------------------------- */

/* THE "DOESN'T MATCH" DEFECT, measured: the button row sits at an 8px inset
   and the financing banner at 4px, so the banner overhangs the buttons above
   it by 4px on each side — which is exactly what reads as "bolted on" rather
   than part of the card. Matching the inset and the radius is what makes the
   bottom of the card one object. */
li.product .card .fb-banner--card {
	margin: 0 .25rem .25rem !important;
	border-radius: var( --ui-radius-sm ) !important;
}

/* The video CTA carries its colour inline from PHP, so geometry is all a
   stylesheet can reach. Matching radius and height keeps it in the stack. */
li.product .card .product-card__button--video {
	border-radius: var( --ui-radius-sm ) !important;
	min-height: 44px;
	margin: 0 .25rem .25rem !important;
}

/* Deposit CTA, when the commerce toggles turn it on (off on dev, so this is
   written from the partial, not from observation). */
li.product .card [data-pep-deposit] {
	border-radius: var( --ui-radius-sm ) !important;
	min-height: 44px;
}

/* ---- 5. Focus — a real defect, not a polish item -------------------- */

/* theme-polish.css:74 sets `.btn:focus-visible { outline: none }` and replaces
   it with a box-shadow that style.css's `.shadow{…!important}` then overrides,
   so the card's CTAs have NO focus indicator at all today. Keyboard users get
   nothing. Restored here. */
li.product .card .btn:focus-visible,
li.product .card .product-btn-info:focus-visible,
li.product .card .product-btn-phone:focus-visible,
li.product .card .fb-banner--card:focus-visible {
	outline: 3px solid var( --ui-ink ) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba( 255, 255, 255, .95 ) !important;
}

/* Controls that sit ON the photograph need TWO tones: no single colour can
   promise 3:1 against an arbitrary photo. White ring inside, ink ring outside —
   whichever the image is, one of them has contrast. */
li.product .card .blurred-corner-price:focus-visible,
li.product .card .tp-card-enlarge:focus-visible,
li.product .card .pep-fav-toggle:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba( 15, 23, 42, .85 ) !important;
}

@media (prefers-reduced-motion: reduce) {
	li.product .card .blurred-corner-price,
	li.product .card .product-btn-info,
	li.product .card .product-btn-phone { transition: none !important; }
}

/* ---- 6. One colour language on the photograph ----------------------
   This is the real "cluttered" problem, and it is not radius — every badge
   was already corrected to 8px above. It is that five unrelated colour
   languages were landing on one photo:

     Coming Soon      rgb(255,192,203) on one card, rgb(167,222,255) on the
                      next — the SAME class, two different colours
     Many interested  linear-gradient(135deg, rgb(236,72,153) …)  hot pink
     Very Popular     the same hot pink gradient
     NOW ONLY         an orange gradient
     Unlock Pricing   frosted glass over a fake number

   None of the pinks or blues exists in any of the ten colour schemes, so the
   card looked different from the rest of the site on every one of them.

   The system: a badge says one of two things, so it gets one of two looks.
     STATE  ("Coming Soon")            -> solid ink. It is a fact about the pet.
     SOCIAL ("Very Popular", views…)   -> a quiet white chip. It is a nudge, and
                                          a nudge should not outshout the animal.
   The sale badge keeps brand: it is the one genuinely promotional thing here,
   and brand is the colour the rest of the site already uses for that.

   These need !important AND the li.product scope because the gradients come
   from css/pet-inquiry-modal.min.css, which loads after this file. `background`
   (not background-color) is deliberate — it resets background-image too. */

li.product .card .badge-coming-soon {
	background: var( --ui-ink ) !important;
	color: #fff !important;
}

li.product .card .badge-popular,
li.product .card .badge-interested,
li.product .card .badge-view-hot,
li.product .card .badge-view-warm,
li.product .card .badge-view-neutral {
	background: rgba( 255, 255, 255, .94 ) !important;
	color: var( --ui-ink ) !important;
	border: 0 !important;
	text-shadow: none !important;
}

/* The custom "NOW ONLY" sale callout is the one promotional object on the
   card, so it keeps the brand — routed through the token instead of a
   hardcoded orange gradient, so it follows the scheme like everything else. */
li.product .card .card-corner-tl .onsale {
	background: var( --brand-fill, #c5511c ) !important;
	color: #fff !important;
	border: 0 !important;
}

/* .price-container is only a positioning wrapper (it carries .position-absolute
   and .pe-none); the visible orange box is its .price child, which is where the
   gradient and the 9.6px radius live. Targeting the wrapper painted a second
   rectangle behind the real one — so the wrapper goes back to transparent and
   the child gets the treatment. */
li.product .card .card-corner-tl .price-container {
	background: none !important;
}

li.product .card .card-corner-tl .price-container .price {
	background: var( --brand-fill, #c5511c ) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, .18 ) !important;
}

/* NOTE for whoever edits this next: .arrival-badge cannot be recoloured from a
   stylesheet. partials/loop-product.php:484 writes its background and colour as
   an INLINE style carrying !important, and inline !important outranks author
   !important. Changing those tiers means editing the PHP array, which this
   pass deliberately does not touch. Its radius and type DO come from here. */

/* ---- 7. The financing banner, in the card's own material -----------
   The owner pointed at this block specifically: "looks like it doesnt match."
   Two separate reasons, both measured:

   1. GEOMETRY — fixed in §4 above. The button row sits at an 8px inset and the
      banner sat at 4px, so it overhung the buttons by 4px a side.

   2. MATERIAL — css/financing-banner.css contains exactly ONE var() and a
      dozen hardcoded warm hex values (#fff8ef, #fdebd2, #cf5b1f, #a8481a …),
      so the card variant paints a peach gradient with an orange-tinted border
      no matter which of the ten colour schemes is active. On the blue, teal,
      lime, olive, mustard or purple schemes the rest of the card changes and
      this one box stays orange. That is not a taste problem, it is the box
      genuinely not belonging to the site it is on.

   Re-materialised in the card's own neutrals with the brand carried only by
   the eyebrow, the icon and the CTA — the three things that should be brand —
   all routed through tokens so every scheme gets its own. Scoped to
   .fb-banner--card so the hero/single/footer variants are untouched.
   css/financing-banner.css loads BEFORE this file, so no !important is needed
   except where it used one. */

li.product .card .fb-banner--card {
	background: var( --ui-surface-sunken ) !important;
	border: 1px solid var( --ui-border ) !important;
	box-shadow: none !important;
}

li.product .card .fb-banner--card .fb-banner__eyebrow {
	font-size: .66rem !important;
	letter-spacing: .07em;
	color: var( --ui-primary ) !important;
}

li.product .card .fb-banner--card .fb-banner__headline {
	font-size: .8rem !important;
	font-weight: 600 !important;
	color: var( --ui-ink ) !important;
}

li.product .card .fb-banner--card .fb-banner__cta,
li.product .card .fb-banner--card .fb-banner__cta-label {
	font-size: .72rem !important;
	font-weight: 700 !important;
	color: var( --ui-primary ) !important;
}

li.product .card .fb-banner--card .fb-banner__icon {
	background: var( --ui-primary-soft ) !important;
	color: var( --ui-primary ) !important;
	border-radius: 8px !important;
}

li.product .card .fb-banner--card:hover {
	background: var( --ui-surface-muted ) !important;
	border-color: var( --ui-border-strong ) !important;
}

/* ============================================================
   Homepage section headers — type, divider, rhythm
   .section-title + the four intro lines under it

   WHAT WAS WRONG, measured on dev:
     font-size 24px, font-weight 400, colour #4c4c4c
     ::after  a 64 x 3px brand bar, the same device four times
     spacing  56px above, 40px below, then margin-bottom 72px on one
              section and 22.4px on the other three

   Three problems in that. The section headings were font-weight 400 —
   LIGHTER than the pet names (700) sitting underneath them, so the page's
   top-level structure was its quietest type. The colour was a legacy
   #4c4c4c rather than the ink token everything else now uses. And the
   divider was a blunt stub repeated verbatim down the page.

   THE DIVIDER: instead of a lone 64px bar, a hairline that spans a real
   width and fades out at both ends, with a short brand segment sitting on
   top of its centre. ::before draws the hairline, ::after the brand nub —
   verified nothing else in the theme uses .section-title::before. It reads
   as a deliberate rule rather than an underline that ran out of road.

   SCOPE: .section-title also appears on the Spanish /es/ templates
   (partials/content-es-raza.php, content-es-razas.php,
   add-ons/es-pages/helpers.php). Those get the same improvement, which is
   intended — it is one shared component and they had the same blunt bar.
   Nothing here changes markup, so no template or AJAX path is affected.
============================================================ */

.section-title {
	font-weight: 800 !important;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var( --ui-ink );
	padding-top: 2.75rem !important;
	padding-bottom: 2.5rem !important;
	margin-bottom: 1.25rem !important;
	text-wrap: balance;
}

/* THE SIZE NEEDS ITS OWN FIGHT — and this is why every section heading on this
   site renders at 24px today regardless of the rules above it.

   style.css:12447, inside @media (min-width: 768px):
     .container h2:not(.card h2):not(.card .h2):not(.card .h2):not(.card .h2):not(.breed-title)
       { font-size: 1.5rem !important }

   Each :not() contributes its argument's specificity, so that selector is worth
   about (0,8,2) AND carries !important. A plain `.section-title` rule at (0,1,0)
   loses even with !important — which is also why style.css's OWN
   `.section-title { 2.25rem }` / `{ 2.5rem }` rules never rendered. There is a
   matching (0,1,1) rule covering the mobile range at :12443.

   The base rule below beats the mobile one by putting the class on the element
   (0,2,1 vs 0,1,1). The >=768 rule mirrors their :not() chain with our class on
   top (0,10,2 vs 0,8,2). Verbose, but it is their shape plus one class — easier
   to follow, and to delete if style.css ever stops shouting, than a row of
   repeated class names. */
.container h2.section-title,
.container .h2.section-title {
	font-size: clamp( 1.5rem, 1.15rem + 1.15vw, 2.5rem ) !important;
}

@media (min-width: 768px) {
	.container h2.section-title:not(.card h2):not(.card .h2):not(.card .h2):not(.card .h2):not(.breed-title),
	.container .h2.section-title:not(.card h2):not(.card .h2):not(.card .h2):not(.card .h2):not(.breed-title) {
		font-size: clamp( 1.75rem, 1.2rem + 1.4vw, 2.5rem ) !important;
	}
}

/* The hairline. Fades at both ends so it reads as a rule rather than a
   floating bar, and sits wide enough to relate to the section, not the word. */
.section-title::before {
	content: "";
	position: absolute;
	bottom: 1.15rem;
	left: 50%;
	transform: translateX( -50% );
	width: min( 240px, 60% );
	height: 1px;
	background: linear-gradient( 90deg,
		transparent,
		var( --ui-border-strong ) 18%,
		var( --ui-border-strong ) 82%,
		transparent );
}

/* add-ons/breeders/breeders.css:155-168 deliberately left-aligns .section-title
   on the two editorial sections and re-anchors the ::after bar to the left. It
   predates this ::before and therefore does not override it, so without this the
   new hairline would draw centred, 240px wide, under a left-aligned heading whose
   bottom padding it does not have. Re-anchored to match their ::after exactly. */
.breeders-standards .section-title::before,
.breeders-approach .section-title::before {
	left: 0;
	transform: none;
	bottom: 0;
	width: 180px;
}

/* The brand segment, centred on the hairline. */
.section-title::after {
	bottom: 1rem !important;
	width: 44px !important;
	height: 3px !important;
	border-radius: 999px !important;
	background: var( --ui-primary ) !important;
}

/* The supporting line under each heading. One treatment for all four,
   including the new one on Available Pets — the other three already had
   their own class, so they are listed here rather than renamed, which would
   have meant editing three more templates for no gain. */
.section-intro,
.credibility-intro,
.quick-boxes-intro,
.getting-started-intro {
	width: 100%;
	max-width: 58ch;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: clamp( .95rem, .9rem + .2vw, 1.0625rem );
	line-height: 1.6;
	color: var( --ui-ink-soft );
}

/* Available Pets is the only one of the four whose heading lives inside a flex
   row (it shares that row with the pet-type dropdown). `width:100%` is not
   enough there: `max-width:58ch` caps the flex item, so the dropdown still fits
   alongside and the line ends up beside it instead of under the heading.
   flex-basis 100% forces its own row; the padding keeps the text column at the
   same 58ch measure as the other three without a wrapper element. */
.available-pets-intro {
	flex: 0 0 100%;
	max-width: 100%;
	padding-inline: max( 0px, calc( ( 100% - 58ch ) / 2 ) );
}

/* .section-title carries margin-bottom for the case where no intro follows;
   when one does, the intro owns the gap instead. */
.section-title + .section-intro,
.section-title + .credibility-intro,
.section-title + .quick-boxes-intro,
.section-title + .getting-started-intro {
	margin-top: -.35rem;
}

@media (max-width: 575.98px) {
	.section-title {
		padding-top: 2rem !important;
		padding-bottom: 2.1rem !important;
		margin-bottom: 1rem !important;
	}

	.section-title::before { width: min( 190px, 72% ); }

	.section-intro,
	.credibility-intro,
	.quick-boxes-intro,
	.getting-started-intro {
		margin-bottom: 1.5rem;
		padding-inline: .25rem;
	}
}