/*
 * 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:      #94a3b8;
	--ui-surface:        #ffffff;
	--ui-surface-sunken: #f8fafc;
	--ui-surface-muted:  #f1f5f9;
	--ui-border:         #e2e8f0;
	--ui-border-strong:  #cbd5e1;
	--ui-primary:        var( --bs-primary, #dc3545 );
	--ui-primary-soft:   rgba( 220, 53, 69, .08 );
	--ui-primary-tint:   rgba( 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: keep brand red but give it a touch of gradient + depth. */
.btn-primary {
	background: linear-gradient( 135deg, var( --ui-primary ) 0%, #b91c2e 100%);
	border-color: transparent;
	box-shadow: 0 4px 14px rgba( 220, 53, 69, .25 );
	color: #fff;
}

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

.btn-primary:active {
	transform: translateY( 0 );
	box-shadow: 0 2px 6px rgba( 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 ) 0%, #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 );
	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 );
	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 );
	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 ), #f97316 );
	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 ); }

/* 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;
}

/* 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( 255, 255, 255, .12 );
	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) */
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 ) !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 );
}

/* 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 {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !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, #f97316 0%, #ea580c 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 ) 0%, #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 ) 0%, #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( 220, 53, 69, .3 ) !important;
	transform: translateY( -1px );
}

/* Phone button — dark pill, same size as primary */
li.product .btn.btn-black,
li.product .btn.btn-dark,
li.product .product-btn-phone {
	background: var( --ui-surface ) !important;
	color: var( --ui-ink ) !important;
	border: 1.5px solid var( --ui-border-strong ) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: .5rem 1rem !important;
	font-size: .85rem !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: var( --ui-ink ) !important;
	color: #fff !important;
	border-color: var( --ui-ink ) !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 ) 0%, #b91c2e 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba( 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: 576px) {
	.tp-reservation-card { flex-direction: column; padding: 1rem; }
}

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

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

.tp-cta-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	border: 1.5px solid var( --ui-border-strong ) !important;
	background: var( --ui-surface ) !important;
	color: var( --ui-ink ) !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tp-cta-secondary:hover,
.tp-cta-secondary:focus {
	background: var( --ui-surface-sunken ) !important;
	border-color: var( --ui-primary ) !important;
	color: var( --ui-primary ) !important;
	transform: translateY( -1px );
}

.tp-cta-secondary .bi-heart { color: var( --ui-primary ); }

.tp-cta-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .6rem 1rem;
	color: var( --ui-ink-soft );
	font-weight: 500;
	font-size: .92rem;
	text-decoration: none;
	transition: color var( --ui-transition );
}

.tp-cta-phone:hover {
	color: var( --ui-primary );
}

.tp-cta-phone svg { color: var( --ui-primary ); }

/* ============================================================
   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 );
	position: relative;
	margin-top: 2px;
	box-shadow: 0 1px 4px rgba( 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 );
	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 h4.h6 {
	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 h4.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 );
	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 );
	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 ) 0%, #b91c2e 100%);
	border: 0;
	color: #fff;
	font-weight: 600;
	padding: .75rem 1.5rem;
	box-shadow: 0 4px 14px rgba( 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( 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 (generic, non-concierge) — consistent rounded overflow-hidden + soft shadow
============================================================ */

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

.modal-header {
	border-bottom-color: var( --ui-border );
}

.modal-footer {
	border-top-color: var( --ui-border );
	background: var( --ui-surface-sunken );
}

/* ============================================================
   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, #F26322 0%, #d14d16 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: #F26322;
	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: #F26322;
	text-decoration: underline;
	text-underline-offset: 2px;
}

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

/* 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 — view counter strip (under gallery)
============================================================ */

.tp-view-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .75rem 1rem;
	margin-bottom: 1rem;
	background: var( --ui-primary-soft );
	border: 1px solid var( --ui-primary-tint );
	border-radius: var( --ui-radius-sm );
	color: var( --ui-ink );
	font-size: .9rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

.tp-view-strip i {
	color: var( --ui-primary );
	font-size: 1.05rem;
	flex-shrink: 0;
}

.tp-view-strip strong {
	color: var( --ui-primary );
	font-weight: 700;
}

.tp-view-strip--hot {
	background: linear-gradient( 135deg, rgba( 239, 68, 68, .1 ) 0%, rgba( 220, 38, 38, .15 ) 100% );
	border-color: rgba( 239, 68, 68, .25 );
}

/* ============================================================
   Pet single — polished price block
============================================================ */

.tp-price {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 1rem 0 1.15rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var( --ui-border );
}

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

.tp-price__amount {
	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 {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.tp-price__amount del {
	color: var( --ui-ink-faint );
	font-size: 1.05rem;
	font-weight: 600;
	margin-right: .5rem;
	opacity: .7;
}

.tp-price__amount ins {
	text-decoration: none;
}

.tp-price__sub {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .82rem;
	color: var( --ui-ink-soft );
	margin-top: .35rem;
}

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

.tp-price__financing {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .55rem;
	padding: .35rem .7rem;
	background: var( --ui-surface-sunken );
	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 );
}

@media (max-width: 576px) {
	.tp-price__amount { font-size: 1.7rem; }
}

/* ============================================================
   Pet single — phone CTA mobile upgrade
============================================================ */

@media (max-width: 768px) {
	.tp-cta-phone {
		display: flex;
		gap: .55rem;
		padding: .85rem 1.25rem;
		border: 1.5px solid var( --ui-border-strong );
		border-radius: 999px;
		background: var( --ui-surface );
		color: var( --ui-ink ) !important;
		font-size: .98rem;
		font-weight: 600;
		min-height: 48px;
		justify-content: center;
		text-decoration: none;
	}

	.tp-cta-phone:hover,
	.tp-cta-phone:focus,
	.tp-cta-phone:active {
		border-color: var( --ui-primary );
		color: var( --ui-primary ) !important;
	}

	.tp-cta-secondary {
		min-height: 48px;
		padding: .9rem 1.25rem !important;
	}
}

/* ============================================================
   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: 576px) {
	.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 );
	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: 576px) {
	.tp-testimonial-card__quote { padding-left: 0; }
}

/* ============================================================
   Pet single — CTA cards (in-store + virtual visit)
============================================================ */

.tp-cta-card {
	display: block;
	position: relative;
	background: var( --ui-surface );
	border: 1px solid var( --ui-border );
	border-radius: var( --ui-radius );
	padding: 1.25rem;
	box-shadow: var( --ui-shadow-xs );
	color: var( --ui-ink );
	text-decoration: none;
	transition: transform var( --ui-transition ), box-shadow var( --ui-transition ), border-color var( --ui-transition );
}

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

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

.tp-cta-card--virtual:hover,
.tp-cta-card--virtual:focus { border-color: var( --ui-info ); }

.tp-cta-card__inner {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.tp-cta-card__icon {
	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 ) 0%, #b91c2e 100% );
	color: #fff;
	font-size: 1.7rem;
	box-shadow: 0 4px 12px rgba( 220, 53, 69, .25 );
}

.tp-cta-card--virtual .tp-cta-card__icon {
	background: linear-gradient( 135deg, var( --ui-info ) 0%, #0369a1 100% );
	box-shadow: 0 4px 12px rgba( 14, 165, 233, .25 );
}

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

.tp-cta-card__title {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --ui-ink );
	margin: 0 0 .35rem;
	letter-spacing: -.01em;
}

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

.tp-cta-card--virtual .tp-cta-card__title i { color: var( --ui-info ); }

.tp-cta-card__text {
	color: var( --ui-ink-soft );
	font-size: .88rem;
	line-height: 1.45;
	margin: 0 0 .5rem;
}

.tp-cta-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var( --ui-primary );
	font-size: .9rem;
	font-weight: 600;
	transition: gap var( --ui-transition );
}

.tp-cta-card--virtual .tp-cta-card__cta { color: var( --ui-info ); }

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

.tp-cta-card__badge {
	position: absolute;
	top: -8px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .65rem;
	background: var( --ui-success );
	color: #fff;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 2px 6px rgba( 22, 163, 74, .3 );
}

.tp-cta-card--virtual .tp-cta-card__badge {
	background: var( --ui-info );
	box-shadow: 0 2px 6px rgba( 14, 165, 233, .3 );
}

@media (max-width: 576px) {
	.tp-cta-card__inner { flex-direction: column; text-align: center; align-items: stretch; }
	.tp-cta-card__icon { margin: 0 auto; }
	.tp-cta-card__title { justify-content: center; }
	.tp-cta-card__cta { justify-content: center; }
	.tp-cta-card__badge { right: 12px; }
}

/* ============================================================
   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 {
	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: 576px) {
	.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 heading + form spacing inside .tp-section
============================================================ */

.tp-section .inquire-form .gform_wrapper {
	margin-top: .25rem;
}

.tp-section .inquire-form input[type="text"],
.tp-section .inquire-form input[type="email"],
.tp-section .inquire-form input[type="tel"],
.tp-section .inquire-form textarea,
.tp-section .inquire-form select {
	border-radius: var( --ui-radius-sm );
	border: 1px solid var( --ui-border );
	transition: border-color var( --ui-transition ), box-shadow var( --ui-transition );
}

.tp-section .inquire-form input:focus,
.tp-section .inquire-form textarea:focus,
.tp-section .inquire-form select:focus {
	border-color: var( --ui-primary );
	box-shadow: 0 0 0 4px var( --ui-primary-soft );
	outline: 0;
}

/* ============================================================
   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 ); 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 cluster: heart + enlarge side-by-side --- */
/* Heart is positioned by .pep-fav-toggle--gallery (top:1rem, right:1rem, 48px).
   Enlarge sits to the LEFT of the heart at the same vertical position so the
   two read as a single 'controls' cluster. */

.tp-gallery-enlarge {
	position: absolute;
	top: 1rem;
	right: 4.5rem;
	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;
}

@media (max-width: 576px) {
	.tp-gallery-enlarge { width: 42px; height: 42px; right: 4rem; font-size: .95rem; }
	.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 );
}

/* 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 ) 0%, #b91c2e 100% );
	color: #fff;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .01em;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba( 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( 220, 53, 69, .45 );
	color: #fff;
	outline: none;
}

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

@media (max-width: 576px) {
	.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;
}

.tp-gallery-thumb--video { background: #000; }
.tp-gallery-thumb--video img { filter: brightness( .65 ); }
.tp-gallery-thumb--video:hover img { filter: brightness( .5 ); }

.tp-gallery-thumb__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, .96 );
	color: var( --ui-primary );
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba( 0, 0, 0, .35 );
	pointer-events: none;
}

.tp-gallery-thumb__play i { font-size: 1rem; margin-left: 2px; }

/* --- Fullscreen modal carousel --- */
#galleryModal .modal-content {
	background: #000;
	border-radius: var( --ui-radius );
	border: 0;
}
#galleryModal .btn-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 5;
}
#galleryModal .carousel-item img { border-radius: var( --ui-radius-sm ); }

/* --- 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: 576px) {
	.pet-gallery-container .carousel-control-prev,
	.pet-gallery-container .carousel-control-next {
		width: 40px; height: 40px;
		opacity: 1;
		margin: 0 .5rem;
	}
}

/* --- Video play button (main carousel) --- */
.pet-video-slide .pet-video-poster {
	filter: brightness( .85 );
	transition: filter var( --ui-transition );
}
.pet-video-slide:hover .pet-video-poster { filter: brightness( .7 ); }

.pet-video-slide .pet-video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, .96 );
	color: var( --ui-primary );
	border: 0;
	border-radius: 50%;
	box-shadow: 0 6px 22px rgba( 0, 0, 0, .45 );
	cursor: pointer;
	z-index: 3;
	transform: translate( -50%, -50% );
	transition: transform .2s ease, background-color .2s ease;
	padding: 0;
}

.pet-video-slide .pet-video-play-btn:hover,
.pet-video-slide .pet-video-play-btn:focus-visible {
	transform: translate( -50%, -50% ) scale( 1.08 );
	background: #fff;
	color: var( --ui-primary );
	outline: none;
}

.pet-video-slide 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: 768px) {
	.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: 576px) {
	.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: 576px) {
	.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: 576px) {
	.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: 576px) {
	.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 ) !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 ) 0%, #b91c2e 100% ) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: 0 6px 20px rgba( 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( 220, 53, 69, .45 ) !important;
	color: #fff !important;
	background: linear-gradient( 135deg, var( --ui-primary ) 0%, #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 ) 0%, #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: 768px) {
	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 ) 0%, #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( 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( 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 h4.h6 {
	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 h4.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 );
	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 );
	color: #fff !important;
	font-size: .9rem;
	font-weight: 700;
	text-decoration: none !important;
	border: 0;
	box-shadow: 0 3px 10px rgba( 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( 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: 576px) {
	.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 ) !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;
}