/*
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(3, 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: 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; }
}

/* --- 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: nowrap; }
	.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;
	/* No sticky here: Woo's gallery script forces position:relative inline,
	   and relative + top:130px shoved every product photo 130px down,
	   leaving a dead gap under the breadcrumbs. The sticky wrapper is
	   .gr-pdp__gallery, which the script never touches. */
}

.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; }
}

/* ==========================================================================
   34. Delivery area, product label, referral offer
   ========================================================================== */

/* --- Header switcher --- */
.gr-area {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
}

.gr-area__label {
	color: var(--wp--preset--color--muted-foreground);
	font-weight: 600;
	white-space: nowrap;
}

.gr-area__opt {
	padding: 5px 11px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
}

.gr-area__opt.is-on {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-area__opt:hover:not(.is-on) { background: var(--wp--preset--color--muted); }

/* The switcher lives in the dark strip, the way a delivery-location control
   does on every grocery app — so the header pill stays at two calm rows. */
.gr-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
}

.gr-topbar .gr-area__label { color: rgba(255, 255, 235, 0.7); }

.gr-topbar .gr-area__opt {
	border-color: rgba(255, 255, 235, 0.35);
	color: #FFFFEB;
	padding: 3px 10px;
}

.gr-topbar .gr-area__opt.is-on {
	background: #FFFFEB;
	border-color: #FFFFEB;
	color: var(--wp--preset--color--chamber);
}

.gr-topbar .gr-area__opt:hover:not(.is-on) { background: rgba(255, 255, 235, 0.12); }

.gr-topbar__promo { margin: 0; }

@media (max-width: 900px) {
	.gr-topbar__row { justify-content: center; }
	.gr-topbar__promo { display: none; }
	.gr-area__label { display: none; }
	.gr-area__opt { padding: 3px 10px; font-size: 11.5px; }
}

/* --- Hero area choice, replacing the pincode gate --- */
.gr-hero__area { margin: 26px 0 20px; }

.gr-hero__area-label {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: 15px;
}

.gr-hero__area-choice { display: flex; flex-wrap: wrap; gap: 10px; }

.gr-hero__area-btn {
	display: inline-flex;
	align-items: center;
	min-height: var(--gr-touch-min);
	padding: 12px 22px;
	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-weight: 700;
	text-decoration: none;
}

.gr-hero__area-btn.is-on,
.gr-hero__area-btn:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-hero__area-note {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--muted-foreground);
}

/* --- Bengaluru-only note on a product --- */
.gr-local-note {
	margin: 10px 0 0;
	padding: 10px 14px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--accent-surface);
	font-size: 14px;
	font-weight: 600;
}

/* --- The label block, in Flourma's reading order --- */
.gr-label { margin-bottom: 26px; }

.gr-label__nutri {
	padding: 20px 22px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	margin-bottom: 24px;
}

.gr-label__nutri-head {
	margin: 0 0 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-label__nutri-list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gr-label__nutri-list li { display: flex; flex-direction: column; }

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

.gr-label__nutri-list span {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-label__nutri-note {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-label__block { margin-bottom: 24px; }

.gr-label__block h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 12px;
}

.gr-label__ticks,
.gr-label__ings {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	max-width: 72ch;
}

.gr-label__ticks li {
	position: relative;
	padding-left: 28px;
	font-size: 15.5px;
	line-height: 1.55;
}

.gr-label__ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--background);
}

.gr-label__ings {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px 10px;
}

.gr-label__ings li {
	padding: 8px 14px;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--muted);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

/* --- Referral offer on the thank-you page --- */
.gr-referral {
	margin: 32px auto 40px;
	max-width: 760px;
	padding: 32px 30px;
	border-radius: var(--wp--custom--radius--chamber);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-referral__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C9E3B8;
}

.gr-referral__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--wp--preset--color--background);
}

.gr-referral__body {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.6;
	max-width: 60ch;
	color: rgba(255, 255, 235, 0.9);
}

.gr-referral__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.gr-referral__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--gr-touch-min);
	padding: 13px 24px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}

.gr-referral__cta:hover { background: #FFFFFF; }

.gr-referral__note {
	font-size: 13.5px;
	color: rgba(255, 255, 235, 0.75);
}

@media (max-width: 600px) {
	.gr-referral { padding: 24px 20px; margin: 24px auto 30px; }
	.gr-label__nutri-list strong { font-size: 26px; }
}

/* ==========================================================================
   35. Area gate, basket nudges, goes-well-with
   ========================================================================== */

.gr-local-gate {
	padding: 18px 20px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--accent-surface);
	margin: 16px 0;
}

.gr-local-gate p { margin: 0 0 8px; font-size: 15px; }
.gr-local-gate p:last-child { margin: 0; }
.gr-local-gate a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.gr-nudge {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--muted);
	font-size: 14.5px;
}

.gr-nudge strong { color: var(--wp--preset--color--primary); }

.gr-nudge--won {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-weight: 700;
}

.gr-goes-well { margin: 34px 0 10px; }

.gr-goes-well h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 16px;
}

.gr-goes-well ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gr-goes-well a {
	display: block;
	padding: 12px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.gr-goes-well a:hover { background: var(--wp--preset--color--muted); }

.gr-goes-well img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: 10px;
	display: block;
}

.gr-goes-well__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 4px;
}

.gr-goes-well__price {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	font-size: 14.5px;
}

@media (max-width: 600px) {
	.gr-goes-well ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gr-goes-well ul li:last-child { display: none; }
}

/* ==========================================================================
   36. WhatsApp community band, kitchen video, trust bar
   ========================================================================== */

.gr-community {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.gr-community__inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 30px 44px;
	align-items: center;
}

.gr-community__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #C9E3B8;
}

.gr-community__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 12px;
	color: var(--wp--preset--color--background);
}

.gr-community__body {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
	max-width: 54ch;
	color: rgba(255, 255, 235, 0.9);
}

.gr-community__points {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
	font-size: 14.5px;
	color: rgba(255, 255, 235, 0.86);
}

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

.gr-community__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #C9E3B8;
}

.gr-community__action { text-align: center; }

.gr-community__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 60px;
	padding: 16px 26px;
	border-radius: var(--wp--custom--radius--pill);
	background: #25D366;
	border: 2px solid var(--wp--preset--color--chamber);
	color: var(--wp--preset--color--chamber);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.gr-community__cta:hover { background: #1FBE5A; }

.gr-community__note {
	margin: 10px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 235, 0.75);
}

@media (max-width: 860px) {
	.gr-community__inner { grid-template-columns: 1fr; }
	.gr-community__action { text-align: left; }
	.gr-community__cta { width: auto; }
}

/* --- Kitchen video --- */
.gr-kitchen__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 44px;
	align-items: center;
}

.gr-kitchen__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
	margin: 8px 0 14px;
}

.gr-kitchen__body {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.65;
	max-width: 52ch;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-kitchen__link {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

.gr-kitchen__video {
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 848;
	object-fit: cover;
	display: block;
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--muted);
}

@media (max-width: 860px) {
	.gr-kitchen__inner { grid-template-columns: 1fr; }
	.gr-kitchen__clips { max-width: 440px; }
}

/* --- Trust bar --- */
.gr-trustbar {
	border-top: 2px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--muted);
}

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

.gr-trustbar__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

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

.gr-trustbar__logo {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.gr-trustbar__text { display: flex; flex-direction: column; min-width: 0; }
.gr-trustbar__text strong { font-size: 14.5px; line-height: 1.25; }

.gr-trustbar__text span {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--wp--preset--color--muted-foreground);
}

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

@media (max-width: 440px) {
	.gr-trustbar__mark, .gr-trustbar__logo { width: 38px; height: 38px; }
	.gr-trustbar__text strong { font-size: 13px; }
	.gr-trustbar__text span { font-size: 11.5px; }
}

/* ==========================================================================
   37. Video testimonial + team photograph
   ========================================================================== */

/* The clip is 720x1280 — a portrait phone video. Sized by width it grew to
   815px tall and swallowed the section, so it is sized by height instead and
   sits at roughly the size of a phone held up. */
.gr-vtest {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 32px 44px;
	align-items: center;
	margin-bottom: 48px;
	padding-bottom: 44px;
	border-bottom: 2px solid var(--wp--preset--color--border);
}

.gr-vtest__media { margin: 0; }

.gr-vtest__video {
	height: 660px;
	width: auto;
	max-width: 100%;
	aspect-ratio: 720 / 1280;
	object-fit: cover;
	display: block;
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--chamber);
}

.gr-vtest__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.08;
	margin: 8px 0 14px;
	color: var(--wp--preset--color--primary);
}

.gr-vtest__body {
	margin: 0 0 12px;
	font-size: 16.5px;
	line-height: 1.65;
	max-width: 46ch;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-vtest__meta {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

@media (max-width: 900px) {
	.gr-vtest {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 34px;
		padding-bottom: 30px;
		justify-items: center;
	}
	.gr-vtest__text { order: -1; justify-self: start; }
	.gr-vtest__video { height: 560px; }
}

@media (max-width: 420px) {
	.gr-vtest__video { height: 460px; }
}

/* --- Team photograph, full bleed --- */
.gr-team { position: relative; }

.gr-team__figure { margin: 0; position: relative; }

/* Every face in this photograph is the point of it, so it is never cropped —
   the whole frame shows at every width. */
.gr-team__img {
	width: 100%;
	height: auto;
	display: block;
	border-top: 2px solid var(--wp--preset--color--foreground);
	border-bottom: 2px solid var(--wp--preset--color--foreground);
}

.gr-team__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
	color: #FFFFEB;
	background: linear-gradient(to top, rgba(10, 20, 14, 0.82), rgba(10, 20, 14, 0));
}

.gr-team__eyebrow {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 17px;
	color: #E8C98A;
}

.gr-team__line {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.25;
}

@media (max-width: 700px) {
	.gr-team__cap { padding: 28px 14px 12px; }
	.gr-team__line { font-size: 16px; }
	.gr-team__eyebrow { font-size: 15px; }
}

/* ==========================================================================
   38. Grocery box + WhatsApp group, as a pair
   ========================================================================== */

.gr-duo__grid {
	display: grid;
	grid-template-columns: 1.08fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.gr-duo__card {
	display: flex;
	flex-direction: column;
	padding: 34px 32px 30px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--chamber);
}

.gr-duo__card--box {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
}

.gr-duo__card--group {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-duo__eyebrow {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 19px;
	color: var(--wp--preset--color--accent);
}

.gr-duo__card--group .gr-duo__eyebrow { color: #E8C98A; }

.gr-duo__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 12px;
}

.gr-duo__card--group .gr-duo__title { color: var(--wp--preset--color--background); }

.gr-duo__body {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-duo__card--group .gr-duo__body { color: rgba(255, 255, 235, 0.9); }

.gr-duo__steps,
.gr-duo__points {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

.gr-duo__steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

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

.gr-duo__points li { position: relative; padding-left: 22px; color: rgba(255, 255, 235, 0.88); }

.gr-duo__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #C9E3B8;
}

.gr-duo__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: var(--gr-touch-min);
	padding: 14px 26px;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

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

.gr-duo__cta--wa {
	background: #25D366;
	border-color: var(--wp--preset--color--chamber);
	color: var(--wp--preset--color--chamber);
}

.gr-duo__cta--wa:hover { background: #1FBE5A; color: var(--wp--preset--color--chamber); }

.gr-duo__note {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-duo__card--group .gr-duo__note { color: rgba(255, 255, 235, 0.72); }

@media (max-width: 860px) {
	.gr-duo__grid { grid-template-columns: 1fr; }
	.gr-duo__card { padding: 26px 22px 24px; }
	.gr-duo__cta { align-self: stretch; justify-content: center; }
}

/* ==========================================================================
   39. Delivery choice as two plain cards, and the build credit
   ========================================================================== */

/* Two equal cards, side by side at every width — the choice is binary, so
   it should look binary rather than like two links that happened to wrap. */
.gr-hero__area-choice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	max-width: 480px;
}

.gr-hero__area-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-height: auto;
	padding: 14px 18px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	line-height: 1.25;
}

.gr-hero__area-btn strong {
	font-size: 17px;
	font-weight: 700;
}

.gr-hero__area-btn span {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted-foreground);
}

.gr-hero__area-btn.is-on,
.gr-hero__area-btn:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-hero__area-btn.is-on span,
.gr-hero__area-btn:hover span { color: rgba(255, 255, 235, 0.85); }

@media (max-width: 400px) {
	.gr-hero__area-btn { padding: 12px 14px; }
	.gr-hero__area-btn strong { font-size: 15.5px; }
	.gr-hero__area-btn span { font-size: 11.5px; }
}

/* Build credit, quiet at the very bottom. */
.gr-credit {
	margin: 10px 0 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 235, 0.55);
}

.gr-credit a {
	color: rgba(255, 255, 235, 0.85);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gr-credit a:hover { color: #FFFFEB; }

/* ==========================================================================
   40. Product photos: the gallery must never cover the price
   ==========================================================================
   The gallery block reserves a height from the image metadata; when the real
   photo is taller (portrait shots, seller photos), it spilled out of the
   reserved box and sat on top of the title and price on phones. Cropping to
   a square — the same shape as every card in the shop — and clipping the box
   makes the layout independent of whatever shape the photo arrives in. */

.gr-pdp .wp-block-woocommerce-product-image-gallery { overflow: hidden; }

.gr-pdp .wp-block-woocommerce-product-image-gallery .wc-block-product-gallery-large-image img,
.gr-pdp .wp-block-woocommerce-product-image-gallery > img,
.gr-pdp .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

@media (max-width: 781px) {
	.gr-pdp__gallery { margin-bottom: 6px; }
	.gr-pdp__summary .wp-block-post-title { margin-top: 10px; }
}

/* ==========================================================================
   41. Basket progress bar: free delivery at 499, free gift at 2,000
   ========================================================================== */

.gr-shipbar {
	margin: 0 0 18px;
	padding: 16px 16px 12px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
}

.gr-shipbar__track {
	position: relative;
	height: 8px;
	margin: 10px 22px 26px 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--stone, #E4E4D0);
}

.gr-shipbar__fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	transition: width 300ms ease;
}

.gr-shipbar__stop {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--foreground);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--muted-foreground);
	z-index: 1;
}

.gr-shipbar__stop.is-hit {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-shipbar__msg {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	text-align: left;
}

.gr-shipbar__msg strong { color: var(--wp--preset--color--primary); }

/* Inside the mini-cart drawer: tighter, and always readable on cream. */
.wc-block-mini-cart__drawer .gr-shipbar {
	margin: 0 16px 8px;
	padding: 12px 12px 10px;
}

.wc-block-mini-cart__drawer .gr-shipbar__track { margin-bottom: 24px; }
.wc-block-mini-cart__drawer .gr-shipbar__msg { font-size: 13.5px; }

@media (max-width: 480px) {
	.gr-shipbar__stop { width: 30px; height: 30px; }
	.gr-shipbar__msg { font-size: 13.5px; }
}

/* Drawer polish: the bar was tucking under the drawer title, and the item
   rows were printing fragments of the imported descriptions ("Key
   Features…"). In a narrow drawer the name, price and quantity are the
   whole story — the description belongs on the product page. */
.wc-block-mini-cart__drawer .gr-shipbar { margin: 4px 16px 12px; }

.wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	display: none;
}

/* ==========================================================================
   42. The heritage layer: paper grain, rubber stamp, handmade dividers
   ==========================================================================
   The client's word was "vibe" — artisanal, homely. Three quiet moves:
   a paper-fibre grain over the cream so the page feels printed rather than
   rendered; a rubber-stamp seal by the hero art; and the hand-drawn squiggle
   repeated as a small flourish under every section title. */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	mix-blend-mode: multiply;
}

/* The stamp sits by the hero art, tilted like it was pressed by hand. */
.gr-hero__art { position: relative; }

.gr-stamp {
	position: absolute;
	right: -8px;
	bottom: -20px;
	width: 128px;
	height: 128px;
	transform: rotate(-11deg);
}

@media (max-width: 781px) {
	.gr-stamp { width: 96px; height: 96px; right: 2px; bottom: -12px; }
}

/* Every section heading carries the hand-drawn flourish. */
.gr-section-title::after,
.gr-kitchen__title::after,
.gr-vtest__title::after {
	content: "";
	display: block;
	width: 96px;
	height: 9px;
	margin-top: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 30 3, 55 12, 82 7 S 135 3, 162 8 S 205 5, 217 8' fill='none' stroke='%23D97706' stroke-width='5' stroke-linecap='round' opacity='0.75'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* ==========================================================================
   43. Client round: popup chooser, equal tiles, dense mobile shop, PDP fit
   ========================================================================== */

/* --- First-visit delivery popup ------------------------------------------ */
.gr-area-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.gr-area-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 18, 0.55);
	backdrop-filter: blur(2px);
}

.gr-area-modal__card {
	position: relative;
	width: min(520px, 100%);
	background: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--chamber);
	padding: 34px 30px 26px;
	text-align: center;
}

.gr-area-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 18px;
	line-height: 1;
	padding: 8px;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
}

.gr-area-modal__eyebrow {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 20px;
	color: var(--wp--preset--color--accent);
}

.gr-area-modal__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(26px, 5vw, 34px);
	font-weight: 600;
	margin: 0 0 22px;
	color: var(--wp--preset--color--primary);
}

.gr-area-modal__choices {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gr-area-modal__btn {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 14px;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	line-height: 1.25;
}

.gr-area-modal__btn strong { font-size: 18px; font-weight: 700; }
.gr-area-modal__btn span { font-size: 12.5px; color: var(--wp--preset--color--muted-foreground); }

.gr-area-modal__btn:hover,
.gr-area-modal__btn--blr {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.gr-area-modal__btn:hover span,
.gr-area-modal__btn--blr span { color: rgba(255, 255, 235, 0.85); }

.gr-area-modal__note {
	margin: 16px 0 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--muted-foreground);
}

body:has(.gr-area-modal) { overflow: hidden; }

@media (max-width: 420px) {
	.gr-area-modal__choices { grid-template-columns: 1fr; }
	.gr-area-modal__card { padding: 28px 20px 22px; }
}

/* --- Category grid: equal photo tiles, client order ----------------------- */
.gr-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.gr-category-card { grid-column: auto !important; grid-row: auto !important; }

.gr-category-card__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: var(--wp--custom--radius--sm);
}

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

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

/* --- Shop: two products per row on phones (Zepto density) ----------------- */
@media (max-width: 640px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	.wp-block-woocommerce-product-collection ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.wp-block-woocommerce-product-collection li.product {
		width: 100% !important;
		margin: 0 !important;
	}

	.wp-block-woocommerce-product-collection .wp-block-post-title { font-size: 13.5px; line-height: 1.3; }
	.wp-block-woocommerce-product-collection .gr-card-eyebrow { font-size: 9px; margin-top: 6px; }
	.wp-block-woocommerce-product-collection .wc-block-components-product-price { font-size: 14px; }
	.wp-block-woocommerce-product-collection .wp-block-button__link { font-size: 12px; padding: 8px 14px; }
	.gr-card-badge { font-size: 10px; padding: 3px 8px; top: 6px; left: 6px; }
}

/* --- PDP: quantity stepper + tighter mobile spacing ----------------------- */
.gr-qty-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 2px solid var(--wp--preset--color--foreground);
	border-radius: var(--wp--custom--radius--pill);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.gr-qty-wrap input.qty {
	border: 0 !important;
	width: 52px;
	text-align: center;
	font-weight: 700;
	background: transparent;
	-moz-appearance: textfield;
}

.gr-qty-wrap input.qty::-webkit-inner-spin-button,
.gr-qty-wrap input.qty::-webkit-outer-spin-button { -webkit-appearance: none; }

.gr-qty-btn {
	border: 0;
	background: transparent;
	width: 42px;
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

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

@media (max-width: 781px) {
	/* The stacked columns inherited the 70-step desktop gap — most of the
	   "unnecessary space" the client photographed. */
	.gr-pdp .wp-block-columns { gap: 14px !important; }
	.gr-pdp { padding-top: 14px !important; }
	.gr-pdp .woocommerce-breadcrumb,
	.gr-pdp .wp-block-woocommerce-breadcrumbs { margin-bottom: 4px; font-size: 12px; }
}

/* ==========================================================================
   44. Hero photograph, women-led badge, decongested category tiles
   ========================================================================== */

/* --- The team photograph fills the hero's right side ---------------------- */
.gr-hero__photo { margin: 0; }

.gr-hero__photo-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 38%;
	display: block;
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid var(--wp--preset--color--foreground);
}

.gr-hero__photo figcaption {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--accent);
	font-size: 17px;
	color: var(--wp--preset--color--accent);
	text-align: center;
}

@media (max-width: 781px) {
	.gr-hero__media { margin-top: 6px; }
	.gr-hero__photo-img { aspect-ratio: 16 / 9; }
	.gr-hero__photo figcaption { font-size: 15px; }
}

/* The women-led badge leads the craft chips, in the accent colour. */
.gr-craft-badges__lead {
	background: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
}

/* --- Category tiles: wider than tall, never cramped ----------------------- */
.gr-category-card__img {
	/* The attachment's height attribute (300) was pinning the box tall and
	   square; aspect-ratio only engages when height is auto. */
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
}

.gr-category-card__label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.25;
	min-height: 2.5em;
}

.gr-category-card__count { font-size: 12px; }

@media (max-width: 900px) {
	.gr-category-grid { gap: 12px; }
}

@media (max-width: 600px) {
	.gr-category-grid { gap: 10px; }
	.gr-category-card { padding: 8px 8px 10px; }
	.gr-category-card__label { font-size: 13px; min-height: 2.6em; }
	.gr-category-card__count { font-size: 11px; }
}


/* Guard: the inner gallery must never carry a scroll offset of its own. */
.gr-pdp .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery {
	top: auto !important;
}

/* While the delivery popup is open, nothing else competes for taps. */
body:has(.gr-area-modal) .gr-wa-float { display: none; }

.gr-area-modal__btn,
.gr-area-modal__close,
.gr-area-modal__backdrop {
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(4, 65, 35, 0.15);
}



/**
 * NEICHORU VIDEO TESTIMONIAL GALLERY (auto-updating, uniquely namespaced)
 * -------------------------------------------------
 * All function/hook/meta/CSS/JS names below use the "nch" prefix so this
 * code cannot clash with any other plugin, theme code, or testimonial/
 * gallery feature already running on your site.
 *
 * Paste this ENTIRE block at the bottom of your active theme's functions.php,
 * then save.
 *
 * Usage after that:
 * 1. wp-admin -> "Neichoru Video Testimonials" menu -> Add New.
 * 2. Fill in Title, Featured Image (or Video URL field), price, etc.
 * 3. Publish. It appears automatically wherever you place this shortcode:
 *
 *      [neichoru_video_testimonials]
 *
 *    Optional limit:  [neichoru_video_testimonials count="8"]
 */

/* -------------------------------------------------
 * 1. REGISTER THE CUSTOM POST TYPE
 * ------------------------------------------------- */
function nch_vt_register_post_type() {
    $labels = array(
        'name'          => 'Neichoru Video Testimonials',
        'singular_name' => 'Video Testimonial',
        'add_new_item'  => 'Add New Testimonial',
        'edit_item'     => 'Edit Testimonial',
        'all_items'     => 'All Items',
        'menu_name'     => 'Neichoru Video Testimonials',
    );

    register_post_type( 'nch_video_testimonial', array(
        'labels'        => $labels,
        'public'        => true,
        'show_in_menu'  => true,
        'menu_icon'     => 'dashicons-video-alt3',
        'supports'      => array( 'title', 'thumbnail' ),
        'has_archive'   => false,
        'rewrite'       => false,
        'show_in_rest'  => true,
    ) );
}
add_action( 'init', 'nch_vt_register_post_type' );

/* -------------------------------------------------
 * 2. ADD CUSTOM FIELDS (meta box) IN THE ADMIN
 * ------------------------------------------------- */
function nch_vt_add_meta_box() {
    add_meta_box(
        'nch_vt_details',
        'Testimonial Details',
        'nch_vt_meta_box_html',
        'nch_video_testimonial',
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'nch_vt_add_meta_box' );

function nch_vt_meta_box_html( $post ) {
    wp_nonce_field( 'nch_vt_save_meta', 'nch_vt_meta_nonce' );

    $video_url   = get_post_meta( $post->ID, '_nchvt_video_url', true );
    $views       = get_post_meta( $post->ID, '_nchvt_views', true );
    $price       = get_post_meta( $post->ID, '_nchvt_price', true );
    $orig_price  = get_post_meta( $post->ID, '_nchvt_original_price', true );
    $discount    = get_post_meta( $post->ID, '_nchvt_discount', true );
    $buy_url     = get_post_meta( $post->ID, '_nchvt_buy_url', true );
    $badge       = get_post_meta( $post->ID, '_nchvt_badge', true );
    ?>
    <p>
        <label><strong>Video URL</strong> (direct .mp4 link; leave blank to just use the Featured Image)</label><br>
        <input type="text" name="nchvt_video_url" value="<?php echo esc_attr( $video_url ); ?>" style="width:100%;">
    </p>
    <p>
        <label><strong>Views text</strong> (e.g. 17.5K Views)</label><br>
        <input type="text" name="nchvt_views" value="<?php echo esc_attr( $views ); ?>" style="width:100%;">
    </p>
    <p>
        <label><strong>Price</strong> (e.g. INR 299)</label><br>
        <input type="text" name="nchvt_price" value="<?php echo esc_attr( $price ); ?>" style="width:100%;">
    </p>
    <p>
        <label><strong>Original Price / Strikethrough</strong> (e.g. INR 599)</label><br>
        <input type="text" name="nchvt_original_price" value="<?php echo esc_attr( $orig_price ); ?>" style="width:100%;">
    </p>
    <p>
        <label><strong>Discount label</strong> (e.g. 50% Off)</label><br>
        <input type="text" name="nchvt_discount" value="<?php echo esc_attr( $discount ); ?>" style="width:100%;">
    </p>
    <p>
        <label><strong>Buy Now Link</strong></label><br>
        <input type="text" name="nchvt_buy_url" value="<?php echo esc_attr( $buy_url ); ?>" style="width:100%;">
    </p>
    <p>
        <label><strong>Badge text</strong> (optional pill - leave blank to hide)</label><br>
        <input type="text" name="nchvt_badge" value="<?php echo esc_attr( $badge ); ?>" style="width:100%;">
    </p>
    <?php
}

function nch_vt_save_meta( $post_id ) {
    if ( ! isset( $_POST['nch_vt_meta_nonce'] ) || ! wp_verify_nonce( $_POST['nch_vt_meta_nonce'], 'nch_vt_save_meta' ) ) {
        return;
    }
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }

    $fields = array(
        'nchvt_video_url'      => '_nchvt_video_url',
        'nchvt_views'          => '_nchvt_views',
        'nchvt_price'          => '_nchvt_price',
        'nchvt_original_price' => '_nchvt_original_price',
        'nchvt_discount'       => '_nchvt_discount',
        'nchvt_buy_url'        => '_nchvt_buy_url',
        'nchvt_badge'          => '_nchvt_badge',
    );

    foreach ( $fields as $field => $meta_key ) {
        if ( isset( $_POST[ $field ] ) ) {
            update_post_meta( $post_id, $meta_key, sanitize_text_field( $_POST[ $field ] ) );
        }
    }
}
add_action( 'save_post_nch_video_testimonial', 'nch_vt_save_meta' );

/* -------------------------------------------------
 * 2b. AUTO-ADD YOUR TWO VIDEOS (runs once, safe to leave in place)
 *     Edit them anytime from Neichoru Video Testimonials -> All Items.
 * ------------------------------------------------- */
function nch_vt_seed_default_entries() {
    if ( get_option( 'nch_vt_seeded_v1' ) ) {
        return; // already added, won't duplicate
    }

    $videos = array(
        array(
            'title' => 'Fresh Friday Batch',
            'video' => 'https://neichoru.com/wp-content/uploads/2026/09/WhatsApp-Video-2026-09-09-at-5.03.06-PM.mp4',
        ),
        array(
            'title' => 'Kids Healthy Snack Time',
            'video' => 'https://neichoru.com/wp-content/uploads/2026/09/every-Friday-fresh-batch-we-prepare-%E2%80%A2_KidsSnacks_%E2%80%A2_HealthySnacks_%E2%80%A2_SnackTime_%E2%80%A2_SnackIdeas_%E2%80%A2_.mp4',
        ),
    );

    foreach ( $videos as $v ) {
        $post_id = wp_insert_post( array(
            'post_title'  => $v['title'],
            'post_type'   => 'nch_video_testimonial',
            'post_status' => 'publish',
        ) );

        if ( $post_id && ! is_wp_error( $post_id ) ) {
            update_post_meta( $post_id, '_nchvt_video_url', $v['video'] );
        }
    }

    update_option( 'nch_vt_seeded_v1', 1 );
}
add_action( 'init', 'nch_vt_seed_default_entries' );

/* -------------------------------------------------
 * 3. SHORTCODE - AUTO-PULLS EVERY PUBLISHED ENTRY
 *    Usage: [neichoru_video_testimonials]
 *           [neichoru_video_testimonials count="8"]
 * ------------------------------------------------- */
function nch_vt_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'count' => -1,
    ), $atts );

    $query = new WP_Query( array(
        'post_type'      => 'nch_video_testimonial',
        'posts_per_page' => intval( $atts['count'] ),
        'post_status'    => 'publish',
        'orderby'        => 'date',
        'order'          => 'DESC',
    ) );

    if ( ! $query->have_posts() ) {
        return '<p>No testimonials added yet.</p>';
    }

    $items = array();
    $i     = 0;

    ob_start();
    ?>
    <div class="nchvt-gallery">
        <?php while ( $query->have_posts() ) : $query->the_post();
            $video_url  = get_post_meta( get_the_ID(), '_nchvt_video_url', true );
            $views      = get_post_meta( get_the_ID(), '_nchvt_views', true );
            $price      = get_post_meta( get_the_ID(), '_nchvt_price', true );
            $orig_price = get_post_meta( get_the_ID(), '_nchvt_original_price', true );
            $discount   = get_post_meta( get_the_ID(), '_nchvt_discount', true );
            $buy_url    = get_post_meta( get_the_ID(), '_nchvt_buy_url', true );
            $badge      = get_post_meta( get_the_ID(), '_nchvt_badge', true );
            $image_url  = has_post_thumbnail() ? get_the_post_thumbnail_url( get_the_ID(), 'large' ) : '';

            $items[] = array(
                'title'    => get_the_title(),
                'video'    => $video_url,
                'image'    => $image_url,
                'views'    => $views,
                'price'    => $price,
                'orig'     => $orig_price,
                'discount' => $discount,
                'buy'      => $buy_url,
                'badge'    => $badge,
            );
            ?>
            <div class="nchvt-card" onclick="nchVtOpenModal(<?php echo (int) $i; ?>)">
                <div class="nchvt-media">
                    <?php if ( $video_url ) : ?>
                        <video src="<?php echo esc_url( $video_url ); ?>" muted loop playsinline
                               onmouseover="this.play()" onmouseout="this.pause()"></video>
                    <?php elseif ( has_post_thumbnail() ) : ?>
                        <?php the_post_thumbnail( 'medium_large' ); ?>
                    <?php endif; ?>

                    <div class="nchvt-overlay">
                        <span class="nchvt-title-overlay"><?php the_title(); ?></span>
                    </div>

                    <?php if ( $views ) : ?>
                        <span class="nchvt-views"><?php echo esc_html( $views ); ?></span>
                    <?php endif; ?>

                    <div class="nchvt-icons">
                        <span class="dashicons dashicons-heart"></span>
                        <span class="dashicons dashicons-share"></span>
                    </div>

                    <?php if ( $badge ) : ?>
                        <div class="nchvt-badge">
                            <span class="dashicons dashicons-tag"></span> <?php echo esc_html( $badge ); ?>
                        </div>
                    <?php endif; ?>
                </div>

                <div class="nchvt-info">
                    <p class="nchvt-name"><?php the_title(); ?></p>
                    <p class="nchvt-price">
                        <?php if ( $price ) : ?><strong><?php echo esc_html( $price ); ?></strong><?php endif; ?>
                        <?php if ( $orig_price ) : ?><del><?php echo esc_html( $orig_price ); ?></del><?php endif; ?>
                    </p>
                    <?php if ( $discount ) : ?>
                        <p class="nchvt-discount"><?php echo esc_html( $discount ); ?></p>
                    <?php endif; ?>
                    <?php if ( $buy_url ) : ?>
                        <a href="<?php echo esc_url( $buy_url ); ?>" class="nchvt-buy-btn" onclick="event.stopPropagation()">Buy Now</a>
                    <?php endif; ?>
                </div>
            </div>
            <?php $i++; ?>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>

    <!-- POPUP MODAL -->
    <div class="nchvt-modal" id="nchVtModal">
        <div class="nchvt-modal-inner">
            <button class="nchvt-modal-close" onclick="nchVtCloseModal()">&times;</button>
            <button class="nchvt-modal-nav nchvt-modal-prev" onclick="nchVtNav(-1)">&#10094;</button>
            <div class="nchvt-modal-media" id="nchVtModalMedia"></div>
            <button class="nchvt-modal-nav nchvt-modal-next" onclick="nchVtNav(1)">&#10095;</button>
            <div class="nchvt-modal-info" id="nchVtModalInfo"></div>
        </div>
    </div>

    <script>
    (function(){
        var nchVtItems = <?php echo wp_json_encode( $items ); ?>;
        var nchVtCurrent = 0;

        window.nchVtOpenModal = function(index){
            nchVtCurrent = index;
            nchVtRenderModal();
            document.getElementById('nchVtModal').classList.add('nchvt-modal-open');
            document.body.style.overflow = 'hidden';
        };

        window.nchVtCloseModal = function(){
            document.getElementById('nchVtModal').classList.remove('nchvt-modal-open');
            document.body.style.overflow = '';
            var media = document.getElementById('nchVtModalMedia');
            var vid = media.querySelector('video');
            if ( vid ) { vid.pause(); }
        };

        window.nchVtNav = function(direction){
            nchVtCurrent += direction;
            if ( nchVtCurrent < 0 ) { nchVtCurrent = nchVtItems.length - 1; }
            if ( nchVtCurrent >= nchVtItems.length ) { nchVtCurrent = 0; }
            nchVtRenderModal();
        };

        function nchVtRenderModal(){
            var item = nchVtItems[nchVtCurrent];
            if ( ! item ) { return; }

            var mediaHtml = '';
            if ( item.video ) {
                mediaHtml = '<video src="' + item.video + '" controls autoplay playsinline></video>';
            } else if ( item.image ) {
                mediaHtml = '<img src="' + item.image + '" alt="">';
            }
            document.getElementById('nchVtModalMedia').innerHTML = mediaHtml;

            var infoHtml = '<p class="nchvt-modal-name">' + item.title + '</p>';
            infoHtml += '<p class="nchvt-modal-price">';
            if ( item.price )    { infoHtml += '<strong>' + item.price + '</strong> '; }
            if ( item.orig )     { infoHtml += '<del>' + item.orig + '</del>'; }
            infoHtml += '</p>';
            if ( item.discount ) { infoHtml += '<p class="nchvt-modal-discount">' + item.discount + '</p>'; }
            if ( item.buy )      { infoHtml += '<a href="' + item.buy + '" class="nchvt-buy-btn">Buy Now</a>'; }
            document.getElementById('nchVtModalInfo').innerHTML = infoHtml;
        }

        document.addEventListener('click', function(e){
            if ( e.target && e.target.id === 'nchVtModal' ) { nchVtCloseModal(); }
        });

        document.addEventListener('keydown', function(e){
            var modal = document.getElementById('nchVtModal');
            if ( ! modal || ! modal.classList.contains('nchvt-modal-open') ) { return; }
            if ( e.key === 'Escape' ) { nchVtCloseModal(); }
            if ( e.key === 'ArrowRight' ) { nchVtNav(1); }
            if ( e.key === 'ArrowLeft' ) { nchVtNav(-1); }
        });
    })();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode( 'neichoru_video_testimonials', 'nch_vt_shortcode' );

/* -------------------------------------------------
 * 4. STYLES (uniquely prefixed "nchvt-" so nothing else on the
 *    site is affected)
 * ------------------------------------------------- */
function nch_vt_enqueue_styles() {
    wp_enqueue_style( 'dashicons' );
    ?>
    <style>
        .nchvt-gallery{display:flex;gap:14px;overflow-x:auto;padding:10px 4px 20px;scroll-snap-type:x mandatory;}
        .nchvt-gallery::-webkit-scrollbar{height:6px;}
        .nchvt-gallery::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px;}
        .nchvt-card{flex:0 0 220px;scroll-snap-align:start;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;}
        .nchvt-media{position:relative;width:100%;height:330px;background:#111;}
        .nchvt-media img,.nchvt-media video{width:100%;height:100%;object-fit:cover;display:block;}
        .nchvt-overlay{position:absolute;left:0;right:0;bottom:0;padding:14px 10px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);}
        .nchvt-title-overlay{color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;}
        .nchvt-views{position:absolute;left:8px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:3px 8px;border-radius:12px;}
        .nchvt-icons{position:absolute;right:8px;bottom:10px;display:flex;gap:8px;}
        .nchvt-icons .dashicons{color:#fff;font-size:18px;width:18px;height:18px;}
        .nchvt-badge{position:absolute;left:8px;bottom:44px;background:#e0201a;color:#fff;font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;display:flex;align-items:center;gap:4px;}
        .nchvt-info{padding:10px;}
        .nchvt-name{font-size:13px;margin:0 0 6px;min-height:34px;}
        .nchvt-price{margin:0;font-size:13px;}
        .nchvt-price del{color:#999;margin-left:6px;}
        .nchvt-discount{color:#e0201a;font-size:12px;margin:2px 0 8px;font-weight:600;}
        .nchvt-buy-btn{display:block;text-align:center;background:#e0201a;color:#fff;font-weight:700;text-decoration:none;padding:10px 0;border-radius:6px;}
        .nchvt-buy-btn:hover{background:#c01812;color:#fff;}

        .nchvt-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99999;align-items:center;justify-content:center;padding:20px;}
        .nchvt-modal.nchvt-modal-open{display:flex;}
        .nchvt-modal-inner{position:relative;display:flex;flex-direction:column;align-items:center;max-width:420px;width:100%;max-height:92vh;}
        .nchvt-modal-media{width:100%;max-height:70vh;border-radius:10px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;}
        .nchvt-modal-media video,.nchvt-modal-media img{width:100%;max-height:70vh;object-fit:contain;display:block;}
        .nchvt-modal-info{width:100%;background:#fff;padding:14px;border-radius:0 0 10px 10px;text-align:center;}
        .nchvt-modal-name{font-weight:700;margin:0 0 6px;}
        .nchvt-modal-price{margin:0 0 4px;}
        .nchvt-modal-price del{color:#999;margin-left:6px;}
        .nchvt-modal-discount{color:#e0201a;font-weight:600;margin:0 0 10px;}
        .nchvt-modal-close{position:absolute;top:-40px;right:0;background:transparent;border:none;color:#fff;font-size:32px;line-height:1;cursor:pointer;}
        .nchvt-modal-nav{position:absolute;top:35%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:20px;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
        .nchvt-modal-nav:hover{background:rgba(255,255,255,.3);}
        .nchvt-modal-prev{left:-10px;}
        .nchvt-modal-next{right:-10px;}
        @media (max-width:480px){
            .nchvt-modal-prev{left:4px;}
            .nchvt-modal-next{right:4px;}
        }
    </style>
    <?php
}
add_action( 'wp_head', 'nch_vt_enqueue_styles' );