/* -----------------------------------------------------------
   AnimaLife — design tokens (from Figma)
----------------------------------------------------------- */
:root {
	--c-cream: #fffcef;
	--c-cream-btn: #f9f4df;
	--c-dark-green: #0a3024;
	--c-forest: #1b4838;
	--c-deep-green: #062d20;
	--c-badge-green: #5ab35c;
	--c-black-100: #00171f;
	--c-gray-60: #667479;
	--c-purple: #565194;
	--c-white: #ffffff;
	--c-white-off: #fdfdfd;

	--font-display: 'Poppins', sans-serif;
	--font-body: 'Poppins', sans-serif;
	--font-alt: 'Inter', sans-serif;

	--shadow-card: 0px 4px 14px rgba(0, 0, 0, 0.08);
	--shadow-nav: 0px 8px 6px rgba(36, 39, 44, 0.15);

	--container-width: 1319px;
}

/* -----------------------------------------------------------
   Reset & base
----------------------------------------------------------- */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	cursor: url('../img/cursor-paw.png') 20 20, auto;
}

body {
	margin: 0;
	background: var(--c-cream);
	color: var(--c-dark-green);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	cursor: inherit;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

button,
input,
textarea,
select {
	font-family: inherit;
	cursor: inherit;
}

/* -----------------------------------------------------------
   Custom animated cursor (JS-driven; assets/js/cursor.js)
   Falls back to the plain paw cursor above when JS is disabled.
----------------------------------------------------------- */
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor * {
	cursor: none !important;
}

.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 999999;
	display: none;
}

html.has-custom-cursor .custom-cursor {
	display: block;
}

.custom-cursor__icon {
	position: absolute;
	top: -20px;
	left: -20px;
	width: 40px;
	height: 40px;
	background-image: url('../img/cursor-paw.png');
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(1) rotate(0deg);
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-cursor--click .custom-cursor__icon {
	transform: scale(0.62) rotate(-16deg);
	transition: transform 0.08s ease-out;
}

.section-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

.weight-bold {
	font-weight: 700;
}

.weight-regular {
	font-weight: 400;
}

/* -----------------------------------------------------------
   Buttons
----------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	padding: 12px 28px;
	border-radius: 57px;
	border: none;
	white-space: nowrap;
}

.btn--lg {
	height: 54px;
	font-size: 16px;
}

.btn--cream {
	background: var(--c-cream-btn);
	color: var(--c-dark-green);
}

.btn--outline-cream {
	background: transparent;
	color: var(--c-white);
	border: 1.5px solid var(--c-cream-btn);
	font-family: var(--font-alt);
	font-weight: 500;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 18px;
	color: var(--c-dark-green);
}

.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0;
}

.filter-btn {
	border-radius: 40px;
	padding: 12px 28px;
	font-weight: 700;
	font-size: 16px;
	background: transparent;
	border: 1.5px solid var(--c-dark-green);
	color: var(--c-dark-green);
}

.filter-btn--active {
	background: var(--c-forest);
	border-color: var(--c-forest);
	color: var(--c-white-off);
}

.filter-btn--purple {
	border-color: var(--c-purple);
	color: var(--c-purple);
}

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	padding: 34px 0;
}

/* Pages that render the header as a transparent overlay on top of a hero
   photo (home, discover, academy archive, shop archive) rely on that
   photo's own crop keeping clear of the logo/nav/hamburger for contrast —
   which breaks at mobile widths where the same photo crops very
   differently. A subtle scrim on the header itself guarantees legibility
   regardless of what's rendered behind it, at any viewport size. */
body.is-front-page .site-header {
	background: linear-gradient(180deg, rgba(2, 16, 11, 0.45) 0%, rgba(2, 16, 11, 0) 100%);
}

.site-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	gap: 40px;
}

.site-logo img {
	height: 38px;
	width: auto;
}

.primary-navigation {
	flex: 1;
}

.primary-navigation ul {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.primary-navigation a {
	font-weight: 500;
	font-size: 16px;
	color: var(--c-white);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header-cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--c-white);
	flex-shrink: 0;
}

.header-cart__count {
	position: absolute;
	top: -2px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--c-badge-green);
	color: var(--c-white);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}

.header-cart__count:empty {
	display: none;
}

.language-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	color: var(--c-white);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
}

/* Hidden on desktop — the nav renders inline via .primary-navigation.
   Only shown at the ≤900px breakpoint below, where the nav becomes a
   collapsible dropdown instead. */
.mobile-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	color: var(--c-white);
	cursor: pointer;
	flex-shrink: 0;
}

.mobile-nav-toggle__icon-close {
	display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon-open {
	display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon-close {
	display: block;
}

body:not(.is-front-page) .site-header {
	position: relative;
	background: var(--c-dark-green);
}

/* -----------------------------------------------------------
   Hero
----------------------------------------------------------- */
.hero {
	position: relative;
	min-height: 809px;
	background-color: var(--c-dark-green);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hero--video {
	height: 100vh;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(2, 16, 11, 0.75) 0%, rgba(2, 16, 11, 0.45) 50%, rgba(2, 16, 11, 0.75) 100%);
}

.hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
	padding: 160px 24px 80px;
	/* Needed so .hero__rotator-track (whose items are all absolutely
	   positioned, i.e. removed from flow) has a real, non-circular width
	   to size against — without an explicit width here, this flex item's
	   shrink-to-fit sizing has no in-flow content left to measure from
	   and collapses toward 0. max-width still caps the result the same
	   as before; width:100% only supplies the missing "definite width"
	   input the flex sizing algorithm needs. */
	width: 100%;
	max-width: 670px;
}

/* Rotating headline: "Because Every Bond Deserves the Best." cycles with
   "Care You Give. Science We Perfect." and "Energy You Can See." — each
   phrase slides up and fades out while the next slides up and fades in
   (assets/js/main.js, [data-hero-rotator]). The track reserves a fixed
   2-line-tall box (matching the base font's line-height) so switching
   between phrases of different lengths never shifts the button below it;
   items are absolutely positioned within that box and centered so a
   shorter phrase like "Energy You Can See." sits centered rather than
   top-aligned. */
/* No explicit width here — .hero__content is a flex column with
   align-items:center (shrink-to-fit), so it sizes itself from its
   widest child capped at its own max-width:670px, same as the plain h1
   this replaces. Giving this element width:100% instead created a
   circular sizing dependency (the parent's shrink-to-fit width can't be
   measured from a 100%-wide child), collapsing the whole hero text down
   to the width of the button below it. Block-level width:auto simply
   fills whatever width the parent resolves to, which is the correct,
   non-circular way to get the same result. */
.hero__rotator {
	/* .hero__content is a column flexbox with align-items:center, so a
	   flex item normally shrink-to-fits its own content's width instead
	   of filling the container's cross axis — fine for plain text (its
	   line-length provides that signal), but this element's real content
	   is now absolutely positioned inside .hero__rotator-track, leaving
	   nothing in normal flow to shrink-to-fit from. align-self:stretch
	   makes it fill the parent's resolved width directly instead
	   (independent of the button below, which keeps its own
	   shrink-to-fit centering). */
	align-self: stretch;
	margin: 0;
}

.hero__rotator-track {
	position: relative;
	display: block;
	min-height: 132px;
	overflow: hidden;
}

/* No text-align/flex-centering here — the item inherits text-align from
   .hero__content (center on desktop, left on mobile), same as the plain
   h1 it replaces. A shorter phrase (e.g. "Energy You Can See.") just
   leaves blank space at the bottom of the reserved track instead of
   re-centering vertically, so left/center alignment stays pixel-identical
   to before at every breakpoint. */
.hero__rotator-item {
	position: absolute;
	inset: 0;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 60px;
	line-height: 66px;
	color: var(--c-cream);
	text-transform: capitalize;
	opacity: 0;
	transform: translateY(28px);
	transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s ease;
	pointer-events: none;
}

.hero__rotator-item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.hero__rotator-item.is-leaving {
	opacity: 0;
	transform: translateY(-28px);
}

/* Applied only for the instant, transition-free snap back to the "waiting
   below" position after a phrase finishes exiting — without this it would
   visibly animate back down before its next turn. */
.hero__rotator-item.is-resetting {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.hero__rotator-item {
		transition: opacity 0.3s ease;
		transform: none;
	}

	.hero__rotator-item.is-leaving {
		transform: none;
	}
}

/* -----------------------------------------------------------
   Section headings
----------------------------------------------------------- */
.products,
.pet-match,
.find-us,
.gallery,
.academy {
	padding: 80px 0;
}

.section-heading-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.products h2,
.pet-match h2,
.find-us h2,
.gallery h2,
.academy h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: var(--c-dark-green);
	text-transform: capitalize;
	margin: 0 0 8px;
}

/* -----------------------------------------------------------
   Horizontal card rows / carousels
----------------------------------------------------------- */
.card-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.card-row__track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 4px 4px 16px;
	flex: 1;
	scrollbar-width: thin;
}

.card-row__track > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

.carousel-arrow {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--c-white);
	border: none;
	box-shadow: var(--shadow-nav);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Products/pet-match arrows only exist for the mobile carousels (Figma
   mobile home, nodes 1107:541 and 1061:2959) — desktop already scrolls
   fine via drag/trackpad without them. Shown again at 640px below. */
.carousel-arrow--mobile-only {
	display: none;
}

/* -----------------------------------------------------------
   Product cards
----------------------------------------------------------- */
.product-card {
	position: relative;
	display: block;
	width: 280px;
	background: var(--c-white-off);
	border-radius: 12px;
	box-shadow: var(--shadow-card);
	padding: 8px;
	overflow: hidden;
}

.product-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--c-white-off);
}

/* object-fit:contain, not cover — dog product photos are wide/landscape
   (~2560x1700+) so a square cover-crop barely touches them, but cat
   product photos are all tall/portrait (1200x1800, a 2:3 ratio), so the
   same square cover-crop was cutting hard into their top and bottom,
   chopping off the bag's logo and weight label and reading as "zoomed
   in". contain shows the full photo uncropped for every product
   regardless of its source aspect ratio, at the cost of some empty
   space around portrait photos — a safe, universal fix that doesn't
   depend on any single image's framing. */
.product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Sits as a sibling of .product-card__image (not nested inside it) so it
   can cover the card's full top edge-to-edge on hover, ignoring the 8px
   card padding that frames the default image. */
.product-card__hover-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	z-index: 1;
	opacity: 0;
	transform: scale(0.92);
	transform-origin: center;
	transition: opacity 0.3s ease, transform 0.35s ease;
}

.product-card:hover .product-card__hover-image {
	opacity: 1;
	transform: scale(1);
}

.product-card__body {
	padding: 20px 8px 12px;
}

.product-card__body h3 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: var(--c-black-100);
	margin: 0 0 4px;
}

.product-card__meta {
	display: flex;
	gap: 12px;
	font-size: 12px;
	line-height: 18px;
	color: var(--c-gray-60);
	margin: 0 0 4px;
}

.product-card__meta strong {
	font-weight: 700;
}

.product-card__price {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: var(--c-black-100);
	margin: 0;
}

/* -----------------------------------------------------------
   About section
----------------------------------------------------------- */
.about {
	position: relative;
	min-height: 767px;
	background-color: var(--c-forest);
	background-image: var(--about-bg-desktop);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.about__overlay {
	position: absolute;
	inset: 0;
	background: rgba(27, 72, 56, 0.2);
}

.about__shape {
	position: absolute;
	z-index: 1;
	left: -62.53%;
	top: -4.07%;
	width: 105.65%;
	aspect-ratio: 1523.43 / 1468.02;
	transform: rotate(14.98deg);
	pointer-events: none;
}

/* Pre-rendered crop of the same blob (a straight get_screenshot export of
   Figma node 1032:14285, cream keyed out to transparent) — the mobile
   frame uses a different slice of the shape than desktop/tablet do, not
   reproducible by reusing the desktop SVG's rotate/position values. Only
   shown at the ≤640px breakpoint below. */
.about__shape--mobile {
	display: none;
}

.about__content {
	position: absolute;
	z-index: 2;
	top: 36.5%;
	left: 7.9%;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about__content .btn {
	margin-top: 38px;
}

.about__content h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 52px;
	line-height: 61px;
	color: var(--c-white);
	text-transform: capitalize;
	margin: 0;
}

.about__content p {
	font-weight: 500;
	font-size: 16px;
	color: var(--c-white);
	margin: 14px 0 0;
	max-width: 409px;
}

/* -----------------------------------------------------------
   Pet match cards
----------------------------------------------------------- */
.pet-match__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 92%;
	margin: 56px auto 0;
}

.pet-type-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 288 / 367;
	background-color: #ebe5cb;
	transition: transform 0.3s ease;
}

.pet-type-card:hover {
	transform: scale(1.05);
	z-index: 2;
}

.pet-type-card__blob {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform-origin: center;
	transition: transform 0.35s ease;
}

.pet-type-card__blob svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pet-type-card__blob svg path {
	transition: fill 0.3s ease;
}

.pet-type-card:hover .pet-type-card__blob {
	transform: scale(1.1);
}

/* Blobs sit at a light tint of their real Figma color by default and
   deepen to that real color on hover (node 551:519 and siblings). Cat
   is purple (#565194); Small/Medium/Giant share the same dark green
   (#0A3D2C) — the light shades below are each a ~26% mix of that real
   color into white. */
.pet-type-card--cat .pet-type-card__blob {
	--pet-blob-color: #d3d2e3;
}

.pet-type-card--cat:hover .pet-type-card__blob {
	--pet-blob-color: #565194;
}

.pet-type-card--small .pet-type-card__blob,
.pet-type-card--medium .pet-type-card__blob,
.pet-type-card--giant .pet-type-card__blob {
	--pet-blob-color: #bfcdc8;
}

.pet-type-card--small:hover .pet-type-card__blob,
.pet-type-card--medium:hover .pet-type-card__blob,
.pet-type-card--giant:hover .pet-type-card__blob {
	--pet-blob-color: #0a3d2c;
}

.pet-type-card__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: none;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.pet-type-card:hover .pet-type-card__photo {
	transform: scale(1.08);
}

/* Each card's photo is cropped differently in the source file (Figma nodes
   562:3157, 355:1617, 845:451, 355:1618). Width/height are each set to
   exactly (100% - left) / (100% - top) so the box's right/bottom edges
   stay flush with the card while top/left match Figma's real inset —
   explicit sizes are required here because absolutely positioned <img>
   elements fall back to their (huge) intrinsic pixel size, not a stretched
   box, when width/height are left auto. */
.pet-type-card--cat .pet-type-card__photo {
	top: 12%;
	left: 12%;
	width: 108%;
	height: 108%;
	object-position: 50% 50%;
}

.pet-type-card--small .pet-type-card__photo {
	top: 12%;
	left: 7%;
	width: 108%;
	height: 108%;
	object-position: 50% 50%;
}

.pet-type-card--giant .pet-type-card__photo {
	top: 11.9%;
	left: 4.3%;
	width: 95.7%;
	height: 88.1%;
	object-position: 50% 0%;
}

/* The Medium & Large photo (845:451) is a solid-background photo, not a
   transparent cutout, but is cropped the same cover-style way in Figma —
   only its bottom-right corner is rounded there, since the photo's own
   cream backdrop already blends into the blob on the other 3 sides. */
.pet-type-card--medium .pet-type-card__photo {
	top: 12%;
	left: 12%;
	width: 108%;
	height: 108%;
	object-position: 50% 50%;
	border-radius: 0 0 10px 0;
}

.pet-type-card__label {
	position: absolute;
	z-index: 1;
	top: 24px;
	left: 24px;
	font-weight: 700;
	font-size: 25px;
	line-height: 28px;
	color: var(--c-dark-green);
	text-transform: capitalize;
	max-width: 55%;
}

/* -----------------------------------------------------------
   Where to find us — retailer tiles
----------------------------------------------------------- */
.retailer-carousel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}

.retailer-grid {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, 185px);
	grid-auto-columns: 185px;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.retailer-tile {
	scroll-snap-align: start;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
	cursor: inherit;
	box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
	transition: transform 0.15s ease;
}

.retailer-tile:hover,
.retailer-tile:focus-visible {
	transform: translateY(-3px);
}

.retailer-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
}

@media (max-width: 900px) {
	.retailer-grid {
		grid-template-rows: repeat(2, 150px);
		grid-auto-columns: 150px;
	}
}

@media (max-width: 560px) {
	.retailer-grid {
		grid-template-rows: repeat(1, 140px);
		grid-auto-columns: 140px;
	}
}

/* -----------------------------------------------------------
   Store locator modal (click a retailer logo in "Where to find us")
----------------------------------------------------------- */
.store-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.store-modal[hidden] {
	display: none;
}

.store-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 32, 23, 0.9);
	border: none;
	cursor: inherit;
}

.store-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 904px;
	background: var(--c-cream);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.store-modal__header {
	background: #efe9ce;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 32px;
}

.store-modal__logo {
	width: 84px;
	height: 84px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-white);
}

.store-modal__logo img {
	max-width: 78%;
	max-height: 78%;
	object-fit: contain;
}

.store-modal__close {
	background: none;
	border: none;
	cursor: inherit;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.store-modal__body {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	padding: 32px;
}

/* An online-only store (no physical branch) has no pin to show, so the
   map column is dropped entirely rather than displaying an unrelated
   generic map. */
.store-modal__body.is-online-only {
	grid-template-columns: 1fr;
}

.store-modal__body.is-online-only .store-modal__col--stores {
	display: none;
}

.store-modal__col h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 22px;
	color: #134635;
	margin: 0 0 16px;
}

.store-modal__col a {
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: #134635;
	margin-bottom: 12px;
}

.store-modal__col a span {
	margin-left: 2px;
}

.store-modal__map-card {
	position: relative;
	background: #f5f0e6;
	border-radius: 10px;
	overflow: hidden;
	/* Matches Figma's popup proportions (904x459, node 616:4654): a 133px
	   header plus this 262px content area (inside the body's 32px padding)
	   adds up to the full 459px dialog height. */
	min-height: 262px;
}

.store-modal__locations {
	list-style: none;
	margin: 0;
	padding: 0;
}

.store-modal__locations li {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
}

/* Two distinct click targets, styled to read as one phrase ("Maadi >")
   while staying separately clickable: the name previews the pin on the
   map in place, the arrow is a real link out to Maps / the website. */
.store-modal__loc-label {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	color: #134635;
}

.store-modal__loc-arrow {
	position: relative;
	/* The label text's line-box sits a little higher than its visual
	   center (normal font metrics), so flex align-items:center on the <li>
	   left the circle looking slightly too high next to it — nudged down
	   to match the text optically. */
	top: 2px;
	display: inline-block;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(19, 70, 53, 0.08);
	color: #134635;
}

/* Centered with absolute + translate(-50%,-50%) rather than flex —
   pixel-exact regardless of the SVG's own intrinsic box, which flex
   centering (even with align/justify-items:center) kept rendering a
   hair off thanks to the icon's internal metrics. */
.store-modal__loc-arrow-icon {
	position: absolute;
	top: 50%;
	left: 50%;
}

.store-modal__loc-arrow:hover,
.store-modal__loc-arrow:focus-visible {
	background: rgba(19, 70, 53, 0.18);
}

.store-modal__locations li.is-active .store-modal__loc-label {
	font-weight: 700;
	text-decoration: underline;
}

.store-modal__map {
	/* Absolutely positioned to fill .store-modal__map-card exactly —
	   percentage height on a flex child only resolves against a *definite*
	   container height, but the card's height comes from min-height (a
	   content-driven, indefinite size), so height:100% silently fell back
	   to the iframe's bare default and left empty space below the map. */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 700px) {
	.store-modal__body {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   "Available at these stores" modal (Figma node 554:8593),
   opened from the product page's Shop button. Picking a row hands off
   to .store-modal above via the shared [data-store-trigger] mechanism.
----------------------------------------------------------- */
.shop-stores-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.shop-stores-modal[hidden] {
	display: none;
}

.shop-stores-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 32, 23, 0.9);
	border: none;
	cursor: inherit;
}

.shop-stores-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 600px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: var(--c-cream);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.shop-stores-modal__header {
	flex-shrink: 0;
	background: #efe9ce;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 32px;
}

.shop-stores-modal__header h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: #134635;
	margin: 0 0 6px;
}

.shop-stores-modal__header p {
	font-family: var(--font-body);
	font-size: 15px;
	color: #626262;
	margin: 0;
}

.shop-stores-modal__close {
	background: none;
	border: none;
	cursor: inherit;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.shop-stores-modal__list {
	overflow-y: auto;
	padding: 8px 16px;
}

.shop-stores-modal__row {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 12px 8px;
	background: none;
	border: none;
	border-bottom: 1px solid #ede7d0;
	text-align: left;
	cursor: inherit;
}

.shop-stores-modal__row:last-child {
	border-bottom: none;
}

.shop-stores-modal__row-logo {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.shop-stores-modal__row-logo img {
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
}

.shop-stores-modal__row-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.shop-stores-modal__row-name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: #134635;
}

.shop-stores-modal__row-hint {
	font-family: var(--font-body);
	font-size: 13px;
	color: #89a08e;
}

.shop-stores-modal__row-buy {
	flex-shrink: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	color: #134635;
}

/* -----------------------------------------------------------
   Gallery
----------------------------------------------------------- */
.gallery__main {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f0e0;
	margin: 32px 0 20px;
	max-height: 454px;
}

.gallery__main img {
	width: 100%;
	height: 100%;
	max-height: 454px;
	object-fit: cover;
}

.gallery-thumb {
	width: 128px;
	height: 128px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f0e0;
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery-thumb.is-active {
	border-color: var(--c-dark-green);
}

/* -----------------------------------------------------------
   Academy / blog cards
----------------------------------------------------------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.blog-card {
	background: var(--c-white);
	border-radius: 12px;
	box-shadow: var(--shadow-card);
	padding: 8px;
}

.blog-card__image {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 364 / 240;
	background: #000;
}

.blog-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	padding: 16px 8px 20px;
}

.blog-card__badge {
	display: inline-block;
	background: var(--c-badge-green);
	color: var(--c-white-off);
	font-size: 10px;
	line-height: 16px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 28px;
	margin-bottom: 12px;
}

.blog-card__body h3 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: var(--c-black-100);
	margin: 0 0 8px;
}

.blog-card__body p {
	font-size: 14px;
	line-height: 20px;
	color: var(--c-dark-green);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.site-footer {
	position: relative;
	background: var(--c-deep-green);
	color: var(--c-white);
	overflow: hidden;
	padding: 72px 0 40px;
}

/* Decorative background blobs (Figma node 562:3376) — same shape, three
   copies rotated/positioned to match the reference 1440px-wide frame. */
.site-footer__shape {
	position: absolute;
	z-index: 0;
	width: 579px;
	height: 559px;
	pointer-events: none;
}

.site-footer__shape--a {
	left: 1450px;
	bottom: -359px;
	transform: rotate(-39.1deg);
}

.site-footer__shape--b {
	left: 920px;
	top: -365px;
	transform: rotate(-165deg);
}

.site-footer__shape--c {
	left: -184px;
	bottom: -375px;
	transform: rotate(27.32deg);
}

.site-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 80px;
	row-gap: 48px;
}

.footer-col h3 {
	font-family: var(--font-alt);
	font-weight: 700;
	margin: 0 0 24px;
}

.footer-contact h3 {
	font-size: 36px;
	line-height: 40px;
}

.footer-cta h3 {
	font-size: 24px;
	line-height: 28px;
}

.footer-cta p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	margin: 0 0 32px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 21px;
}

.contact-form__row {
	display: flex;
	gap: 20px;
}

.contact-form__field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-form label {
	font-family: var(--font-alt);
	font-weight: 500;
	font-size: 14px;
}

.contact-form input,
.contact-form textarea {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 8px;
	padding: 15px 16px;
	color: var(--c-white);
	font-family: var(--font-alt);
	font-size: 16px;
}

.contact-form textarea {
	resize: vertical;
	min-height: 128px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #d1d5db;
}

.footer-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 32px;
}

.footer-address {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-style: normal;
	font-family: var(--font-body);
	font-size: 18px;
}

.footer-address__row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.footer-address__icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 2px;
}

.footer-address a:hover {
	text-decoration: underline;
}

.footer-navigation ul {
	display: flex;
	gap: 60px;
	flex-wrap: wrap;
	font-weight: 500;
	font-size: 16px;
}

.footer-social {
	display: flex;
	gap: 40px;
}

.site-footer__copyright {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	margin: 0;
}

.footer-legal {
	display: flex;
	gap: 40px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
}

.footer-bottom-row {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.footer-bottom-row:first-of-type {
	margin-top: 16px;
}

/* -----------------------------------------------------------
   WhatsApp floating button (site-wide, node 965:501)
----------------------------------------------------------- */
.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.whatsapp-float:hover {
	transform: scale(1.08);
}

.whatsapp-float img {
	display: block;
	width: 100%;
	height: 100%;
}

/* -----------------------------------------------------------
   Responsive
----------------------------------------------------------- */
@media (max-width: 1100px) {
	.pet-match__grid,
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* Between the point where the full-width desktop nav stops fitting on one
   line and the 900px hamburger cutover below, there was no intermediate
   step — the logo/nav/actions row has a fixed width budget (40px gaps,
   40px padding, 32px item gaps, 16px labels), so any viewport narrower
   than a large desktop (but still well above 900px) forced the last nav
   item onto a second line via the ul's flex-wrap. Tightening spacing and
   type size here reclaims enough width to keep it on one line all the
   way down to the hamburger breakpoint. */
@media (max-width: 1440px) {
	.site-header__inner {
		gap: 20px;
		padding: 0 24px;
	}

	.primary-navigation ul {
		gap: 16px;
	}

	.primary-navigation a {
		font-size: 14px;
	}

	.site-header__actions {
		gap: 12px;
	}
}

@media (max-width: 1180px) {
	.site-header__inner {
		gap: 12px;
		padding: 0 16px;
	}

	.primary-navigation ul {
		gap: 10px;
	}

	.primary-navigation a {
		font-size: 13px;
	}

	.language-switch span {
		display: none;
	}
}

@media (max-width: 1000px) {
	.site-header__inner {
		gap: 8px;
		padding: 0 12px;
	}

	.primary-navigation ul {
		gap: 7px;
	}

	.primary-navigation a {
		font-size: 12px;
	}

	.site-header__actions {
		gap: 8px;
	}
}

@media (max-width: 900px) {
	.hero__rotator-track {
		min-height: 96px;
	}

	.hero__rotator-item {
		font-size: 42px;
		line-height: 48px;
	}

	.about__content h2 {
		font-size: 36px;
		line-height: 42px;
	}

	.about {
		display: flex;
		align-items: center;
	}

	.about__shape {
		left: -9%;
		top: auto;
		bottom: -13%;
		width: 62%;
		max-width: 720px;
		aspect-ratio: 1577.75 / 1520.37;
		transform: rotate(15deg);
	}

	.about__content {
		position: relative;
		top: auto;
		left: auto;
		padding: 40px 24px 40px 24px;
		max-width: 100%;
	}

	.about__content .btn {
		margin-top: 24px;
	}

	.about__content p {
		margin-top: 24px;
	}

	.mobile-nav-toggle {
		display: flex;
	}

	.site-header__inner {
		justify-content: space-between;
	}

	/* Academy page (Figma node 1025:7998): the mobile navbar is a flat
	   #062d20 bar, not the transparent-over-photo gradient scrim used on
	   other hero pages — its hero is a solid dark-green illustration
	   background (#0a3d2c), not a photo, so the gradient scrim just
	   showed as a mismatched, semi-transparent band instead. */
	body.page-template-page-academy-php .site-header {
		background: #062d20;
	}

	/* Right-side flyout panel (Figma node 1070:1965), not a full-width
	   dropdown — JS toggles .is-open on click. Fixed instead of absolute
	   so it covers the full viewport height below the navbar regardless
	   of page scroll position. */
	.primary-navigation {
		display: none;
		flex: none;
		position: fixed;
		/* Matches .site-header's own natural height (34px padding top/bottom
		   + ~38px logo) — the header keeps its normal transparent-overlay
		   height while the flyout is open, so the panel/backdrop start
		   below THAT, not the shorter Figma-spec 56px navbar. */
		top: 106px;
		right: 0;
		left: auto;
		bottom: 0;
		width: min(330px, 84%);
		background: #062d20;
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
		/* The shadow above has offset-y:0, so its 24px blur radius feathers
		   evenly above the panel's top edge too, bleeding onto the header
		   as a dark line. clip-path cuts the painted result (shadow
		   included) flush at the top while leaving the other three sides
		   extended so the left-edge shadow this is actually for still
		   shows in full. */
		clip-path: inset(0 -30px -30px -30px);
		overflow-y: auto;
		z-index: 30;
	}

	.primary-navigation.is-open {
		display: block;
	}

	/* Blurred scrim behind the flyout (node 1070:1965) — covers just the
	   gap to the left of the panel, stopping exactly where the panel
	   starts (same min(330px, 84%) the panel uses for its own width, so
	   the two never overlap). Some browsers visibly bleed a
	   backdrop-filter through onto opaque siblings stacked on top of it
	   when the boxes overlap, even at a lower z-index — giving the panel
	   its own non-overlapping region avoids that entirely.
	   Tint color is the underlying page content's own overlay fill in
	   Figma (#fffcef at 30% opacity, node 1070:1966) — a cream wash, not
	   the dark green used previously. */
	.nav-backdrop {
		display: none;
		position: fixed;
		top: 106px;
		left: 0;
		right: min(330px, 84%);
		bottom: 0;
		background: rgba(255, 252, 239, 0.3);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		z-index: 29;
	}

	.nav-backdrop.is-open {
		display: block;
	}

	/* The navbar is normally a transparent overlay on hero-banner pages —
	   force it solid (same #062d20 as the flyout panel/backdrop) while
	   the flyout is open so it doesn't disappear against the panel, but
	   keep its normal (~106px) height rather than shrinking it — the
	   panel/backdrop above are positioned to start below that same
	   natural height instead. JS-toggled class rather than :has() so this
	   doesn't silently no-op in browsers without :has() support. */
	body .site-header.nav-open {
		/* "body" prefix matches body.is-front-page .site-header's own
		   specificity tier (1 element + 2 classes each) so source order
		   — this rule comes later — decides it, instead of the front
		   page's gradient always winning outright on specificity. */
		background: #062d20;
		/* .nav-backdrop's box starts exactly at the header's bottom edge
		   (top:106px, no coordinate overlap) but its backdrop-filter blur
		   still visibly bleeds upward onto the header in this browser
		   because the header's z-index (20) sits below the backdrop's
		   (29) — the same compositor quirk that made the blur bleed
		   through the flyout panel before that got its own non-
		   overlapping box. Raising the header above the backdrop here
		   stops the bleed the same way. */
		z-index: 31;
	}

	.primary-navigation ul {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
		padding: 34px 20px 24px 38px;
	}

	.primary-navigation li {
		border-bottom: none;
	}

	.primary-navigation a {
		display: block;
		padding: 0;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 20px;
		line-height: 44px;
		color: var(--c-white);
	}
}

@media (max-width: 640px) {
	.section-inner {
		padding: 0 16px;
	}

	/* Figma nodes 1025:4241/4280/4283: the "Contact Us" heading uses the
	   site's display font (Poppins, standing in for Figma's "Co
	   Headline") rather than the .footer-col h3 default of Inter, and
	   all three inherit --c-white (#ffffff) unless overridden — Figma
	   actually specs a cream/muted-white, not pure white, for each. */
	.footer-contact h3 {
		font-family: var(--font-display);
		font-size: 24px;
		line-height: 32px;
		color: var(--c-cream);
	}

	.footer-cta h3 {
		font-family: var(--font-body);
		font-size: 18px;
		line-height: 28px;
		color: var(--c-cream);
	}

	.footer-cta p {
		font-size: 14px;
		line-height: 22.75px;
		color: rgba(255, 255, 255, 0.6);
	}

	/* Figma node 1025:4285: "View Products" / "Learn More" — a much more
	   compact outline pill than the shared .btn default, with a
	   translucent-white border instead of solid cream and Poppins
	   SemiBold instead of Inter Medium. Scoped to these two buttons
	   (.btn--outline-cream isn't used anywhere else) rather than the
	   shared component classes. */
	.footer-cta__buttons {
		gap: 12px;
	}

	.footer-cta__btn {
		gap: 6px;
		padding: 10.794px 16.794px;
		border-color: rgba(255, 255, 255, 0.3);
		font-family: var(--font-body);
		font-weight: 600;
		font-size: 12px;
		line-height: 16px;
		color: #ffffff;
	}

	/* Figma nodes 1025:4308/4316/4322 (text) + 1025:4304/4312/4319
	   (icons): smaller/dimmer type than desktop's 18px opaque white, plus
	   the location/email/phone icons — added via .footer-address__row in
	   the markup (footer.php) since desktop had no icons at all before. */
	.footer-address {
		gap: 12px;
		font-family: var(--font-body);
		font-size: 12px;
		line-height: 19.5px;
		color: rgba(255, 255, 255, 0.7);
	}

	/* Shop / About / Contact / FAQs menu hidden on mobile per explicit
	   request. */
	.footer-navigation {
		display: none;
	}

	/* Figma node 1025:7413: mobile social icon row uses a tighter 16px
	   gap than desktop's 40px. */
	.footer-social {
		gap: 16px;
	}

	/* Figma node 1025:4340: the copyright/legal row is a separate stacked,
	   centered block with its own top border on mobile — not the
	   desktop's inline space-between row. */
	.footer-bottom-row:last-of-type {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border-top: 0.794px solid rgba(255, 255, 255, 0.1);
		padding-top: 16.794px;
		padding-bottom: 16px;
	}

	.site-footer__copyright {
		font-family: var(--font-body);
		font-weight: 400;
		font-size: 12px;
		line-height: 16px;
		color: rgba(255, 255, 255, 0.3);
	}

	.footer-legal {
		gap: 16px;
		font-family: var(--font-body);
		font-weight: 400;
		font-size: 12px;
		line-height: 16px;
	}

	.footer-legal a {
		color: rgba(255, 255, 255, 0.3);
	}

	/* Figma node 1025:4243: Name/Email stay side-by-side on mobile (not
	   stacked) with smaller type/inputs than desktop. */
	.contact-form {
		gap: 12px;
	}

	.contact-form__row {
		flex-direction: row;
		gap: 12px;
	}

	.contact-form__field {
		gap: 6px;
		/* Flex items default to min-width:auto, which stopped these
		   fields from shrinking below the "Your phone number"-length
		   placeholder text's intrinsic width once Name/Email went back
		   to a side-by-side row — that forced the whole footer column
		   (and the page) to overflow horizontally on narrow phones. */
		min-width: 0;
	}

	.contact-form input,
	.contact-form textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.contact-form label {
		font-family: var(--font-body);
		font-size: 12px;
		color: rgba(255, 255, 255, 0.7);
	}

	.contact-form input,
	.contact-form textarea {
		font-family: var(--font-body);
		font-size: 14px;
		padding: 10px 12px;
	}

	.contact-form textarea {
		min-height: 100px;
	}

	.contact-form input::placeholder,
	.contact-form textarea::placeholder {
		color: rgba(255, 255, 255, 0.3);
	}

	.contact-form__submit {
		/* .contact-form is a flex column with the default align-items:
		   stretch, which was stretching this button to the column's full
		   width — Figma sizes it to its own content instead. */
		align-self: flex-start;
		padding: 10px 20px;
		font-family: var(--font-body);
		font-weight: 600;
		font-size: 14px;
		line-height: 20px;
		/* Figma node 1025:4269 uses its own exact colors here (#fffcef /
		   #062d20) rather than the shared .btn--cream component's
		   --c-cream-btn/--c-dark-green tokens (#f9f4df / #0a3024) — close
		   but not the same, so overridden just for this button instead of
		   touching those tokens sitewide. */
		background: #fffcef;
		color: #062d20;
	}

	.whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}

	.site-footer__shape {
		display: none;
	}

	/* ---------------------------------------------------------
	   Mobile home page (Figma node 1025:3833 "HP/mob")
	--------------------------------------------------------- */

	/* Hero — content bottom-aligned instead of centered, and the CTA
	   swaps to the mobile-only rust/orange fill (node 1025:3858). 100vh/
	   100dvh still ran taller than the visible screen on a real phone, so
	   backed off to 80% of the viewport instead of the full height. The
	   base rule's min-height:809px is a floor that "height" can never go
	   below (used height = max(height, min-height)) — 809px > 80vh on
	   most phones, so it was silently winning and had to be zeroed here. */
	.hero {
		align-items: flex-end;
		min-height: 0;
		height: 80vh;
		height: 80dvh;
	}

	.hero__content {
		align-items: center;
		text-align: left;
		max-width: 290px;
		margin: 0 auto;
		gap: 16px;
		padding: 0 0 32px;
	}

	.hero__rotator-track {
		min-height: 105px;
	}

	.hero__rotator-item {
		font-size: 28px;
		line-height: 35px;
	}

	.hero__content .btn {
		background: #a7552e;
		color: var(--c-white);
		height: auto;
		font-size: 14px;
		line-height: 20px;
		padding: 12px 24px;
	}

	/* Section rhythm + headings shrink uniformly across the stacked
	   home sections (Products / Pet match / Find us / Gallery / Academy). */
	.products,
	.pet-match,
	.find-us,
	.gallery,
	.academy {
		padding: 40px 0;
	}

	/* Pet match is taller top/bottom in Figma than its neighbors (48px vs
	   40px — node 1025:4106). */
	.pet-match {
		padding: 48px 0;
	}

	.products h2,
	.pet-match h2,
	.find-us h2,
	.gallery h2,
	.academy h2 {
		font-size: 18px;
		line-height: 28px;
		color: #0a3024;
	}

	/* Wraps "Our Products - Find your / pet's perfect match" onto the
	   same two lines as Figma (node 1025:3879, 222px-wide text box) via
	   natural reflow instead of a hardcoded <br> — robust across the
	   English/Arabic strings, which don't share a word-for-word split
	   point. */
	.products__heading {
		max-width: 222px;
	}

	.section-heading-row {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.link-arrow {
		flex-shrink: 0;
		font-size: 12px;
		font-weight: 600;
		gap: 4px;
	}

	/* "View All" text links (Products node 1025:3883, Gallery/Academy node
	   1025:4188) — plain arrow glyph instead of the desktop SVG icon, and
	   a slightly different green than .link-arrow's own default. */
	.section-view-all {
		color: #0a3d2c;
	}

	.link-arrow svg {
		width: 14px;
		height: 14px;
	}

	/* Not present in the mobile design — desktop-only refinement. Its own
	   32px margin was, incidentally, the only thing separating the
	   heading row from the card row below on mobile — hiding it collapsed
	   that gap to nothing, so it's restored explicitly below. */
	.filter-buttons {
		display: none;
	}

	/* node 1025:3888 — 20px from the heading row's own box to the first
	   card (Container:margin's top padding in Figma). */
	.products .card-row {
		margin-top: 20px;
	}

	/* Carousels go edge-to-edge with floating overlap arrows instead of
	   the desktop's inline flex arrows either side of the track. */
	.card-row,
	.retailer-carousel,
	.pet-match__carousel {
		position: relative;
	}

	.card-row .carousel-arrow,
	.retailer-carousel .carousel-arrow,
	.pet-match__carousel .carousel-arrow {
		position: absolute;
		top: 38%;
		z-index: 3;
		width: 36px;
		height: 36px;
	}

	.card-row .carousel-arrow--prev,
	.retailer-carousel .carousel-arrow--prev,
	.pet-match__carousel .carousel-arrow--prev {
		left: -6px;
	}

	.card-row .carousel-arrow--next,
	.retailer-carousel .carousel-arrow--next,
	.pet-match__carousel .carousel-arrow--next {
		right: -6px;
	}

	/* Hidden on desktop (see main stylesheet rules above); these are the
	   arrows added only for the mobile products/pet-match carousels. */
	.carousel-arrow--mobile-only {
		display: flex;
	}

	.product-card {
		width: calc(50% - 9px);
	}

	.pet-match__carousel {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.pet-match__grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		flex: 1;
		min-width: 0;
		max-width: none;
		margin: 33px 0 0;
		padding: 4px 4px 4px;
		scrollbar-width: thin;
	}

	/* One card fully visible + a peek of the next (192.11 / 345.845 wide
	   in the 394px mobile frame — node 1025:4106), not an even 2-up split. */
	.pet-match__grid > .pet-type-card {
		flex: 0 0 55.5%;
		scroll-snap-align: start;
	}

	.pet-type-card__label {
		font-size: 18px;
		line-height: 17px;
	}

	/* Where to find us — small icon tiles, 3 per view (node 1025:4131). */
	.retailer-grid {
		grid-template-rows: repeat(4, 72px);
		grid-auto-columns: 107px;
		gap: 12px;
	}

	.retailer-tile {
		border-radius: 12px;
		padding: 0 16px;
	}

	/* Gallery — no large hero photo on mobile; the thumbnail strip
	   becomes a scrollable 2-column grid instead (node 1025:4162). */
	.gallery__main {
		display: none;
	}

	.gallery-track {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(3, 166.9px);
		grid-auto-columns: calc(50% - 6px);
		gap: 12px;
		padding: 4px 4px 4px;
	}

	.gallery-thumb {
		width: 100%;
		height: 100%;
	}

	/* Academy — swipeable peek carousel, no arrows (node 1025:4181). Each
	   card is the full container width; the next card's edge peeking in
	   at the right is what signals "swipe" rather than a partial-width
	   card. */
	/* Bleeds past .section-inner's right padding (cancelled via negative
	   margin, restored via padding on the track itself) so the next card
	   peeks in from the edge like it does in Figma, instead of clipping
	   flush with the padded content box. */
	.blog-grid {
		display: flex;
		gap: 9px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		margin-top: 24px;
		margin-right: -16px;
		padding: 4px 16px 16px 4px;
		scrollbar-width: thin;
	}

	.blog-card {
		flex: 0 0 100%;
		scroll-snap-align: start;
		box-shadow: none;
		border: 0.8px solid rgba(237, 231, 208, 0.6);
		padding: 1px;
	}

	.blog-card__image {
		aspect-ratio: 345.845 / 199.994;
	}

	.blog-card__body {
		padding: 12px 16px 16px;
	}

	.blog-card__body h3 {
		font-size: 14px;
		line-height: 19.25px;
	}

	.blog-card__body p {
		font-size: 12px;
		line-height: 19.5px;
		color: var(--c-dark-green);
	}

	/* Why AnimaLife — rebuilt to match the mobile card (node 1025:4085)
	   exactly: fixed aspect-ratio card, full-width blob, absolutely
	   positioned text block at the same offsets as the design. The photo
	   itself swaps to a dedicated mobile crop (--about-bg-mobile, set
	   inline by PHP) instead of trying to reproduce Figma's crop via
	   background-position on the desktop photo — the desktop image's
	   pan/zoom doesn't translate to a matching crop at this aspect ratio
	   (same reasoning as the shop/discover hero mobile images). */
	.about {
		min-height: 0;
		aspect-ratio: 394 / 617.18;
		display: block;
		background-image: var(--about-bg-mobile);
		background-size: 105%;
		background-position: center 5%;
	}

	.about__shape {
		display: none;
	}

	.about__shape--mobile {
		display: block;
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		max-width: none;
		aspect-ratio: 394 / 300;
		object-fit: cover;
		transform: none;
		pointer-events: none;
	}

	.about__content {
		position: absolute;
		top: 57.5%;
		left: 6.1%;
		right: 6.1%;
		max-width: none;
	}

	.about__content h2 {
		font-size: 26px;
		line-height: 32.5px;
	}

	.about__content p {
		font-size: 14px;
		line-height: 22.75px;
		color: rgba(255, 255, 255, 0.7);
		margin-top: 16px;
		max-width: none;
	}

	.about__content .btn {
		margin-top: 24px;
		background: var(--c-cream-btn);
		color: var(--c-dark-green);
		height: auto;
		font-size: 14px;
		line-height: 20px;
		padding: 12px 24px;
	}
}

/* -----------------------------------------------------------
   WooCommerce notices (wc_print_notices output) — shared across the
   product, cart and checkout pages.
----------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
	display: none;
}

ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
}

ul.woocommerce-error li,
ul.woocommerce-message li,
ul.woocommerce-info li {
	margin: 0;
}

ul.woocommerce-error {
	background: #fdecea;
	color: #b3261e;
}

ul.woocommerce-message {
	background: #eaf6ec;
	color: #1b5e20;
}

ul.woocommerce-info {
	background: var(--c-cream-btn);
	color: var(--c-dark-green);
}

ul.woocommerce-message a.button.wc-forward,
ul.woocommerce-error a.button.wc-forward {
	display: inline-block;
	margin-inline-start: 12px;
	font-weight: 700;
	text-decoration: underline;
}

/* -----------------------------------------------------------
   Add to cart toast (shared by product page, shop grid, homepage)
----------------------------------------------------------- */
.cart-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1000;
	transform: translate(-50%, 16px);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	background: var(--c-dark-green);
	color: var(--c-white);
	border-radius: 999px;
	box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25);
	padding: 14px 20px;
	pointer-events: none;
}

.cart-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.cart-toast__content {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}

.cart-toast__link {
	font-weight: 700;
	color: var(--c-badge-green);
	text-decoration: underline;
}

/* Shared loading/added states for any add-to-cart trigger. */
.js-add-to-cart-form button.is-loading,
.js-add-to-cart-btn.is-loading {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 640px) {
	.cart-toast {
		left: 16px;
		right: 16px;
		bottom: 16px;
		transform: translateY(16px);
		width: auto;
	}

	.cart-toast.is-visible {
		transform: translateY(0);
	}

	.cart-toast__content {
		white-space: normal;
	}
}