/**
 * 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;
}

/* 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;
}

/* ---- the three buy actions, as one family (Atif, 2026-10-14) -------------

   Add to cart was the only one that looked built: Buy now sat in a pale
   putty outline, and WhatsApp — markup from a database snippet, with its
   own inline font size and a 50px icon — read as a loose line of Urdu
   under the buttons. Same shape, same width, three weights: forest, then
   outline, then quiet. */

.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) {
	box-shadow: 0 1px 2px rgba(28, 46, 21, 0.18);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.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 {
	box-shadow: 0 4px 14px rgba(28, 46, 21, 0.22);
}

/* Second: the same pill, drawn rather than filled. */
#zf-buy .zf-pdp-buynow {
	min-height: 54px !important;
	border: 1.5px solid rgba(42, 73, 29, 0.3) !important;
	background: #ffffff !important;
	color: var(--zf-f) !important;
	font-size: 13.5px !important;
	transition: background-color .15s ease, border-color .15s ease;
}

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

/* Third: WhatsApp, a full-width quiet pill instead of a stray line. */
.zf-pdp .whatsapp-buy-now-button {
	display: flex !important;
	width: 100%;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* It sits outside the buttons' grid, so it keeps that grid's gap itself
	   rather than touching Buy now (Atif, 14 Oct 2026). */
	margin: 12px 0 0 !important;
	padding: 0 18px !important;
	border: 1px solid #dfe3d6 !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: var(--zf-f) !important;
	font-size: 17px !important;
	line-height: 1.6;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease;
}

.zf-pdp .whatsapp-buy-now-button:hover,
.zf-pdp .whatsapp-buy-now-button:focus-visible {
	border-color: #25d366 !important;
	background: #f4fbf6 !important;
}

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

/* Every action says where the keyboard is. */
.zf-pdp .zf-pdp-buy__form .single_add_to_cart_button:focus-visible,
.zf-pdp .zf-pdp-buy__form button[name="add-to-cart"]:focus-visible,
#zf-buy .zf-pdp-buynow:focus-visible,
.zf-pdp .whatsapp-buy-now-button:focus-visible {
	outline: 2px solid var(--zf-f);
	outline-offset: 3px;
}

@media (max-width: 575px) {

	.zf-pdp .whatsapp-buy-now-button {
		font-size: 16px !important;
	}
}


/* The WhatsApp button now comes from the plugin for every product, so the
   icon is an inline svg rather than an uploaded image (14 Oct 2026). */
.zf-pdp .whatsapp-buy-now-button .zf-wa__icon {
	flex: none;
	width: 21px;
	height: 21px;
}

/* How much food the quantity adds up to, and what the jar rule takes off. */
.zf-pdp-weight,
.zf-pdp-jarsoff {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}

.zf-pdp-weight {
	background: var(--zf-cream);
	color: var(--zf-ink);
}

.zf-pdp-jarsoff {
	background: rgba(42, 73, 29, 0.08);
	color: var(--zf-f);
}

/* ---- the multi-jar offer, said plainly in the buy box --------------------

   A quiet pill was not carrying it (Atif, 14 Oct 2026): it is the reason to
   take more than one jar, so it gets a card of its own under the buttons —
   the page's ivory, an amber edge, the amounts in the forest. */

.zf-jar-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	width: 100%;
	margin: 14px 0 0 !important;
	padding: 13px 16px;
	border: 1px solid var(--zf-rule);
	border-left: 4px solid var(--zf-amber);
	border-radius: 14px;
	background: var(--zf-ivory);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--zf-ink);
}

.zf-jar-offer__tag {
	flex: none;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--zf-amber);
	color: #241c00;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zf-jar-offer__lines {
	min-width: 0;
	font-weight: 500;
}

.zf-jar-offer strong {
	font-weight: 800;
	color: var(--zf-f);
	white-space: nowrap;
}

.zf-jar-offer__dot {
	margin: 0 8px;
	color: #c7c2b2;
}

@media (max-width: 575px) {

	.zf-jar-offer {
		font-size: 13.5px;
	}

	.zf-jar-offer__dot {
		display: block;
		width: 100%;
		height: 0;
		margin: 2px 0;
		overflow: hidden;
	}
}

/* ---- Buy now and Add to cart on one row (14 Oct 2026) -------------------

   Buy now comes first, reading left to right, and Add to cart stays the
   filled one, so the row still has a single obvious action. Below 480px
   they stack, with Add to cart on top. */

.zf-pdp .zf-pdp-buy__form .actions,
.zf-pdp .zf-pdp-buy__form .actions:has(.quantity.hidden) {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px !important;
	align-items: stretch;
}

.zf-pdp .zf-pdp-buy__form .actions .zf-pdp-buynow,
.zf-pdp .zf-pdp-buy__form .actions .single_add_to_cart_button,
.zf-pdp .zf-pdp-buy__form .actions button[name="add-to-cart"] {
	flex: 1 1 190px;
	width: auto;
	min-height: 58px !important;
}

@media (max-width: 479px) {

	.zf-pdp .zf-pdp-buy__form .actions {
		flex-direction: column;
	}

	/* In a column the basis is a height, which made 190px buttons. */
	.zf-pdp .zf-pdp-buy__form .actions .zf-pdp-buynow,
	.zf-pdp .zf-pdp-buy__form .actions .single_add_to_cart_button,
	.zf-pdp .zf-pdp-buy__form .actions button[name="add-to-cart"] {
		flex: 0 0 auto;
		width: 100%;
	}

	.zf-pdp .zf-pdp-buy__form .actions .zf-pdp-buynow {
		order: 2;
	}

	.zf-pdp .zf-pdp-buy__form .actions button[name="add-to-cart"]:not(.zf-pdp-buynow),
	.zf-pdp .zf-pdp-buy__form .actions .single_add_to_cart_button {
		order: 1;
	}
}

/* Under the price now, so it needs air above the size chips. */
.zf-pdp-buy__price + .zf-jar-offer {
	margin: 14px 0 18px !important;
}

/* The quantity keeps its own line, so the two buttons share the next one. */
.zf-pdp .zf-pdp-buy__form .actions .product-quantity,
.zf-pdp .zf-pdp-buy__form .actions .quantity {
	flex: 1 0 100% !important;
	margin: 4px 0 2px !important;
}

/* ---- the whole buy area in the first fold (Atif, 14 Oct 2026) -----------

   On a 1366×768 laptop the WhatsApp line ended 124px below the fold, so
   the price, the offer and the buttons could not be taken in at a glance.
   Nothing is removed: the room comes from the space around the title, the
   introduction and the offer card, on screens wide enough to show the
   gallery beside the buy box. */

@media (min-width: 992px) {

	.zf-pdp .zf-pdp-crumbs {
		padding: 10px 0 6px;
	}

	.zf-pdp-hero {
		padding-top: 22px;
	}

	.zf-pdp .zf-pdp-buy__subtitle {
		margin: 6px 0 10px;
		font-size: 15.5px;
	}

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

	.zf-pdp .zf-pdp-buy__intro p {
		margin: 0;
		font-size: 15.5px;
		line-height: 1.6;
	}

	.zf-pdp .zf-pdp-buy__price {
		margin-bottom: 8px;
	}

	.zf-pdp-buy__price + .zf-jar-offer {
		margin: 10px 0 12px !important;
		padding: 10px 14px;
		font-size: 13.5px;
	}

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

	.zf-pdp .zf-pdp-buy__form .actions .zf-pdp-buynow,
	.zf-pdp .zf-pdp-buy__form .actions .single_add_to_cart_button,
	.zf-pdp .zf-pdp-buy__form .actions button[name="add-to-cart"] {
		min-height: 54px !important;
	}

	.zf-pdp .whatsapp-buy-now-button {
		min-height: 46px;
		margin-top: 10px !important;
	}
}

/* A 768px-tall laptop needs about fifty pixels more than a 900px one, so
   the same trims go one notch further there. */
@media (min-width: 992px) and (max-height: 820px) {

	.zf-pdp .zf-pdp-crumbs {
		padding: 8px 0 4px;
	}

	.zf-pdp-hero {
		padding-top: 16px;
	}

	.zf-pdp .zf-pdp-buy__subtitle {
		margin: 4px 0 8px;
		font-size: 15px;
	}

	.zf-pdp .zf-pdp-buy__intro p {
		font-size: 15px;
		line-height: 1.55;
	}

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

	.zf-pdp-buy__price + .zf-jar-offer {
		margin: 8px 0 10px !important;
		padding: 9px 13px;
	}

	.zf-pdp .zf-pdp-buy__form .actions .zf-pdp-buynow,
	.zf-pdp .zf-pdp-buy__form .actions .single_add_to_cart_button,
	.zf-pdp .zf-pdp-buy__form .actions button[name="add-to-cart"] {
		min-height: 52px !important;
	}

	.zf-pdp .whatsapp-buy-now-button {
		min-height: 44px;
		margin-top: 8px !important;
	}
}

/* What is left above the price is the introduction, four lines of it. On a
   short laptop it shows three, and on a very short one two, so the price,
   the offer and the buttons are all in the first screen. Nothing is lost:
   the same text is the Overview tab a little further down. */
@media (min-width: 992px) and (max-height: 820px) {

	/* Only a very short screen shortens the description, and then to
	   three lines, never two: a sentence cut mid-word reads as a fault. */
}

@media (min-width: 992px) and (max-height: 740px) {

	.zf-pdp .zf-pdp-crumbs {
		padding: 6px 0 2px;
	}

	.zf-pdp-hero {
		padding-top: 12px;
	}


}

/* The last fifteen pixels on a 768px screen come from the breadcrumb row
   and the gap above the gallery; a 720px one also takes a smaller title. */
@media (min-width: 992px) and (max-height: 820px) {

	.zf-pdp .zf-pdp-crumbs {
		padding: 4px 0 2px;
		font-size: 13px;
	}

	.zf-pdp-hero {
		padding-top: 10px;
	}
}

@media (min-width: 992px) and (max-height: 740px) {

	.zf-pdp-buy__price + .zf-jar-offer {
		padding: 8px 12px;
	}

	.zf-pdp .zf-pdp-buy__form .actions .zf-pdp-buynow,
	.zf-pdp .zf-pdp-buy__form .actions .single_add_to_cart_button,
	.zf-pdp .zf-pdp-buy__form .actions button[name="add-to-cart"] {
		min-height: 50px !important;
	}

	.zf-pdp .whatsapp-buy-now-button {
		min-height: 42px;
	}
}

/* The last few pixels, taken from the gaps between the blocks. */
@media (min-width: 992px) and (max-height: 820px) {

	.zf-pdp-buy__price + .zf-jar-offer {
		margin: 8px 0 8px !important;
	}

	.zf-pdp .whatsapp-buy-now-button {
		margin-top: 6px !important;
	}
}

@media (min-width: 992px) and (max-height: 740px) {

	.zf-pdp .zf-pdp-buy__subtitle {
		margin: 2px 0 6px;
	}

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

	.zf-pdp .zf-pdp-buy__price {
		margin-bottom: 6px;
	}

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

	.zf-pdp .zf-pdp-buy__form .actions {
		gap: 10px !important;
	}
}

/* The smaller title gives the room back, so the buttons on a 720px
   screen keep a comfortable height. */
@media (min-width: 992px) and (max-height: 730px) {

	.zf-pdp .whatsapp-buy-now-button {
		margin-top: 6px !important;
	}
}

/* ---- the product title, one rule (Atif, 14 Oct 2026) --------------------

   It had collected six, each from a different round, and the height-based
   ones shrank it again on a short screen. Atif settled it: never larger
   than 1.8rem, never smaller than 1.6rem, between the two it follows the
   width. The buy area still clears the fold at that size. */
/* site.css sizes every inner-page .product_title with !important and a
   heavier selector, and this h1 carries that class too, so this one has to
   weigh more than "two classes". */
body:not(.home) .zf-pdp .zf-pdp-buy__title.product_title,
body:not(.home) .zf-pdp .zf-pdp-buy__title {
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 1.8rem) !important;
	line-height: 1.14;
	margin-bottom: 4px;
}

@media (min-width: 992px) and (max-height: 760px) {

	.zf-pdp .zf-pdp-buy__intro p {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}