/**
 * Approved OpenDesign homepage translated to the child-theme/WooCommerce runtime.
 */

.tpg-site.home .entry-content > .tpg-home {
	width: 100%;
	max-width: none !important;
	margin: 0;
}

.tpg-home {
	--tpg-home-h1: clamp(48px, 6.4vw, 92px);
	--tpg-home-h2: clamp(36px, 4.4vw, 62px);
	--tpg-home-h3: 23px;
	overflow: clip;
	background: var(--tpg-porcelain);
	color: var(--tpg-nero);
	font-family: var(--tpg-font-sans);
}

.tpg-home,
.tpg-home *,
.tpg-home *::before,
.tpg-home *::after { box-sizing: border-box; }

.tpg-home :where(figure, h1, h2, h3, p) { margin: 0; }
.tpg-home img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.tpg-home a { color: inherit; }
.tpg-home .tpg-section { padding-block: clamp(72px, 9vw, 104px); }
.tpg-home .tpg-section + .tpg-section { border-top: 1px solid var(--tpg-concrete); }
.tpg-home h2 { font-size: var(--tpg-home-h2); line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: normal; word-break: normal; }
.tpg-home h3 { font-size: var(--tpg-home-h3); line-height: 1.18; }

.tpg-section-header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(36px, 5vw, 64px);
}

.tpg-section-header h2 { max-width: 14ch; }
.tpg-section-lead { max-width: 52ch; margin-top: 16px !important; color: var(--tpg-muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.52; }

/* Hero */
.tpg-home-hero {
	min-height: 820px;
	padding: 0;
	border: 0;
	background: var(--tpg-oat);
}

.tpg-home-hero__inner {
	display: grid;
	grid-template-columns: 47% 53%;
	min-height: 820px;
	container-type: inline-size;
}

.tpg-home-hero__copy {
	display: flex;
	min-width: 0;
	padding: 142px var(--tpg-gutter) 76px max(var(--tpg-gutter), calc((100vw - var(--tpg-shell)) / 2 + var(--tpg-gutter)));
	flex-direction: column;
	justify-content: center;
}

@supports (width: 1cqw) {
	.tpg-home-hero__copy {
		padding-left: max(var(--tpg-gutter), calc((100cqw - var(--tpg-shell)) / 2 + var(--tpg-gutter)));
	}
}

.tpg-home-hero__copy h1 {
	max-width: 8.2ch;
	font-size: var(--tpg-home-h1);
	line-height: 0.96;
	letter-spacing: -0.045em;
}

.tpg-home-hero__lead {
	max-width: 38ch;
	margin-top: 28px !important;
	color: var(--tpg-muted);
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.52;
}

.tpg-home-hero__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 36px;
	flex-wrap: wrap;
}

.tpg-home-hero__media {
	position: relative;
	min-width: 0;
	min-height: 620px;
	overflow: hidden;
	clip-path: inset(0);
	background: var(--tpg-oat);
}

.tpg-home-hero__media img { position: absolute; inset: 0; object-position: 58% center; will-change: transform; }

.tpg-home-hero__note {
	display: flex;
	margin-top: auto !important;
	padding-top: 40px;
	align-items: center;
	gap: 28px;
	color: var(--tpg-muted);
	font: 12px/1.4 var(--tpg-font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tpg-home-hero__note::before { width: 48px; height: 1px; background: var(--tpg-nero); content: ""; }

.tpg-js .tpg-home-hero__media { animation: tpg-hero-frame-in 900ms var(--tpg-ease) both; }
.tpg-js .tpg-home-hero__media img { animation: tpg-hero-photo-breathe 8s var(--tpg-ease) 300ms both; }
.tpg-js .tpg-home-hero__copy .tpg-eyebrow { animation: tpg-hero-copy-in 560ms var(--tpg-ease) 280ms both; }
.tpg-js .tpg-home-hero__copy h1 { animation: tpg-hero-title-in 760ms var(--tpg-ease) 390ms both; }
.tpg-js .tpg-home-hero__lead { animation: tpg-hero-copy-in 650ms var(--tpg-ease) 610ms both; }
.tpg-js .tpg-home-hero__actions { animation: tpg-hero-copy-in 620ms var(--tpg-ease) 760ms both; }
.tpg-js .tpg-home-hero__note { animation: tpg-hero-copy-in 560ms var(--tpg-ease) 900ms both; }

@keyframes tpg-hero-frame-in {
	from { opacity: 0; clip-path: inset(0 0 0 14%); }
	to { opacity: 1; clip-path: inset(0); }
}

@keyframes tpg-hero-photo-breathe {
	from { transform: scale(1); }
	to { transform: scale(1.025); }
}

@keyframes tpg-hero-copy-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes tpg-hero-title-in {
	from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(28px); }
	to { opacity: 1; clip-path: inset(0); transform: none; }
}

/* Values */
.tpg-values { background: var(--tpg-porcelain); }

.tpg-values__layout {
	display: grid;
	grid-template-columns: 1fr 1.7fr;
	align-items: start;
	gap: 56px;
}

.tpg-values__heading h2 { max-width: 13ch; }
.tpg-values__list { border-top: 1px solid var(--tpg-nero); }

.tpg-value {
	display: grid;
	grid-template-columns: 48px 1fr 1.2fr;
	align-items: baseline;
	gap: 20px;
	padding: 25px 0;
	border-bottom: 1px solid var(--tpg-concrete);
}

.tpg-value__number {
	color: var(--tpg-muted);
	font: 12px/1.4 var(--tpg-font-mono);
	letter-spacing: 0.06em;
}

.tpg-value h3 { font-size: 21px; font-weight: 400; }
.tpg-value p { color: var(--tpg-muted); font-size: 14px; }

/* Categories */
.tpg-categories { background: var(--tpg-oat); }

.tpg-categories__grid {
	display: grid;
	grid-template-columns: 1.55fr 0.85fr 0.85fr;
	grid-template-rows: repeat(2, 290px);
	gap: 12px;
}

.tpg-home .tpg-category-card {
	position: relative;
	min-height: 290px;
	overflow: hidden;
	color: var(--tpg-porcelain);
	text-decoration: none;
}

.tpg-category-card:first-child { grid-row: 1 / 3; }

.tpg-category-card::after {
	position: absolute;
	inset: 0;
	background: color-mix(in oklch, var(--tpg-nero) 22%, transparent);
	content: "";
}

.tpg-category-card img { transition: transform 620ms var(--tpg-ease); }
.tpg-category-card--carriers img { object-position: 52% 50%; }
.tpg-category-card--costumes img { object-position: 50% 42%; }
.tpg-category-card--food img { object-position: 64% 55%; }
.tpg-category-card--toys img { object-position: 50% 58%; }

.tpg-category-card__fallback { display: block; width: 100%; height: 100%; background: var(--tpg-concrete); }

.tpg-category-card__overlay {
	position: absolute;
	z-index: 2;
	inset: auto 18px 18px;
	display: flex;
	padding: 16px;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	background: var(--tpg-nero);
	transition: transform var(--tpg-ui) var(--tpg-ease), background var(--tpg-ui) var(--tpg-ease);
}

.tpg-category-card__title { font-family: var(--tpg-font-serif); font-size: clamp(24px, 2vw, 34px); }
.tpg-category-card__link { font: 12px/1 var(--tpg-font-mono); white-space: nowrap; }

.tpg-category-card:hover img,
.tpg-category-card:focus-visible img { transform: scale(1.035); }

.tpg-category-card:hover .tpg-category-card__overlay,
.tpg-category-card:focus-visible .tpg-category-card__overlay {
	background: color-mix(in oklch, var(--tpg-nero) 92%, var(--tpg-walnut));
	transform: translateY(-3px);
}

/* Isolated New Products component: intentionally avoids archive classes. */
.tpg-new-products { background: var(--tpg-porcelain); }
.tpg-new-products :where(h1, h2, h3, p) { margin: 0; }

.tpg-new-products--page {
	padding-block: clamp(72px, 9vw, 128px);
	border-top: 1px solid var(--tpg-concrete);
}

.tpg-new-products--page .tpg-new-products__header h1 {
	max-width: 10ch;
	font-family: var(--tpg-font-serif);
	font-size: clamp(56px, 7vw, 112px);
	font-weight: 700;
	line-height: 0.94;
	letter-spacing: -0.045em;
}

.tpg-new-products--page .tpg-new-products__header {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
	align-items: end;
	gap: clamp(28px, 8vw, 120px);
	margin-bottom: clamp(48px, 6vw, 76px);
	padding-bottom: clamp(28px, 4vw, 44px);
	border-bottom: 1px solid var(--tpg-concrete);
}

.tpg-new-products--page .tpg-new-products__intro {
	max-width: 41ch;
	margin: 0;
	color: var(--tpg-muted);
	font-size: clamp(1rem, 1.3vw, 1.14rem);
	line-height: 1.7;
}

.tpg-new-products__grid {
	display: grid;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 52px 18px;
}

.tpg-new-card {
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	flex-direction: column;
}

.tpg-new-card__media {
	position: relative;
	width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1.12;
	overflow: hidden;
	background: var(--tpg-oat);
}

.tpg-new-card__media > a { display: block; width: 100%; height: 100%; }
.tpg-new-card__image-fallback { position: absolute; inset: 0; display: block; background: var(--tpg-oat); }

.tpg-new-card__image {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--tpg-micro) var(--tpg-ease), transform 620ms var(--tpg-ease);
}

.tpg-js .tpg-new-card__image { opacity: 0; }
.tpg-js .tpg-new-card__image.is-loaded { opacity: 1; }
.tpg-new-card__image.is-broken { display: none; }

.tpg-new-card__badge {
	position: absolute;
	z-index: 2;
	inset: 14px auto auto 14px;
	padding: 6px 9px;
	background: var(--tpg-porcelain);
	color: var(--tpg-nero);
	font: 10px/1 var(--tpg-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tpg-new-card__action {
	position: absolute;
	z-index: 2;
	inset: auto 12px 12px;
	width: calc(100% - 24px);
	transform: translateY(4px);
	opacity: 0.96;
	transition: transform var(--tpg-ui) var(--tpg-ease), opacity var(--tpg-ui) var(--tpg-ease);
}

.tpg-new-card__action .tpg-add-state { min-height: 48px; margin: 0; }

.tpg-new-card__action .tpg-add-state .button,
.tpg-new-card__action > .button,
.tpg-new-card__action .tpg-quantity {
	width: 100%;
	min-height: 48px;
	border-color: var(--tpg-concrete);
	border-radius: var(--tpg-radius);
	background: var(--tpg-porcelain);
	color: var(--tpg-nero);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.tpg-new-card__action .added_to_cart { display: none; }

.tpg-new-card:hover .tpg-new-card__image,
.tpg-new-card:focus-within .tpg-new-card__image { transform: scale(1.025); }

.tpg-new-card:hover .tpg-new-card__action,
.tpg-new-card:focus-within .tpg-new-card__action { opacity: 1; transform: none; }

.tpg-new-card__body { min-width: 0; padding-top: 16px; }

.tpg-new-card__line {
	display: flex;
	min-width: 0;
	align-items: start;
	justify-content: space-between;
	gap: 16px;
}

.tpg-new-card h3 {
	min-width: 0;
	font-family: var(--tpg-font-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.tpg-new-card h3 a { text-decoration: none; }
.tpg-new-card__price { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.tpg-new-card__price del { margin-right: 7px; color: var(--tpg-muted); }
.tpg-new-card__price ins { color: var(--tpg-nero); text-decoration: none; }
.tpg-new-card__category { margin-top: 8px; font: 10px/1.35 var(--tpg-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.tpg-new-card__category a { color: var(--tpg-walnut); text-decoration: none; }
.tpg-new-card__stock { margin-top: 5px; color: var(--tpg-muted); font-size: 12px; }

/* Lifestyle */
.tpg-lifestyle { padding: 0; border: 0; }

.tpg-lifestyle__layout {
	display: grid;
	grid-template-columns: 58% 42%;
	min-height: 760px;
}

.tpg-lifestyle__media { min-height: 760px; overflow: hidden; background: var(--tpg-oat); }

.tpg-lifestyle__image {
	object-position: 38% center;
	transform: scale(1.025) translate3d(0, var(--tpg-lifestyle-shift, 0), 0);
	will-change: transform;
}

.tpg-lifestyle__content {
	display: flex;
	padding: clamp(64px, 8vw, 120px);
	flex-direction: column;
	justify-content: center;
	background: var(--tpg-nero);
	color: var(--tpg-porcelain);
}

.tpg-js .tpg-lifestyle__content {
	opacity: 0;
	clip-path: inset(0 0 0 12%);
	transform: translateX(18px);
	transition: opacity 760ms var(--tpg-ease), clip-path 820ms var(--tpg-ease), transform 820ms var(--tpg-ease);
}

.tpg-js .tpg-lifestyle__content.is-visible { opacity: 1; clip-path: inset(0); transform: none; }
.tpg-lifestyle__content .tpg-eyebrow { color: var(--tpg-oat); }
.tpg-lifestyle__content h2 { max-width: 12ch; color: inherit; font-size: clamp(35px, 3.8vw, 54px); }
.tpg-lifestyle__content > p:not(.tpg-eyebrow) { max-width: 40ch; margin-top: 28px !important; color: color-mix(in oklch, var(--tpg-porcelain) 68%, transparent); }
.tpg-lifestyle__content .tpg-text-link { align-self: flex-start; margin-top: 38px; }

/* Social proof */
.tpg-social-proof { background: var(--tpg-porcelain); }

.tpg-social-proof__layout {
	display: grid;
	grid-template-columns: 1.1fr 1.9fr;
	align-items: end;
	gap: 56px;
}

.tpg-social-proof__heading h2 { max-width: 11ch; }
.tpg-social-proof__list { border-top: 1px solid var(--tpg-nero); }

.tpg-social-proof__row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--tpg-concrete);
}

.tpg-social-proof__row > span { color: var(--tpg-muted); font: 12px/1.4 var(--tpg-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tpg-social-proof__row p { color: var(--tpg-muted); }

/* Dogs / Cats */
.tpg-pet-choice { background: var(--tpg-oat); }

.tpg-pet-choice__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.tpg-home .tpg-pet-card {
	position: relative;
	display: block;
	min-height: 650px;
	overflow: hidden;
	background: var(--tpg-concrete);
	color: var(--tpg-porcelain);
	text-decoration: none;
}

.tpg-pet-card::after {
	position: absolute;
	inset: 0;
	background: color-mix(in oklch, var(--tpg-nero) 18%, transparent);
	content: "";
}

.tpg-pet-card__image { transition: transform 680ms var(--tpg-ease), object-position 680ms var(--tpg-ease); }
.tpg-pet-card--dogs .tpg-pet-card__image { object-position: 31% 56%; }
.tpg-pet-card--cats .tpg-pet-card__image { object-position: 34% 68%; }

.tpg-pet-card__overlay {
	position: absolute;
	z-index: 2;
	inset: auto 28px 28px;
	display: flex;
	padding: 18px 20px;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	background: var(--tpg-nero);
	transition: transform var(--tpg-ui) var(--tpg-ease), background var(--tpg-ui) var(--tpg-ease);
}

.tpg-pet-card__title {
	max-width: 8ch;
	min-width: 0;
	font-family: var(--tpg-font-serif);
	font-size: clamp(38px, 4.5vw, 68px);
	line-height: 0.98;
	hyphens: none;
	overflow-wrap: normal;
	text-wrap: balance;
	word-break: keep-all;
}
.tpg-pet-card .tpg-text-link { flex: 0 0 auto; }

.tpg-pet-card:hover .tpg-pet-card__image,
.tpg-pet-card:focus-visible .tpg-pet-card__image { transform: scale(1.035) translate3d(3px, -2px, 0); }

.tpg-pet-card:hover .tpg-pet-card__overlay,
.tpg-pet-card:focus-visible .tpg-pet-card__overlay {
	background: color-mix(in oklch, var(--tpg-nero) 92%, var(--tpg-walnut));
	transform: translateY(-3px);
}

/* FAQ */
.tpg-faq { background: var(--tpg-porcelain); }

.tpg-faq__layout {
	display: grid;
	grid-template-columns: 0.85fr 1.45fr;
	gap: 104px;
}

.tpg-faq__header h2 { max-width: 10ch; }
.tpg-faq__items { border-top: 1px solid var(--tpg-nero); }
.tpg-faq__item { border-bottom: 1px solid var(--tpg-concrete); }

.tpg-faq__item summary {
	display: grid;
	min-height: 74px;
	padding: 0;
	align-items: center;
	grid-template-columns: 1fr auto;
	gap: 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--tpg-font-serif);
	font-size: 20px;
	transition: color var(--tpg-micro) var(--tpg-ease);
}

.tpg-faq__item summary::-webkit-details-marker { display: none; }
.tpg-faq__item summary::after { content: "+"; font-family: var(--tpg-font-sans); font-size: 22px; transition: transform var(--tpg-ui) var(--tpg-ease); }
.tpg-faq__item summary:hover { color: var(--tpg-walnut); }
.tpg-faq__item[open] summary::after { transform: rotate(45deg); }
.tpg-faq__answer { animation: tpg-faq-in var(--tpg-ui) var(--tpg-ease) both; }
.tpg-faq__answer p { padding: 0 48px 24px 0; color: var(--tpg-muted); }

@keyframes tpg-faq-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
	.tpg-home-hero__inner { grid-template-columns: 50% 50%; }
	.tpg-home-hero__copy { padding-left: var(--tpg-gutter); }
	.tpg-categories__grid { grid-template-columns: 1.2fr 1fr; grid-template-rows: repeat(3, 250px); }
	.tpg-category-card:first-child { grid-row: 1 / 3; }
	.tpg-new-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tpg-new-products--page .tpg-new-products__header { grid-template-columns: 1fr; gap: 22px; }
	.tpg-lifestyle__content { padding-inline: 48px; }
}

@media (max-width: 920px) {
	.tpg-home-hero__inner,
	.tpg-values__layout,
	.tpg-social-proof__layout,
	.tpg-faq__layout { grid-template-columns: 1fr; }

	.tpg-home-hero__copy { min-height: 650px; padding: 130px var(--tpg-gutter) 70px; }
	.tpg-home-hero__media { min-height: 520px; }
	.tpg-home-hero__note { margin-top: 54px !important; }
	.tpg-value { grid-template-columns: 42px 1fr; }
	.tpg-value p { grid-column: 2; }
	.tpg-categories__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 420px repeat(2, 250px); }
	.tpg-category-card:first-child { grid-column: 1 / 3; grid-row: auto; }
	.tpg-lifestyle__layout { grid-template-columns: 1fr; }
	.tpg-lifestyle__media { min-height: 620px; }
	.tpg-lifestyle__content { min-height: 560px; }
	.tpg-social-proof__layout,
	.tpg-faq__layout { gap: 48px; }
	.tpg-pet-card { min-height: 560px; }
	.tpg-pet-card--dogs .tpg-pet-card__image { object-position: 29% 55%; }
	.tpg-pet-card--cats .tpg-pet-card__image { object-position: 32% 66%; }
}

@media (max-width: 620px) {
	.tpg-home { --tpg-home-h1: clamp(46px, 15vw, 64px); }
	.tpg-home .tpg-section { padding-block: 72px; }
	.tpg-section-header { align-items: start; flex-direction: column; }
	.tpg-home-hero__copy { min-height: 610px; padding-top: 108px; }
	.tpg-home-hero__media { min-height: 420px; }
	.tpg-categories__grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.tpg-category-card,
	.tpg-category-card:first-child { grid-column: auto; grid-row: auto; min-height: 400px; }
	.tpg-new-products__grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
	.tpg-new-products--page .tpg-new-products__header { margin-bottom: 40px; }
	.tpg-new-card__action { opacity: 1; transform: none; }
	.tpg-lifestyle__media { min-height: 470px; }
	.tpg-lifestyle__content { min-height: 520px; padding: 64px 28px; }
	.tpg-social-proof__row { grid-template-columns: 1fr; gap: 10px; }
	.tpg-pet-choice__grid { grid-template-columns: 1fr; }
	.tpg-pet-card { min-height: 540px; }
	.tpg-pet-card__overlay { inset: auto 22px 24px; }
	.tpg-pet-card--dogs .tpg-pet-card__image { object-position: 27% 54%; }
	.tpg-pet-card--cats .tpg-pet-card__image { object-position: 30% 65%; }
}

@media (prefers-reduced-motion: reduce) {
	.tpg-home-hero__media,
	.tpg-home-hero__media img,
	.tpg-home-hero__copy > *,
	.tpg-home-hero__copy .tpg-eyebrow,
	.tpg-home-hero__copy h1,
	.tpg-home-hero__lead,
	.tpg-home-hero__actions,
	.tpg-home-hero__note,
	.tpg-lifestyle__content {
		opacity: 1 !important;
		clip-path: none !important;
		transform: none !important;
	}

	.tpg-lifestyle__image { transform: none !important; }
}
