/* ==========================================================================
   My Worthy Home: product page, the parts below the first screen
   The description and its photos, specifications, "You may also like" and the message form, fetched just
   after the first paint and cached between products (mwh_styles_for_later()). The tabs and reviews stay in
   product.css, in the page: the stars beside the price open the reviews from the first screen.
   ========================================================================== */

/* Supplier descriptions bring their own headings, often bold and sometimes several levels at once.
   A calmer scale keeps them from competing with the product page's own hierarchy. */
.mwh-pdp .woocommerce-Tabs-panel h1,
.mwh-pdp .woocommerce-Tabs-panel h2 {
	margin: 1.5em 0 0.5em;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 600;
	line-height: 1.2;
}

.mwh-pdp .woocommerce-Tabs-panel h3,
.mwh-pdp .woocommerce-Tabs-panel h4 {
	margin: 1.4em 0 0.4em;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.mwh-pdp .woocommerce-Tabs-panel :is(h1, h2, h3, h4) strong {
	font-weight: inherit;
}

/* Supplier text also carries its own inline colours, fonts and sizes, such as large red headings.
   The words stay as written, in the page's own colours and type. The product data is not changed. */
.mwh-pdp .woocommerce-Tabs-panel [style*="color"],
.mwh-pdp .woocommerce-Tabs-panel font[color] {
	color: inherit !important;
}

.mwh-pdp .woocommerce-Tabs-panel [style*="background"] {
	background: none !important;
}

.mwh-pdp .woocommerce-Tabs-panel [style*="font-family"],
.mwh-pdp .woocommerce-Tabs-panel font[face] {
	font-family: inherit !important;
}

.mwh-pdp .woocommerce-Tabs-panel [style*="font-size"],
.mwh-pdp .woocommerce-Tabs-panel font[size] {
	font-size: inherit !important;
}

.mwh-pdp .woocommerce-Tabs-panel :is(h1, h2)[style*="font-size"] {
	font-size: var(--wp--preset--font-size--xxl) !important;
}

.mwh-pdp .woocommerce-Tabs-panel :is(h3, h4)[style*="font-size"] {
	font-size: var(--wp--preset--font-size--lg) !important;
}

.mwh-pdp .woocommerce-Tabs-panel [style*="line-height"] {
	line-height: inherit !important;
}

.mwh-pdp .woocommerce-Tabs-panel hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--mwh-line);
}

/* A lone supplier photo stays a sensible size. Two or more become the grid below. */
.mwh-pdp .woocommerce-Tabs-panel img {
	display: block;
	width: auto !important;
	max-width: min(100%, 480px);
	height: auto !important;
	border-radius: var(--mwh-radius);
}

/* The words keep a comfortable reading width while the photos below them use the whole page. Set
   before product.js runs, so the text does not jump when the photos move. */
.js .mwh-pdp .woocommerce-Tabs-panel--description {
	max-width: none;
}

.js .mwh-pdp .woocommerce-Tabs-panel--description > :not(.mwh-desc-photos) {
	max-width: 90ch;
}

/* Supplier descriptions often put each fact on its own paragraph. Tighter spacing reads as a list. */
.mwh-pdp .woocommerce-Tabs-panel--description p {
	margin: 0 0 0.7em;
}

.mwh-desc-body > :first-child {
	margin-top: 0;
}

/* A description's photos: small tiles in a masonry grid, part of the description. product.js deals the
   photos into columns in their written order, left to right, and each tile keeps its photo's shape.
   Selecting one opens it large. */
.mwh-desc-photos {
	margin-top: 24px;
}

.mwh-desc-photos__title {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0 0 12px !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--md) !important;
	font-weight: 600;
	letter-spacing: 0;
}

.mwh-desc-photos__count {
	font-weight: 400;
	color: var(--mwh-graphite);
}

.mwh-desc-gallery {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.mwh-desc-gallery__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.mwh-desc-gallery__item {
	display: block;
	overflow: hidden;
	background: var(--mwh-linen);
	border-radius: var(--mwh-radius-sm);
	cursor: zoom-in;
}

/* Holds a place until the photo arrives. */
.mwh-desc-gallery__item.is-waiting {
	aspect-ratio: 1;
}

/* Some supplier photos are very long banners. The tile shows the top, and opening it shows them all.
   Tiles stay small: two across on a phone, up to four across on a computer. */
.mwh-pdp .woocommerce-Tabs-panel .mwh-desc-gallery__item img {
	width: 100% !important;
	max-width: none;
	max-height: 260px;
	object-fit: cover;
	object-position: top;
	border-radius: 0;
	transition: transform var(--mwh-base) var(--mwh-ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.mwh-desc-gallery__item:hover img {
		transform: scale(1.03);
	}
}

.mwh-desc-gallery__item:focus-visible {
	outline: 2px solid var(--mwh-evergreen);
	outline-offset: 2px;
}

/* A long set shows its first rows, with a fade and a button for the rest. */
.mwh-desc-gallery.is-collapsed {
	max-height: 440px;
	overflow: hidden;
}

.mwh-desc-gallery.is-collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 120px;
	pointer-events: none;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--mwh-paper));
}

@media (min-width: 48rem) {
	.mwh-desc-gallery,
	.mwh-desc-gallery__col {
		gap: 12px;
	}

	.mwh-desc-gallery.is-collapsed {
		max-height: 520px;
	}

	.mwh-pdp .woocommerce-Tabs-panel .mwh-desc-gallery__item img {
		max-height: 360px;
	}
}

/* mwh_remove_supplier_option_row() takes this row out of the page. This only keeps shoppers from
   seeing every option twice if a future AliDropship update changes its markup. */
.mwh-pdp .adsw-attribute-option {
	display: none;
}

.mwh-pdp .woocommerce-Tabs-panel table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

/* A specifications table written with MWH Content Formats spans the reading column instead. */
.mwh-pdp .woocommerce-Tabs-panel table.mwh-c-table {
	display: table;
	width: 100%;
	max-width: 760px;
}

/* Specifications: a two-column table across the reading column, names on a light band. */
.mwh-pdp table.woocommerce-product-attributes {
	display: table;
	width: 100%;
	font-size: var(--wp--preset--font-size--md);
	border-top: 1px solid var(--mwh-line);
}

.mwh-pdp .woocommerce-product-attributes th,
.mwh-pdp .woocommerce-product-attributes td {
	padding: 14px 16px;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--mwh-line);
}

.mwh-pdp .woocommerce-product-attributes th {
	width: 34%;
	font-weight: 600;
	background: var(--mwh-porcelain);
}

.mwh-pdp .woocommerce-product-attributes p {
	margin: 0;
}

.mwh-related {
	margin-top: clamp(16px, 2vw, 24px) !important;
}

/* The FAQ plugin's questions, inside their tab, without the section's own outer space. */
.mwh-pdp .woocommerce-Tabs-panel--faq .mwh-faq {
	margin: 0;
}

.mwh-related > * {
	margin-block: 0;
}

.mwh-related .mwh-section__title {
	margin-bottom: 20px;
}

/* "You may also like": up to eight products from the same category in one row that slides, on every screen,
   with arrow buttons from header.js and no scrollbar. */
@media (min-width: 48rem) {
	/* Every column is an equal sliding column: the grid's fixed three or four columns would otherwise squeeze
	   the first cards to nothing. */
	.mwh-related .wc-block-product-template.mwh-grid {
		display: grid;
		grid-template-columns: none;
		grid-template-rows: repeat(5, auto);
		grid-auto-columns: calc((100% - 2 * 20px) / 3);
		grid-auto-flow: column;
		gap: 0 20px;
		/* Room for a card's lifted shadow, which the sliding row would otherwise cut off. */
		padding: 4px 2px 28px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.mwh-related .wc-block-product-template.mwh-grid::-webkit-scrollbar {
		display: none;
	}

	/* The row keeps room under its cards for their shadow, so the arrows sit a little closer. */
	.mwh-related .mwh-scroll-controls {
		margin-top: -8px;
	}

	.mwh-related .mwh-grid > .wc-block-product,
	.mwh-related .mwh-grid > .wc-block-product:nth-child(n + 4) {
		display: grid;
		margin-bottom: 0;
		scroll-snap-align: start;
	}
}

@media (min-width: 72rem) {
	.mwh-related .wc-block-product-template.mwh-grid {
		grid-auto-columns: calc((100% - 3 * 20px) / 4);
	}
}

/* Long supplier descriptions collapse behind a button. The text stays in the page for search
   engines and assistive technology. Only product.js adds this class, so no-JS shows it all. */
.mwh-desc-body.is-collapsible {
	position: relative;
}

.mwh-desc-body.is-collapsed {
	max-height: 560px;
	overflow: hidden;
}

.mwh-desc-body.is-collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 140px;
	pointer-events: none;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--mwh-paper));
}

/* "Still didn't find what you need?" before the footer (owner, 2026-11-09): the words on the left, and on the
   right the MWH Contact Form plugin's form, which keeps each message under Messages with the page it came from.
   The contact page's own styles are not loaded here, so the few the form needs are repeated for this section. */
.mwh-pdp-help {
	display: grid;
	gap: 20px 56px;
	margin-top: clamp(16px, 2vw, 24px) !important;
	padding: clamp(20px, 3vw, 40px);
	background: var(--mwh-paper);
	border: 1px solid var(--mwh-line);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(23, 26, 23, 0.04);
}

.mwh-pdp-help > *,
.mwh-pdp-help__intro > * {
	margin-block: 0;
}

.mwh-pdp-help__title {
	margin-bottom: 12px !important;
}

.mwh-pdp-help__text {
	max-width: 44ch;
	color: var(--mwh-graphite);
}

@media (min-width: 64rem) {
	.mwh-pdp-help {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

.mwh-pdp-help .mwh-contact form {
	display: grid;
	gap: 14px 16px;
}

.mwh-pdp-help .mwh-contact form > p {
	display: grid;
	gap: 6px;
	margin: 0;
}

/* Name and email side by side where there is room; the message and the button across. */
@media (min-width: 40rem) {
	.mwh-pdp-help .mwh-contact form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mwh-pdp-help .mwh-contact form > p:nth-of-type(n + 3) {
		grid-column: 1 / -1;
	}
}

.mwh-pdp-help .mwh-contact label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.mwh-pdp-help .mwh-contact input:not([type="hidden"]),
.mwh-pdp-help .mwh-contact textarea {
	width: 100%;
}

.mwh-pdp-help .mwh-contact textarea {
	height: 8.5em;
	min-height: 6em;
	resize: vertical;
}

.mwh-pdp-help .mwh-contact button {
	justify-self: start;
	cursor: pointer;
}

.mwh-pdp-help .mwh-contact__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--error);
}

.mwh-pdp-help .mwh-contact__notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid currentcolor;
	border-radius: var(--mwh-radius-sm);
}

.mwh-pdp-help .mwh-contact__notice.is-success {
	color: var(--wp--preset--color--success);
}

.mwh-pdp-help .mwh-contact__notice.is-error {
	color: var(--wp--preset--color--error);
}

/* The trap field robots fill in. Out of sight rather than hidden, because robots skip hidden fields. */
/* "Ask a question" in the FAQ lands here, clear of the header that stays at the top on a phone. */
.mwh-pdp-help .mwh-contact {
	scroll-margin-top: 110px;
}

.mwh-pdp-help .mwh-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}