/* -----------------------------------------------------------
   Shop (WooCommerce archive + single product)
----------------------------------------------------------- */

/* Hero — same aspect-ratio-locked pattern as the Academy hero, with the
   same 70px top padding baked into hero-bg.png for nav clearance. */
.shop-hero {
	position: relative;
	aspect-ratio: 1493 / 481;
	overflow: hidden;
	background-color: #0a3d2c;
}

.shop-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.shop-hero__inner {
	position: absolute;
	top: 40.54%;
	left: 5.43%;
	right: 10%;
	display: flex;
	gap: 1.67%;
}

/* The Cats hero (node 616:4581) shares the exact same text/bar geometry
   as the Dogs hero — only the background colour, blob artwork, photo and
   bar accent colour differ. */
.shop-hero--cats {
	background-color: #565194;
}

.shop-hero--cats .shop-hero__bar {
	background: #c3e76b;
}

.shop-hero__bar {
	width: 9px;
	flex-shrink: 0;
	background: #ba643b;
	border-radius: 4px;
	align-self: stretch;
}

.shop-hero__text h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 40px;
	line-height: 70px;
	color: #fffcef;
	margin: 0;
}

.shop-hero__text p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #fffcef;
	max-width: 420px;
	margin: 0;
}

/* Content */
.shop-content {
	background: var(--c-cream);
	padding: 32px 0 80px;
}

.shop-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 24px;
}

.shop-toolbar form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.shop-toolbar label {
	font-family: var(--font-body);
	font-size: 14px;
	color: #00171f;
}

.shop-toolbar select {
	font-family: var(--font-body);
	font-size: 14px;
	color: #00171f;
	background: var(--c-cream-btn);
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	cursor: pointer;
}

.shop-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
}

/* Filters sidebar */
.shop-filters {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
	padding: 24px;
}

.shop-filters h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	color: #00171f;
	margin: 0 0 16px;
}

.shop-filters__group {
	margin-bottom: 20px;
}

.shop-filters__group:last-of-type {
	margin-bottom: 0;
}

.shop-filters__group h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: #00171f;
	margin: 0 0 12px;
}

.shop-filters__option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	cursor: pointer;
}

.shop-filters__option:last-child {
	margin-bottom: 0;
}

.shop-filters__option span {
	font-family: var(--font-body);
	font-size: 14px;
	color: #3a3a3a;
}

.shop-filters__checkbox {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background: #ffffff;
	border: 1px solid #c5c2b8;
	border-radius: 4px;
}

.shop-filters__checkbox.is-checked {
	background: #0a3024;
	border-color: #0a3024;
	position: relative;
}

.shop-filters__checkbox.is-checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.shop-filters__clear {
	display: block;
	margin-top: 16px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: #667479;
	text-decoration: underline;
}

/* Product grid — reuses .product-card from main.css, overridden to fill
   its grid cell instead of the fixed 280px width used in the homepage
   horizontal carousel. */
.shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.shop-grid .product-card {
	display: block;
	width: 100%;
	text-decoration: none;
}

.shop-grid .product-card__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* Star rating — only surfaced on the mobile grid (Figma node 1025:4442);
   the desktop card design (554:9924/507:2450) has no rating row. */
.product-card__rating {
	display: none;
	font-size: 12px;
	letter-spacing: 1px;
	margin: 2px 0 0;
}

.product-card__stars-filled {
	color: #e89b3c;
}

.product-card__stars-empty {
	color: #d9d5c4;
}

.shop-empty {
	font-family: var(--font-body);
	font-size: 16px;
	color: #0a3024;
	padding: 40px 0;
}

/* -----------------------------------------------------------
   Single product
----------------------------------------------------------- */
body.is-shop-single .site-header {
	background: #0a3d2c;
}

.product-single {
	background: var(--c-cream);
	padding: 160px 0 80px;
}

.product-single__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	margin-bottom: 48px;
}

.product-single__gallery-main {
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f4f0e0;
	margin-bottom: 16px;
}

.product-single__gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-single__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.product-single__thumb {
	display: block;
	width: 100%;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 0;
	background: none;
	cursor: pointer;
}

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

.product-single__thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	background: #f4f0e0;
	display: block;
}

.product-single__badge {
	display: inline-block;
	background: #0a3024;
	color: #fdfdfd;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.product-single__breadcrumb {
	/* Desktop design has no breadcrumb — only shown at the mobile
	   breakpoint (node 1026:8955), see shop.css mobile section. */
	display: none;
}

.product-single__category {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: #667479;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
}

.product-single__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 36px;
	color: #00171f;
	margin: 0 0 16px;
}

.product-single__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.product-single__stars {
	display: inline-flex;
	gap: 2px;
	color: #e89b3c;
}

.product-single__rating-value {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	color: #00171f;
}

.product-single__rating-count {
	font-family: var(--font-body);
	font-size: 14px;
	color: #667479;
}

.product-single__price {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 32px;
	color: #0a3024;
	margin: 0 0 20px;
}

.product-single__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.product-single__description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 24px;
	color: #3a3a3a;
	margin: 0 0 24px;
}

.product-single__quantity-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: 16px;
}

.product-single__quantity-label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	color: #00171f;
}

.product-single__quantity {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 999px;
	padding: 8px 20px;
}

.product-single__quantity button {
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: #00171f;
	cursor: pointer;
	width: 20px;
}

.product-single__quantity input {
	width: 32px;
	border: none;
	text-align: center;
	font-family: var(--font-body);
	font-size: 16px;
	background: none;
}

.product-single__cta {
	display: block;
	width: 100%;
	text-align: center;
	background: #0a3024;
	color: #fdfdfd;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	padding: 20px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	margin-bottom: 24px;
	transition: opacity 0.15s ease;
}

.product-single__cta:disabled {
	opacity: 0.7;
	cursor: default;
}

.product-single__cta.is-added {
	background: var(--c-badge-green);
}

.product-single__out-of-stock {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: #b3261e;
	margin-bottom: 24px;
}

.product-single__find-stores {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	color: #0a3024;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 14px;
	border: 1.5px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	cursor: pointer;
	margin-bottom: 24px;
}

.product-single__benefits {
	background: var(--c-cream-btn);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
}

.product-single__benefits h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: #00171f;
	margin: 0 0 16px;
}

.product-single__benefits ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.product-single__benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	color: #113d2e;
}

.product-single__benefits li::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #0a3024;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.product-single__perks--standalone {
	/* Desktop keeps perks nested inside .product-single__benefits — the
	   standalone copy (shown above Key Benefits on mobile, node 1026:9003)
	   stays hidden until the mobile breakpoint below. */
	display: none;
}

.product-single__perks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	text-align: center;
}

.product-single__perks div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.product-single__perk-icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--c-cream-btn);
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-single__perks span {
	font-family: var(--font-body);
	font-size: 13px;
	color: #667479;
}

/* Tabs */
.product-single__tabs {
	display: flex;
	gap: 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 32px;
}

.product-single__tab {
	background: none;
	border: none;
	padding: 12px 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: #667479;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.product-single__tab.is-active {
	color: #0a3024;
	border-bottom-color: #0a3024;
}

.product-single__panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 56px;
}

.product-single__panel {
	background: var(--c-cream-btn);
	border-radius: 16px;
	padding: 32px;
}

.product-single__panel h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	color: #0a3024;
	margin: 0 0 20px;
}

.product-single__analysis-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: #3a3a3a;
}

.product-single__analysis-row strong {
	color: #00171f;
	font-weight: 400;
}

.product-single__panel p {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 22px;
	color: #3a3a3a;
	margin: 0 0 16px;
}

.product-single__panel p:last-child {
	margin-bottom: 0;
}

.product-single__pack-note {
	font-weight: 600;
	color: #0a3024;
}

/* Feeding-guide serving tables (e.g. weight vs. daily gram intake) — the
   raw meta content ships its own <table>, this just styles it to match
   the panel it lands in. Wrapped in a scroll container by the markup
   itself so a wide multi-column table never breaks mobile layout. */
.product-single__table-wrap {
	overflow-x: auto;
	margin: 4px 0 20px;
}

.product-single__table-wrap table {
	width: 100%;
	min-width: 360px;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 14px;
}

.product-single__table-wrap th,
.product-single__table-wrap td {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(10, 48, 36, 0.12);
	white-space: nowrap;
}

.product-single__table-wrap th {
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #0a3024;
}

.product-single__table-wrap td {
	color: #3a3a3a;
}

.product-single__table-wrap tbody tr:nth-child(even) {
	background: rgba(10, 48, 36, 0.05);
}

.product-single__table-wrap tbody tr:last-child td {
	border-bottom: none;
}

.product-single__stars,
.product-review__stars {
	color: #e89b3c;
	letter-spacing: 2px;
}

/* Reviews */
.product-single__reviews-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
}

.product-single__reviews-header h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 28px;
	color: #00171f;
	margin: 0 0 4px;
}

.product-single__reviews-header p {
	font-family: var(--font-body);
	font-size: 14px;
	color: #667479;
	margin: 0;
}

.btn-write-review {
	background: #0a3024;
	color: #fdfdfd;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 14px 28px;
	border-radius: 999px;
	border: none;
}

.product-review {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 16px;
}

.product-review__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.product-review__name {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: #00171f;
}

.product-review__verified {
	font-family: var(--font-body);
	font-size: 11px;
	color: #667479;
	background: var(--c-cream-btn);
	padding: 2px 10px;
	border-radius: 999px;
}

.product-review__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: #e89b3c;
	font-size: 13px;
}

.product-review__meta span {
	color: #667479;
	font-family: var(--font-body);
}

.product-review p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 22px;
	color: #3a3a3a;
	margin: 0;
}

.product-single__related h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 28px;
	color: #00171f;
	margin: 56px 0 24px;
}

.product-single__related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Responsive */
@media (max-width: 1000px) {
	.shop-layout {
		grid-template-columns: 1fr;
	}

	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-single__top,
	.product-single__panels {
		grid-template-columns: 1fr;
	}

	.product-single__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	/* The mobile hero uses a dedicated composited background (hero-bg-mobile.png,
	   sourced from Figma node 1025:5627's own render, not a cover-crop of the
	   wide desktop banner — a plain object-fit:cover crop of the 1493:481
	   desktop image put the dog/blobs in the wrong place at this aspect
	   ratio). Its canvas already bakes in the transparent nav's clearance
	   (106px) above the 220px-tall hero art, so the box is sized to match
	   that exact canvas instead of being driven by text-content padding. */
	.shop-hero {
		aspect-ratio: 394 / 326;
		padding: 0;
	}

	.shop-hero__inner {
		/* Must stay a positioned element (not static) — .shop-hero__bg is
		   position:absolute, and a static sibling paints *behind* an
		   absolutely-positioned one regardless of DOM order, which can
		   hide this text entirely without a z-index here. Position/offsets
		   match the bar+text block's placement within the composited
		   background (24px/146px into the 394x326 canvas). */
		position: absolute;
		top: 44.8%;
		left: 6.1%;
		right: auto;
		z-index: 1;
		padding: 0;
		gap: 14px;
	}

	/* Mobile hero type (node 1025:4990/4993/4996) is a distinct, smaller
	   scale from the desktop hero — not a fluid shrink of the 40px/20px
	   desktop sizes, which were overflowing/wrapping badly at this width. */
	.shop-hero__bar {
		width: 6px;
		background: #a7552e;
		border-radius: 999px;
	}

	.shop-hero__text h1 {
		font-size: 24px;
		line-height: 32px;
	}

	.shop-hero__text p {
		font-size: 14px;
		line-height: 22.75px;
		color: rgba(255, 252, 239, 0.7);
		max-width: 213px;
	}

	/* Figma's mobile shop frame (1025:4442) has no filters panel at all —
	   the grid runs straight from the sort dropdown to the products, so
	   the sidebar is dropped rather than stacked on small screens. */
	.shop-filters {
		display: none;
	}

	.shop-content .section-inner {
		padding: 0 24px;
	}

	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* Mobile card (1025:4464) is a distinct, more compact treatment from
	   the desktop carousel/grid card — bordered white tile instead of a
	   shadowed off-white one, smaller type, and a contained (not cropped)
	   product shot on a cream tile so tall/short pack photos don't crop. */
	.shop-grid .product-card {
		background: #ffffff;
		border: 0.8px solid #ede7d0;
		box-shadow: none;
		padding: 0;
	}

	.shop-grid .product-card__image {
		aspect-ratio: 1 / 1;
		background: var(--c-cream);
	}

	.shop-grid .product-card__image img {
		object-fit: contain;
	}

	.shop-grid .product-card__hover-image {
		display: none;
	}

	.shop-grid .product-card__body {
		padding: 12px;
	}

	.shop-grid .product-card__body h3 {
		font-size: 12px;
		line-height: 15px;
		margin: 0 0 2px;
	}

	.shop-grid .product-card__meta {
		display: block;
		gap: 0;
		font-size: 10px;
		line-height: 15px;
		margin: 0;
	}

	.shop-grid .product-card__meta span:first-child::after {
		content: " • ";
	}

	.shop-grid .product-card__rating {
		display: block;
	}

	.shop-grid .product-card__price {
		font-size: 12px;
		line-height: 16px;
		margin: 4px 0 0;
	}

	/* Single-product header renders in normal flow here (not as an
	   absolute overlay like the archive hero), so this padding was
	   stacking on top of the header's own height instead of substituting
	   for it — 160px left an oversized empty gap before the gallery. */
	.product-single {
		/* No gap above the hero image in the mobile design — it sits flush
		   against the header (node 1026:8948 starts at y=0 of the page's
		   main content), not offset by the page's cream background. */
		padding: 0 0 60px;
	}

	/* ---------------------------------------------------------------
	   Product detail page — mobile (Figma node 1026:8922).
	   Colour palette (#134635 / #335c4d / #89a08e / #f3f0e4) and sizes
	   below are read directly off that node; they intentionally diverge
	   from the desktop tokens used elsewhere in this file since the
	   mobile design uses its own greener palette.
	------------------------------------------------------------------ */

	/* No thumbnail strip in the mobile design — only the single hero
	   shot, full-bleed and letterboxed on cream instead of the desktop's
	   square cropped/rounded tile. */
	.product-single__thumbs {
		display: none;
	}

	.product-single__gallery-main {
		margin: 0 -16px 0;
		width: calc(100% + 32px);
		aspect-ratio: auto;
		border-radius: 0;
		background: #ffffff;
	}

	.product-single__gallery-main img {
		height: 263px;
		object-fit: contain;
	}

	/* The "Best Seller" badge overlays the hero image on mobile instead
	   of sitting inline above the title (node 1026:8950) — achieved by
	   absolutely positioning it against .product-single__top rather than
	   duplicating the markup, since the gallery is always the first
	   block in the single-column mobile stack. */
	.product-single__top {
		position: relative;
		/* The 64px column gap and 48px bottom margin are desktop-only
		   values (unused once .product-single__top is a single stacked
		   column below 1000px) — left unset here they were stacking on
		   top of the 20px gap below, pushing the breadcrumb (node
		   1026:8956) way further from the image than Figma shows. */
		gap: 0;
		margin-bottom: 0;
	}

	.product-single__info {
		padding-top: 20px;
	}

	.product-single__badge {
		position: absolute;
		top: 16px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 1;
		margin-bottom: 0;
		background: linear-gradient(180deg, #0a3d2c, #134635);
	}

	.product-single__breadcrumb {
		display: block;
	}

	.product-single__category {
		/* Replaced by the breadcrumb on mobile. */
		display: none;
	}

	.product-single__title {
		font-family: var(--font-display);
		font-size: 32px;
		line-height: 35.2px;
		color: #134635;
	}

	.product-single__stars {
		color: #fb844c;
	}

	.product-single__rating-value,
	.product-single__price {
		color: #134635;
	}

	.product-single__rating-count {
		color: #89a08e;
	}

	.product-single__price {
		font-size: 36px;
	}

	.product-single__price .woocommerce-Price-currencySymbol {
		font-size: 20px;
		font-weight: 400;
		color: #89a08e;
		margin-left: 4px;
	}

	.product-single__description {
		font-size: 14px;
		line-height: 22.4px;
		color: #335c4d;
	}

	/* Quantity stepper and Shop button sit side by side (node 1026:8989)
	   instead of stacked full-width rows — the "Quantity" label isn't
	   shown at this size. */
	form.cart {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
	}

	.product-single__quantity-row {
		border-top: none;
		padding: 0;
		margin-bottom: 0;
	}

	.product-single__quantity-label {
		display: none;
	}

	.product-single__quantity {
		border: 0.8px solid #134635;
		border-radius: 8px;
		background: none;
		padding: 0;
	}

	.product-single__quantity button {
		width: 46px;
		height: 46px;
		color: #134635;
		font-weight: 700;
		font-size: 20px;
	}

	.product-single__quantity input {
		width: 38px;
		color: #134635;
	}

	.product-single__cta {
		flex: 1;
		width: auto;
		margin-bottom: 0;
		background: #134635;
		border-radius: 8px;
		padding: 13px;
		font-size: 16px;
	}

	.product-single__find-stores {
		border-radius: 8px;
		padding: 12px;
		font-size: 13px;
		margin-bottom: 20px;
	}

	/* Key Benefits loses its card treatment on mobile — plain list
	   directly on the page background (no bg/padding/radius), with a
	   plain stroke check instead of the desktop's filled-circle icon. */
	.product-single__benefits {
		background: none;
		padding: 0;
		border-radius: 0;
		margin-bottom: 24px;
	}

	.product-single__benefits h3 {
		font-family: var(--font-body);
		font-weight: 600;
		font-size: 20px;
		color: #134635;
	}

	.product-single__benefits li {
		font-size: 14px;
		color: #335c4d;
	}

	.product-single__benefits li::before {
		width: 18px;
		height: 18px;
		background: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M15 4.5L6.75 12.75L3 9' stroke='%2324624C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	/* Perks moves above Key Benefits on mobile (node 1026:9003 sits before
	   1026:9025) — the standalone copy (see single-product.php) is shown
	   here instead, the one nested inside .product-single__benefits for
	   desktop is hidden so it doesn't render twice. */
	.product-single__perks--standalone {
		display: block;
		margin-bottom: 16px;
	}

	.product-single__benefits .product-single__perks {
		display: none;
	}

	/* Perks stay in a single row of 3 (node 1026:9003), not stacked —
	   same generic package icon repeated for all three, matching Figma. */
	.product-single__perks {
		display: flex;
		justify-content: space-between;
		border-top: 0.8px solid #ede7d0;
		border-bottom: 0.8px solid #ede7d0;
		padding: 9px 0 17px;
	}

	.product-single__perk-icon {
		width: 40px;
		height: 40px;
		background: rgba(10, 61, 44, 0.05);
	}

	.product-single__perk-icon svg {
		display: none;
	}

	.product-single__perk-icon::before {
		content: '';
		width: 20px;
		height: 20px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 17.5L3.33 14.17V5.83L10 2.5l6.67 3.33v8.34L10 17.5ZM16.67 5.83L10 9.17M3.33 5.83L10 9.17M10 9.17V17.5' stroke='%230A3D2C' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	.product-single__perks span {
		font-size: 11px;
		color: #134635;
	}

	/* Tabs stretch full width instead of left-aligned with a fixed gap. */
	.product-single__tabs {
		gap: 0;
		border-bottom: 0.8px solid #ede7d0;
	}

	.product-single__tab {
		flex: 1;
		font-size: 14px;
	}

	.product-single__tab.is-active {
		color: #134635;
		border-bottom-color: #134635;
	}

	/* Only the Guaranteed Analysis card shows under the Nutrition tab on
	   mobile — Ingredients has its own dedicated tab there instead of
	   also appearing as a second card side by side (node 1026:9061 has
	   no second card). */
	[data-tab-panel='nutrition'] .product-single__panels .product-single__panel:last-child {
		display: none;
	}

	/* The gap before "Customer Reviews" (node 1026:9133) only came from
	   .product-single__panels' own margin-bottom — the Ingredients/Feeding
	   Guide tabs render their single .product-single__panel directly,
	   without that wrapper, so they had no bottom margin at all. Moved
	   the margin onto the shared .product-single__tab-panel wrapper so
	   every tab gets the same gap Nutrition already had. */
	.product-single__panels {
		margin-bottom: 0;
	}

	.product-single__tab-panel {
		margin-bottom: 56px;
	}

	.product-single__panel {
		padding: 16.8px;
		border-radius: 12px;
		border: 0.8px solid #ede7d0;
		background: #ffffff;
	}

	.product-single__panel h3 {
		font-family: var(--font-body);
		font-weight: 600;
		font-size: 16px;
		color: #134635;
		margin-bottom: 12px;
	}

	.product-single__analysis-row {
		font-size: 12px;
		border-bottom: 0.8px solid #f3f0e4;
	}

	.product-single__analysis-row span {
		color: #335c4d;
	}

	.product-single__analysis-row strong {
		color: #134635;
		font-weight: 500;
	}

	.product-single__panel p {
		font-size: 13px;
		color: #335c4d;
	}

	.product-single__table-wrap th,
	.product-single__table-wrap td {
		padding: 8px 10px;
		font-size: 12px;
	}

	.product-single__reviews-header h2 {
		font-size: 20px;
		color: #134635;
	}

	.product-single__related h2 {
		font-size: 20px;
		color: #134635;
		margin: 0 0 16px;
	}

	.product-review {
		border-radius: 12px;
		border: 0.8px solid #ede7d0;
		box-shadow: none;
		padding: 16.8px;
	}

	.product-review__name {
		color: #134635;
	}

	.product-review__verified {
		background: #f3f0e4;
		color: #134635;
	}

	.product-review__meta {
		color: #fb844c;
	}

	.product-review__meta span {
		color: #89a08e;
		font-size: 12px;
	}

	.product-review p {
		font-size: 13px;
		line-height: 20.8px;
		color: #335c4d;
	}

	/* You may also like — horizontal scroll of fixed-width cards
	   bleeding to the right screen edge (node 1026:9222), same pattern as
	   the Academy blog carousel (.blog-grid). Only the right side bleeds
	   — scroll containers don't reliably render their own padding-left as
	   visible space before the first item (it gets clipped at scrollLeft
	   0 in Chrome/Safari), so the left inset comes from .section-inner's
	   own 16px padding, left untouched, instead of from padding on this
	   element. */
	.product-single__related-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: 16px;
		margin-right: -16px;
		padding: 4px 16px 8px 0;
		scrollbar-width: thin;
	}

	.product-single__related-grid .product-card {
		flex: 0 0 140px;
		scroll-snap-align: start;
		background: #ffffff;
		border: 0.8px solid rgba(0, 0, 0, 0.08);
		border-radius: 12px;
		box-shadow: none;
		padding: 0;
	}

	.product-single__related-grid .product-card__hover-image {
		display: none;
	}

	.product-single__related-grid .product-card__image {
		aspect-ratio: 140 / 120;
		background: #ffffff;
	}

	.product-single__related-grid .product-card__image img {
		object-fit: contain;
	}

	.product-single__related-grid .product-card__body {
		padding: 8px;
	}

	.product-single__related-grid .product-card__body h3 {
		font-size: 12px;
		color: #134635;
		margin: 0 0 4px;
	}

	.product-single__related-grid .product-card__rating {
		display: none;
	}

	.product-single__related-grid .product-card__meta span:first-child {
		display: none;
	}

	.product-single__related-grid .product-card__meta {
		font-size: 11px;
		color: #89a08e;
		margin: 0;
	}

	.product-single__related-grid .product-card__price {
		font-size: 13px;
		color: #134635;
		margin: 4px 0 0;
	}
}