.mgv-hero { display: flex; flex-wrap: wrap; align-items: stretch; background: #edefed; padding: 0; min-height: 594px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.mgv-hero-copy { flex: 1 1 50%; max-width: 50%; padding: 50px 38px; padding-left: max(38px, calc((100vw - 1276px) / 2 + 38px)); margin: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.mgv-hero-eyebrow { font-family: sofia_prolight, sans-serif; font-size: 16px; letter-spacing: 3.6px; text-transform: uppercase; color: #424345; margin: 0; font-weight: 400; }
.mgv-hero-heading { font-family: sofia_prolight, sans-serif; font-size: 32px; line-height: 40px; color: #4b4c4e; margin: 46px 0 0; letter-spacing: normal; font-weight: 400; }
.mgv-hero-body { font-family: sofia_prolight, sans-serif; font-size: 15px; line-height: 26px; color: #4b4c4e; margin: 18px 0 0; font-weight: 400; }
.mgv-hero-link { display: inline-block; background: #748e7a; color: #fff; text-decoration: none; font-family: sofia_prolight, sans-serif; font-size: 13px; line-height: 22px; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 30px; width: fit-content; margin-top: 30px; text-align: center; }
.mgv-hero-link:hover { background: #62795f; }
.mgv-hero-image { flex: 1 1 50%; max-width: 50%; min-height: 420px; background-image: url('https://merakicapetown.co.za/wp-content/uploads/2026/08/Meraki-15-Sep-HR-61-scaled.jpg'); background-size: cover; background-position: 50% 50%; }
.mgv-voucher-page { max-width: 900px; margin: 50px auto; padding: 0 24px; font-family: sofia_prolight, sans-serif; }
.mgv-voucher-page .woocommerce-product-gallery,
.mgv-voucher-page .product_title,
.mgv-voucher-page .price,
.mgv-voucher-page .woocommerce-product-details__short-description,
.mgv-voucher-page .woocommerce-tabs,
.mgv-voucher-page .related.products,
.mgv-voucher-page .product_meta,
.mgv-voucher-page form.cart > .quantity { display: none !important; }
.mgv-step-heading { font-family: sofia_prolight, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 0.6px; color: #484c4e; text-align: center; margin: 0 0 24px; }
.mgv-step-heading.mgv-step-2 { margin-top: 44px; }
.mgv-design-grid { display: flex; flex-wrap: nowrap; justify-content: center; gap: 20px; margin: 0 auto 10px; max-width: 900px; }

.mgv-design-option { cursor: pointer; text-align: center; width: 140px; }
.mgv-design-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.mgv-design-thumb { display: block; border: 2px solid transparent; border-radius: 4px; overflow: hidden; margin-bottom: 8px; transition: border-color 0.2s ease; }
.mgv-design-option input:checked + .mgv-design-thumb { border-color: #484c4e; }
.mgv-design-thumb img { width: 100% !important; height: 140px !important; object-fit: cover !important; object-position: left center !important; display: block; max-width: none; }
.mgv-design-label { font-size: 13px; color: #454545; letter-spacing: 0.3px; }
.mgv-field { margin: 0 0 18px; }
.mgv-field label { display: block; font-size: 13px; color: #454545; margin-bottom: 6px; letter-spacing: 0.3px; }
.mgv-field input[type="text"],
.mgv-field input[type="email"],
.mgv-field input[type="number"],
.mgv-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d4d4d4; font-family: sofia_prolight, sans-serif; font-size: 14px; }
.mgv-required-note { font-size: 12px; color: #7a7a7a; margin-top: 6px; text-align: center; }
.mgv-voucher-page .single_add_to_cart_button { display: block; width: 100%; text-align: center; background: #484c4e !important; color: #fff !important; border: none; padding: 15px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; margin-top: 10px; }
.mgv-voucher-page .single_add_to_cart_button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Fix root centering bug: .about-info-wrap float:left breaks margin:auto centering on wide viewports */
.about-info-wrap.common-wrap { float: none !important; margin: 0 auto !important; }

/* ===== Cart & Checkout styling (loaded on pages 1986, 2163, 2167 via header.php) ===== */
body.woocommerce-cart .entry-content,
body.woocommerce-checkout .entry-content {
	max-width: 900px;
	margin: 40px auto 80px;
	padding: 0 24px;
}
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title {
	font-family: sofia_prolight, sans-serif;
	color: #484c4e;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 28px;
	margin-bottom: 30px;
}
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	border: none;
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-cart table.shop_table thead,
.woocommerce-checkout table.shop_table thead {
	border-bottom: 1px solid #d8dad8;
}
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
	font-family: sofia_prolight, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	color: #484c4e;
	padding: 12px 10px;
	text-align: left;
}
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table td {
	padding: 18px 10px;
	border-bottom: 1px solid #eceeec;
	vertical-align: middle;
	font-size: 14px;
	color: #484c4e;
}
.woocommerce-cart table.shop_table td.product-thumbnail img,
.woocommerce-checkout table.shop_table td.product-thumbnail img {
	width: 90px;
	height: 90px;
	object-fit: contain;
	object-position: center center;
	border-radius: 2px;
	background: #fff;
}
.woocommerce-cart table.shop_table td.product-name a {
	color: #484c4e;
	font-weight: 600;
	text-decoration: none;
}
.woocommerce-cart table.shop_table td.product-name .variation,
.woocommerce-cart table.shop_table td.product-name dl {
	font-size: 12px;
	color: #7a7d7a;
	margin-top: 4px;
}
.woocommerce-cart table.shop_table td.product-quantity .quantity input.qty {
	width: 60px;
	padding: 8px;
	border: 1px solid #d8dad8;
	text-align: center;
	/* The theme's global ".text" rule (position:relative; top:-48px;), meant for a
	   floating-label field elsewhere, was also matching this input (WooCommerce
	   gives every text-like input a generic "text" class), yanking the box up
	   into the table header row. Neutralise it here. */
	position: static;
	top: 0;
	line-height: normal;
	height: auto;
}
.woocommerce-cart table.shop_table td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f4f2ef;
	color: #a94442 !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none !important;
}
.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
	background: #a94442;
	color: #fff !important;
}
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review {
	margin-top: 30px;
}
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	border: 1px solid #eceeec;
	padding: 24px;
	background: #f9f9f8;
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: sofia_prolight, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 16px;
	color: #484c4e;
	margin-bottom: 14px;
}
.woocommerce-cart .cart_totals table,
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
	border: none;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	border: none;
	padding: 10px 0;
}
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	font-weight: 700;
	color: #484c4e;
}

/* Prominent Proceed to Checkout button, matching Add to Cart style */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: #484c4e !important;
	color: #fff !important;
	border: none;
	padding: 15px;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	margin-top: 16px;
	box-sizing: border-box;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: #333637;
}

/* Checkout form fields */
.woocommerce-checkout form .form-row label {
	font-size: 13px;
	color: #484c4e;
	margin-bottom: 4px;
}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d8dad8;
	box-sizing: border-box;
	font-size: 14px;
}
.woocommerce-checkout form .form-row.woocommerce-validated input.input-text {
	border-color: #748e7a;
}
.woocommerce-checkout form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout form .form-row.woocommerce-invalid select {
	border-color: #a94442;
}
.woocommerce-checkout form .form-row .required {
	color: #a94442;
}
.woocommerce-checkout #payment {
	background: #f9f9f8;
	border: 1px solid #eceeec;
	padding: 20px;
	margin-top: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: 10px 0;
	border-bottom: 1px solid #eceeec;
}
#place_order {
	display: block;
	width: 100%;
	text-align: center;
	background: #484c4e;
	color: #fff;
	border: none;
	padding: 16px;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 16px;
}
#place_order:hover {
	background: #333637;
}
.mgv-edit-cart-link {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	color: #484c4e;
	text-decoration: underline;
}

.woocommerce-cart .coupon { display: none !important; }
.woocommerce-cart button[name="update_cart"] {
	background: #fff;
	border: 1px solid #484c4e;
	color: #484c4e;
	padding: 10px 20px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 10px;
}

/* Fix WooCommerce screen-reader-text showing visibly because theme doesn't load WC core CSS */
.woocommerce-cart .screen-reader-text,
.woocommerce-checkout .screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	word-wrap: normal !important;
}

/* Payment method icons: match text height, hide typed labels, use icon only */
.woocommerce-checkout .payment_method_class_yoco_wc_payment_gateway .yoco-payment-method-title {
	display: none;
}
/* Vertically align payment method radio buttons with their logos */
.woocommerce-checkout ul.payment_methods li input[type="radio"] {
	vertical-align: middle;
}
.woocommerce-checkout .payment_method_class_yoco_wc_payment_gateway label > img.yoco-payment-method-icon {
	vertical-align: middle !important;
}
/* Hide card brand icons (Visa/Mastercard/Amex) next to Yoco for a cleaner look */
.woocommerce-checkout .payment_method_class_yoco_wc_payment_gateway label span[style*="float:right"],
.woocommerce-checkout .payment_method_class_yoco_wc_payment_gateway label span[style*="float: right"] {
	display: none !important;
}
.woocommerce-checkout .payment_method_snapscan label {
	font-size: 0;
}
.woocommerce-checkout .payment_method_snapscan img {
	font-size: 14px;
	max-height: 3.48em;
	width: auto;
	vertical-align: middle;
	margin-inline-start: -15.5px;
}
.woocommerce-checkout .payment_method_snapscan input[type="radio"] {
	font-size: initial;
}

/* Checkout button alongside Add to Cart */
.mgv-cart-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.mgv-cart-actions .single_add_to_cart_button {
	flex: 1 1 0;
	min-width: 160px;
}
.mgv-checkout-now-btn {
	flex: 1 1 0;
	min-width: 160px;
	display: block;
	background: #fff;
	color: #484c4e;
	border: 1px solid #484c4e;
	padding: 15px;
	font-family: Arial;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}
.mgv-checkout-now-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.mgv-checkout-now-btn:not(:disabled):hover {
	background: #484c4e;
	color: #fff;
}

/* Align Cart Totals values with the Subtotal column in the item table above */
.woocommerce-cart-form table.shop_table th.product-subtotal,
.woocommerce-cart-form table.shop_table td.product-subtotal {
	text-align: right;
	padding-right: 25px;
}
.cart_totals table td {
	text-align: right;
}

/* Show item meta (Design, Amount) horizontally in checkout order review to save vertical space */
.woocommerce-checkout-review-order-table dl.variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 6px;
	margin: 4px 0 0;
	padding: 0;
}
.woocommerce-checkout-review-order-table dl.variation dt,
.woocommerce-checkout-review-order-table dl.variation dd {
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
}
.woocommerce-checkout-review-order-table dl.variation dt {
	color: #767676;
}
.woocommerce-checkout-review-order-table dl.variation dd {
	margin-right: 10px;
}
.woocommerce-checkout-review-order-table dl.variation dd p {
	margin: 0;
	display: inline;
}

/* Show SnapScan description text (matches Yoco's visible description for balance) */
.payment_method_snapscan .payment_box {
	display: block !important;
}

/* Hide Yoco description text underneath the logo */
.payment_method_class_yoco_wc_payment_gateway .payment_box {
	display: none !important;
}


/* Force Add to Cart and Checkout buttons to identical height */
.mgv-cart-actions .single_add_to_cart_button,
.mgv-checkout-now-btn {
	height: 53px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	align-self: flex-start;
}


/* Make the voucher form span the full page-container width, matching the Treatments menu width (override WooCommerce's default 48% summary column) */
.mgv-voucher-page .summary.entry-summary {
	float: none !important;
	width: 100% !important;
}

/* Match Cart Totals block width to the item summary table above it */
.woocommerce-cart .cart_totals {
	float: none !important;
	width: 100% !important;
}

/* Show item meta (Amount, Recipient Email, Your Email) horizontally on the cart page, matching checkout */
.woocommerce-cart-form table.shop_table dl.variation {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 6px;
	margin: 4px 0 0;
	padding: 0;
}
.woocommerce-cart-form table.shop_table dl.variation dt,
.woocommerce-cart-form table.shop_table dl.variation dd {
	margin: 0;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
}
.woocommerce-cart-form table.shop_table dl.variation dt {
	color: #767676;
}
.woocommerce-cart-form table.shop_table dl.variation dd {
	margin-right: 10px;
}
.woocommerce-cart-form table.shop_table dl.variation dd p {
	margin: 0;
	display: inline;
}

/* ---------- Mobile fixes (hero stack, design grid stack, hide newsletter popup on cart/checkout) ---------- */
@media (max-width: 767px) {
	.mgv-hero {
		flex-direction: column;
		min-height: auto;
	}
	.mgv-hero-copy {
		flex: 1 1 100%;
		max-width: 100%;
		padding: 32px 24px 24px;
	}
	.mgv-hero-image {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
		height: 260px;
		min-height: 260px;
	}
	.mgv-design-grid {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 16px;
	}
	.mgv-design-option {
		width: 200px;
	}
	.mgv-design-thumb img {
		height: 200px !important;
	}
	body.woocommerce-cart .pop-up-sub,
	body.woocommerce-checkout .pop-up-sub {
		display: none !important;
	}
}