/*
Theme Name: Health & Whole
Theme URI: https://example.com/
Author: Pixelizt
Description: Custom WooCommerce block theme for an organic grocery store — Bangalore-first, with all-India shipping for shelf-stable goods. Style, palette and type follow the UI/UX Pro Max design system (Organic Biophilic / E-commerce).
Version: 0.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greenroots
Tags: e-commerce, full-site-editing, block-patterns
*/

/*
 * Tokens live in theme.json. This file holds what theme.json cannot express:
 * component CSS, interaction states, and the accessibility rules the design
 * system marks CRITICAL.
 */

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

:root {
	--gr-motion-fast: 150ms;
	--gr-motion-base: 200ms;
	--gr-motion-slow: 300ms;
	--gr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--gr-touch-min: 44px;

	/* z-index scale — one place, so layering never becomes guesswork */
	--gr-z-base: 0;
	--gr-z-raised: 10;
	--gr-z-sticky: 40;
	--gr-z-overlay: 100;
	--gr-z-modal: 1000;
}

/* ==========================================================================
   1. Accessibility (CRITICAL)
   ========================================================================== */

/* Visible focus ring on everything interactive. Never remove without an
   equally visible replacement. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Keyboard-only skip link. */
.gr-skip-link {
	position: absolute;
	left: -9999px;
	z-index: var(--gr-z-modal);
	padding: 12px 20px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-radius: 0 0 var(--wp--custom--radius--sm) 0;
	font-weight: 700;
	text-decoration: none;
}

.gr-skip-link:focus {
	left: 0;
	top: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   2. Touch & interaction (CRITICAL)
   ========================================================================== */

:where(a, button, summary, [role="button"]) {
	cursor: pointer;
	touch-action: manipulation;
}

button:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
}

/* Interactive controls meet the 44px minimum target. Padding does the work so
   the visual size stays as designed. */
.wp-element-button,
.gr-pincode-form button,
.gr-newsletter button,
.gr-basket-frequency button,
.gr-trace__link {
	min-height: var(--gr-touch-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color var(--gr-motion-base) var(--gr-ease-out),
		color var(--gr-motion-base) var(--gr-ease-out),
		transform var(--gr-motion-fast) var(--gr-ease-out);
}

/* The 2px ink border is a signature of the system — every interactive element
   carries it. theme.json cannot express it on buttons reliably, so it lives here. */
.wp-element-button,
.wp-block-button__link.wp-element-button.wc-block-components-product-button__button {
	border: 2px solid var(--wp--preset--color--foreground);
}

/* Press feedback — transform only, so it never triggers layout. */
.wp-element-button:active,
.gr-pincode-form button:active,
.gr-newsletter button:active {
	transform: scale(0.98);
}

/* ==========================================================================
   3. Icons
   ========================================================================== */

.gr-icon {
	display: block;
	flex: 0 0 auto;
}

/* ==========================================================================
   4. Placeholders (development affordance)
   ========================================================================== */

.gr-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 8px;
	background-color: var(--wp--preset--color--placeholder);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 12px,
		rgba(15, 23, 42, 0.03) 12px 24px
	);
	border: 1px dashed rgba(58, 46, 18, 0.22);
	border-radius: var(--wp--custom--radius--md);
	color: #57503C; /* ≥4.5:1 on the warm placeholder */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.gr-placeholder--square { aspect-ratio: 1 / 1; }
.gr-placeholder--wide   { aspect-ratio: 16 / 9; }
.gr-placeholder--tall   { aspect-ratio: 3 / 4; }

/* ==========================================================================
   5. Typography helpers
   ========================================================================== */

/* Caveat is an accent only — eyebrow labels and the founder's signature.
   Never body copy: script faces fall apart at small sizes. */
.gr-eyebrow {
	display: block;
	margin-block-end: 4px;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
}

.gr-signature {
	margin-block-end: 0;
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
}

/* Keep long-form copy inside a readable measure (60–75 characters). */
.gr-measure,
.wp-block-post-content p {
	max-width: 68ch;
}

.gr-section-title {
	display: flex;
	align-items: center;
	gap: 18px;
}

.gr-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--wp--preset--color--border);
}

.gr-section-title-centred {
	letter-spacing: -0.015em;
}

/* Prices and figures use tabular figures so columns don't jitter. */
.woocommerce-Price-amount,
.gr-basket-tier__price,
.gr-rating__score {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6. Shared list styles
   ========================================================================== */

.gr-check-list {
	list-style: none;
	padding-left: 0;
}

.gr-check-list li {
	position: relative;
	padding-left: 28px;
	margin-block: 8px;
}

/* Phosphor 'check', masked so it inherits colour like the inline icons do. */
.gr-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--gr-check-mask) center / contain no-repeat;
	mask: var(--gr-check-mask) center / contain no-repeat;
}

:root {
	--gr-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	--gr-pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. Header — sticky, single row
   ========================================================================== */

.gr-header {
	position: sticky;
	top: 0;
	z-index: var(--gr-z-sticky);
}

/* Floating nav pill — cream, 2px ink border, breathing room from the edges. */
.gr-header__row {
	gap: 24px;
	background: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	padding: 10px 14px 10px 28px;
}

.gr-brand__name,
.gr-brand__name a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}

.gr-brand__tag {
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 15px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

.gr-nav a {
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--gr-motion-base) var(--gr-ease-out);
}

.gr-nav a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.gr-header__tools {
	gap: 14px;
}

/* Compact search: pill field with the icon button inside. */
.gr-header .gr-search {
	width: 220px;
	margin: 0;
}

.gr-header .gr-search .wp-block-search__inside-wrapper {
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	padding: 2px 2px 2px 14px;
}

.gr-header .gr-search .wp-block-search__input {
	border: 0;
	padding: 8px 0;
	min-height: 0;
	background: transparent;
	font-size: 14px;
}

.gr-header .gr-search .wp-block-search__button {
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.gr-header .gr-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-hover);
}

.gr-pincode-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	white-space: nowrap;
}

.gr-pincode-chip::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--gr-pin-mask) center / contain no-repeat;
	mask: var(--gr-pin-mask) center / contain no-repeat;
}

.gr-pincode-chip a {
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gr-login a {
	font-size: 14px;
	white-space: nowrap;
}

@media (max-width: 1120px) {
	.gr-header .gr-search { width: 170px; }
	.gr-brand__tag { display: none; }
}

@media (max-width: 900px) {
	.gr-header__row { flex-wrap: wrap; border-radius: 28px; padding: 12px 16px; gap: 10px 16px; }
	/* tools must be allowed to wrap — it holds the full-width search */
	.gr-header__tools { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; gap: 10px 14px; }
	.gr-header .gr-search { order: 5; flex: 1 1 100%; width: auto; }
	/* Woo's hooked account icon (removed in PHP) — belt and braces */
	.gr-header .wp-block-woocommerce-customer-account { display: none; }
}

/* Single product: the price deserves prominence. */
.single-product .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.single-product .product .price {
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   8. Hero — pincode gate
   ========================================================================== */

.gr-pincode-form {
	margin-block-start: 24px;
}

.gr-pincode-form label {
	display: block;
	margin-block-end: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gr-pincode-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 440px;
}

/* 16px minimum stops iOS zooming the page on focus. */
.gr-pincode-form input {
	flex: 1 1 200px;
	min-height: var(--gr-touch-min);
	padding: 12px 16px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-size: 16px;
	transition: border-color var(--gr-motion-base) var(--gr-ease-out);
}

.gr-pincode-form input:hover {
	border-color: var(--wp--preset--color--secondary);
}

.gr-pincode-form button,
.gr-newsletter button {
	padding: 12px 24px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gr-pincode-form button:hover,
.gr-newsletter button:hover {
	background: var(--wp--preset--color--primary-hover);
}

.gr-pincode-form__hint {
	margin-block-start: 8px;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--x-small);
	max-width: 60ch;
}

/* ==========================================================================
   9. Why families switch
   ========================================================================== */

/* (USP chips are styled in section 21) */

/* ==========================================================================
   10. Shop by category
   ========================================================================== */

.gr-category-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 16px;
	margin-block-start: 32px;
}

.gr-category-card__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	margin-block-end: 8px;
}

.gr-category-card__count {
	display: block;
	margin-block-start: 2px;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--x-small);
}

.gr-category-card {
	display: block;
	padding: 12px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--background);
	transition: border-color var(--gr-motion-base) var(--gr-ease-out);
}

.gr-category-card:hover {
	border-color: var(--wp--preset--color--foreground);
}

.gr-category-card--legacy {
	border-radius: var(--wp--custom--radius--md);
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: transform var(--gr-motion-base) var(--gr-ease-out);
}

.gr-category-card:hover {
	transform: translateY(-2px);
}

.gr-category-card .gr-placeholder {
	min-height: 0;
	margin-block-end: 8px;
	border-radius: var(--wp--custom--radius--md);
}

.gr-category-card__label {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.3;
}

.gr-category-card:hover .gr-category-card__label {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   11. Weekly basket
   ========================================================================== */

.gr-basket-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-block: 24px;
}

.gr-basket-tier {
	position: relative;
	padding: 24px 16px 16px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.gr-basket-tier--popular {
	border-color: var(--wp--preset--color--primary);
	border-width: 2px;
	box-shadow: var(--wp--custom--shadow--raised);
}

.gr-basket-tier__badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	padding: 2px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	white-space: nowrap;
}

.gr-basket-tier h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.gr-basket-tier__for {
	margin: 4px 0 12px;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--x-small);
}

.gr-basket-tier__price {
	margin: 0;
	font-weight: 700;
}

.gr-basket-tier__price span {
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.gr-basket-frequency-label__note {
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.gr-basket-frequency-label {
	margin-block-end: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gr-basket-frequency {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 24px;
}

.gr-basket-frequency button {
	padding: 10px 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.gr-basket-frequency button:hover {
	border-color: var(--wp--preset--color--secondary);
}

/* Selected state is marked by weight and border, not colour alone. */
.gr-basket-frequency button.is-selected {
	border-color: var(--wp--preset--color--primary);
	border-width: 2px;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* ==========================================================================
   12. How it works
   ========================================================================== */

.gr-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.gr-step {
	position: relative;
	text-align: center;
}

.gr-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	left: calc(50% + 32px);
	width: calc(100% - 64px);
	border-top: 1px dashed var(--wp--preset--color--border);
}

.gr-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--wp--preset--color--secondary);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.gr-step__title {
	margin: 12px 0 4px;
	font-size: var(--wp--preset--font-size--medium);
}

.gr-step__body {
	margin: 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   13. Traceability — three proof cards
   ========================================================================== */

.gr-trace-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-block-start: var(--wp--preset--spacing--60);
}

.gr-trace {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
}

.gr-trace__img {
	width: 96px;
	height: 96px;
	min-height: 0;
	flex: 0 0 auto;
	border-radius: 50%;
	font-size: 9px;
	letter-spacing: 0.02em;
}

.gr-trace__title {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.gr-trace__body {
	margin: 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.gr-trace__link {
	margin-block-start: auto;
	padding: 10px 22px;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--gr-motion-base) var(--gr-ease-out), color var(--gr-motion-base) var(--gr-ease-out);
}

.gr-trace__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

@media (max-width: 1024px) {
	.gr-trace-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* ==========================================================================
   14. Reviews & certifications — one composed band
   ========================================================================== */

.gr-kicker {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.gr-social-proof {
	display: grid;
	grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Rating lives in its own bordered card so the numbers feel anchored. */
.gr-rating-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--muted);
}

.gr-rating__score {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 72px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
}

.gr-rating__stars { margin: 10px 0 2px; }

.gr-rating__count {
	margin: 0 0 20px;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--small);
}

.gr-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--wp--preset--color--accent);
}

.gr-certs__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: auto 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.gr-cert {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.gr-cert__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-cert__name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

.gr-review-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.gr-review {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: 26px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--background);
}

.gr-review__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--foreground);
}

.gr-review__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-start: auto;
}

.gr-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 14px;
	font-weight: 700;
}

.gr-review__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gr-review__meta cite {
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* The honesty marks: superscript daggers + one quiet footnote. */
.gr-footref {
	font-size: 0.6em;
	vertical-align: super;
	color: var(--wp--preset--color--muted-foreground);
	margin-left: 2px;
}

.gr-footnote {
	grid-column: 1 / -1;
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: 12.5px;
}

@media (max-width: 1024px) {
	.gr-social-proof { grid-template-columns: 1fr; }
	.gr-review-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gr-certs__list { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}

@media (max-width: 640px) {
	.gr-review-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. FAQ
   ========================================================================== */

.gr-faq__title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.gr-faq {
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.gr-faq__item + .gr-faq__item {
	border-top: 1px solid var(--wp--preset--color--border);
}

.gr-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: var(--gr-touch-min);
	padding: 12px 20px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	list-style: none;
	transition: background-color var(--gr-motion-base) var(--gr-ease-out);
}

.gr-faq__item summary:hover {
	background-color: var(--wp--preset--color--muted);
}

.gr-faq__item summary::-webkit-details-marker { display: none; }

.gr-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--wp--preset--color--muted-foreground);
	border-bottom: 2px solid var(--wp--preset--color--muted-foreground);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform var(--gr-motion-base) var(--gr-ease-out);
}

.gr-faq__item[open] summary::after {
	transform: rotate(-135deg);
}

.gr-faq__item p {
	margin: 0;
	padding: 0 20px 16px;
	max-width: 70ch;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   16. Our promise
   ========================================================================== */

.gr-forest-panel {
	height: fit-content;
	position: sticky;
	top: 140px;
}

.gr-promise {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.gr-promise li {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-block: 12px;
	font-size: var(--wp--preset--font-size--small);
}

.gr-promise__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   16b. Content pages
   ========================================================================== */

.gr-page-body :where(p, ul, ol) { max-width: 68ch; }

.gr-page-body :where(h2) { margin-block-start: var(--wp--preset--spacing--70); }
.gr-page-body :where(h3) { margin-block-start: var(--wp--preset--spacing--50); }

.gr-steps-list {
	margin: 0;
	padding-left: 1.3em;
}

.gr-steps-list li { margin-block: 12px; }

/* --- Contact ---------------------------------------------------------- */

.gr-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-block: var(--wp--preset--spacing--50);
	max-width: none;
}

.gr-contact-card {
	padding: 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--card);
}

.gr-contact-card h3 {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.gr-contact-card p { margin: 0 0 8px; font-size: var(--wp--preset--font-size--small); }
.gr-contact-card p:last-child { margin-bottom: 0; }

.gr-contact-card__note { color: var(--wp--preset--color--muted-foreground); }

.gr-contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 720px;
	margin-block-start: var(--wp--preset--spacing--40);
}

.gr-field--full { grid-column: 1 / -1; }

.gr-field label {
	display: block;
	margin-block-end: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.gr-field input,
.gr-field textarea {
	width: 100%;
	min-height: var(--gr-touch-min);
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-size: 16px;
	transition: border-color var(--gr-motion-base) var(--gr-ease-out);
}

.gr-field textarea { resize: vertical; }

.gr-field input:hover,
.gr-field textarea:hover { border-color: var(--wp--preset--color--secondary); }

.gr-field button {
	padding: 12px 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	min-height: var(--gr-touch-min);
}

.gr-field button:hover { background: var(--wp--preset--color--primary-hover); }

.gr-field__note {
	margin-block-start: 10px;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (max-width: 600px) {
	.gr-contact-form { grid-template-columns: 1fr; }
}

/* --- Search ----------------------------------------------------------- */

.gr-search .wp-block-search__input {
	min-height: var(--gr-touch-min);
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 16px;
}

.gr-search .wp-block-search__button {
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border: 0;
	font-weight: 700;
}

.gr-header .gr-search { max-width: 260px; }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.gr-footer a {
	color: inherit;
}

.gr-newsletter {
	display: flex;
	gap: 8px;
	margin-block-end: 12px;
}

.gr-newsletter input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--gr-touch-min);
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: 16px;
}

.gr-payment-badges {
	margin-block-start: 16px;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   18. Responsive — 1440 / 1024 / 768 / 375
   ========================================================================== */

html, body { overflow-x: hidden; }

@media (max-width: 1024px) {
	.gr-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gr-trace-grid    { grid-template-columns: 1fr; }
	.gr-category-card__img { margin-block-end: 8px; }
	.gr-trace:not(:last-child) { padding-right: 0; border-right: 0; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--border); }
	.gr-social-proof  { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.gr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gr-step:not(:last-child)::after { display: none; }
	.gr-basket-tiers { grid-template-columns: 1fr; }
	.gr-review-cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.gr-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gr-certs__list   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gr-steps         { grid-template-columns: 1fr; }
	.gr-pincode-form__row > * { flex: 1 1 100%; }
}

/* ==========================================================================
   19. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.gr-category-card:hover,
	.wp-element-button:active {
		transform: none;
	}
}


/* ==========================================================================
   20. Broadsheet chambers & panels (Wispr Flow reference)
   ========================================================================== */

/* Dark velvet rooms: inset, oversized radius, no dividers. */
.gr-chamber {
	border-radius: var(--wp--custom--radius--chamber);
	margin: var(--wp--preset--spacing--60) 24px;
}

.gr-chamber :where(h1, h2) {
	color: var(--wp--preset--color--background);
}

.gr-chamber .gr-eyebrow {
	color: #FFB765; /* ember on ink — 10.1:1 */
}

.gr-chamber :where(p) {
	color: var(--wp--preset--color--background);
}

.gr-chamber .gr-signature {
	color: #FFB765;
}

/* Placeholders inside dark rooms go translucent rather than grey. */
.gr-chamber .gr-placeholder {
	background-color: rgba(255, 255, 235, 0.07);
	background-image: repeating-linear-gradient(
		45deg,
		transparent 0 12px,
		rgba(255, 255, 235, 0.04) 12px 24px
	);
	border-color: rgba(255, 255, 235, 0.35);
	color: #B5B1A2; /* 8.1:1 on ink */
}

/* Trace cards become forest inner panels. */
.gr-chamber .gr-trace {
	background: var(--wp--preset--color--primary);
	border: 0;
}

.gr-chamber .gr-trace__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--background);
}

.gr-chamber .gr-trace__body {
	color: #CFE0D5; /* 8.6:1 on forest */
}

.gr-chamber .gr-trace__link {
	border-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--background);
}

.gr-chamber .gr-trace__link:hover {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
}

/* Forest panel (promise card): teal room inside a cream section. */
.gr-forest-panel :where(h2, h3, p, li) {
	color: var(--wp--preset--color--background);
}

.gr-forest-panel .gr-promise__mark {
	background: rgba(255, 255, 235, 0.14);
	color: var(--wp--preset--color--background);
}

.gr-forest-panel .wp-element-button {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.gr-forest-panel .wp-element-button:hover {
	background: var(--wp--preset--color--surface);
}

/* Footer chamber: rounded top corners, full-bleed dark band. */
.gr-footer > .has-chamber-background-color {
	border-radius: var(--wp--custom--radius--chamber) var(--wp--custom--radius--chamber) 0 0;
	margin: 0 24px;
}

.gr-footer .gr-check-list li::before {
	background-color: var(--wp--preset--color--secondary);
}

@media (max-width: 782px) {
	.gr-chamber,
	.gr-footer > .has-chamber-background-color {
		margin-inline: 8px;
		border-radius: 24px;
	}
	.gr-footer > .has-chamber-background-color { border-radius: 24px 24px 0 0; }
}

/* Editorial: the serif whispers — keep display weights regular. */
.gr-brand__name,
.gr-brand__name a {
	font-weight: 500;
	font-size: 24px;
}

.gr-rating__score {
	font-weight: 400;
}


/* ==========================================================================
   21. First-fold boldness (Wispr devices, H&W brand)
   ========================================================================== */

/* --- Hero: two-tone display serif with hand-drawn underline --- */
.gr-hero__title {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--foreground);
	text-wrap: balance;
}

.gr-hero__soft {
	color: var(--wp--preset--color--muted-foreground);
}

.gr-hero__mark {
	position: relative;
	display: inline-block;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

.gr-hero__hard {
	color: var(--wp--preset--color--foreground);
}

/* The squiggle is decorative punctuation, not underlining every line. */
.gr-squiggle {
	position: absolute;
	left: 2%;
	bottom: -0.12em;
	width: 96%;
	height: 0.16em;
	color: var(--wp--preset--color--accent-surface);
	pointer-events: none;
}

.gr-hero__sub {
	max-width: 46ch;
}

.gr-hero__media .gr-placeholder {
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: 40px;
}

/* --- Craft badges: forest pills under the pincode gate --- */
.gr-craft-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.gr-craft-badges li {
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --- Claims marquee: the broadsheet ticker --- */
.gr-marquee {
	overflow: hidden;
	border-block: 2px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--background);
}

.gr-marquee__track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	padding: 14px 0;
	animation: gr-marquee 30s linear infinite;
}

.gr-marquee__track span {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground);
	white-space: nowrap;
}

/* the ✶ separators */
.gr-marquee__track span:nth-child(even) {
	color: var(--wp--preset--color--accent-surface);
	font-size: 12px;
}

@keyframes gr-marquee {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.gr-marquee__track { animation: none; }
}

/* --- USP promise cards: icon tile, claim, one line of proof --- */
.gr-usp-head { margin-bottom: 30px; }
.gr-usp-head .gr-section-title { margin: 6px 0 8px; }

.gr-usp-head__sub {
	margin: 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: 16px;
	max-width: 52ch;
}

.gr-usp-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.gr-usp {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px 20px 24px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--chamber);
	color: #F2EFE0;
	transition: transform var(--gr-motion-base) var(--gr-ease-out);
}

.gr-usp:hover { transform: translateY(-5px); }

.gr-usp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid rgba(242, 239, 224, 0.35);
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--primary);
}

.gr-usp--2 .gr-usp__icon { background: var(--wp--preset--color--accent); }
.gr-usp--3 .gr-usp__icon { background: var(--wp--preset--color--chamber); }
.gr-usp--4 .gr-usp__icon { background: var(--wp--preset--color--accent); }
.gr-usp--5 .gr-usp__icon { background: var(--wp--preset--color--primary); }

.gr-usp__icon .gr-icon { width: 26px; height: 26px; }

.gr-usp__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.15;
}

.gr-usp__sub {
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(242, 239, 224, 0.72);
}

@media (max-width: 1080px) {
	.gr-usp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.gr-usp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.gr-usp { padding: 16px 14px 18px; gap: 10px; }
	.gr-usp__icon { width: 44px; height: 44px; }
	.gr-usp__label { font-size: 17px; }
	.gr-usp:last-child { grid-column: 1 / -1; }
}

/* --- Category grid: bento with a forest feature tile --- */
.gr-category-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: auto;
}

.gr-category-card--feature {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	padding: 20px;
}

.gr-category-card--feature .gr-placeholder {
	background-color: rgba(255, 255, 235, 0.07);
	border-color: rgba(255, 255, 235, 0.35);
	color: #B5B1A2;
	flex: 1;
}

.gr-category-card--feature .gr-category-card__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--background);
	margin-top: 12px;
}

.gr-category-card--feature .gr-category-card__count {
	color: #CFE0D5;
}

.gr-category-card--feature:hover { border-color: var(--wp--preset--color--foreground); }
.gr-category-card--feature:hover .gr-category-card__label {
	color: var(--wp--preset--color--background);
}

@media (max-width: 1024px) {
	.gr-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.gr-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Product shelf: bold header + carded products --- */
.gr-shelf-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 28px;
}

.gr-badge-teal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 13px;
	font-weight: 600;
}

.gr-shelf-head__title {
	margin: 14px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	max-width: 18ch;
}

.gr-shelf-head__all { flex: 0 0 auto; }

/* WooCommerce product cards join the editorial system. */
.wp-block-woocommerce-product-collection .wc-block-product {
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 24px;
	padding: 14px;
	transition: border-color var(--gr-motion-base) var(--gr-ease-out);
}

.wp-block-woocommerce-product-collection .wc-block-product:hover {
	border-color: var(--wp--preset--color--foreground);
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection .wc-block-components-product-image {
	border-radius: 14px;
}

@media (max-width: 782px) {
	.gr-hero__mark { white-space: normal; }
	.gr-squiggle { display: none; }
	.gr-usp__label { white-space: normal; }
}


/* ==========================================================================
   22. Illustrations + hero fold-fit
   ========================================================================== */

.gr-illo {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero must complete inside one desktop viewport: cap the art with vh. */
.gr-hero .gr-hero__sub { margin-block: 12px 0; }
.gr-hero .gr-pincode-form { margin-block-start: 20px; }
.gr-hero .gr-eyebrow { font-size: 22px; }

.gr-hero__illo {
	display: block;
	width: 100%;
	max-height: min(56vh, 520px);
	object-fit: contain;
}

@media (min-width: 900px) and (max-height: 860px) {
	.gr-hero { padding-block: 24px 32px !important; }
	.gr-hero__title { font-size: clamp(40px, 7.2vh, 72px); }
	.gr-hero__illo { max-height: 46vh; }
	.gr-craft-badges { margin-top: 14px; }
}

/* Panel illustrations (pantry, founder) sit in rounded frames. */
.gr-illo--panel {
	border-radius: var(--wp--custom--radius--lg);
}

/* Trace card art: circle-cropped, consistent size. */
.gr-trace__img.gr-illo {
	width: 116px;
	height: 116px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--background);
	border: 2px solid rgba(255, 255, 235, 0.35);
}

/* Category tiles: let the art breathe on the tile ground. */
.gr-category-card__img.gr-illo {
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 16px;
	margin-block-end: 8px;
	background: transparent;
}

.gr-category-card--feature .gr-category-card__img.gr-illo {
	flex: 1;
	min-height: 0;
	border: 0;
}

/* Initials avatar (until real customer photos exist). */
.gr-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}



/* ==========================================================================
   23. Single product — the money page
   ========================================================================== */

.single-product div.product.type-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px 56px;
	align-items: start;
	max-width: 1280px;
	margin-inline: auto;
	padding: 40px 24px 0;
}

.single-product .woocommerce-product-gallery {
	grid-column: 1;
	position: sticky;
	top: 130px;
}

.single-product .woocommerce-product-gallery img {
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid var(--wp--preset--color--border);
}

.single-product div.product .summary {
	grid-column: 2;
}

.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .up-sells {
	grid-column: 1 / -1;
}

.single-product .product_title {
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.05;
	margin-bottom: 8px;
}

.single-product div.product p.price {
	margin: 10px 0 4px;
}

.single-product .woocommerce-product-details__short-description {
	max-width: 55ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted-foreground);
	margin-bottom: 8px;
}

/* Quantity + button on one strong row */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 18px 0 8px;
}

.single-product form.cart .quantity input {
	width: 76px;
	min-height: 48px;
	padding: 8px;
	text-align: center;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	font-size: 16px;
	font-weight: 600;
}

.single-product .single_add_to_cart_button {
	padding: 14px 36px;
	font-size: 15px;
}

/* Trust strip under the buy button — the quiet closer of sales. */
.gr-buy-trust {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 20px 0 4px;
	padding: 18px 20px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--muted);
	max-width: 480px;
}

.gr-buy-trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}

.gr-buy-trust .gr-icon { color: var(--wp--preset--color--primary); }

.gr-ask-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.single-product .product_meta {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 13px;
	color: var(--wp--preset--color--muted-foreground);
}

.single-product .product_meta a { color: var(--wp--preset--color--primary); }

/* Description tabs become a plain readable section */
.single-product .woocommerce-tabs {
	margin-top: 48px;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid var(--wp--preset--color--border);
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--muted-foreground);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

.single-product .woocommerce-Tabs-panel {
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.7;
}

.single-product .woocommerce-Tabs-panel h2:first-child { display: none; }

/* Related products: same editorial cards as everywhere else */
.single-product .related.products,
.single-product .up-sells {
	margin-top: 56px;
}

.single-product .related.products > h2,
.single-product .up-sells > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 20px;
}

.single-product .related.products ul.products,
.single-product .up-sells ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-product ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--surface);
	transition: border-color var(--gr-motion-base) var(--gr-ease-out);
	text-align: left;
}

.single-product ul.products li.product:hover {
	border-color: var(--wp--preset--color--foreground);
}

.single-product ul.products li.product img {
	width: 100%;
	border-radius: 14px;
	border: 0;
}

.single-product ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--foreground);
}

.single-product ul.products li.product .price {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.single-product ul.products li.product .button {
	margin-top: auto;
}

@media (max-width: 900px) {
	.single-product div.product.type-product { grid-template-columns: 1fr; gap: 24px; }
	.single-product .woocommerce-product-gallery { position: static; grid-column: 1; }
	.single-product div.product .summary { grid-column: 1; }
	.single-product .related.products ul.products,
	.single-product .up-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cart & checkout: join the system */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
	max-width: 1120px;
	margin-inline: auto;
	padding: 24px;
}

.wc-block-cart .wc-block-cart-items,
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
	font-size: 15px;
}


/* --- Blockified PDP polish ------------------------------------------------ */
.gr-pdp__gallery { position: sticky; top: 130px; }

.gr-pdp__gallery img,
.gr-pdp .wp-block-woocommerce-product-image-gallery img {
	width: 100%;
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid var(--wp--preset--color--border);
}

.gr-pdp__summary .wp-block-post-title {
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.05;
	margin-bottom: 6px;
}

.gr-pdp__summary .wp-block-post-excerpt__excerpt {
	max-width: 55ch;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-pdp__summary .wp-block-woocommerce-product-price {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.gr-pdp__meta {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 13px;
	color: var(--wp--preset--color--muted-foreground);
	gap: 6px 24px;
}

.gr-pdp__details { margin-top: 40px; }

@media (max-width: 781px) {
	.gr-pdp__gallery { position: static; }
}


/* ==========================================================================
   24. Fixes: related grid vs Woo widths, gallery float collapse, box steps
   ========================================================================== */

/* Woo forces percentage widths on li.product — neutralise inside our grids. */
.single-product .related.products,
.single-product .up-sells {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
}

.single-product ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product ul.products::before,
.single-product ul.products::after { display: none; }

/* Woo galleries float their images; without clearing, the column collapses
   and the details section rides up over the photo. */
.gr-pdp__gallery .woocommerce-product-gallery {
	display: flow-root;
}

/* Monthly box steps */
.gr-box-steps {
	margin: 20px 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gr-box-steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.5;
}

.gr-box-steps li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 2px solid var(--wp--preset--color--secondary);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 15px;
}

/* Description tab enrichment */
.gr-desc-band {
	max-width: 1280px;
	margin: 8px auto 0;
	padding: 0 24px;
}

.gr-desc-extra {
	padding: 28px 32px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--muted);
	max-width: none;
}

.gr-desc-extra h3 {
	margin: 0 0 10px;
	font-size: 18px;
}

.gr-desc-extra p {
	color: var(--wp--preset--color--muted-foreground);
	margin: 0 0 16px;
}

.gr-desc-extra ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.gr-desc-extra ul li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}

.gr-desc-extra .gr-icon { color: var(--wp--preset--color--primary); }


/* ==========================================================================
   25. Shop orientation: pagination, toolbar, floating WhatsApp
   ========================================================================== */

/* Pagination: unmissable pill numbers, 44px targets. */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 8px 14px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--gr-motion-base) var(--gr-ease-out), color var(--gr-motion-base) var(--gr-ease-out);
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.wp-block-query-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	min-width: auto;
}

/* Shop toolbar: count left, sorting right. */
.gr-shop-toolbar {
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 14px;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-shop-toolbar .woocommerce-result-count { margin: 0; }

.gr-shop-toolbar select {
	min-height: 44px;
	padding: 8px 14px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
}

/* Floating WhatsApp: always one tap from a human. */
.gr-wa-float {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: var(--gr-z-overlay);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 20px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--gr-motion-fast) var(--gr-ease-out);
}

.gr-wa-float:active { transform: scale(0.97); }
.gr-wa-float .gr-icon { color: var(--wp--preset--color--background); }

@media (max-width: 640px) {
	.gr-wa-float span { display: none; }  /* icon-only bubble on phones */
	.gr-wa-float { padding: 14px; }
}

@media print { .gr-wa-float { display: none; } }

/* Homepage category header count line */
.gr-cat-count {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted-foreground);
}


/* ==========================================================================
   26. Product page: stat chips + label accordions (Flourma-inspired)
   ========================================================================== */

/* The facts, near the price — bold number, quiet label. */
.gr-stat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 4px;
	padding: 0;
	list-style: none;
}

.gr-stat-chips li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 96px;
	padding: 10px 16px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
}

.gr-stat-chips strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
}

.gr-stat-chips span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
	margin-top: 2px;
}

/* Label accordions reuse the FAQ look; first one opens by default. */
.gr-pdp-acc { margin-top: 8px; }

.gr-pdp-acc .gr-faq__item summary {
	font-size: 15px;
	padding: 16px 20px;
}

.gr-pdp-acc .gr-faq__item p {
	max-width: 78ch;
	font-size: 15px;
	line-height: 1.65;
}


/* ==========================================================================
   27. The masala truth — machines burn, stones preserve
   ========================================================================== */

.gr-truth {
	background: var(--wp--preset--color--muted);
	border-top: 2px solid var(--wp--preset--color--border);
	border-bottom: 2px solid var(--wp--preset--color--border);
}

.gr-truth__head { text-align: center; margin-bottom: 40px; }

.gr-truth__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	line-height: 1.08;
	margin: 10px auto 0;
	max-width: 22ch;
	font-size: clamp(34px, 5.2vw, 58px);
}

.gr-truth__title span { display: block; color: var(--wp--preset--color--muted-foreground); }

.gr-truth__title strong {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.gr-truth__panels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.gr-truth__panel {
	border-radius: var(--wp--custom--radius--lg);
	padding: 36px 34px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gr-truth__panel--burn {
	background: var(--wp--preset--color--chamber);
	color: #EDEADB;
}

.gr-truth__panel--stone {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-truth__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 235, 0.25);
}

.gr-truth__panel--burn .gr-truth__label { color: #F0B15C; }
.gr-truth__panel--stone .gr-truth__label { color: #C9E3B8; }

.gr-truth__big {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	margin: 0;
}

.gr-truth__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.55;
}

.gr-truth__points li { padding-left: 22px; position: relative; }

.gr-truth__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: 0.7;
}

.gr-truth__panel--burn .gr-truth__points { color: #C9C4B0; }

.gr-truth__cta {
	margin-top: auto;
	align-self: flex-start;
	font-weight: 700;
	color: var(--wp--preset--color--background);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.gr-truth__foot {
	text-align: center;
	margin: 32px auto 0;
	max-width: 52ch;
	color: var(--wp--preset--color--muted-foreground);
	font-size: 15.5px;
}

@media (max-width: 820px) {
	.gr-truth__panels { grid-template-columns: 1fr; }
	.gr-truth__panel { padding: 28px 22px; }
}

/* ==========================================================================
   28. Shop: category rail + richer product cards
   ========================================================================== */

.gr-cat-rail {
	display: flex;
	gap: 10px;
	margin: 18px 0 4px;
	overflow-x: auto;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gr-cat-rail::-webkit-scrollbar { display: none; }

.gr-cat-rail__pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.gr-cat-rail__pill:hover { background: var(--wp--preset--color--muted); }

.gr-cat-rail__pill.is-current {
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.gr-cat-rail__count {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.gr-card-eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
	margin: 10px 0 2px;
}

.gr-card-eyebrow + .wp-block-post-title,
.gr-card-eyebrow + h3 { margin-top: 0; }

.wp-block-woocommerce-product-image { position: relative; }

.gr-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 5px 11px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* ==========================================================================
   29. Product page: at-a-glance table + calm cleaned descriptions
   ========================================================================== */

.gr-glance { margin-bottom: 26px; }

.gr-glance__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 600;
	margin: 0 0 14px;
}

.gr-glance__table {
	width: 100%;
	max-width: 720px;
	border-collapse: collapse;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	font-size: 15px;
}

.gr-glance__table tr + tr th,
.gr-glance__table tr + tr td { border-top: 1px solid var(--wp--preset--color--border); }

.gr-glance__table th {
	width: 160px;
	text-align: left;
	vertical-align: top;
	padding: 12px 16px;
	background: var(--wp--preset--color--muted);
	border-right: 1px solid var(--wp--preset--color--border);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-glance__table td { padding: 12px 16px; line-height: 1.55; }

@media (max-width: 540px) {
	.gr-glance__table th { width: 118px; padding: 11px 12px; }
	.gr-glance__table td { padding: 11px 12px; }
}

/* Cleaned description typography: calm headings, tidy lists and tables. */
.wp-block-woocommerce-product-details h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 600;
	margin: 26px 0 10px;
}

.wp-block-woocommerce-product-details p,
.wp-block-woocommerce-product-details li {
	max-width: 78ch;
	line-height: 1.65;
	font-size: 15.5px;
}

.wp-block-woocommerce-product-details ul { padding-left: 22px; }

.wp-block-woocommerce-product-details table {
	border-collapse: collapse;
	border: 2px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--surface);
	font-size: 14.5px;
	max-width: 720px;
}

.wp-block-woocommerce-product-details table th,
.wp-block-woocommerce-product-details table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 10px 14px;
	text-align: left;
}

.wp-block-woocommerce-product-details table th {
	background: var(--wp--preset--color--muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Desktop sees all categories at once; only small screens swipe the rail. */
@media (min-width: 901px) {
	.gr-cat-rail { flex-wrap: wrap; overflow-x: visible; }
}

/* ==========================================================================
   30. Brand logo, mobile footer structure, founder photo, benefit line
   ========================================================================== */

/* The real logo replaces the text brand; artwork carries the tagline. */
.gr-brand__logo { display: block; line-height: 0; }

/* The lockup stacks two words over a tagline, so size it by width — sized
   by height it shrinks to an illegible 76px. */
.gr-brand__img {
	width: 136px;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (max-width: 900px) {
	.gr-brand__img { width: 104px; }
}

@media (max-width: 420px) {
	.gr-brand__img { width: 92px; }
}

/* Footer, phone-sized: link columns sit two-by-two instead of one long
   stack, and the newsletter block spans the full width beneath them. */
@media (max-width: 781px) {
	.gr-footer__links {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 18px !important;
	}

	.gr-footer__links > .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		margin: 0 !important;
	}

	.gr-footer__links > .wp-block-column:last-child { grid-column: 1 / -1; }

	.gr-footer__seo {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 18px !important;
	}

	.gr-footer__seo > .wp-block-column { flex-basis: auto !important; margin: 0 !important; }
	.gr-footer__seo > .wp-block-column:first-child { grid-column: 1 / -1; }
	.gr-footer__seo h3 { font-size: 19px; }
	.gr-footer__seo h4 { margin-bottom: 6px; }
	.gr-footer__seo ul { margin-top: 0; }

	.gr-footer .wp-block-columns { margin-bottom: 0; }
	.gr-footer h4 { margin-top: 0; }
}

/* Founder photo in the dark chamber. */
.gr-founder-photo { margin: 0; }

.gr-founder-photo__img {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 22%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 235, 0.3);
}

.gr-founder-photo figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: rgba(255, 255, 235, 0.65);
	text-align: center;
}

@media (max-width: 781px) {
	.gr-founder-photo { max-width: 200px; margin: 0 auto 8px; }
	.gr-founder-photo__img { max-width: 180px; }
}

/* The one-line purpose statement above the stat chips. */
.gr-benefit-line {
	margin: 2px 0 0;
	font-size: 16.5px;
	font-weight: 600;
	color: var(--wp--preset--color--muted-foreground);
}

/* ==========================================================================
   31. Corrections: WhatsApp legibility, footer side-by-side, header fit
   ========================================================================== */

/* `.gr-footer a { color: inherit }` was winning on specificity and dragging
   the float's label to ink on the cream band. Pin it light on the green. */
.gr-footer a.gr-wa-float,
.gr-footer a.gr-wa-float:hover,
.gr-footer a.gr-wa-float:focus,
.gr-footer a.gr-wa-float:visited {
	color: #FFFFEB;
}

.gr-footer a.gr-wa-float span { color: #FFFFEB; }
.gr-footer a.gr-wa-float .gr-icon { color: #FFFFEB; }

/* Footer: side by side at every size the content allows. Tablet keeps four
   link columns; phones go two-up; the newsletter never stretches the page. */
.gr-footer__links > .wp-block-column { min-width: 0; }

@media (max-width: 1024px) and (min-width: 782px) {
	.gr-footer__links {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 26px 20px !important;
	}
	.gr-footer__links > .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		margin: 0 !important;
	}
	.gr-footer__links > .wp-block-column:last-child { grid-column: 1 / -1; }

	.gr-footer__links > .wp-block-column:last-child .gr-newsletter { max-width: 460px; }
	.gr-footer__links > .wp-block-column:last-child .wp-block-buttons { max-width: 460px; }
}

@media (max-width: 781px) {
	/* The sign-up column stays a simple block; only its input row is inline. */
	.gr-footer__links > .wp-block-column:last-child > * { max-width: 100%; }
	.gr-footer__links .wp-block-buttons { margin-top: 8px; }
	.gr-footer__links .gr-payment-badges { margin-top: 8px; }

	.gr-newsletter { flex-direction: row; gap: 6px; margin-block-end: 8px; }
	.gr-newsletter input { flex: 1 1 auto; min-width: 0; }
	.gr-newsletter button { flex: 0 0 auto; white-space: nowrap; }

	/* Tighter vertical rhythm so the footer stops feeling endless. */
	.gr-footer__links p { line-height: 1.9; margin: 0; }
	.gr-footer__seo p { margin: 0; }
	.gr-footer__seo ul { margin: 0; padding-left: 18px; }
	.gr-footer__seo li { line-height: 1.7; }
}

@media (max-width: 420px) {
	.gr-footer__links { gap: 20px 12px !important; }
	.gr-footer__links h4 { font-size: 11px; }
	.gr-footer__links p { font-size: 13px; }
}

/* Header: the logo must never squeeze the nav into wrapped two-line items. */
.gr-header__row .gr-brand { flex: 0 0 auto; min-width: 0; }
.gr-nav .wp-block-navigation-item__label { white-space: nowrap; }

/* Footer, phones: the two SEO lists were 323px of single-file text each.
   Wrapped inline they read the same and cost a third of the height. */
@media (max-width: 781px) {
	.gr-footer__seo ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 8px;
		padding-left: 0;
		list-style: none;
	}

	.gr-footer__seo li {
		font-size: 12.5px;
		line-height: 1.5;
		padding-left: 0;
	}

	.gr-footer__seo li::before,
	.gr-footer__seo .gr-check-list li::before { content: none; }

	.gr-footer__seo li:not(:last-child)::after {
		content: "·";
		margin-left: 8px;
		opacity: 0.45;
	}

	.gr-footer__seo > .wp-block-column:first-child { grid-column: 1 / -1; }

	.gr-footer__links p { line-height: 1.75; }
	.gr-footer__links > .wp-block-column { min-width: 0; }
}

/* Phone footer: trim the generous desktop padding so the two-column
   structure reads as one compact block rather than a scroll of its own. */
@media (max-width: 781px) {
	.gr-footer > .wp-block-group {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--40) !important;
	}

	.gr-footer__seo h3 { margin: 0 0 6px; }
	.gr-footer__seo h4 { margin: 0 0 4px; }
	.gr-footer__links h4 { margin: 0 0 6px; }
	.gr-footer .wp-block-separator { margin: 14px 0 10px; }
	.gr-footer__links { gap: 18px 14px !important; }
	.gr-footer__seo { gap: 14px 16px !important; }
}

/* Footer type on phones: theme.json's has-small-font-size wins on
   specificity, so match it to keep the two columns compact. */
@media (max-width: 781px) {
	/* Core's font-size utilities ship !important, so match it. */
	.gr-footer__links p.has-small-font-size,
	.gr-footer__links p {
		font-size: 13.5px !important;
		line-height: 1.9;
	}

	.gr-footer__links h4.has-small-font-size,
	.gr-footer__links h4 { font-size: 11.5px !important; }

	.gr-footer__links a { overflow-wrap: anywhere; }

	.gr-footer__seo h3.has-large-font-size { font-size: 18px !important; }
	.gr-footer__seo p.has-small-font-size { font-size: 13px !important; line-height: 1.6; }
	.gr-footer__seo li { font-size: 12.5px !important; }

	.gr-payment-badges.has-x-small-font-size { font-size: 11px !important; }
	.gr-footer .wp-block-buttons .wp-block-button__link { font-size: 14px; }
}

/* Long email address must not break mid-word in a 150px column, and the
   floating WhatsApp bubble must not sit on the copyright line. */
@media (max-width: 781px) {
	.gr-footer__links a[href^="mailto"] { font-size: 12px !important; }
	.gr-footer > .wp-block-group:last-child { padding-bottom: 84px !important; }
}

/* ==========================================================================
   32. Polish: logo scale, Subscribe wrap, promise cards, FAQ alignment
   ========================================================================== */

/* Logo a touch smaller again. */
.gr-brand__img { width: 118px; }

@media (max-width: 900px) { .gr-brand__img { width: 96px; } }
@media (max-width: 420px) { .gr-brand__img { width: 86px; } }

/* "Subscribe" was dropping its last letter to a second line. */
.gr-newsletter button {
	white-space: nowrap;
	flex: 0 0 auto;
	padding-left: 18px;
	padding-right: 18px;
}

.gr-newsletter { flex-wrap: nowrap; }
.gr-newsletter input { flex: 1 1 auto; min-width: 0; }

/* Promise cards take the forest of the "Our promise" panel rather than the
   near-black chamber, and every icon ring is the same quiet outline — the
   multi-coloured tiles read as decoration, not as brand. */
.gr-usp {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #F2EFE0;
}

.gr-usp__icon,
.gr-usp--2 .gr-usp__icon,
.gr-usp--3 .gr-usp__icon,
.gr-usp--4 .gr-usp__icon,
.gr-usp--5 .gr-usp__icon {
	background: transparent;
	border: 2px solid rgba(242, 239, 224, 0.4);
	color: #F2EFE0;
}

.gr-usp__sub { color: rgba(242, 239, 224, 0.8); }

/* Align the promise panel with the FAQ list, not with the FAQ heading. The
   spacer mirrors .gr-faq__title's exact height so the two tops sit level
   however long the heading runs. */
@media (min-width: 782px) {
	.gr-faq-cols > .wp-block-column:last-child::before {
		content: "";
		display: block;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 600;
		line-height: 1.2;
		height: 1.2em;
		margin-bottom: 16px;
	}
}

/* ==========================================================================
   33. Mobile header: two calm rows instead of three crowded ones
   ==========================================================================
   Was: logo + burger / delivery + login + cart / search — three stacked
   rows. Now: logo … login · cart · burger, then the search beneath.
   `display: contents` dissolves the tools wrapper so each control can be
   ordered against the logo and burger directly. */

@media (max-width: 900px) {
	.gr-header__row {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 12px;
		column-gap: 12px;
		padding: 14px 18px;
	}

	/* WordPress prints its block-layout display:flex inline, after the theme
	   stylesheet, so this needs to outrank it. */
	.gr-header .gr-header__row > .gr-header__tools { display: contents !important; }

	.gr-header__row .gr-brand { order: 1; }

	/* Pushes login, cart and burger as one group to the right edge. */
	.gr-header .gr-login { order: 2; margin-left: auto !important; }
	.gr-header .wp-block-woocommerce-mini-cart { order: 3; }
	.gr-header .gr-nav { order: 4; }

	.gr-header .gr-search {
		order: 5;
		flex: 1 1 100%;
		width: auto;
		max-width: none;
		margin: 0;
	}

	/* The pincode chip points at #gr-pincode, which only exists on the
	   homepage hero — so on phones it is a dead link taking up a row. */
	.gr-header .gr-pincode-chip { display: none; }

	.gr-header .gr-login a {
		font-size: 13px;
		white-space: nowrap;
	}

	/* Burger and cart sit as equal-weight icons beside each other. */
	.gr-header .gr-nav .wp-block-navigation__responsive-container-open {
		padding: 4px;
	}

	.gr-header .wp-block-woocommerce-mini-cart { margin-left: 2px; }
}

@media (max-width: 420px) {
	.gr-header__row { padding: 12px 14px; column-gap: 10px; }
	.gr-header .gr-login a { font-size: 12.5px; }
	.gr-header .gr-search .wp-block-search__input { font-size: 14px; }
}

/* Phones: the cart shows its icon and item badge only. The rupee total was
   98px wide — nearly a third of the row — and the drawer states it anyway.
   The button keeps its full aria-label, so the amount is still announced. */
@media (max-width: 900px) {
	.gr-header .wc-block-mini-cart__amount { display: none; }
	.gr-header .wc-block-mini-cart__button { padding: 4px; gap: 0; }
}