/**
 * YPDP — Yatan Product Detail Page.
 *
 * Every selector is namespaced `ypdp-` and scoped under `.ypdp`, so this file
 * cannot reach the rest of the site and the site's 218 KB style.cs cannot
 * accidentally restyle the new page. Where WooCommerce or plugin markup is
 * reused verbatim (price, add-to-cart form, review list) it is restyled through
 * `.ypdp` descendant selectors rather than by editing those templates.
 *
 * Contents
 *   1.  Tokens
 *   2.  Layout primitives
 *   3.  Typography and rich text
 *   4.  Buttons, ticks and shared bits
 *   5.  Hero — gallery and buy box
 *   6.  Quick answer
 *   7.  Section anchors
 *   8.  About and specifications
 *   9.  Comparison
 *   10. Safety notice
 *   11. How to use
 *   12. Benefits
 *   13. Ingredients and herbs
 *   14. Goes well with
 *   15. Reviews and testimonials
 *   16. Shipping and returns
 *   17. FAQ
 *   18. Related products
 *   19. Responsive
 */

/* =========================================================================
   1. Tokens
   ====================================================================== */

.ypdp {
	--ypdp-plum: #3b2357;
	--ypdp-plum-deep: #2c1a42;
	--ypdp-plum-mid: #4b2e70;
	--ypdp-amber: #c2740f;
	--ypdp-amber-dark: #a96208;
	--ypdp-teal: #2f8f88;
	--ypdp-teal-light: #5ec2bb;
	--ypdp-star: #e0a11c;

	--ypdp-cream: #faf8f5;
	--ypdp-mint: #eef7f4;
	--ypdp-lilac: #f0ecfa;
	--ypdp-white: #ffffff;

	--ypdp-line: #ece4d6;
	--ypdp-line-soft: #f2ece2;
	--ypdp-line-band: #f0e9dd;

	--ypdp-ink: #453b52;
	--ypdp-ink-soft: #544a63;
	--ypdp-ink-mute: #6b5f7d;
	--ypdp-ink-faint: #8d8398;

	--ypdp-warn-bg: #fdeee7;
	--ypdp-warn-line: #f3d3c3;
	--ypdp-warn-ink: #5f4335;
	--ypdp-warn-head: #8a3a1b;
	--ypdp-warn-accent: #cb5f38;

	--ypdp-serif: "DM Sans", sans-serif;

	--ypdp-sans: "DM Sans", sans-serif;

	--ypdp-radius: 14px;
	--ypdp-radius-sm: 9px;
	--ypdp-wrap: 1160px;
	--ypdp-gutter: 24px;

	font-family: var(--ypdp-sans);
	color: var(--ypdp-ink);
	background: var(--ypdp-cream);
	line-height: 1.6;
}

/* The product wrapper sits inside the theme's Bootstrap container on legacy
   templates. `.ypdp-page` (set by single-product.php) removes that constraint
   so section backgrounds can run edge to edge. */
.ypdp-page {
	width: 100%;
	overflow-x: clip;
}

.ypdp *,
.ypdp *::before,
.ypdp *::after {
	box-sizing: border-box;
}

/* =========================================================================
   2. Layout primitives
   ====================================================================== */

.ypdp-band {
	width: 100%;
	padding: 64px 0;
	background: var(--ypdp-cream);
}

.ypdp-band--white {
	background: var(--ypdp-white);
	border-top: 1px solid var(--ypdp-line-band);
	border-bottom: 1px solid var(--ypdp-line-band);
}

.ypdp-band--mint {
	background: var(--ypdp-mint);
	border-bottom: 1px solid #ddeee8;
}

.ypdp-wrap {
	width: 100%;
	max-width: var(--ypdp-wrap);
	margin: 0 auto;
	padding: 0 var(--ypdp-gutter);
}

.ypdp-wrap--narrow {
	max-width: 900px;
}

/* =========================================================================
   3. Typography and rich text
   ====================================================================== */

.ypdp .ypdp-eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ypdp-amber);
}

.ypdp .ypdp-eyebrow--teal {
	color: var(--ypdp-teal);
	margin-bottom: 10px;
}

.ypdp .ypdp-eyebrow--center,
.ypdp .ypdp-h2--center {
	text-align: center;
}

.ypdp .ypdp-h2 {
	margin: 0 0 16px;
	font-family: var(--ypdp-serif);
	font-size: clamp( 24px, 2.4vw, 30px );
	line-height: 1.25;
	font-weight: 600;
	color: var(--ypdp-plum);
	text-wrap: pretty;
}

.ypdp .ypdp-h3 {
	margin: 0 0 14px;
	font-family: var(--ypdp-serif);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-lede {
	margin: 0 0 20px;
	font-size: 16px;
	color: var(--ypdp-ink-soft);
}

/* Editor-authored HTML. Kept deliberately narrow: only the elements a WYSIWYG
   can actually produce. */
.ypdp-rte {
	font-size: 16px;
	color: var(--ypdp-ink-soft);
}

.ypdp-rte > *:first-child { margin-top: 0; }
.ypdp-rte > *:last-child { margin-bottom: 0; }

.ypdp-rte p { margin: 0 0 12px; }

.ypdp-rte h2,
.ypdp-rte h3,
.ypdp-rte h4 {
	font-family: var(--ypdp-serif);
	font-weight: 600;
	color: var(--ypdp-plum);
	margin: 22px 0 10px;
	line-height: 1.3;
}

.ypdp-rte h2 { font-size: 25px; }
.ypdp-rte h3 { font-size: 21px; }
.ypdp-rte h4 { font-size: 18px; }

.ypdp-rte ul,
.ypdp-rte ol { margin: 0 0 14px; padding-left: 20px; }
.ypdp-rte li { margin-bottom: 6px; }

.ypdp-rte a { color: var(--ypdp-amber); text-decoration: underline; text-underline-offset: 2px; }
.ypdp-rte a:hover,
.ypdp-rte a:focus { color: var(--ypdp-plum); }

.ypdp-rte img { max-width: 100%; height: auto; border-radius: var(--ypdp-radius-sm); }

/* Legacy copy embeds videos at hardcoded pixel widths; keep them in the column. */
.ypdp-rte iframe,
.ypdp-rte embed,
.ypdp-rte object,
.ypdp-rte video { max-width: 100%; }

.ypdp-rte blockquote {
	margin: 0 0 14px;
	padding: 14px 18px;
	border-left: 4px solid var(--ypdp-teal-light);
	background: var(--ypdp-cream);
	border-radius: 0 var(--ypdp-radius-sm) var(--ypdp-radius-sm) 0;
	font-style: italic;
}

.ypdp-rte table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 14px;
}

.ypdp-rte th,
.ypdp-rte td {
	border: 1px solid var(--ypdp-line);
	padding: 8px 12px;
	text-align: left;
}

/* =========================================================================
   4. Buttons, ticks and shared bits
   ====================================================================== */

.ypdp .ypdp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: var(--ypdp-radius-sm);
	padding: 13px 24px;
	font-family: var(--ypdp-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.ypdp .ypdp-btn--primary { background: var(--ypdp-amber); color: var(--ypdp-white); }
.ypdp .ypdp-btn--primary:hover,
.ypdp .ypdp-btn--primary:focus { background: var(--ypdp-amber-dark); color: var(--ypdp-white); }

.ypdp .ypdp-tick {
	flex: none;
	color: var(--ypdp-teal);
	font-weight: 700;
}

.ypdp .ypdp-ticklist {
	display: grid;
	gap: 9px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.ypdp .ypdp-ticklist--two {
	grid-template-columns: 1fr 1fr;
	gap: 9px 28px;
}

.ypdp .ypdp-ticklist__item {
	display: flex;
	gap: 9px;
	align-items: baseline;
	margin: 0;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-ticklist__item strong { color: var(--ypdp-plum); }

/* Visible only to assistive technology. */
.ypdp .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.ypdp :focus-visible {
	outline: 3px solid var(--ypdp-teal-light);
	outline-offset: 2px;
}

/* =========================================================================
   5. Hero — gallery and buy box
   ====================================================================== */

.ypdp .ypdp-hero {
	padding: 32px 0 48px;
	border-top: none;
}

.ypdp .ypdp-hero__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
}

.ypdp .ypdp-hero__media {
	position: relative;
	min-width: 0;
}

/* The theme boxes the whole gallery in a 1px #ddd border
   (style.css `.single-product .type-product .woocommerce-product-gallery`).
   The design puts the rounding on the image itself instead. */
.ypdp .ypdp-hero__media .images.woocommerce-product-gallery,
.ypdp .ypdp-hero__media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	border: none;
	opacity: 1 !important;
}

.ypdp .ypdp-hero__media .woocommerce-product-gallery__wrapper { margin: 0; }

/* --- main image ------------------------------------------------------- */

.ypdp .ypdp-hero__media .woocommerce-product-gallery__image {
	border-radius: var(--ypdp-radius);
	overflow: hidden;
	background: #f3eee6;
}

.ypdp .ypdp-hero__media .woocommerce-product-gallery__image img,
.ypdp .ypdp-hero__media .flex-viewport img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--ypdp-radius);
}

.ypdp .ypdp-hero__media .flex-viewport {
	border-radius: var(--ypdp-radius);
	overflow: hidden;
}

/* Zoom / lightbox handle. Kept — it is the only way into PhotoSwipe — but
   reduced to a quiet circular control so it does not compete with the photo. */
.ypdp .ypdp-hero__media .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	box-shadow: 0 1px 4px rgba( 59, 35, 87, 0.16 );
	color: var(--ypdp-plum);
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.16s ease;
}

.ypdp .ypdp-hero__media .woocommerce-product-gallery__trigger:hover { background: #ffffff; }

/* --- thumbnail strip -------------------------------------------------- */

/* Four thumbnails visible at a time; any beyond that scroll sideways rather
   than wrapping onto extra rows and pushing the buy box down the page. */
.ypdp .ypdp-thumbs {
	position: relative;
	margin-top: 10px;
}

.ypdp .ypdp-hero__media ol.flex-control-thumbs,
.ypdp .ypdp-hero__media .flex-control-thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - 30px ) / 4 );
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ypdp .ypdp-hero__media .flex-control-thumbs::-webkit-scrollbar { display: none; }

/*
 * WooCommerce ships `.woocommerce div.product div.images .flex-control-thumbs li
 * { width: 25%; float: left }`, which out-specifies anything reasonable this
 * file can write and would shrink each thumbnail to a quarter of its grid cell.
 * Two forced properties are cheaper than an unreadable selector arms race.
 */
.ypdp .ypdp-hero__media .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.ypdp .ypdp-hero__media .flex-control-thumbs li::before { content: none; }

.ypdp .ypdp-hero__media .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	border: 1px solid var(--ypdp-line);
	opacity: 0.62;
	cursor: pointer;
	transition: opacity 0.16s ease, border-color 0.16s ease;
}

.ypdp .ypdp-hero__media .flex-control-thumbs img.flex-active,
.ypdp .ypdp-hero__media .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--ypdp-amber);
}

/* Strip arrows. Added by the script, and only when the strip actually
   overflows — four images or fewer need no controls. */
.ypdp .ypdp-thumbs__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--ypdp-line);
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.96 );
	box-shadow: 0 1px 5px rgba( 59, 35, 87, 0.14 );
	color: var(--ypdp-plum);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.16s ease, background-color 0.16s ease;
}

.ypdp .ypdp-thumbs__nav:hover { background: #ffffff; }
.ypdp .ypdp-thumbs__nav--prev { left: -6px; }
.ypdp .ypdp-thumbs__nav--next { right: -6px; }

.ypdp .ypdp-thumbs__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Arrows are replaced by the thumbnail strip. */
.ypdp .ypdp-hero__media .flex-direction-nav { display: none; }

/* Marks the thumbnail that opens the video slide, so it is not mistaken for
   another photo. Class is applied by the script. */
.ypdp .ypdp-hero__media .flex-control-thumbs li.ypdp-thumb--video { position: relative; }

.ypdp .ypdp-hero__media .flex-control-thumbs li.ypdp-thumb--video::after {
	content: '▶';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba( 194, 116, 15, 0.92 );
	color: #ffffff;
	font-size: 11px;
	pointer-events: none;
	text-indent: 0;
}

/* The theme injects a video as an extra gallery slide. Keep its iframe inside
   the frame instead of letting its hardcoded width/height dictate the layout. */
.ypdp .ypdp-hero__media .woocommerce-product-gallery__image iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	display: block;
	border: 0;
	border-radius: var(--ypdp-radius);
}

.ypdp .ypdp-hero__media .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0;
	background: var(--ypdp-amber);
	color: var(--ypdp-white);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ypdp .ypdp-hero__summary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	min-width: 0;
}

/*
 * The old buy box was a flex column whose pieces were re-sequenced with `order`
 * (style.css: `.summary { display: flex }`, `form.cart { order: 1 }`,
 * `.description-below-add-to-cart { order: 1 }`). Any element added since
 * inherits the default `order: 0` and therefore jumps ahead of the cart form —
 * which is what pushed the key selling points above Add to cart.
 *
 * Returning the container to normal flow makes every `order` declaration inert,
 * so the sequence is governed by the woocommerce_single_product_summary hook
 * priorities alone. Selector mirrors the theme's own chain, one class deeper,
 * so it wins outright rather than relying on stylesheet load order.
 */
.woocommerce .single-product .type-product .ypdp-hero__summary.summary {
	display: block;
}

.ypdp .ypdp-hero__summary .product_title {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--ypdp-serif);
	font-size: clamp( 26px, 3vw, 34px );
	line-height: 1.2;
	font-weight: 600;
	color: var(--ypdp-plum);
	text-wrap: pretty;
}

.ypdp .ypdp-hero__summary .product_title span { display: inline; }

/*
 * Static trust line under the title, printed by custom_product_review_tag().
 * Its figure comes from the clinic's Google listing rather than on-site
 * reviews, so it is presentational only and never fed to structured data.
 * Markup is <p>text</p><img><p>text</p>, which the theme already styles
 * unscoped; this only sets the row layout inside the new hero.
 */
.ypdp .ypdp-hero__summary .sngl-prdct-rvw-tag {
	display: flex;
	align-items: center;
	gap: 6px 10px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.ypdp .ypdp-hero__summary .sngl-prdct-rvw-tag p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ypdp-ink-mute);
}

.ypdp .ypdp-hero__summary .sngl-prdct-rvw-tag p:first-child {
	flex: 1 0 100%;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-hero__summary .sngl-prdct-rvw-tag img {
	width: auto;
	height: 16px;
	display: block;
}

/* Exact-rating star bar used by the reviews section: a gold row clipped over a
   grey one, so a 4.5 shows as four and a half stars rather than rounding up to
   a perfect five. */
.ypdp .ypdp-stars {
	position: relative;
	display: inline-block;
	font-size: 17px;
	line-height: 1;
	letter-spacing: 2px;
	color: #ded4c6;
	white-space: nowrap;
}

.ypdp .ypdp-stars::before { content: '★★★★★'; }

.ypdp .ypdp-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--ypdp-star);
	white-space: nowrap;
}

.ypdp .ypdp-stars__fill::before { content: '★★★★★'; }

.ypdp .ypdp-hero__summary .other-description {
	margin-bottom: 14px;
	font-size: 16px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-hero__summary p.price,
.ypdp .ypdp-hero__summary .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 0 0 6px;
	font-family: var(--ypdp-serif);
	font-size: 33px;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-hero__summary .price del {
	font-size: 20px;
	font-weight: 500;
	color: var(--ypdp-ink-faint);
	opacity: 1;
}

.ypdp .ypdp-hero__summary .price ins {
	background: none;
	text-decoration: none;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-hero__summary .price .woocommerce-Price-currencySymbol { font-size: 0.7em; }

.ypdp .price-stock-sku {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--ypdp-sans);
	font-size: 15px;
	font-weight: 600;
}

.ypdp .price-stock-sku .stock-status { color: var(--ypdp-teal); }

.ypdp .price-stock-sku .stock-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ypdp .price-stock-sku .product-sku {
	color: var(--ypdp-ink-faint);
	font-size: 14px;
	font-weight: 500;
}

.ypdp .ypdp-savings-line {
    display: inline-block;
    margin: 4px 0 10px;
    padding: 5px 12px;
    border-radius: 10px;
    background: var(--ypdp-mint);
    color: #1f6d66;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid #93c1bd;
}

.ypdp .ypdp-shipping-line {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--ypdp-ink-mute);
}

.ypdp .woocommerce-sale-dates p { font-size: 15px; }

/* --- add to cart form ------------------------------------------------- */

.ypdp .ypdp-hero__summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0 0 24px;
}

.ypdp .ypdp-hero__summary form.cart .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid #ddd2c2;
	border-radius: var(--ypdp-radius-sm);
	overflow: hidden;
	background: var(--ypdp-white);
	float: none;
	margin: 0;
}

.ypdp .ypdp-hero__summary form.cart .quantity input.minus,
.ypdp .ypdp-hero__summary form.cart .quantity input.plus {
	width: 44px;
	border: none;
	background: var(--ypdp-cream);
	color: var(--ypdp-plum);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.ypdp .ypdp-hero__summary form.cart .quantity input.minus:hover,
.ypdp .ypdp-hero__summary form.cart .quantity input.plus:hover { background: var(--ypdp-line-soft); }

.ypdp .ypdp-hero__summary form.cart .quantity input.qty {
	width: 56px;
	border: none;
	border-left: 1px solid var(--ypdp-line);
	border-right: 1px solid var(--ypdp-line);
	background: var(--ypdp-white);
	text-align: center;
	font-weight: 700;
	color: var(--ypdp-plum);
	font-size: 16px;
	padding: 12px 0;
	-moz-appearance: textfield;
}

.ypdp .ypdp-hero__summary form.cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	border: none;
	border-radius: var(--ypdp-radius-sm);
	padding: 14px 24px;
	background: var(--ypdp-amber);
	color: var(--ypdp-white);
	font-family: var(--ypdp-sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.16s ease;
}

.ypdp .ypdp-hero__summary form.cart button.single_add_to_cart_button:hover,
.ypdp .ypdp-hero__summary form.cart button.single_add_to_cart_button:focus {
	background: var(--ypdp-amber-dark);
}

/* Variation selectors and plugin-injected option fields sit above the row. */
.ypdp .ypdp-hero__summary form.cart .variations,
.ypdp .ypdp-hero__summary form.cart .wapf,
.ypdp .ypdp-hero__summary form.cart .woocommerce-variation {
	flex: 1 1 100%;
	margin: 0 0 6px;
}

.ypdp .ypdp-hero__summary form.cart .variations td,
.ypdp .ypdp-hero__summary form.cart .variations th {
	border: none;
	padding: 6px 0;
}

.ypdp .ypdp-keypoints {
	display: grid;
	gap: 8px;
	margin: 0 0 8px;
	padding: 16px 18px;
	list-style: none;
	font-size: 15px;
	background: var(--ypdp-cream);
	border: 1px solid var(--ypdp-line);
	border-radius: 12px;
}

.ypdp .ypdp-keypoints__item {
	display: flex;
	gap: 10px;
	margin: 0;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-keypoints__item strong { color: var(--ypdp-plum); }

.ypdp .description-below-add-to-cart {
	margin-top: 14px;
	font-size: 15px;
	color: var(--ypdp-ink-mute);
}

/* =========================================================================
   6. Quick answer
   ====================================================================== */

.ypdp .ypdp-qa { padding: 34px 0; }

.ypdp .ypdp-qa__lead {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.55;
	color: #2c3a37;
	text-wrap: pretty;
}

.ypdp .ypdp-qa__body {
	font-size: 16px;
	color: #48584f;
}

/* =========================================================================
   7. Section anchors
   ====================================================================== */

/* The theme header is sticky, so anchored headings need clearance beneath it. */
.ypdp [id^='ypdp-'] { scroll-margin-top: 120px; }

/* =========================================================================
   8. About and specifications
   ====================================================================== */

.ypdp .ypdp-about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: start;
}

.ypdp .ypdp-about--solo .ypdp-about__grid { grid-template-columns: 1fr; }

/*
 * Legacy descriptions carry their own Bootstrap `.row`/`.col-sm-6` markup,
 * written when this copy had the full page width to itself. Inside the
 * half-width copy column those nested columns would each be ~230px wide and
 * unreadable, so they are flattened to a single stacked column. Bootstrap's
 * widths live at 0,0,1,0 specificity, so the attribute selector below out-ranks
 * them without needing !important.
 */
.ypdp .ypdp-rte .row {
	display: block;
	margin-left: 0;
	margin-right: 0;
}

.ypdp .ypdp-rte [class*='col-'] {
	width: 100%;
	max-width: 100%;
	float: none;
	padding-left: 0;
	padding-right: 0;
}

.ypdp .ypdp-specs {
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	padding: 26px;
}

.ypdp .ypdp-specs__list { margin: 0; font-size: 15px; }

.ypdp .ypdp-specs__row {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ypdp-line-soft);
}

.ypdp .ypdp-specs__row:last-child { border-bottom: none; }

.ypdp .ypdp-specs__label {
	margin: 0;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-specs__value { margin: 0; color: var(--ypdp-ink-soft); }

/* =========================================================================
   9. Comparison
   ====================================================================== */

.ypdp .ypdp-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	margin-bottom: 34px;
	-webkit-overflow-scrolling: touch;
}

.ypdp .ypdp-table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
	background: var(--ypdp-white);
	margin: 0;
}

.ypdp .ypdp-table thead th {
	background: var(--ypdp-plum);
	color: var(--ypdp-white);
	font-weight: 700;
	text-align: left;
	padding: 12px 16px;
	border: none;
}

.ypdp .ypdp-table thead th.ypdp-table__own { background: var(--ypdp-plum-mid); }

.ypdp .ypdp-table tbody th,
.ypdp .ypdp-table tbody td {
	padding: 11px 16px;
	border: none;
	border-bottom: 1px solid var(--ypdp-line-soft);
	text-align: left;
	vertical-align: top;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-table tbody th {
	font-weight: 700;
	color: var(--ypdp-plum);
	white-space: nowrap;
}

.ypdp .ypdp-table tbody td.ypdp-table__own {
	background: var(--ypdp-mint);
	color: #2c3a37;
	font-weight: 600;
}

.ypdp .ypdp-table tbody tr:last-child th,
.ypdp .ypdp-table tbody tr:last-child td { border-bottom: none; }

/* Feature list + pull quote. Shared by the comparison and audience bands. */
.ypdp .ypdp-featquote,
.ypdp .ypdp-compare__foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin-top: 8px;
}

.ypdp .ypdp-featquote .ypdp-ticklist { margin-bottom: 0; }

.ypdp .ypdp-quote {
	margin: 0;
	align-self: center;
	background: var(--ypdp-cream);
	border-left: 4px solid var(--ypdp-teal-light);
	border-radius: 0 var(--ypdp-radius) var(--ypdp-radius) 0;
	padding: 22px 26px;
}

.ypdp .ypdp-quote__text {
	margin: 0 0 10px;
	padding: 0;
	border: none;
	background: none;
	font-size: 16px;
	font-style: italic;
	color: #4a4058;
	quotes: '“' '”';
}

.ypdp .ypdp-quote__text::before { content: open-quote; }
.ypdp .ypdp-quote__text::after { content: close-quote; }

.ypdp .ypdp-quote__by { font-size: 14px; color: var(--ypdp-ink-mute); }
.ypdp .ypdp-quote__by strong { color: var(--ypdp-plum); }

/* =========================================================================
   9b. What's included, spotlight, who it suits
   ====================================================================== */

.ypdp .ypdp-contents__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 44px;
	align-items: start;
}

.ypdp .ypdp-contents__grid--solo { grid-template-columns: 1fr; }

.ypdp .ypdp-contents__listhead {
	margin: 18px 0 10px;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-contents .ypdp-ticklist { margin-bottom: 0; }

/* --- itemised value panel --------------------------------------------- */

.ypdp .ypdp-value {
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	overflow: hidden;
}

.ypdp .ypdp-value__title {
	margin: 0;
	padding: 14px 22px;
	background: var(--ypdp-plum);
	color: var(--ypdp-white);
	font-family: var(--ypdp-serif);
	font-size: 20px;
	font-weight: 600;
}

.ypdp .ypdp-value__rows { padding: 8px 22px 0; }

.ypdp .ypdp-value__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--ypdp-line-soft);
	font-size: 15px;
}

.ypdp .ypdp-value__row:last-child { border-bottom: none; }

.ypdp .ypdp-value__name {
	display: block;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-value__desc {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--ypdp-ink-mute);
}

.ypdp .ypdp-value__badge {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--ypdp-lilac);
	color: #7a53b5;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.ypdp .ypdp-value__price {
	font-weight: 700;
	color: var(--ypdp-plum);
	white-space: nowrap;
}

.ypdp .ypdp-value__totals {
	padding: 14px 22px;
	background: var(--ypdp-cream);
	border-top: 1px solid var(--ypdp-line);
}

.ypdp .ypdp-value__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 15px;
}

.ypdp .ypdp-value__total--strike span:last-child {
	text-decoration: line-through;
	color: var(--ypdp-ink-faint);
}

.ypdp .ypdp-value__total--price {
	font-size: 16px;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-value__total--save {
	font-size: 16px;
	font-weight: 700;
	color: #1f6d66;
}

/* --- spotlight band ---------------------------------------------------- */

.ypdp .ypdp-spotlight__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 44px;
	align-items: center;
}

.ypdp .ypdp-spotlight__grid--solo { grid-template-columns: 1fr; }

.ypdp .ypdp-eyebrow--violet { color: #7a53b5; }

.ypdp .ypdp-spotlight__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--ypdp-radius);
}

.ypdp .ypdp-spotlight__specs {
	display: grid;
	gap: 6px;
	margin: 14px 0 12px;
	font-size: 15px;
}

.ypdp .ypdp-spotlight__spec {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ypdp .ypdp-spotlight__spec dt {
	margin: 0;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-spotlight__spec dd {
	margin: 0;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-spotlight__note {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	color: #7d7389;
}

/* --- who it suits ------------------------------------------------------ */

.ypdp .ypdp-audience__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
	margin-bottom: 44px;
}

.ypdp .ypdp-audience__card {
	background: #eef7f0;
	border-radius: 12px;
	padding: 20px;
}

.ypdp .ypdp-audience__who {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-audience__why {
	margin: 0;
	font-size: 15px;
	color: var(--ypdp-ink-soft);
}

/* =========================================================================
   10. Safety notice
   ====================================================================== */

.ypdp .ypdp-safety-band { padding: 64px 0 0; }

.ypdp .ypdp-safety {
	background: var(--ypdp-warn-bg);
	border: 1px solid var(--ypdp-warn-line);
	border-radius: 16px;
	padding: 30px 34px;
	color: var(--ypdp-warn-ink);
}

.ypdp .ypdp-safety__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.ypdp .ypdp-safety__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ypdp-warn-accent);
	color: var(--ypdp-white);
	font-weight: 700;
	font-size: 18px;
}

.ypdp .ypdp-safety__title {
	margin: 0;
	font-family: var(--ypdp-serif);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ypdp-warn-head);
}

.ypdp .ypdp-safety__lead {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
}

.ypdp .ypdp-safety__list {
	display: grid;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	font-size: 16px;
}

.ypdp .ypdp-safety__item {
	display: flex;
	gap: 9px;
	align-items: baseline;
	margin: 0;
}

.ypdp .ypdp-safety__bullet { flex: none; color: var(--ypdp-warn-accent); font-weight: 700; }

.ypdp .ypdp-safety__body { font-size: 16px; color: var(--ypdp-warn-ink); }
.ypdp .ypdp-safety__body a { color: var(--ypdp-warn-head); }

/* =========================================================================
   11. How to use
   ====================================================================== */

.ypdp .ypdp-howto__meta {
	margin: 0 0 26px;
	font-size: 16px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-howto__grid {
	display: grid;
	grid-template-columns: 1.45fr 0.55fr;
	gap: 32px;
	align-items: start;
}

.ypdp .ypdp-howto__grid--solo { grid-template-columns: 1fr; }

.ypdp .ypdp-steps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ypdp .ypdp-steps__item {
	margin: 0;
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: 12px;
	padding: 18px;
}

.ypdp .ypdp-steps__head {
	display: flex;
	gap: 30px;
	align-items: center;
	margin-bottom: 8px;
}

.ypdp .ypdp-steps__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ypdp-plum);
	color: var(--ypdp-white);
	font-size: 14px;
	font-weight: 700;
	text-indent: 0px;
}

.ypdp .ypdp-steps__title {
	margin: 0;
	font-family: var(--ypdp-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--ypdp-plum);
	line-height: 1.35;
}

.ypdp .ypdp-steps__img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 10px;
}

.ypdp .ypdp-steps__text { margin: 0; font-size: 15px; color: var(--ypdp-ink-soft); text-indent: 0;}

.ypdp .ypdp-howto__aside { display: grid; gap: 16px; }

.ypdp .ypdp-video {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #efe7f6;
	aspect-ratio: 16 / 11;
}

.ypdp .ypdp-video__btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.ypdp .ypdp-video__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ypdp .ypdp-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ypdp-amber);
	color: var(--ypdp-white);
	font-size: 18px;
	transition: transform 0.16s ease, background-color 0.16s ease;
}

.ypdp .ypdp-video__btn:hover .ypdp-video__play {
	background: var(--ypdp-amber-dark);
	transform: translate( -50%, -50% ) scale( 1.08 );
}

.ypdp .ypdp-video__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 8px 10px;
	background: rgba( 59, 35, 87, 0.82 );
	color: var(--ypdp-white);
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
}

.ypdp .ypdp-video__frame,
.ypdp .ypdp-video--embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ypdp .ypdp-care {
	background: var(--ypdp-lilac);
	border-radius: 12px;
	padding: 20px;
}

.ypdp .ypdp-care .ypdp-h3 { font-size: 20px; margin-bottom: 10px; }

.ypdp .ypdp-care__intro {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-care__list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    color: var(--ypdp-ink-soft);
    line-height: 1.35;
}

.ypdp .ypdp-care__list li::marker { color: #7a53b5; font-weight: 700; }

.ypdp .ypdp-care__note {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--ypdp-ink-soft);
}

/* =========================================================================
   12. Benefits
   ====================================================================== */

.ypdp .ypdp-benefits__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.ypdp .ypdp-benefits__grid--solo { grid-template-columns: 1fr; }

.ypdp .ypdp-benefits__listhead {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-benefits .ypdp-ticklist { margin-bottom: 0; }

/* =========================================================================
   13. Ingredients and herbs
   ====================================================================== */

.ypdp .ypdp-ingredients__body { max-width: 880px; }

.ypdp .ypdp-ingredients__herbhead { margin-top: 34px; }

.ypdp .ypdp-herbs {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 18px;
}

.ypdp .ypdp-herbs__item {
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: 12px;
	overflow: hidden;
}

.ypdp .ypdp-herbs__img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
}

.ypdp .ypdp-herbs__text { padding: 16px; font-size: 15px; }

/* =========================================================================
   14. Goes well with
   ====================================================================== */

.ypdp .ypdp-extras__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.ypdp .ypdp-xcard {
	display: flex;
	gap: 20px;
	align-items: center;
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	padding: 22px;
}

.ypdp .ypdp-xcard__media { flex: none; width: 96px; }

.ypdp .ypdp-xcard__media img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.ypdp .ypdp-xcard__body { flex: 1; min-width: 0; }

.ypdp .ypdp-xcard__title {
	margin: 0 0 4px;
	font-family: var(--ypdp-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.ypdp .ypdp-xcard__title a { color: var(--ypdp-plum); text-decoration: none; }
.ypdp .ypdp-xcard__title a:hover { color: var(--ypdp-amber); }

.ypdp .ypdp-xcard__desc {
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ypdp-ink-mute);
}

.ypdp .ypdp-xcard__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.ypdp .ypdp-xcard__price,
.ypdp .ypdp-xcard__price .amount {
	font-weight: 700;
	font-size: 18px;
	color: var(--ypdp-amber);
}

.ypdp .ypdp-xcard__price del { font-size: 15px; color: var(--ypdp-ink-faint); font-weight: 500; }
.ypdp .ypdp-xcard__price ins { background: none; text-decoration: none; }

/* The stock/SKU suffix belongs to the main buy box only. */
.ypdp .ypdp-xcard__price .price-stock-sku,
.ypdp .ypdp-related .price-stock-sku { display: none; }

.ypdp .ypdp-xcard__foot .button {
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	background: var(--ypdp-amber);
	color: var(--ypdp-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.4;
}

.ypdp .ypdp-xcard__foot .button:hover { background: var(--ypdp-amber-dark); color: var(--ypdp-white); }
/* =========================================================================
   15. Reviews and testimonials

   The review list is WooCommerce's own markup, restyled in place rather than
   replaced, so rating input, verified-owner badges and threading keep working.

   Two things about that markup drive the selectors below:

   1. WooCommerce styles `.comment-text` with a border, a 4px radius and a 50px
      left indent (to clear an avatar this site does not show). Those rules sit
      at two IDs of specificity — `.woocommerce #reviews #comments ol.commentlist
      li .comment-text` — so overriding them needs IDs too, not !important.
   2. This site's comment filter wraps the body in a *second* `.comment-text`
      inside `.description`, so every one of those rules lands twice: two
      borders, two 50px indents. That nesting is what produced the staggered
      double-boxed cards.
   ====================================================================== */

.ypdp .ypdp-reviews__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 28px;
	font-size: 16px;
	color: var(--ypdp-ink-mute);
}

.ypdp .ypdp-reviews__summary strong { color: var(--ypdp-plum); }
.ypdp .ypdp-reviews__summary .ypdp-stars { font-size: 19px; }

/* WooCommerce prints its own "Reviews" heading; the section supplies one. */
.ypdp .ypdp-reviews__list .woocommerce-Reviews-title,
.ypdp .ypdp-reviews__list #reviews #comments > h2 { display: none; }

/* --- the card grid ---------------------------------------------------- */

/*
 * Columns rather than grid: reviews vary a lot in length, and grid rows are as
 * tall as their tallest cell, which would leave a ragged gap under every short
 * review. Columns let cards pack against each other.
 */
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist {
	column-count: 2;
	column-gap: 16px;
	margin: 0 0 30px;
	padding: 0;
	width: 100%;
	list-style: none;
	background: none;
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist::before,
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist::after { content: none; }

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist > li {
	/* display: inline-block; */
	width: 100%;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin: 0 0 16px;
	padding: 20px;
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	background: var(--ypdp-white);
	list-style: none;
	text-indent: 0;
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist > li::before { content: none; }

/* Strip WooCommerce's inner frame at both nesting levels. */
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .comment_container,
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	display: block;
	overflow: visible;
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .comment-text::before,
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .comment-text::after { content: none; }

/* Avatars are off on this site; if they are ever switched on, keep them inline
   rather than absolutely positioned against an indent that no longer exists. */
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: left;
	width: 38px;
	height: 38px;
	margin: 0 12px 8px 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
}

/* --- card header ------------------------------------------------------ */

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li p.meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	flex-wrap: wrap;
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--ypdp-ink-faint);
}

.ypdp .ypdp-reviews__list .woocommerce-review__author {
	font-size: 16px;
	font-weight: 700;
	color: var(--ypdp-plum);
	margin-right: auto;
}

.ypdp .ypdp-reviews__list .woocommerce-review__verified {
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	color: var(--ypdp-teal);
}

.ypdp .ypdp-reviews__list .woocommerce-review__verified::before { content: '✓ '; }

.ypdp .ypdp-reviews__list .woocommerce-review__dash { display: none; }

.ypdp .ypdp-reviews__list .woocommerce-review__published-date {
	font-size: 13px;
	color: var(--ypdp-ink-faint);
}

.ypdp .ypdp-reviews__list .star-rating {
	position: static;
	float: none;
	margin: 0 0 8px;
	color: var(--ypdp-star);
	font-size: 14px;
	letter-spacing: 2px;
}

/* --- review body ------------------------------------------------------ */

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .description {
	font-size: 15px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .description p {
	margin: 0 0 10px;
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .description > *:last-child,
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist li .description p:last-child {
	margin-bottom: 0;
}

/* Empty anchor the comment filter injects ahead of the body text. */
.ypdp .ypdp-reviews__list .commenttext-arrow { display: none; }

/* --- shop-owner reply ------------------------------------------------- */

/*
 * The reply is a threaded comment nested inside the same <li>, so it can sit
 * inside the card as the design shows rather than becoming a card of its own.
 */
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist ul.children {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist ul.children > li {
	margin: 0;
	padding: 11px 14px;
	border: none;
	border-left: 3px solid var(--ypdp-teal-light);
	border-radius: 0 8px 8px 0;
	background: var(--ypdp-cream);
	font-size: 14px;
}

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist ul.children > li + li { margin-top: 8px; }

.ypdp .ypdp-reviews__list ul.children p.meta { margin-bottom: 4px; }

.ypdp .ypdp-reviews__list ul.children .woocommerce-review__author {
	font-size: 14px;
	margin-right: 0;
}

.ypdp .ypdp-reviews__list ul.children .woocommerce-review__author::after {
	content: ' replied:';
	font-weight: 400;
	color: var(--ypdp-ink-mute);
}

.ypdp .ypdp-reviews__list ul.children .woocommerce-review__published-date,
.ypdp .ypdp-reviews__list ul.children .star-rating { display: none; }

.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist ul.children > li .description {
	font-size: 14px;
}

/* --- review form / verification notice -------------------------------- */

.ypdp .ypdp-reviews__list .woocommerce-verification-required,
.ypdp .ypdp-reviews__list .woocommerce-noreviews {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	background: var(--ypdp-cream);
	font-size: 15px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-reviews__list #review_form_wrapper #respond,
.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist #respond {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius);
	background: var(--ypdp-white);
}

.ypdp .ypdp-reviews__list #respond .comment-reply-title {
	display: block;
	margin-bottom: 14px;
	font-family: var(--ypdp-serif);
	font-size: 21px;
	font-weight: 600;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-reviews__list #respond input[type='text'],
.ypdp .ypdp-reviews__list #respond input[type='email'],
.ypdp .ypdp-reviews__list #respond textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ypdp-line);
	border-radius: var(--ypdp-radius-sm);
	background: var(--ypdp-white);
	font-family: var(--ypdp-sans);
	font-size: 15px;
}

.ypdp .ypdp-reviews__list #respond .submit,
.ypdp .ypdp-reviews__list #respond input#submit {
	border: none;
	border-radius: var(--ypdp-radius-sm);
	padding: 12px 24px;
	background: var(--ypdp-plum);
	color: var(--ypdp-white);
	font-family: var(--ypdp-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.ypdp .ypdp-reviews__list #respond .submit:hover,
.ypdp .ypdp-reviews__list #respond input#submit:hover { background: var(--ypdp-plum-deep); }

/* --- testimonials ----------------------------------------------------- */

.ypdp .ypdp-reviews__tesths { margin: 30px 0 14px; }

.ypdp .ypdp-tests {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
}

.ypdp .ypdp-tests__item {
	margin: 0;
	background: var(--ypdp-mint);
	border-radius: 12px;
	padding: 18px;
	font-size: 15px;
	color: #37504b;
}

.ypdp .ypdp-tests__mark {
	display: block;
	margin-bottom: 6px;
	font-family: var(--ypdp-serif);
	font-size: 27px;
	line-height: 1;
	color: var(--ypdp-teal-light);
}

.ypdp .ypdp-tests__quote {
	margin: 0 0 8px;
	padding: 0;
	border: none;
	background: none;
	font-size: 15px;
	font-style: normal;
	color: inherit;
}

.ypdp .ypdp-tests__by { font-weight: 700; color: #2c3a37; }

/* --- write-a-review row ----------------------------------------------- */

.ypdp .ypdp-reviews__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 26px;
}

.ypdp .ypdp-reviews__cta-note {
	margin: 0;
	font-size: 15px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-reviews__cta-note strong { color: var(--ypdp-plum); }

.ypdp .ypdp-btn--dark {
	background: var(--ypdp-plum);
	color: var(--ypdp-white);
	text-decoration: none;
	font-size: 14px;
}

.ypdp .ypdp-btn--dark:hover,
.ypdp .ypdp-btn--dark:focus { background: var(--ypdp-plum-deep); color: var(--ypdp-white); }

/*
 * When reviews are restricted to verified owners, WooCommerce prints its own
 * notice saying so. The row above already carries that message in editable
 * wording, so hide the duplicate rather than stating it twice.
 */
.ypdp .ypdp-reviews__list--noform .woocommerce-verification-required { display: none; }

/* =========================================================================
   16. Shipping and returns
   ====================================================================== */

.ypdp .ypdp-cards {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px;
}

.ypdp .ypdp-cards__item {
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: 12px;
	padding: 18px;
	font-size: 15px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-cards__title {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-cards__text { margin: 0; }

.ypdp .ypdp-shipping__note {
	margin-top: 18px;
	font-size: 15px;
}

/* =========================================================================
   17. FAQ
   ====================================================================== */

.ypdp .ypdp-acc { display: grid; gap: 10px; }

.ypdp .ypdp-acc__item {
	background: var(--ypdp-cream);
	border: 1px solid var(--ypdp-line);
	border-radius: 12px;
	padding: 0 20px;
	transition: border-color 0.16s ease;
}

.ypdp .ypdp-acc__item[open] { border-color: #ddd2c2; }

.ypdp .ypdp-acc__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ypdp-plum);
	cursor: pointer;
	list-style: none;
}

.ypdp .ypdp-acc__q::-webkit-details-marker { display: none; }

.ypdp .ypdp-acc__sign {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.ypdp .ypdp-acc__sign::before,
.ypdp .ypdp-acc__sign::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 2px;
	background: var(--ypdp-amber);
	transform: translateY( -50% );
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.ypdp .ypdp-acc__sign::after { transform: translateY( -50% ) rotate( 90deg ); }
.ypdp .ypdp-acc__item[open] .ypdp-acc__sign::after { transform: translateY( -50% ) rotate( 0deg ); opacity: 0; }

.ypdp .ypdp-acc__a {
	padding: 0 0 15px;
	font-size: 15px;
	color: var(--ypdp-ink-soft);
}

.ypdp .ypdp-fineprint {
	margin: 26px 0 0;
	font-size: 14px;
	color: #7d7389;
}

.ypdp .ypdp-fineprint strong { color: var(--ypdp-ink-mute); }
.ypdp .ypdp-fineprint__sep { margin: 0 8px; color: var(--ypdp-line); }
/* =========================================================================
   18. Related products

   WooCommerce's own loop markup, restyled in place so the theme's related-
   products logic in functions.php keeps working.
   ====================================================================== */

.ypdp .ypdp-related__head { margin-bottom: 22px; }

.ypdp .ypdp-related .related > h2,
.ypdp .ypdp-related section.related > h2 {
	margin:0 0 20px 0;
	font-family: var(--ypdp-serif);
	font-size: clamp( 22px, 2.2vw, 28px );
	line-height: 1.25;
	font-weight: 600;
	color: var(--ypdp-plum);
}

/*
 * WooCommerce clears its float-based loop with
 * `.woocommerce ul.products::before/::after { content: " "; display: table }`.
 * Harmless while the list is floated — but in a grid container those two
 * pseudo-elements become grid *items* and each eat a cell, which is what left a
 * blank first column and pushed the fourth card onto its own row.
 */
.ypdp .ypdp-related ul.products::before,
.ypdp .ypdp-related ul.products::after {
	content: none;
	display: none;
}

.ypdp .ypdp-related ul.products {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ypdp .ypdp-related ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 0 16px;
	float: none !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	background: var(--ypdp-white);
	border: 1px solid var(--ypdp-line);
	border-radius: 12px;
	overflow: hidden;
}

.ypdp .ypdp-related ul.products li.product::before { content: none; }

.ypdp .ypdp-related ul.products li.product a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
}

.ypdp .ypdp-related ul.products li.product img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
}

/* The theme swaps the loop thumbnail for a slick carousel site-wide. Keep it,
   but shrink the dots so they read as an image counter rather than a stray rule
   across the card. */
.ypdp .ypdp-related .woo-product-slider ul.slick-dots {
	position: static;
	margin: 8px 0 0 !important;
	padding: 0;
	gap: 4px;
}

.ypdp .ypdp-related .woo-product-slider ul.slick-dots li button {
	width: 6px;
	height: 6px;
	background: #d8cfc3;
}

.ypdp .ypdp-related .woo-product-slider ul.slick-dots li.slick-active button {
	background: var(--ypdp-amber);
}

.ypdp .ypdp-related ul.products li.product .woocommerce-loop-product_title,
.ypdp .ypdp-related ul.products li.product .woocommerce-loop-product__title,
.ypdp .ypdp-related ul.products li.product h3 {
	flex: 1;
	margin: 14px 16px 8px;
	padding: 0;
	font-family: var(--ypdp-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	color: var(--ypdp-plum);
}

.ypdp .ypdp-related ul.products li.product .price {
	margin: 0 16px 12px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--ypdp-amber);
	text-align: left;
}

.ypdp .ypdp-related ul.products li.product .price del {
	font-size: 15px;
	font-weight: 500;
	color: var(--ypdp-ink-faint);
	opacity: 1;
}

.ypdp .ypdp-related ul.products li.product .price ins {
	background: none;
	text-decoration: none;
}

.ypdp .ypdp-related ul.products li.product .button {
	display: block;
	margin: 0 16px;
	padding: 11px 10px;
	border: none;
	border-radius: 8px;
	background: var(--ypdp-amber);
	color: var(--ypdp-white);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
	width: 88% !important;
}
.ypdp .ypdp-related ul.products li.product .button:hover:before{
display: none;
}

.ypdp .ypdp-related ul.products li.product .button:hover,
.ypdp .ypdp-related ul.products li.product .button:focus {
	background: var(--ypdp-amber-dark);
	color: var(--ypdp-white);
}

.ypdp .ypdp-related ul.products li.product .added_to_cart {
	margin: 8px 16px 0;
	font-size: 14px;
	color: var(--ypdp-teal);
	text-align: center;
}

/* The stock/SKU suffix belongs to the main buy box only. */
.ypdp .ypdp-related .price-stock-sku { display: none; }


/* =========================================================================
   19. Responsive
   ====================================================================== */

@media ( max-width: 1024px ) {
	
	.ypdp .ypdp-about__grid,
	.ypdp .ypdp-benefits__grid,
	.ypdp .ypdp-contents__grid,
	.ypdp .ypdp-spotlight__grid,
	.ypdp .ypdp-featquote,
	.ypdp .ypdp-compare__foot { grid-template-columns: 1fr; gap: 28px; }

	.ypdp .ypdp-audience__grid { grid-template-columns: repeat( 2, 1fr ); }
	.ypdp .ypdp-howto__grid { grid-template-columns: 1fr; }
	.ypdp .ypdp-cards { grid-template-columns: repeat( 2, 1fr ); }
	.ypdp .ypdp-related ul.products { grid-template-columns: repeat( 3, 1fr ); }
	.ypdp .ypdp-herbs { grid-template-columns: repeat( 2, 1fr ); }
	.ypdp .ypdp-quote { align-self: start; }
}

@media ( max-width: 768px ) {
	.ypdp .ypdp-hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.ypdp-band { padding: 44px 0; }
	.ypdp .ypdp-safety-band { padding: 44px 0 0; }
	.ypdp .ypdp-hero { padding: 20px 0 36px; }

	.ypdp .ypdp-ticklist--two,
	.ypdp .ypdp-steps,
	.ypdp .ypdp-extras__grid,
	.ypdp .ypdp-audience__grid,
	.ypdp .ypdp-tests { grid-template-columns: 1fr; }

	.ypdp .ypdp-value__title { font-size: 18px; padding: 12px 18px; }
	.ypdp .ypdp-value__rows { padding: 6px 18px 0; }
	.ypdp .ypdp-value__totals { padding: 12px 18px; }

	/* Reviews are a column layout, not a grid. */
	.ypdp .ypdp-reviews__list #reviews #comments ol.commentlist { column-count: 1; }

	.ypdp .ypdp-related ul.products { grid-template-columns: repeat( 2, 1fr ); }
	.ypdp .ypdp-specs { padding: 20px; }
	.ypdp .ypdp-specs__row { grid-template-columns: 120px 1fr; gap: 10px; }
	.ypdp .ypdp-safety { padding: 24px 20px; }
	.ypdp .ypdp-safety__title { font-size: 23px; }

}

@media ( max-width: 560px ) {
	.ypdp { --ypdp-gutter: 16px; }

	.ypdp .ypdp-cards,
	.ypdp .ypdp-herbs,
	.ypdp .ypdp-related ul.products { grid-template-columns: 1fr; }

	.ypdp .ypdp-hero__summary form.cart { flex-direction: column; align-items: stretch; }
	.ypdp .ypdp-hero__summary form.cart .quantity { align-self: flex-start; }
	.ypdp .ypdp-specs__row { grid-template-columns: 1fr; gap: 2px; }
	.ypdp .ypdp-xcard { flex-direction: column; align-items: center; }
	.ypdp .ypdp-xcard__media { width: 100%; max-width: 160px; }
	.ypdp .ypdp-qa__lead { font-size: 17px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ypdp *,
	.ypdp *::before,
	.ypdp *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}