/**
 * The Zuriyat product page — in the homepage's design language.
 *
 * Tokens, as on the homepage: forest #2a491d (deep #1c2e15), gold #d4af37,
 * deep gold #8a6a0f for prices, cream #f6f4ee, ink #22301c, body #3f4039;
 * Fraunces 400 for display, Heebo for reading; gold pill buttons with
 * forest letters. Headings need !important: site.css sets every heading to
 * Heebo with it, for the theme's sake.
 */

body.single-product {
	--zf-f: #2a491d;
	--zf-f-deep: #1c2e15;
	--zf-g: #d4af37;
	--zf-g-deep: #8a6a0f;
	--zf-cream: #f6f4ee;
	--zf-ivory: #fbf8f1;
	--zf-ink: #22301c;
	--zf-body: #3f4039;
	--zf-rule: #ece7da;
	--zf-serif: "Fraunces", "Noto Nastaliq Urdu", Georgia, "Times New Roman", serif;
	background: #ffffff;
}

.zf-pdp-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 20px;
}

.zf-pdp {
	color: var(--zf-body);
}

.zf-pdp-eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--zf-g-deep);
	text-decoration: none;
}

a.zf-pdp-eyebrow:hover {
	color: var(--zf-f);
}

.zf-pdp .zf-pdp-h2 {
	margin: 0 0 16px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--zf-ink);
	text-wrap: balance;
}

.zf-pdp-head {
	margin-bottom: clamp(24px, 3vw, 40px);
	max-width: 760px;
}

.zf-pdp-head--split {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	flex-wrap: wrap;
}

.zf-pdp-link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-weight: 600;
	font-size: 15px;
	color: var(--zf-f);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 175, 55, 0.7);
	padding-bottom: 2px;
}

.zf-pdp-link:hover {
	color: var(--zf-g-deep);
	border-color: var(--zf-g-deep);
}

.zf-pdp-btn,
.zf-pdp button.zf-pdp-btn,
.zf-pdp .comment-form .zf-pdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	border: 1px solid var(--zf-g);
	border-radius: 999px;
	background: var(--zf-g);
	color: var(--zf-f);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.zf-pdp-btn:hover,
.zf-pdp-btn:focus-visible {
	background: var(--zf-f);
	border-color: var(--zf-f);
	color: #ffffff;
}

.zf-pdp-btn--ghost {
	background: transparent;
	border-color: var(--zf-f);
	color: var(--zf-f);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- breadcrumb ----------------------------------------------------- */

.zf-pdp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0;
	padding: 18px 0 8px;
	list-style: none;
	font-size: 13px;
	color: #6b6c64;
}

.zf-pdp-crumbs li + li::before {
	content: "/";
	margin: 0 10px;
	color: var(--zf-g);
}

.zf-pdp-crumbs a {
	color: #6b6c64;
	text-decoration: none;
}

.zf-pdp-crumbs a:hover {
	color: var(--zf-f);
}

.zf-pdp-crumbs li:last-child {
	color: var(--zf-ink);
}

/* ---- hero: gallery and buy box ---------------------------------------- */

.zf-pdp-hero {
	padding: 8px 0 clamp(40px, 5vw, 72px);
}

.zf-pdp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.zf-pdp-hero__gallery {
	position: relative;
	min-width: 0;
}

.zf-pdp .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	opacity: 1 !important;
}

.zf-pdp .woocommerce-product-gallery .flex-viewport,
.zf-pdp .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
	border-radius: 20px;
	overflow: hidden;
	background: var(--zf-cream);
}

.zf-pdp .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
}

.zf-pdp .woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.zf-pdp .woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.zf-pdp .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid transparent;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.zf-pdp .woocommerce-product-gallery .flex-control-thumbs img:hover,
.zf-pdp .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--zf-g);
}

.zf-pdp .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(28, 46, 21, 0.12);
	font-size: 0;
}

.zf-pdp .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--zf-g);
	color: var(--zf-f);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.zf-pdp-buy {
	min-width: 0;
	padding-top: 6px;
}

.zf-pdp .zf-pdp-buy__title {
	margin: 0 0 10px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem) !important;
	font-weight: 400 !important;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--zf-ink);
	text-wrap: balance;
}

.zf-pdp-buy__subtitle {
	margin: 0 0 12px;
	font-size: 17px;
	color: #5a5b53;
}

.zf-pdp-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--zf-ink);
	text-decoration: none;
}

.zf-pdp-rating__count {
	font-weight: 400;
	color: #6b6c64;
	text-decoration: underline;
	text-decoration-color: rgba(212, 175, 55, 0.7);
}

.zf-pdp .star-rating {
	color: var(--zf-g);
}

.zf-pdp-buy__intro {
	margin: 4px 0 18px;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--zf-body);
}

.zf-pdp-buy__intro p {
	margin: 0 0 8px;
}

.zf-pdp .zf-pdp-buy__price .price,
.zf-pdp .single_variation .price {
	margin: 0 0 18px;
	font-family: var(--zf-serif);
	font-size: 28px;
	font-weight: 400;
	color: var(--zf-g-deep);
}

.zf-pdp .zf-pdp-buy__price .price > .amount:first-child {
	font-family: inherit;
}

.zf-pdp-buy__choose {
	margin: 0 0 10px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zf-ink);
}

/* The size chips: the variation swatches plugin's own options, restyled. */
.zf-pdp table.variations {
	width: 100%;
	margin: 0 0 12px;
	border: 0;
}

.zf-pdp table.variations th.label {
	display: none;
}

.zf-pdp table.variations td {
	padding: 0;
	border: 0;
}

.zf-pdp .cfvsw-swatches-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.zf-pdp .cfvsw-swatches-option {
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 11px 20px !important;
	border: 1px solid #d9d1be !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: var(--zf-ink) !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.zf-pdp .cfvsw-swatches-option .cfvsw-swatch-inner {
	padding: 0 !important;
	background: transparent !important;
	color: inherit !important;
}

.zf-pdp .cfvsw-swatches-option:hover {
	border-color: var(--zf-g) !important;
}

.zf-pdp .cfvsw-swatches-option.cfvsw-selected-swatch {
	border-color: var(--zf-f) !important;
	background: var(--zf-f) !important;
	color: #ffffff !important;
}

.zf-pdp .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	color: #6b6c64;
}

.zf-pdp .single_variation_wrap .woocommerce-variation {
	margin-bottom: 6px;
}

.zf-pdp .stock {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--zf-f);
}

.zf-pdp .stock.out-of-stock {
	color: #9b3b2b;
}

/* Quantity, Add to cart, Buy now, WhatsApp. */
.zf-pdp .zf-pdp-buy__form .actions {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	gap: 12px;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

.zf-pdp .zf-pdp-buy__form .product-quantity {
	margin: 0 !important;
}

.zf-pdp .zf-pdp-buy__form .product-quantity .label {
	display: none;
}

.zf-pdp .zf-pdp-buy__form .quantity .qty {
	width: 84px;
	height: 56px;
	border: 1px solid #d9d1be;
	border-radius: 999px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}

.zf-pdp .zf-pdp-buy__form .quantity.hidden,
.zf-pdp .zf-pdp-buy__form .product-quantity:has(.quantity.hidden) {
	display: none;
}

.zf-pdp .zf-pdp-buy__form .actions:has(.quantity.hidden) {
	grid-template-columns: 1fr 1fr;
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"]:not(.zf-pdp-buynow),
.zf-pdp .zf-pdp-buynow {
	width: 100%;
	min-height: 56px;
	margin: 0 !important;
	padding: 0 20px !important;
	border-radius: 999px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"]:not(.zf-pdp-buynow) {
	border: 1px solid var(--zf-g) !important;
	background: var(--zf-g) !important;
	color: var(--zf-f) !important;
}

.zf-pdp .zf-pdp-buynow {
	border: 1px solid var(--zf-f);
	background: var(--zf-f);
	color: #ffffff;
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button:hover,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"]:not(.zf-pdp-buynow):hover {
	background: var(--zf-f) !important;
	border-color: var(--zf-f) !important;
	color: #ffffff !important;
}

.zf-pdp .zf-pdp-buynow:hover {
	background: var(--zf-f-deep);
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button.disabled {
	opacity: 0.55;
}

/* WhatsApp ordering stays, as a quiet line under the buttons. */
.zf-pdp .whatsapp-buy-now-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--zf-f) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	text-decoration: none;
	box-shadow: none !important;
}

.zf-pdp .whatsapp-buy-now-button img {
	width: 22px !important;
	height: 22px;
	margin: 0 !important;
}

.zf-pdp-assure {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 20px;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--zf-rule);
	list-style: none;
	font-size: 14px;
	line-height: 1.4;
}

.zf-pdp-assure li {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--zf-body);
}

.zf-pdp-assure .zf-pdp-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--zf-f);
}

.zf-pdp-assure a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted rgba(42, 73, 29, 0.35);
}

.zf-pdp-assure a:hover {
	color: var(--zf-f);
}

.zf-pdp-buy__extra:empty {
	display: none;
}

/* ---- quick facts ------------------------------------------------------ */

.zf-pdp-facts {
	background: var(--zf-cream);
	padding: 28px 0;
}

.zf-pdp-facts__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 18px 32px;
	margin: 0 auto;
	list-style: none;
}

.zf-pdp-fact {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1 1 200px;
}

.zf-pdp-fact__mark {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--zf-f);
	box-shadow: 0 0 0 5px var(--zf-cream), 0 0 0 6px rgba(212, 175, 55, 0.4);
}

.zf-pdp-fact__mark .zf-pdp-icon {
	width: 30px;
	height: 30px;
}

.zf-pdp-fact__words strong {
	display: block;
	font-family: var(--zf-serif);
	font-size: 19px;
	font-weight: 400;
	color: var(--zf-ink);
}

.zf-pdp-fact__words span {
	font-size: 14px;
	color: #5a5b53;
}

/* ---- story ------------------------------------------------------------ */

.zf-pdp-story {
	padding: clamp(56px, 7vw, 104px) 0;
}

.zf-pdp-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.zf-pdp-story__grid.is-text-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

.zf-pdp-story__media {
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--zf-cream);
}

.zf-pdp-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zf-pdp-story__words p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--zf-body);
}

.zf-pdp-story__words .zf-pdp-eyebrow {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--zf-g-deep);
}

/* ---- information tabs ------------------------------------------------- */

.zf-pdp-info {
	background: var(--zf-ivory);
	padding: clamp(48px, 6vw, 88px) 0;
}

.zf-pdp-tabs {
	display: flex;
	gap: 6px 28px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--zf-rule);
}

.zf-pdp-tab {
	position: relative;
	padding: 14px 0;
	border: 0;
	background: transparent;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b6c64;
	cursor: pointer;
}

.zf-pdp-tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--zf-g);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.zf-pdp-tab.is-active {
	color: var(--zf-f);
}

.zf-pdp-tab.is-active::after,
.zf-pdp-tab:hover::after {
	transform: scaleX(1);
}

.zf-pdp-acc__head {
	display: none;
	margin: 0;
}

.zf-pdp-panel {
	display: none;
	padding: clamp(24px, 3vw, 44px);
	border-radius: 20px;
	background: #ffffff;
	font-size: 16px;
	line-height: 1.75;
	color: var(--zf-body);
}

.zf-pdp-panel.is-open {
	display: block;
}

/* The tabs' content is written in the snippet's Bootstrap markup; it is
   given the page's type and a quieter table. */
.zf-pdp-panel .container,
.zf-pdp-panel .container-fluid {
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

.zf-pdp-panel .row {
	margin: 0;
}

.zf-pdp-panel h2,
.zf-pdp-panel h3,
.zf-pdp-panel h4,
.zf-pdp-panel h5 {
	margin: 1.4em 0 0.5em;
	font-family: var(--zf-serif) !important;
	font-weight: 400 !important;
	color: var(--zf-ink) !important;
	letter-spacing: -0.01em;
}

.zf-pdp-panel h2 { font-size: 26px !important; }
.zf-pdp-panel h3 { font-size: 22px !important; }
.zf-pdp-panel h4,
.zf-pdp-panel h5 { font-size: 19px !important; }

.zf-pdp-panel > :first-child,
.zf-pdp-panel > * > :first-child {
	margin-top: 0;
}

.zf-pdp-panel p,
.zf-pdp-panel li {
	font-size: 16px;
	color: var(--zf-body);
}

.zf-pdp-panel ul {
	padding-left: 1.2em;
}

.zf-pdp-panel li::marker {
	color: var(--zf-g);
}

.zf-pdp-panel .table-responsive {
	overflow-x: auto;
}

.zf-pdp-panel table:not(.performance-facts__table) {
	width: 100%;
	margin: 0 0 1em;
	border-collapse: collapse;
	font-size: 15px;
}

.zf-pdp-panel table:not(.performance-facts__table) th,
.zf-pdp-panel table:not(.performance-facts__table) td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--zf-rule);
	text-align: left;
	vertical-align: top;
	background: transparent !important;
}

.zf-pdp-panel table:not(.performance-facts__table) thead th {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zf-f);
	border-bottom: 2px solid var(--zf-g);
}

/* Nutrition: the API's table as a label on the left, its chart on cream
   beside it; one above the other on a phone. */
.zf-pdp-panel--nutrition .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.zf-pdp-panel--nutrition .col-lg-6 {
	width: 100%;
	max-width: none;
	flex: none;
	padding: 0;
}

.zf-pdp-panel--nutrition .card {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: transparent;
}

.zf-pdp-panel--nutrition .col-lg-6:nth-child(2) .card {
	padding: 24px !important;
	border-radius: 18px;
	background: var(--zf-cream);
}

.zf-pdp-panel--nutrition .col-lg-6:nth-child(2) h5 {
	margin: 0 0 16px !important;
	font-size: 18px !important;
	text-align: left !important;
}

.zf-pdp-panel--nutrition canvas {
	max-width: 100%;
	max-height: 380px;
}

@media (max-width: 991px) {
	.zf-pdp-panel--nutrition .row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.zf-pdp .performance-facts__title {
	margin: 0 0 10px !important;
	font-size: 24px !important;
}

.zf-pdp .performance-facts__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.zf-pdp .performance-facts__table th,
.zf-pdp .performance-facts__table td {
	padding: 9px 0;
	border: 0;
	border-top: 1px solid var(--zf-rule);
	font-weight: 400;
	color: var(--zf-ink);
	text-align: left;
}

.zf-pdp .performance-facts__table td:last-child {
	text-align: right;
}

.zf-pdp .performance-facts__table .blank-cell {
	width: 18px;
}

.zf-pdp .performance-facts__table thead th,
.zf-pdp .performance-facts__table thead td {
	border-top: 0;
	border-bottom: 6px solid var(--zf-f);
	padding-bottom: 12px;
}

.zf-pdp .performance-facts__table .thick-row td {
	border-top: 3px solid var(--zf-f);
}

.zf-pdp .performance-facts__table .thick-end th,
.zf-pdp .performance-facts__table .thick-end td {
	border-bottom: 6px solid var(--zf-f);
}

.zf-pdp .performance-facts__table .small-info {
	font-size: 13px;
	color: #6b6c64;
}

/* Origin & process inside its tab. */
.zf-pdp-panel--process .zf-process {
	padding: 8px 0 0 !important;
	background: transparent;
}

.zf-pdp-tab__intro {
	max-width: 70ch;
}

/* ---- kitchen, worth knowing ------------------------------------------- */

.zf-pdp-uses,
.zf-pdp-worth {
	padding: clamp(56px, 7vw, 96px) 0 0;
}

.zf-pdp-uses__grid,
.zf-pdp-worth__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-pdp-use__media {
	margin: 0 0 16px;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--zf-cream);
}

.zf-pdp-use__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zf-pdp .zf-pdp-use__title,
.zf-pdp .zf-pdp-worth__card h3 {
	margin: 0 0 8px;
	font-family: var(--zf-serif) !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	color: var(--zf-ink);
}

.zf-pdp-use p,
.zf-pdp-worth__card p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
}

.zf-pdp-worth__card {
	padding: 28px 24px;
	border-radius: 18px;
	background: var(--zf-cream);
	border-top: 3px solid var(--zf-g);
}

/* ---- reviews ---------------------------------------------------------- */

.zf-pdp-reviews {
	padding: clamp(56px, 7vw, 96px) 0;
}

.zf-pdp-reviews__grid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.zf-pdp-reviews__grid.is-empty {
	grid-template-columns: minmax(0, 1fr);
}

.zf-pdp-reviews__summary {
	padding: 28px;
	border-radius: 20px;
	background: var(--zf-cream);
}

.zf-pdp-reviews__avg {
	margin: 0;
	font-family: var(--zf-serif);
	font-size: 56px;
	line-height: 1;
	color: var(--zf-ink);
}

.zf-pdp-reviews__count {
	margin: 8px 0 16px;
	font-size: 14px;
	color: #6b6c64;
}

.zf-pdp-reviews__bars {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.zf-pdp-reviews__bars li {
	display: grid;
	grid-template-columns: 28px 1fr 24px;
	gap: 8px;
	align-items: center;
	margin-bottom: 6px;
}

.zf-pdp-reviews__bar {
	height: 6px;
	border-radius: 999px;
	background: #e5dfcf;
	overflow: hidden;
}

.zf-pdp-reviews__bar span {
	display: block;
	height: 100%;
	background: var(--zf-g);
}

.zf-pdp-reviews__list ol {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.zf-pdp-review {
	padding: 24px;
	border: 1px solid var(--zf-rule);
	border-radius: 18px;
}

.zf-pdp-review__text p {
	margin: 10px 0;
	font-size: 16px;
	line-height: 1.7;
}

.zf-pdp-review__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	font-size: 14px;
	color: #6b6c64;
}

.zf-pdp-review__who img {
	border-radius: 50%;
}

.zf-pdp-review__who strong {
	color: var(--zf-ink);
}

.zf-pdp-review__verified {
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(42, 73, 29, 0.08);
	color: var(--zf-f);
	font-size: 12px;
	font-weight: 600;
}

.zf-pdp-reviews__none {
	margin: 0 0 18px;
	font-size: 16px;
}

.zf-pdp-reviews__write summary {
	list-style: none;
	width: max-content;
}

.zf-pdp-reviews__write summary::-webkit-details-marker {
	display: none;
}

.zf-pdp-reviews__write[open] summary {
	margin-bottom: 20px;
}

.zf-pdp #review_form .comment-form p {
	margin: 0 0 14px;
}

.zf-pdp #review_form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zf-ink);
}

.zf-pdp #review_form input[type="text"],
.zf-pdp #review_form input[type="email"],
.zf-pdp #review_form textarea,
.zf-pdp #review_form select {
	width: 100%;
	max-width: 560px;
	padding: 12px 16px;
	border: 1px solid #d9d1be;
	border-radius: 12px;
	font-size: 15px;
}

/* ---- guides ----------------------------------------------------------- */

.zf-pdp-guides {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--zf-cream);
}

.zf-pdp-guides__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-pdp-guides__list a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 28px 24px 56px;
	border-radius: 18px;
	background: #ffffff;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.zf-pdp-guides__list a:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(28, 46, 21, 0.08);
}

.zf-pdp-guides__kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--zf-g-deep);
}

.zf-pdp-guides__title {
	font-family: var(--zf-serif);
	font-size: 21px;
	line-height: 1.25;
	color: var(--zf-ink);
}

.zf-pdp-guides__go {
	position: absolute;
	left: 24px;
	bottom: 22px;
	color: var(--zf-f);
}

/* ---- FAQ -------------------------------------------------------------- */

.zf-pdp-faq {
	padding: clamp(56px, 7vw, 96px) 0;
}

.zf-pdp-faq__body {
	max-width: 880px;
}

.zf-pdp-faq__body .container {
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

.zf-pdp-faq__body .accordion-item {
	border: 0;
	border-bottom: 1px solid var(--zf-rule);
	border-radius: 0 !important;
	background: transparent;
}

.zf-pdp-faq__body .accordion-header {
	margin: 0;
}

.zf-pdp-faq__body .accordion-button {
	padding: 20px 0;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--zf-serif) !important;
	font-size: 19px !important;
	font-weight: 400;
	color: var(--zf-ink) !important;
}

.zf-pdp-faq__body .accordion-body {
	padding: 0 0 20px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--zf-body);
}

.zf-pdp-faq__toggle {
	margin-top: 24px;
}

/* ---- set, pantry, recently viewed ------------------------------------ */

.zf-pdp-set {
	padding: 0 0 clamp(40px, 5vw, 72px);
}

.zf-pdp-set__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 48px;
	align-items: end;
	padding-block: 36px;
	border-radius: 22px;
	background: var(--zf-cream);
}

.zf-pdp-set__items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-pdp-set__items li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.zf-pdp-set__items img {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
}

.zf-pdp-set__items a {
	color: var(--zf-ink);
	text-decoration: none;
	font-weight: 600;
}

.zf-pdp-set__total {
	margin: 0 0 12px;
	font-size: 15px;
}

.zf-pdp-set__total strong {
	font-family: var(--zf-serif);
	font-size: 26px;
	font-weight: 400;
	color: var(--zf-g-deep);
}

.zf-pdp-pantry {
	border-top: 1px solid var(--zf-rule);
}

.zf-pdp-pantry .our-product-area {
	padding-top: clamp(56px, 7vw, 96px) !important;
	text-align: left;
}

.zf-pdp-pantry .heading-left {
	text-align: left;
	max-width: 1116px;
	margin-inline: auto;
}

.zf-pdp-pantry .heading-left .col-lg-5 {
	position: relative;
}

.zf-pdp-pantry .heading-left .text-invisible {
	display: block;
	position: absolute;
	left: -4px;
	top: -58px;
	z-index: 0;
	margin: 0;
	font-family: "Heebo", sans-serif !important;
	font-size: clamp(64px, 7.5vw, 112px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--zf-f);
	opacity: 0.06;
	pointer-events: none;
	white-space: nowrap;
}

.zf-pdp-pantry .heading-left h5,
.zf-pdp-pantry .heading-left h2 {
	position: relative;
	z-index: 1;
}

.zf-pdp-pantry .heading-left h2 {
	font-family: var(--zf-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem) !important;
}

.zf-pdp-recent {
	padding: 0 0 clamp(40px, 5vw, 64px);
}

.zf-pdp-recent__list {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}

.zf-pdp-recent__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	padding: 10px 16px 10px 10px;
	border: 1px solid var(--zf-rule);
	border-radius: 14px;
	color: var(--zf-ink);
	font-size: 14px;
	text-decoration: none;
}

.zf-pdp-recent__list img {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: cover;
}

.zf-pdp-recent__price {
	margin-left: auto;
	color: var(--zf-g-deep);
	white-space: nowrap;
}

/* ---- sticky purchase bar ---------------------------------------------- */

.zf-pdp-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: #ffffff;
	border-top: 1px solid var(--zf-rule);
	box-shadow: 0 -10px 30px rgba(28, 46, 21, 0.08);
	transform: translateY(110%);
	transition: transform 0.3s ease;
}

.zf-pdp-sticky.is-shown {
	transform: none;
}

.zf-pdp-sticky__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 72px;
}

.zf-pdp-sticky__img {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
}

.zf-pdp-sticky__words {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.zf-pdp-sticky__words strong {
	font-family: var(--zf-serif);
	font-size: 17px;
	font-weight: 400;
	color: var(--zf-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zf-pdp-sticky__variant {
	font-size: 13px;
	color: #6b6c64;
}

.zf-pdp-sticky__price {
	font-family: var(--zf-serif);
	font-size: 20px;
	color: var(--zf-g-deep);
	white-space: nowrap;
}

.zf-pdp-sticky__btn {
	min-height: 48px;
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 991px) {
	.zf-pdp-hero__grid,
	.zf-pdp-story__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-uses__grid,
	.zf-pdp-worth__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zf-pdp-guides__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-reviews__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-set__box {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.zf-pdp-wrap {
		padding-inline: 16px;
	}

	.zf-pdp .zf-pdp-buy__form .actions {
		grid-template-columns: auto 1fr;
	}

	.zf-pdp .zf-pdp-buynow {
		grid-column: 1 / -1;
	}

	.zf-pdp .zf-pdp-buy__form .actions:has(.quantity.hidden) {
		grid-template-columns: 1fr;
	}

	.zf-pdp-assure {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-facts__list {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	/* Tabs become an accordion. */
	.zf-pdp-tabs {
		display: none;
	}

	.zf-pdp-acc {
		border-bottom: 1px solid var(--zf-rule);
	}

	.zf-pdp-acc__head {
		display: block;
	}

	.zf-pdp-acc__btn {
		position: relative;
		width: 100%;
		min-height: 56px;
		padding: 16px 36px 16px 0;
		border: 0;
		background: transparent;
		text-align: left;
		font-family: var(--zf-serif);
		font-size: 19px;
		font-weight: 400;
		color: var(--zf-ink);
		cursor: pointer;
	}

	.zf-pdp-acc__btn::after {
		content: "+";
		position: absolute;
		right: 4px;
		top: 50%;
		transform: translateY(-50%);
		font-family: "Heebo", sans-serif;
		font-size: 24px;
		color: var(--zf-g-deep);
	}

	.zf-pdp-acc__btn[aria-expanded="true"]::after {
		content: "–";
	}

	.zf-pdp-panel {
		margin-bottom: 16px;
		padding: 20px;
		border-radius: 16px;
	}

	.zf-pdp-uses__grid,
	.zf-pdp-worth__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-pantry .heading-left .text-invisible {
		display: none;
	}

	.zf-pdp-sticky__img,
	.zf-pdp-sticky__price {
		display: none;
	}

	.zf-pdp-sticky__inner {
		min-height: 64px;
		gap: 12px;
	}

	.zf-pdp-sticky__btn {
		padding: 0 20px !important;
	}

	/* Room at the foot so the bar never sits over the last line. */
	body.single-product .zf-footer {
		padding-bottom: 72px;
	}
}

/* ---- first-look fixes (2026-09-21) ------------------------------------ */

/* Nothing inside the page may widen it: the pantry row's Bootstrap
   margins reached 12px past the edge. */
.zf-pdp {
	overflow-x: clip;
}

/* The price, over the theme's 22px/600 single-product rule. */
.zf-pdp .zf-pdp-buy__price .price,
.zf-pdp .zf-pdp-buy__price .price .amount,
.zf-pdp .single_variation .price,
.zf-pdp .single_variation .price .amount {
	font-family: var(--zf-serif) !important;
	font-size: 30px !important;
	font-weight: 400 !important;
	color: var(--zf-g-deep) !important;
}

.zf-pdp .zf-pdp-buy__price .price del,
.zf-pdp .zf-pdp-buy__price .price del .amount,
.zf-pdp .single_variation .price del .amount {
	font-size: 20px !important;
	color: #9a9a92 !important;
}

.zf-pdp .zf-pdp-buy__price .price ins {
	text-decoration: none;
}

/* The theme's back-to-top button rides above the sticky bar. */
body.single-product .scrollToTop {
	bottom: 96px !important;
}

/* The story photograph fills its frame (the theme sets img height:auto). */
.zf-pdp .zf-pdp-story__media img {
	height: 100% !important;
}

/* The pantry row on the page's own column, grid and heading together. */
.zf-pdp-pantry .container {
	max-width: 1180px;
	padding-inline: 20px;
}

.zf-pdp-pantry .heading-left {
	max-width: none;
}

.zf-pdp-pantry .sui-products-shop {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px clamp(56px, 7vw, 96px);
}

@media (max-width: 767px) {
	.zf-pdp-pantry .container,
	.zf-pdp-pantry .sui-products-shop {
		padding-inline: 16px;
	}
}

/* The site header's capsule floats above 1300px (site.css: top 24px, about
   92px tall) and takes no room, so the page starts below it; narrower, the
   theme puts it back in the flow and nothing is needed. */
@media (min-width: 1301px) {
	body.single-product .zf-pdp {
		padding-top: 124px;
	}
}

/* Logged in, the admin bar pushes the capsule 32px lower. */
@media (min-width: 1301px) {
	body.admin-bar.single-product .zf-pdp {
		padding-top: 156px;
	}
}

/* The label's heavy rules in forest, over the snippet's own black ones. */
.zf-pdp .performance-facts__header {
	border-bottom: 6px solid var(--zf-f) !important;
}

.zf-pdp .performance-facts__table .thick-end th,
.zf-pdp .performance-facts__table .thick-end td,
.zf-pdp .performance-facts__table tbody tr:last-child th,
.zf-pdp .performance-facts__table tbody tr:last-child td {
	border-color: var(--zf-f) !important;
}

.zf-pdp .performance-facts__table tbody tr:last-child th,
.zf-pdp .performance-facts__table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.zf-pdp .performance-facts__table .thick-end th,
.zf-pdp .performance-facts__table .thick-end td {
	border-bottom: 6px solid var(--zf-f) !important;
}

/* A kitchen card without a photo shows a mark instead. */
.zf-pdp-use__mark {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 0 16px;
	border-radius: 50%;
	background: var(--zf-cream);
	color: var(--zf-f);
	box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px rgba(212, 175, 55, 0.4);
}

.zf-pdp-use__mark .zf-pdp-icon {
	width: 32px;
	height: 32px;
}

.zf-pdp-use:not(:has(.zf-pdp-use__media)) {
	padding: 26px 22px;
	border: 1px solid var(--zf-rule);
	border-radius: 18px;
}

/* Inside a tab, the process component stays inside the card: its wrapper
   is built to break out to the full width of the page. */
.zf-pdp-panel .sui-farmi,
.zf-pdp-panel .sui-farmi.sui-farmi--solo {
	margin-inline: 0 !important;
	width: auto !important;
	background: transparent !important;
}

.zf-pdp-panel .zf-process,
.zf-pdp-panel .zf-process .zf-shell {
	padding-inline: 0 !important;
	background: transparent !important;
}

.zf-pdp-panel .zf-process__mark,
.zf-pdp-panel .zf-process__arrow {
	box-shadow: 0 0 0 8px #ffffff;
}

/* Card rows take only the columns their cards need. */
.zf-pdp-uses__grid,
.zf-pdp-worth__grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ---- round 3 (2026-09-21) ---------------------------------------------- */

/* Section headings in the homepage's form: eyebrow and title on the left
   over one great faint word (the categories "Our range" heading), and a
   line or button on the right. The word is darker than the homepage first
   had it; at 6% it vanished on a laptop screen. */
.zf-pdp-head--range {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 16px 8%;
	align-items: end;
	max-width: none;
	margin-bottom: clamp(28px, 3.4vw, 48px);
	padding-top: clamp(28px, 3vw, 44px);
}

.zf-pdp-head__left {
	position: relative;
	grid-column: 1;
}

.zf-pdp-head__right {
	grid-column: 2;
	justify-self: start;
	padding-bottom: 6px;
}

.zf-pdp-head__mark {
	position: absolute;
	left: -4px;
	top: calc(-1 * clamp(28px, 3vw, 44px) - 6px);
	z-index: 0;
	font-family: "Heebo", sans-serif !important;
	font-size: clamp(64px, 7.5vw, 112px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--zf-f);
	opacity: 0.1;
	pointer-events: none;
}

.zf-pdp-head--range .zf-pdp-eyebrow,
.zf-pdp-head--range .zf-pdp-h2 {
	position: relative;
	z-index: 1;
}

.zf-pdp-head--range .zf-pdp-eyebrow {
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--zf-g);
	margin-bottom: 14px;
}

.zf-pdp-head--range .zf-pdp-h2 {
	margin: 0;
}

/* Grey or cream sections keep the word readable against their ground. */
.zf-pdp-guides .zf-pdp-head__mark {
	opacity: 0.12;
}

@media (max-width: 767px) {
	.zf-pdp-head--range {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 0;
	}

	.zf-pdp-head__right {
		grid-column: 1;
	}

	.zf-pdp-head__mark {
		display: none;
	}
}

/* The pantry row's faint word, the same weight. */
.zf-pdp-pantry .heading-left .text-invisible {
	opacity: 0.1;
}

/* FAQ: open rows, no box — a rule under each question, a gold marker. */
.zf-pdp-faq__body .accordion {
	--bs-accordion-border-width: 0;
	--bs-accordion-border-color: transparent;
	--bs-accordion-bg: transparent;
	border: 0 !important;
	border-top: 1px solid var(--zf-rule) !important;
}

.zf-pdp-faq__body .accordion-item {
	border: 0 !important;
	border-bottom: 1px solid var(--zf-rule) !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.zf-pdp-faq__body .accordion-button {
	padding: 22px 48px 22px 0 !important;
	border: 0 !important;
}

.zf-pdp-faq__body .accordion-button::after {
	content: "+" !important;
	position: absolute;
	right: 4px;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: 50%;
	background: var(--zf-cream) !important;
	color: var(--zf-g-deep);
	font-family: "Heebo", sans-serif;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
	transform: none !important;
}

.zf-pdp-faq__body .accordion-button:not(.collapsed)::after {
	content: "–" !important;
	background: var(--zf-f) !important;
	color: #ffffff;
}

.zf-pdp-faq__body .accordion-button:hover {
	color: var(--zf-f) !important;
}

.zf-pdp-faq__body .accordion-body {
	padding: 0 48px 22px 0 !important;
}

/* Buy box: a quieter name, a stronger line under it. */
.zf-pdp .zf-pdp-buy__title {
	font-size: clamp(1.75rem, 1.3rem + 1.1vw, 2.35rem) !important;
	line-height: 1.12;
}

.zf-pdp-buy__subtitle {
	margin: 2px 0 14px;
	font-family: var(--zf-serif);
	font-size: clamp(19px, 1rem + 0.35vw, 22px);
	font-style: italic;
	line-height: 1.35;
	color: var(--zf-g-deep);
}

/* The name one step quieter again: the subtitle is the line that sells. */
.zf-pdp .zf-pdp-buy__title {
	font-size: clamp(1.6rem, 1.25rem + 0.7vw, 2rem) !important;
}

/* A kitchen card without a photo: the same square as a photo, holding the
   homepage process mark (white disc, gold ring, forest drawing) on cream,
   so a row mixing photos and marks lines up. */
.zf-pdp-use__media--mark {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin: 0 0 16px;
	border-radius: 18px;
	background: #f6f1e3;
}

.zf-pdp-use__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #ffffff;
	color: var(--zf-f);
	box-shadow: 0 0 0 8px #f6f1e3, 0 0 0 9px rgba(212, 175, 55, 0.5);
}

.zf-pdp-use__ring .zf-pdp-icon {
	width: 50%;
	height: 50%;
	stroke-width: 1.6;
}

.zf-pdp-use:hover .zf-pdp-use__ring {
	background: var(--zf-f);
	color: #f6f1e3;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Every card is now photo-or-mark over words; no frame needed. */
.zf-pdp-use:not(:has(.zf-pdp-use__media)) {
	padding: 0;
	border: 0;
}

.zf-pdp-use__ring .zf-pdp-icon {
	width: 62%;
	height: 62%;
}

/* On a phone the kitchen cards go two by two, so four uses are not four
   screen-tall squares. */
@media (max-width: 767px) {
	.zf-pdp-uses__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 14px;
	}

	.zf-pdp .zf-pdp-use__title {
		font-size: 17px !important;
	}

	.zf-pdp-use p {
		font-size: 14px;
	}
}

/* ---- How we make [product]: its own section ------------------------------ */

.zf-pdp-process {
	padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 56px);
	background: #ffffff;
}

.zf-pdp-process .sui-farmi,
.zf-pdp-process .sui-farmi.sui-farmi--solo {
	margin-inline: 0 !important;
	width: auto !important;
	background: transparent !important;
}

.zf-pdp-process .zf-process,
.zf-pdp-process .zf-process .zf-shell {
	padding: 0 !important;
	background: transparent !important;
}

.zf-pdp-head__intro {
	margin: 0;
	max-width: 52ch;
	font-size: 17px;
	line-height: 1.7;
	color: var(--zf-body);
}

/* ---- FAQ: the full column, and no frame round an open answer ------------ */

.zf-pdp-faq__body {
	max-width: none;
}

.zf-pdp-faq__body .accordion-collapse,
.zf-pdp-faq__body .accordion-body,
.zf-pdp-faq__body .collapse,
.zf-pdp-faq__body .collapsing {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.zf-pdp-faq__body .accordion-body {
	max-width: 90ch;
}

/* ---- delivery, payment, help: one line above the quick facts ---------- */

.zf-pdp-assure-bar {
	border-top: 1px solid var(--zf-rule);
	background: #ffffff;
}

.zf-pdp-assure-bar__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 0;
	margin: 0 auto;
	padding-block: 16px;
	list-style: none;
}

.zf-pdp-assure-bar__list li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 clamp(18px, 2.4vw, 36px);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--zf-ink);
	white-space: nowrap;
}

.zf-pdp-assure-bar__list li + li {
	border-left: 1px solid rgba(212, 175, 55, 0.55);
}

.zf-pdp-assure-bar .zf-pdp-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--zf-f);
}

.zf-pdp-assure-bar a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 175, 55, 0.6);
}

.zf-pdp-assure-bar a:hover {
	color: var(--zf-f);
	border-color: var(--zf-f);
}

@media (max-width: 767px) {
	.zf-pdp-assure-bar__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding-block: 16px;
	}

	.zf-pdp-assure-bar__list li {
		padding: 0;
		white-space: normal;
		font-size: 14px;
	}

	.zf-pdp-assure-bar__list li + li {
		border-left: 0;
	}
}

/* ---- one vertical rhythm (2026-09-21) ------------------------------------

   Measured before this: gaps between sections' content ran from 44px to
   284px. Every section had its own padding (8 to 100px), the headings'
   faint words added another 28-44px on top, and white sections next to
   white sections each kept their full padding.

   Now: one section spacing (--zf-sec, 76px at 1440), the faint word sits
   inside that spacing as it does on the homepage, and a white section that
   follows a white section keeps only a small top gap. */

.zf-pdp {
	--zf-sec: clamp(52px, 2.6rem + 2.2vw, 76px);
}

.zf-pdp-story,
.zf-pdp-info,
.zf-pdp-process,
.zf-pdp-uses,
.zf-pdp-worth,
.zf-pdp-reviews,
.zf-pdp-guides,
.zf-pdp-faq {
	padding: var(--zf-sec) 0 !important;
}

/* White after white: the faint word of the next heading fills the gap. */
.zf-pdp-process + .zf-pdp-uses,
.zf-pdp-process + .zf-pdp-worth,
.zf-pdp-process + .zf-pdp-reviews,
.zf-pdp-uses + .zf-pdp-worth,
.zf-pdp-uses + .zf-pdp-reviews,
.zf-pdp-worth + .zf-pdp-reviews {
	padding-top: 28px !important;
}

/* The faint word inside the section's own spacing, as on the homepage. */
.zf-pdp-head--range {
	padding-top: 0;
}

.zf-pdp-head__mark {
	top: -58px;
}

@media (max-width: 767px) {
	.zf-pdp-process + .zf-pdp-uses,
	.zf-pdp-process + .zf-pdp-worth,
	.zf-pdp-uses + .zf-pdp-worth,
	.zf-pdp-worth + .zf-pdp-reviews {
		padding-top: 8px !important;
	}
}

/* The buy area sits close to its delivery line. */
.zf-pdp-hero {
	padding-bottom: 40px;
}

/* The pantry row on the same spacing. */
.zf-pdp-pantry .our-product-area {
	padding-top: var(--zf-sec) !important;
}

.zf-pdp-pantry .sui-products-shop {
	padding-bottom: var(--zf-sec);
}

/* ---- price follows size and quantity ------------------------------------ */

/* The chosen size's price now shows in the main price; WooCommerce's copy
   inside the form would repeat it. Stock stays. */
.zf-pdp .single_variation .woocommerce-variation-price {
	display: none;
}

.zf-pdp .zf-pdp-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}

.zf-pdp .zf-pdp-total__each {
	font-family: "Heebo", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #6b6c64;
}

/* ---- store reviews from Google and Facebook ----------------------------- */

.zf-pdp-greviews {
	padding: var(--zf-sec, 76px) 0 !important;
	background: var(--zf-ivory);
}

.zf-pdp-gsum {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(28, 46, 21, 0.05);
}

.zf-pdp-g {
	flex: none;
	width: 40px;
	height: 40px;
}

.zf-pdp-gsum p {
	margin: 0;
}

.zf-pdp-gsum__rating strong {
	font-family: var(--zf-serif);
	font-size: 28px;
	font-weight: 400;
	color: var(--zf-ink);
	margin-right: 6px;
}

.zf-pdp-gsum__count {
	font-size: 14px;
	color: #6b6c64;
	margin-bottom: 4px !important;
}

.zf-pdp-stars {
	color: #f4b400;
	letter-spacing: 0.08em;
	font-size: 16px;
}

.zf-pdp-greviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-pdp-greview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	border-radius: 18px;
	background: #ffffff;
	border-top: 3px solid var(--zf-g);
}

.zf-pdp-greview__quote {
	margin: 0;
	padding: 0;
	border: 0;
	flex: 1;
}

.zf-pdp-greview__quote p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--zf-body);
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zf-pdp-greview__who {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 14px;
}

.zf-pdp-greview__who strong {
	font-family: var(--zf-serif);
	font-size: 17px;
	font-weight: 400;
	color: var(--zf-ink);
}

.zf-pdp-greview__who span {
	color: #6b6c64;
	font-size: 13px;
}

/* The theme dresses every blockquote (grey box, large quote mark); a
   review card is not that. */
.zf-pdp .zf-pdp-greview__quote {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-style: normal;
}

.zf-pdp .zf-pdp-greview__quote::before,
.zf-pdp .zf-pdp-greview__quote::after {
	content: none !important;
	display: none !important;
}

.zf-pdp .zf-pdp-greview__quote p {
	padding: 0 !important;
	font-family: "Heebo", sans-serif !important;
	font-size: 16px !important;
	font-style: normal !important;
}

.zf-pdp .zf-pdp-greview__who strong {
	font-family: var(--zf-serif) !important;
}

/* ---- a livelier buy box (2026-09-21) -------------------------------------- */

/* Price: the total, what it was, then a line of savings and value. */
.zf-pdp .zf-pdp-total__was {
	font-family: var(--zf-serif);
	font-size: 20px !important;
	color: #9a9a92 !important;
}

.zf-pdp-price-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -8px 0 18px;
}

.zf-pdp-save {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--zf-f);
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.zf-pdp-per {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--zf-cream);
	color: var(--zf-ink);
	font-size: 12.5px;
	font-weight: 600;
}

/* Size chips: the size, and under it that size's price. */
.zf-pdp .zf-has-chip-prices .cfvsw-swatches-option {
	padding: 10px 18px !important;
	border-radius: 14px !important;
	min-width: 96px !important;
	text-align: center;
}

.zf-pdp .cfvsw-swatch-inner {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.2;
}

.zf-chip-price {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--zf-g-deep);
}

.zf-pdp .cfvsw-swatches-option.cfvsw-selected-swatch .zf-chip-price {
	color: rgba(255, 255, 255, 0.85);
}

.zf-pdp .cfvsw-swatches-option:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(28, 46, 21, 0.08);
}

/* "Clear" stays for keyboards and screen readers, not as a stray word. */
.zf-pdp .reset_variations {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Quantity: − value + in one pill. */
.zf-pdp .zf-qty {
	display: inline-flex;
	align-items: center;
	height: 56px;
	border: 1px solid #d9d1be;
	border-radius: 999px;
	background: #ffffff;
	overflow: hidden;
}

.zf-pdp .zf-qty .qty {
	width: 40px !important;
	height: 54px !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	text-align: center;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--zf-ink);
	-moz-appearance: textfield;
	background: transparent;
}

.zf-pdp .zf-qty .qty::-webkit-outer-spin-button,
.zf-pdp .zf-qty .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.zf-pdp .zf-qty__btn {
	width: 40px;
	height: 54px;
	border: 0;
	background: transparent;
	color: var(--zf-f);
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
}

.zf-pdp .zf-qty__btn:hover {
	background: var(--zf-cream);
}

/* The two buttons carry an icon each. */
.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button,
.zf-pdp .zf-pdp-buynow,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.zf-pdp .zf-pdp-buy__form button svg {
	width: 19px;
	height: 19px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.zf-pdp .zf-pdp-buynow svg {
	fill: currentColor;
	stroke: none;
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button:not(.disabled):hover,
.zf-pdp .zf-pdp-buynow:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(28, 46, 21, 0.18);
}

/* The theme's own chevron buttons sat on top of the stepper and caught the
   clicks (changing the number without telling anything, so the price
   never followed). The stepper replaces them here. */
.zf-pdp .zf-pdp-buy__form .qut-btn,
.zf-pdp .zf-pdp-buy__form .quantity-plus,
.zf-pdp .zf-pdp-buy__form .quantity-minus {
	display: none !important;
}

/* Button labels stay on one line; where the row is too narrow for the
   stepper and both buttons, Buy now takes the full row under them. */
.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button,
.zf-pdp .zf-pdp-buynow {
	white-space: nowrap;
	letter-spacing: 0.04em;
}

@media (max-width: 1280px) {
	.zf-pdp .zf-pdp-buy__form .actions {
		grid-template-columns: auto 1fr;
	}

	.zf-pdp .zf-pdp-buynow {
		grid-column: 1 / -1;
	}
}

/* ---- the olive argument: the centre of an olive product's page ---------
   "We didn't discover olives when we decided to sell olive oil. The
   knowledge came first. The product came later." On the hero's forest,
   with the research years laid out before the product year. */

.zf-pdp-olive {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 8vw, 120px) 0 !important;
	background:
		radial-gradient(ellipse 55% 70% at 90% 0%, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0) 70%),
		linear-gradient(180deg, #25401c 0%, #1c2e15 100%);
	color: rgba(255, 255, 255, 0.8);
}

.zf-pdp-olive__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.zf-pdp-olive .zf-pdp-eyebrow {
	margin-bottom: 18px;
}

.zf-pdp .zf-pdp-olive__title {
	margin: 0 0 14px;
	font-family: var(--zf-serif) !important;
	font-size: clamp(2rem, 1.3rem + 2vw, 3.3rem) !important;
	font-weight: 400 !important;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #ffffff !important;
	text-wrap: balance;
}

.zf-pdp-olive__kicker {
	margin: 0 0 26px;
	font-family: var(--zf-serif);
	font-style: italic;
	font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
	line-height: 1.25;
	color: var(--zf-amber, #ffbf00) !important;
}

.zf-pdp-olive__body {
	max-width: 58ch;
	margin: 0 0 14px;
	font-size: 17px !important;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.8) !important;
}

.zf-pdp-olive__credit {
	max-width: 58ch;
	margin: 0 0 24px;
	padding-left: 14px;
	border-left: 2px solid var(--zf-g);
	font-size: 14px !important;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6) !important;
}

.zf-pdp-olive__cta {
	display: inline-flex;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--zf-g);
	color: var(--zf-f-deep) !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

.zf-pdp-olive__cta:hover {
	background: #ffffff;
}

.zf-pdp-olive__media {
	position: relative;
	margin: 0;
	border-radius: 24px;
	overflow: visible;
}

.zf-pdp-olive__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	height: auto !important;
}

.zf-pdp-olive__stat {
	position: absolute;
	left: -28px;
	bottom: 28px;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 260px;
	padding: 18px 22px;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.zf-pdp-olive__stat strong {
	font-family: var(--zf-serif);
	font-size: 54px;
	font-weight: 400;
	line-height: 1;
	color: var(--zf-f);
}

.zf-pdp-olive__stat span {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--zf-ink);
}

/* The line: four research years, then the product year. */
.zf-pdp-olive__line {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 1.25fr);
	gap: 0 clamp(20px, 3vw, 40px);
	margin-top: clamp(48px, 6vw, 88px);
}

.zf-pdp-olive__phase-label {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.zf-pdp-olive__phase--product .zf-pdp-olive__phase-label {
	color: var(--zf-amber, #ffbf00);
}

.zf-pdp-olive__phase ol {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 26px 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.zf-pdp-olive__phase--product ol {
	border-top: 2px solid var(--zf-amber, #ffbf00);
}

.zf-pdp-olive__mile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zf-pdp-olive__mile::before {
	content: "";
	position: absolute;
	top: -33px;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #1c2e15;
	border: 2px solid rgba(255, 255, 255, 0.7);
}

.zf-pdp-olive__mile.is-product::before {
	top: -36px;
	width: 18px;
	height: 18px;
	border: 0;
	background: var(--zf-amber, #ffbf00);
	box-shadow: 0 0 0 6px rgba(255, 191, 0, 0.2);
}

.zf-pdp-olive__mile.is-this::before {
	border-color: var(--zf-amber, #ffbf00);
	background: var(--zf-amber, #ffbf00);
}

.zf-pdp-olive__year {
	font-family: var(--zf-serif);
	font-size: 28px;
	line-height: 1;
	color: #ffffff;
}

.zf-pdp-olive__mile.is-product .zf-pdp-olive__year {
	color: var(--zf-amber, #ffbf00);
}

.zf-pdp-olive__mile strong {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}

.zf-pdp-olive__text {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.65);
}

.zf-pdp-olive__this {
	align-self: flex-start;
	margin-top: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--zf-amber, #ffbf00);
	color: var(--zf-f-deep);
	font-size: 11.5px;
	font-weight: 700;
}

@media (max-width: 991px) {
	.zf-pdp-olive__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-olive__media {
		max-width: 520px;
	}

	.zf-pdp-olive__media img {
		aspect-ratio: 4 / 3;
	}

	/* A standing photograph (a portrait) keeps its own shape on a phone:
	   4/3 would cut the hair and the chin (2026-10-05). */
	.zf-pdp-olive__media--portrait img {
		aspect-ratio: 4 / 5;
	}

	.zf-pdp-olive__stat {
		left: 16px;
		bottom: -24px;
	}

	.zf-pdp-olive__line {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		margin-top: 64px;
	}

	.zf-pdp-olive__phase ol {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 22px;
		padding: 0 0 0 26px;
		border-top: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.25);
	}

	.zf-pdp-olive__phase--product ol {
		border-left: 2px solid var(--zf-amber, #ffbf00);
	}

	.zf-pdp-olive__mile::before {
		top: 6px;
		left: -33px;
	}

	.zf-pdp-olive__mile.is-product::before {
		top: 4px;
		left: -36px;
	}
}

/* site.css sets every p and span in Heebo with !important; these are the
   argument's display lines and take the serif. */
.zf-pdp .zf-pdp-olive__kicker,
.zf-pdp .zf-pdp-olive__year,
.zf-pdp .zf-pdp-olive__stat strong {
	font-family: var(--zf-serif) !important;
}

.zf-pdp .zf-pdp-olive__kicker {
	font-style: italic !important;
	font-weight: 400 !important;
}

/* ---- information architecture, round 5 (Atif, 2026-09-21) --------------
   Guides leave the page for one quiet line under the product information;
   faint words stay only on Process, Reviews and Pantry; the olive argument
   gets more room around it. */

.zf-pdp-guideline {
	margin: 22px 0 0;
	font-size: 15px;
	color: #5a5b53;
}

.zf-pdp-guideline a {
	margin-left: 6px;
	font-weight: 600;
	color: var(--zf-f);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 175, 55, 0.7);
}

.zf-pdp-guideline a:hover {
	color: var(--zf-g-deep);
	border-color: var(--zf-g-deep);
}

/* Worth knowing now follows the tabs, and Process follows it: white after
   white keeps a short gap, as elsewhere. */
.zf-pdp-worth + .zf-pdp-process {
	padding-top: 28px !important;
}

@media (max-width: 767px) {
	.zf-pdp-worth + .zf-pdp-process {
		padding-top: 8px !important;
	}
}

/* The olive argument: the page's identity, given room. */
.zf-pdp-olive {
	padding: clamp(96px, 11vw, 168px) 0 !important;
}

.zf-pdp-olive__line {
	margin-top: clamp(72px, 8vw, 120px);
}

.zf-pdp .zf-pdp-olive__title {
	max-width: 16ch;
}

.zf-pdp-olive__body {
	margin-bottom: 18px;
}

/* ---- finishing, round 6 (Atif, 2026-09-21) -------------------------------- */

/* Information → Good to know → Process: about 18% closer. */
.zf-pdp-info {
	padding-bottom: calc(var(--zf-sec) * 0.8) !important;
}

.zf-pdp-worth {
	padding-top: calc(var(--zf-sec) * 0.8) !important;
	padding-bottom: calc(var(--zf-sec) * 0.8) !important;
}

.zf-pdp-worth + .zf-pdp-process {
	padding-top: 20px !important;
}

/* A heading's one-line lead, under the title. */
.zf-pdp-head__lead {
	position: relative;
	z-index: 1;
	margin: 12px 0 0;
	max-width: 60ch;
	font-size: 17px;
	line-height: 1.6;
	color: #5a5b53;
}

/* Kitchen cards: one structure, one height. The square (photo or mark),
   then the words, then the link pinned to the foot of every card. */
.zf-pdp-uses__grid {
	align-items: stretch;
}

.zf-pdp-use {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.zf-pdp-use__media,
.zf-pdp-use__media--mark {
	flex: none;
	margin: 0 0 16px !important;
	aspect-ratio: 1;
	border-radius: 18px;
	overflow: hidden;
}

.zf-pdp-use p {
	flex: 1 0 auto;
}

.zf-pdp-use .zf-pdp-link {
	align-self: flex-start;
	margin-top: 8px;
}

/* ---- the buy box: size → quantity → one dominant button ---------------- */

.zf-pdp .zf-pdp-buy__form .actions,
.zf-pdp .zf-pdp-buy__form .actions:has(.quantity.hidden) {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 12px !important;
}

.zf-pdp .zf-pdp-buynow {
	grid-column: auto !important;
}

.zf-pdp .zf-pdp-buy__form .product-quantity {
	display: flex !important;
	align-items: center;
	gap: 16px;
	margin: 4px 0 10px !important;
}

.zf-qty-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zf-ink);
}

.zf-pdp .zf-qty {
	height: 48px;
}

.zf-pdp .zf-qty .qty,
.zf-pdp .zf-qty__btn {
	height: 46px !important;
}

/* The one action that matters, in the brand's forest. */
.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"]:not(.zf-pdp-buynow) {
	min-height: 60px !important;
	border: 0 !important;
	background: var(--zf-f) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	letter-spacing: 0.08em;
	box-shadow: 0 10px 24px rgba(42, 73, 29, 0.22);
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button:hover,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"]:not(.zf-pdp-buynow):hover {
	background: var(--zf-f-deep) !important;
	color: #ffffff !important;
}

.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button.disabled {
	opacity: 1;
	background: #8fa086 !important;
	box-shadow: none;
}

/* The second way to buy, quieter. */
.zf-pdp .zf-pdp-buynow {
	min-height: 48px !important;
	border: 1px solid #d9d1be !important;
	background: #ffffff !important;
	color: var(--zf-f) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	box-shadow: none !important;
}

.zf-pdp .zf-pdp-buynow:hover {
	border-color: var(--zf-f) !important;
	background: var(--zf-cream) !important;
	transform: none !important;
}

.zf-pdp .zf-pdp-buynow svg {
	width: 15px;
	height: 15px;
}

/* WhatsApp, quieter still: a centred line under the buttons. */
.zf-pdp .whatsapp-buy-now-button {
	display: flex !important;
	justify-content: center;
	width: 100%;
	margin: 10px 0 0 !important;
	font-size: 15px !important;
	opacity: 0.85;
}

.zf-pdp .whatsapp-buy-now-button img {
	width: 18px !important;
	height: 18px;
}

/* The dominant button, anchored on the buy box's id: site.css's inner-page
   button rule (body:not(.home) …) out-ranked the class selectors above and
   painted it in the accent. */
#zf-buy .single_add_to_cart_button,
#zf-buy form.cart button[name="add-to-cart"]:not(.zf-pdp-buynow) {
	border: 0 !important;
	background: var(--zf-f) !important;
	color: #ffffff !important;
}

#zf-buy .single_add_to_cart_button:hover,
#zf-buy form.cart button[name="add-to-cart"]:not(.zf-pdp-buynow):hover {
	background: var(--zf-f-deep) !important;
	color: #ffffff !important;
}

#zf-buy .single_add_to_cart_button.disabled {
	background: #8fa086 !important;
	color: #ffffff !important;
}

#zf-buy .zf-pdp-buynow {
	border: 1px solid #d9d1be !important;
	background: #ffffff !important;
	color: var(--zf-f) !important;
}

#zf-buy .zf-pdp-buynow:hover {
	border-color: var(--zf-f) !important;
	background: var(--zf-cream) !important;
}

/* The process on film or in a photograph, under the steps. */
.zf-pdp-process__media {
	max-width: 960px;
	margin: clamp(32px, 4vw, 56px) auto 0;
	border-radius: 22px;
	overflow: hidden;
	background: var(--zf-cream);
	aspect-ratio: 16 / 9;
}

.zf-pdp-process__media img,
.zf-pdp-process__media video {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/* ---- one heading system (Atif, 2026-09-21) --------------------------------

   The faint word + amber eyebrow + serif title is Zuriyat's section heading
   and is not to be redesigned. PROCESS and REVIEWS already share it; the
   pantry row came from the homepage's products component and differed in
   five places (13px eyebrow, #232323 title, its line height and tracking,
   and the faint word 15px left of and 9px above where it sits elsewhere).
   Here it takes the same values. The space under every heading is the
   same too: 48px to the content at 1440, 28px on a phone. */

.zf-pdp-pantry .heading-left h5 {
	display: block;
	margin: 0 0 14px;
	line-height: 1.8;
}

.zf-pdp-pantry .heading-left h2 {
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--zf-ink);
}

.zf-pdp-pantry .heading-left .text-invisible {
	left: 11px; /* the column's 15px padding, less the 4px the word hangs */
	top: -58px;
	letter-spacing: 0.02em;
}

/* Under the heading: the heading's own margin, and nothing added below it. */
.zf-pdp-pantry .our-product-area {
	padding-bottom: 0 !important;
}

.zf-pdp-pantry .our-product-area .container {
	padding-bottom: 0 !important;
}

.zf-pdp-pantry .heading-left {
	margin-bottom: clamp(28px, 3.4vw, 48px) !important;
}

/* The steps' own top padding (room for the flow line on the homepage)
   sat on top of the heading's margin. */
.zf-pdp-process .zf-process__steps {
	margin-top: calc(-1 * var(--zf-pad));
}

/* ---- the main photo, whole ------------------------------------------------

   Shown as uploaded (not WooCommerce's square crop) and contained on a cream
   mat, so the product is never cut by the frame or its rounded corners,
   whatever the photo's shape. */

.zf-pdp .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 2.4vw, 28px);
	background: var(--zf-cream);
}

.zf-pdp .woocommerce-product-gallery__image > a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.zf-pdp .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	border-radius: 14px;
}

/* ---- a product's own signature: chia's "Why it belongs" (2026-09-21) -------

   The olive story is not pasted onto other products. Chia gets its own
   section in the page's language: the standard heading (no faint word,
   which stays on PROCESS / REVIEWS / PANTRY only), one line of copy, the
   label's own figures as four cream cards, and its photographs, the pack
   large with the seeds beside it. */

.zf-pdp-why {
	padding: var(--zf-sec, 76px) 0;
	background: #ffffff;
}

.zf-pdp-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.zf-pdp-why .zf-pdp-head {
	margin-bottom: 18px;
}

.zf-pdp-why__body {
	max-width: 52ch;
	margin: 0 0 clamp(24px, 3vw, 32px);
	font-size: 17px;
	line-height: 1.7;
	color: #4a4b43;
}

.zf-pdp-why__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zf-pdp-why__points li {
	margin: 0;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--zf-cream);
	border-top: 3px solid var(--zf-g);
}

.zf-pdp-why__points strong {
	display: block;
	font-family: var(--zf-serif) !important;
	font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--zf-f);
}

.zf-pdp-why__points span {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: #5a5b53;
}

.zf-pdp-why__note {
	margin: 14px 0 0;
	font-size: 13px;
	color: #85867d;
}

/* The pack large, the seeds and the bowl beside it. */
.zf-pdp-why__media {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
}

.zf-pdp-why__img {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--zf-cream);
}

.zf-pdp-why__img img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.zf-pdp-why__img--1 {
	grid-row: 1 / span 2;
	aspect-ratio: 4 / 5;
}

.zf-pdp-why__media--1 {
	grid-template-columns: 1fr;
}

.zf-pdp-why__media--1 .zf-pdp-why__img--1 {
	grid-row: auto;
}

@media (max-width: 991px) {
	.zf-pdp-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zf-pdp-why__media {
		order: -1;
		max-width: 560px;
	}
}

@media (max-width: 480px) {
	.zf-pdp-why__points {
		gap: 10px;
	}

	.zf-pdp-why__points li {
		padding: 14px 16px;
	}
}

/* In this narrower column the heading keeps its own type, one column wide
   (its two-column grid broke "Small seed. A / lot going on."). */
.zf-pdp-why .zf-pdp-head--range {
	grid-template-columns: minmax(0, 1fr);
}

/* Two photographs: the pack, and the seeds beside its lower half. */
.zf-pdp-why__media--2 {
	grid-template-rows: 1fr auto;
	align-items: end;
}

.zf-pdp-why__media--2 .zf-pdp-why__img--2 {
	grid-row: 2;
	aspect-ratio: 1 / 1;
	background: #ffffff;
}

/* The researcher's name in the olive credit links to his page. */
.zf-pdp-olive__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--zf-amber, #ffbf00);
	text-underline-offset: 3px;
}

.zf-pdp-olive__credit a:hover {
	color: var(--zf-amber, #ffbf00);
}

/* The researcher the olive block credits, beside the credit line itself
   (Atif, 2026-10-05). Small, on the dark panel, never in the gallery: it
   is a research credit, not an endorsement. */
.zf-pdp-olive__credit-person {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 24px;
}
.zf-pdp-olive__credit-person img {
	width: 56px;
	height: 70px;
	object-fit: cover;
	object-position: center 15%;
	border-radius: 8px;
	flex: 0 0 auto;
}
.zf-pdp-olive__credit-person .zf-pdp-olive__credit {
	margin: 0;
}