/* SaaD – WooCommerce buttons matched to the site's button style
   (navy pill like "Explore Our Programmes", #f07755 with white text on hover). */
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body .woocommerce a.button.product_type_external,
body .woocommerce ul.products li.product .button,
body .woocommerce div.product form.cart .button,
body .woocommerce div.product .single_add_to_cart_button,
body .wc-block-components-button,
body .wp-block-button.wc-block-components-product-button .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box !important;
	max-width: 100%;
	padding: 12px 26px !important;
	border: 0 !important;
	border-radius: 30px !important;
	background: #00348f !important;
	background-image: none !important;
	color: #fff !important;
	font-family: Inter, Roboto, system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .2s ease, color .2s ease, transform .2s ease !important;
}

body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body.woocommerce input.button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page button.button:hover,
body .woocommerce ul.products li.product .button:hover,
body .woocommerce div.product form.cart .button:hover,
body .woocommerce div.product .single_add_to_cart_button:hover,
body .wc-block-components-button:hover,
body.woocommerce a.button:focus-visible,
body.woocommerce-page a.button:focus-visible,
body .woocommerce ul.products li.product .button:focus-visible {
	background: #f07755 !important;
	color: #fff !important;
	transform: translateY(-1px);
}

body.woocommerce a.button:focus-visible,
body.woocommerce-page a.button:focus-visible,
body .woocommerce ul.products li.product .button:focus-visible {
	outline: 3px solid rgba(240, 119, 85, .45);
	outline-offset: 2px;
}

/* WhatsApp icon before the external "WhatsApp to Buy" button */
body .woocommerce a.button.product_type_external::before,
body .woocommerce div.product form.cart .button.single_add_to_cart_button::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 15l-1.4 5 5.2-1.36A9.9 9.9 0 1 0 12.04 2zm5.8 14.1c-.24.68-1.42 1.3-1.96 1.38-.5.07-1.13.1-1.82-.12-.42-.13-.96-.31-1.65-.61-2.9-1.25-4.8-4.17-4.94-4.36-.15-.2-1.18-1.57-1.18-3s.75-2.13 1.02-2.42c.27-.3.58-.37.78-.37h.56c.18 0 .42-.07.66.5.24.58.83 2 .9 2.15.07.14.12.31.02.5-.1.2-.15.32-.29.49l-.44.51c-.15.15-.3.31-.13.6.17.3.76 1.26 1.64 2.04 1.13 1 2.08 1.31 2.38 1.46.3.15.46.12.63-.07.17-.2.73-.85.92-1.14.2-.3.39-.24.66-.15.27.1 1.7.8 2 .95.29.15.48.22.55.34.07.12.07.68-.17 1.36z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 15l-1.4 5 5.2-1.36A9.9 9.9 0 1 0 12.04 2zm5.8 14.1c-.24.68-1.42 1.3-1.96 1.38-.5.07-1.13.1-1.82-.12-.42-.13-.96-.31-1.65-.61-2.9-1.25-4.8-4.17-4.94-4.36-.15-.2-1.18-1.57-1.18-3s.75-2.13 1.02-2.42c.27-.3.58-.37.78-.37h.56c.18 0 .42-.07.66.5.24.58.83 2 .9 2.15.07.14.12.31.02.5-.1.2-.15.32-.29.49l-.44.51c-.15.15-.3.31-.13.6.17.3.76 1.26 1.64 2.04 1.13 1 2.08 1.31 2.38 1.46.3.15.46.12.63-.07.17-.2.73-.85.92-1.14.2-.3.39-.24.66-.15.27.1 1.7.8 2 .95.29.15.48.22.55.34.07.12.07.68-.17 1.36z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Shop grid: full-width button under each product */
body .woocommerce ul.products li.product .button {
	width: 100%;
	margin-top: 12px !important;
}

/* Single product: space below the header (JS fine-tunes this when the header overlays the page) */
body.single-product #content { padding-top: 48px; }
@media (max-width: 767px) {
	body.single-product #content { padding-top: 36px; }
}

/* Related / up-sell products: gap between the heading and the products */
body .woocommerce .related.products > h2,
body .woocommerce .upsells.products > h2,
body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
	margin-bottom: 24px !important;
}