/*
Theme Name: Shakpura Agro
Theme URI: https://shakpuraagro.com
Description: Block theme for Shakpura Agro, a shop in Boalkhali, Chattogram selling potting mix, organic fertilizer and plant care. Child of Twenty Twenty-Five, built for FluentCart.
Author: Shakpura Agro
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shakpura-agro
*/

/* ---------------------------------------------------------------
   Brand tokens shared with FluentCart's components
   --------------------------------------------------------------- */
body {
	--sa-paddy: var(--wp--preset--color--paddy);
	--sa-paddy-deep: var(--wp--preset--color--paddy-deep);
	--sa-mustard: var(--wp--preset--color--mustard);
	--sa-mist: var(--wp--preset--color--mist);
	--sa-line: var(--wp--preset--color--line);
	--sa-muted: var(--wp--preset--color--muted);
	--sa-soil: var(--wp--preset--color--contrast);

	--fct-primary-text-color: var(--sa-soil);
	--fct-secondary-text-color: var(--sa-muted);
	--fct-primary-active-text-color: var(--sa-paddy);
	--fct-border-color: var(--sa-line);
	--fct-divider-color: var(--sa-line);
	--fct-active-border-color: var(--sa-paddy);
	--fct-card-bg-color: #fff;
	--fct-btn-bg-color: var(--sa-paddy);
	--fct-btn-text-color: #fff;
	--fct-btn-hover-bg-color: var(--sa-paddy-deep);
	--fct-btn-hover-text-color: #fff;
	--fct-btn-radius: 4px;
	--fct-secondary-btn-bg-color: transparent;
	--fct-secondary-btn-text-color: var(--sa-paddy);
	--fct-secondary-btn-border-color: var(--sa-paddy);
	--fct-secondary-btn-hover-bg-color: var(--sa-mist);
	--fct-input-radius: 4px;
	--fct-container-radius: 6px;
	--fct-badge-radius: 3px;
	--fct-input-text-color: var(--sa-soil);
	--fct-input-placeholder-text-color: var(--sa-muted);
}

/* Full-width bands sit flush against each other: no block-gap seams */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull,
.wp-block-template-part > .alignfull { margin-block-start: 0; margin-block-end: 0; }
main > .wp-block-post-content { margin-block: 0; }

/* Headings on dark bands take the band's text colour */
:is(.has-paddy-background-color, .has-paddy-deep-background-color, .wp-block-cover) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* Keyboard focus that stays visible on every surface */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sa-paddy);
	outline-offset: 3px;
}
.has-paddy-background-color :where(a, button):focus-visible,
.has-paddy-deep-background-color :where(a, button):focus-visible {
	outline-color: var(--sa-mustard);
}

/* Variable-width body face: buttons and nav run slightly condensed */
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation,
.fct-product-card button,
.fct-product-card .fct-product-view-button {
	font-stretch: 92%;
}

/* Every button label in Title Case: theme buttons, FluentCart cards,
   product page, cart, checkout and filter buttons alike. */
:is(
	button,
	input[type="submit"],
	input[type="button"],
	.wp-element-button,
	.wp-block-button__link,
	a[class*="button"],
	a[class*="btn"]
) {
	text-transform: capitalize !important;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
/* Sticky on every template (theme and FluentCart alike): the header template part
   is a direct child of .wp-site-blocks, so it stays put for the whole page. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}
/* Below 600px the admin bar scrolls away with the page */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}
/* In-page links (e.g. #tub-guide) land below the header, not under it */
html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7.5rem); }
/* FluentCart's sticky review summary on product pages (top: 20px) would slide under it */
body .fct-reviews-layout-left { top: calc(var(--wp-admin--admin-bar--height, 0px) + 7.5rem); }

.sa-header { position: relative; z-index: 20; }
.sa-header .wp-block-site-title { white-space: nowrap; }

/* Round logo sits like a sack stamp, hanging over the band below */
.sa-header .sa-seal {
	margin: -0.25rem 0 -4rem;
	position: relative;
	z-index: 21;
	flex-shrink: 0;
}
.sa-header .sa-seal img {
	display: block;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 5px #fff;
}
/* Once the page scrolls (assets/js/header.js sets .sa-scrolled), the seal tucks
   into the header bar so it stops covering content. Its outer height stays 52px
   in both states, so the sticky header never changes height while scrolling. */
@media (min-width: 782px) {
	.sa-header .sa-seal { transition: margin 0.25s ease; }
	.sa-header .sa-seal img {
		width: 120px;
		height: 120px;
		transition: width 0.25s ease, height 0.25s ease;
	}
	.sa-scrolled .sa-header .sa-seal { margin: -4px 0; }
	.sa-scrolled .sa-header .sa-seal img { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	.sa-header .sa-seal,
	.sa-header .sa-seal img { transition: none; }
}
/* FluentCart's own category and product templates start straight under the header:
   leave room for the hanging seal. */
@media (min-width: 782px) {
	:is(.tax-product-categories, .single-fluent-products) .wp-site-blocks > main:not(.sa-main-flush) {
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* Tablet: the seal already spells out the name, so the text title goes first,
   then the menu tightens so it stays on one line. */
@media (max-width: 1100px) {
	.sa-header .wp-block-site-title { display: none; }
	.sa-header .wp-block-navigation,
	.sa-header .wp-block-navigation__container { gap: 0.5rem 1.125rem; }
	.sa-header .wp-block-navigation { font-size: 1rem; }
}
/* Core shows the full menu from 600px; six links don't fit until ~780px, so keep the menu button until then. */
@media (min-width: 600px) and (max-width: 781px) {
	.sa-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.sa-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Open menu: mustard sheet, large links aligned left with the page gutter */
.sa-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem var(--wp--style--root--padding-right) 2.5rem var(--wp--style--root--padding-left);
}
/* The menu <ul> carries .wp-block-navigation.items-justified-right itself, so reset the variables there */
.sa-header .is-menu-open .wp-block-navigation,
.sa-header .is-menu-open .wp-block-navigation__responsive-container-content {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}
.sa-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.sa-header .is-menu-open .wp-block-navigation__container { gap: 0.875rem; }
.sa-header .is-menu-open .wp-block-navigation-item {
	font-size: clamp(1.75rem, 7vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.sa-header .is-menu-open .wp-block-navigation-item a { color: var(--sa-paddy); }
.sa-header .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }

@media (max-width: 781px) {
	.sa-header .sa-seal { margin: 0; }
	.sa-header .sa-seal img { width: 56px !important; height: 56px !important; box-shadow: none; }
	.sa-header .wp-block-site-title { display: none; }
}
.sa-header .wp-block-fluent-cart-mini-cart .fct-mini-cart-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 2px solid var(--sa-paddy);
	border-radius: 4px;
	background: transparent;
	color: var(--sa-paddy);
	font-family: inherit;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}
.sa-header .fct-mini-cart-button:hover { background: var(--sa-mist); }
.sa-header .fct-mini-cart-button svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.sa-hero.wp-block-media-text { min-height: min(82vh, 760px); }
.sa-hero .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--60) clamp(1.25rem, 5vw, 5rem) !important;
}
.sa-hero h1 {
	font-size: clamp(2.75rem, 6vw, 6rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 11ch;
}
.sa-hero .sa-hero__lede {
	max-width: 34ch;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.5;
}
.sa-hero .wp-block-media-text__media img { object-position: 50% 60%; }

@media (max-width: 781px) {
	.sa-hero.wp-block-media-text { min-height: 0; }
	.sa-hero .wp-block-media-text__media { min-height: 52vw; }
}

/* Centered hero: headline in open sky, rooftop garden along the bottom.
   The photo's own sky fades into the band colour, so there is no seam and
   the type never sits on the plants at any width. */
.sa-hero-sky { overflow: hidden; }
.sa-hero-sky h1 {
	font-size: clamp(2.75rem, 6vw, 6rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	max-width: 14ch;
	text-wrap: balance;
}
.sa-hero-sky .sa-hero__lede {
	max-width: 52ch;
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	line-height: 1.5;
	text-wrap: pretty;
}
/* Text stays above the photo's faded sky, which tucks up under the buttons */
.sa-hero-sky > :not(.sa-hero-sky__field) { position: relative; z-index: 1; }
.sa-hero-sky .sa-hero-sky__field {
	margin-top: calc(-1 * clamp(0.5rem, 2.5vw, 2.5rem));
	margin-bottom: 0;
}
.sa-hero-sky .sa-hero-sky__field img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	object-position: 50% 92%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
/* Narrow screens: keep the crop wide and anchored to the pots so the
   tree line stays close under the buttons. */
@media (max-width: 781px) {
	.sa-hero-sky .sa-hero-sky__field img { aspect-ratio: 2 / 1; object-position: 50% 100%; }
}
@media (max-width: 600px) {
	.sa-hero-sky .wp-block-buttons { flex-direction: column; align-items: stretch; max-width: 20rem; }
	.sa-hero-sky .wp-block-button__link { width: 100%; }
}

/* ---------------------------------------------------------------
   Promise slip: four promises, each with an icon, on a white slip.
   Straight after the hero it tucks up over the bottom of the field photo.
   --------------------------------------------------------------- */
.sa-promise-band {
	position: relative;
	z-index: 2;
}
/* Right after the hero, the slip tucks up over the bottom of the field photo */
.wp-block-post-content > .sa-hero-sky + .alignfull.sa-promise-band,
.sa-hero-sky + .sa-promise-band { margin-block-start: calc(-1 * clamp(2.5rem, 5vw, 4.5rem)); }

.sa-promise-band .sa-promise-slip {
	gap: 1px;
	/* the 1px grid gaps show this as hairline seams between promises (an image
	   layer, because the preset colour class sets background-color !important) */
	background-image: linear-gradient(var(--sa-line), var(--sa-line));
	border: 1px solid var(--sa-line);
	border-radius: 4px;
	overflow: hidden;
}
.sa-promise-band .sa-promise {
	margin: 0;
	padding: clamp(1.375rem, 2.4vw, 2rem) clamp(1.25rem, 2.2vw, 1.875rem);
	/* follows the slip's colour, so changing it in the editor changes the whole slip */
	background-color: inherit;
}
.sa-promise-band .sa-promise .wp-block-icon { margin: 0 0 0.875rem; }
.sa-promise-band .sa-promise h3 {
	margin: 0 0 0.5rem;
	color: var(--sa-paddy);
	font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
	line-height: 1.2;
}
.sa-promise-band .sa-promise p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}
@media (max-width: 1100px) {
	.sa-promise-band .sa-promise-slip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sa-promise-band .sa-promise-slip { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------
   Section heading row (title + "see all" link)
   --------------------------------------------------------------- */
.sa-section-head { align-items: flex-end !important; }
.sa-section-head h2 { margin: 0; }
.sa-section-head p { margin: 0; }
.sa-section-head p.has-muted-color { max-width: 60ch; }
.sa-section-head a { font-weight: 600; }

/* ---------------------------------------------------------------
   Shop by category: core Terms Query over FluentCart's product
   categories, set as a two-column board. Each row: the category name,
   what's in it (its FluentCart description) and a chevron. The whole
   row is the link.
   --------------------------------------------------------------- */
.sa-cat-board { margin-top: var(--wp--preset--spacing--40); }
.sa-cat-board .wp-block-term-template {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: clamp(2rem, 5vw, 4.5rem);
	row-gap: 0;
}
.sa-cat-board .wp-block-term {
	position: relative;
	border-bottom: 1px solid var(--sa-line);
}
.sa-cat-board .wp-block-term:nth-child(-n + 2) { border-top: 1px solid var(--sa-line); }
.sa-cat-board .sa-cat-row { gap: 1.5rem; padding: 1.375rem 0; }
.sa-cat-board .sa-cat-text > * { margin: 0; }
.sa-cat-board .wp-block-term-name {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.15;
}
.sa-cat-board .wp-block-term-name a { color: var(--sa-paddy); text-decoration: none; }
.sa-cat-board .wp-block-term-name a::after { content: ""; position: absolute; inset: 0; }
.sa-cat-board .sa-cat-text > .wp-block-term-description {
	margin-top: 0.3rem;
	color: var(--sa-muted);
	font-size: 1rem;
	line-height: 1.45;
}
.sa-cat-board .wp-block-icon { flex-shrink: 0; transition: transform 0.15s ease; }
.sa-cat-board .wp-block-term:hover .wp-block-term-name a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}
.sa-cat-board .wp-block-term:hover .wp-block-icon { transform: translateX(4px); }
.sa-cat-board .wp-block-term-name a:focus-visible { outline: none; }
.sa-cat-board .wp-block-term:focus-within { outline: 2px solid var(--sa-paddy); outline-offset: 2px; }
@media (max-width: 781px) {
	.sa-cat-board .wp-block-term-template { grid-template-columns: minmax(0, 1fr); }
	.sa-cat-board .wp-block-term:nth-child(2) { border-top: 0; }
	.sa-cat-board .sa-cat-row { padding: 1.125rem 0; }
}

/* FluentCart Products block rows on the homepage */
.wp-block-fluent-cart-products.sa-products { margin-top: var(--wp--preset--spacing--40); }

/* FluentCart pads its wrapper by 20px below 1280px on top of width:100%, which
   overflows the theme's own root padding. The theme already provides the gutter. */
body .wp-block-fluent-cart-products .fct-products-wrapper {
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   FluentCart product cards (home loops + shop)
   --------------------------------------------------------------- */

.fct-product-card {
	width: 100% !important;
	max-width: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
}
.fct-product-card .fct-product-card-image-wrap {
	border-radius: 6px;
	overflow: hidden;
	background: var(--sa-mist);
	margin-bottom: 0.4rem;
}
.fct-product-card .fct-product-card-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.fct-product-card:hover .fct-product-card-image { transform: scale(1.04); }
.fct-product-card .fct-product-card-title,
.fct-product-card .fct-product-card-prices,
.fct-product-card .fct-product-card-excerpt { padding: 0 !important; }
.fct-product-card .fct-product-card-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	margin: 0 !important;
}
.fct-product-card .fct-product-card-title a { color: var(--sa-soil) !important; text-decoration: none; }
.fct-product-card .fct-product-card-title a:hover { text-decoration: underline; }
.sa-products .fct-product-card-excerpt { display: none; }
.fct-product-card .fct-product-card-prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	font-size: 1.0625rem;
}
.fct-product-card .fct-item-price { font-weight: 600; color: var(--sa-paddy); }
.fct-product-card del,
.fct-product-card .fct-compare-price { color: var(--sa-muted); font-weight: 400; font-size: 0.9375rem; }
.fct-product-card button,
.fct-product-card .fct-product-view-button {
	margin-top: auto !important;
	width: 100%;
	border-radius: 4px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	padding: 0.7rem 1rem !important;
	box-shadow: none !important;
	background-image: none !important;
}
/* Cards with several pack sizes get the quieter outline button */
.fct-product-card .fct-product-view-button {
	background: transparent !important;
	color: var(--sa-paddy) !important;
	border: 2px solid var(--sa-paddy) !important;
}
.fct-product-card .fct-product-view-button:hover { background: var(--sa-mist) !important; }


/* ---------------------------------------------------------------
   Ordering steps + delivery rates
   --------------------------------------------------------------- */
ol.sa-steps {
	list-style: none;
	counter-reset: sa-step;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.75rem;
}
ol.sa-steps li {
	counter-increment: sa-step;
	position: relative;
	padding-left: 4rem;
	min-height: 3rem;
	line-height: 1.5;
}
ol.sa-steps li::before {
	content: counter(sa-step);
	position: absolute;
	left: 0;
	top: 0.1rem;
	font-weight: 700;
	font-size: 2.75rem;
	line-height: 0.9;
	color: var(--sa-paddy);
}
ol.sa-steps strong { display: block; font-size: 1.1875rem; color: var(--sa-paddy); margin-bottom: 0.15rem; }
/* Step numbers follow the page language: ১ ২ ৩ on the Bangla site */
:lang(bn) ol.sa-steps li::before { content: counter(sa-step, bengali); }
ol.sa-steps a { font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------
   How to fill a tub: steps beside a cross-section of a planted tub.
   Layers are numbered bottom up, matching the steps.
   --------------------------------------------------------------- */
.sa-tub-guide h2 { margin-bottom: 0.5rem; }
.sa-tub-guide__feed {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(31, 75, 44, 0.2);
	line-height: 1.5;
}
.sa-tub-guide__feed a { font-weight: 600; }

.sa-tub { max-width: 21rem; margin-inline: auto; }
.sa-tub > .wp-block-icon {
	position: relative;
	z-index: 1;
	margin: 0 auto -1.375rem !important;
	width: fit-content;
}
/* Terracotta tub: a darker rim band, walls sloping in towards the base */
.sa-tub > .sa-tub__pot {
	margin: 0 !important;
	aspect-ratio: 10 / 9;
	padding: 20px 12px 12px;
	box-sizing: border-box;
	background: linear-gradient(to bottom, #8a3c20 0 20px, #b5582e 20px);
	clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}
.sa-tub__soil {
	height: 100%;
	display: flex;
	flex-direction: column;
	clip-path: polygon(0 0, 100% 0, 87.5% 100%, 12.5% 100%);
	counter-reset: sa-layer 4;
}
.sa-tub__soil > .sa-tub__layer {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.25rem 16%;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	text-align: center;
}
.sa-tub__layer::before {
	counter-increment: sa-layer -1;
	content: counter(sa-layer);
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: #fff;
	color: var(--sa-paddy);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
}
:lang(bn) .sa-tub__layer::before { content: counter(sa-layer, bengali); }
.sa-tub__layer.is-pebbles {
	flex: 0 0 20%;
	color: var(--sa-soil);
	background-color: #d3cdc2;
	background-image:
		radial-gradient(circle at 30% 45%, #a59e92 0 3px, transparent 3.5px),
		radial-gradient(circle at 70% 60%, #ece8e0 0 4px, transparent 4.5px),
		radial-gradient(circle at 50% 30%, #b9b2a6 0 2.5px, transparent 3px);
	background-size: 19px 15px, 27px 19px, 13px 11px;
}
.sa-tub__layer.is-mix {
	flex: 1 1 auto;
	color: #fff;
	background-color: #4b3527;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 1px, transparent 1.5px),
		radial-gradient(circle, rgba(196, 139, 84, 0.4) 0 1.5px, transparent 2px);
	background-size: 13px 11px, 22px 17px;
}
.sa-tub__layer.is-jhama {
	flex: 0 0 27%;
	color: #fff;
	background-color: #6e2f1d;
	background-image:
		radial-gradient(ellipse 9px 6px at 30% 40%, #8e4329 0 98%, transparent 100%),
		radial-gradient(ellipse 7px 5px at 75% 70%, #5a2415 0 98%, transparent 100%),
		radial-gradient(ellipse 6px 7px at 60% 20%, #9a5233 0 98%, transparent 100%);
	background-size: 26px 20px, 21px 17px, 31px 23px;
}
@media (max-width: 781px) {
	.sa-tub { max-width: 17rem; }
}

.sa-rates table { border-collapse: collapse; width: 100%; }
.sa-rates td {
	border: 0 !important;
	border-bottom: 1px solid rgba(31, 75, 44, 0.25) !important;
	padding: 0.9rem 0 !important;
	vertical-align: baseline;
}
.sa-rates td:last-child {
	text-align: right;
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sa-paddy);
	white-space: nowrap;
}
.sa-rates td:last-child .sa-taka { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.7em; }

/* ---------------------------------------------------------------
   About page: Boalkhali photo beside the story, plus a slip for
   nurseries, farms and shops buying by the sack.
   --------------------------------------------------------------- */
.sa-about .sa-about__photo { margin: 0; }
.sa-about .sa-about__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 70%;
	border-radius: 4px;
}
.sa-about .sa-about__photo figcaption {
	margin: 0.625rem 0 0;
	color: inherit;
	opacity: 0.8;
	font-size: 0.9375rem;
	text-align: left;
}
.sa-about h2 { margin: 0 0 1rem; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.2; }
.sa-about .sa-about__lede { margin: 0; line-height: 1.5; max-width: 34em; }
.sa-about .sa-bulk-slip {
	margin-block-start: var(--wp--preset--spacing--50);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border-radius: 4px;
}
.sa-about .sa-bulk-slip > * { margin-block: 0; }
.sa-about .sa-bulk-slip > * + * { margin-block-start: 0.625rem; }
.sa-about .sa-bulk-slip .wp-block-icon + * { margin-block-start: 0.875rem; }
.sa-about .sa-bulk-slip h3 {
	color: var(--sa-paddy);
	font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
	line-height: 1.2;
}
.sa-about .sa-bulk-slip p { font-size: 1rem; line-height: 1.55; }
.sa-about .sa-bulk-slip .sa-bulk-slip__pickup { color: var(--sa-muted); font-size: 0.9375rem; }
.sa-about .sa-bulk-slip .wp-block-buttons { margin-block-start: 1.25rem; }

/* ---------------------------------------------------------------
   Shop page
   --------------------------------------------------------------- */
.sa-shop-intro h1 { margin: 0; }
.sa-shop .fct-products-wrapper { --fct-container-radius: 6px; }
.sa-shop .fct-shop-filter-wrapper {
	background: var(--sa-mist);
	border-radius: 6px;
	padding: 1.25rem 1.25rem 1.5rem;
	align-self: start;
}
/* Filter sidebar stays in view while the product grid scrolls. FluentCart already
   makes it position: sticky but gives no top, so it never sticks. Same offset as
   in-page links: clears the admin bar and the sticky header. Narrow screens get
   FluentCart's filter drawer instead, which this direct-child selector leaves alone. */
.sa-shop .fct-products-wrapper-inner > .fct-shop-filter-wrapper {
	--sa-filter-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7.5rem);
	top: var(--sa-filter-top);
	max-height: calc(100vh - var(--sa-filter-top) - 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sa-shop .fct-shop-input { background: #fff; font-family: inherit; font-size: 1rem; }
.sa-shop .fct-shop-filter-item .item-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sa-paddy);
}
.sa-shop .fct-shop-checkbox { font-size: 1rem; color: var(--sa-soil); }
.sa-shop .fct-shop-checkbox input:checked + .checkmark {
	background-color: var(--sa-paddy);
	border-color: var(--sa-paddy);
}

/* ---------------------------------------------------------------
   Category pages: FluentCart's "Products by Category" template, customised
   in the Site Editor. Mist header with the category's own description and a
   row of category links, then the FluentCart products, then the promise slip.
   --------------------------------------------------------------- */
.sa-cat-head > * { margin-block: 0; }
/* The round logo hangs below the header; from 782px up, header bands under it
   (shop and category pages) start far enough down that the title clears it.
   !important because the band's own padding is an inline block style. */
@media (min-width: 782px) {
	.sa-cat-head { padding-top: 4rem !important; }
}
.sa-cat-head .wp-block-query-title { color: var(--sa-paddy); }
.sa-cat-head .sa-cat-head__desc { margin-block-start: 0.875rem; }
.sa-cat-head .sa-cat-head__desc p {
	margin: 0;
	max-width: 40em;
	font-size: 1.125rem;
	line-height: 1.55;
}
.sa-cat-head .sa-cat-chips { margin-block-start: var(--wp--preset--spacing--40); gap: 0.5rem; }
.sa-cat-chips > *,
.sa-cat-chips .wp-block-term,
.sa-cat-chips .wp-block-term-name { margin: 0; }
/* the category links and "All products" wrap as one row of chips */
.sa-cat-chips .wp-block-terms-query,
.sa-cat-chips .wp-block-term-template { display: contents; }
.sa-cat-chips .wp-block-term-template { list-style: none; }
.sa-cat-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.375rem 1rem;
	border: 1px solid var(--sa-line);
	border-radius: 4px;
	background: #fff;
	color: var(--sa-soil);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.sa-cat-chips a:hover { border-color: var(--sa-paddy); color: var(--sa-paddy); }
.sa-cat-chips a[aria-current="page"] {
	background: var(--sa-paddy);
	border-color: var(--sa-paddy);
	color: #fff;
}
.sa-cat-products .wp-block-fluent-cart-products.sa-products { margin-top: 0; }
/* one page of products: FluentCart still prints an empty paginator with a 40px top margin */
.sa-cat-products .fct-shop-paginator:not(:has(*)) { display: none; }

/* ---------------------------------------------------------------
   Product page: FluentCart's "Single Product" template, customised in the
   Site Editor. Photo beside the buying column (category links, name, price,
   short note, buy buttons, paying and delivery facts), then the description,
   reviews and a mist band of related products.
   --------------------------------------------------------------- */
.sa-prod-summary > * { margin-block: 0; }

.sa-prod-summary .sa-prod-crumbs { font-size: 0.9375rem; color: var(--sa-muted); }
.sa-prod-crumbs a { color: var(--sa-paddy); text-decoration: none; }
.sa-prod-crumbs a:hover { text-decoration: underline; }

.sa-prod-summary h1.wp-block-post-title {
	margin-block-start: 0.5rem;
	font-size: clamp(2rem, 3.4vw, 2.875rem);
	line-height: 1.15;
}
.sa-prod-summary .fct-product-card-prices {
	margin-block-start: 0.75rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sa-soil);
}
.sa-prod-summary .fct-product-card-prices del { font-size: 1.125rem; font-weight: 400; color: var(--sa-muted); }
.sa-prod-summary .fct-product-card-excerpt {
	margin-block-start: 1.25rem;
	max-width: 34em;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sa-prod-summary .fct_buy_section { margin-block-start: 1.75rem; }
.sa-prod-summary .fct_buy_section .quantity-title { margin-bottom: 0.5rem; font-size: 1rem; }
.sa-prod-summary .fct_buy_section .fct-product-quantity {
	height: 3rem;
	width: 8.5rem;
	border: 1px solid var(--sa-line);
	border-radius: 4px;
	background: #fff;
}
.sa-prod-summary .fct_buy_section .fct-product-quantity button { width: 2.75rem; height: 100%; }
.sa-prod-summary .fct_buy_section .fct-quantity-input { height: 100%; font-size: 1.0625rem; font-weight: 600; }
.sa-prod-summary .fct_buy_section .fct-product-buttons-wrap { margin-top: 1.25rem; gap: 0.75rem; }
.sa-prod-summary .fct_buy_section :is(.fluent-cart-direct-checkout-button, .fluent-cart-add-to-cart-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	font-weight: 600;
	font-stretch: 92%;
	line-height: 1.2;
	background-image: none;
	box-shadow: none;
}
.sa-prod-summary .fct_buy_section .fluent-cart-add-to-cart-button { border: 2px solid var(--sa-paddy); }
.sa-prod-summary .fct_buy_section .fluent-cart-add-to-cart-button:hover { background: var(--sa-mist); }

/* Paying and delivery, right under the buttons */
.sa-prod-summary .sa-prod-facts {
	margin-block-start: 1.75rem;
	padding: 1.25rem 1.5rem;
	border-radius: 4px;
	display: grid;
	gap: 1rem;
}
.sa-prod-facts > * { margin: 0; }
.sa-prod-facts .sa-prod-fact { gap: 0.875rem; }
.sa-prod-facts .wp-block-icon { flex-shrink: 0; margin-top: 0.125rem; }
.sa-prod-facts p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--sa-muted); }
.sa-prod-facts p strong { color: var(--sa-soil); font-size: 1rem; font-weight: 600; }

.sa-prod-media .fct-product-gallery-thumb img { border-radius: 6px; background: var(--sa-mist); }

/* Description: heading on the left, the store's text in a readable column */
.sa-prod-details .sa-prod-details__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	line-height: 1.2;
}
.sa-prod-desc { max-width: 40em; font-size: 1.0625rem; line-height: 1.65; }
.sa-prod-desc > * { margin-block: 0; }
.sa-prod-desc > * + * { margin-block-start: 0.625rem; }
.sa-prod-desc > :is(h2, h3, h4) {
	margin-block-start: 2rem;
	color: var(--sa-paddy);
	font-size: 1.25rem;
	line-height: 1.3;
}
.sa-prod-desc > :is(h2, h3, h4):first-child { margin-block-start: 0; }
/* Some products have only the short note, no description: drop the empty section */
.sa-prod-details:not(:has(.wp-block-post-content)) { display: none; }

/* Reviews: until the first review comes in, skip the empty score bars and filters */
.sa-prod-reviews .fct-reviews-summary { border-color: var(--sa-line); background: #fff; }
.sa-prod-reviews .fct-product-reviews-section:has(.fct-reviews-empty) :is(.fct-reviews-summary-right, .fct-reviews-controls) { display: none; }

/* Related products. A category with one product has none to show: drop the empty band. */
.sa-prod-related:not(:has(.fct-product-list-container)) { display: none; }
.sa-prod-related .fct-product-list-container { margin: 0; padding: 0; }
.sa-prod-related .fct-product-list-heading {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--sa-paddy);
}
.sa-prod-related .fct-product-list { gap: 2rem 1.5rem; }
.sa-prod-related .fct-product-card-excerpt { display: none; }
/* FluentCart's list pulls the photo 4px past the card on each side, out of line with the text */
.sa-prod-related .fct-product-card .fct-product-card-image-wrap { margin: 0 0 0.4rem; }

@media (max-width: 781px) {
	.sa-prod-summary h1.wp-block-post-title { margin-block-start: 0.375rem; }
	.sa-prod-related .fct-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.875rem; }
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.sa-footer a { color: inherit; text-decoration: none; }
.sa-footer a:hover { text-decoration: underline; color: var(--sa-mustard); }
.sa-footer .wp-block-site-title a { color: #fff; }
.sa-footer h2.sa-footer__label { font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 600; color: var(--sa-mustard); margin: 0 0 0.875rem; }
.sa-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.sa-footer ul > li { margin: 0; }
.sa-footer .sa-footer-cats { margin-block-start: 0; }
.sa-footer .sa-footer-cats .wp-block-term-template { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.sa-footer .sa-footer-cats .wp-block-term,
.sa-footer .sa-footer-cats .wp-block-term-name { margin: 0; }

/* Brand: the round logo on a white disc, as in the header, beside the name */
.sa-footer__brand > * { margin-block: 0; }
.sa-footer__brand > * + * { margin-block-start: 1rem; }
.sa-footer .sa-footer__mark { align-items: center; }
.sa-footer .sa-footer__logo { margin: 0; flex-shrink: 0; }
.sa-footer .sa-footer__logo img {
	display: block;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px #fff;
}
.sa-footer .sa-footer__about { margin-block-start: 1.5rem; max-width: 24em; color: #ffffffd9; line-height: 1.55; }
.sa-footer .sa-footer__place { color: #ffffffbf; font-size: 0.9375rem; }

/* Delivery charges read as a short rate list: place on the left, price on the right */
.sa-footer .sa-footer-rates { gap: 0.625rem; }
.sa-footer .sa-footer-rates li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	color: #ffffffd9;
}
.sa-footer .sa-footer-rates strong { color: #fff; font-weight: 600; white-space: nowrap; }
.sa-footer .sa-footer__cod { margin-block-start: 1rem; color: #ffffffbf; font-size: 0.9375rem; line-height: 1.5; }

.sa-footer .sa-footer__base { color: #ffffffbf; }
.sa-footer .sa-footer__base p { margin: 0; }

/* FluentCart's floating cart button sits 76px up from the bottom right. Until the
   page margin is wider than the button (1440px), leave room under the last row. */
@media (max-width: 1439px) {
	.sa-footer { padding-bottom: 6rem !important; }
}
/* Tablets: the name gets its own row, the three lists sit under it */
@media (max-width: 1100px) {
	.sa-footer .sa-footer__cols {
		display: grid;
		grid-template-columns: 1fr 1fr 1.3fr;
		gap: 2.5rem 2rem;
	}
	.sa-footer .sa-footer__cols > .sa-footer__brand { grid-column: 1 / -1; }
	.sa-footer .sa-footer__cols > .wp-block-column { margin: 0; }
}
/* Phones: the two link lists side by side, delivery under them */
@media (max-width: 781px) {
	.sa-footer .sa-footer__cols { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
	.sa-footer .sa-footer__cols > .sa-footer__delivery { grid-column: 1 / -1; max-width: 26rem; }
	.sa-footer .sa-footer__logo img { width: 68px; height: 68px; }
}

/* Two products per row on phones instead of one tall card per screen */
@media (max-width: 600px) {
	.wp-block-fluent-cart-products .fct-products-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem 0.875rem !important; }
	.fct-product-card .fct-product-card-title { font-size: 1rem !important; }
	.fct-product-card .fct-product-card-prices { font-size: 0.9375rem; }
	.fct-product-card button,
	.fct-product-card .fct-product-view-button { font-size: 0.9375rem !important; padding: 0.6rem 0.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}