/**
 * Single product page. Values are the live site's computed styles,
 * recorded in docs/product-page-spec.md §7; nothing here is a guess.
 *
 * Layout: breadcrumb, then a 5/7 two-column row (gallery / summary) at
 * desktop, then the stacked Description and Reviews sections, the
 * callouts band and Related Products, all inside .site-container.
 * Stacks to one column under 992px (the site-wide mobile breakpoint).
 */

.medimart-product {
	--mm-green: #589f3c;
	--mm-green-ring: #2bb436;
	--mm-red: #d40032;
	--mm-red-sale: #ce3333;
	--mm-ink: #010101;
	--mm-ink-2: #222529;
	--mm-grey-text: #7b858a;
	--mm-grey-light: #f5f6f6;
	--mm-grey-border: #e2e5e7;
	--mm-grey-rating: #999;
	--mm-rule: #eeeeef;
	--mm-rule-2: #e7e7e7;
	width: 100%;
	padding: 40px 150px 40px;
	font-family: "Roboto", sans-serif;
	color: var(--mm-ink);
}

/* Live inset = the header container's own padding (20px, 150px from
 * 1440px up) plus `.main-content`'s 140px minus the 10px column gutter:
 * 150px at 1420, 280px at 1920 (confirmed against the user's screenshot),
 * 60px to 1280px, 40px to 768px, 20px to 576px. Narrower than the header
 * on purpose (user decision 2026-09-16: replicate live here). */
@media (min-width: 1440px) {
	.medimart-product {
		padding-left: 280px;
		padding-right: 280px;
	}
}

@media (max-width: 1280px) {
	.medimart-product {
		padding-left: 60px;
		padding-right: 60px;
	}
}

@media (max-width: 768px) {
	.medimart-product {
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 20px;
	}
}

@media (max-width: 576px) {
	.medimart-product {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Breadcrumb ---------------------------------------------------------- */

.medimart-product .medimart-product__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 20px;
	padding: 0;
	font-family: "Roboto", sans-serif;
	font-size: 13px !important; /* WooCommerce core sets .92em at higher specificity. */
	font-weight: 400;
	letter-spacing: 0.2px;
	text-transform: capitalize;
	color: #adadb0;
}

.medimart-product .medimart-product__breadcrumb a {
	color: #adadb0;
	font-size: 13px;
	font-weight: 400;
}

.medimart-product__breadcrumb a:hover {
	color: var(--mm-green);
}

.medimart-product__breadcrumb-sep {
	padding: 0 4px;
}

/* Columns ------------------------------------------------------------- */

.medimart-product__columns {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); /* Bootstrap col-md-5 / col-md-7, as live. */
	gap: 20px;
	align-items: start;
}

.medimart-product__gallery {
	position: relative;
	padding: 0;
}

.medimart-product__summary {
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Gallery ------------------------------------------------------------- */

/* WooCommerce's default layout CSS floats the gallery and summary at 48%
 * each; the grid above owns the columns, so both fill their cell. */
.medimart-product .woocommerce-product-gallery,
.medimart-product div.product div.images,
.medimart-product div.product div.summary {
	float: none !important;
	width: 100% !important;
	margin-bottom: 0;
}

.medimart-product__labels {
	position: absolute;
	top: 12.8px;
	left: 12.8px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
}

.medimart-product .medimart-label {
	display: inline-block;
	color: #fff;
	line-height: 1;
	border-radius: 0;
	padding: 9px 10px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
}

.medimart-product .medimart-label--sale {
	background: var(--mm-red-sale);
}

.medimart-product .medimart-label--hot {
	background: #62b959;
	font-size: 13.7px;
	font-weight: 400;
	text-transform: none;
	padding: 8px 8.7px;
}

.medimart-product__gallery .woocommerce-product-gallery {
	position: relative;
	margin-bottom: 20px;
}

.medimart-product__gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	transition: none !important; /* WooCommerce animates "all" for .5s on this element. */
}

/* Inside the slider the slides form one row whatever their current inline
 * styles. Flexslider builds the viewport first and floats the slides a
 * moment later; in between, WooCommerce's inline-block 25% rule made
 * slides 2+ wrap onto a second row, so the viewport was briefly two
 * squares tall and then snapped up (the visible "jump" on load). */
.medimart-product__gallery .flex-viewport {
	container-type: inline-size;
}

.medimart-product__gallery .flex-viewport > .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
}

/* Every slide is exactly the viewport's width from the first paint. Until
 * flexslider writes its inline widths, WooCommerce's 25% rule sized slides
 * 2+ against the 1600%-wide wrapper (four squares wide and tall); the
 * inline value flexslider then sets is this same number. */
.medimart-product__gallery .flex-viewport .woocommerce-product-gallery__image {
	flex: 0 0 auto;
	width: 100cqw !important;
}

/* The frame: the 1px #e7e7e7 border (2px radius) is on the image
 * viewport; the 30px inner padding is on the LINK inside each slide.
 * Nothing may go on the slide element itself: flexslider measures the
 * slide's padding ("boxPadding") and subtracts it from the distance it
 * translates, so padded slides land short and show their neighbours.
 * Borders on slides also drift by flexslider's fractional slide width,
 * and padding on the viewport shows neighbours inside the padding band
 * because overflow clips at the padding edge. content-box keeps the
 * border outside the height flexslider animates inline. Slides are
 * square so every preview is the same size. */
.medimart-product__gallery .flex-viewport {
	box-sizing: content-box;
	padding: 0;
	border: 1px solid #e7e7e7;
	border-radius: 2px;
	background: #fff;
}

.medimart-product__gallery .woocommerce-product-gallery__image {
	box-sizing: border-box;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: 0;
	background: #fff;
}

.medimart-product__gallery .woocommerce-product-gallery__image a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 30px;
}

/* The frame follows the image's own proportions, as live's owl slider
 * does (a 600x400 photo gives a frame 553x389 at 1920px, not a square;
 * user request 2026-09-17). Portrait photos are the one deviation kept
 * from the earlier round: live lets the frame grow and clips them at the
 * bottom, which the user rejected, so the frame is capped at a square
 * (image height <= its width, i.e. the viewport minus the 30px padding
 * each side) and the whole photo is fitted inside it, never cropped or
 * stretched. The viewport's height itself is animated by flexslider's
 * smoothHeight (see medimart_single_gallery_options()). */
.medimart-product__gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100cqw - 60px);
	object-fit: contain;
}

/* No "loading" flash on a variation change: WooCommerce blocks the cart
 * form with a spinner overlay and fades the gallery out and back in while
 * it swaps the variation image. Neither is wanted (user decision
 * 2026-09-16); the image simply changes. */
.medimart-product__summary form.cart .blockUI,
.medimart-product__summary .blockUI.blockOverlay,
.medimart-product__summary .blockUI.blockMsg {
	display: none !important;
}

.medimart-product__gallery .woocommerce-product-gallery {
	transition: none !important; /* WooCommerce keeps the gallery at opacity 0 until the slider starts; show it instantly, no fade. */
}

/* Before the slider script runs, WooCommerce prints every image stacked
 * at full width, so the column is briefly far too tall and everything
 * snaps up once flexslider builds the viewport and thumbnails. Lay the
 * unscripted state out at its final size: one frame at the first image's
 * own height (capped at a square, like the slides) plus the height of the
 * thumbnail row. (Before init the wrapper is a direct child of the
 * gallery; after init it sits inside .flex-viewport, so these rules stop
 * matching by themselves.) The gallery is a container so the same
 * `100cqw` cap works before the viewport exists. */
.medimart-product__gallery .woocommerce-product-gallery {
	container-type: inline-size;
}

.medimart-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	position: relative;
	box-sizing: content-box;
	max-height: 100cqw;
	overflow: hidden;
	border: 1px solid #e7e7e7;
	border-radius: 2px;
	background: #fff;
}

/* Slides 2+ are taken out of the flow (not display: none, which broke
 * flexslider's measuring) so the placeholder is exactly as tall as the
 * first image. */
.medimart-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image + .woocommerce-product-gallery__image {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
}

.medimart-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) {
	margin-bottom: calc((100% - 24px) / 4 + 10px) !important;
}

/* Prev/next arrows: 30px, vertically centred, hidden until the gallery is
 * hovered, sliding in 10px as they fade (live: .owl-nav on hover). */
.medimart-product__gallery .flex-direction-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 20;
}

.medimart-product__gallery .flex-direction-nav a {
	position: absolute;
	top: 0;
	width: 30px;
	height: 30px;
	font-size: 0;
	color: var(--mm-ink-2);
	background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23222529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.4s ease;
	cursor: pointer;
}

.medimart-product__gallery .flex-direction-nav .flex-prev {
	left: 0;
	transform: translate(-10px, -50%);
}

.medimart-product__gallery .flex-direction-nav .flex-next {
	right: 0;
	transform: translate(10px, -50%) scaleX(-1);
}

.medimart-product__gallery .woocommerce-product-gallery:hover .flex-direction-nav .flex-prev {
	opacity: 1;
	transform: translate(0, -50%);
}

.medimart-product__gallery .woocommerce-product-gallery:hover .flex-direction-nav .flex-next {
	opacity: 1;
	transform: translate(0, -50%) scaleX(-1);
}

/* Live keeps the end-of-strip arrow visible at half opacity on hover. */
.medimart-product__gallery .woocommerce-product-gallery:hover .flex-direction-nav .flex-disabled {
	opacity: 0.5;
	cursor: default;
}

/* Enlarge: WooCommerce's own lightbox trigger, restyled as a plain dark
 * grey "+" (Porto-Font's uniE873 glyph, from the font's SVG source) in the
 * bottom-right corner, shown on hover. It opens the active slide. */
.medimart-product__gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: auto !important;
	right: 8px !important;
	bottom: 8px;
	left: auto;
	width: 30px !important;
	height: 30px !important;
	margin: 0;
	border-radius: 0 !important;
	background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 43 911 912'%3E%3Cpath fill='%233d4246' transform='matrix(1 0 0 -1 0 850)' d='M919 466v-228h-342v-343h-227v343h-342v228h342v341h227v-341h342z'/%3E%3C/svg%3E") no-repeat center / 9px 9px !important; /* Glyph halved from 18px (user, 2026-09-17); the 30px hit area is unchanged. */
	box-shadow: none;
	font-size: 0;
	text-indent: 0 !important;
	opacity: 0;
	transition: opacity 0.1s ease;
	z-index: 25;
}

/* WooCommerce draws a magnifying glass with these two pseudo-elements
 * (from `.woocommerce div.product div.images ...`, which outranks the
 * theme's selector), so they need the override flag. */
.medimart-product__gallery .woocommerce-product-gallery__trigger::before,
.medimart-product__gallery .woocommerce-product-gallery__trigger::after {
	content: none !important;
	display: none !important;
}

.medimart-product__gallery .woocommerce-product-gallery__trigger img {
	display: none;
}

.medimart-product__gallery .woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger {
	opacity: 1;
}

.medimart-product__gallery .woocommerce-product-gallery__trigger:hover {
	opacity: 0.7;
}

/* Arrows and the "+" live inside the image viewport (moved there by
 * single-product.js), so their offsets are relative to the image. */
.medimart-product__gallery .flex-viewport {
	position: relative;
}

.medimart-product__gallery .woocommerce-product-gallery__image a:focus {
	outline: none;
}

.medimart-product__gallery .woocommerce-product-gallery__wrapper {
	position: relative;
}

.medimart-product__gallery .flex-direction-nav {
	top: 50%;
}

/* Thumbnails: one row of four that slides (live: an owl strip synced to
 * the main slider), 8px apart, 1px #f4f4f4 frame, active one framed 2px
 * dark. Overflow scrolls with snap; single-product.js keeps the active
 * thumb in view and the scrollbar is hidden. */
.medimart-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 10px 0 0 !important; /* WooCommerce core zeroes the thumbs list margin at equal specificity. */
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.medimart-product__gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.medimart-product__gallery .flex-control-thumbs li {
	flex: 0 0 calc((100% - 24px) / 4);
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
}

.medimart-product__gallery .flex-control-thumbs img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 1px;
	border: 1px solid #e7e7e7;
	border-radius: 2px;
	background: #fff;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.2s;
}

.medimart-product__gallery .flex-control-thumbs img.flex-active {
	padding: 0;
	border: 2px solid var(--mm-ink-2);
}

/* Lightbox: the page stays visible behind a light dimming layer; the
 * default PhotoSwipe skin is white-on-black, so its controls are inverted. */
.pswp__bg {
	background: #fff !important;
}

.pswp__top-bar,
.pswp__caption {
	background: transparent !important;
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	filter: invert(1);
}

.pswp__counter {
	color: #222529;
}

.pswp__img {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Meta under the gallery: categories, brand, brochure. */
.medimart-product__gallery .product_meta {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	line-height: 22px;
	color: var(--mm-ink-2);
}

.medimart-product__gallery .product_meta .posted_in {
	margin: 30px 0 4px;
	font-weight: 500;
}

.medimart-product__gallery .product_meta .medimart-product__brand {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	font-weight: 500;
}

.medimart-product__gallery .product_meta .sku_wrapper,
.medimart-product__gallery .product_meta .tagged_as {
	display: none;
}

.medimart-product__gallery .product_meta > span,
.medimart-product__gallery .product_meta .medimart-product__brand {
	display: block;
}

.medimart-product__gallery .product_meta a {
	color: #777;
	font-weight: 400;
}

.medimart-product__gallery .product_meta a:hover {
	color: var(--mm-green);
}

.medimart-product__gallery .woocommerce-print-products {
	margin: 0;
}

.medimart-product__gallery .woocommerce-print-products-pdf-link {
	display: inline-flex;
	align-items: center;
	color: #777 !important;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 18.57px;
	background: transparent !important;
	border: 1px solid transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
}

.medimart-product__gallery .woocommerce-print-products-pdf-link i {
	font-size: 26px;
	line-height: 26px;
	margin: 15px 10px 15px 0;
}

/* Header block -------------------------------------------------------- */

.medimart-product .medimart-product__header .product_title {
	margin: 0 0 10px;
	font-family: "Roboto", sans-serif;
	font-size: 30px;
	font-weight: 600 !important;
	letter-spacing: -0.3px;
	text-transform: capitalize;
	line-height: normal;
	color: var(--mm-ink);
}

.medimart-product__short-description {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	color: var(--mm-grey-text);
	line-height: 22px;
}

.medimart-product__short-description p {
	margin: 0;
}

.medimart-product__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 2px solid var(--mm-rule);
	margin-bottom: 15px;
}

.medimart-product__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mm-grey-rating);
	font-size: 13px;
}

.medimart-product__stars {
	display: inline-flex;
	gap: 1px;
	font-size: 13px;
	line-height: 1;
}

.medimart-product__star {
	--star-fill: 100%;
	color: #999;
	background: linear-gradient(90deg, #589f3d var(--star-fill), #999 var(--star-fill));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.medimart-product__sku {
	font-size: 14px;
	line-height: 22px;
	color: rgba(1, 1, 1, 0.6);
	text-transform: capitalize;
	white-space: nowrap;
}

/* Pills --------------------------------------------------------------- */

.medimart-product .medimart-pill {
	display: inline-block;
	width: auto;
	max-width: fit-content;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	padding: 6px 18px;
	white-space: nowrap;
	vertical-align: middle;
}

.medimart-product .medimart-pill--arthritis-friendly {
	background: var(--mm-green);
	color: #fff;
	font-size: 13px;
	padding: 6px 15px;
	margin: 10px 0;
}

.medimart-product .medimart-pill--online-only,
.medimart-product .medimart-pill--online-only-sale {
	background: transparent;
	color: var(--mm-green);
	border: 1px solid var(--mm-green);
}

.medimart-product .medimart-pill--while-stocks-last,
.medimart-product .medimart-pill--clearance {
	background: var(--mm-red);
	color: #fff;
}

.medimart-product .medimart-pill--refurbished {
	background: #6b6c6b;
	color: #fff;
}

/* Price --------------------------------------------------------------- */

/* WooCommerce core colours `div.product p.price` and its ins/del at
 * higher specificity than a single class; the live values need !important. */
.medimart-product__summary > .price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 2px 0 10px; /* Was 20px bottom; tighter run into the Afterpay line (user, 2026-09-18). */
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: var(--mm-ink) !important;
}

.medimart-product__summary .price .amount {
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	color: var(--mm-ink) !important;
}

.medimart-product__summary > .price .amount {
	font-size: 26px;
}

.medimart-product__summary .price ins {
	text-decoration: none;
}

.medimart-product__summary .price ins .amount {
	font-size: 24px;
}

/* Order: sale price, struck-through original, then any pills (live). */
.medimart-product__summary .price ins {
	order: 0;
}

.medimart-product__summary .price del {
	order: 1;
	margin: 0 3px 0 0;
	font-size: 14px;
	color: rgba(1, 1, 1, 0.6) !important;
}

.medimart-product__summary .price .medimart-pill {
	order: 2;
}

.medimart-product__summary .price del .amount {
	font-size: 18px;
	font-weight: 600;
	color: var(--mm-ink) !important;
	text-decoration: line-through;
}

.medimart-product__summary .price .medimart-pill {
	font-family: "Roboto", sans-serif;
}

.medimart-product__summary .price .medimart-pill--clearance {
	order: 99;
}

.medimart-product__out-of-stock {
	margin: 0 0 12px;
	color: var(--mm-red);
	font-size: 16px;
	font-weight: 600;
}

/* When the whole product is out of stock the per-variation pill would
 * repeat the message; one red line is the approved behaviour. */
.medimart-product--out-of-stock .woocommerce-variation-availability {
	display: none;
}

/* Payment lines from medimart-core keep their own base styles; theme
 * overrides to match the live product page.
 *
 * Vertical rhythm (user, 2026-09-18): the three lines are 32px rows (the
 * Afterpay one is 38px because of its badge) with their text centred, so
 * equal margins between them read as equal spacing. The legacy 5px/10px
 * paddings are dropped in favour of those margins. */
.medimart-product__summary #ndis-payment-widget {
	padding: 0;
	margin: 0 0 8px;
}

.medimart-product__summary #myagedcare-payment-widget {
	padding: 0;
	margin: 0 0 10px; /* Plus form.cart's 10px top margin: the 20px before the cart form is unchanged. */
}

.medimart-product__summary .ndis-description,
.medimart-product__summary .myagedcare-description {
	font-family: "Roboto", sans-serif;
	font-size: 14px; /* Was 15px (user, 2026-09-18). */
	font-weight: 300; /* Was 400; lighter payment-line text (user, 2026-09-17). */
	color: var(--mm-ink) !important;
	text-transform: capitalize;
}

/* The ⓘ links match the Afterpay one. Square's component sizes its ⓘ as
 * `font-size: smaller` inside the 14px message and it cannot be styled
 * from outside its shadow tree, so these use the same computation from
 * the same 14px row: all three come out at 11.67px (user, 2026-09-18). */
.medimart-product__summary .ndis-more-info a,
.medimart-product__summary .myagedcare-more-info a {
	font-size: smaller;
}

/* The widgets are flex rows; without align-self the logos stretch to the
 * 32px line height and squash (My Aged Care looked blurry because of it). */
.medimart-product__summary img.ndis-logo {
	width: 82px;
	height: auto;
	align-self: center;
	margin: 0 5px 0 10px;
}

.medimart-product__summary img.myagedcare-logo {
	width: 125px;
	height: auto;
	align-self: center;
	margin: 0 5px 0 10px;
}

.medimart-product__summary square-placement {
	display: block;
	margin: 0 0 4px; /* Was 16px bottom. Measured 2026-09-18: with 4px here the Afterpay text sits 25px above the NDIS text, the same as NDIS to My Aged Care (user request for even spacing). */
	font-family: "Roboto", sans-serif;
	font-weight: 300; /* Inherited into the Afterpay component's shadow tree; same weight as the NDIS / My Aged Care lines. */
	color: #000;
	/* Square's component reads these custom properties inside its shadow tree. */
	--messaging-font-size: 14px; /* Was the component's 16px default (user, 2026-09-18). */
}

.medimart-product__free-shipping {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	background: rgba(88, 159, 60, 0.1);
	padding: 10px;
	border-radius: 13px;
	font-size: 1.05em;
	font-weight: 600;
	color: #232529;
	line-height: 1.6875;
}

.medimart-product__free-shipping a {
	color: #59b049;
}

/* Variations ---------------------------------------------------------- */

.medimart-product__summary table.variations {
	width: 100%;
	border: 0;
	margin: 0;
}

.medimart-product__summary table.variations td,
.medimart-product__summary table.variations th {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

.medimart-product__summary table.variations th.label label {
	display: block;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--mm-ink);
}

.medimart-product__summary form.cart table.variations select {
	appearance: none;
	-webkit-appearance: none;
	width: 300px !important; /* WooCommerce core sets 100% / min-width 75% at higher specificity. */
	min-width: 0 !important;
	max-width: 100%;
	height: 48px;
	padding: 13px 40px 13px 15px;
	border: 1px solid #adadb2;
	border-radius: 61px;
	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23222529' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
	font-size: 13.7px;
	font-weight: 600;
	text-transform: uppercase;
	color: #777;
}

.medimart-product__summary form.cart table.variations select.medimart-swatch-select {
	position: absolute;
	width: 1px !important;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.medimart-product__summary table.variations td.value {
	position: relative;
}

.medimart-product__summary table.variations td.value {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

/* WooCommerce toggles this with visibility, so it always holds its place;
 * on the same row as the swatches it no longer pushes the rule down, and
 * the row's align-items centres it against the 45px swatches. Live's
 * pill is 50x25: 11px text on an 11px line inside 7px 8px padding. The
 * selector carries form.cart and td.value because WooCommerce's own
 * `.woocommerce div.product form.cart .reset_variations` (0.83em) beat
 * the plain class selector and left it 13px on a 32px line, 46px tall. */
.medimart-product__summary form.cart td.value a.reset_variations {
	display: inline-block;
	margin: 0;
	padding: 7px 8px;
	background: #f4f4f4;
	color: var(--mm-grey-text);
	font-size: 11px;
	line-height: 11px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	border-radius: 0;
}

.medimart-swatches {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.medimart-swatch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin: 4px 8px 4px 0;
	padding: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px #c6c6c6;
	cursor: pointer;
}

.medimart-swatch.is-selected {
	box-shadow: 0 0 0 2px var(--mm-green-ring);
}

.medimart-swatch:hover {
	box-shadow: 0 0 0 2px var(--mm-green-ring);
}

.medimart-swatch__color,
.medimart-swatch__image {
	display: block;
	width: 41px;
	height: 41px;
	border-radius: 50%;
	object-fit: cover;
}

.medimart-swatch__tooltip {
	position: absolute;
	bottom: 56px;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	padding: 5px 0;
	background: #000;
	color: #fff;
	font-size: 16px;
	text-align: center;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 10;
}

.medimart-swatch__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: #000;
}

.medimart-swatch:hover .medimart-swatch__tooltip,
.medimart-swatch:focus .medimart-swatch__tooltip {
	opacity: 1;
	visibility: visible;
}

/* Selected-variation block: sits inside the bordered section above the
 * quantity row (live: 12px gap, no rule between them). */
.medimart-product__summary .single_variation_wrap {
	margin: 16px 0 0;
	padding: 20px 0 16px;
	border-top: 1px solid var(--mm-rule-2);
	border-bottom: 1px solid var(--mm-rule-2);
}

.medimart-product__summary .woocommerce-variation-price > br {
	display: none;
}

.medimart-product__summary .woocommerce-variation.single_variation {
	margin: 0 0 12px;
}

.medimart-product__summary .woocommerce-variation.single_variation:empty {
	display: none;
	margin: 0;
}

.medimart-product__summary .woocommerce-variation-price .price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 2px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	color: var(--mm-ink) !important;
}

.medimart-product__summary .woocommerce-variation-price .price .amount {
	font-size: 24px;
}

.medimart-product__summary .woocommerce-variation-price .price del .amount {
	font-size: 18px;
}

/*
 * Selected variation's stock pill, live's Porto bar: grey pill, grey
 * text, a coloured cap on the left, light green (#2fc589) in stock and
 * red out of stock. Live's sizes (measured 2026-10-13): 22px tall, 9px
 * text, 39px side padding. The `.single-product ... p.stock` prefix is
 * there to outrank WooCommerce's `.woocommerce div.product p.stock`
 * (0,3,2), which had been forcing its olive colour and 0.92em size.
 */
.single-product .medimart-product__summary .woocommerce-variation-availability p.stock {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: 8px 0 0;
	padding: 0 39px;
	line-height: 22px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	color: #777;
	background: #f3f3f3;
	border-radius: 11px;
}

.single-product .medimart-product__summary .woocommerce-variation-availability p.stock::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 100%;
	background: #2fc589;
}

.single-product .medimart-product__summary .woocommerce-variation-availability p.stock.out-of-stock::before {
	background: #e12d2d;
}

/* Cart form ----------------------------------------------------------- */

.medimart-product__summary form.cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 10px 0 0;
	margin-bottom: 24px !important; /* WooCommerce's 2em (32px) outranks this selector; gap to the Medimart Alternative pill, settled at 24px (user, 2026-09-17). */
	padding: 20px 0 16px;
	border-top: 1px solid var(--mm-rule-2);
}

/* Variable products: a 2px rule above the options, and the selected
 * variation + quantity + button in their own 1px-ruled section. */
.medimart-product__summary form.cart.variations_form {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 0 0;
	border-top: 2px solid var(--mm-rule);
}

.medimart-product__summary form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.medimart-product__quantity-row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0 0 10px;
}

.medimart-product__summary .quantity {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 184px;
	height: 54px;
	padding: 3px 10px;
	border-radius: 77px;
	background: var(--mm-grey-light);
}

.medimart-product__summary .quantity input.qty {
	width: 44px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 19.2px;
	font-weight: 700;
	color: var(--mm-ink-2);
	appearance: textfield;
	-moz-appearance: textfield;
}

.medimart-product__summary .quantity input.qty::-webkit-outer-spin-button,
.medimart-product__summary .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.medimart-qty-btn {
	width: 30px;
	height: 48px;
	border: 0;
	background: transparent;
	font-size: 16px;
	color: var(--mm-ink-2);
	cursor: pointer;
}

.medimart-product__click-collect {
	font-size: 16px;
	font-weight: 300;
	color: #525357;
	line-height: 1.4;
}

.medimart-product__click-collect strong {
	color: #5cb85c;
	font-weight: 600;
}

.medimart-product__summary form.cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 265px;
	max-width: 100%;
	height: 48px;
	padding: 0 24px;
	background: var(--mm-green);
	border: 1px solid var(--mm-green);
	border-radius: 61px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: 48px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.medimart-product__summary form.cart .single_add_to_cart_button:hover {
	background: #4f8f36;
}

/* WooCommerce's core button CSS recolours .disabled buttons purple at a
 * higher specificity; live keeps the green at half opacity. */
.medimart-product__summary form.cart .single_add_to_cart_button.disabled,
.medimart-product__summary form.cart .single_add_to_cart_button:disabled {
	background: var(--mm-green) !important;
	color: #fff !important;
	opacity: 0.5;
	cursor: not-allowed;
}

/* Add to Cart and the optional hire-quote button share one row. */
.medimart-product__summary form.cart:not(.variations_form),
.medimart-product__summary form.cart .woocommerce-variation-add-to-cart {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 10px;
}

.medimart-product__summary form.cart:not(.variations_form) .medimart-product__quantity-row,
.medimart-product__summary form.cart .woocommerce-variation-add-to-cart .medimart-product__quantity-row {
	flex-basis: 100%;
}

/* `a.button` is styled grey by WooCommerce core at higher specificity. */
.medimart-product a.button.medimart-quote-button,
.medimart-product .medimart-quote-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 265px;
	max-width: 100%;
	height: 48px;
	padding: 11px 24px;
	background: transparent !important;
	border: 1px solid var(--mm-green) !important;
	border-radius: 71px;
	color: var(--mm-green) !important;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: 24px;
	transition: background 0.15s ease, color 0.15s ease;
}

.medimart-product a.button.medimart-quote-button:hover,
.medimart-product .medimart-quote-button:hover {
	background: var(--mm-green) !important;
	color: #fff !important;
}

/* POA */
.medimart-product__quote {
	margin: 15px 0 0;
	padding: 16px 0;
	color: var(--mm-grey-text);
	font-size: 18px;
	line-height: 1.4;
}

.medimart-product__quote p {
	margin: 0 0 16px;
}

.medimart-product__quote-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Medimart Alternative ------------------------------------------------ */

.medimart-alternative {
	width: 100%;
	margin: 0 0 16px; /* The cart form's bottom margin above sets the gap. */
}

.medimart-alternative__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 13px;
	background: var(--mm-green);
	color: #fff;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

/* Optional heading under the badge (Product Data > Alternative heading),
 * and several picks stack 8px apart (2026-10-29). */
.medimart-alternative__heading {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mm-ink);
}

.medimart-alternative__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.medimart-alternative__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	border: 1.5px solid rgba(88, 159, 60, 0.3);
	border-radius: 14px;
	background: rgba(88, 159, 60, 0.04);
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.medimart-alternative__card:hover {
	border-color: var(--mm-green);
	box-shadow: 0 6px 20px rgba(88, 159, 60, 0.13);
}

.medimart-alternative__image {
	flex: 0 0 80px;
	width: 80px;
}

.medimart-alternative__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.medimart-alternative__name {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--mm-ink);
}

.medimart-alternative__price,
.medimart-alternative__price .price {
	display: block;
	margin: 0 0 6px;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--mm-ink);
}

.medimart-alternative__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mm-green);
	font-size: 14px;
	font-weight: 500;
}

/* PayPal's Pay Later message and smart buttons: not on the product page
 * (user decision; live hid the message with CSS and the buttons are off). */
.medimart-product .ppcp-messages,
.medimart-product [id^="ppc-button"],
.medimart-product #ppcp-recaptcha-v2-container {
	display: none !important;
}

/* Bundle ("Frequently Bought Together") ------------------------------- */

.medimart-bundle {
	width: 100%;
	margin: 12px 0 16px;
	border: 1px solid var(--mm-grey-border);
	border-radius: 4px;
	background: #fff;
}

.medimart-bundle__header {
	padding: 10px 20px;
	background: #f0f1f2;
	border-radius: 4px 4px 0 0;
}

.medimart-bundle__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--mm-green);
}

.medimart-bundle__body {
	padding: 16px 20px 20px;
}

.medimart-bundle__pitch {
	margin: 0 0 12px;
	color: var(--mm-grey-text);
	font-size: 15px;
}

.medimart-bundle__images {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.medimart-bundle__image {
	display: flex;
	align-items: center;
	gap: 6px;
}

.medimart-bundle__image img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border: 1px solid var(--mm-grey-border);
	border-radius: 4px;
	background: #fff;
}

.medimart-bundle__image:not(:last-child)::after {
	content: "+";
	font-size: 18px;
	color: var(--mm-grey-text);
}

.medimart-bundle__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.medimart-bundle__item {
	padding: 8px 0;
	border-bottom: 1px solid var(--mm-grey-border);
}

.medimart-bundle__item:last-child {
	border-bottom: 0;
}

.medimart-bundle__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--mm-ink);
	cursor: pointer;
}

.medimart-bundle__row input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mm-green);
}

.medimart-bundle__name a {
	color: var(--mm-green);
}

.medimart-bundle__name a:hover {
	text-decoration: underline;
}

.medimart-bundle__price,
.medimart-bundle__price .price {
	display: inline-flex;
	gap: 6px;
	margin: 0 0 0 auto;
	font-family: "Roboto", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--mm-ink) !important;
}

.medimart-bundle__price del {
	font-weight: 400;
	color: var(--mm-grey-text) !important;
}

.medimart-bundle__in-cart {
	color: var(--mm-grey-text);
	font-size: 13px;
}

.medimart-bundle__item.is-in-cart .medimart-bundle__row {
	opacity: 0.6;
	cursor: default;
}

.medimart-bundle__variation {
	display: block;
	margin: 8px 0 0 26px;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid #adadb2;
	border-radius: 6px;
	font-size: 14px;
}

.medimart-bundle__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.medimart-bundle__total {
	font-size: 16px;
	color: var(--mm-ink);
}

.medimart-bundle__total-label {
	font-weight: 600;
	margin-right: 6px;
}

.medimart-bundle__total-amount del {
	margin-right: 6px;
	color: var(--mm-grey-text);
}

.medimart-bundle__total-amount ins {
	text-decoration: none;
	font-weight: 700;
}

/* "You save 10% ($12.50)": green highlight under the total when every
 * member is selected and the bundle carries a discount (user request
 * 2026-09-17; live showed only the struck-through total). */
.medimart-bundle__saving {
	display: inline-block;
	margin: 6px 0 0;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba(88, 159, 60, 0.12);
	color: var(--mm-green);
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
}

.medimart-bundle__saving[hidden] {
	display: none;
}

.medimart-product .medimart-bundle__button,
.medimart-product .medimart-bundle__button.button {
	padding: 8px 12px;
	background: var(--mm-green) !important;
	border: 0;
	border-radius: 0;
	color: #fff !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
}

.medimart-product .medimart-bundle__button:disabled,
.medimart-product .medimart-bundle__button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.medimart-bundle__message {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--mm-green);
}

.medimart-bundle__message.is-error {
	color: var(--mm-red);
}

/* Loyalty points line from the plugin: icon and text on one centred line. */
.medimart-product__summary .wc-points-rewards-product-message,
.medimart-product__summary p.points {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 10px 0 20px;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: var(--mm-ink);
}

.medimart-product__summary .wc-points-rewards-product-message img,
.medimart-product__summary p.points img {
	width: 20px;
	height: auto;
	margin: 0 !important;
	vertical-align: middle;
}

/* Simple products: the 1px rule under Add to Cart that live draws (its
 * cart form's border-bottom, 17px below the button); it had gone missing.
 * Variable products already have theirs on .single_variation_wrap. */
.medimart-product__summary form.cart:not(.variations_form) {
	border-bottom: 1px solid var(--mm-rule-2);
}

/* When the loyalty line comes straight after the cart form, drop the
 * form's 24px bottom margin (kept for the Alternative pill and the bundle
 * box) so the line sits where live has it: 10px under the rule on simple
 * products (27px below the button), 37px below the button on variable
 * ones. Was 50px / 51px (user, 2026-10-15). */
.medimart-product__summary form.cart:not(.variations_form):has(+ .wc-points-rewards-product-message, + p.points) {
	margin-bottom: 0 !important;
}

.medimart-product__summary form.cart.variations_form:has(+ .wc-points-rewards-product-message, + p.points) {
	margin-bottom: 10px !important;
}

/* Variable products show only the "earn up to" line under the form; the
 * per-variation message the plugin injects into the variation block was
 * hidden on live too (legacy snippet 174). */
.medimart-product__summary .product-type-variable .wc-points-rewards-product-message,
.medimart-product__item.product-type-variable .wc-points-rewards-product-message {
	display: none;
}

/* Sections ------------------------------------------------------------ */

.medimart-product__sections {
	margin-top: 15px; /* Was 30px; halved so the brochure button sits closer to the rule (user, 2026-09-17). */
}

.medimart-product__section {
	padding: 30px 0 50px;
	border-top: 1px solid var(--mm-grey-border);
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 22px;
	color: var(--mm-grey-text);
}

.medimart-product__section-heading,
.medimart-product__section > h2:first-child {
	margin: 0 0 18.2px;
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--mm-ink);
}

/* Product content headings: every h2/h3 inside the description is the
 * green 20px/500 "Purpose & Benefits" style (user decision 2026-09-16:
 * make it the default rather than depend on the level the content team
 * happened to pick). 2026-10-13 (user): every content heading is
 * Medimart green, so h1 (19 products, grey 32px before) joins the h2/h3
 * style, h4 to h6 drop the lighter #2bb436 for the same green, and a
 * paragraph that is nothing but bold text, the other way the content team
 * wrote headings ("Features:", 119 products, grey before), is green too.
 * Those paragraphs are tagged .medimart-desc-heading by
 * medimart_single_tag_bold_headings() in inc/woocommerce-single.php. */
.medimart-product__section--description h1,
.medimart-product__section--description h2:not(.medimart-product__section-heading),
.medimart-product__section--description h3 {
	margin: 0 0 20px;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--mm-green);
}

.medimart-product__section--description h4,
.medimart-product__section--description h5,
.medimart-product__section--description h6 {
	margin: 0 0 14px;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--mm-green);
}

.medimart-product__section--description .medimart-desc-heading,
.medimart-product__section--description .medimart-desc-heading strong,
.medimart-product__section--description .medimart-desc-heading b {
	color: var(--mm-green);
}

.medimart-product__section--description p,
.medimart-product__section--description li {
	margin: 0 0 10px;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25.6px;
	color: var(--mm-grey-text);
}

.medimart-product__section--description li {
	margin: 0;
}

.medimart-product__section--description strong {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	color: #7b858a;
}

.medimart-product__section--description ul,
.medimart-product__section--description ol {
	padding-left: 32px;
	list-style: disc;
	margin: 0 0 16px;
}

.medimart-product__section--description table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 0;
}

.medimart-product__section--description td,
.medimart-product__section--description th {
	padding: 8px;
	border: 0;
	text-align: left;
	vertical-align: middle;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 22px;
	color: var(--mm-grey-text);
}

.medimart-product__section--description th {
	font-weight: 700;
}

.medimart-product__section--description iframe {
	max-width: 100%;
}

/* Reviews ------------------------------------------------------------- */

.medimart-reviews {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 30px;
	font-family: "Roboto", sans-serif;
}

.medimart-reviews .medimart-reviews__title {
	margin: 0 0 25px;
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--mm-green);
}

/* CusRev summary: two halves side by side, no background, no border. */
.medimart-reviews .cr-summaryBox-wrap {
	display: flex;
	margin: 0 0 16px;
	padding: 2px;
	background: transparent !important; /* CusRev paints it #f9f9f9. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.medimart-reviews .cr-overall-rating-wrap,
.medimart-reviews .ivole-summaryBox {
	flex: 1 1 50%;
	padding: 10px;
	border: 0;
}

.medimart-reviews .cr-overall-rating-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.medimart-reviews .cr-average-rating {
	font-family: "Roboto", sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 50px;
	color: #0e252c;
}

.medimart-reviews .cr-total-rating-count {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 25px;
	color: #0e252c;
}

.medimart-reviews .cr-rating-icon svg,
.medimart-reviews .crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon,
.medimart-reviews .cr-average-rating-stars svg {
	fill: var(--mm-green);
}

.medimart-reviews .cr-histogramTable {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.medimart-reviews .cr-histogramTable td,
.medimart-reviews .ivole-histogramRow > div {
	padding: 0 4.8px 3.2px;
	border: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 22px;
	color: #0e252c;
	background: transparent;
}

.medimart-reviews .cr-histogramTable td a,
.medimart-reviews .ivole-histogramRow > div .cr-histogram-a {
	color: #0e252c;
	text-decoration: none;
}

.medimart-reviews .ivole-histogramCell3 {
	text-align: right;
}

/* Bars: 10px, rounded ends on the track and the fill. */
.medimart-reviews .ivole-meter {
	height: 10px;
	background: #eaeaea !important; /* CusRev: grey gradient + inset shadows. */
	background-image: none !important;
	border: 0;
	border-radius: 15px;
	box-shadow: none !important;
	overflow: hidden;
}

/* CusRev draws a translucent white highlight strip across the top of the
 * fill with a pseudo-element; that was the white line under the bar's
 * top edge. */
.medimart-reviews .ivole-meter .ivole-meter-bar::before,
.medimart-reviews .ivole-meter .ivole-meter-bar::after {
	display: none !important;
	content: none !important;
}

.medimart-reviews .ivole-meter .ivole-meter-bar,
.medimart-reviews .ivole-summaryBox .cr-bar-fill,
.medimart-reviews .cr-histogram-bar-fill {
	height: 10px;
	background: var(--mm-green) !important; /* CusRev paints a yellow gradient with an inset shadow. */
	background-image: none !important;
	border: 0;
	border-radius: 15px;
	box-shadow: none !important;
	font-size: 0;
	color: transparent;
}

/* Histogram rows filter the list in place (single-product.js).
 * Customer Reviews 5.124 (2026-10-15) builds the histogram from divs (a flex
 * row per rating) instead of a table, and labels each row with the number
 * and an SVG star instead of "5 star"; the td rules stay for the old
 * markup, the div rules cover the new one. */
.medimart-reviews .ivole-histogramRow {
	cursor: pointer;
	align-items: center;
	border-radius: 15px;
}

.medimart-reviews .cr-histogram-rating-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

/* Beats CusRev's `.cr-histogramTable .ivole-histogramRow
 * .cr-histogram-rating-icon` yellow (#FFBC00). */
.medimart-reviews .cr-histogramTable .ivole-histogramRow .cr-histogram-rating-icon {
	color: var(--mm-green);
	fill: var(--mm-green);
}

.medimart-reviews .ivole-histogramRow.is-active {
	background: rgba(88, 159, 60, 0.12);
}

.medimart-reviews .ivole-histogramRow:not(.is-active):hover {
	background: rgba(88, 159, 60, 0.06);
}

.medimart-reviews .ivole-histogramRow.is-active > div,
.medimart-reviews .ivole-histogramRow.is-active .cr-histogram-a,
.medimart-reviews .ivole-histogramRow.is-active .cr-histogram-rating-value {
	color: var(--mm-green);
	font-weight: 700;
}

.medimart-reviews .ivole-histogramRow.is-active td {
	background: rgba(88, 159, 60, 0.12);
}

.medimart-reviews .ivole-histogramRow.is-active td:first-child {
	border-radius: 15px 0 0 15px;
}

.medimart-reviews .ivole-histogramRow.is-active td:last-child {
	border-radius: 0 15px 15px 0;
}

.medimart-reviews .ivole-histogramRow.is-active td,
.medimart-reviews .ivole-histogramRow.is-active td a,
.medimart-reviews .ivole-histogramRow.is-active td span {
	color: var(--mm-green);
	font-weight: 700;
}

.medimart-reviews .ivole-histogramRow:hover td {
	background: rgba(88, 159, 60, 0.06);
}

.medimart-reviews__filter-note {
	padding: 10px 14px;
	background: rgba(88, 159, 60, 0.08);
	border-left: 3px solid var(--mm-green);
	color: var(--mm-ink);
}

.medimart-reviews__form .medimart-reviews__rating-error {
	margin: 6px 0 0;
	color: var(--mm-red);
	font-size: 14px;
}

.medimart-reviews__filter-note {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--mm-grey-text);
	scroll-margin-top: 24px; /* filtering scrolls here; keep the line clear of the top edge */
}

body.admin-bar .medimart-reviews__filter-note {
	scroll-margin-top: 56px;
}

.medimart-reviews__filter-note button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mm-green);
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
}

.medimart-reviews__leave {
	display: block;
	margin: 15px auto 0;
	padding: 5px 20px;
	background: linear-gradient(rgb(88, 159, 60) 0%, rgb(79, 143, 54) 100%);
	border: 1px solid var(--mm-green);
	border-radius: 0;
	color: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0.2px;
	cursor: pointer;
}

/* With no reviews there is no rating summary to centre under; the button
 * sits directly beneath "There are no reviews yet", left aligned. */
.medimart-reviews__summary > .medimart-reviews__leave {
	margin-left: 0;
	margin-right: 0;
}

.medimart-reviews__more {
	display: inline-block;
	margin: 12px 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--mm-green);
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	cursor: pointer;
}

.medimart-reviews__more:hover {
	text-decoration: underline;
}

.medimart-reviews__list .commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One review: avatar in the left gutter, name with the date directly
 * under it, stars top-right, 2px divider below. */
.medimart-reviews__list .commentlist > li {
	position: relative;
	margin: 0 0 25px;
	padding: 0 0 0 40px;
	border-bottom: 2px solid #eaeae9;
}

.medimart-reviews__list .comment_container {
	display: block;
}

.medimart-reviews__list .comment_container img.avatar {
	position: absolute;
	top: 0;
	left: -30px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
}

.medimart-reviews__list .comment-text {
	margin: 0;
	padding: 0 20px 20px;
	border: 0;
}

.medimart-reviews__list .comment-text .star-rating {
	float: right;
	margin: 10px 0 0;
	font-size: 11px;
	color: var(--mm-green);
}

.medimart-reviews__list .comment-text .star-rating::before {
	color: rgba(0, 0, 0, 0.16);
}

.medimart-reviews__list .comment-text .meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

.medimart-reviews__list .comment-text .meta .woocommerce-review__author {
	display: block;
	font-size: 16px;
	font-weight: 400;
	text-transform: capitalize;
	color: #000;
}

.medimart-reviews__list .comment-text .meta .woocommerce-review__dash {
	display: none;
}

.medimart-reviews__list .comment-text .meta .woocommerce-review__published-date {
	display: block;
	font-size: 12px;
	color: rgba(1, 1, 1, 0.6);
}

.medimart-reviews__list .comment-text .description {
	margin: 15px 0 0;
	font-size: 16px;
	line-height: 25.6px;
	color: #000;
}

.medimart-reviews__list .comment-text .description p {
	margin: 0;
}

/* "Leave a review" form: a full-width row beneath both columns. */
.medimart-reviews__form {
	grid-column: 1 / -1;
	margin-top: 16px;
}

.medimart-reviews__form .comment-form-author,
.medimart-reviews__form .comment-form-email,
.medimart-reviews__form .comment-form-medimart-name {
	margin: 0 0 16px;
}

.medimart-reviews__form #commentform {
	margin: 20px 0 0;
	padding: 30px 30px 22px;
	background: rgba(217, 217, 217, 0.11);
	border-radius: 5px;
}

.medimart-reviews__form .comment-reply-title {
	display: inline-block;
	margin: 0 0 14px;
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 500;
	text-transform: capitalize;
	color: var(--mm-ink);
}

.medimart-reviews__form label {
	display: block;
	margin: 0 10px 5px 0;
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 22px;
	color: var(--mm-grey-text);
}

.medimart-reviews__form input[type="text"],
.medimart-reviews__form input[type="email"],
.medimart-reviews__form textarea {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0;
	background: #fff;
	font-family: "Roboto", sans-serif;
	font-size: 13.6px;
	line-height: 1.43;
	color: #777;
}

.medimart-reviews__form textarea {
	min-height: 173px;
	resize: vertical;
}

.medimart-reviews__form .comment-form-rating {
	margin: 0 0 16px;
}

.medimart-reviews__form p.stars a {
	color: var(--mm-green);
}

.medimart-reviews__form input.cr-single-product-rev-submit,
.medimart-reviews__form #submit {
	display: inline-block;
	padding: 10px 30px !important;
	background: linear-gradient(rgb(88, 159, 60), rgb(79, 143, 54)) !important; /* WooCommerce's #respond input#submit is grey at higher specificity. */
	border: 1px solid var(--mm-green) !important;
	border-radius: 61px !important;
	color: #fff !important;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}

/* Callouts ------------------------------------------------------------ */

.medimart-callouts {
	margin: 20px 0 30px;
	padding: 40px 30px;
	background: rgba(217, 217, 217, 0.11);
	border-radius: 8px;
}

.medimart-callouts__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.medimart-callouts__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.medimart-callouts__card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 25px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.medimart-callouts__card .medimart-callouts__icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.medimart-callouts__tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.medimart-callouts__tile {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: rgba(88, 159, 60, 0.08);
	border-radius: 8px;
}

.medimart-callouts__tile .medimart-callouts__icon {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.medimart-callouts__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--mm-ink);
	text-transform: capitalize;
}

.medimart-callouts__card p {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mm-grey-text);
}

/* A card with a link is an <a>: looks identical, only the pointer changes. */
a.medimart-callouts__card,
a.medimart-callouts__card:hover,
a.medimart-callouts__card:focus {
	color: inherit;
	text-decoration: none;
}

/* Related ------------------------------------------------------------- */

.medimart-product .related.products {
	margin: 10px 0 0;
}

.medimart-product .related.products > h2 {
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-family: "Roboto", sans-serif;
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.26px;
	text-transform: capitalize;
	color: var(--mm-ink);
}

/* Five cards in one row, 10px apart, inheriting the category card
 * (product-card.css). WooCommerce core's columns-5 float/width rules and
 * its `.first { clear: both }` are neutralised by the grid.
 *
 * The "invisible first card" bug: WooCommerce core gives ul.products a
 * clearfix (`::before`/`::after { content: " "; display: table }`). In a
 * grid container those pseudo-elements become real grid items, so the
 * `::before` silently takes cell 1 and pushes the first product to cell 2
 * and the fifth onto a new row. Remove them. */
.medimart-product .related.products ul.products::before,
.medimart-product .related.products ul.products::after {
	content: none !important;
	display: none !important;
}

.medimart-product .related.products ul.products,
.medimart-product .related.products ul.products.columns-5,
.medimart-product .related.products ul.products.columns-6 {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
}

.medimart-product .related.products ul.products li.product,
.medimart-product .related.products ul.products li.product.first,
.medimart-product .related.products ul.products li.product.last {
	clear: none !important;
	float: none !important;
	width: auto !important;
	margin: 0 0 20px !important;
	visibility: visible;
	opacity: 1;
}

/* Six cards in the 880px content width at 1440px leaves each card 138px,
 * too narrow for the price and View Product pill side by side, so the
 * pill ran out of the card (2026-10-29). Same fix as the homepage
 * sliders (page-blocks.css): the row wraps, and with the price on a zero
 * basis it breaks only when the two can't share the line. Phones already
 * stack them (product-card.css). */
@media (min-width: 992px) {
	.medimart-product .related.products ul.products li.product div.medimart-product-actions {
		flex-wrap: wrap;
	}

	.medimart-product .related.products ul.products li.product div.medimart-product-actions__price {
		flex: 1 1 0;
	}
}

/* Mobile -------------------------------------------------------------- */

@media (max-width: 991px) {
	.medimart-product__columns {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.medimart-product__gallery,
	.medimart-product__summary {
		padding: 0;
	}

	/* Live hides the labels, thumbnails and the categories/brand/brochure
	 * row on mobile; kept as-is for Stage 1 (decision in the spec). */
	.medimart-product__labels,
	.medimart-product__gallery .flex-control-thumbs,
	.medimart-product__gallery .product_meta {
		display: none;
	}

	/* Thumbnails are hidden here, so the pre-init layout reserves no room
	 * for them. */
	.medimart-product__gallery .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image + .woocommerce-product-gallery__image) {
		margin-bottom: 0 !important;
	}

	.medimart-product__header .product_title {
		font-size: 24px;
	}

	/* Breathing room between the gallery and the title when stacked. */
	.medimart-product__header {
		margin-top: 16px;
	}

	/* Selected-variation block: even 12px gaps between the top rule, the
	 * price, the quantity row and the bottom rule. */
	.medimart-product__summary .single_variation_wrap {
		padding: 12px 0 12px;
	}

	.medimart-product__summary .woocommerce-variation.single_variation {
		margin: 0 0 12px;
	}

	.medimart-product__summary .woocommerce-variation-price .price {
		margin: 0;
	}

	/* Tighter run from the cart button rule through the loyalty line to
	 * the next block (about half the desktop spacing). */
	.medimart-product__summary form.cart {
		padding-bottom: 8px;
		margin-bottom: 16px !important; /* WooCommerce sets 2em with higher specificity. */
	}

	/* 10px under the cart rule, as desktop (was 5px, tight once the
	 * simple-product rule came back, 2026-10-15). */
	.medimart-product__summary .wc-points-rewards-product-message,
	.medimart-product__summary p.points {
		margin: 10px 0 10px;
	}

	/* Points & Rewards follows its message with a bare <br>. */
	.medimart-product__summary .wc-points-rewards-product-message + br,
	.medimart-product__summary p.points + br {
		display: none;
	}

	.medimart-product__sections {
		margin-top: 15px;
	}

	.medimart-product__sections > .medimart-product__section:first-child {
		padding-top: 15px;
		border-top: 0;
	}

	.medimart-alternative,
	.medimart-bundle {
		margin: 6px 0 8px;
	}

	/* Bundle rows: a long product name wrapped onto its own line below the
	 * tick box. The name now takes the space between the tick box and the
	 * price and wraps within it; tick box and price sit on its first line. */
	.medimart-bundle__row {
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.medimart-bundle__row input {
		flex: 0 0 auto;
		margin-top: 2px;
	}

	.medimart-bundle__name {
		flex: 1 1 0;
		min-width: 0;
	}

	.medimart-bundle__price {
		flex: 0 0 auto;
	}

	/* Reviews: score, stars, count and button left aligned; the histogram
	 * stays centred. */
	.medimart-reviews .cr-summaryBox-wrap {
		flex-direction: column;
		padding: 0;
	}

	.medimart-reviews .cr-overall-rating-wrap {
		align-items: flex-start !important;
		text-align: left;
		padding: 0 0 12px;
	}

	.medimart-reviews .cr-overall-rating-wrap > * {
		align-self: flex-start;
		margin-left: 0;
		margin-right: 0;
	}

	.medimart-reviews .cr-overall-rating-wrap .medimart-reviews__leave {
		margin-left: 0;
		margin-right: 0;
	}

	.medimart-reviews .ivole-summaryBox {
		padding: 0;
	}

	.medimart-reviews .cr-histogramTable {
		margin: 0 auto;
	}

	/* Less air between the last review and the callouts. */
	.medimart-product__section--reviews {
		padding-bottom: 12px;
	}

	.medimart-reviews__list .commentlist,
	.medimart-reviews__list,
	.medimart-reviews__more {
		margin-bottom: 0;
	}

	/* CusRev's clearfix div becomes an empty grid row and takes a row gap. */
	.medimart-reviews > .clear {
		display: none;
	}

	.medimart-reviews__list .commentlist > li:last-child {
		margin-bottom: 12px;
	}

	.medimart-callouts {
		margin-top: 4px;
	}

	.medimart-product__gallery .flex-direction-nav .flex-prev {
		transform: translate(10px, -50%);
	}

	.medimart-product__gallery .flex-direction-nav .flex-next {
		transform: translate(-10px, -50%) scaleX(-1);
	}

	.medimart-product__gallery .flex-direction-nav a,
	.medimart-product__gallery .woocommerce-product-gallery__trigger {
		opacity: 1;
	}

	.medimart-product__summary table.variations select {
		width: 172px;
		height: 44px;
	}

	/* Quote buttons (Get A Hire Quote, and the POA Request A Purchase /
	 * Hire Quote pair) full width like Add To Cart. The `a.button` selector
	 * is needed to outrank the 265px desktop rule (user, 2026-10-13). */
	.medimart-product__summary form.cart .single_add_to_cart_button,
	.medimart-product a.button.medimart-quote-button,
	.medimart-product .medimart-quote-button {
		width: 100%;
		box-sizing: border-box;
	}

	.medimart-reviews {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.medimart-callouts {
		padding: 20px 16px;
	}

	.medimart-callouts__inner,
	.medimart-callouts__cards {
		grid-template-columns: 1fr;
	}

	.medimart-callouts__tiles {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	/* Two cards per row, as the category page; same specificity as the
	 * desktop rule above or it loses. */
	.medimart-product .related.products ul.products,
	.medimart-product .related.products ul.products.columns-5,
	.medimart-product .related.products ul.products.columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.medimart-alternative__image {
		flex-basis: 66px;
		width: 66px;
	}

	.medimart-product__quantity-row {
		gap: 10px;
	}

	.medimart-product__click-collect {
		font-size: 14px;
	}
}

/*
 * Space between the notices (added to cart, choose options, stock) and the
 * gallery, so the last notice doesn't sit on the image border. Only when
 * there is a notice: WooCommerce prints the wrapper empty otherwise.
 * Project lead request 2026-10-08.
 */
.single-product .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: 20px;
}

/*
 * Sale countdown ("Offer Ends In:", medimart_single_sale_countdown()),
 * measured on live 2026-10-09 at 1920px: 10px under the Afterpay line,
 * green 20px/600 uppercase title, 14px gap, then green boxes 2px apart,
 * 12px x 10px padding, white 18px/700 number over a white 10px uppercase
 * label.
 */
.medimart-countdown {
	margin-top: 10px;
	font-family: "Open Sans", sans-serif;
}

.medimart-countdown__title {
	margin: 0 0 14px;
	color: #589f3c;
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
}

.medimart-countdown__row {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.medimart-countdown__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 64px;
	padding: 12px 10px;
	background: #589f3c;
	color: #fff;
	text-align: center;
}

.medimart-countdown__amount {
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
}

.medimart-countdown__label {
	margin-top: 6px;
	font-size: 10px;
	letter-spacing: 0.2px;
	line-height: 10px;
	text-transform: uppercase;
}