/**
 * MedsMonk single product page.
 *
 * Loaded only on single product pages (see mm_enqueue_single_product_styles()).
 *
 * Every colour, font and radius resolves from the theme's own custom properties
 * (--wd-*), which Woodmart prints from the Theme Settings panel. Changing the
 * palette in Theme Settings therefore restyles this page too -- nothing here
 * pins a brand value. The literals in var() fallbacks are last-resort defaults
 * for when a property is unset; they are not the source of truth.
 */

.mm-fold {
	/* Spacing scale: 4px base, used for every gap/padding below. */
	--mm-space-2xs: 4px;
	--mm-space-xs: 8px;
	--mm-space-sm: 12px;
	--mm-space-md: 20px;
	--mm-space-lg: 32px;
	--mm-space-xl: 48px;

	/* Semantic tokens mapped onto the theme's palette. */
	--mm-primary: var(--wd-primary-color);
	--mm-accent: var(--wd-alternative-color);
	--mm-title-color: var(--wd-title-color, var(--wd-primary-color));
	--mm-text-color: var(--wd-text-color);
	/* Panel surface. --wd-bordered-bg is not defined on this site, so the
	   fallback was what actually rendered -- Woodmart's stock grey. Sourced
	   from the site's blue-tinted surface token so product panels match the
	   rest of the site instead of reverting to grey. */
	--mm-surface: var(--mm-surface-alt, #eef3fb);
	--mm-border-color: var(--wd-form-brd-color, rgba(0, 0, 0, 0.12));
	--mm-radius: var(--wd-brd-radius, 8px);
	--mm-title-font: var(--font-primary);
	--mm-text-font: var(--font-primary);

	/* Sticky offset tracks the real header height rather than a guessed value. */
	--mm-sticky-top: calc(var(--wd-header-sticky-h, 60px) + var(--mm-space-md));

	padding-block: var(--mm-space-lg);
}

.mm-fold:first-of-type {
	padding-block-start: var(--mm-space-md);
}

.mm-fold--enquiry,
.mm-fold--community {
	background-color: var(--mm-surface);
}

/* --------------------------------------------------------------------------
   Product page heading sizes

   Product pages step every heading down one rung of the global scale rather
   than defining sizes of their own: the product name takes the h2 size, and the
   section titles below it take h3. A product page stacks far more headings than
   a marketing page -- title, ten description sections, related products,
   shipping, reviews -- so at full h1/h2 they crowd the column and compete with
   the copy they introduce.

   Sizes still resolve from the tokens in style.css, so changing the site scale
   moves these with it. This file only loads on single product pages, so the
   smaller steps cannot leak onto the rest of the site.
   -------------------------------------------------------------------------- */
.single-product .product_title {
	font-size: var(--font-size-h2);
}

.mm-split__content .custom-heading-sections,
.mm-split__content .faq-heading,
.mm-reviews .woocommerce-Reviews-title {
	font-size: var(--font-size-h3);
}

.mm-fold__title {
	margin-block: 0 var(--mm-space-md);
	font-family: var(--mm-title-font);
	font-size: var(--font-size-h3);
	color: var(--mm-title-color);
}

/* --------------------------------------------------------------------------
   Two-column folds
   Single mechanism for both split layouts: a flex row that collapses to a
   stack at the tablet breakpoint.
   -------------------------------------------------------------------------- */
.mm-split {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-lg);
	align-items: flex-start;
}

.mm-split__media {
	flex: 1 1 44%;
	min-width: 0;
	max-width: 100%;
}

.mm-split__aside {
	flex: 1 1 48%;
	min-width: 0;
	max-width: 100%;
}

.mm-split__toc {
	flex: 0 1 280px;
	min-width: 0;
	position: sticky;
	top: var(--mm-sticky-top);
}

.mm-split__content {
	flex: 1 1 60%;
	min-width: 0;
}

@media (max-width: 1024px) {
	.mm-split {
		gap: var(--mm-space-md);
	}

	.mm-split__media,
	.mm-split__aside,
	.mm-split__toc,
	.mm-split__content {
		flex: 1 1 100%;
		max-width: 100%;
	}

	/* Sticky sidebars are unhelpful once the layout is a single column. */
	.mm-split__toc {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   Product specification list
   Definition list rendered as label/value rows.
   -------------------------------------------------------------------------- */
.mm-specs {
	margin-block: var(--mm-space-md);
	padding: 0;
	border: 1px solid var(--mm-border-color);
	border-radius: var(--mm-radius);
	background-color: var(--mm-surface);
	overflow: hidden;
}

.mm-specs > * {
	margin: 0;
	padding: var(--mm-space-sm) var(--mm-space-md);
	border-block-end: 1px solid var(--mm-border-color);
	font-family: var(--mm-text-font);
	line-height: 1.5;
}

.mm-specs > *:last-child {
	border-block-end: 0;
}

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */
.mm-toc-inner {
	padding: var(--mm-space-md);
	border: 1px solid var(--mm-border-color);
	border-radius: var(--mm-radius);
	background-color: var(--mm-surface);
}

.mm-toc-inner .overview_menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-toc-inner .overview_menu li + li {
	margin-block-start: var(--mm-space-2xs);
}

.mm-toc-inner .overview_menu a {
	display: block;
	padding-block: var(--mm-space-2xs);
	color: var(--mm-text-color);
	text-decoration: none;
}

.mm-toc-inner .overview_menu a:hover,
.mm-toc-inner .overview_menu a:focus-visible {
	color: var(--mm-accent);
}

/* --------------------------------------------------------------------------
   Description sections
   -------------------------------------------------------------------------- */
.mm-split__content .product-content-sections + .product-content-sections {
	margin-block-start: var(--mm-space-lg);
}

.mm-split__content .custom-heading-sections {
	margin-block: 0 var(--mm-space-xs);
	font-family: var(--mm-title-font);
	color: var(--mm-title-color);
	/* Scroll anchoring so TOC jumps clear the sticky header. */
	scroll-margin-top: var(--mm-sticky-top);
}

.mm-similar {
	margin-block-start: var(--mm-space-lg);
}

.mm-related-posts {
	margin-block-start: var(--mm-space-xl);
}

/* --------------------------------------------------------------------------
   Table of contents list
   -------------------------------------------------------------------------- */
.mm-toc-title {
	margin-block: 0 var(--mm-space-xs);
	font-family: var(--mm-title-font);
	font-size: var(--font-size-h5);
	color: var(--mm-title-color);
}

.mm-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-toc-list li + li {
	margin-block-start: var(--mm-space-2xs);
}

.mm-toc-list a {
	display: block;
	padding-block: var(--mm-space-2xs);
	color: var(--mm-text-color);
	text-decoration: none;
	font-size: var(--font-size-md);
}

.mm-toc-list a:hover,
.mm-toc-list a:focus-visible {
	color: var(--mm-accent);
	text-decoration: underline;
}

/* Smooth in-page jumps, but honour reduced-motion preferences. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* --------------------------------------------------------------------------
   Enquiry form beside the gallery
   The form shares the summary column, so it runs narrower than a full-width
   block and the internal spacing is tightened to match.
   -------------------------------------------------------------------------- */
.mm-split__aside .mm-raq-wrapper {
	margin-block: var(--mm-space-md) 0;
	padding: var(--mm-space-md);
	border-radius: var(--mm-radius);
}

.mm-split__aside .mm-raq-title {
	font-size: var(--font-size-h5) !important;
}

.mm-split__aside .mm-raq-subtitle {
	margin-block-end: var(--mm-space-sm) !important;
}

.mm-split__aside .mm-raq-field-group {
	margin-block-end: var(--mm-space-xs);
}

.mm-split__aside .mm-raq-textarea {
	min-height: 60px;
}

/* Country code + number sit on one row, the select sized to its content. */
.mm-raq-phone-row {
	display: flex;
	gap: var(--mm-space-xs);
	align-items: stretch;
}

.mm-raq-phone-row .mm-raq-dial {
	flex: 0 0 auto;
	width: auto;
	min-width: 7.5rem;
	max-width: 45%;
}

.mm-raq-phone-row .mm-raq-phone {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 480px) {
	.mm-raq-phone-row {
		flex-wrap: wrap;
	}

	.mm-raq-phone-row .mm-raq-dial,
	.mm-raq-phone-row .mm-raq-phone {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   Similar products table
   -------------------------------------------------------------------------- */
.mm-similar-products__title {
	margin-block: 0 var(--mm-space-md);
	font-family: var(--mm-title-font);
	color: var(--mm-title-color);
}

/* Table scrolls inside its own container so the page never scrolls sideways. */
.mm-similar-products__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mm-similar-products__table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--wd-form-bg, #fff);
	border: 1px solid var(--mm-border-color);
	border-radius: var(--mm-radius);
	overflow: hidden;
}

.mm-similar-products__table th,
.mm-similar-products__table td {
	padding: var(--mm-space-sm) var(--mm-space-md);
	border-block-end: 1px solid var(--mm-border-color);
	text-align: start;
	vertical-align: middle;
	font-weight: var(--font-weight-normal);
}

.mm-similar-products__table thead th {
	background-color: var(--mm-surface);
	font-family: var(--mm-title-font);
	color: var(--mm-title-color);
	white-space: nowrap;
}

.mm-similar-products__table tbody tr:last-child th,
.mm-similar-products__table tbody tr:last-child td {
	border-block-end: 0;
}

.mm-similar-products__link {
	display: flex;
	align-items: center;
	gap: var(--mm-space-sm);
	color: var(--mm-link-color, var(--mm-primary));
	text-decoration: none;
}

.mm-similar-products__thumb img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: calc(var(--mm-radius) / 2);
}

.mm-similar-products__cta {
	display: inline-block;
	padding: var(--mm-space-2xs) var(--mm-space-sm);
	border: 1px solid currentColor;
	border-radius: var(--mm-radius);
	color: var(--mm-primary);
	text-decoration: none;
	white-space: nowrap;
	font-size: var(--font-size-small);
}

.mm-similar-products__cta:hover,
.mm-similar-products__cta:focus-visible {
	background-color: var(--mm-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Fold 5 -- reviews alongside related reading
   -------------------------------------------------------------------------- */
/* Reviews, related reading and shipping are each their own full-width fold. */
.mm-fold--reading,
.mm-fold--shipping,
.mm-fold--community {
	width: 100%;
}

/* Shipping reads as a document, so the accordion keeps a comfortable measure
   even though its fold spans the full container. */
.mm-fold--shipping .mm-shipping {
	max-width: 100%;
}

.mm-fold--shipping .mm-shipping__intro,
.mm-fold--shipping .mm-shipping__body {
	max-width: 90ch;
}

/* --------------------------------------------------------------------------
   Related reading cards
   Single column beside the reviews on desktop, a responsive grid once the
   section goes full width.
   -------------------------------------------------------------------------- */
/*
 * Related reading is now a full-width fold rather than a sidebar, so the cards
 * lay out as a responsive grid: as many columns as fit, collapsing to one on
 * phones. auto-fit with a min() floor avoids overflow on narrow screens.
 */
.mm-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--mm-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-post-card {
	border: 1px solid var(--mm-border-color);
	border-radius: var(--mm-radius);
	background-color: var(--wd-form-bg, #fff);
	overflow: hidden;
}

.mm-post-card__link {
	display: flex;
	gap: var(--mm-space-sm);
	align-items: flex-start;
	padding: var(--mm-space-sm);
	color: inherit;
	text-decoration: none;
}

.mm-post-card__media {
	flex: 0 0 72px;
}

.mm-post-card__media img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: calc(var(--mm-radius) / 2);
}

.mm-post-card__body {
	display: block;
	min-width: 0;
}

.mm-post-card__title {
	display: block;
	font-family: var(--mm-title-font);
	font-size: var(--font-size-md);
	line-height: 1.35;
	color: var(--mm-title-color);
}

.mm-post-card__excerpt {
	display: block;
	margin-block-start: var(--mm-space-2xs);
	font-size: var(--font-size-xs);
	line-height: 1.45;
	color: var(--mm-text-color);
	opacity: 0.75;
}

.mm-post-card__link:hover .mm-post-card__title,
.mm-post-card__link:focus-visible .mm-post-card__title {
	color: var(--mm-accent);
}

/* --------------------------------------------------------------------------
   Related products carousel
   Six across on desktop, so the card padding and type are tightened to keep
   each one legible at roughly a third of its previous width.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.related-products-carousel .product-grid-item {
		padding: 10px;
	}

	.related-products-carousel .product-details {
		font-size: var(--font-size-xs);
	}

	.related-products-carousel .product-details a {
		font-size: var(--font-size-small);
		line-height: 1.3;
	}

	.related-products-carousel .product-price bdi {
		font-size: var(--font-size-large);
	}

	.related-products-carousel .woodmart-add-btn > a,
	.related-products-carousel .wd-add-btn > a {
		padding: 8px 10px;
		font-size: var(--font-size-xs);
	}

	.related-products-carousel .product-thumbnailimg img {
		height: 140px;
	}
}

/* Two up on phones: the cards get narrow, so trim padding further. */
@media (max-width: 767px) {
	.related-products-carousel .product-grid-item {
		padding: 8px;
	}

	.related-products-carousel .product-thumbnailimg img {
		height: 120px;
	}

	.related-products-carousel .product-details {
		font-size: var(--font-size-2xs);
	}

	.related-products-carousel .product-details a {
		font-size: var(--font-size-xs);
	}
}

/* --------------------------------------------------------------------------
   Shipping & Delivery
   --------------------------------------------------------------------------
   A summary, not the policy. At this point the customer is deciding whether to
   buy, so the section answers the six questions that affect that decision and
   links out for the rest. Each fact is a label/value pair in a definition list,
   which is what a <dl> is for and reads correctly to a screen reader.

   auto-fit with a min() floor lets the grid find its own column count -- six
   across on a wide screen down to one on a phone -- without breakpoint guesses.
   -------------------------------------------------------------------------- */
.mm-shipping__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--mm-space-sm);
	margin: 0;
	padding: 0;
}

.mm-shipping__item {
	padding: var(--mm-space-sm) var(--mm-space-md);
	/* Accent rule rather than a full border: lighter, and it lines the items up. */
	border-inline-start: 3px solid var(--mm-primary);
	background-color: var(--mm-surface);
	border-radius: 0 var(--mm-radius) var(--mm-radius) 0;
}

.mm-shipping__label {
	margin: 0 0 2px;
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mm-text-color);
	opacity: 0.65;
}

.mm-shipping__value {
	margin: 0;
	font-size: var(--font-size-md);
	line-height: 1.45;
	color: var(--mm-title-color);
}

.mm-shipping__more {
	margin-block: var(--mm-space-md) 0;
	font-size: var(--font-size-small);
}

.mm-shipping__link {
	color: var(--mm-link-color, var(--mm-primary));
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mm-shipping__link:hover,
.mm-shipping__link:focus-visible {
	color: var(--mm-accent);
}

/* --------------------------------------------------------------------------
   YMYL authorship and medical review
   --------------------------------------------------------------------------
   Sits above the product copy, because a reader judges medical content on who
   wrote it and who checked it before they read a word of it.

   Treated as a credential panel rather than a byline sentence: the previous
   version ran label, name, qualification and date together into one line, so
   "Clinical Pharmacology Medically reviewed by" read as a single phrase. Each
   person is now a distinct block with their photograph, role, name and stated
   qualification, which is the part that actually carries weight on health
   content.

   Kept visually quiet -- a bordered panel, not a call to action -- so it
   reassures without competing with the product itself.
   -------------------------------------------------------------------------- */
.mm-byline {
	margin-block-end: var(--mm-space-lg);
	padding: var(--mm-space-md);
	border: 1px solid var(--mm-border-color);
	border-radius: var(--mm-radius);
	background-color: var(--mm-surface);
}

/* "Medically reviewed" shield, in the brand accent so it reads as an assurance. */
.mm-byline__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--mm-space-sm);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mm-accent);
}

.mm-byline__check {
	flex: 0 0 auto;
}

/* People sit side by side and wrap to a stack when the column narrows. */
.mm-byline__people {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mm-space-md) var(--mm-space-lg);
}

.mm-byline__person {
	display: flex;
	align-items: center;
	gap: var(--mm-space-sm);
	min-width: 0;
}

.mm-byline__avatar img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* A ring rather than a hard edge, so the photograph sits on the surface. */
	box-shadow: 0 0 0 2px var(--wd-form-bg, #fff), 0 0 0 3px var(--mm-border-color);
}

.mm-byline__person.is-reviewer .mm-byline__avatar img {
	box-shadow: 0 0 0 2px var(--wd-form-bg, #fff), 0 0 0 3px var(--mm-accent);
}

.mm-byline__detail {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mm-byline__role {
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mm-text-color);
	opacity: 0.6;
}

.mm-byline__name {
	font-family: var(--mm-title-font);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
	color: var(--mm-link-color, var(--mm-primary));
	text-decoration: none;
}

.mm-byline__name:hover,
.mm-byline__name:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mm-byline__credentials {
	font-size: var(--font-size-xs);
	line-height: 1.4;
	color: var(--mm-text-color);
	opacity: 0.75;
}

/* The date is metadata, so it is pushed away from the people on wide rows. */
.mm-byline__date {
	display: flex;
	flex-direction: column;
	margin: 0;
	margin-inline-start: auto;
	font-size: var(--font-size-small);
	text-align: end;
}

@media (max-width: 600px) {
	.mm-byline__date {
		margin-inline-start: 0;
		text-align: start;
	}
}

.mm-byline__details {
	margin-block-start: var(--mm-space-sm);
	padding-block-start: var(--mm-space-sm);
	border-block-start: 1px solid var(--mm-border-color);
}

.mm-byline__toggle {
	cursor: pointer;
	font-size: var(--font-size-xs);
	color: var(--mm-link-color, var(--mm-primary));
}

.mm-byline__toggle:hover,
.mm-byline__toggle:focus-visible {
	color: var(--mm-accent);
}

.mm-byline__bios {
	margin-block-start: var(--mm-space-sm);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--mm-space-md);
}

.mm-byline__bio {
	margin: 0;
	font-size: var(--font-size-xs);
	line-height: 1.55;
	opacity: 0.85;
}

.mm-byline__bio strong {
	display: block;
	color: var(--mm-title-color);
}