/*
 * BOCO_WP component CSS
 *
 * Utility classes layered on top of theme.json. Apply via the
 * Block Editor's "Additional CSS class(es)" field on any block.
 *
 * Mirrors the design tokens locked in /site_project_files/site/assets/css/styles.css.
 */

/* ---------- font smoothing (matches reference styles.css) ----------
   Without antialiased, macOS Chrome renders Avenir Regular with subpixel
   smoothing that makes the body copy look chunkier than the design. */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------- sticky footer ---------- */
/* When page content is shorter than the viewport, push the footer to the
   bottom of the screen. Body becomes a flex column, the wp-site-blocks
   wrapper grows to fill, and main inside it also grows. */
html, body { min-height: 100vh; }
body { display: flex; flex-direction: column; }
.wp-site-blocks { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group[role="main"],
main.wp-block-group { flex: 1 0 auto; }
.wp-site-blocks > footer,
.wp-site-blocks > footer.wp-block-template-part { flex-shrink: 0; }

/* ---------- paragraph weight ---------- */
p, p.wp-block-paragraph {
	font-weight: 400;
}

/* ---------- eyebrow ---------- */
/* Matches the homepage eyebrow: uppercase, tracked, meta-size sans in orange.
   (The home page sets these inline; aligning the base brings every other
   template — brand, archive, about — into the same editorial voice.) */
.eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	margin: 0 0 18px;
}

/* ---------- lede ---------- */
.lede {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.45;
	color: var(--wp--preset--color--medium-green);
}

/* ---------- heading scale ----------
   Display headings (h1/h2) default to Kepler Display italic — the editorial
   voice established on the home page, now the site-wide default (also set in
   theme.json so the editor shows it as the default and authors can override
   the font / style per block). Functional subheads (h3–h6) stay in sans. */
h1, h1.wp-block-heading,
h2, h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--kepler-display);
	font-style: italic;
	font-weight: 200;
	color: #093529;
}
h3, h3.wp-block-heading,
h4, h4.wp-block-heading,
h5, h5.wp-block-heading,
h6, h6.wp-block-heading {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	color: #093529;
}
/* Italic serif reads best with near-normal tracking and modestly tight leading
   (the root 1.6 would leave display type far too airy). */
h1, h1.wp-block-heading {
	line-height: 1.12;
	letter-spacing: 0;
}
h2, h2.wp-block-heading {
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1.2;
	letter-spacing: 0;
}
h3, h3.wp-block-heading {
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.35;
}
h4, h4.wp-block-heading {
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.4;
}

/* Editorial italic accent — wrap accent words inside any heading via
   "Additional CSS class" in the block editor: e.g. *commerce* in italics.
   Mirrors boostedcommerce.com's `.header-italic` treatment. */
.italic-accent {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* Italics now inherit the active font family (Atten New on body, or whatever
   Kepler variant an author picks via the font selector). Use the `.italic-accent`
   class above as an opt-in for the Times-style serif italic accent. */

.hero-h1 { max-width: none; }

/* ---------- section helpers ---------- */
/* Default vertical rhythm between sections/groups. !important is deliberate:
   the patterns bake per-section padding into inline styles that get saved
   into each page's content, so a plain rule can't retighten pages that are
   already built — this override reins them all in, existing and new. */
.section {
	padding-block: clamp(32px, 3vw, 64px) !important;
}
.section--alt {
	background: var(--wp--preset--color--light-grey);
	border: 1px solid var(--wp--preset--color--light-green);
}
.section--forest,
.section--forest.has-light-green-background-color,
.section--forest.has-background {
	background: #F0F5F5 !important;
	color: #093529;
}
.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4 { color: #093529; }
.section--forest p  { color: #093529; }

/* ---------- hero collage (4-tile placeholder) ---------- */
.hero-visual {
	aspect-ratio: 5 / 4;
	background: var(--wp--preset--color--light-green);
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 14px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1px;
}
.hero-visual > .hero-tile,
.hero-visual > * {
	background: var(--wp--preset--color--light-grey);
	min-height: 100%;
	margin: 0;
	border: 0;
}
.hero-visual > figure.hero-tile {
	overflow: hidden;
	display: block;
}
.hero-visual > figure.hero-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- block button: ghost variant override ----------
   theme.json applies button styles via :root :where(.wp-element-button)
   which has very low specificity. .btn-ghost lives on the wrapper
   (.wp-block-button), so we need to target the inner link. */
.wp-block-button.btn-ghost > .wp-block-button__link,
.wp-block-button.btn-ghost > .wp-block-button__link:active,
.wp-block-button.btn-ghost > .wp-block-button__link:visited,
.wp-block-button.is-style-outline.btn-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--light-green);
	border: 1px solid var(--wp--preset--color--light-green);
	transition: background-color 160ms ease, color 160ms ease;
}
.wp-block-button.btn-ghost > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--light-green);
	color: #fff;
}

/* ---------- brand card: whole card is the click target ---------- */
.brand-card { position: relative; cursor: pointer; }
.brand-card .arrow a::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.brand-card .arrow a { position: relative; z-index: 2; }

/* ---------- buttons ----------
   Primary styling lives in theme.json elements.button (orange bg, 14/22 padding,
   6px radius, 15px/700/0.01em). The .btn-primary class on the .wp-block-button
   wrapper is just a marker; we don't restyle the wrapper or we'd double-pad it.
   .btn-ghost overrides the inner anchor — see rule above the brand-card section. */
.wp-block-button.btn-primary > .wp-block-button__link {
	border: 1px solid transparent;
}

/* ---------- button style variations ----------
   Registered in inc/block-styles.php. Each pairs a base look with a hover
   background + text combination. Authors pick from the block's Styles panel.
   Selector pattern: .wp-block-button.is-style-<name> > .wp-block-button__link.
   Specificity (0,2,1) is enough to beat theme.json's element-level button rule. */

/* Green base → Orange on hover (white text both states). */
.wp-block-button.is-style-orange-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-orange-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-orange-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

/* Orange base → Green on hover. */
.wp-block-button.is-style-green-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-green-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-green-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
}

/* White base + green text → Green fill + white text on hover. */
.wp-block-button.is-style-inverse-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--medium-green);
	border: 1px solid var(--wp--preset--color--medium-green);
}
.wp-block-button.is-style-inverse-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-inverse-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--medium-green);
}

/* Transparent outline → Green fill on hover. */
.wp-block-button.is-style-outline-fill > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--medium-green);
	border: 1px solid var(--wp--preset--color--medium-green);
}
.wp-block-button.is-style-outline-fill > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-fill > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--medium-green);
}

/* Transparent ghost → Orange text on hover (no background flip). */
.wp-block-button.is-style-ghost-orange > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--medium-green);
	border: 1px solid transparent;
}
.wp-block-button.is-style-ghost-orange > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost-orange > .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--orange);
}

/* Grey base → Green fill on hover. Soft secondary button. */
.wp-block-button.is-style-grey-green-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--medium-green);
}
.wp-block-button.is-style-grey-green-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-grey-green-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
}

/* Grey base → Orange fill on hover. Soft secondary, accent on intent. */
.wp-block-button.is-style-grey-orange-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--medium-green);
}
.wp-block-button.is-style-grey-orange-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-grey-orange-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

/* Green base → Grey on hover. Subtle pull-back hover. */
.wp-block-button.is-style-green-grey-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--medium-green);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-green-grey-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-green-grey-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--medium-green);
}

/* Orange base → Grey on hover. Subtle pull-back from a strong CTA. */
.wp-block-button.is-style-orange-grey-hover > .wp-block-button__link {
	background-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-orange-grey-hover > .wp-block-button__link:hover,
.wp-block-button.is-style-orange-grey-hover > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--medium-green);
}

/* ---------- image with button overlay ----------
   Composable pattern: a wp:group containing one wp:image + one wp:buttons
   row. The button is positioned absolute over the image, anchored bottom
   center with a small inset. Authors keep all the regular Button block
   controls (incl. block style hover variations). */
.image-button-overlay {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
}
.image-button-overlay > .image-button-overlay__media {
	margin: 0;
	display: block;
}
.image-button-overlay > .image-button-overlay__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* The wp:buttons wrapper is what the editor positions and what holds the
   layout (flex). Stretch it across the bottom so the button (or buttons)
   centers neatly above the image. */
.image-button-overlay > .image-button-overlay__cta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	margin: 0;
	z-index: 2;
	pointer-events: none; /* let the image still be clickable around the bar */
}
.image-button-overlay > .image-button-overlay__cta .wp-block-button {
	pointer-events: auto; /* but the button itself stays interactive */
}
.image-button-overlay > .image-button-overlay__cta .wp-block-button__link {
	min-width: 60%;
}

/* ---------- stats band ----------
   The default background (#F0F5F5) only applies when the author hasn't
   picked one in the editor — :not(.has-background) keeps editor control
   precedence. Color + padding + border are unconditional. */
.stats-band:not(.has-background) {
	background: #F0F5F5;
}
.stats-band {
	color: #093529;
	padding-block: clamp(48px, 6vw, 72px);
	border: 1px solid var(--wp--preset--color--light-green);
}
.stats-band .stat .num {
	font-family: var(--wp--preset--font-family--kepler-display);
	font-size: clamp(28px, 3vw, 38px);
	font-style: italic;
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: 0;
	color: #093529;
}
.stats-band .stat .lbl {
	font-family: var(--wp--preset--font-family--sans);
	margin-top: 6px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #093529;
	line-height: 1.4;
}

/* ---------- brand card (editorial: square image, green border,
   brand-name floats on top of the image) ---------- */
.brand-card {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	transition: none;
}
.brand-card:hover {
	transform: none;
	box-shadow: none;
}
.brand-card .img,
.brand-card figure.img {
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--light-grey);
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 0;
	overflow: hidden;
	margin: 0;
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.brand-card .img img {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
}
/* Make wp:post-template grid cells stretch to row height so all cards in
   a row are equal height. */
.wp-block-post-template.is-layout-grid > .wp-block-post,
.wp-block-post-template.is-layout-grid > li {
	height: 100%;
	display: flex;
}

/* Responsive column control for wp:post-template grid layouts.
   Driven by the editor JS in assets/js/editor-responsive-controls.js which
   adds Tablet/Mobile dropdowns under the block's Layout panel and writes
   these utility classes onto the block's className. */
@media (max-width: 980px) {
	.wp-block-post-template.is-layout-grid.cols-tablet-1 { grid-template-columns: 1fr !important; }
	.wp-block-post-template.is-layout-grid.cols-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wp-block-post-template.is-layout-grid.cols-tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.wp-block-post-template.is-layout-grid.cols-tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.wp-block-post-template.is-layout-grid.cols-mobile-1 { grid-template-columns: 1fr !important; }
	.wp-block-post-template.is-layout-grid.cols-mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.wp-block-post-template.is-layout-grid.cols-mobile-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.wp-block-post-template.is-layout-grid.cols-mobile-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Responsive aspect-ratio overrides for wp:post-featured-image and related
   figure/img elements. Desktop AR is set via the block's built-in toolbar
   control; these override at tablet (≤980px) and mobile (≤600px). The editor
   JS provides Tablet/Mobile dropdowns; values write these utility classes. */
@media (max-width: 980px) {
	.ar-tablet-1-1, .ar-tablet-1-1 img { aspect-ratio: 1/1 !important; }
	.ar-tablet-4-3, .ar-tablet-4-3 img { aspect-ratio: 4/3 !important; }
	.ar-tablet-3-2, .ar-tablet-3-2 img { aspect-ratio: 3/2 !important; }
	.ar-tablet-16-9, .ar-tablet-16-9 img { aspect-ratio: 16/9 !important; }
	.ar-tablet-3-4, .ar-tablet-3-4 img { aspect-ratio: 3/4 !important; }
	.ar-tablet-2-3, .ar-tablet-2-3 img { aspect-ratio: 2/3 !important; }
	.ar-tablet-4-5, .ar-tablet-4-5 img { aspect-ratio: 4/5 !important; }
	.ar-tablet-auto, .ar-tablet-auto img { aspect-ratio: auto !important; }
}
@media (max-width: 600px) {
	.ar-mobile-1-1, .ar-mobile-1-1 img { aspect-ratio: 1/1 !important; }
	.ar-mobile-4-3, .ar-mobile-4-3 img { aspect-ratio: 4/3 !important; }
	.ar-mobile-3-2, .ar-mobile-3-2 img { aspect-ratio: 3/2 !important; }
	.ar-mobile-16-9, .ar-mobile-16-9 img { aspect-ratio: 16/9 !important; }
	.ar-mobile-3-4, .ar-mobile-3-4 img { aspect-ratio: 3/4 !important; }
	.ar-mobile-2-3, .ar-mobile-2-3 img { aspect-ratio: 2/3 !important; }
	.ar-mobile-4-5, .ar-mobile-4-5 img { aspect-ratio: 4/5 !important; }
	.ar-mobile-auto, .ar-mobile-auto img { aspect-ratio: auto !important; }
}
.brand-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
}
.brand-card * { text-align: left; }
/* WP auto-applies has-global-padding to constrained groups, which adds the
   site-wide root padding (clamp 20-48px) on top of our card padding. Strip it
   on the brand-card and its body so our local 22px padding is the only one. */
.brand-card.has-global-padding,
.brand-card .body.has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.brand-card .body.has-global-padding {
	padding-left: 22px !important;
	padding-right: 22px !important;
}
/* WP's `.is-layout-constrained > *` rule applies `margin-left: auto !important;
   margin-right: auto !important` to children. In a flex column (the body is
   display:flex), those auto margins override align-items:stretch, so each
   child shrinks to its content width and centers. Force back to full width. */
.brand-card .body > *,
.brand-card.is-layout-constrained > *,
.brand-card .body.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	width: 100%;
}
.brand-card .img,
.brand-card figure.img { flex-shrink: 0; }
/* Editorial brand-card body — repositioned as a small white name-bar
   floating over the bottom of the image. */
.brand-card .body,
.brand-card .body.has-global-padding,
.brand-card .wp-block-group.body.is-layout-constrained {
	position: absolute !important;
	left: 16px !important;
	right: 16px !important;
	bottom: 16px !important;
	width: auto !important;
	max-width: calc(100% - 32px) !important;
	background: #fff;
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 0;
	padding: 9px 14px !important;
	z-index: 2;
	flex: none;
	display: block;
	box-sizing: border-box !important;
	transition: background-color 200ms ease, border-color 200ms ease;
}
.brand-card:hover .body {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
}
/* Hide everything inside the body except the name (h3). Description and
   arrow stay in the DOM so the existing `.arrow a::before` overlay keeps
   the whole card clickable, but they're visually suppressed. */
.brand-card .body p:not(.arrow),
.brand-card .wp-block-post-excerpt p,
.brand-card .wp-block-post-excerpt__excerpt { display: none; }
.brand-card .arrow {
	margin: 0;
	font-size: 0;
	color: transparent;
	height: 0;
	overflow: hidden;
}
.brand-card .arrow a { color: transparent; font-size: 0; }
.brand-card h3 {
	color: var(--wp--preset--color--light-green);
	margin: 0;
	font-size: 20px;
	font-weight: 200;
	letter-spacing: 0.01em;
	line-height: 1.25;
	min-height: 0;
}
.brand-card h3 a,
.brand-card .wp-block-post-title a {
	color: var(--wp--preset--color--light-green);
	text-decoration: none;
}
.brand-card:hover h3,
.brand-card:hover h3 a,
.brand-card:hover .wp-block-post-title a { color: #fff; }

/* Equalize the row so all card images stretch to a uniform height. */
.wp-block-columns:has(> .brand-card) { align-items: stretch !important; }
.brand-card .arrow::after { content: none; }

/* ---------- capability card (AI 4-card) ---------- */
.cap-card {
	background: var(--wp--preset--color--light-grey);
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 14px;
	padding: 28px;
}
.section--alt .cap-card { background: #fff; }
.cap-card .num {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange);
	margin-bottom: 14px;
}

/* ---------- two-col category cards ---------- */
/* Equalize the row that holds dual-cards so both cards stretch to a common
   height, regardless of how much description copy each has. */
.wp-block-columns:has(> .dual-card) { align-items: stretch !important; }
.dual-card {
	background: var(--wp--preset--color--light-green);
	color: #fff;
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 14px;
	padding: clamp(28px, 4vw, 44px);
	display: flex;
	flex-direction: column;
}
.dual-card.is-light {
	background: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--medium-green);
}
.dual-card h3 {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 200;
	color: inherit;
}
.dual-card.is-light h3 { color: var(--wp--preset--color--light-green); }
/* Pin the tag pills to the bottom of the card regardless of copy length. */
.dual-card .tags { margin-top: auto; padding-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.dual-card .tag {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px; font-weight: 200;
	padding: 6px 12px;
	margin: 0;
	border-radius: 999px;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.22);
}
.dual-card.is-light .tag {
	background: #fff;
	border-color: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--light-green);
}

/* ---------- brand page: at-a-glance band ---------- */
.glance {
	background: var(--wp--preset--color--light-green);
	color: #fff;
	padding: 28px 0;
}
.glance .item .lbl {
	font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: rgba(255,255,255,0.6); margin-bottom: 6px;
}
.glance .item .val { font-size: 18px; font-weight: 400; color: #fff; line-height: 1.25; }
.glance .item .val a { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.glance .item .val a:hover { color: var(--wp--preset--color--orange); }

/* ---------- product card (best-sellers) ----------
   Product photography is typically a bottle/jar on a white background,
   so we contain the image (no crop) and pad inside the tile. The image is
   centered in its square via flex; centering the card text too keeps the
   photo, name, and rating on one shared center axis. */
.product-card { text-align: center; }
.product-card .img {
	aspect-ratio: 1/1;
	background: var(--wp--preset--color--light-grey);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 14px;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-card .img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.product-card .name { font-weight: 600; color: var(--wp--preset--color--medium-green); margin-bottom: 4px; font-size: 15px; }
.product-card .meta { font-size: 13px; color: var(--wp--preset--color--medium-green); }
.product-card .stars { color: var(--wp--preset--color--orange); margin-right: 6px; }

/* ---------- channel pills ---------- */
.channel-pill {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--light-grey);
	background: #fff;
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--light-green);
}
.channel-pill.is-target {
	background: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--medium-green);
}

/* ---------- review card ---------- */
.review {
	background: #fff;
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: 14px;
	padding: 28px;
}
.review .stars { color: var(--wp--preset--color--orange); font-size: 16px; margin-bottom: 14px; }
.review blockquote {
	margin: 0 0 16px;
	font-size: 19px;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--medium-green);
	font-weight: 400;
}
.review .who { font-size: 13px; color: var(--wp--preset--color--medium-green); }

/* ---------- CTA strip ---------- */
.cta-strip,
.cta-strip.has-light-green-background-color,
.cta-strip.has-background {
	background: #F0F5F5 !important;
	color: #093529;
	padding-block: clamp(48px, 6vw, 80px);
	text-align: center;
	/* Sit flush with the section above — override theme.json blockGap so the
	   alignfull strip has no white margin separating it from the previous block. */
	margin-block-start: 0 !important;
}
.cta-strip h2 { color: #093529; }
.cta-strip p { color: #093529; }

/* ---------- retail page: brand × channel grid ----------
   Borderless layout: cream header band + horizontal row dividers only,
   no outer card or vertical column lines. WP's default .wp-block-table
   applies a 1px border to every td/th — override to none. */
.fit-grid { margin: 0; }
.fit-grid > table,
table.fit-grid {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 200;
}
.fit-grid,
.fit-grid th,
.fit-grid td,
.fit-grid .yes,
.fit-grid .yes-sec,
.fit-grid .dash,
.wp-block-table.fit-grid th,
.wp-block-table.fit-grid td {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 200;
}
.fit-grid th,
.fit-grid td,
.wp-block-table.fit-grid th,
.wp-block-table.fit-grid td {
	padding: 18px 22px;
	text-align: left;
	font-size: 15px;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--light-grey) !important;
}
.fit-grid thead th {
	background: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--light-green);
	font-size: 13px;
	letter-spacing: 0.06em;
}
.fit-grid tbody tr:last-child td { border-bottom: 0 !important; }
.fit-grid tbody td:first-child { color: var(--wp--preset--color--light-green); }
.fit-grid .yes { color: var(--wp--preset--color--orange); }
.fit-grid .yes-sec { color: var(--wp--preset--color--medium-green); }
.fit-grid .dash { color: var(--wp--preset--color--medium-green); }
@media (max-width: 760px) {
	.fit-grid { overflow-x: auto; }
	.fit-grid th, .fit-grid td { padding: 14px 16px; white-space: nowrap; }
}

/* ---------- capability checklist ---------- */
.cap-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 32px; }
.cap-list li { position: relative; padding-left: 26px; font-weight: 600; color: var(--wp--preset--color--light-green); }
.cap-list li::before {
	content: '✓';
	position: absolute; left: 0; top: 0;
	color: var(--wp--preset--color--orange);
	font-weight: 700;
}
@media (max-width: 760px) { .cap-list { grid-template-columns: 1fr; } }

/* ---------- press list ---------- */
.press-list { list-style: none; padding: 0; margin: 32px 0 0; }
.press-list .press-row {
	display: grid;
	grid-template-columns: 140px 1fr 200px;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--light-grey);
	align-items: baseline;
}
.press-list .press-row:last-child { border-bottom: 1px solid var(--wp--preset--color--light-grey); }
.press-list .date {
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
	color: var(--wp--preset--color--orange);
}
.press-list .headline { font-size: 18px; font-weight: 600; line-height: 1.3; }
.press-list .headline a {
	color: var(--wp--preset--color--light-green);
	text-decoration: none;
}
.press-list .headline a:hover { color: var(--wp--preset--color--orange); }
.press-list .source-cell { text-align: right; }
.press-list .source,
.press-list .source-cell a {
	font-size: 14px;
	color: var(--wp--preset--color--medium-green);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
}
.press-list .source-cell a:hover { color: var(--wp--preset--color--light-green); border-color: var(--wp--preset--color--light-green); }
@media (max-width: 760px) {
	.press-list .press-row { grid-template-columns: 1fr; gap: 6px; }
	.press-list .source-cell { text-align: left; }
}

/* Full press archive link below the press list — eyebrow-style orange. */
.press-archive-link {
	margin: 28px 0 0;
}
.press-archive-link a {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--orange);
	text-decoration: none;
}
.press-archive-link a:hover { color: var(--wp--preset--color--orange); }

/* ---------- boilerplate block ----------
   The H2/eyebrow above the box are constrained to contentSize (1200px) and
   centered, so their text sits at the left edge of that 1200px column. We
   want the box's left edge to match. Compute the same auto-margin manually
   so the box doesn't drift to the section's outer padding on wide viewports. */
.boilerplate {
	background: var(--wp--preset--color--light-grey);
	border-left: 3px solid var(--wp--preset--color--orange);
	padding: 32px 36px;
	border-radius: 0 14px 14px 0;
	max-width: 760px;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	margin-right: auto !important;
}
.boilerplate p { font-size: 16px; color: var(--wp--preset--color--medium-green); margin: 0; }

/* ---------- header ---------- */
.site-header {
	position: sticky;
	top: 0;
	background: #F0F5F5;
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	z-index: 100;
}
/* The inner flex row (logo ↔ nav-cluster) gets max-width:1200px from WP's
   constrained-children rule, but max-width alone lets a flex container
   collapse to its content width. On block-template pages an outer
   <header class="wp-block-template-part"> changes the cascade and the row
   happens to expand; on hybrid PHP templates (single-brand.php) it doesn't.
   Force the row to fill the constrained box on every page. */
.site-header > .wp-block-group.is-layout-flex {
	width: 100%;
}
/* NOTE: deliberately no backdrop-filter — it would create a containing block
   for position:fixed descendants, which traps the wp:navigation overlay
   inside the 72px header instead of covering the viewport. */
/* Logo size is controlled by the wp:site-logo block's "width" attribute
   (set in the editor on the Header template part). Don't pin it in CSS. */
/* Navigation typography (font-family, weight, size, color, transform) is now
   defined in theme.json under styles.blocks.core/navigation so the editor's
   typography + color controls actually take effect. Keep only the :hover
   accent here since it's not exposed cleanly through theme.json elements. */
/* Header Contact button — filled green, white text (overrides .btn-ghost). */
.site-header .wp-block-button.btn-ghost > .wp-block-button__link,
.site-header .wp-block-button.btn-ghost > .wp-block-button__link:active,
.site-header .wp-block-button.btn-ghost > .wp-block-button__link:visited,
.site-header .wp-block-button.is-style-outline.btn-ghost > .wp-block-button__link {
	background-color: #093529;
	color: #fff;
	border: 1px solid #093529;
	text-transform: uppercase;
}
.site-header .wp-block-button.btn-ghost > .wp-block-button__link:hover {
	background-color: #093529;
	color: #fff;
	opacity: 0.9;
}
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--orange); }

/* ---------- responsive grid overrides ----------
   WP's wp:columns default is to stack at <781px (single column). The reference
   design keeps stats / brand strip / capability cards as a 2-column grid on
   tablet/mobile until they collapse to 1-column at very narrow widths.
   Specificity: matching WP's :not(.is-not-stacked-on-mobile)>.wp-block-column
   (0,2,1) is beaten by these (0,3,1) selectors with !important. */
/* For-retailers value cards — always 2x2 grid (matches reference).
   Switch the parent .wp-block-columns to CSS Grid when it contains value-card
   children. Sidesteps WP's auto-generated wp-container-core-columns-is-layout-*
   inline rules (flex-wrap:nowrap; flex-grow:1) that fight a flex-based override. */
.wp-block-columns.value-cards-row,
.wp-block-columns:has(> .wp-block-column.value-card) {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 24px !important;
	flex-wrap: unset !important;
}
.wp-block-columns.value-cards-row > .wp-block-column,
.wp-block-columns:has(> .wp-block-column.value-card) > .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}
@media (max-width: 600px) {
	.wp-block-columns.value-cards-row,
	.wp-block-columns:has(> .wp-block-column.value-card) {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- editorial: square corners site-wide.
   Sweeps border-radius to 0 on every block, button, image, card, and table —
   layered on top of all earlier rules. Anything that needs to keep a radius
   in the editorial style gets re-allowed below this rule. */
*,
*::before,
*::after,
.wp-block-button__link,
.wp-element-button,
.wp-block-image,
.wp-block-image figure,
.wp-block-image img,
.wp-block-image .wp-block-image__placeholder,
.wp-block-cover,
.wp-block-table,
.wp-block-pullquote,
.wp-block-quote,
.brand-card,
.brand-card .img,
.brand-card figure.img,
.brand-card .body,
.brand-hero .visual,
.brand-story__image,
.leader .photo,
.leader figure.photo,
.leader .photo img,
.dual-card,
.cap-card,
.value-card,
.intent-card,
.fit-grid,
.fit-grid table,
.boilerplate {
	border-radius: 0 !important;
}

/* Thin forest border on every prominent image surface to match the
   live boostedcommerce.com treatment. */
.wp-block-image > figure,
.brand-hero .visual,
.brand-story__image,
.leader .photo,
.leader figure.photo {
	border: 1px solid var(--wp--preset--color--light-green) !important;
}

/* The few elements that should KEEP a radius (small UI affordances). */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
	border-radius: 2px !important;
}

/* Stats band — keep 2-column at all mobile/tablet widths. */
@media (max-width: 980px) {
	.stats-band .wp-block-columns {
		flex-wrap: wrap !important;
		flex-direction: row !important;
		row-gap: 24px !important;
		gap: 24px !important;
	}
	.stats-band .wp-block-columns > .wp-block-column.wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0 !important;
		width: calc(50% - 12px) !important;
	}
}
/* Brand strip — 2-column at tablet/mobile, drops to 1-column at very narrow widths. */
@media (max-width: 980px) {
	.wp-block-columns:has(.brand-card) {
		flex-wrap: wrap !important;
		flex-direction: row !important;
		row-gap: 24px !important;
	}
	.wp-block-columns:has(.brand-card) > .wp-block-column.wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0 !important;
		width: auto !important;
	}
}
@media (max-width: 480px) {
	.wp-block-columns:has(.brand-card) > .wp-block-column.wp-block-column {
		flex-basis: 100% !important;
	}
}

/* AI capability cards — CSS Grid (4-col desktop, 2x2 tablet, 1-col mobile).
   Same pattern as `.value-cards-row` to sidestep WP's auto-generated flex
   container rules. */
.wp-block-columns:has(> .wp-block-column.cap-card) {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 20px !important;
	flex-wrap: unset !important;
}
.wp-block-columns:has(> .wp-block-column.cap-card) > .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}
@media (max-width: 980px) {
	.wp-block-columns:has(> .wp-block-column.cap-card) {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.wp-block-columns:has(> .wp-block-column.cap-card) {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- mobile nav (≤600px) ---------- */
@media (max-width: 599.98px) {
	/* Visual order in the header cluster on mobile: [Contact] [≡].
	   The CTA is order:-1 so it sits left of the hamburger (which is rendered
	   inside the navigation block at order:0). */
	.site-header .header-cluster { gap: 12px; }
	.site-header .header-cluster .wp-block-buttons { order: -1; }

	/* Compact the CTA so both fit alongside the logo. */
	.site-header .wp-block-buttons .wp-block-button__link {
		padding: 8px 14px !important;
		font-size: 13px !important;
	}

	/* Make the hamburger button bigger and easier to tap. */
	.site-header .wp-block-navigation__responsive-container-open {
		padding: 6px;
		color: var(--wp--preset--color--light-green);
	}
}

/* ---------- mobile nav overlay (open state, all viewports where it can open) ---------- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--light-grey) !important;
	padding: clamp(72px, 10vw, 96px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 64px) !important;
}
/* Override WP's --navigation-layout-justification-setting which inherits
   from the desktop "right" justification — pin overlay items to the left. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: block;
	font-size: clamp(24px, 6vw, 36px);
	font-weight: 700;
	color: var(--wp--preset--color--light-green);
	letter-spacing: -0.015em;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	text-align: left;
}
/* Pin the close (×) to the exact same coordinates as the hamburger so the
   icon appears to swap in place. position:fixed escapes the responsive
   container's padding-box, and the offsets match the header's vertical
   padding-top (18px) and the root gutter (20-48px). */
.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 18px !important;
	right: clamp(20px, 4vw, 48px) !important;
	padding: 6px !important;
	margin: 0 !important;
	z-index: 100001 !important;
	color: var(--wp--preset--color--light-green);
}
/* When the WP admin bar is showing, push down by its height (46px mobile, 32px desktop). */
.admin-bar .wp-block-navigation__responsive-container-close { top: calc(46px + 18px) !important; }
@media (min-width: 783px) {
	.admin-bar .wp-block-navigation__responsive-container-close { top: calc(32px + 18px) !important; }
}

/* ---------- footer (forest-deep) ---------- */
/* Kill WP's default 24px gap between body-level siblings so the header
   meets the first section, and the footer's forest-deep bg meets the
   section above it (CTA strip), edge-to-edge. Block themes set blockGap
   in theme.json which WP applies as margin-block-start to every direct
   child of .wp-site-blocks except the first — that creates a visible
   white strip on hybrid PHP templates like single-brand.php. */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > footer,
.wp-site-blocks > footer.wp-block-template-part,
body > footer.wp-block-template-part {
	margin-block-start: 0 !important;
}

/* Kill the same blockGap between any two adjacent full-bleed backgrounded
   sections inside <main> so consecutive cream + forest bands meet directly
   without a white sliver between them. */
main > .alignfull.has-background + .alignfull.has-background,
main > .wp-block-group.alignfull + .wp-block-group.alignfull {
	margin-block-start: 0 !important;
}
.site-footer {
	background: var(--wp--preset--color--dark-green);
	color: rgba(255,255,255,0.78);
	/* Footer is alignfull, so WP's root padding (clamp 20-48px) doesn't apply.
	   Re-add it here so columns + legal row don't run flush to the viewport edge. */
	padding: 64px clamp(20px, 4vw, 48px) 32px;
	/* The .legal divider uses width:100vw; clip prevents that from creating
	   a horizontal scrollbar on browsers where 100vw includes the scrollbar. */
	overflow-x: clip;
}
.site-footer h4 {
	color: rgba(255,255,255,0.55);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.site-footer a {
	color: rgba(255,255,255,0.78);
	text-decoration: none;
	transition: color 160ms ease;
}
.site-footer a:hover { color: var(--wp--preset--color--orange); }
/* Logo source is ~3:1 ratio (primary_orange.png 1024×342). Let height
   compute from width so it doesn't get vertically squished. */
.site-footer .wp-block-site-logo a,
.site-footer .wp-block-site-logo img {
	display: block;
}
.site-footer .wp-block-site-logo img {
	height: 56px !important;
	width: auto !important;
	max-width: 160px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.9;
	margin-bottom: 18px;
}

/* Strip default list bullets/padding — `is-style-none` doesn't ship a rule by
   default in our theme. Each item gets generous vertical spacing. */
.site-footer .wp-block-list,
.site-footer ul.wp-block-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.site-footer .wp-block-list li {
	list-style: none;
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.4;
}
.site-footer .wp-block-list li:last-child { margin-bottom: 0; }
.site-footer .wp-block-list li::before,
.site-footer .wp-block-list li::marker { content: none !important; }

.site-footer .legal {
	position: relative;
	padding-top: 24px;
	font-size: 13px;
	color: rgba(255,255,255,0.48);
}
/* Full-width divider above the legal row. Uses a ::before extended to 100vw
   so the line spans the viewport even though .legal itself sits inside the
   footer's constrained content box. */
.site-footer .legal::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 1px;
	background: rgba(255,255,255,0.1);
}

/* Mobile footer — keep single column but with breathing room between sections. */
@media (max-width: 781px) {
	.site-footer .wp-block-columns {
		row-gap: 40px !important;
	}
	.site-footer .legal {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}
}

/* ---------- container (used in PHP templates) ----------
   Track the theme.json contentSize (1170px) rather than hardcoding a width, so
   PHP-template content lines up exactly with the header/footer and all block
   templates (which are constrained to that same content size). */
.container {
	max-width: var(--wp--style--global--content-size, 1170px);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* ---------- brand-single specific layouts ---------- */
/* Section head — couple the eyebrow tightly to its heading so the pair reads
   as one unit. The .head wrapper itself carries its bottom margin inline. */
.head .eyebrow { margin-bottom: 8px; }
.head h2 { margin-top: 0; }

.brand-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); background: #FFFFFF; }
.brand-hero .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.brand-hero h1 { max-width: 18ch; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.12; }
.brand-hero .visual { aspect-ratio: 1/1; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--wp--preset--color--light-grey); }
.brand-hero .visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .brand-hero .grid { grid-template-columns: 1fr; } }

.glance .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 980px) { .glance .row { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

/* Column count follows the number of best-sellers (.cols-N is set in
   single-brand.php) so 3 items span 3 columns, 4 span 4, etc. */
.bestsellers-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bestsellers-grid.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.bestsellers-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bestsellers-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bestsellers-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) {
	.bestsellers-grid,
	.bestsellers-grid.cols-3,
	.bestsellers-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Brand story — single column by default; 2-col when an image is provided. */
.brand-story__grid { display: block; }
.brand-story__body { max-width: 62ch; font-size: 17px; line-height: 1.65; }
.brand-story__body p { margin-bottom: 1.1em; }
.brand-story__body p:last-child { margin-bottom: 0; }
.brand-story--with-image .brand-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.brand-story--with-image .brand-story__body { max-width: none; }
.brand-story__image {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--light-grey);
	border: 1px solid var(--wp--preset--color--light-grey);
	aspect-ratio: 4/5;
}
.brand-story__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) {
	.brand-story--with-image .brand-story__grid { grid-template-columns: 1fr; }
	.brand-story__image { aspect-ratio: 4/3; }
}

.channels { display: flex; gap: 10px; flex-wrap: wrap; }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .reviews-grid { grid-template-columns: 1fr; } }

.other-brands-strip { background: var(--wp--preset--color--light-grey); padding: 48px 0; }
.other-brands-strip .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.other-brands-strip a {
	background: #fff;
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: 6px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: border-color 160ms ease, transform 160ms ease;
	color: var(--wp--preset--color--light-green);
	font-weight: 700;
}
.other-brands-strip a:hover { border-color: var(--wp--preset--color--light-green); transform: translateY(-2px); }
.other-brands-strip .arrow { color: var(--wp--preset--color--orange); font-weight: 700; }
@media (max-width: 760px) { .other-brands-strip .row { grid-template-columns: 1fr; } }

.placeholder-tile {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--wp--preset--color--light-grey) 0%, var(--wp--preset--color--light-grey) 100%);
	color: var(--wp--preset--color--medium-green);
	font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
	text-align: center; padding: 20px;
}

/* ---------- For Retailers: value cards ---------- */
.value-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--light-green);
	border-radius: 14px;
	padding: 32px;
}
.retail-hero-visual {
	border: 1px solid var(--wp--preset--color--light-green) !important;
}
.section--alt .value-card { background: var(--wp--preset--color--white); }
.value-card .icon-num {
	display: inline-flex;
	width: 36px; height: 36px;
	align-items: center; justify-content: center;
	background: var(--wp--preset--color--orange);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 16px;
}
.value-card h3 { font-size: 20px; margin-bottom: 8px; }

/* ---------- About: philosophy ---------- */
.philosophy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.philosophy .item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.philosophy .item .num {
	font-size: 28px; font-weight: 700;
	color: var(--wp--preset--color--orange);
	line-height: 1; letter-spacing: -0.02em;
	margin: 0;
}
.philosophy .item h3 { margin: 0 0 6px; font-size: 20px; }
.philosophy .item p { margin: 0; }
@media (max-width: 760px) { .philosophy { grid-template-columns: 1fr; } }

/* ---------- About: leadership grid ---------- */
.leadership-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* WP's `:where(.is-layout-flow) > *` applies a top margin to every non-first
   child. In a CSS Grid the `gap` already handles spacing, so that margin just
   pushes cards 2–6 down within their cells and breaks row alignment. */
.leadership-grid > .leader { margin-block-start: 0; }
.leader { display: flex; flex-direction: column; }
.leader .photo,
.leader figure.photo {
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--light-grey);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 18px;
	border: 1px solid var(--wp--preset--color--light-grey);
	display: block;
}
.leader .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leader .photo.placeholder {
	display: flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--medium-green);
	font-size: 13px; letter-spacing: 0.1em; font-weight: 700;
}
.leader .name { font-size: 18px; font-weight: 700; color: var(--wp--preset--color--light-green); margin: 0 0 2px; }
.leader .title {
	font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
	color: var(--wp--preset--color--orange); margin: 0 0 12px;
}
.leader .bio { font-size: 15px; color: var(--wp--preset--color--medium-green); margin: 0 0 12px; }
.leader .bio p { margin: 0 0 12px; }
.leader .bio p:last-child { margin-bottom: 0; }
.leader .education { font-size: 15px; font-style: italic; color: var(--wp--preset--color--medium-green); margin: 0 0 12px; }
.leader .linkedin { margin: 0; align-self: flex-start; }
/* Query Loop variant: Post Template <ul> becomes the grid, each <li> holds a
   .leader group so all the card styling above applies unchanged. */
.wp-block-post-template.leadership-grid { list-style: none; padding: 0; margin: 0; }
.leadership-grid > li.wp-block-post { margin: 0; }
.leader .wp-block-post-title.name,
.leader .wp-block-post-content.bio { margin-block-start: 0; }
.leader .wp-block-post-featured-image.photo { margin: 0 0 18px; }
.leader .linkedin.wp-block-buttons { margin: 0; align-self: flex-start; }
.leader .linkedin .wp-block-button__link {
	background: transparent; border-radius: 0; padding: 0 0 1px;
	color: var(--wp--preset--color--light-green);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	font-size: 13px; font-weight: 600;
}
.leader .linkedin .wp-block-button__link:hover {
	color: var(--wp--preset--color--orange); border-color: var(--wp--preset--color--orange);
}
.leader .linkedin a {
	font-size: 13px; font-weight: 600; color: var(--wp--preset--color--light-green);
	border-bottom: 1px solid var(--wp--preset--color--light-grey);
	text-decoration: none;
}
.leader .linkedin a:hover { color: var(--wp--preset--color--orange); border-color: var(--wp--preset--color--orange); }
@media (max-width: 880px) { .leadership-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .leadership-grid { grid-template-columns: 1fr; } }

/* ---------- Contact: intent picker ---------- */
.intent-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
.intent-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: 14px;
	padding: 22px 20px;
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	font-family: inherit;
}
.intent-card:hover {
	border-color: var(--wp--preset--color--light-green);
	transform: translateY(-2px);
}
.intent-card.active {
	border-color: var(--wp--preset--color--orange);
	background: #FFF6F0;
}
.intent-card .lbl {
	font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
	color: var(--wp--preset--color--orange);
}
.intent-card .name {
	font-size: 16px; font-weight: 700; color: var(--wp--preset--color--light-green); line-height: 1.2;
}
.intent-card .sub { font-size: 13px; color: var(--wp--preset--color--medium-green); }
@media (max-width: 980px) { .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .intent-grid { grid-template-columns: 1fr; } }

.intent-panel { display: none; }
.intent-panel.show { display: block; }
/* Editor only: the .show toggle is a front-end behavior, so in the block
   editor every panel would collapse to display:none and be uneditable.
   .editor-styles-wrapper exists only inside the editor, so this reveals all
   panels there (stacked + labelled) without affecting the live page. */
.editor-styles-wrapper .intent-panel {
	display: block !important;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed var(--wp--preset--color--light-grey);
}
.editor-styles-wrapper .intent-panel::before {
	content: "Intent panel — hidden on the live page until its card is selected";
	display: block;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

.deflect {
	background: var(--wp--preset--color--light-grey);
	border-left: 3px solid var(--wp--preset--color--orange);
	padding: 24px 28px;
	border-radius: 0 14px 14px 0;
}
.deflect h3 { font-size: 18px; margin-bottom: 8px; }
.deflect ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.deflect ul a { color: var(--wp--preset--color--light-green); font-weight: 600; border-bottom: 1px solid var(--wp--preset--color--light-grey); }
.deflect ul a:hover { color: var(--wp--preset--color--orange); border-color: var(--wp--preset--color--orange); }

/* ---------- stealth banner (AVA) ---------- */
.stealth-banner {
	background: var(--wp--preset--color--medium-green);
	color: rgba(255,255,255,0.92);
	padding: 12px 0;
	font-size: 13px;
}
.stealth-banner .lbl {
	display: inline-flex; align-items: center; gap: 8px;
	font-weight: 700; letter-spacing: 0.16em; font-size: 11px;
	color: var(--wp--preset--color--orange);
}
.stealth-banner .lbl::before {
	content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--orange);
}