/**
 * wc-tweaks.css — WooCommerce theming gap fill .
 *
 * theme.json covers ~70% of WC styling via `styles.blocks.woocommerce/*`.
 * This file fills the remaining 30%: error states, hover/focus pseudo-states,
 * complex line-item flex layouts, and a few -specific niceties (SAR
 * suffix alignment, Arabic-friendly form widths).
 *
 * Conditionally enqueued by functions.php → reforma_enqueue_assets() ONLY on
 * WC routes (is_woocommerce() || is_cart() || is_checkout() || is_account_page()).
 *
 * Keep this file under 150 lines. If it grows, refactor the rules back to
 * theme.json before adding more.
 */

/* ---------------------------------------------------------------------------
 * 1. Product cards on archive — hover lift + subtle shadow
 * --------------------------------------------------------------------------- */
.wp-block-woocommerce-product-collection .wp-block-post {
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-woocommerce-product-collection .wp-block-post:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px rgba(37, 59, 77, 0.12);
}
.wp-block-woocommerce-product-collection .wp-block-post .wc-block-components-product-image img {
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-woocommerce-product-collection .wp-block-post:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

/* ---------------------------------------------------------------------------
 * 2. Add-to-cart button hover / focus / active states
 * --------------------------------------------------------------------------- */
.wp-block-woocommerce-product-button .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-components-button:hover,
.single_add_to_cart_button:hover {
	background: color-mix(in oklch, var(--wp--preset--color--brand-gold) 88%, black 12%);
	box-shadow: 0 6px 16px -4px rgba(156, 120, 58, 0.32); /* brand-gold tint (was Legacy #277ABE) */
}
.wp-block-woocommerce-product-button .wp-block-button__link:focus-visible,
.wc-block-components-product-button .wp-block-button__link:focus-visible,
.wc-block-components-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-gold); /* was accent-purple (Legacy) */
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 3. Cart + Checkout — line item layout + SAR suffix alignment
 * --------------------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart-items__row,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item {
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border-radius: var(--wp--preset--radius--medium);
}
.wc-block-formatted-money-amount,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}
.wc-block-formatted-money-amount .wc-block-formatted-money-amount__suffix,
.woocommerce-Price-currencySymbol {
	margin-left: 0.25em;
	font-size: 0.85em;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------------
 * 4. Checkout form fields — focus ring + inline error
 * --------------------------------------------------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
	border-radius: var(--wp--preset--radius--medium);
	border: 1px solid var(--wp--preset--color--surface-strong, #d4d8df);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
	border-color: var(--wp--preset--color--brand-gold);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--wp--preset--color--brand-gold) 22%, transparent);
	outline: none;
}
.wc-block-components-text-input.has-error input,
.wc-block-components-select.has-error select {
	border-color: oklch(0.62 0.18 25);
	box-shadow: 0 0 0 3px oklch(0.62 0.18 25 / 0.18);
}
.wc-block-components-validation-error {
	color: oklch(0.55 0.18 25);
	font-size: var(--wp--preset--font-size--sm);
	margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * 5. Empty-state + notice polish
 * --------------------------------------------------------------------------- */
.wc-block-components-notice-banner.is-info {
	background: color-mix(in oklch, var(--wp--preset--color--brand-gold) 8%, white);
	border-left-color: var(--wp--preset--color--brand-gold);
}
.wc-block-components-notice-banner.is-success {
	background: color-mix(in oklch, var(--wp--preset--color--footer-forest) 10%, white); /* was accent-purple (Legacy) */
	border-left-color: var(--wp--preset--color--footer-forest);
}

/* ---------------------------------------------------------------------------
 * 6. My Account — orders table mobile stacking
 * --------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.woocommerce-MyAccount-content table.shop_table tr {
		display: flex;
		flex-direction: column;
		padding: var(--wp--preset--spacing--30) 0;
		border-bottom: 1px solid var(--wp--preset--color--surface-strong, #e5e7eb);
	}
	.woocommerce-MyAccount-content table.shop_table td {
		text-align: left;
		padding: 0.25rem 0;
	}
	.woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title) ": ";
		font-weight: 600;
		color: var(--wp--preset--color--ink-soft, #586672);
	}
}

/* ---------------------------------------------------------------------------
 * 7. RTL polish — Arabic locale flips price suffix margin
 * --------------------------------------------------------------------------- */
body.rtl .wc-block-formatted-money-amount .wc-block-formatted-money-amount__suffix {
	margin-left: 0;
	margin-right: 0.25em;
}

/* ---------------------------------------------------------------------------
 * 8. Disabled / loading states
 * --------------------------------------------------------------------------- */
.wc-block-components-button.is-loading,
.wp-block-woocommerce-checkout.is-loading {
	opacity: 0.6;
	pointer-events: none;
	cursor: wait;
}

/* ===========================================================================
 * legacy-bleed sweep + brand tokens — 2026-05-30
 * Removes Legacy-bleed colors (accent-purple, #277ABE blue) and applies
 * Reforma brand tokens. Appended as overrides (cascade beats earlier rules
 * via equal/greater specificity). Brand button = gold gradient
 * linear-gradient(90deg,#9C783A->#825A14), radius 0 30px 0 30px.
 * NOTE: filled-cart selectors written against WC 10.x block classes; full
 * verify deferred (store has 0 products + coming-soon ON).
 * ======================================================================== */

/* NOTE: the Legacy-bleed swaps (add-to-cart hover #277ABE shadow §2,
 * focus-visible outline accent-purple §2, is-success notice accent-purple §5)
 * were fixed in place above at their original rules. New brand styling below. */

/* --- 1. Empty-cart "Browse Products" CTA -> gold gradient brand button --- */
.wp-block-woocommerce-cart .reforma-gold-btn .wp-block-button__link,
.reforma-gold-btn .wp-block-button__link {
	background: linear-gradient(90deg, #9C783A 0%, #825A14 100%);
	border: 0;
	border-radius: 0 30px 0 30px;
	color: #fff;
}
.reforma-gold-btn .wp-block-button__link:hover {
	background: linear-gradient(90deg, #825A14 0%, #9C783A 100%);
	box-shadow: 0 6px 16px -4px rgba(156, 120, 58, 0.32);
}

/* --- 5. Cart block — order-summary / totals box, coupon form, and the
 *        Proceed-to-Checkout button (WC 10.x block classes). --- */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
	background: var(--wp--preset--color--blush, #fff0e6);
	border-radius: 0 30px 0 30px;
}
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
	background: transparent;
	border-radius: 0;
}
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	padding: var(--wp--preset--spacing--40, 1.5rem);
}
/* Coupon form input + apply button */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon input {
	border-radius: var(--wp--preset--radius--medium, 8px);
	border: 1px solid var(--wp--preset--color--surface-strong, #d4d8df);
}
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__button,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-button {
	background: linear-gradient(90deg, #9C783A 0%, #825A14 100%);
	border-radius: 0 30px 0 30px;
	color: #fff;
}
/* Proceed to Checkout button = gold gradient brand button */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-cart__submit-button {
	background: linear-gradient(90deg, #9C783A 0%, #825A14 100%);
	border: 0;
	border-radius: 0 30px 0 30px;
	color: #fff;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:hover {
	background: linear-gradient(90deg, #825A14 0%, #9C783A 100%);
}

/* --- 6. WC breadcrumb — gold pill, bold active crumb #3f2800 --- */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--blush, #fff0e6);
	color: #825a14;
}
.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a {
	color: #825a14;
}
.wc-block-breadcrumbs .wc-block-breadcrumbs__item:last-child,
.woocommerce-breadcrumb > :last-child {
	color: #3f2800;
	font-weight: 700;
}

/* ===========================================================================
 * shop catalog — figma 172:2909
 * Product archive (/shop/) treatment cards rendered by patterns/product-grid.php.
 * Card spec: image 418x526 radius "0 0 0 50px"; category pill #2b2b2b r20 white
 * 14px; title Playfair bold 24px #402800; gold "Book" link #9c783a; 3-up grid
 * responsive 3 -> 2 -> 1. Self-contained reforma-shop-* classes (no WC core
 * class dependency). Appended block — does not modify earlier rules.
 * ======================================================================== */

/* --- grid: 3-up, responsive 3 -> 2 -> 1 --- */
.reforma-shop-grid .reforma-shop-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: 1304px;
	margin-inline: auto;
}
@media (max-width: 1024px) {
	.reforma-shop-grid .reforma-shop-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.reforma-shop-grid .reforma-shop-cards { grid-template-columns: 1fr; }
}

/* --- card --- */
.reforma-shop-grid .reforma-shop-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* --- image: 418x526 ratio, radius 0 0 0 50px --- */
.reforma-shop-grid .reforma-shop-card-imagewrap {
	position: relative;
}
.reforma-shop-grid .reforma-shop-card-image {
	display: block;
	overflow: hidden;
	border-radius: 0 0 0 50px;
	aspect-ratio: 418 / 526;
}
.reforma-shop-grid .reforma-shop-card-image img,
.reforma-shop-grid .reforma-shop-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reforma-shop-grid .reforma-shop-card:hover .reforma-shop-card-image img,
.reforma-shop-grid .reforma-shop-card:hover .reforma-shop-card-img {
	transform: scale(1.04);
}

/* --- category pill: #2b2b2b r20 white 14px, top-left over image --- */
.reforma-shop-grid .reforma-shop-card-pill {
	position: absolute;
	top: 18px;
	left: 18px;
	margin: 0;
	padding: 7px 18px;
	background: #2b2b2b;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.2;
	border-radius: 20px;
	letter-spacing: 0.01em;
}

/* --- title: Playfair bold 24px #402800 --- */
.reforma-shop-grid .reforma-shop-card-title {
	margin: 0;
	font-family: 'TRY Vesterbro', 'Playfair Display', serif;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	color: #402800;
}
.reforma-shop-grid .reforma-shop-card-title a {
	color: inherit;
	text-decoration: none;
}
.reforma-shop-grid .reforma-shop-card-title a:hover {
	color: #825a14;
}

/* --- footer: price (left) + gold Book link (right) --- */
.reforma-shop-grid .reforma-shop-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}
.reforma-shop-grid .reforma-shop-card-price {
	font-weight: 600;
	color: #402800;
	font-size: 18px;
}
.reforma-shop-grid .reforma-shop-card-price .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* --- Book CTA: gold outline button #9c783a (Figma 113x51 bold 20px) --- */
.reforma-shop-grid .reforma-shop-card-book {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 113px;
	padding: 12px 26px;
	border: 1.5px solid #9c783a;
	border-radius: 0 30px 0 30px;
	color: #9c783a;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	background: transparent;
	transition: background 200ms ease, color 200ms ease;
}
.reforma-shop-grid .reforma-shop-card-book:hover,
.reforma-shop-grid .reforma-shop-card-book:focus-visible {
	background: linear-gradient(90deg, #9c783a 0%, #825a14 100%);
	color: #ffffff;
}

/* --- shop hero: on-brand forest band, centered copy --- */
.reforma-shop-hero .wp-block-cover__inner-container {
	max-width: 1100px;
	margin-inline: auto;
	text-align: center;
}
.reforma-shop-hero .reforma-shop-hero-title {
	font-family: 'TRY Vesterbro', 'Playfair Display', serif;
}
.reforma-shop-hero .reforma-shop-hero-intro {
	max-width: 720px;
	margin-inline: auto;
}

/* pdp — figma 48:897 (Dermal Fillers single product rebuild) */
.reforma-pdp-topbar,
.reforma-pdp-hero,
.reforma-pdp-detail,
.reforma-pdp-faq { background-color: #ffffff; }

/* --- breadcrumb cream pill, active #3f2800 bold --- */
.reforma-pdp-breadcrumb { margin: 0; }
.reforma-pdp-crumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 8px 18px;
	background: rgba(156,120,58,0.12);
	border-radius: 999px;
}
.reforma-pdp-crumbs li { margin: 0; }
.reforma-pdp-crumbs a {
	color: #6b5b43;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
}
.reforma-pdp-crumbs a:hover { color: #3f2800; }
.reforma-pdp-crumbs .reforma-pdp-sep { color: #9c783a; font-size: 16px; line-height: 1; }
.reforma-pdp-crumbs .is-active {
	color: #3f2800;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
}

/* --- hero (gallery block emits .reforma-pdp-gallery > .reforma-pdp-main-wrap > .reforma-pdp-main-image + .reforma-pdp-thumbs > .reforma-pdp-thumb) --- */
.reforma-pdp-hero-cols { align-items: stretch; }
.reforma-pdp-media-col { display: flex; }
.reforma-pdp-media-col .reforma-pdp-gallery { width: 100%; display: flex; flex-direction: column; }
.reforma-pdp-media-col .reforma-pdp-main-wrap {
	position: relative;
	margin: 0;
	width: 100%;
	flex: 1 1 auto;
	overflow: hidden;
	border-radius: 32px 0 0 0;
	border: 1px solid #9c783a;
}
.reforma-pdp-media-col .reforma-pdp-main-image {
	width: 100%;
	height: 100%;
	min-height: 432px;
	object-fit: cover;
	display: block;
}
.reforma-pdp-media-col .reforma-pdp-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 14px;
	background: #9c783a;
	border-radius: 999px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.reforma-pdp-media-col .reforma-pdp-thumbs {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}
.reforma-pdp-media-col .reforma-pdp-thumb {
	padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: 12px; overflow: hidden;
	width: 92px; height: 92px;
}
.reforma-pdp-media-col .reforma-pdp-thumb img { display: block; width: 92px; height: 92px; object-fit: cover; border-radius: 12px; }
.reforma-pdp-media-col .reforma-pdp-thumb.is-active img { outline: 2px solid #9c783a; outline-offset: -2px; }

/* orange info card (Group 149) 529x432, radius "0 32 0 0".
   Figma 48:897: card (flat-bottom) + ~20px gap + separate gradient Book button. */
.reforma-pdp-card-col { flex-grow: 0; }
.reforma-pdp-infostack {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 507px;
}
.reforma-pdp-infocard {
	background: #f2662d;
	border-radius: 0 32px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1 1 auto;
	min-height: 412px;
	overflow: hidden;
}
.reforma-pdp-infocard__body { padding: 32px 32px 28px; }
.reforma-pdp-infocard__eyebrow {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: lowercase;
}
.reforma-pdp-infocard__title {
	margin: 0 0 16px;
	color: #ffffff;
	font-family: 'Playfair Display', serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}
/* Figma: bar-separated plain white text in two rows (not pills) */
.reforma-pdp-infocard__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-bottom: 16px;
}
.reforma-pdp-infocard__tags--row2 {
	margin-top: -2px;
	margin-bottom: 14px;
}
.reforma-pdp-tag {
	padding: 0;
	background: none;
	border-radius: 0;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
}
.reforma-pdp-tag:not(:last-child) {
	margin-right: 13px;
}
.reforma-pdp-tag:not(:last-child)::after {
	content: '|';
	margin-left: 13px;
	color: rgba(255,255,255,0.45);
}
.reforma-pdp-infocard__desc {
	margin: 0 0 14px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}
.reforma-pdp-infocard__natural {
	margin: 0;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}
.reforma-pdp-infocard__book {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	height: 58px;
	background: linear-gradient(90deg, #9c7838 0%, #835b15 100%);
	border-radius: 8px 8px 40px 8px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: filter .2s ease;
}
.reforma-pdp-infocard__book:hover { filter: brightness(0.92); }

/* --- tab pills (active "Treatments Details" on forest, inactive white r12) --- */
.reforma-pdp-detail .reforma-pdp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
}
.reforma-pdp-detail .reforma-pdp-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 28px;
	background: #ffffff;
	border: 1px solid #e8e0d2;
	border-radius: 12px;
	color: #3f2800;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.reforma-pdp-detail .reforma-pdp-tab.is-active {
	background: #29514c;
	border-color: #29514c;
	color: #ffffff;
	font-weight: 500;
}

/* --- white detail card (r24) --- */
.reforma-pdp-card {
	background: #ffffff;
	border-radius: 24px;
	padding: 48px;
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}
/* Figma 48:897 shows ALL detail sections stacked inside one white card (not tab-hidden). */
.reforma-pdp-panel { display: block; }
.reforma-pdp-panel + .reforma-pdp-panel { margin-top: 40px; }
.reforma-pdp-sec-heading {
	margin: 0 0 16px;
	color: #3f2800;
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
}
.reforma-pdp-sec-body {
	margin: 0 0 16px;
	color: #5c5247;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}
.reforma-pdp-sec-body:last-child { margin-bottom: 0; }

/* how-to-apply steps */
.reforma-pdp-steps {
	list-style: none;
	margin: 24px 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.reforma-pdp-steps li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	background: #f5efe3;
	border-radius: 16px;
}
.reforma-pdp-step-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #29514c;
	border-radius: 999px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 600;
}
.reforma-pdp-step-txt {
	color: #3f2800;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 500;
}

/* how-to-apply media — Figma 48:897: large photo video block, rounded, gold border,
   centered translucent play button. */
.reforma-pdp-media--video {
	position: relative;
	display: block;
	margin-top: 24px;
	width: 100%;
	aspect-ratio: 1208 / 614;
	border-radius: 32px;
	border: 1px solid #9c783a;
	overflow: hidden;
	background: #efe7d8;
}
.reforma-pdp-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.reforma-pdp-media--video .reforma-pdp-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	background: rgba(250,231,245,0.86);
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}
.reforma-pdp-media--video .reforma-pdp-play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.95); }
.reforma-pdp-media--video .reforma-pdp-play svg path { fill: #29514c; }

/* ingredient chips */
.reforma-pdp-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.reforma-pdp-chip {
	padding: 12px 20px;
	background: #f5efe3;
	border-radius: 12px;
	color: #3f2800;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 500;
}

/* conclusion */
.reforma-pdp-conclusion {
	background: #f5efe3;
	border-radius: 16px;
	padding: 32px;
}
.reforma-pdp-conclusion .reforma-pdp-sec-body { margin: 0; }

/* --- FAQ "Need Answers?..." 48/700 + Contact-us dark btn + 5-item accordion r24 dark-open --- */
.reforma-pdp-faq-grid {
	display: flex;
	gap: 110px;
	align-items: flex-start;
}
.reforma-pdp-faq-intro { flex: 0 0 540px; max-width: 540px; }
.reforma-pdp-faq-heading {
	margin: 0 0 18px;
	color: #3f2800;
	font-family: 'Playfair Display', serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
}
.reforma-pdp-faq-sub {
	margin: 0 0 28px;
	color: #5c5247;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}
.reforma-pdp-faq-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 135px;
	height: 52px;
	padding: 0 18px;
	background: #2b2b2b;
	border-radius: 12px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s ease;
}
.reforma-pdp-faq-contact:hover { background: #000000; }
.reforma-pdp-faq-contact__arrow { margin-left: 10px; font-size: 18px; line-height: 1; }
.reforma-pdp-faq-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.reforma-pdp-faq-item {
	background: #ffffff;
	border: 1px solid #e8e0d2;
	border-radius: 24px;
	padding: 24px 32px;
	transition: background .2s ease, border-color .2s ease;
}
.reforma-pdp-faq-q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: #3f2800;
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight: 700;
}
.reforma-pdp-faq-q::-webkit-details-marker { display: none; }
.reforma-pdp-faq-q::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: #9c783a;
}
.reforma-pdp-faq-item[open] { background: #2b2b2b; border-color: #2b2b2b; }
.reforma-pdp-faq-item[open] .reforma-pdp-faq-q { color: #ffffff; }
.reforma-pdp-faq-item[open] .reforma-pdp-faq-q::after { content: '\2013'; color: #ffffff; }
.reforma-pdp-faq-a { margin-top: 14px; }
.reforma-pdp-faq-a p {
	margin: 0;
	color: #e8e0d2;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

/* --- responsive --- */
@media (max-width: 900px) {
	.reforma-pdp-hero-cols { flex-wrap: wrap; }
	.reforma-pdp-card-col { flex-basis: 100% !important; }
	.reforma-pdp-infocard { border-radius: 0 24px 0 24px; }
	.reforma-pdp-infocard__book { border-radius: 0 0 24px 0; }
	.reforma-pdp-media-col .reforma-pdp-main-wrap { border-radius: 24px 0 0 0; }
	.reforma-pdp-media-col .reforma-pdp-main-image { min-height: 320px; }
	.reforma-pdp-faq-grid { flex-direction: column; }
	.reforma-pdp-faq-intro { flex-basis: auto; max-width: none; }
	.reforma-pdp-faq-heading { font-size: 36px; }
}
@media (max-width: 600px) {
	.reforma-pdp-card { padding: 28px 20px; }
	.reforma-pdp-steps { grid-template-columns: 1fr; }
	.reforma-pdp-infocard__title { font-size: 32px; }
	.reforma-pdp-detail .reforma-pdp-tab { height: 48px; padding: 0 18px; font-size: 14px; }
	.reforma-pdp-faq-heading { font-size: 30px; }
	.reforma-pdp-faq-item { padding: 20px; }
}
/* end pdp — figma 48:897 */


/* ===========================================================================
   checkout — figma 50:872 (classic [woocommerce_checkout] + Treatment sidebar)
   Single-col "Billing Address" form (left) + orange "Treatment Details" card
   (right, 384px). Inputs r32 + soft shadow 0 0 8 #00000014 + 52h, no border;
   place-order = gold gradient button (Figma "Confirm order").
   =========================================================================== */

.reforma-checkout { max-width: 1200px; }

.reforma-checkout__title {
	color: #402800;
	font-family: 'TRY Vesterbro', 'Playfair Display', serif;
}

.reforma-checkout__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}
.reforma-checkout__form-col {
	flex: 1 1 560px;
	min-width: 0;
}
.reforma-checkout__side-col {
	flex: 0 0 384px;
	max-width: 384px;
}

/* --- classic form: section headings + labels --- */
.reforma-checkout__form-col h3 {
	color: #402800;
	font-family: 'TRY Vesterbro', 'Playfair Display', serif;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 18px;
}
.reforma-checkout__form-col .form-row { margin-bottom: 18px; }
.reforma-checkout__form-col .form-row label {
	display: block;
	margin-bottom: 8px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #4a2c3d;
}

/* --- input chrome: r32, soft shadow, 52h, no border (Figma) --- */
.reforma-checkout__form-col .input-text,
.reforma-checkout__form-col input.input-text,
.reforma-checkout__form-col input[type="text"],
.reforma-checkout__form-col input[type="email"],
.reforma-checkout__form-col input[type="tel"],
.reforma-checkout__form-col input[type="password"],
.reforma-checkout__form-col textarea,
.reforma-checkout__form-col select,
.reforma-checkout__form-col .select2-container .select2-selection--single {
	height: 52px;
	min-height: 52px;
	border: none;
	border-radius: 32px;
	background: #ffffff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
	padding: 0 22px;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	color: #4a2c3d;
	line-height: 52px;
	box-sizing: border-box;
	width: 100%;
}
.reforma-checkout__form-col textarea {
	height: auto;
	min-height: 104px;
	padding: 16px 22px;
	line-height: 1.5;
}
.reforma-checkout__form-col .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}
.reforma-checkout__form-col .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 52px;
	padding-left: 0;
	color: #4a2c3d;
}
.reforma-checkout__form-col .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 50px;
	right: 14px;
}
.reforma-checkout__form-col .input-text:focus,
.reforma-checkout__form-col select:focus,
.reforma-checkout__form-col textarea:focus {
	outline: 2px solid var(--wp--preset--color--brand-gold, #a07c42);
	outline-offset: 1px;
}

/* --- radius/border override: WC core ".woocommerce form .form-row .input-text"
       (specificity 0,3,1) was beating the base rule above (0,2,0) on
       border-radius + border, flattening the inputs to r4 + 1px border.
       Re-assert the Figma chrome (r32, no border) at higher specificity. --- */
body.woocommerce-checkout .reforma-checkout__form-col .form-row .input-text,
body.woocommerce-checkout .reforma-checkout__form-col .form-row input.input-text,
body.woocommerce-checkout .reforma-checkout__form-col .form-row textarea,
body.woocommerce-checkout .reforma-checkout__form-col .form-row select,
body.woocommerce-checkout .reforma-checkout__form-col input.input-text,
body.woocommerce-checkout .reforma-checkout__form-col select,
body.woocommerce-checkout .reforma-checkout__form-col textarea {
	border: none;
	border-radius: 32px;
}
body.woocommerce-checkout .reforma-checkout__form-col .form-row textarea,
body.woocommerce-checkout .reforma-checkout__form-col textarea {
	border-radius: 24px;
}

/* --- hide the default WC order-review table (replaced by Treatment Details
       card); the payment box + place-order live inside #order_review --- */
.reforma-checkout__form-col #order_review_heading,
.reforma-checkout__form-col .woocommerce-checkout-review-order-table {
	display: none;
}

/* --- Place order = gold gradient (Figma "Confirm order →") --- */
.reforma-checkout__form-col #place_order,
.woocommerce-checkout .reforma-checkout__form-col #place_order {
	height: 60px;
	width: 100%;
	border: none;
	border-radius: 0 30px 0 30px;
	background: linear-gradient(90deg, #9C783A, #825A14);
	color: #ffffff;
	font-family: 'TRY Vesterbro', 'Playfair Display', serif;
	font-size: 20px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	transition: filter 0.2s ease;
	margin-top: 8px;
}
.reforma-checkout__form-col #place_order:hover {
	filter: brightness(1.06);
	background: linear-gradient(90deg, #9C783A, #825A14);
}

/* ---------------------------------------------------------------------------
   Treatment Details sidebar card (orange #f25424 header + thumb + tags + totals)
   --------------------------------------------------------------------------- */
.reforma-treatment {
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}
.reforma-treatment__header {
	background: #f25424;
	padding: 20px 24px;
}
.reforma-treatment__title {
	margin: 0;
	color: #ffffff;
	font-family: 'TRY Vesterbro', 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.1;
}
.reforma-treatment__body { padding: 24px; }
.reforma-treatment__thumb { margin: 0; }
.reforma-treatment__thumb img {
	width: 100%;
	border-radius: 12px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.reforma-treatment__tags {
	margin: 16px 0 4px;
	color: #f25424;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.reforma-treatment__product {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: #402800;
	font-weight: 600;
}
.reforma-treatment__lines {
	margin-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 14px;
}
.reforma-treatment__line {
	display: flex;
	justify-content: space-between;
	padding: 7px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	color: #4a2c3d;
}
.reforma-treatment__total {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #402800;
}
.reforma-treatment__note {
	margin: 4px 0 0;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	color: #4a2c3d;
	opacity: 0.7;
}

/* --- responsive: stack sidebar below the form --- */
@media (max-width: 1023px) {
	.reforma-checkout__cols { gap: 32px; }
	.reforma-checkout__form-col,
	.reforma-checkout__side-col {
		flex: 1 1 100% !important;
		max-width: 100%;
	}
}
@media (max-width: 600px) {
	.reforma-checkout__title { font-size: 32px; }
	.reforma-checkout__form-col h3 { font-size: 20px; }
}
/* end checkout — figma 50:872 */

/* PDP — Figma tab switch has 3 tabs; the Conclusion content stacks below as a section (not a 4th tab) */
#pdp-conclusion.reforma-pdp-panel{ display:block !important; margin-top:32px; border-top:1px solid #efe4d4; padding-top:28px; }

/* v2.10.285 — retail PDP price line (booking-intake catalog: products show price as info) */
.reforma-pdp-infocard__price{margin:12px 0 0;font-family:var(--wp--preset--font-family--display,'Fraunces',serif);font-size:30px;line-height:1.1;font-weight:600;color:var(--wp--preset--color--footer-forest,#29514c);}
.reforma-pdp-infocard__price .woocommerce-Price-amount{font-family:inherit;white-space:nowrap;}
.reforma-pdp-infocard__price del{opacity:.5;font-size:.7em;margin-inline-end:.4em;}
.reforma-pdp-infocard__price ins{text-decoration:none;}

/* v2.10.301 — pdp figma-parity 2026-06-07 (node 48:897 source-verified) ===========
   Page-scoped overrides (.reforma-pdp-* / --vstrip exist only on the PDP).
   Wins cascade over pattern-decorations.css v2.10.88 vstrip block via equal/higher
   specificity + !important on competing props. Figma truths:
   - hero main image: rcr [0,32,0,0] = TOP-RIGHT 32px (live had TL 100px) + 2px gold
     gradient stroke rgb(156,120,58)->rgb(130,90,20).
   - eyebrow "injectable": TRY Vesterbro (display serif) 20/400 (live Poppins 16).
   - conclusion: plain text, no beige box (live had #f5efe3 r16 pad32).
   - sec body color: rgb(0,0,0) (live warm brown 92,82,71).
   - active tab weight 700 (live 500).
   - chevron nav frame: w=87 (thumb-col width), 1px gold border rgb(156,120,58).
   - thumbs: cr=8, NO stroke in Figma (active keeps gold ring as a usability affordance).
   ================================================================================ */

/* 1+2 — hero main image: flip rounded corner to TOP-RIGHT 32px + 2px gold gradient border.
   Border lives on the overflow-hidden wrap so it traces the rounded corner. */
.reforma-pdp-gallery--vstrip .reforma-pdp-main-wrap,
.reforma-pdp-media-col .reforma-pdp-main-wrap {
	border-radius: 0 32px 0 0 !important;
	border: 2px solid #9c783a; /* fallback flat gold if border-image unsupported */
	border-image: linear-gradient(180deg, rgb(156,120,58) 0%, rgb(130,90,20) 100%) 1;
	border-image-slice: 1;
}
.reforma-pdp-gallery--vstrip img.reforma-pdp-main-image,
.reforma-pdp-media-col .reforma-pdp-main-image {
	border-radius: 0 32px 0 0 !important;
}

/* 3 — orange info card eyebrow: display serif 20px (Figma TRY Vesterbro 20/400) */
.reforma-pdp-infocard__eyebrow {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	line-height: 24px;
}

/* 4 — conclusion: plain text (strip beige box) */
.reforma-pdp-conclusion {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

/* 5 — detail body copy: Figma black (live warm brown) */
.reforma-pdp-card .reforma-pdp-sec-body {
	color: #000000;
}

/* 6 — active tab weight 700 (Figma). !important to beat pattern-decorations.css
   line 12867 `.reforma-pdp-detail .reforma-pdp-tab{font-weight:500 !important}`. */
.reforma-pdp-detail .reforma-pdp-tab.is-active {
	font-weight: 700 !important;
}

/* 7 — chevron nav buttons: full thumb-column width (Figma frame w=87) + gold border.
   Thumb column is flex 0 0 78px; make the chevron span it. Thumb radius -> 8 (Figma cr=8). */
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb-nav {
	width: 100% !important;
	border: 1px solid rgb(156,120,58) !important;
	color: rgb(156,120,58) !important;
}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb-nav:hover {
	background: rgb(156,120,58) !important;
	color: #ffffff !important;
	border-color: rgb(156,120,58) !important;
}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb {
	border-radius: 8px;
}
.reforma-pdp-gallery--vstrip .reforma-pdp-thumb img {
	border-radius: 7px;
}
/* end pdp figma-parity 2026-06-07 ============================================== */

/* v2.10.307 — PDP hero corner fix: Figma render = TOP-LEFT rounded (orange card is TR; hero img is TL). Overrides the earlier 0 32px 0 0. 2026-06-07 */
.reforma-pdp-gallery--vstrip .reforma-pdp-main-wrap,
.reforma-pdp-media-col .reforma-pdp-main-wrap,
.reforma-pdp-gallery--vstrip img.reforma-pdp-main-image,
.reforma-pdp-media-col .reforma-pdp-main-image{border-radius:32px 0 0 0 !important}

/* v2.10.310 — PDP hero corner CORRECTION: node floral-beauty-concept-2 cr=[0,32,0,0]=TOP-RIGHT, no flip. Reverts the wrong 2.10.307 top-left remediation. 2026-06-07 */
.reforma-pdp-gallery--vstrip .reforma-pdp-main-wrap,
.reforma-pdp-media-col .reforma-pdp-main-wrap,
.reforma-pdp-gallery--vstrip img.reforma-pdp-main-image,
.reforma-pdp-media-col .reforma-pdp-main-image{border-radius:0 32px 0 0 !important}

/* ============================================================================
   v2.10.319 — RETAIL PDP image-size fix (Figma 7-products (b)).  2026-06-07
   Scope: WooCommerce retail product PDPs ONLY — body:not(.reforma-treatment-single).
   The treatment PDP (body.reforma-treatment-single, e.g. /treatment/dermal-fillers/)
   already renders ~657x503 via its multi-image thumb strip and is LEFT UNTOUCHED.
   Bug: retail media-col stretched to the tall info-stack (767) -> 763x763 giant square.
   Figma node floral-beauty-concept-2 = 647 x 508 (ratio 647/508 ~= 1.273), TR radius 32.
   Fix: don't stretch the retail media-col; cap the main image to 647 wide / 508 via
   aspect-ratio. Single-image retail products now also show the thumb strip (PHP gate
   lowered to >=1) so the 3-col Figma composition (image + 87px strip + 529 card) holds.
   ========================================================================== */
/* stop the retail media column stretching to the (taller) info-stack height */
body:not(.reforma-treatment-single) .reforma-pdp-hero-cols { align-items: flex-start; }
body:not(.reforma-treatment-single) .reforma-pdp-media-col { align-self: flex-start; }
/* gallery row: image + thumb strip side-by-side, top-aligned, no vertical stretch */
body:not(.reforma-treatment-single) .reforma-pdp-media-col .reforma-pdp-gallery {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	width: auto;
}
/* main image wrap: fixed Figma aspect 647/508, capped 647 wide, no flex-grow */
body:not(.reforma-treatment-single) .reforma-pdp-media-col .reforma-pdp-main-wrap {
	flex: 0 1 647px;
	width: 647px;
	max-width: 647px;
	aspect-ratio: 647 / 508;
	height: auto;
}
body:not(.reforma-treatment-single) .reforma-pdp-media-col .reforma-pdp-main-image {
	width: 100%;
	height: 100%;
	min-height: 0;          /* drop the 432 min that forced the tall square */
	object-fit: cover;
}
/* keep the restored thumb strip a fixed Figma-width column (87px), top-aligned */
body:not(.reforma-treatment-single) .reforma-pdp-media-col .reforma-pdp-thumbs-col {
	flex: 0 0 87px;
}
/* end v2.10.319 ============================================================ */

/* v2.10.325 PDP tab scroll offset for 88px sticky header — belt-and-suspenders 2026-06-08
   JS offset scroll in class-catalog-blocks.php is the primary fix; this honors hash
   deep-links (#pdp-apply) + modern scrollIntoView. 88px sticky header + ~24px gap. */
.reforma-pdp-panel { scroll-margin-top: 112px; }
/* end v2.10.325 ============================================================ */