/**
 * GrainPa Child — theme styles.
 *
 * Section map
 *  1. Tokens
 *  2. Base typography
 *  3. Buttons and small components
 *  4. Custom site header
 *  5. Astra footer chrome
 *  6. Product archive
 *  7. Product card
 *  8. Single product
 *  9. Homepage section classes (used by the starter content)
 * 10. Blog
 * 11. Forms (Fluent Forms friendly)
 * 12. Footer block and floating WhatsApp
 * 13. Accessibility and motion
 * 14. Mobile-first responsiveness
 */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
	color-scheme: light;

	--gp-forest: #0d3c2e;
	--gp-deep: #06261c;
	--gp-cream: #f7f2e7;
	--gp-cream-deep: #ede0c4;
	--gp-orange: #d97724;
	--gp-gold: #c59b27;
	--gp-ink: #162a22;
	--gp-white: #ffffff;

	/* Text-safe derivatives */
	--gp-orange-ink: #c46618;
	--gp-gold-ink: #8a6810;
	--gp-whatsapp: #118344;

	--gp-muted: #4a5c53;
	--gp-line: rgba(13, 60, 46, 0.14);
	--gp-line-strong: rgba(13, 60, 46, 0.32);

	--gp-font-head: "Lora", Georgia, "Times New Roman", serif;
	--gp-font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--gp-step-0: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
	--gp-step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
	--gp-step-2: clamp(1.45rem, 1.3rem + 0.8vw, 1.9rem);
	--gp-step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.5rem);
	--gp-step-4: clamp(2.2rem, 1.8rem + 2vw, 3.3rem);

	--gp-s1: 0.25rem;
	--gp-s2: 0.5rem;
	--gp-s3: 0.75rem;
	--gp-s4: 1rem;
	--gp-s5: 1.5rem;
	--gp-s6: 2rem;
	--gp-s7: 3rem;
	--gp-s8: 4.5rem;

	--gp-radius-sm: 8px;
	--gp-radius: 12px;
	--gp-radius-lg: 14px;
	--gp-radius-pill: 999px;

	--gp-shadow-sm: 0 1px 3px rgba(8, 58, 46, 0.08), 0 6px 16px rgba(8, 58, 46, 0.06);
	--gp-shadow-md: 0 4px 12px rgba(8, 58, 46, 0.1), 0 16px 34px rgba(8, 58, 46, 0.08);

	--gp-measure: 68ch;
}

/* ------------------------------------------------------- 2. Base typography */

body.grainpa-site {
	font-family: var(--gp-font-body);
	font-size: var(--gp-step-0);
	line-height: 1.65;
	color: var(--gp-ink);
	background-color: var(--gp-white);
	-webkit-font-smoothing: antialiased;
}

.grainpa-site h1,
.grainpa-site h2,
.grainpa-site h3,
.grainpa-site h4 {
	font-family: var(--gp-font-head);
	color: var(--gp-forest);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.grainpa-site h1 span,
.grainpa-site h2 span,
.grainpa-site .has-accent-color,
.grainpa-text-accent {
	color: var(--gp-orange);
}

.is-style-flourish-heading,
.has-flourish {
	position: relative;
	text-align: center;
	margin-bottom: var(--gp-s5);
}

.is-style-flourish-heading::after,
.has-flourish::after {
	content: "";
	display: block;
	width: 50px;
	height: 3px;
	border-radius: 2px;
	background: var(--gp-gold);
	margin: 0.5em auto 0;
}

.grainpa-site h1 {
	font-size: var(--gp-step-4);
}

.grainpa-site h2 {
	font-size: var(--gp-step-3);
}

.grainpa-site h3 {
	font-size: var(--gp-step-2);
}

.grainpa-site h4 {
	font-size: var(--gp-step-1);
}

.grainpa-site p {
	max-width: var(--gp-measure);
	margin-inline: auto;
}

.grainpa-site li {
	max-width: var(--gp-measure);
}

a,
a:hover,
a:focus,
a:focus-visible,
a:active,
a:visited,
.grainpa-site a,
.grainpa-site a:hover,
.grainpa-site a:focus,
.grainpa-card__title a,
.grainpa-card__title a:hover,
.grainpa-card__title a:focus,
.grainpa-card__title,
.grainpa-single__title,
.grainpa-categories__name,
.grainpa-categories__link,
.entry-title,
.entry-title a,
.product_title,
.ast-archive-title,
.ast-single-post-title,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration: none !important;
}

/* Excludes button-like anchors (pills, CTAs, Gutenberg buttons) — their
   own color rules use fewer classes than this selector's :not() clause
   adds in specificity, so without the exclusion this rule silently wins
   and repaints their text forest-green regardless of background. */
.grainpa-site a:not(.grainpa-footer a):not(.grainpa-btn):not(.grainpa-catnav__link):not(.wp-block-button__link):not(.grainpa-nav__list a):not(.grainpa-mobile-nav__list a) {
	color: var(--gp-forest);
	text-decoration: none !important;
}

.grainpa-site a:not(.grainpa-footer a):not(.grainpa-btn):not(.grainpa-catnav__link):not(.wp-block-button__link):not(.grainpa-nav__list a):not(.grainpa-mobile-nav__list a):hover,
.grainpa-site a:not(.grainpa-footer a):not(.grainpa-btn):not(.grainpa-catnav__link):not(.wp-block-button__link):not(.grainpa-nav__list a):not(.grainpa-mobile-nav__list a):focus-visible {
	color: var(--gp-orange-ink);
	text-decoration: none !important;
}


/* Guarantees hidden elements stay hidden: several components below set
   display:flex, which out-specifies the browser default for [hidden]. */
[hidden] {
	display: none !important;
}

.grainpa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--gp-s2);
	margin: 0 0 var(--gp-s3);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gp-gold-ink);
}

/* Inline SVGs inherit no intrinsic size in flex contexts and will balloon
   without an explicit size. */
.grainpa-glyph {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	color: var(--gp-orange-ink);
}

.grainpa-eyebrow--links a {
	color: inherit;
}

.grainpa-note {
	margin: var(--gp-s4) 0;
	padding: var(--gp-s3) var(--gp-s4);
	border-left: 3px solid var(--gp-gold);
	background: var(--gp-cream);
	border-radius: 0 var(--gp-radius-sm) var(--gp-radius-sm) 0;
	font-size: 0.95rem;
}

/* --------------------------------------- 3. Buttons and small components */

.grainpa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gp-s2);
	padding: 0.8em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--gp-radius-pill);
	background: var(--gp-forest);
	color: var(--gp-white);
	font-family: var(--gp-font-body);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.grainpa-btn:hover,
.grainpa-btn:focus-visible {
	background: var(--gp-deep);
	color: var(--gp-white);
	transform: translateY(-1px);
}

.grainpa-btn--outline {
	background: transparent;
	border-color: var(--gp-forest);
	color: var(--gp-forest);
}

.grainpa-btn--outline:hover,
.grainpa-btn--outline:focus-visible {
	background: var(--gp-forest);
	color: var(--gp-white);
}

.grainpa-btn--whatsapp {
	background: var(--gp-whatsapp);
}

.grainpa-btn--whatsapp:hover,
.grainpa-btn--whatsapp:focus-visible {
	background: #0d6b38;
}

.grainpa-btn--whatsapp.grainpa-btn--outline {
	background: transparent;
	border-color: var(--gp-whatsapp);
	color: var(--gp-whatsapp);
}

.grainpa-btn--whatsapp.grainpa-btn--outline:hover,
.grainpa-btn--whatsapp.grainpa-btn--outline:focus-visible {
	background: var(--gp-whatsapp);
	color: var(--gp-white);
}

.grainpa-badge {
	display: inline-block;
	padding: 0.3em 0.85em;
	border-radius: var(--gp-radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.grainpa-badge--available {
	background: var(--gp-forest);
	color: var(--gp-white);
}


.grainpa-breadcrumbs,
.ast-breadcrumbs,
.woocommerce-breadcrumb {
	display: none !important;
}

/* --------------------------------------- 4. Custom site header */

/* header.php in this child theme fully replaces Astra's Header Builder
   output (a child theme's header.php always wins), so none of this needs
   to fight Astra's dynamic Customizer CSS the way the footer rules
   below still do. */

.grainpa-site-header {
	position: relative;
	z-index: 100;
}

.grainpa-header-utility {
	background: var(--gp-deep);
	color: var(--gp-cream-deep);
	font-size: 0.82rem;
}

.grainpa-header-utility__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0.7rem var(--gp-s5);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--gp-s4);
}

.grainpa-header-utility__phone {
	color: var(--gp-cream-deep) !important;
	text-decoration: none !important;
	font-weight: 600;
	justify-self: start;
}

.grainpa-header-utility__phone:hover {
	color: var(--gp-white) !important;
}

.grainpa-header-utility__tagline {
	grid-column: 2;
	margin: 0;
	font-family: var(--gp-font-head);
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--gp-gold);
	text-align: center;
	white-space: nowrap;
}

.grainpa-header-utility__social {
	display: flex;
	align-items: center;
	gap: var(--gp-s3);
	justify-self: end;
	grid-column: 3;
}

.grainpa-header-utility__social a {
	color: var(--gp-cream-deep) !important;
	display: inline-flex;
}

.grainpa-header-utility__social a:hover {
	color: var(--gp-gold) !important;
}

.grainpa-header-main {
	background: var(--gp-white);
	border-bottom: 1px solid var(--gp-line);
}

.grainpa-header-main__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--gp-s3) var(--gp-s5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gp-s5);
}

.grainpa-header-logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
	max-width: 100%;
	text-decoration: none !important;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.grainpa-header-logo:hover {
	opacity: 0.92;
}

.grainpa-header-logo__img,
a.grainpa-header-logo img,
.grainpa-header-logo img.custom-logo {
	display: block;
	width: auto !important;
	height: auto !important;
	max-height: 56px;
	max-width: 240px;
	object-fit: contain;
	object-position: left center;
	transition: max-height 0.2s ease, max-width 0.2s ease;
}

.grainpa-header-logo__text {
	font-family: var(--gp-font-head);
	font-size: clamp(1.35rem, 2.5vw, 1.65rem);
	font-weight: 700;
	color: var(--gp-forest);
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.grainpa-nav__list {
	display: flex;
	align-items: center;
	gap: var(--gp-s6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.grainpa-nav__list a {
	color: var(--gp-forest) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 0.98rem;
	transition: color 0.2s ease;
}

.grainpa-nav__list a:hover,
.grainpa-nav__list a.is-current {
	color: var(--gp-orange) !important;
}

.grainpa-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	appearance: none;
	background: transparent !important;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.grainpa-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--gp-forest);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.grainpa-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.grainpa-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.grainpa-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.grainpa-mobile-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--gp-white);
	border-bottom: 1px solid var(--gp-line);
	box-shadow: var(--gp-shadow-md);
	max-height: calc(100vh - 100%);
	overflow-y: auto;
	z-index: 100;
}

.grainpa-mobile-nav.is-open {
	display: block;
}

.grainpa-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: var(--gp-s3) var(--gp-s5) var(--gp-s5);
	display: flex;
	flex-direction: column;
}

.grainpa-mobile-nav__list a {
	display: block;
	padding: var(--gp-s3) 0;
	border-bottom: 1px solid var(--gp-line);
	color: var(--gp-forest) !important;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 1.05rem;
}

.grainpa-mobile-nav__list a.is-current {
	color: var(--gp-orange) !important;
}

@media (max-width: 53em) {
	.grainpa-nav {
		display: none;
	}

	.grainpa-nav-toggle {
		display: inline-flex;
	}
}

@media (max-width: 30em) {
	.grainpa-header-utility__inner {
		grid-template-columns: 1fr auto;
	}

	.grainpa-header-utility__phone {
		display: none;
	}

	.grainpa-header-utility__tagline {
		grid-column: 1;
		text-align: left;
		font-size: 0.78rem;
	}

	.grainpa-header-utility__social {
		grid-column: 2;
	}
}

/* ------------------------------------------ 5. Astra footer chrome */

/* Astra prints its Customizer colours as inline dynamic CSS after this
   stylesheet, so these few brand rules are marked important. Anything the
   client changes in Appearance → Customize → Footer will otherwise
   silently win. The header no longer goes through Astra at all — see
   header.php — so it needs no such overrides here. */

.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-small-footer {
	background-color: var(--gp-deep) !important;
	color: rgba(255, 255, 255, 0.86) !important;
}

.site-footer a,
.site-below-footer-wrap a,
.ast-small-footer a {
	color: var(--gp-cream-deep) !important;
}

/* Astra dynamic blue override to enforce GrainPa brand palette */
:root {
	--ast-global-color-0: var(--gp-forest) !important;
	--ast-global-color-1: var(--gp-deep) !important;
}

.ast-pagination .page-numbers.current,
.post-page-numbers.current .page-link,
.ast-pagination .page-numbers:hover,
.post-page-numbers .page-link:hover {
	background-color: var(--gp-forest) !important;
	border-color: var(--gp-forest) !important;
	color: var(--gp-white) !important;
}

/* ------------------------------------------------ 6. Product archive */

/* Astra's "Separate Containers" layout adds its own 4em margin around
   #primary on desktop (see .ast-separate-container #primary in Astra's
   core CSS) on top of the padding below, doubling up the gap under the
   header. Zero it out here so .site-main's padding is the only spacing. */
.grainpa-archive #primary,
.grainpa-single #primary {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.grainpa-archive .site-main,
.grainpa-single .site-main,
.grainpa-products .site-main {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--gp-s5);
	width: 100%;
	box-sizing: border-box;
}

.grainpa-archive .site-main {
	padding-block: 1rem var(--gp-s7);
}

.grainpa-single .site-main {
	padding-block: var(--gp-s3) var(--gp-s7);
}

@media (max-width: 48em) {
	.grainpa-archive .site-main,
	.grainpa-single .site-main,
	.grainpa-products .site-main {
		padding-inline: 1rem;
	}

	.grainpa-archive .site-main {
		padding-block: 0.75rem var(--gp-s5);
	}

	.grainpa-single .site-main {
		padding-block: var(--gp-s2) var(--gp-s5);
	}
}

.grainpa-page-header {
	text-align: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--gp-line);
}

.grainpa-page-header .grainpa-eyebrow {
	justify-content: center;
	margin-inline: auto;
}

.grainpa-page-header__title {
	margin: 0 auto;
	text-align: center;
}

.grainpa-page-header__intro {
	margin-top: var(--gp-s4);
	margin-inline: auto;
	font-size: var(--gp-step-1);
	color: var(--gp-muted);
	text-align: center;
}

.grainpa-page-header__intro p {
	margin: 0 0 var(--gp-s3);
}

/* --------------------------------------------------- 6. Product archive */

.grainpa-page-header__sublead {
	margin-top: 0.5rem;
	margin-inline: auto;
	font-size: 1.05rem;
	color: var(--gp-muted);
	max-width: 62ch;
	text-align: center;
}

.grainpa-eyebrow svg,
.grainpa-eyebrow img {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	margin-right: 0.35em;
}

.grainpa-catnav-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2.2rem;
}

.grainpa-catnav {
	margin-bottom: 0;
}

.grainpa-catnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center;
	justify-content: center;
}

@media (max-width: 480px) {
	.grainpa-catnav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.grainpa-catnav__list::-webkit-scrollbar {
		display: none;
	}
}

.grainpa-catnav__item {
	max-width: none;
	flex-shrink: 0;
}

.grainpa-catnav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border: 1px solid var(--gp-line-strong);
	border-radius: var(--gp-radius-pill);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--gp-forest);
	text-decoration: none;
	background: var(--gp-cream);
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.grainpa-catnav__link:hover,
.grainpa-catnav__link:focus-visible {
	background: var(--gp-cream-deep);
	color: var(--gp-deep);
	border-color: var(--gp-forest);
}

.grainpa-catnav__link.is-current,
.grainpa-catnav__link[aria-current="page"] {
	background: var(--gp-forest);
	border-color: var(--gp-forest);
	color: var(--gp-cream);
}

.grainpa-catnav__counter {
	font-size: 0.9rem;
	color: var(--gp-muted);
}

.grainpa-grid {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 481px) {
	.grainpa-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 769px) {
	.grainpa-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1101px) {
	.grainpa-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.grainpa-view-all {
	margin: -1.5rem 0 2rem;
	text-align: center;
}

.grainpa-empty {
	padding: var(--gp-s7) var(--gp-s5);
	border: 1px dashed var(--gp-line-strong);
	border-radius: var(--gp-radius);
	background: var(--gp-cream);
	text-align: center;
}

.grainpa-empty p {
	margin-inline: auto;
}

.grainpa-empty__title {
	font-family: var(--gp-font-head);
	font-size: var(--gp-step-2);
	color: var(--gp-deep);
	margin: 0 0 var(--gp-s2);
}

.grainpa-pagination {
	margin-top: 2.5rem;
}

.grainpa-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.grainpa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.85rem;
	border: 1px solid var(--gp-line-strong);
	border-radius: var(--gp-radius-sm);
	background: var(--gp-cream);
	color: var(--gp-forest);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.grainpa-pagination .page-numbers.current,
.grainpa-pagination .page-numbers:hover {
	background: var(--gp-forest);
	border-color: var(--gp-forest);
	color: var(--gp-cream);
}

/* --------------------------------------------------- 7. Product card (Site-wide) */

.grainpa-card,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.wc-block-grid__product {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	text-align: left;
	overflow: hidden;
	background: var(--gp-white);
	border: 1px solid var(--gp-line);
	border-radius: var(--gp-radius);
	padding: 0 !important;
	box-shadow: var(--gp-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.grainpa-card:hover,
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover {
	transform: translateY(-4px);
	border-color: var(--gp-gold);
	box-shadow: var(--gp-shadow-md);
}

.grainpa-card:focus-within {
	outline: 2px solid var(--gp-forest);
	outline-offset: 2px;
}

.grainpa-card__media,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__thumbnail,
.wc-block-grid__product-image {
	width: 100%;
	position: relative;
	background: var(--gp-cream);
	aspect-ratio: 1 / 1;
	border-radius: 0 !important;
	overflow: hidden;
	margin: 0 !important;
}

.grainpa-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.grainpa-card__img--placeholder {
	object-fit: contain;
	padding: 12%;
}

.grainpa-card-chip {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	padding: 0.25rem 0.65rem;
	border-radius: var(--gp-radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
}

.grainpa-card-chip--available {
	background: var(--gp-forest);
	color: var(--gp-cream);
}

.grainpa-card-chip--coming_soon {
	background: var(--gp-gold);
	color: var(--gp-deep);
}

.grainpa-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.15rem;
	width: 100%;
	gap: 0.45rem;
	text-align: left;
}

.grainpa-card .grainpa-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	margin: 0;
	font-family: var(--gp-font-head);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
	font-weight: 600;
	color: var(--gp-forest);
	line-height: 1.35;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.grainpa-card__title a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.wc-block-grid__product-title a {
	color: var(--gp-forest);
	text-decoration: none;
}

/* One link covers the whole card without nesting extra links. */
.grainpa-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.grainpa-card__excerpt,
.grainpa-card__pack {
	margin: 0;
	font-size: 0.92rem;
	color: var(--gp-muted);
}

.grainpa-card__pack-label {
	font-weight: 700;
	color: var(--gp-ink);
}

.grainpa-card__cue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45em 1.3em;
	border: 1px solid var(--gp-forest);
	border-radius: var(--gp-radius-pill);
	background: var(--gp-cream);
	color: var(--gp-forest);
	font-size: 0.86rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	margin-top: auto;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.grainpa-card:hover .grainpa-card__cue,
.grainpa-card:focus-within .grainpa-card__cue {
	background: var(--gp-forest);
	color: var(--gp-white);
}

/* -------------------------------------------------- 8. Single product */

.grainpa-single__grid {
	display: grid;
	gap: var(--gp-s6);
	align-items: start;
}

@media (min-width: 52em) {
	.grainpa-single__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gp-s7);
	}
}

.grainpa-gallery__main {
	margin: 0;
	border-radius: var(--gp-radius-lg);
	overflow: hidden;
	background: var(--gp-cream);
	aspect-ratio: 1 / 1;
	max-height: 480px;
	width: 100%;
	position: relative;
	border: 1px solid var(--gp-line);
}

.grainpa-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3%;
	display: block;
	transition: transform 0.3s ease;
}

.grainpa-gallery__main:hover .grainpa-gallery__image {
	transform: scale(1.02);
}

.grainpa-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--gp-white);
	color: var(--gp-forest);
	border: 1px solid var(--gp-line);
	box-shadow: 0 4px 12px rgba(8, 58, 46, 0.12);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.grainpa-gallery__arrow:hover {
	background: var(--gp-forest);
	color: var(--gp-white);
	border-color: var(--gp-forest);
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 6px 18px rgba(8, 58, 46, 0.22);
}

.grainpa-gallery__arrow--prev {
	left: 0.75rem;
}

.grainpa-gallery__arrow--next {
	right: 0.75rem;
}

.grainpa-gallery__image--placeholder {
	object-fit: contain;
	padding: 6%;
}

.grainpa-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gp-s3);
	margin: var(--gp-s4) 0 0;
	padding: 0;
	list-style: none;
}

.grainpa-gallery__thumb {
	max-width: none;
}

.grainpa-gallery__btn {
	display: block;
	width: 76px;
	height: 76px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--gp-radius-sm);
	background: var(--gp-cream);
	overflow: hidden;
	cursor: pointer;
}

.grainpa-gallery__btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.grainpa-gallery__btn.is-current {
	border-color: var(--gp-forest);
}

.grainpa-single .grainpa-single__title,
.product_title {
	font-size: clamp(1.4rem, 1.25rem + 0.8vw, 1.95rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--gp-forest);
	margin: 0 0 var(--gp-s3);
}

.grainpa-single__lead {
	font-size: var(--gp-step-1);
	color: var(--gp-muted);
	margin: 0 0 var(--gp-s5);
}

/* Single Product Breadcrumbs */
.grainpa-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0;
	margin-bottom: var(--gp-s3);
	font-size: 0.86rem;
	color: var(--gp-muted);
}

.grainpa-breadcrumb a {
	color: var(--gp-forest);
	text-decoration: none;
	transition: color 0.15s ease;
}

.grainpa-breadcrumb a:hover {
	color: var(--gp-orange-ink);
}

.grainpa-breadcrumb__sep {
	color: var(--gp-line-strong);
	opacity: 0.6;
}

.grainpa-breadcrumb__current {
	color: var(--gp-ink);
	font-weight: 600;
}

/* Pack Size Badge */
.grainpa-pack-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.95rem;
	background: var(--gp-cream);
	border: 1px solid var(--gp-line-strong);
	border-radius: var(--gp-radius-pill);
	font-size: 0.92rem;
	margin-bottom: var(--gp-s4);
}

.grainpa-pack-badge__label {
	color: var(--gp-muted);
	font-weight: 500;
}

.grainpa-pack-badge__value {
	color: var(--gp-forest);
	font-weight: 700;
}

/* Trust Bar Highlights (Row Direction) — scoped under .grainpa-single
   because .grainpa-trust-bar / __item / __item__icon are reused with a
   different layout for the Gutenberg "Trust Badges Bar" block style
   further down this file; without the extra specificity the later block
   rule wins and silently breaks this row's grid layout. */
.grainpa-single .grainpa-trust-bar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--gp-s5);
	padding: 0.85rem 0.65rem;
	background: var(--gp-cream);
	border: 1px solid var(--gp-line);
	border-radius: 18px;
}

.grainpa-single .grainpa-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.35rem;
	padding: 0.2rem;
	background: transparent;
	border: none;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gp-forest);
}

.grainpa-single .grainpa-trust-item__icon {
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gp-white);
	border: 2px solid var(--gp-forest);
}

/* Fullscreen Lightbox Zoom Modal */
.grainpa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.grainpa-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 38, 28, 0.88);
	backdrop-filter: blur(8px);
}

.grainpa-lightbox__content {
	position: relative;
	z-index: 1;
	max-width: 92vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grainpa-lightbox__img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
	border-radius: var(--gp-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	background: var(--gp-cream);
	cursor: zoom-out;
}

.grainpa-lightbox__close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.5rem;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.grainpa-lightbox__close:hover {
	opacity: 1;
}

.grainpa-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gp-s3);
}

.grainpa-single__content {
	margin-top: var(--gp-s7);
}

/* Details Panels Grid */
.grainpa-panels-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--gp-s5);
	margin-top: var(--gp-s6);
}

.grainpa-panel {
	margin-top: 0;
	padding: var(--gp-s5);
	background: var(--gp-cream);
	border: 1px solid var(--gp-line);
	border-radius: var(--gp-radius);
	box-shadow: var(--gp-shadow-sm);
}

.grainpa-single .grainpa-panel__title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 var(--gp-s3);
	font-size: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem);
	font-weight: 600;
	color: var(--gp-forest);
}

.grainpa-panel__icon {
	font-size: 1.25rem;
}

.grainpa-panel p:last-child {
	margin-bottom: 0;
}

.grainpa-nutrition {
	width: 100%;
	border-collapse: collapse;
	background: var(--gp-white);
	border-radius: var(--gp-radius-sm);
	overflow: hidden;
}

.grainpa-nutrition__caption {
	caption-side: bottom;
	padding-top: var(--gp-s3);
	font-size: 0.85rem;
	color: var(--gp-muted);
	text-align: left;
}

.grainpa-nutrition th,
.grainpa-nutrition td {
	padding: var(--gp-s3) var(--gp-s4);
	border-bottom: 1px solid var(--gp-line);
	text-align: left;
}

.grainpa-nutrition th {
	font-weight: 600;
	color: var(--gp-deep);
}

.grainpa-nutrition tr:last-child th,
.grainpa-nutrition tr:last-child td {
	border-bottom: 0;
}

.grainpa-related {
	margin-top: var(--gp-s8);
	padding-top: var(--gp-s6);
	border-top: 1px solid var(--gp-line);
}

.grainpa-related__title {
	margin: 0 0 var(--gp-s5);
}

/* ------------------------- 9. Homepage sections (starter content classes) */

/* Eliminate unwanted space between site header and top hero banner */
.site-content,
#content.site-content,
.ast-container,
.entry-content {
	padding-top: 0 !important;
}

.home .site-content,
.home #content,
.page-template-page-about .site-content,
.page .site-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.entry-content > .grainpa-hero:first-child,
.entry-content > .wp-block-group.grainpa-hero:first-child,
.site-main > .grainpa-hero:first-child,
.site-main > .wp-block-group.grainpa-hero:first-child,
.grainpa-hero:first-child,
.grainpa-hero.alignwide:first-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.grainpa-section {
	margin-block: var(--gp-s7);
}

.grainpa-section > h2 {
	margin-top: 0;
}

.grainpa-hero {
	padding: var(--gp-s7) var(--gp-s5);
	border-radius: var(--gp-radius-lg);
	background:
		radial-gradient(circle at 88% 12%, rgba(201, 164, 92, 0.28), transparent 42%),
		radial-gradient(circle at 8% 92%, rgba(18, 79, 61, 0.12), transparent 46%),
		var(--gp-cream);
	text-align: center;
}

.grainpa-hero h1 {
	margin: 0 auto var(--gp-s4);
	max-width: 18ch;
}

.grainpa-hero p {
	margin-inline: auto;
	max-width: 56ch;
	font-size: var(--gp-step-1);
	color: var(--gp-muted);
}

.grainpa-hero .wp-block-buttons {
	justify-content: center;
	margin-top: var(--gp-s5);
}

.grainpa-band {
	padding: var(--gp-s7) var(--gp-s5);
	border-radius: var(--gp-radius-lg);
	background: var(--gp-forest);
	color: var(--gp-white);
}

.grainpa-band h2,
.grainpa-band h3,
.is-style-cta-banner h2,
.is-style-cta-banner h3 {
	color: var(--gp-white);
}

.grainpa-band h2 span,
.grainpa-band h3 span,
.is-style-cta-banner h2 span,
.is-style-cta-banner h3 span {
	color: var(--gp-orange);
}

/* Trust Badges Bar Block Style */
.grainpa-trust-bar,
.wp-block-columns.is-style-trust-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: var(--gp-s4);
	padding: var(--gp-s5) var(--gp-s6);
	background: var(--gp-cream);
	border: 1px solid var(--gp-line);
	border-radius: var(--gp-radius-lg);
	box-shadow: var(--gp-shadow-sm);
	margin-block: var(--gp-s6);
}

.grainpa-trust-item,
.wp-block-column.is-style-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--gp-s2);
}

.grainpa-trust-item__icon,
.is-style-trust-item .wp-block-image {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--gp-forest);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gp-forest);
	background: var(--gp-white);
}

/* Gold Pill Button Style */
.is-style-gold-pill .wp-block-button__link,
.grainpa-btn--gold {
	background: var(--gp-cream-deep) !important;
	color: var(--gp-deep) !important;
	border: 1px solid var(--gp-gold) !important;
	font-weight: 700 !important;
	border-radius: var(--gp-radius-pill) !important;
}

.is-style-gold-pill .wp-block-button__link:hover,
.grainpa-btn--gold:hover {
	background: var(--gp-orange) !important;
	color: var(--gp-white) !important;
}

.grainpa-band p {
	color: rgba(255, 255, 255, 0.9);
}

.grainpa-band a:not(.wp-block-button__link) {
	color: var(--gp-cream-deep);
}

.grainpa-panel-cream {
	padding: var(--gp-s6) var(--gp-s5);
	border-radius: var(--gp-radius-lg);
	background: var(--gp-cream);
}

.grainpa-feature h3 {
	margin: 0 0 var(--gp-s2);
	font-size: var(--gp-step-1);
}

.grainpa-feature p {
	margin: 0;
	color: var(--gp-muted);
}

.grainpa-step h3 {
	margin: 0 0 var(--gp-s2);
	font-size: var(--gp-step-1);
}

.grainpa-step h3::before {
	display: block;
	margin-bottom: var(--gp-s2);
	font-family: var(--gp-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--gp-orange-ink);
}

.grainpa-step--1 h3::before {
	content: "STEP 01";
}

.grainpa-step--2 h3::before {
	content: "STEP 02";
}

.grainpa-step--3 h3::before {
	content: "STEP 03";
}

.grainpa-step--4 h3::before {
	content: "STEP 04";
}

.grainpa-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

@media (max-width: 640px) {
	.grainpa-categories {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 0.45rem !important;
	}
}

.grainpa-categories__item {
	max-width: none;
	width: 100%;
}

.grainpa-categories__link,
.grainpa-categories__link:hover,
.grainpa-categories__link:focus,
.grainpa-categories__link:active,
.grainpa-categories__link:visited {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.4rem;
	height: 100%;
	width: 100%;
	padding: 1.1rem 0.85rem;
	border: 1px solid rgba(226, 217, 200, 0.8);
	border-radius: 16px;
	background: #ffffff;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 640px) {
	.grainpa-categories__link {
		padding: 0.65rem 0.35rem !important;
		border-radius: 12px !important;
		gap: 0.35rem !important;
	}
}

.grainpa-categories__link:hover,
.grainpa-categories__link:focus-visible {
	border-color: var(--gp-gold);
	background: #fffdf9;
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(184, 134, 11, 0.12);
	text-decoration: none !important;
}

.grainpa-categories__media {
	width: 170px;
	height: 170px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #f8f6f0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.4rem auto;
	border: 3px solid #f2eadc;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	transition: all 0.35s ease;
}

@media (max-width: 768px) {
	.grainpa-categories__media {
		width: 125px;
		height: 125px;
		border-width: 2px;
	}
}

@media (max-width: 640px) {
	.grainpa-categories__media {
		width: 80px !important;
		height: 80px !important;
		margin-bottom: 0.25rem !important;
		border-width: 2px !important;
	}
}

.grainpa-categories__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	image-rendering: -webkit-optimize-contrast;
	transition: transform 0.4s ease;
}

.grainpa-categories__link:hover .grainpa-categories__media,
.grainpa-categories__link:focus-visible .grainpa-categories__media {
	border-color: var(--gp-gold);
	box-shadow: 0 6px 20px rgba(184, 134, 11, 0.25);
	transform: scale(1.03);
}

.grainpa-categories__link:hover .grainpa-categories__img,
.grainpa-categories__link:focus-visible .grainpa-categories__img {
	transform: scale(1.06);
}

.grainpa-categories__name,
.grainpa-categories__name:hover,
.grainpa-categories__name:focus {
	font-family: var(--gp-font-head);
	font-size: 1.15rem;
	color: var(--gp-deep);
	text-align: center;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none !important;
	transition: color 0.25s ease;
}

.grainpa-categories__link:hover .grainpa-categories__name,
.grainpa-categories__link:focus-visible .grainpa-categories__name {
	color: var(--gp-gold);
	text-decoration: none !important;
}

@media (max-width: 640px) {
	.grainpa-categories__name {
		font-size: 0.82rem !important;
		line-height: 1.2 !important;
		font-weight: 600 !important;
		word-break: break-word !important;
	}
}

.grainpa-categories__count {
	display: none !important;
}




.grainpa-contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.grainpa-contact-list__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gp-s3);
	padding: var(--gp-s3) 0;
	border-bottom: 1px solid var(--gp-line);
	max-width: none;
}

.grainpa-contact-list__label {
	flex: 0 0 8rem;
	font-weight: 700;
	color: var(--gp-deep);
}

.grainpa-contact-list__address {
	margin: 0;
	font-style: normal;
}

/* Core button blocks in the starter content pick up the brand shape. */
.grainpa-site .wp-block-button__link {
	border-radius: var(--gp-radius-pill);
	background-color: var(--gp-forest);
	color: var(--gp-white);
	font-weight: 700;
	padding: 0.8em 1.6em;
}

.grainpa-site .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--gp-forest);
	color: var(--gp-forest);
}

/* ------------------------------------------------------------ 10. Blog */

.grainpa-site .entry-title a {
	color: var(--gp-deep);
	text-decoration: none;
}

.grainpa-site .entry-meta,
.grainpa-site .posted-on,
.grainpa-site .post-author {
	font-size: 0.86rem;
	color: var(--gp-muted);
}

.grainpa-site .entry-content blockquote,
.grainpa-site .wp-block-quote {
	margin-inline: 0;
	padding: var(--gp-s4) var(--gp-s5);
	border-left: 4px solid var(--gp-gold);
	background: var(--gp-cream);
	border-radius: 0 var(--gp-radius) var(--gp-radius) 0;
	font-style: normal;
}

.grainpa-site .entry-content table,
.grainpa-site .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.grainpa-site .entry-content th,
.grainpa-site .entry-content td {
	padding: var(--gp-s3);
	border: 1px solid var(--gp-line);
	text-align: left;
}

.grainpa-site .entry-content th {
	background: var(--gp-cream);
	color: var(--gp-deep);
}

.grainpa-site .entry-content img,
.grainpa-site .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--gp-radius-sm);
}

.grainpa-site .entry-content ul,
.grainpa-site .entry-content ol {
	padding-left: 1.25em;
}

.grainpa-site .entry-content li + li {
	margin-top: var(--gp-s2);
}

/* --------------------------------------------------------- 11. Forms */

.grainpa-form-area {
	padding: var(--gp-s6) var(--gp-s5);
	background: var(--gp-cream);
	border-radius: var(--gp-radius-lg);
}

.grainpa-site input[type="text"],
.grainpa-site input[type="email"],
.grainpa-site input[type="tel"],
.grainpa-site input[type="url"],
.grainpa-site input[type="search"],
.grainpa-site textarea,
.grainpa-site select,
.grainpa-site .fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.grainpa-site .fluentform textarea,
.grainpa-site .fluentform select {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--gp-line-strong);
	border-radius: var(--gp-radius-sm);
	background: var(--gp-white);
	color: var(--gp-ink);
	font-family: var(--gp-font-body);
	font-size: 1rem;
}

.grainpa-site .fluentform .ff-el-input--label label {
	font-weight: 600;
	color: var(--gp-deep);
}

.grainpa-site .fluentform .ff-btn-submit {
	border-radius: var(--gp-radius-pill);
	background: var(--gp-forest);
	color: var(--gp-white);
	font-weight: 700;
	padding: 0.8em 1.6em;
	border: 0;
}

.grainpa-site .fluentform .ff-btn-submit:hover,
.grainpa-site .fluentform .ff-btn-submit:focus-visible {
	background: var(--gp-deep);
}

/* -------------------------- 12. Footer block and floating WhatsApp */

/* Astra's own footer builder is disabled in favour of this block; see
   grainpa_register_footer_hooks() in inc/astra-hooks.php. Colours use
   !important because Astra prints Customizer colours as inline dynamic
   CSS after this stylesheet and would otherwise silently win. */

.grainpa-footer {
	background: var(--gp-deep);
	color: var(--gp-cream-deep);
	border-top: 3px solid var(--gp-gold);
	font-family: var(--gp-font-body);
}

.grainpa-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--gp-s7) var(--gp-s5) var(--gp-s6);
}

/* 1. Enquiry banner */
.grainpa-footer__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gp-s6);
	margin-bottom: var(--gp-s6);
}

.grainpa-footer__cta-title {
	font-family: var(--gp-font-head);
	font-size: var(--gp-step-2);
	font-weight: 500;
	color: var(--gp-white) !important;
	-webkit-text-fill-color: var(--gp-white) !important;
	margin: 0 0 var(--gp-s2) 0;
	letter-spacing: -0.01em;
}

.grainpa-footer__cta-subtitle {
	font-size: var(--gp-step-0);
	color: var(--gp-cream-deep);
	margin: 0;
}

.grainpa-footer__whatsapp,
.grainpa-footer__whatsapp:hover,
.grainpa-footer__whatsapp:focus,
.grainpa-footer__whatsapp:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gp-s3);
	background: var(--gp-white) !important;
	color: var(--gp-forest) !important;
	padding: var(--gp-s3) var(--gp-s6);
	border-radius: var(--gp-radius-pill, 999px);
	font-family: var(--gp-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: var(--gp-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.15));
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.grainpa-footer__whatsapp:hover,
.grainpa-footer__whatsapp:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.grainpa-footer__divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin: var(--gp-s6) 0;
}

/* 2. Main grid — flex rather than a fixed column count so the row still
   fills edge-to-edge when "Follow Us" is hidden (no social links set). */
.grainpa-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gp-s6);
	margin-bottom: var(--gp-s6);
}

.grainpa-footer__col {
	flex: 1 1 160px;
}

.grainpa-footer__col--brand {
	flex: 2 1 260px;
	padding-right: var(--gp-s4);
}

@media (max-width: 56.25em) {
	.grainpa-footer__col {
		flex: 1 1 45%;
	}

	.grainpa-footer__col--brand {
		flex: 1 1 100%;
	}
}

@media (max-width: 34.4em) {
	.grainpa-footer__grid {
		gap: var(--gp-s5);
	}

	.grainpa-footer__col {
		flex: 1 1 100%;
	}
}

.grainpa-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--gp-s1);
	font-family: var(--gp-font-head);
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: var(--gp-s3);
}

.grainpa-footer__logo-mark {
	color: var(--gp-gold);
}

.grainpa-footer__logo-name {
	color: var(--gp-white) !important;
	-webkit-text-fill-color: var(--gp-white) !important;
}

.grainpa-footer__logo-badge {
	display: inline-flex;
	align-items: center;
	background: var(--gp-cream);
	border-radius: var(--gp-radius);
	padding: var(--gp-s2) var(--gp-s3);
}

.grainpa-footer__logo-img,
.grainpa-footer__logo-badge img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-height: 48px;
	max-width: 200px;
	object-fit: contain;
}

.grainpa-footer__tagline {
	font-size: 0.85rem;
	color: var(--gp-gold);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 var(--gp-s4) 0;
}

.grainpa-footer__desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--gp-cream-deep);
	margin: 0;
}

.grainpa-footer__fssai {
	font-size: 0.8rem;
	color: rgba(237, 224, 196, 0.7);
	margin: var(--gp-s4) 0 0 0;
}

.grainpa-footer__heading {
	font-family: var(--gp-font-head);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--gp-white) !important;
	-webkit-text-fill-color: var(--gp-white) !important;
	opacity: 1 !important;
	margin: 0 0 var(--gp-s4) 0;
}

.grainpa-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gp-s3);
	font-size: 0.95rem;
}

.grainpa-footer__list a {
	color: var(--gp-cream-deep) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.grainpa-footer__list a:hover,
.grainpa-footer__list a:focus-visible {
	color: var(--gp-white) !important;
}

.grainpa-footer__list--contact li {
	color: var(--gp-cream-deep);
	font-size: 0.93rem;
	line-height: 1.5;
}

.grainpa-footer__list--contact address {
	font-style: normal;
}

.grainpa-footer__social {
	display: flex;
	align-items: center;
	gap: var(--gp-s3);
}

.grainpa-footer__social-link,
.grainpa-footer__social-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--gp-white);
	color: var(--gp-forest) !important;
	text-decoration: none !important;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.grainpa-footer__social-link:hover,
.grainpa-footer__social-link:focus-visible {
	transform: translateY(-2px);
	background: var(--gp-gold);
}

/* 3. Bottom bar */
.grainpa-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gp-s4);
	padding-top: var(--gp-s4);
	font-size: 0.85rem;
	color: rgba(237, 224, 196, 0.75);
}

.grainpa-footer__copyright {
	margin: 0;
}

.grainpa-footer__badges {
	display: flex;
	align-items: center;
	gap: var(--gp-s2);
}

.grainpa-footer__badge-dot {
	color: var(--gp-gold);
}

@media (max-width: 48em) {
	.grainpa-footer__cta {
		flex-direction: column;
		text-align: center;
		gap: var(--gp-s5);
	}

	.grainpa-footer__bottom {
		flex-direction: column;
		text-align: center;
		gap: var(--gp-s2);
	}
}


.grainpa-float-wa {
	display: none !important;
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 99;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7em 1.1em;
	border-radius: var(--gp-radius-pill);
	background: var(--gp-whatsapp);
	color: var(--gp-white);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--gp-shadow-md);
}

.grainpa-float-wa:hover,
.grainpa-float-wa:focus-visible {
	background: #0d6b38;
	color: var(--gp-white);
}

.grainpa-float-wa svg {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

@media (max-width: 33.9em) {
	.grainpa-float-wa__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.grainpa-float-wa {
		padding: 0.85em;
	}
}

/* --------------------------------------- 13. Accessibility and motion */

.grainpa-site a:focus-visible,
.grainpa-site button:focus-visible,
.grainpa-site input:focus-visible,
.grainpa-site textarea:focus-visible,
.grainpa-site select:focus-visible,
.grainpa-site .grainpa-btn:focus-visible {
	outline: 3px solid var(--gp-orange);
	outline-offset: 2px;
	border-radius: var(--gp-radius-sm);
}

.grainpa-band a:focus-visible,
.grainpa-footer a:focus-visible,
.grainpa-site-header a:focus-visible {
	outline-color: var(--gp-cream-deep);
}

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

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

	.grainpa-card:hover,
	.grainpa-btn:hover,
	.grainpa-categories__link:hover {
		transform: none;
	}
}

/* ---------------------------------- 14. Mobile-first responsiveness */

/* 13.1 General mobile container & layout fixes (< 768px) */
@media (max-width: 48em) {
	/* Reduce excessive container padding on mobile */
	.ast-container,
	.site-content .ast-container,
	.grainpa-site .site-main {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* Safety net for the block editor's "Hide on Mobile" visibility
	   toggle (wp-block-hidden-mobile). Most uses of it on this site are
	   legitimate paired mobile/desktop image swaps (matching
	   wp-block-hidden-desktop counterpart), so this does NOT blanket-undo
	   the toggle. It only targets the one confirmed-broken case: a group
	   wrapping the Contact Us enquiry form that has no mobile counterpart
	   at all, leaving the form completely invisible on phones. */
	.wp-block-hidden-mobile:has(.wpcf7) {
		display: block !important;
	}

	/* That same form also sits inside a Group block using Gutenberg's
	   fixed 2-column Grid layout, which doesn't collapse on its own —
	   it was squeezing the contact list and the form into ~118px
	   slivers side by side. Force it to a single column on phones. */
	.is-layout-grid:has(.wpcf7) {
		grid-template-columns: 1fr !important;
	}

	/* Some Gutenberg Columns blocks were saved with "Stack on mobile"
	   turned off (is-not-stacked-on-mobile), which crams multi-column
	   content — e.g. the Contact page's info list next to the form —
	   into unreadably narrow side-by-side columns on phones. Force them
	   to stack like every other Columns block does by default. */
	.wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Scale down main page titles cleanly */
	.grainpa-site h1,
	.grainpa-page-header__title,
	.grainpa-hero h1 {
		font-size: clamp(1.65rem, 6vw, 2.2rem) !important;
		line-height: 1.2 !important;
	}

	.grainpa-site h2,
	.grainpa-single .grainpa-panel__title,
	.grainpa-related__title {
		font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
	}

	.grainpa-single .grainpa-single__title {
		font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
		line-height: 1.2 !important;
	}

	/* Header logo responsive scaling on mobile (< 768px) */
	.grainpa-header-logo__img,
	a.grainpa-header-logo img,
	.grainpa-header-logo img.custom-logo {
		max-height: 40px !important;
		max-width: 160px !important;
		width: auto !important;
		height: auto !important;
	}

	.grainpa-header-logo__text {
		font-size: 1.35rem !important;
	}

	/* Full-width touch-friendly buttons on mobile */
	.grainpa-hero .wp-block-buttons,
	.grainpa-single__actions,
	.grainpa-btn-group {
		flex-direction: column !important;
		width: 100% !important;
		gap: 0.75rem !important;
	}

	.grainpa-btn,
	.grainpa-single__actions .grainpa-btn,
	.grainpa-hero .wp-block-button__link {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		padding: 0.85em 1.2em !important;
	}

	/* Trust badges bar: strictly 1 single horizontal row across all screen sizes */
	.grainpa-trust-bar,
	.wp-block-columns.is-style-trust-bar,
	.is-style-trust-bar {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0.5rem !important;
		padding: 0.85rem 0.5rem !important;
		border-radius: 18px !important;
		width: 100% !important;
	}

	.grainpa-trust-item,
	.wp-block-column.is-style-trust-item,
	.is-style-trust-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		gap: 0.35rem !important;
		width: 100% !important;
	}

	.grainpa-trust-item__icon,
	.is-style-trust-item .wp-block-image,
	.is-style-trust-item img {
		width: 44px !important;
		height: 44px !important;
		margin: 0 auto !important;
	}

	.grainpa-trust-item__text,
	.is-style-trust-item p {
		font-size: 0.76rem !important;
		line-height: 1.18 !important;
		text-align: center !important;
		margin: 0 !important;
	}

	/* Category Filter Pills: Touch-swipe horizontal scroll container */
	.grainpa-catnav__list {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		padding-bottom: 0.5rem !important;
		-webkit-overflow-scrolling: touch !important;
		scrollbar-width: none !important;
		scroll-snap-type: x mandatory !important;
	}

	.grainpa-catnav__list::-webkit-scrollbar {
		display: none !important;
	}

	.grainpa-catnav__item {
		scroll-snap-align: start !important;
		flex: 0 0 auto !important;
	}

	.grainpa-catnav__link {
		white-space: nowrap !important;
		padding: 0.45em 0.95em !important;
		font-size: 0.84rem !important;
	}

	/* Product Grid: 2-column mobile e-commerce layout */
	.grainpa-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}

	/* Product Card mobile touch enhancements */
	.grainpa-card {
		padding: 0 !important;
		border-radius: 14px !important;
	}

	.grainpa-card__body {
		padding: 0.75rem 0.65rem 0.65rem !important;
		gap: 0.35rem !important;
	}

	.grainpa-card__title,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.92rem !important;
		line-height: 1.3 !important;
		font-weight: 600 !important;
	}

	.grainpa-card__cue {
		width: 100% !important;
		padding: 0.4em 0.5em !important;
		font-size: 0.78rem !important;
	}

	/* Single Product Page Media & Gallery on mobile */
	.grainpa-single__grid {
		gap: 1.5rem !important;
	}

	.grainpa-gallery__thumbs {
		gap: 0.5rem !important;
	}

	.grainpa-gallery__btn {
		width: 58px !important;
		height: 58px !important;
	}

	/* Panels, nutrition tables and banner cards */
	.grainpa-panel,
	.grainpa-cta-banner,
	.grainpa-band,
	.grainpa-form-area {
		padding: 1.5rem 1rem !important;
		border-radius: 16px !important;
	}

	.grainpa-nutrition th,
	.grainpa-nutrition td {
		padding: 0.5rem 0.6rem !important;
		font-size: 0.86rem !important;
	}

	/* Footer on mobile */
	.grainpa-footer__inner {
		padding: 2.5rem 1rem 1.5rem !important;
	}

	.site-below-footer-wrap .ast-builder-grid-row {
		display: flex !important;
		flex-direction: column !important;
		text-align: center !important;
		gap: 0.5rem !important;
	}
}

/* 13.2 Ultra-compact mobile screen support (< 360px) */
@media (max-width: 22.5em) {
	.grainpa-grid {
		grid-template-columns: repeat(1, 1fr) !important;
	}

	.grainpa-trust-bar {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

/* ---------------------------------------------------- 15. About Us Page Styles */

.grainpa-about-hero {
	position: relative;
	background:
		radial-gradient(circle at 90% 10%, rgba(217, 119, 36, 0.15), transparent 40%),
		radial-gradient(circle at 10% 90%, rgba(13, 60, 46, 0.12), transparent 45%),
		var(--gp-cream);
	padding: var(--gp-s7) var(--gp-s5);
	border-radius: var(--gp-radius-lg);
	border: 1px solid var(--gp-line);
	box-shadow: var(--gp-shadow-sm);
}

.grainpa-about-hero .grainpa-hero-sub {
	font-size: var(--gp-step-1);
	color: var(--gp-muted);
	max-width: 62ch;
	margin-inline: auto;
	line-height: 1.65;
}

.grainpa-stat-grid {
	margin-top: var(--gp-s6);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--gp-s4);
}

.grainpa-stat-card {
	background: var(--gp-white);
	padding: var(--gp-s4) var(--gp-s3);
	border-radius: var(--gp-radius);
	border: 1px solid var(--gp-line);
	text-align: center;
	box-shadow: 0 4px 12px rgba(8, 58, 46, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.grainpa-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--gp-shadow-md);
	border-color: var(--gp-gold);
}

.grainpa-stat-card__icon {
	font-size: 1.8rem;
	margin-bottom: var(--gp-s2);
}

.grainpa-stat-card__title {
	font-family: var(--gp-font-head);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--gp-forest);
	margin-bottom: var(--gp-s1);
}

.grainpa-stat-card__desc {
	font-size: 0.84rem;
	color: var(--gp-muted);
}

/* About Story & Origins */
.grainpa-origins-quote {
	margin: var(--gp-s5) auto;
	padding: var(--gp-s5);
	background: var(--gp-cream);
	border-left: 4px solid var(--gp-gold);
	border-radius: 0 var(--gp-radius) var(--gp-radius) 0;
	max-width: var(--gp-measure);
}

.grainpa-origins-quote p {
	font-family: var(--gp-font-head);
	font-size: var(--gp-step-1);
	color: var(--gp-forest);
	font-style: italic;
	line-height: 1.5;
	margin-bottom: var(--gp-s3);
}

.grainpa-origins-quote cite {
	font-family: var(--gp-font-body);
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--gp-gold-ink);
	font-style: normal;
}

.grainpa-story-text {
	font-size: 1.08rem;
	color: var(--gp-ink);
	line-height: 1.7;
	max-width: 66ch;
	margin-inline: auto;
}

/* Pillars Grid */
.grainpa-pillars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--gp-s4);
	margin-top: var(--gp-s5);
}

.grainpa-pillar-card {
	background: var(--gp-white);
	padding: var(--gp-s5) var(--gp-s4);
	border-radius: var(--gp-radius);
	border: 1px solid var(--gp-line);
	position: relative;
	box-shadow: 0 4px 16px rgba(8, 58, 46, 0.03);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.grainpa-pillar-card:hover {
	transform: translateY(-4px);
	border-color: var(--gp-orange);
}

.grainpa-pillar-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--gp-cream-deep);
	color: var(--gp-forest);
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: var(--gp-s3);
}

.grainpa-pillar-card h3 {
	font-size: var(--gp-step-1);
	color: var(--gp-forest);
	margin-bottom: var(--gp-s2);
}

.grainpa-pillar-card p {
	font-size: 0.92rem;
	color: var(--gp-muted);
	line-height: 1.55;
	margin: 0;
}

/* Mini Product Showcase Card Grid */
.grainpa-mini-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--gp-s4);
	margin-block: var(--gp-s5);
}

.grainpa-mini-product-card {
	background: var(--gp-white);
	border: 1px solid var(--gp-line);
	border-radius: var(--gp-radius);
	padding: var(--gp-s4);
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.grainpa-mini-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--gp-shadow-sm);
	border-color: var(--gp-gold);
}

.grainpa-mini-product-card img {
	width: 100%;
	max-width: 160px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--gp-radius-sm);
	margin-bottom: var(--gp-s2);
}

.grainpa-mini-product-card p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--gp-forest);
}

.grainpa-mini-product-card a {
	color: var(--gp-forest);
	text-decoration: none;
}

.grainpa-mini-product-card a:hover {
	color: var(--gp-orange-ink);
}

/* Extra small phone screen logo fine-tuning (< 480px) */
@media (max-width: 30em) {
	.grainpa-header-logo__img,
	a.grainpa-header-logo img,
	.grainpa-header-logo img.custom-logo {
		max-height: 35px !important;
		max-width: 135px !important;
	}

	.grainpa-header-logo__text {
		font-size: 1.25rem !important;
	}
}