/**
 * GRP Blocks — shared stylesheet for frontend + editor.
 *
 * Design tokens extracted from Figma file eSGT4YlFibGLFdSxmi6W9G
 * (Concept – Grey Research Peptides). Values mirror the Figma node tree
 * (node 528:22639 — Hero Section) 1:1: every gap / padding / size / color
 * is taken from the Figma variables or measured rectangles.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
	--grp-color-primary-50:  #F0F5FF;
	--grp-color-primary-600: #437FC2;
	--grp-color-primary-700: #114AD0;
	--grp-color-gray-0:   #FFFFFF;
	--grp-color-gray-200: #E5E7EB;
	--grp-color-gray-500: #4A5565;
	--grp-color-gray-900: #111827;
	--grp-color-gray-950: #101828;

	--grp-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ─── Block: grp/hero ─────────────────────────────────────────────────
 * Figma node 528:22639. Section is 1440×461 with 70px top/bottom padding,
 * two columns (513 + 138 gap + 628) inside an 80px-padded full-width band.
 * Background = two off-canvas radial-gradient SVG ellipses (Figma nodes
 * 528:22641 + 528:22642), positioned absolutely per Figma coordinates.
 * ──────────────────────────────────────────────────────────────────── */

.wp-block-grp-hero {
	font-family: var( --grp-font-family );
	background: #FFFFFF;
	color: var( --grp-color-gray-950 );
	padding: 70px 0;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Force edge-to-edge when alignfull is applied, even inside a constrained
   theme container. Standard WP full-bleed pattern. */
.wp-block-grp-hero.alignfull {
	margin-left:  calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
}

/* Background ellipses — absolute-positioned at the EXACT Figma coordinates
   relative to the Hero Section origin. The "Background Ellipses" group
   (Figma node 528:22640) uses `display: contents` in Figma's code export,
   so its children's positions are effectively relative to Hero Section.
     - Ellipse 2 (528:22641): left=649, top=-559.5, size 1554. Center lands
       at hero-coord (1426, 217.5) — right-middle of the section, producing
       the strong blue glow visible in Figma's render.
     - Ellipse 3 (528:22642): left=-493.73, top=-946.87, size 1435.187.
       Center lands at hero-coord (223.77, -229.37) — upper-left above the
       section, fading into the hero from the top. */
.wp-block-grp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.wp-block-grp-hero__bg img {
	position: absolute;
	display: block;
	max-width: none;
}
/* Set 1 ellipses — positions are identical across Figma desktop/tablet/mobile.
   Always rendered. */
.wp-block-grp-hero__bg img.is-ellipse-2.set-1 {
	left: 649px;
	top: -559.5px;
	width: 1554px;
	height: 1554px;
}
.wp-block-grp-hero__bg img.is-ellipse-3.set-1 {
	left: -493.73px;
	top: -946.87px;
	width: 1435.187px;
	height: 1435.187px;
}

/* Set 2 ellipses — only used by Figma tablet (518:20845) and mobile (518:21428)
   to add a second blue glow in the lower portion of the taller hero. Hidden on
   desktop; positions are then overridden per breakpoint below. */
.wp-block-grp-hero__bg img.is-ellipse-2.set-2,
.wp-block-grp-hero__bg img.is-ellipse-3.set-2 {
	display: none;
}

/* Custom-uploaded background — fills the whole section. When this image is
   present we hide the default ellipses entirely (render.php only outputs
   one or the other, so this rule is just visual safety). */
.wp-block-grp-hero.has-custom-bg .wp-block-grp-hero__bg img.is-custom-bg {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Container max-width matches the Figma section (1440). Columns aim for the
   Figma 513 + 628 but use minmax(0, ...) so they shrink proportionally on
   any viewport narrower than 1440 (e.g. the Block Editor canvas with the
   Inspector panel open). Below ~1024px we collapse to a single column. */
.wp-block-grp-hero .grp-hero__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp( 20px, 5.5vw, 80px );
	display: grid;
	grid-template-columns: minmax( 0, 513px ) minmax( 0, 628px );
	gap: clamp( 40px, 9.6vw, 138px );
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Left column — glyph, header, subtitle, CTAs.
   Figma node 528:22644: flex-col, gap=12px. */
.wp-block-grp-hero .grp-hero__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	max-width: 513px;
	min-width: 0;
}

.wp-block-grp-hero .grp-hero__brand-glyph {
	width: 38px;
	height: 43px;
	object-fit: contain;
	display: block;
}

/* Hero Text Container — flex-col, gap=50px between header-block and buttons */
.wp-block-grp-hero .grp-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	width: 100%;
}

/* Hero Header Container — flex-col, gap=16px between H1 and subtitle */
.wp-block-grp-hero .grp-hero__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.wp-block-grp-hero .grp-hero__title {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --grp-color-gray-950 );
	margin: 0;
	width: 100%;
}

.wp-block-grp-hero .grp-hero__subtitle {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --grp-color-gray-500 );
	margin: 0;
	width: 100%;
}

/* Hero Button Container — flex-row, gap=16px */
.wp-block-grp-hero .grp-hero__cta-row {
	display: flex;
	gap: 16px;
	align-items: center;
}

.wp-block-grp-hero .grp-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 99px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 120ms ease;
}
.wp-block-grp-hero .grp-hero__btn:hover { opacity: 0.92; }

.wp-block-grp-hero .grp-hero__btn--primary {
	background: var( --grp-color-primary-600 );
	color: var( --grp-color-gray-0 );
	border: none;
}

.wp-block-grp-hero .grp-hero__btn--secondary {
	background: var( --grp-color-gray-0 );
	color: var( --grp-color-gray-900 );
	border: 1px solid var( --grp-color-gray-200 );
}

/* Right column — Benefits Container: flex-col, gap=24px between rows.
   Figma node 528:22654. Aims for 628px but adapts when grid column shrinks. */
.wp-block-grp-hero .grp-hero__benefits {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 628px;
	min-width: 0;
}

.wp-block-grp-hero .grp-hero__benefits-row {
	display: flex;
	gap: 24px;
	align-items: stretch;
	flex-wrap: nowrap;
}

/* Each card: 302×119, bg-white, rounded-24, p-22, items-center, gap-33
   between icon and text. Figma node 528:22656.
   `flex: 1 1 0` + `min-width: 0` keeps the 2×2 grid structure regardless of
   available width — cards shrink proportionally but never wrap onto a new
   row. The editor canvas (which is narrower than the 1440 frontend) sees
   the same layout the design intends; nothing rearranges in editor view. */
.wp-block-grp-hero .grp-hero__benefit {
	background: var( --grp-color-gray-0 );
	border-radius: 24px;
	padding: 22px;
	flex: 1 1 0;
	min-width: 0;
	max-width: 302px;
	display: flex;
	align-items: center;
	gap: 33px;
	overflow: hidden;
	box-sizing: border-box;
}

.wp-block-grp-hero .grp-hero__benefit-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var( --grp-color-primary-50 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
}
.wp-block-grp-hero .grp-hero__benefit-icon img {
	width: 24px;
	height: 24px;
	display: block;
}

/* Text Container inside card: flex-col, gap=12px between title and desc.
   Figma node 528:22662 pins it at 170.753px on all breakpoints — that's
   the width that forces "Lab-verified research grade compounds" / "Quick
   Delivery Across the USA" to wrap to 2 lines.
   We use `flex: 1 1 0` + `max-width: 170.753px` so the container:
     - never exceeds 170.753 (keeps the 2-line wrap on wide cards),
     - shrinks proportionally on narrow cards (block editor canvas, narrow
       viewports) so the text never overflows the card box. */
.wp-block-grp-hero .grp-hero__benefit-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 0;
	max-width: 170.753px;
	min-width: 0;
}

.wp-block-grp-hero .grp-hero__benefit-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --grp-color-gray-950 );
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.wp-block-grp-hero .grp-hero__benefit-desc {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --grp-color-gray-500 );
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ─── Tablet (768 – 1279) ─────────────────────────────────────────────
 * Figma node 518:20841. Single column, content centered. Text/buttons on
 * top, 2×2 benefit grid below. Two sets of background ellipses for the
 * taller hero. Content max width = 704px, side padding 32px. ─────────── */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-hero {
		padding: 79px 0;
	}
	.wp-block-grp-hero .grp-hero__container {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0 32px;
		justify-items: center;
	}
	.wp-block-grp-hero .grp-hero__left {
		width: 100%;
		max-width: 704px;
		align-items: flex-start;
	}
	.wp-block-grp-hero .grp-hero__text {
		gap: 32px;
	}
	.wp-block-grp-hero .grp-hero__subtitle {
		width: 73%;
	}
	.wp-block-grp-hero .grp-hero__benefits {
		width: 100%;
		max-width: 704px;
	}
	.wp-block-grp-hero .grp-hero__benefits-row {
		gap: 32px;
	}
	.wp-block-grp-hero .grp-hero__benefit {
		max-width: none;
	}

	/* Second set of ellipses for the taller tablet hero.
	   Figma node 518:20845 (Background Ellipses, set 2): container at (32, -121.12)
	   with display:contents → children are hero-relative. */
	.wp-block-grp-hero__bg img.is-ellipse-2.set-2 {
		display: block;
		left: 1174.73px;
		top: 266.26px;
		width: 1554px;
		height: 1554px;
	}
	.wp-block-grp-hero__bg img.is-ellipse-3.set-2 {
		display: block;
		left: 32px;
		top: -121.12px;
		width: 1435.187px;
		height: 1435.187px;
	}
}

/* ─── Mobile ( ≤ 767px ) ──────────────────────────────────────────────
 * Figma node 518:21424. Everything single-column, centered. Smaller fonts
 * (title 28, subtitle 16, card title 16). Buttons stacked full-width.
 * Cards stacked vertically (4×1), padding 20, gap 14. ────────────────── */
@media ( max-width: 767px ) {
	.wp-block-grp-hero {
		padding: 64.5px 0 66.5px;
	}
	.wp-block-grp-hero .grp-hero__container {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0 16px;
		justify-items: stretch;
	}
	.wp-block-grp-hero .grp-hero__left {
		width: 100%;
		max-width: none;
		gap: 24px;
	}
	.wp-block-grp-hero .grp-hero__text {
		align-items: center;
		gap: 32px;
	}
	.wp-block-grp-hero .grp-hero__header {
		align-items: center;
	}
	.wp-block-grp-hero .grp-hero__title { font-size: 28px; }
	.wp-block-grp-hero .grp-hero__subtitle { font-size: 16px; width: 100%; }

	.wp-block-grp-hero .grp-hero__cta-row {
		flex-direction: column;
		width: 100%;
		gap: 16px;
	}
	.wp-block-grp-hero .grp-hero__btn {
		width: 100%;
	}

	/* Flatten the two-row structure: rows disappear from layout via
	   `display: contents`, so all 4 cards become direct children of the
	   benefits container. Cards stretch to the full container width
	   (viewport - 16px each side), no fixed 343px cap — Figma's 343 is
	   simply (375 viewport - 16 - 16) at the mobile design size, not a
	   maximum the card should never exceed. */
	.wp-block-grp-hero .grp-hero__benefits {
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: 100%;
		max-width: none;
	}
	.wp-block-grp-hero .grp-hero__benefits-row {
		display: contents;
	}
	.wp-block-grp-hero .grp-hero__benefit {
		flex: none;
		width: 100%;
		max-width: none;
		/* Figma mobile cards use px-[20px] py-[22px] on 3 of 4 cards; using
		   that uniformly so all 4 cards have identical box. */
		padding: 22px 20px;
		height: auto;
		min-height: auto;
		overflow: visible;
	}
	.wp-block-grp-hero .grp-hero__benefit-title {
		font-size: 16px;
	}

	/* Second set of ellipses for the taller mobile hero.
	   Figma node 518:21428 (Background Ellipses, set 2). */
	.wp-block-grp-hero__bg img.is-ellipse-2.set-2 {
		display: block;
		left: 913.96px;
		top: 645.87px;
		width: 1554px;
		height: 1554px;
	}
	.wp-block-grp-hero__bg img.is-ellipse-3.set-2 {
		display: block;
		left: -228.76px;
		top: 258.5px;
		width: 1435.187px;
		height: 1435.187px;
	}
}

/* ─── Block: grp/catalog ──────────────────────────────────────────────
 * Figma node 528:22697 (desktop) / 518:20902 (tablet) / 518:21486 (mobile).
 * Header (title + subtitle + tabs row), 8-product grid (4×2 desktop,
 * 2×4 tablet, 1×8 mobile), shop link at bottom. ────────────────────── */

.wp-block-grp-catalog {
	font-family: var( --grp-font-family );
	background: #FFFFFF;
	color: var( --grp-color-gray-950 );
	padding: 90px 0;
}

.wp-block-grp-catalog.alignfull {
	margin-left:  calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
}

.wp-block-grp-catalog .grp-catalog__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp( 16px, 5.5vw, 80px );
}

/* ─── Header ─────────────────────────────────────────────────────── */
.wp-block-grp-catalog .grp-catalog__header {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 40px;
}
.wp-block-grp-catalog .grp-catalog__header-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wp-block-grp-catalog .grp-catalog__title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --grp-color-gray-950 );
	margin: 0;
}
.wp-block-grp-catalog .grp-catalog__subtitle {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var( --grp-color-gray-500 );
	margin: 0;
}

/* ─── Tabs row — pill buttons ────────────────────────────────────── */
.wp-block-grp-catalog .grp-catalog__tabs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.wp-block-grp-catalog .grp-catalog__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var( --grp-color-gray-200 );
	background: var( --grp-color-gray-0 );
	color: var( --grp-color-gray-900 );
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.wp-block-grp-catalog .grp-catalog__tab:hover {
	background: var( --grp-color-primary-50 );
	border-color: var( --grp-color-primary-50 );
}
.wp-block-grp-catalog .grp-catalog__tab.is-active {
	background: var( --grp-color-primary-600 );
	border-color: var( --grp-color-primary-600 );
	color: var( --grp-color-gray-0 );
}

/* ─── Product grids ──────────────────────────────────────────────── */
.wp-block-grp-catalog .grp-catalog__grids { position: relative; }
.wp-block-grp-catalog .grp-catalog__grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 24px;
}
.wp-block-grp-catalog .grp-catalog__grid[ hidden ] { display: none; }

.wp-block-grp-catalog .grp-catalog__empty {
	grid-column: 1 / -1;
	padding: 60px 20px;
	text-align: center;
	color: var( --grp-color-gray-500 );
	font-size: 16px;
	background: var( --grp-color-primary-50 );
	border-radius: 24px;
}

/* ─── Product card ───────────────────────────────────────────────────
 * Figma component 414:14069 (Product Card master).
 * Outer card: 1px gray-200 border, 24px radius, padding 15px 16px,
 * flex-column with items-center and 20px gap between image and lower
 * section. Width 302px on desktop (4 per row in 1280 container with 24
 * gap), shrinks on tablet/mobile but keeps the same internal structure.
 * ──────────────────────────────────────────────────────────────────── */
.wp-block-grp-catalog .grp-catalog__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 15px 16px;
	background: var( --grp-color-gray-0 );
	border: 1px solid var( --grp-color-gray-200 );
	border-radius: 24px;
	overflow: hidden;
	box-sizing: border-box;
	transition: box-shadow 200ms ease;
	/* Fill the grid row height so internal `.card-lower` can grow with
	   `flex: 1` and push `.card-bottom` to the actual card bottom. Without
	   `height: 100%` the article sizes to content and flex:1 has nothing
	   extra to consume. */
	height: 100%;
}
.wp-block-grp-catalog .grp-catalog__card:hover {
	box-shadow: 0 8px 24px rgba( 16, 24, 40, 0.08 );
}

/* Image area: Figma "Container" 247×264, aspect ratio preserved. The
   composite product image (frame + bottle + brand + CAS) is shown
   as-is, contained. No extra background — the image already carries
   the gradient frame baked-in. */
.wp-block-grp-catalog .grp-catalog__card-image {
	display: block;
	width: 100%;
	max-width: 247px;
	aspect-ratio: 247 / 264;
	overflow: hidden;
}
.wp-block-grp-catalog .grp-catalog__card-image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Lower section: takes the remaining card height (cards in the grid
   stretch to equal heights, so `flex: 1` here lets us pin the CTA
   to the bottom regardless of how long the title runs). */
.wp-block-grp-catalog .grp-catalog__card-lower {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
	flex: 1;
	min-height: 0;
}

.wp-block-grp-catalog .grp-catalog__card-text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

/* Popular badge: bg #F0F5FF (Primary/50), text #114AD0 (Primary/700),
   4×8 padding, pill, Inter Regular 12 / 1.3. */
.wp-block-grp-catalog .grp-catalog__card-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 999px;
	background: var( --grp-color-primary-50 );
	color: var( --grp-color-primary-700 );
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
}

/* Title + Price column: gap 8. Same reasoning as the parent text block —
   no max-width so long product titles don't get crushed into a tiny column. */
.wp-block-grp-catalog .grp-catalog__card-title-price {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

.wp-block-grp-catalog .grp-catalog__card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --grp-color-gray-900 );
	margin: 0;
	width: 100%;
}
.wp-block-grp-catalog .grp-catalog__card-title a {
	color: inherit;
	text-decoration: none;
}
.wp-block-grp-catalog .grp-catalog__card-title a:hover { text-decoration: underline; }

.wp-block-grp-catalog .grp-catalog__card-price {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --grp-color-gray-900 );
	width: 100%;
}

/* Bottom group (price + CTA) — pinned to the bottom of the card so prices
   and CTAs align across cards of varying title length. `margin-top: auto`
   eats the leftover vertical space, internal `gap` controls the price→CTA
   spacing (overridden per breakpoint below). */
.wp-block-grp-catalog .grp-catalog__card-bottom {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
	margin-top: auto;
}
.wp-block-grp-catalog .grp-catalog__card-price del { color: var( --grp-color-gray-500 ); font-weight: 400; margin-right: 6px; }
.wp-block-grp-catalog .grp-catalog__card-price ins { text-decoration: none; }

/* "Add to Cart" button on a product card. Figma node 552:25469 — this is
   a SMALLER variant than the Hero CTA: 12px text + 14×14 icon, 12×16
   padding, pill, gap 10. Total height ~41px (vs ~46px for the larger
   Hero buttons). */
.wp-block-grp-catalog .grp-catalog__card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 8px 16px;
	border-radius: 999px;
	background: var( --grp-color-primary-600 );
	color: var( --grp-color-gray-0 );
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: opacity 120ms ease;
}
.wp-block-grp-catalog .grp-catalog__card-cta:hover,
.wp-block-grp-catalog .grp-catalog__card-cta:focus,
.wp-block-grp-catalog .grp-catalog__card-cta:active {
	opacity: 0.92;
	color: var( --grp-color-gray-0 );
}
.wp-block-grp-catalog .grp-catalog__card-cta-icon {
	width: 14px;
	height: 14px;
	display: block;
	flex: none;
}

/* ─── Footer / Shop button ───────────────────────────────────────────
 * Figma node 528:23282: 169×46 pill button, white bg, gray-200 border,
 * Inter Regular 16/1.4 in gray-900. Matches the Hero "Learn More"
 * secondary-button visual exactly. */
.wp-block-grp-catalog .grp-catalog__footer {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}
.wp-block-grp-catalog .grp-catalog__shop-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var( --grp-color-gray-200 );
	background: var( --grp-color-gray-0 );
	color: var( --grp-color-gray-900 );
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 120ms ease;
}
.wp-block-grp-catalog .grp-catalog__shop-link:hover,
.wp-block-grp-catalog .grp-catalog__shop-link:focus {
	opacity: 0.92;
	color: var( --grp-color-gray-900 );
	text-decoration: none;
}

/* ─── Editor placeholder elements (only shown in the Block Editor) ──── */
.wp-block-grp-catalog .grp-catalog__card--placeholder {
	border-style: dashed;
}
.wp-block-grp-catalog .grp-catalog__placeholder-image {
	background: linear-gradient( 135deg, #EFF4FE 0%, #DCE9FF 100% );
	border-radius: 16px;
}
.wp-block-grp-catalog .grp-catalog__placeholder-line {
	height: 14px;
	background: var( --grp-color-gray-200 );
	border-radius: 4px;
}
.wp-block-grp-catalog .grp-catalog__placeholder-line--title { width: 80%; height: 18px; }
.wp-block-grp-catalog .grp-catalog__placeholder-line--price { width: 50%; height: 22px; }
.wp-block-grp-catalog .grp-catalog__placeholder-button { /* nothing — uses .grp-catalog__card-cta styles */ }

/* ─── Catalog responsive ─────────────────────────────────────────── */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-catalog { padding: 64px 0; }
	.wp-block-grp-catalog .grp-catalog__container { padding: 0 32px; }
	.wp-block-grp-catalog .grp-catalog__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 767px ) {
	.wp-block-grp-catalog { padding: 48px 0; }
	.wp-block-grp-catalog .grp-catalog__container { padding: 0 16px; }
	.wp-block-grp-catalog .grp-catalog__header   { gap: 16px; }
	.wp-block-grp-catalog .grp-catalog__title    { font-size: 28px; }
	.wp-block-grp-catalog .grp-catalog__subtitle { font-size: 16px; }
	/* 2-column grid on mobile (matches Figma node 518:21486). Cards stay
	   side-by-side; the gap shrinks slightly to fit narrow viewports.
	   Card paddings + fonts trimmed so the smaller card stays readable. */
	.wp-block-grp-catalog .grp-catalog__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 16px 12px;
	}
	.wp-block-grp-catalog .grp-catalog__card {
		padding: 8px;
		gap: 16px;
	}
	.wp-block-grp-catalog .grp-catalog__card-image {
		max-width: none;
		max-height: 137px;
	}
	.wp-block-grp-catalog .grp-catalog__card-text { gap: 12px; }
	.wp-block-grp-catalog .grp-catalog__card-title { font-size: 14px; }
	.wp-block-grp-catalog .grp-catalog__card-price { font-size: 20px; }
	.wp-block-grp-catalog .grp-catalog__card-lower { gap: 16px; }
	.wp-block-grp-catalog .grp-catalog__card-bottom { gap: 16px; }
	.wp-block-grp-catalog .grp-catalog__card-cta {
		padding: 7.5px 14px;
		font-size: 12px;
	}
	.wp-block-grp-catalog .grp-catalog__tab {
		padding: 8px 16px;
		font-size: 14px;
	}
}

/* ─── Block: grp/why-choose-us ───────────────────────────────────────
 * Figma node 528:22737 (desktop). Section bg #F0F5FF, padding 90×80,
 * centered header (eyebrow + title + subtitle), and a 2-column content
 * area: side image (628×424) + 2×2 benefits grid (cards 302×~200).
 * Each card: icon stacked above title+description (column layout,
 * unlike the Hero card which is icon-beside-text). ───────────────── */

.wp-block-grp-why-choose-us {
	font-family: var( --grp-font-family );
	background: var( --grp-color-primary-50 );
	color: var( --grp-color-gray-950 );
	padding: 90px 0;
}

.wp-block-grp-why-choose-us.alignfull {
	margin-left:  calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
}

.wp-block-grp-why-choose-us .grp-wcu__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp( 16px, 5.5vw, 80px );
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

/* Header — eyebrow + title + subtitle, centered. No max-width cap: Figma's
   424 was a desktop-only convenience; long custom titles should be allowed
   to use the full container width on any breakpoint. */
.wp-block-grp-why-choose-us .grp-wcu__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
}
.wp-block-grp-why-choose-us .grp-wcu__eyebrow {
	color: var( --grp-color-primary-600 );
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0;
}
.wp-block-grp-why-choose-us .grp-wcu__title {
	color: var( --grp-color-gray-950 );
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.wp-block-grp-why-choose-us .grp-wcu__subtitle {
	color: var( --grp-color-gray-500 );
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* Content area: image (left, 628×424) + benefits (right, 628 wide).
   Both halves are minmax(0, 1fr) so they shrink proportionally on
   narrower viewports; the cards reflow at tablet/mobile breakpoints
   below. */
.wp-block-grp-why-choose-us .grp-wcu__content {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 24px;
	align-items: center;
	width: 100%;
}

.wp-block-grp-why-choose-us .grp-wcu__image {
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 628 / 424;
	max-height: 424px;
}
.wp-block-grp-why-choose-us .grp-wcu__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Benefits grid: 2×2 on desktop/tablet, single column on mobile. */
.wp-block-grp-why-choose-us .grp-wcu__benefits {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 24px;
}

/* Each card: icon stacked ABOVE title+description (column flex, gap 33). */
.wp-block-grp-why-choose-us .grp-wcu__benefit {
	background: var( --grp-color-gray-0 );
	border-radius: 24px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 33px;
	min-height: 200px;
	box-sizing: border-box;
}
.wp-block-grp-why-choose-us .grp-wcu__benefit-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var( --grp-color-primary-50 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
}
.wp-block-grp-why-choose-us .grp-wcu__benefit-icon img {
	width: 24px;
	height: 24px;
	display: block;
}

.wp-block-grp-why-choose-us .grp-wcu__benefit-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}
.wp-block-grp-why-choose-us .grp-wcu__benefit-title {
	color: var( --grp-color-gray-950 );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.wp-block-grp-why-choose-us .grp-wcu__benefit-desc {
	color: var( --grp-color-gray-500 );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* ─── Tablet (768-1279) — Figma node 518:21088 ─────────────────────
 * Section padding 64×32 (py-64 px-32), container width 704, image full
 * width at 704×424, 2×2 benefits grid with gap 24. Header stays at
 * desktop font sizes (eyebrow 14, title 32, subtitle 20). */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-why-choose-us { padding: 64px 0; }
	.wp-block-grp-why-choose-us .grp-wcu__container {
		padding: 0 32px;
		gap: 40px;
	}
	.wp-block-grp-why-choose-us .grp-wcu__content {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.wp-block-grp-why-choose-us .grp-wcu__image {
		max-height: none;
		aspect-ratio: 704 / 424;
	}
	.wp-block-grp-why-choose-us .grp-wcu__benefits {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 24px;
	}
}

/* ─── Mobile (≤767px) — Figma node 518:21672 ───────────────────────
 * Section padding 48×16 (py-48 px-16), container width 343, image
 * 343×249, benefits stacked 1×4 with gap 16. Smaller header fonts:
 * eyebrow 12, title 28, subtitle 16. */
@media ( max-width: 767px ) {
	.wp-block-grp-why-choose-us { padding: 48px 0; }
	.wp-block-grp-why-choose-us .grp-wcu__container {
		padding: 0 16px;
		gap: 40px;
	}
	.wp-block-grp-why-choose-us .grp-wcu__eyebrow  { font-size: 12px; }
	.wp-block-grp-why-choose-us .grp-wcu__title    { font-size: 28px; }
	.wp-block-grp-why-choose-us .grp-wcu__subtitle { font-size: 16px; }
	.wp-block-grp-why-choose-us .grp-wcu__content {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.wp-block-grp-why-choose-us .grp-wcu__image {
		max-height: none;
		aspect-ratio: 343 / 249;
	}
	.wp-block-grp-why-choose-us .grp-wcu__benefits {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.wp-block-grp-why-choose-us .grp-wcu__benefit {
		min-height: auto;
		padding: 22px;
		gap: 33px;
	}
}

/* ─── Block: grp/lab-verified ────────────────────────────────────────
 * Figma node 528:22786 (desktop) / 518:21137 (tablet) / 518:21721 (mobile).
 * White section. Desktop: 2-column row (text-left 628 + card-right 519,
 * gap 133). Tablet/Mobile: vertical stack (text on top, card+image below).
 * Section paddings 90×80 / 64×32 / 48×16 per Figma. ──────────────── */

.wp-block-grp-lab-verified {
	font-family: var( --grp-font-family );
	background: var( --grp-color-gray-0 );
	color: var( --grp-color-gray-950 );
	padding: 90px 0;
}

.wp-block-grp-lab-verified.alignfull {
	margin-left:  calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
}

.wp-block-grp-lab-verified .grp-lv__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp( 16px, 5.5vw, 80px );
	display: grid;
	grid-template-columns: minmax( 0, 628px ) minmax( 0, 519px );
	gap: clamp( 40px, 9.2vw, 133px );
	align-items: center;
}

/* Left text column — gap 50 between title block and methods list. */
.wp-block-grp-lab-verified .grp-lv__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	min-width: 0;
}

/* Title block: eyebrow (gap 24) → desc-block (title 32 + gap 16 + subtitle 20). */
.wp-block-grp-lab-verified .grp-lv__title-block {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.wp-block-grp-lab-verified .grp-lv__eyebrow {
	color: var( --grp-color-primary-600 );
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
	margin: 0;
}
.wp-block-grp-lab-verified .grp-lv__desc-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}
.wp-block-grp-lab-verified .grp-lv__title {
	color: var( --grp-color-gray-950 );
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.wp-block-grp-lab-verified .grp-lv__subtitle {
	color: var( --grp-color-gray-500 );
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* 3 method rows — gap 32. Each row: icon-circle + text. */
.wp-block-grp-lab-verified .grp-lv__methods {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}
.wp-block-grp-lab-verified .grp-lv__method {
	display: flex;
	gap: 16px;
	align-items: center;
	width: 100%;
}
.wp-block-grp-lab-verified .grp-lv__method-icon {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var( --grp-color-primary-50 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
}
.wp-block-grp-lab-verified .grp-lv__method-icon img {
	width: 24px;
	height: 24px;
	display: block;
}
.wp-block-grp-lab-verified .grp-lv__method-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
}
.wp-block-grp-lab-verified .grp-lv__method-title {
	color: var( --grp-color-gray-950 );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.wp-block-grp-lab-verified .grp-lv__method-desc {
	color: var( --grp-color-gray-500 );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* Right aside — certificate card + image, gap 26. */
.wp-block-grp-lab-verified .grp-lv__aside {
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: stretch;
	min-width: 0;
}

/* Certificate card — border, p-27, rounded-24. */
.wp-block-grp-lab-verified .grp-lv__certificate {
	background: var( --grp-color-gray-0 );
	border: 1px solid var( --grp-color-gray-200 );
	border-radius: 24px;
	padding: 27px;
	display: flex;
	flex-direction: column;
	gap: 13px;
	width: 100%;
	box-sizing: border-box;
}

.wp-block-grp-lab-verified .grp-lv__cert-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var( --grp-color-gray-200 );
	gap: 8px;
}
.wp-block-grp-lab-verified .grp-lv__cert-title {
	color: #4b5563;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
.wp-block-grp-lab-verified .grp-lv__cert-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	background: rgba( 0, 166, 62, 0.1 );
	color: #016630;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	border-radius: 999px;
	white-space: nowrap;
}

.wp-block-grp-lab-verified .grp-lv__cert-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var( --grp-color-gray-200 );
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #4b5563;
}
.wp-block-grp-lab-verified .grp-lv__cert-row.is-last {
	border-bottom: none;
}
.wp-block-grp-lab-verified .grp-lv__cert-label {
	color: #4b5563;
}
.wp-block-grp-lab-verified .grp-lv__cert-value {
	color: #4b5563;
	white-space: nowrap;
}
.wp-block-grp-lab-verified .grp-lv__cert-value.is-green {
	color: #00a63e;
}

/* Lab image — full width of aside, rounded 24, fixed height per Figma. */
.wp-block-grp-lab-verified .grp-lv__image {
	width: 100%;
	height: 298px;
	border-radius: 24px;
	overflow: hidden;
}
.wp-block-grp-lab-verified .grp-lv__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Tablet (768-1279) — Figma 518:21137 ────────────────────────────
 * Section padding 64×32, container becomes a single column (text on top,
 * aside below), both halves full width 704. */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-lab-verified { padding: 64px 0; }
	.wp-block-grp-lab-verified .grp-lv__container {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0 32px;
	}
	.wp-block-grp-lab-verified .grp-lv__text,
	.wp-block-grp-lab-verified .grp-lv__aside {
		width: 100%;
		max-width: none;
	}
}

/* ─── Mobile (≤767px) — Figma 518:21721 ──────────────────────────────
 * Section padding 48×16. Smaller fonts: eyebrow 12, title 28, subtitle 16,
 * method title 16. Certificate card padding 27×16. Image height 220. */
@media ( max-width: 767px ) {
	.wp-block-grp-lab-verified { padding: 48px 0; }
	.wp-block-grp-lab-verified .grp-lv__container {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 0 16px;
	}
	.wp-block-grp-lab-verified .grp-lv__eyebrow {
		font-size: 12px;
		text-align: center;
	}
	.wp-block-grp-lab-verified .grp-lv__title    { font-size: 28px; }
	.wp-block-grp-lab-verified .grp-lv__subtitle { font-size: 16px; }
	.wp-block-grp-lab-verified .grp-lv__method-title { font-size: 16px; }
	.wp-block-grp-lab-verified .grp-lv__certificate { padding: 16px 27px; }
	.wp-block-grp-lab-verified .grp-lv__image { height: 220px; }
}

/* ─── Block: grp/compare ────────────────────────────────────────────
 * Figma node 528:22844 (desktop) / 518:21195 (tablet) / 518:21779 (mobile).
 * Desktop: 3-column table (Features 356 + Us 464 + Them 410), with row
 * dividers and a brand-logo image as the "Us" header.
 * Tablet/Mobile: stacked cards (rounded 16) per row — feature title bar
 * on top, then Grey/Generic sub-blocks (side-by-side on tablet, stacked
 * vertically on mobile). ─────────────────────────────────────────── */

.wp-block-grp-compare {
	font-family: var( --grp-font-family );
	background: var( --grp-color-primary-50 );
	color: var( --grp-color-gray-950 );
	padding: 90px 0;
}

.wp-block-grp-compare.alignfull {
	margin-left:  calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
}

.wp-block-grp-compare .grp-compare__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp( 16px, 5.5vw, 80px );
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
}

/* Header — centered. Figma sets max 895 but long custom titles should be
   allowed to use the full container width on any breakpoint (same call as
   Why Choose Us). */
.wp-block-grp-compare .grp-compare__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
}
.wp-block-grp-compare .grp-compare__eyebrow {
	color: var( --grp-color-primary-600 );
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
	margin: 0;
}
.wp-block-grp-compare .grp-compare__title {
	color: var( --grp-color-gray-950 );
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.wp-block-grp-compare .grp-compare__subtitle {
	color: var( --grp-color-gray-500 );
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* ─── Table container (white card) — different paddings per breakpoint */
.wp-block-grp-compare .grp-compare__table {
	background: var( --grp-color-gray-0 );
	border-radius: 24px;
	padding: 16px 23px;
	width: 100%;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax( 0, 356fr ) minmax( 0, 464fr ) minmax( 0, 410fr );
	row-gap: 0;
	column-gap: 0;
	align-items: stretch;
}

/* Header row — labels + brand logo image */
.wp-block-grp-compare .grp-compare__thead {
	display: contents;
}
.wp-block-grp-compare .grp-compare__th {
	display: flex;
	align-items: center;
	padding: 14px 0;
	min-height: 68px;
	border-bottom: 1px solid var( --grp-color-gray-200 );
	color: #9CA3AF;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
.wp-block-grp-compare .grp-compare__th--us {
	padding: 0;
	justify-content: flex-start;
}
.wp-block-grp-compare .grp-compare__brand-logo {
	display: block;
	height: 47px;
	width: auto;
	max-width: 102px;
	object-fit: contain;
}

/* Data rows */
.wp-block-grp-compare .grp-compare__row {
	display: contents;
}
.wp-block-grp-compare .grp-compare__cell {
	padding: 34px 0;
	min-height: 90px;
	border-bottom: 1px solid var( --grp-color-gray-200 );
	display: flex;
	align-items: center;
	color: #4B5563;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
.wp-block-grp-compare .grp-compare__cell--feature {
	color: #4B5563;
	font-weight: 700;
}
.wp-block-grp-compare .grp-compare__cell-label {
	display: none; /* hidden on desktop — table column headers serve as labels */
}
.wp-block-grp-compare .grp-compare__cell-value {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wp-block-grp-compare .grp-compare__cell-icon {
	width: 20px;
	height: 20px;
	display: block;
	flex: none;
}

/* Last row — no bottom border */
.wp-block-grp-compare .grp-compare__row:last-of-type .grp-compare__cell {
	border-bottom: none;
}

/* CTA button — Primary/600 pill */
.wp-block-grp-compare .grp-compare__footer {
	display: flex;
	justify-content: center;
}
.wp-block-grp-compare .grp-compare__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	background: var( --grp-color-primary-600 );
	color: var( --grp-color-gray-0 );
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 999px;
	white-space: nowrap;
	transition: opacity 120ms ease;
}
.wp-block-grp-compare .grp-compare__cta:hover,
.wp-block-grp-compare .grp-compare__cta:focus {
	opacity: 0.92;
	color: var( --grp-color-gray-0 );
}

/* Editor-only: row remove button + add row button */
.wp-block-grp-compare .grp-compare__row-actions {
	display: contents;
}
.wp-block-grp-compare .grp-compare__row-actions > * {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}
.wp-block-grp-compare .grp-compare__add-row {
	grid-column: 1 / -1;
	padding-top: 16px;
	display: flex;
	justify-content: flex-start;
}

/* ─── Tablet (768-1279) — cards layout, 2-col compare per card ─── */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-compare { padding: 64px 0; }
	.wp-block-grp-compare .grp-compare__container {
		gap: 40px;
		padding: 0 32px;
	}
	.wp-block-grp-compare .grp-compare__table {
		padding: 24px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	/* Hide the desktop header row — each card has its own labels */
	.wp-block-grp-compare .grp-compare__thead { display: none; }

	/* Each .grp-compare__row becomes a self-contained card */
	.wp-block-grp-compare .grp-compare__row {
		display: flex;
		flex-direction: column;
		border: 1px solid var( --grp-color-gray-200 );
		border-radius: 16px;
		overflow: hidden;
		background: var( --grp-color-gray-0 );
	}
	.wp-block-grp-compare .grp-compare__cell {
		padding: 0;
		min-height: 0;
		border-bottom: none;
	}
	.wp-block-grp-compare .grp-compare__cell--feature {
		display: flex;
		align-items: center;
		padding: 14px 20px;
		min-height: 50px;
		border-bottom: 1px solid var( --grp-color-gray-200 );
		font-size: 14px;
		font-weight: 700;
		color: var( --grp-color-gray-950 );
	}
	/* The two compare halves render in a row inside the card */
	.wp-block-grp-compare .grp-compare__row {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
	.wp-block-grp-compare .grp-compare__cell--feature {
		grid-column: 1 / -1;
	}
	.wp-block-grp-compare .grp-compare__cell--us,
	.wp-block-grp-compare .grp-compare__cell--them {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 20px;
	}
	.wp-block-grp-compare .grp-compare__cell-label {
		display: block;
		color: #9CA3AF;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.3;
	}
	.wp-block-grp-compare .grp-compare__cell-value {
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		color: #4B5563;
		align-items: center;
	}
	.wp-block-grp-compare .grp-compare__cell-icon {
		width: 18px;
		height: 18px;
	}

	/* Hide brand-logo on tablet — not in Figma tablet design */
	.wp-block-grp-compare .grp-compare__brand-logo { display: none; }
}

/* ─── Mobile (≤767px) — cards with stacked Us/Them ───────────── */
@media ( max-width: 767px ) {
	.wp-block-grp-compare { padding: 48px 0; }
	.wp-block-grp-compare .grp-compare__container {
		gap: 32px;
		padding: 0 16px;
	}
	.wp-block-grp-compare .grp-compare__eyebrow { font-size: 12px; }
	.wp-block-grp-compare .grp-compare__title { font-size: 28px; }
	.wp-block-grp-compare .grp-compare__subtitle { font-size: 16px; }

	.wp-block-grp-compare .grp-compare__table {
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.wp-block-grp-compare .grp-compare__thead { display: none; }
	.wp-block-grp-compare .grp-compare__brand-logo { display: none; }

	.wp-block-grp-compare .grp-compare__row {
		display: flex;
		flex-direction: column;
		border: 1px solid var( --grp-color-gray-200 );
		border-radius: 16px;
		overflow: hidden;
		background: var( --grp-color-gray-0 );
	}
	.wp-block-grp-compare .grp-compare__cell {
		padding: 0;
		min-height: 0;
		border-bottom: none;
	}
	.wp-block-grp-compare .grp-compare__cell--feature {
		display: flex;
		align-items: center;
		padding: 14px 16px;
		min-height: 50px;
		border-bottom: 1px solid var( --grp-color-gray-200 );
		font-size: 14px;
		font-weight: 700;
		color: var( --grp-color-gray-950 );
	}
	.wp-block-grp-compare .grp-compare__cell--us,
	.wp-block-grp-compare .grp-compare__cell--them {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 12px;
	}
	.wp-block-grp-compare .grp-compare__cell-label {
		display: block;
		color: #9CA3AF;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.3;
	}
	.wp-block-grp-compare .grp-compare__cell-value {
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		color: #4B5563;
		align-items: center;
	}
	.wp-block-grp-compare .grp-compare__cell-icon {
		width: 18px;
		height: 18px;
	}
}

/* ─── Block: grp/faq ───────────────────────────────────────────────────
 * Figma nodes 528:22923 (desktop) / 518:21288 (tablet) / 518:21871 (mobile).
 * White section. Centered header (eyebrow + title + subtitle) and a stack
 * of FAQ items. Closed items render as a 99px-radius pill bar; open items
 * expand to a 24px-radius card with the answer inside.
 * Native <details>/<summary> drives open/close; view.js enforces
 * single-open behaviour. ──────────────────────────────────────────── */

.wp-block-grp-faq {
	font-family: var( --grp-font-family );
	background: var( --grp-color-gray-0 );
	color: var( --grp-color-gray-950 );
	padding: 90px 0;
}

.wp-block-grp-faq.alignfull {
	margin-left:  calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	width: 100vw;
	max-width: 100vw;
}

.wp-block-grp-faq .grp-faq__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 clamp( 16px, 5.5vw, 80px );
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

/* Header — centered, narrow column. */
.wp-block-grp-faq .grp-faq__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 895px;
}
.wp-block-grp-faq .grp-faq__eyebrow {
	color: var( --grp-color-primary-600 );
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-transform: uppercase;
	margin: 0;
}
.wp-block-grp-faq .grp-faq__title {
	color: var( --grp-color-gray-950 );
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}
.wp-block-grp-faq .grp-faq__subtitle {
	color: var( --grp-color-gray-500 );
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* Items list — gap 16, max width 846 per Figma desktop. */
.wp-block-grp-faq .grp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 21px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 846px;
}
.wp-block-grp-faq .grp-faq__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Native <details>/<summary> — closed = pill (99px radius), open = 24px card.
   `details` itself carries the background; transitioning border-radius is
   safe with rect-shaped content (no clipping artifacts). */
.wp-block-grp-faq .grp-faq__details {
	background: var( --grp-color-primary-50 );
	border-radius: 999px;
	padding: 24px;
	transition: border-radius 200ms ease;
}
.wp-block-grp-faq .grp-faq__details[ open ] {
	border-radius: 24px;
}

/* Summary row — question on the left, chevron on the right.
   Removes the default disclosure triangle and makes the whole row tappable. */
.wp-block-grp-faq .grp-faq__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	color: var( --grp-color-gray-900 );
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
.wp-block-grp-faq .grp-faq__summary::-webkit-details-marker { display: none; }
.wp-block-grp-faq .grp-faq__summary::marker { display: none; content: ''; }

.wp-block-grp-faq .grp-faq__question {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 140%;
}

/* Chevron — pure-CSS triangle drawn from the Figma SVG paths (rotates
   180° when [open]). Kept here so we don't need to inline-load the SVG
   for every FAQ item — saves DOM weight. */
.wp-block-grp-faq .grp-faq__chevron {
	flex: none;
	width: 20px;
	height: 20px;
	display: inline-block;
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%23437FC2' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/></svg>" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 200ms ease;
}
.wp-block-grp-faq .grp-faq__details[ open ] .grp-faq__chevron {
	transform: rotate( 180deg );
}

/* Answer — only visible when [open]. Margin separates it from the summary. */
.wp-block-grp-faq .grp-faq__answer {
	margin-top: 16px;
	color: #4B5563;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}
.wp-block-grp-faq .grp-faq__answer p { margin: 0 0 12px; }
.wp-block-grp-faq .grp-faq__answer p:last-child { margin-bottom: 0; }
.wp-block-grp-faq .grp-faq__answer a { color: var( --grp-color-primary-600 ); text-decoration: underline; }

/* Editor-only inline "× Remove" button under each item. */
.wp-block-grp-faq .grp-faq__item-actions {
	margin-top: 4px;
}

/* ─── Tablet (768-1279) — Figma 518:21288 ──────────────────────── */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-faq { padding: 64px 0; }
	.wp-block-grp-faq .grp-faq__container {
		padding: 0 32px;
		gap: 40px;
	}
	.wp-block-grp-faq .grp-faq__list {
		max-width: 704px;
	}
}

/* ─── Mobile (≤767) — Figma 518:21871 ──────────────────────────── */
@media ( max-width: 767px ) {
	.wp-block-grp-faq { padding: 48px 0; }
	.wp-block-grp-faq .grp-faq__container {
		padding: 0 16px;
		gap: 40px;
	}
	.wp-block-grp-faq .grp-faq__eyebrow  { font-size: 12px; }
	.wp-block-grp-faq .grp-faq__title    { font-size: 28px; }
	.wp-block-grp-faq .grp-faq__subtitle { font-size: 16px; }
	.wp-block-grp-faq .grp-faq__details  { padding: 18px 20px; }
	.wp-block-grp-faq .grp-faq__summary  { font-size: 14px; }
	.wp-block-grp-faq .grp-faq__answer   { font-size: 12px; margin-top: 12px; }
}

/* ─── Block: grp/footer ──────────────────────────────────────────────
 * Figma node 528:22967 (desktop) / 518:21332 (tablet) / 518:21915 (mobile).
 * Section bg #F0F5FF, full-width.
 *   Desktop: padding 32×80, top row = company info (217w) + 3-col nav
 *            (each ~146w, ~161 gap), bottom row = legal + payment strip
 *            on one line, divider 1px gray-200, padding-top 12.
 *   Tablet:  padding 32, company info stacks above nav (3 cols stay,
 *            each flex:1), bottom row stays one line.
 *   Mobile:  padding 32×16, every column stacks vertically (incl. bottom).
 * ─────────────────────────────────────────────────────────────────── */

.wp-block-grp-footer {
	font-family: var( --grp-font-family );
	background: var( --grp-color-primary-50 );
	padding: 32px 80px;
	color: #4A5565;
	/* Full-bleed escape: when the block is rendered inside a Woodmart
	   `.container` (or any constrained-width wrapper), the standard
	   `alignfull` class only fills its parent. The `100vw` trick stretches
	   the section across the viewport regardless of where it sits. */
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
	box-sizing: border-box;
}
.wp-block-grp-footer .grp-footer__container {
	display: flex !important;
	flex-direction: column !important;
	gap: 32px;
	width: 100%;
}

/* Top half: company info on the left, 3-col nav on the right. */
.wp-block-grp-footer .grp-footer__links {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
}
.wp-block-grp-footer .grp-footer__company {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	width: 217px;
	flex: none;
}
.wp-block-grp-footer .grp-footer__logo {
	display: block;
	max-width: 206px;
	height: auto;
}
.wp-block-grp-footer .grp-footer__logo--placeholder {
	width: 206px;
	height: 94px;
	background: rgba( 67, 127, 194, 0.08 );
	border: 1px dashed rgba( 67, 127, 194, 0.35 );
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --grp-color-primary-700 );
	font-size: 12px;
	text-align: center;
	padding: 0 12px;
}
.wp-block-grp-footer .grp-footer__tagline {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #4A5565;
	margin: 0;
	width: 100%;
	word-break: break-word;
}

/* 3-column menu nav (right side on desktop). */
.wp-block-grp-footer .grp-footer__nav {
	display: flex !important;
	flex-direction: row;
	align-items: flex-start;
	gap: 161px;
}
.wp-block-grp-footer .grp-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 146px;
	flex: none;
}
.wp-block-grp-footer .grp-footer__col-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #101828;
	margin: 0;
	width: 100%;
}
.wp-block-grp-footer .grp-footer__col-list,
.wp-block-grp-footer .grp-footer__col-list ul,
.wp-block-grp-footer ul.grp-footer__col-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}
.wp-block-grp-footer .grp-footer__col-list li,
.wp-block-grp-footer .grp-footer__col-list li::marker {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.wp-block-grp-footer .grp-footer__col-list li::before {
	display: none !important;
	content: none !important;
}
.wp-block-grp-footer .grp-footer__col-list a {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #4A5565;
	text-decoration: none;
	transition: color 120ms ease;
}
.wp-block-grp-footer .grp-footer__col-list a:hover,
.wp-block-grp-footer .grp-footer__col-list a:focus {
	color: var( --grp-color-primary-600 );
	text-decoration: underline;
}
/* Editor-only placeholder shown when no menu has been selected yet. */
.wp-block-grp-footer .grp-footer__col-menu-placeholder {
	font-size: 12px;
	color: var( --grp-color-gray-500 );
	font-style: italic;
}

/* Bottom half: divider + legal text left, payment strip right. */
.wp-block-grp-footer .grp-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	border-top: 1px solid var( --grp-color-gray-200 );
	padding-top: 12px;
}
.wp-block-grp-footer .grp-footer__bottom-text {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #4A5565;
	margin: 0;
}
.wp-block-grp-footer .grp-footer__payments {
	display: block;
	width: 222px;
	height: 39px;
	object-fit: contain;
	flex: none;
}
.wp-block-grp-footer .grp-footer__payments--placeholder {
	background: rgba( 67, 127, 194, 0.08 );
	border: 1px dashed rgba( 67, 127, 194, 0.35 );
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var( --grp-color-primary-700 );
	width: auto;
	min-width: 222px;
	padding: 0 12px;
}

/* ─── Footer responsive ──────────────────────────────────────────── */
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-footer { padding: 32px; }
	.wp-block-grp-footer .grp-footer__links {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.wp-block-grp-footer .grp-footer__company {
		width: 100%;
	}
	.wp-block-grp-footer .grp-footer__nav {
		gap: 16px;
		width: 100%;
	}
	.wp-block-grp-footer .grp-footer__col {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}
@media ( max-width: 767px ) {
	.wp-block-grp-footer { padding: 32px 16px; }
	.wp-block-grp-footer .grp-footer__links {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.wp-block-grp-footer .grp-footer__company {
		width: 100%;
	}
	.wp-block-grp-footer .grp-footer__nav {
		flex-direction: column;
		gap: 32px;
		width: 100%;
	}
	.wp-block-grp-footer .grp-footer__col {
		width: 100%;
	}
	.wp-block-grp-footer .grp-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* ─── Woodmart theme overrides ────────────────────────────────────────
 * Woodmart applies a few theme-wide rules that bleed into our blocks
 * with higher specificity than our `var(--grp-font-family)` declarations.
 * The rules below force the design back to the Figma intent. Documented
 * by an audit at tmp/figma-live-audit/2026-05-27T11-22-40Z/audit-report.md.
 *
 * `!important` is used reluctantly here — these are not arbitrary tweaks,
 * they're explicit defeat of theme styles that override layout-level
 * design tokens.
 * ─────────────────────────────────────────────────────────────────── */

/* 1. Force Inter font-family on every text element inside any grp/* block.
   Woodmart's `body h2 { font-family: 'Poppins' }` and its variants for h1/h3/h4
   beat our `:root { --grp-font-family: "Inter" ... }` cascade. */
.wp-block-grp-hero,
.wp-block-grp-hero *,
.wp-block-grp-catalog,
.wp-block-grp-catalog *,
.wp-block-grp-why-choose-us,
.wp-block-grp-why-choose-us *,
.wp-block-grp-lab-verified,
.wp-block-grp-lab-verified *,
.wp-block-grp-compare,
.wp-block-grp-compare *,
.wp-block-grp-faq,
.wp-block-grp-faq * {
	font-family: var( --grp-font-family ) !important;
}

/* 2. Drop Woodmart's `button { text-transform: uppercase }` for tab pills
   and the Add-to-Cart button. Figma uses mixed case. */
.wp-block-grp-catalog .grp-catalog__tab,
.wp-block-grp-catalog .grp-catalog__tab span,
.wp-block-grp-catalog .grp-catalog__card-cta,
.wp-block-grp-catalog .grp-catalog__card-cta span,
.wp-block-grp-catalog .grp-catalog__shop-link,
.wp-block-grp-compare .grp-compare__cta,
.wp-block-grp-hero .grp-hero__btn,
.wp-block-grp-hero .grp-hero__btn span {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Force product card "Add to cart" button height to Figma spec (32px).
   Woodmart's `.button` rule adds min-height/padding that defaults to ~42px
   regardless of our padding setting. Hard-pin height + zero out vertical
   padding so the height is determined by `height` alone. */
.wp-block-grp-catalog .grp-catalog__card-cta {
	height: 32px !important;
	min-height: 0 !important;
	padding-block: 0 !important;
	line-height: 1 !important;
}

/* 3. Force the product card price back to dark gray. WooCommerce's
   default `.price .amount { color: <green> }` injects an inner span that
   our top-level `.grp-catalog__card-price { color: ... }` rule doesn't
   reach. The `del`/`ins` rules below keep sale-price strikethrough subtle
   without losing its grayed-out look. */
.wp-block-grp-catalog .grp-catalog__card-price,
.wp-block-grp-catalog .grp-catalog__card-price .amount,
.wp-block-grp-catalog .grp-catalog__card-price .woocommerce-Price-amount,
.wp-block-grp-catalog .grp-catalog__card-price bdi,
.wp-block-grp-catalog .grp-catalog__card-price ins,
.wp-block-grp-catalog .grp-catalog__card-price ins .amount {
	color: var( --grp-color-gray-900 ) !important;
}
.wp-block-grp-catalog .grp-catalog__card-price del,
.wp-block-grp-catalog .grp-catalog__card-price del .amount {
	color: var( --grp-color-gray-500 ) !important;
}

/* 4. Defeat Woodmart's block-spacing rule:
   `:is(.wd-entry-content, .entry-content, .is-layout-flow, .is-layout-constrained, ...) > *
       { margin-block: 0 var(--wd-block-spacing) }`
   This rule pushes margin-bottom (~24px) onto every direct child of `.entry-content`
   — including EACH of our blocks. The cumulative effect: Catalog/WCU/Lab-Verified
   /Compare/FAQ all sit 24px lower than the Figma layout expects.

   The same rule applies internally if our blocks contain a `.is-layout-flow`
   wrapper (some Gutenberg internals add that), so we also reset margins on
   ALL descendants — we manage every gap with flex/grid `gap`, never margins. */
.entry-content > .wp-block-grp-hero,
.entry-content > .wp-block-grp-catalog,
.entry-content > .wp-block-grp-why-choose-us,
.entry-content > .wp-block-grp-lab-verified,
.entry-content > .wp-block-grp-compare,
.entry-content > .wp-block-grp-faq,
.wp-block-grp-hero *,
.wp-block-grp-catalog *,
.wp-block-grp-why-choose-us *,
.wp-block-grp-lab-verified *,
.wp-block-grp-compare *,
.wp-block-grp-faq * {
	margin-block: 0 !important;
}

/* Re-establish FAQ answer paragraph spacing — overrides the universal
   reset above (higher specificity via class chain + !important). */
.wp-block-grp-faq .grp-faq__answer p {
	margin-block: 0 0 12px !important;
}
.wp-block-grp-faq .grp-faq__answer p:last-child {
	margin-block-end: 0 !important;
}

/* Re-establish layout gaps killed by the universal margin-reset above.
   These are NOT theme noise — they are explicit Figma design spacings
   that happen to live in `margin-bottom`/`margin-top` rather than flex `gap`. */

/* Catalog: header (text + tabs) → products grid gap.
   Figma: 24 desktop / 40 tablet / 32 mobile. */
.wp-block-grp-catalog .grp-catalog__header {
	margin-block-end: 24px !important;
}
.wp-block-grp-catalog .grp-catalog__footer {
	margin-block-start: 32px !important;
}
@media ( max-width: 1279px ) and ( min-width: 768px ) {
	.wp-block-grp-catalog .grp-catalog__header {
		margin-block-end: 40px !important;
	}
}
@media ( max-width: 767px ) {
	.wp-block-grp-catalog .grp-catalog__header {
		margin-block-end: 32px !important;
	}
}

/* FAQ: question → answer gap inside open <details>.
   Figma: 22 desktop / 22 tablet / 16 mobile. */
.wp-block-grp-faq .grp-faq__answer {
	margin-block-start: 22px !important;
}
@media ( max-width: 767px ) {
	.wp-block-grp-faq .grp-faq__answer {
		margin-block-start: 16px !important;
	}
}