/*
 * The shop journey: cart, checkout, order received.
 *
 * These three pages were the only ones on the site with no design on them.
 * The homepage, the product pages and the knowledge base were all built; the
 * buyer crossed into default WooCommerce at exactly the moment they were
 * being asked for money. This is the same type, the same greens and the same
 * amber as the rest of the site, applied to the markup the theme already
 * emits, so no WooCommerce template is overridden.
 *
 * Scoped to the three body classes. Nothing here leaks onto another page.
 */

.woocommerce-cart,
.woocommerce-checkout {
	--zf-f: #2a491d;
	--zf-f-deep: #1c2e15;
	--zf-amber: #ffbf00;
	--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;
}

/* ---- 1. The three steps ------------------------------------------------ */

.zf-shop-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0 0 26px;
	padding: 0 0 14px;
	list-style: none;
	border-bottom: 1px solid var(--zf-rule);
	counter-reset: none;
}

.zf-shop-steps__item {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.3;
	color: #8d8f85;
	letter-spacing: .01em;
}

.zf-shop-steps__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	border: 1px solid var(--zf-rule);
	font-size: 12px;
	font-weight: 600;
	background: #fff;
	color: #8d8f85;
	flex: none;
}

.zf-shop-steps__item.is-current {
	color: var(--zf-ink);
	font-weight: 600;
}

.zf-shop-steps__item.is-current .zf-shop-steps__n {
	background: var(--zf-amber);
	border-color: var(--zf-amber);
	color: #241c00;
}

.zf-shop-steps__item.is-done {
	color: var(--zf-f);
}

.zf-shop-steps__item.is-done .zf-shop-steps__n {
	background: var(--zf-f);
	border-color: var(--zf-f);
	color: #fff;
}

/* ---- 2. The help box --------------------------------------------------- */
/* Replaces a dashed teal box with inline styles that also pulled two icons
   from img.icons8.com onto the payment page. */

.zf-shop-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	margin: 0 0 26px;
	padding: 15px 18px;
	background: var(--zf-ivory);
	border: 1px solid var(--zf-rule);
	border-left: 3px solid var(--zf-amber);
	border-radius: 2px;
}

.zf-shop-help p {
	margin: 0;
}

.zf-shop-help__ur {
	font-family: "Noto Nastaliq Urdu", var(--zf-serif);
	font-size: 17px;
	line-height: 2;
	color: var(--zf-ink);
	flex: 1 1 260px;
	min-width: 0;
}

.zf-shop-help__en {
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b6c64;
	flex: 1 1 240px;
	min-width: 0;
}

.zf-shop-help__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	flex: none;
}

.zf-shop-help__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--zf-rule);
	background: #fff;
	color: var(--zf-f);
	transition: border-color .15s, color .15s;
}

.zf-shop-help__links a:hover,
.zf-shop-help__links a:focus-visible {
	border-color: var(--zf-f);
	color: var(--zf-f-deep);
}

.zf-shop-help__wa svg {
	color: #25d366;
}

/* ---- 3. Tables: cart, order review, order details ---------------------- */

.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table {
	border: 1px solid var(--zf-rule);
	border-radius: 2px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th {
	background: var(--zf-cream);
	border: 0;
	border-bottom: 1px solid var(--zf-rule);
	padding: 13px 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b6c64;
	text-align: left;
}

.woocommerce-cart .shop_table td,
.woocommerce-checkout .shop_table td {
	border: 0;
	border-bottom: 1px solid var(--zf-rule);
	padding: 15px 16px;
	font-size: 14.5px;
	color: var(--zf-body);
	vertical-align: middle;
}

.woocommerce-cart .shop_table tr:last-child td,
.woocommerce-checkout .shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce-cart .cart-productname a,
.woocommerce-checkout .shop_table .product-name {
	color: var(--zf-ink);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-cart .cart-productimage img {
	border-radius: 2px;
	border: 1px solid var(--zf-rule);
}

.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal,
.woocommerce-checkout .product-total,
.woocommerce-cart .amount,
.woocommerce-checkout .amount {
	font-variant-numeric: tabular-nums;
	color: var(--zf-ink);
	font-weight: 600;
}

/* ---- 4. Totals --------------------------------------------------------- */

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--zf-ivory);
}

.woocommerce-cart .summary-title,
.woocommerce-checkout #order_review_heading {
	font-family: var(--zf-serif);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--zf-ink);
	margin: 0 0 14px;
}

.woocommerce-cart .cart_totals th {
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: var(--zf-body);
	font-weight: 500;
	width: 42%;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: 16px;
	color: var(--zf-ink);
	font-weight: 700;
	border-top: 2px solid var(--zf-rule);
}

/* Shipping choices: one line per option, radio beside its own label. */
.woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.woocommerce-shipping-methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	font-size: 14px;
	min-width: 0;
}

.woocommerce-shipping-methods .custom-checkbox {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.woocommerce-shipping-methods label {
	margin: 0;
	font-weight: 500;
	color: var(--zf-ink);
	cursor: pointer;
}

.woocommerce-shipping-destination {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: #6b6c64;
}

/* ---- 5. Promises ------------------------------------------------------- */

.zf-shop-promises {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 14px 0 0;
	padding: 14px 0 0;
	list-style: none;
	border-top: 1px solid var(--zf-rule);
	font-size: 12.5px;
	color: #6b6c64;
}

.zf-shop-promises li {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0;
}

.zf-shop-promises li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--zf-amber);
	flex: none;
}

.zf-shop-promises a {
	color: var(--zf-f);
	text-decoration: none;
	border-bottom: 1px solid var(--zf-g);
}

/* ---- 6. Buttons and fields --------------------------------------------- */

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 16px 0 0;
}

.woocommerce-checkout .form-row label,
.woocommerce-checkout .woocommerce-billing-fields label {
	font-size: 13px;
	font-weight: 600;
	color: var(--zf-ink);
	margin-bottom: 5px;
	letter-spacing: .005em;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-cart .coupon input.input-text {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--zf-rule);
	border-radius: 2px;
	background: #fff;
	font-size: 14.5px;
	color: var(--zf-ink);
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-cart .coupon input.input-text:focus {
	outline: 0;
	border-color: var(--zf-f);
	box-shadow: 0 0 0 3px rgba(255, 191, 0, .25);
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #ship-to-different-address span {
	font-family: var(--zf-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--zf-ink);
	letter-spacing: -.01em;
}

/* ---- 7. Payment -------------------------------------------------------- */

.woocommerce-checkout #payment {
	background: var(--zf-ivory);
	border: 1px solid var(--zf-rule);
	border-radius: 2px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--zf-rule);
	padding: 14px 16px;
	margin: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-size: 15px;
	font-weight: 600;
	color: var(--zf-ink);
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff;
	border: 1px solid var(--zf-rule);
	border-radius: 2px;
	padding: 14px 16px;
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--zf-body);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment .place-order {
	padding: 16px;
}

/* ---- 8. Order received -------------------------------------------------- */

.zf-thanks__lead {
	display: block;
	font-family: var(--zf-serif);
	font-size: clamp(22px, 4vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	color: #22301c;
	margin-bottom: 8px;
}

.zf-thanks__next {
	display: block;
	max-width: 56ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: #3f4039;
}

.woocommerce-order .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 26px 0;
	padding: 0;
	list-style: none;
	background: #ece7da;
	border: 1px solid #ece7da;
	border-radius: 2px;
	overflow: hidden;
}

.woocommerce-order .woocommerce-order-overview li {
	flex: 1 1 190px;
	min-width: 0;
	margin: 0;
	padding: 13px 16px;
	background: #fff;
	border: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #6b6c64;
	word-break: break-word;
}

.woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #22301c;
}

.woocommerce-order h2,
.woocommerce-order .woocommerce-column__title {
	font-family: "Fraunces", Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: #22301c;
	margin: 30px 0 12px;
}

.woocommerce-order .woocommerce-bacs-bank-details {
	background: #fbf8f1;
	border: 1px solid #ece7da;
	border-left: 3px solid #ffbf00;
	border-radius: 2px;
	padding: 16px 18px;
	margin: 0 0 26px;
}

.woocommerce-order .wc-bacs-bank-details-account-name {
	font-family: "Fraunces", Georgia, serif;
	font-size: 16px;
	color: #22301c;
	margin: 14px 0 6px;
}

.woocommerce-order .wc-bacs-bank-details {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.8;
	color: #3f4039;
}

.woocommerce-order .wc-bacs-bank-details li {
	margin: 0;
	word-break: break-word;
}

.woocommerce-order .wc-bacs-bank-details strong {
	color: #22301c;
	font-variant-numeric: tabular-nums;
}

.woocommerce-order .woocommerce-table--order-details,
.woocommerce-order .shop_table {
	width: 100%;
	border: 1px solid #ece7da;
	border-radius: 2px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}

.woocommerce-order .woocommerce-table--order-details th {
	background: #f6f4ee;
	border: 0;
	border-bottom: 1px solid #ece7da;
	padding: 12px 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6b6c64;
	text-align: left;
}

.woocommerce-order .woocommerce-table--order-details td {
	border: 0;
	border-bottom: 1px solid #ece7da;
	padding: 13px 16px;
	font-size: 14.5px;
	color: #3f4039;
}

.woocommerce-order .woocommerce-table--order-details tfoot th,
.woocommerce-order .woocommerce-table--order-details tfoot td {
	background: #fff;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: #3f4039;
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
	font-size: 16px;
	font-weight: 700;
	color: #22301c;
	border-top: 2px solid #ece7da;
}

.woocommerce-order .woocommerce-customer-details address {
	border: 1px solid #ece7da;
	border-radius: 2px;
	padding: 15px 17px;
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.75;
	color: #3f4039;
	background: #fff;
}

/* ---- 9. Notices --------------------------------------------------------- */

.woocommerce-cart .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
	background: var(--zf-ivory);
	border: 1px solid var(--zf-rule);
	border-left: 3px solid var(--zf-amber);
	border-radius: 2px;
	color: var(--zf-ink);
	font-size: 14px;
	line-height: 1.6;
	padding: 13px 16px;
	/* The Buy 2 notice is long and was running out of its box. */
	overflow-wrap: anywhere;
}

.woocommerce-cart .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before {
	display: none;
}

/* ---- 10. Phones --------------------------------------------------------- */

@media (max-width: 782px) {

	.zf-shop-steps {
		gap: 6px 16px;
	}

	.zf-shop-steps__item {
		font-size: 12.5px;
	}

	.zf-shop-help {
		padding: 14px;
	}

	.zf-shop-help__links {
		width: 100%;
	}

	.zf-shop-help__links a {
		flex: 1 1 auto;
		justify-content: center;
	}

	.woocommerce-cart .shop_table td,
	.woocommerce-checkout .shop_table td {
		padding: 11px 13px;
		font-size: 14px;
	}

	.woocommerce-order .woocommerce-order-overview li {
		flex: 1 1 100%;
	}

	.woocommerce-cart .cart_totals th {
		width: auto;
	}
}


/* ---- 11. The Buy 2 offer line ------------------------------------------ */
/*
 * Printed by this plugin now. The Code Snippets "Discount" entry rendered it
 * as a bare div whose class names no stylesheet on the site defines, and
 * styling it from the outside only made it worse - the sentence ended up one
 * character per line. That markup is removed and this is rendered instead.
 */

.zf-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 22px;
	padding: 12px 16px;
	background: var(--zf-ivory);
	border: 1px solid var(--zf-rule);
	border-left: 3px solid var(--zf-amber);
	border-radius: 2px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--zf-ink);
}

.zf-offer p {
	margin: 0;
	min-width: 0;
}

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

.zf-offer__more {
	color: #6b6c64;
	font-size: 13.5px;
}

.single-product .zf-offer {
	margin: 14px 0 0;
}

/* ---- 9. The column beside the cart totals ------------------------------ */
/* The offer and the help box moved out of the top of the basket into the
   empty half of the totals row (Atif, 2026-10-14), where the decision is
   being made. In a narrower column the help box stacks. */

.zf-cart-aside {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zf-cart-aside .zf-offer,
.zf-cart-aside .zf-shop-help {
	margin: 0;
}

.zf-cart-aside .zf-shop-help {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.zf-cart-aside .zf-shop-help__ur,
.zf-cart-aside .zf-shop-help__en {
	flex: 0 1 auto;
}

.zf-cart-aside .zf-shop-help__links {
	width: 100%;
}

@media (max-width: 767px) {

	.zf-cart-aside {
		margin-bottom: 24px;
	}
}

/* ---- 10. Read it from across the desk (Atif, 14 Oct 2026) ---------------

   The steps still to come and the table's column labels were set in a grey
   too light to read at a glance, and the basket row was built around a
   120px photograph, which left a lane of empty table between the name and
   the price. Darker labels, a smaller photograph, tighter rows. */

.zf-shop-steps__item {
	color: #55564e;
	font-weight: 500;
}

.zf-shop-steps__n {
	color: #55564e;
}

.woocommerce-cart .shop_table th,
.woocommerce-checkout .shop_table th {
	padding: 11px 14px;
	font-size: 12px;
	font-weight: 700;
	color: #3f4039;
}

.woocommerce-cart .shop_table td,
.woocommerce-checkout .shop_table td {
	padding: 10px 14px;
}

.woocommerce-cart .cart-productimage img,
.woocommerce-cart .product-thumbnail img {
	width: 76px !important;
	height: 76px !important;
	object-fit: cover;
}

.woocommerce-cart .cart-productimage,
.woocommerce-cart .product-thumbnail {
	width: 104px;
}

.woocommerce-cart .cart-productname a,
.woocommerce-checkout .shop_table .product-name {
	font-size: 14.5px;
	line-height: 1.45;
}

/* The coupon and the two buttons under the basket, on the same rhythm. */
.woocommerce-cart .shop_table td.actions {
	padding: 12px 14px;
}

.woocommerce-cart .shop_table td.actions .button,
.woocommerce-cart .shop_table td.actions input[type="submit"] {
	min-height: 44px;
	padding-block: 0;
}

.woocommerce-cart .shop_table td.actions .coupon input[type="text"] {
	min-height: 44px;
}

/* ---- 11. The cart, read as a decision (14 Oct 2026) ---------------------

   One thing to do on this page: go to checkout. So Proceed to checkout is
   the brand's forest, full width, inside the totals card, with what the
   shop promises directly under it; Update cart and Continue shopping drop
   to outlines; the coupon folds away behind a link; the help box keeps its
   place but stops shouting; and on a phone the button follows the screen.
   Nothing here invents urgency, scarcity or a badge. */

/* --- Proceed to checkout, the one filled button on the page. */
.woocommerce-cart .wc-proceed-to-checkout {
	margin: 16px 0 0;
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	min-height: 56px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--zf-f) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(28, 46, 21, .18);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:focus-visible {
	background: var(--zf-f-deep, #1c2e15) !important;
	box-shadow: 0 4px 14px rgba(28, 46, 21, .22);
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button::after {
	content: "\2192";
	font-size: 16px;
	letter-spacing: 0;
}

/* The promises, directly under the button rather than at the page's foot. */
.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.5;
	color: #55564e;
}

.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises li::before {
	content: "\2713";
	margin-right: 6px;
	color: var(--zf-f);
	font-weight: 700;
}

/* --- The totals read top to bottom: the parts quiet, the total loud. */
.woocommerce-cart .cart_totals .cart-subtotal th,
.woocommerce-cart .cart_totals .cart-subtotal td,
.woocommerce-cart .cart_totals .shipment th,
.woocommerce-cart .cart_totals tr:not(.order-total) td {
	font-size: 14px;
	font-weight: 500;
	color: #55564e;
}

.woocommerce-cart .cart_totals .cart-discount th,
.woocommerce-cart .cart_totals .cart-discount td,
.woocommerce-cart .cart_totals .fee th,
.woocommerce-cart .cart_totals .fee td {
	color: var(--zf-f) !important;
	font-weight: 600;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	font-size: 19px;
	padding-top: 14px;
	padding-bottom: 14px;
	color: var(--zf-ink);
}

/* --- Update cart and Continue shopping: available, not competing. */
.woocommerce-cart .shop_table td.actions .button[name="update_cart"],
.woocommerce-cart .shop_table td.actions input[name="update_cart"],
.woocommerce-cart .shop_table td.actions .wc-backward,
.woocommerce-cart .shop_table td.actions a.button:not(.checkout-button) {
	border: 1.5px solid rgba(42, 73, 29, .3) !important;
	background: #fff !important;
	color: var(--zf-f) !important;
	font-weight: 600;
	box-shadow: none !important;
}

.woocommerce-cart .shop_table td.actions .button[name="update_cart"]:hover,
.woocommerce-cart .shop_table td.actions input[name="update_cart"]:hover,
.woocommerce-cart .shop_table td.actions .wc-backward:hover,
.woocommerce-cart .shop_table td.actions a.button:not(.checkout-button):hover {
	border-color: var(--zf-f) !important;
	background: var(--zf-cream) !important;
}

/* --- "Have a coupon?" */
.zf-coupon {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.zf-coupon__toggle {
	padding: 0;
	border: 0;
	background: none;
	color: var(--zf-f);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.zf-coupon__toggle:hover,
.zf-coupon__toggle:focus-visible {
	color: var(--zf-f-deep, #1c2e15);
}

.zf-coupon__toggle::after {
	content: " \25BE";
	text-decoration: none;
}

.zf-coupon__toggle[aria-expanded="true"]::after {
	content: " \25B4";
}

.zf-coupon__body .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* --- WhatsApp help: present, quieter than the checkout button. */
.zf-cart-aside .zf-shop-help {
	padding: 12px 14px;
	background: #fff;
	border-left-width: 2px;
}

.zf-cart-aside .zf-shop-help__ur {
	font-size: 15px;
	line-height: 1.9;
}

.zf-cart-aside .zf-shop-help__en {
	font-size: 12.5px;
}

.zf-cart-aside .zf-shop-help__links a {
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 500;
}

/* --- The offer: the same card, with one thing to click. */
.zf-offer__take {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	padding: 8px 16px;
	border: 1.5px solid rgba(42, 73, 29, .3);
	border-radius: 999px;
	background: #fff;
	color: var(--zf-f);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.zf-offer__take:hover,
.zf-offer__take:focus-visible {
	border-color: var(--zf-f);
	background: var(--zf-cream);
	color: var(--zf-f);
}

.zf-offer--on {
	border-left-color: var(--zf-f);
}

/* --- On a phone: the total and the way forward, always in reach. */
.zf-cart-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	border-top: 1px solid var(--zf-rule);
	box-shadow: 0 -6px 18px rgba(28, 46, 21, .08);
}

.zf-cart-bar[hidden] {
	display: none;
}

.zf-cart-bar__total {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--zf-ink);
	font-variant-numeric: tabular-nums;
}

.zf-cart-bar__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--zf-f);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
}

body.zf-has-cart-bar {
	padding-bottom: 74px;
}

@media (min-width: 768px) {

	.zf-cart-bar {
		display: none !important;
	}

	body.zf-has-cart-bar {
		padding-bottom: 0;
	}
}

@media (max-width: 767px) {

	.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
		min-height: 52px;
	}

	.woocommerce-cart .shop_table td.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.woocommerce-cart .shop_table td.actions .button,
	.woocommerce-cart .shop_table td.actions input[type="submit"] {
		flex: 1 1 140px;
	}
}

/* ---- 12. Weighing against the inner-page button rule --------------------

   site.css paints every inner-page button in the amber with
   `body:not(.home) .woocommerce a.button` and !important, which outweighs
   a rule written only in classes. These say the same things one notch
   heavier, so the cart has one filled button (checkout, forest) and the
   rest are outlines. Nothing else about the theme's buttons changes. */

body.woocommerce-cart:not(.home) .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart:not(.home) .wc-proceed-to-checkout a.checkout-button.vs-btn {
	background: var(--zf-f) !important;
	background-color: var(--zf-f) !important;
	border-color: var(--zf-f) !important;
	color: #fff !important;
}

body.woocommerce-cart:not(.home) .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart:not(.home) .wc-proceed-to-checkout a.checkout-button:focus-visible {
	background: var(--zf-f-deep, #1c2e15) !important;
	background-color: var(--zf-f-deep, #1c2e15) !important;
	color: #fff !important;
}

/* The basket's own buttons — coupon Submit, Update cart, Continue shopping
   — step back so that one filled button stands alone. */
body.woocommerce-cart:not(.home) .shop_table td.actions button.vs-btn,
body.woocommerce-cart:not(.home) .shop_table td.actions a.vs-btn,
body.woocommerce-cart:not(.home) .shop_table td.actions a.button,
body.woocommerce-cart:not(.home) .shop_table td.actions button.button {
	border: 1.5px solid rgba(42, 73, 29, .3) !important;
	background: #fff !important;
	background-color: #fff !important;
	color: var(--zf-f) !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

body.woocommerce-cart:not(.home) .shop_table td.actions button.vs-btn:hover,
body.woocommerce-cart:not(.home) .shop_table td.actions a.vs-btn:hover,
body.woocommerce-cart:not(.home) .shop_table td.actions a.button:hover,
body.woocommerce-cart:not(.home) .shop_table td.actions button.button:hover {
	border-color: var(--zf-f) !important;
	background: var(--zf-cream) !important;
	background-color: var(--zf-cream) !important;
	color: var(--zf-f) !important;
}

body.woocommerce-cart:not(.home) .shop_table td.actions button.vs-btn[disabled] {
	opacity: .5;
}

/* The theme's coupon wrapper, folded away behind the toggle. */
.zf-coupon__body .vs-cart-coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.zf-coupon__body .vs-cart-coupon input[type="text"] {
	min-width: 200px;
}

/* The mobile bar's button is the one place amber would compete with
   itself, so it stays forest like the real one. */
body:not(.home) .zf-cart-bar a.zf-cart-bar__btn {
	background: var(--zf-f) !important;
	color: #fff !important;
}

/* The theme's coupon button takes its height from the row it was in; inside
   the fold that row is gone, so it collapsed to nothing and could not be
   clicked. Its own height, stated here. */
.zf-coupon__body .vs-cart-coupon button,
.zf-coupon__body .vs-cart-coupon input[type="text"],
.zf-coupon__body .coupon button,
.zf-coupon__body .coupon input[type="text"] {
	height: auto !important;
	min-height: 46px;
}

/* ---- 13. The summary as one card (Atif, 14 Oct 2026) --------------------

   The totals sat in a card and the decision — the button and what the shop
   promises — floated on the page below it, with a tick inside an amber dot
   on every promise. Now the three are one card: figures, then the button,
   then the promises on a cream foot, in the page's own paper and rule. */

body.woocommerce-cart .cart_totals {
	border-radius: 14px 14px 0 0 !important;
	border-bottom: 0 !important;
	margin-bottom: 0;
}

body.woocommerce-cart .cart_totals tr:last-child td,
body.woocommerce-cart .cart_totals tr:last-child th {
	border-bottom: 0;
}

body.woocommerce-cart .wc-proceed-to-checkout {
	margin: 0 !important;
	padding: 18px !important;
	background: var(--zf-ivory);
	border: 1px solid var(--zf-rule);
	border-top: 0;
	border-radius: 0 0 14px 14px;
}

/* The promises: one quiet line across the foot of the card. */
body.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises {
	justify-content: center;
	gap: 6px 18px;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--zf-rule);
	font-size: 12.5px;
	color: #55564e;
}

body.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises li {
	gap: 6px;
}

/* One mark per promise: the tick, in the forest, with no dot behind it. */
body.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises li::before {
	content: "\2713";
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: none;
	color: var(--zf-f);
	font-size: 12px;
	font-weight: 700;
}

body.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises a {
	color: #55564e;
	border-bottom-color: var(--zf-rule);
}

body.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises a:hover {
	color: var(--zf-f);
	border-bottom-color: var(--zf-f);
}

/* The heading sits on the card rather than floating above it. */
body.woocommerce-cart .summary-title {
	margin-bottom: 10px;
}

@media (max-width: 767px) {

	body.woocommerce-cart .wc-proceed-to-checkout {
		padding: 16px 14px !important;
	}

	body.woocommerce-cart .wc-proceed-to-checkout .zf-shop-promises {
		flex-direction: column;
		align-items: flex-start;
		gap: 7px;
	}
}


/* The help box on the page's own paper rather than white: against a near
   white page the white card had disappeared (Atif, 14 Oct 2026). It still
   sits below the offer card and well below the checkout button. */
.zf-cart-aside .zf-shop-help {
	background: var(--zf-ivory);
	border-color: var(--zf-rule);
	border-left: 3px solid var(--zf-amber);
}

.zf-cart-aside .zf-shop-help__ur {
	font-size: 16px;
	color: var(--zf-ink);
}

.zf-cart-aside .zf-shop-help__links a {
	background: #fff;
}

/* ---- 14. The checkout, read as a decision (14 Oct 2026) -----------------

   It had the same faults the cart had: Place order was a small amber pill
   at the foot of a page-wide table, the order sat under the form instead
   of beside it, and the notes box filled the right half of the screen
   before anyone had typed a name. Now: the form on the left, the order in
   a card on the right that follows the screen, and one filled forest
   button. Fields, validation and payment methods are WooCommerce's own. */

@media (min-width: 992px) {

	body.woocommerce-checkout form.checkout > .row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		gap: 0 36px;
		align-items: start;
	}

	body.woocommerce-checkout form.checkout > .row > .col-lg-6,
	body.woocommerce-checkout form.checkout > .row > .col-lg-12 {
		width: auto;
		max-width: none;
		flex: none;
		padding: 0;
	}

	body.woocommerce-checkout form.checkout > .row > .col-lg-6:nth-of-type(1) {
		grid-column: 1;
		grid-row: 1;
	}

	body.woocommerce-checkout form.checkout > .row > .col-lg-6:nth-of-type(2) {
		grid-column: 1;
		grid-row: 2;
	}

	/* The order, beside the form. Not sticky: the card is about 920px
	   tall and a laptop screen is 768, so pinning it put the payment
	   methods and Place Order permanently below the fold (Atif saw the
	   summary clipped, 14 Oct 2026). Nothing in it is ever hidden. */
	body.woocommerce-checkout form.checkout > .row > .col-lg-12 {
		grid-column: 2;
		grid-row: 1 / span 3;
		position: static;
	}
}

/* The order as one card: heading, table, payment, button, promises. */
body.woocommerce-checkout #order_review_heading {
	margin: 0;
	padding: 16px 18px 0;
	border: 1px solid var(--zf-rule);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	background: var(--zf-ivory);
	font-family: var(--zf-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--zf-ink);
}

body.woocommerce-checkout #order_review {
	padding: 14px 18px 18px;
	border: 1px solid var(--zf-rule);
	border-top: 0;
	border-radius: 0 0 14px 14px;
	background: var(--zf-ivory);
}

body.woocommerce-checkout #order_review .shop_table {
	margin: 0;
	border: 0;
	background: transparent;
}

body.woocommerce-checkout #order_review .shop_table th,
body.woocommerce-checkout #order_review .shop_table td {
	padding: 9px 0;
	background: transparent;
}

body.woocommerce-checkout #order_review .shop_table thead th {
	font-size: 11px;
	letter-spacing: .1em;
	color: #6b6c64;
}

body.woocommerce-checkout #order_review .order-total th,
body.woocommerce-checkout #order_review .order-total td {
	font-size: 19px;
	font-weight: 700;
	color: var(--zf-ink);
	border-top: 2px solid var(--zf-rule);
}

/* One filled button, the brand's forest, the width of the card. */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .form-row.place-order #place_order {
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 6px 0 0;
	padding: 0 20px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--zf-f) !important;
	background-color: var(--zf-f) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(28, 46, 21, .18);
	transition: background-color .15s ease, box-shadow .15s ease;
}

body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus-visible {
	background: var(--zf-f-deep, #1c2e15) !important;
	background-color: var(--zf-f-deep, #1c2e15) !important;
	box-shadow: 0 4px 14px rgba(28, 46, 21, .22);
}

/* What the shop promises, under the button, one tick each. */
body.woocommerce-checkout .zf-shop-promises {
	justify-content: flex-start;
	gap: 6px 16px;
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--zf-rule);
	font-size: 12.5px;
	color: #55564e;
}

body.woocommerce-checkout .zf-shop-promises li::before {
	content: "\2713";
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--zf-f);
	font-weight: 700;
}

/* Payment methods: the chosen one on paper, the rest quiet. */
body.woocommerce-checkout .wc_payment_methods {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-checkout .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--zf-ink);
	cursor: pointer;
}

body.woocommerce-checkout .payment_box {
	margin: 0 0 8px;
	padding: 10px 14px;
	border: 1px solid var(--zf-rule);
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	color: #55564e;
}

body.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-size: 12.5px;
	line-height: 1.6;
	color: #6b6c64;
}

/* The form side: headings that do not shout, fields with room. */
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout #ship-to-different-address {
	font-family: var(--zf-serif);
	font-size: 20px;
	font-weight: 600;
	color: var(--zf-ink) !important;
	margin: 0 0 12px;
}

body.woocommerce-checkout #ship-to-different-address {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #55564e !important;
}

body.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 18px;
}

body.woocommerce-checkout .woocommerce-additional-fields textarea {
	min-height: 96px;
}

/* A coupon is for the few who have one. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 10px 14px;
	border: 1px solid var(--zf-rule);
	border-left: 3px solid var(--zf-amber);
	border-radius: 2px;
	background: var(--zf-ivory);
	color: #55564e;
	font-size: 13.5px;
	font-weight: 500;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle a {
	color: var(--zf-f);
	font-weight: 700;
}

@media (max-width: 575px) {

	/* iOS zooms a field under 16px, which throws the page sideways. */
	body.woocommerce-checkout .form-row input.input-text,
	body.woocommerce-checkout .form-row textarea,
	body.woocommerce-checkout .form-row select {
		font-size: 16px;
	}

	body.woocommerce-checkout #order_review_heading {
		font-size: 18px;
	}
}

/* ---- 15. The checkout, second pass -------------------------------------- */

@media (min-width: 992px) {

	/* The order card spans both rows, and a third row takes whatever height
	   is left over; without it the extra height was pushed into row one and
	   left 200px of white between the billing fields and the shipping box. */
	body.woocommerce-checkout form.checkout > .row {
		grid-template-rows: max-content max-content 1fr;
	}

	body.woocommerce-checkout form.checkout > .row > .col-lg-12 {
		grid-row: 1 / span 3;
	}
}

/* In a 400px card five columns do not fit: the photograph and the column
   labels go, leaving the name, the quantity and the line total. */
body.woocommerce-checkout #order_review .shop_table thead,
body.woocommerce-checkout #order_review .shop_table .cart-productimage {
	display: none;
}

body.woocommerce-checkout #order_review .shop_table td.product-name {
	padding-right: 10px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--zf-ink);
}

body.woocommerce-checkout #order_review .shop_table td.product-quantity {
	width: 46px;
	text-align: center;
	color: #55564e;
}

body.woocommerce-checkout #order_review .shop_table td.product-price,
body.woocommerce-checkout #order_review .shop_table td.product-total,
body.woocommerce-checkout #order_review .shop_table td.product-subtotal {
	width: 90px;
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-checkout #order_review .shop_table .cart_item td {
	border-bottom: 1px solid var(--zf-rule);
}

/* "Ship to a different address?" is a question, not a headline. */
body.woocommerce-checkout #ship-to-different-address label,
body.woocommerce-checkout #ship-to-different-address .woocommerce-form__label {
	font-family: inherit !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: #55564e !important;
	cursor: pointer;
}

/* The name needs the room: in the card the per-unit price goes too, since
   the line total and the quantity already say it. */
body.woocommerce-checkout #order_review .shop_table {
	width: 100%;
}

body.woocommerce-checkout #order_review .shop_table td.product-price {
	display: none;
}

body.woocommerce-checkout #order_review .shop_table td.product-name {
	width: auto;
	word-break: normal;
	overflow-wrap: anywhere;
}

/* Three columns sharing the card: the line, what there is of it, the money.
   Percentages rather than fixed widths, so a long product name keeps its
   own line instead of breaking one word to a line. */
body.woocommerce-checkout #order_review .shop_table td.product-name {
	width: 58% !important;
	min-width: 0;
}

body.woocommerce-checkout #order_review .shop_table td.product-quantity {
	width: 14% !important;
}

body.woocommerce-checkout #order_review .shop_table td.product-total,
body.woocommerce-checkout #order_review .shop_table td.product-subtotal {
	width: 28% !important;
}

/* The totals' labels read across, not one word per line. */
body.woocommerce-checkout #order_review .shop_table tfoot th,
body.woocommerce-checkout #order_review .shop_table .cart-subtotal th,
body.woocommerce-checkout #order_review .shop_table .fee th,
body.woocommerce-checkout #order_review .shop_table .order-total th,
body.woocommerce-checkout #order_review .shop_table .shipment th,
body.woocommerce-checkout #order_review .shop_table tr > th:first-child {
	width: 58%;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	font-size: 13.5px;
	line-height: 1.4;
}

body.woocommerce-checkout #order_review .shop_table .order-total th {
	font-size: 19px;
}

/* ---- 16. The order card's name cell, and the first fold ----------------- */

/* The theme's review row has five cells: the first holds only the
   photograph, and the product's name sits in an unclassed cell beside it.
   Hiding the photograph left its cell holding 184px while the name was
   squeezed into forty, one word to a line. The photograph's cell goes. */
body.woocommerce-checkout #order_review .shop_table td.product-name {
	display: none;
}

body.woocommerce-checkout #order_review .shop_table .cart_item td:not([class]) {
	width: 58%;
	padding-right: 10px;
	text-align: left;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--zf-ink);
}

/* ---- 17. A coupon that was refused -------------------------------------- */

/* WooCommerce answers a bad code with a span it appends beside the input;
   nothing styles it, so the refusal read as ordinary body text wrapped
   around the Apply button (measured 14 Oct 2026). It is the one place on
   the checkout where red is the right colour. */
.checkout_coupon .coupon-error-notice,
.woocommerce-cart .coupon-error-notice {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 600;
	color: #b3261e;
}

.checkout_coupon #coupon_code.has-error,
.woocommerce-cart #coupon_code.has-error {
	border-color: #b3261e !important;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}

/* The field, the button and the answer in one column, in that order. */
.checkout_coupon .col-lg-4 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.checkout_coupon .col-lg-4 > .clear {
	display: none;
}