/* Skin House product page: course builder layout (templates/content-single-product.php). */

/* Theme chrome we replace: no WoodMart product summary/tabs inside our template. */
.sh-product-page .single-breadcrumbs-wrapper { display: none; }

/* ---------- Hero: arched photo + builder ---------- */
.sh.sh-pp { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 6vw, 88px); }
.sh-pp .sh-pp__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.sh-pp .sh-pp__media { position: sticky; top: 110px; }
.sh-pp .sh-pp__arch {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px var(--sh-r-sm) var(--sh-r-sm);
	background: var(--sh-cream);
}
.sh-pp .sh-pp__noimg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, var(--sh-cream), #d9cdc3);
	color: var(--sh-taupe-dark);
}
.sh-pp .sh-pp__noimg .sh-icon { width: 72px; height: 72px; stroke-width: 1.1; }
.sh-pp button.sh-pp__plan[hidden] { display: none; }
.sh-pp button.sh-pp__chip.is-off .sh-pp__chip-price { font-size: 12.5px; }
.sh-pp .sh-pp__arch img.sh-pp__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.sh-pp .sh-pp__facts { margin: 22px 0 0; display: grid; gap: 0; }
.sh-pp .sh-pp__fact {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 12px;
	padding: 13px 0;
	border-top: 1px solid var(--sh-line);
	font-size: 14.5px;
	line-height: 1.5;
}
.sh-pp .sh-pp__fact:first-child { border-top: 0; }
.sh-pp .sh-pp__fact dt {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--sh-font-head);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--sh-ink);
}
.sh-pp .sh-pp__fact dt .sh-icon { width: 17px; height: 17px; color: var(--sh-taupe); }
.sh-pp .sh-pp__fact dd { margin: 0; color: var(--sh-text); }

/* Title block */
.sh-pp .sh-pp__crumbs { margin: 0 0 14px; font-size: 13.5px; color: var(--sh-muted); }
.sh-pp .sh-pp__crumbs a { color: var(--sh-muted); text-decoration: none; }
.sh-pp .sh-pp__crumbs a:hover { color: var(--sh-ink); }
.sh-pp .sh-pp__title {
	margin: 0 0 14px;
	font-family: var(--sh-font-head);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--sh-ink);
}
.sh-pp .sh-pp__intro { margin: 0 0 16px; max-width: 58ch; font-size: 17px; line-height: 1.65; color: var(--sh-text); }
.sh-pp .sh-pp__from {
	margin: 0 0 30px;
	font-family: var(--sh-font-head);
	font-weight: 500;
	font-size: 17px;
	color: var(--sh-taupe-dark);
}
.sh-pp .sh-pp__from .woocommerce-Price-amount { font-weight: 600; color: var(--sh-ink); }

/* ---------- Builder ---------- */
.sh-pp .sh-pp__builder { display: grid; gap: 26px; }
.sh-pp .sh-pp__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.sh-pp .sh-pp__step-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--sh-font-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--sh-ink);
}
.sh-pp .sh-pp__step-no {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sh-taupe);
	color: #fff;
	font-size: 14px;
}

.sh-pp .sh-pp__fixed {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 14px 18px;
	border-radius: var(--sh-r-sm);
	background: var(--sh-light);
	font-size: 15px;
}
.sh-pp .sh-pp__fixed-label { font-family: var(--sh-font-head); font-weight: 600; font-size: 13.5px; color: var(--sh-muted); }
.sh-pp .sh-pp__fixed-value { color: var(--sh-ink); }

/* Area chips */
.sh-pp .sh-pp__chips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px;
}
.sh-pp button.sh-pp__chip,
.sh-pp button.sh-pp__plan {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	min-height: 64px;
	margin: 0;
	padding: 13px 16px;
	border: 1.5px solid rgba(153, 137, 126, 0.28);
	border-radius: var(--sh-r-sm);
	background: var(--sh-light);
	color: var(--sh-ink);
	font-family: var(--sh-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	cursor: pointer;
	box-shadow: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sh-pp button.sh-pp__chip:hover,
.sh-pp button.sh-pp__plan:hover { border-color: var(--sh-taupe); background: #fff; }
.sh-pp button.sh-pp__chip[aria-pressed="true"],
.sh-pp button.sh-pp__plan[aria-pressed="true"] {
	border-color: var(--sh-taupe-dark);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--sh-taupe-dark);
}
.sh-pp button.sh-pp__chip.is-off,
.sh-pp button.sh-pp__plan.is-off { opacity: 0.4; cursor: not-allowed; }
.sh-pp button.sh-pp__chip:focus-visible,
.sh-pp button.sh-pp__plan:focus-visible { outline: 2px solid var(--sh-taupe-dark); outline-offset: 2px; }
.sh-pp .sh-pp__chip-name { font-family: var(--sh-font-head); font-weight: 500; font-size: 14.5px; }
.sh-pp .sh-pp__chip-price { font-size: 13.5px; color: var(--sh-muted); }

/* Course plans */
.sh-pp .sh-pp__plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}
.sh-pp button.sh-pp__plan { position: relative; min-height: 120px; padding: 18px; gap: 6px; }
.sh-pp .sh-pp__plan-name { font-family: var(--sh-font-head); font-weight: 600; font-size: 15.5px; }
.sh-pp .sh-pp__plan-price { font-family: var(--sh-font-head); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--sh-ink); }
.sh-pp .sh-pp__plan-each { font-size: 13.5px; color: var(--sh-muted); }
.sh-pp .sh-pp__plan-save { font-size: 13.5px; font-weight: 700; color: #4e7a3e; }
.sh-pp .sh-pp__plan-save:empty { display: none; }
.sh-pp button.sh-pp__plan.is-best::before {
	content: "Best value";
	position: absolute;
	top: -11px;
	right: 14px;
	padding: 4px 10px;
	border-radius: var(--sh-r-pill);
	background: var(--sh-taupe);
	color: #fff;
	font-family: var(--sh-font-head);
	font-size: 11.5px;
	font-weight: 600;
}

/* Summary */
.sh-pp .sh-pp__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 20px;
	padding: 22px 24px;
	border-radius: var(--sh-r-md);
	background: var(--sh-cream);
}
.sh-pp .sh-pp__summary-text { min-width: 0; }
.sh-pp .sh-pp__summary-pick { margin: 0; font-size: 14.5px; color: var(--sh-text); }
.sh-pp .sh-pp__summary-total { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.sh-pp .sh-pp__summary-total [data-total] { font-family: var(--sh-font-head); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--sh-ink); }
.sh-pp .sh-pp__summary-each { font-size: 14px; color: var(--sh-muted); }
.sh-pp .sh-pp__summary-note { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13.5px; color: var(--sh-text); }
.sh-pp .sh-pp__summary-note:empty { display: none; }

/* Book button: brand pill with round arrow badge */
.sh-product-page button.sh-pp__book {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 7px 7px 7px 26px;
	border: 0;
	border-radius: 50px !important; /* WoodMart's :is(button…) reset squares pills outside .sh */
	background: var(--sh-taupe, #99897e);
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.sh-product-page button.sh-pp__book:hover:not(:disabled) { background: #7d6e64; }
.sh-product-page button.sh-pp__book:disabled { opacity: 0.45; cursor: not-allowed; }
.sh-product-page button.sh-pp__book:focus-visible { outline: 2px solid #7d6e64; outline-offset: 3px; }
.sh-product-page .sh-pp__book-badge {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
}
.sh-product-page .sh-pp__book-badge .sh-icon { width: 17px; height: 17px; }

/* The real WooCommerce form: present for its logic, not shown. */
.sh-pp .sh-pp__wc {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- How booking works ---------- */
.sh-pp-steps .sh-pp-steps__title { margin: 0 0 32px; }
.sh-pp-steps .sh-pp-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: shstep;
}
.sh-pp-steps .sh-pp-steps__list li {
	counter-increment: shstep;
	padding: 26px 24px;
	border-radius: var(--sh-r-md);
	background: #fff;
	border: 1px solid rgba(153, 137, 126, 0.2);
}
.sh-pp-steps .sh-pp-steps__list li::before {
	content: counter(shstep);
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--sh-cream);
	color: var(--sh-taupe-dark);
	font-family: var(--sh-font-head);
	font-weight: 600;
}
.sh-pp-steps h3 { margin: 0 0 8px; font-family: var(--sh-font-head); font-weight: 600; font-size: 18px; color: var(--sh-ink); }
.sh-pp-steps p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--sh-text); }
.sh-pp-steps .sh-pp-steps__help { margin-top: 22px; font-size: 15.5px; }
.sh-pp-steps .sh-pp-steps__help a { color: var(--sh-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sh-taupe); text-underline-offset: 3px; }

/* ---------- About the treatment ---------- */
.sh-pp-about .sh-pp-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}
.sh-pp-about .sh-pp-about__body p { margin: 0 0 22px; font-size: 17px; line-height: 1.7; color: var(--sh-text); }

/* ---------- Phone booking bar ---------- */
.sh-pp-bar { display: none; }

@media (max-width: 1024px) {
	/* One column: photo, then title + builder, then the facts. */
	.sh-pp .sh-pp__grid { grid-template-columns: 1fr; gap: 28px; }
	.sh-pp .sh-pp__media { display: contents; }
	.sh-pp .sh-pp__arch { order: 0; aspect-ratio: 4 / 3; border-radius: var(--sh-r-md); width: 100%; max-width: 640px; }
	.sh-pp .sh-pp__main { order: 1; }
	.sh-pp .sh-pp__facts { order: 2; margin: 0; }
	.sh-pp-steps .sh-pp-steps__list { grid-template-columns: 1fr; }
	.sh-pp-about .sh-pp-about__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.sh.sh-pp { padding-top: 16px; }
	.sh-pp .sh-pp__arch { aspect-ratio: 16 / 10; }
	.sh-pp .sh-pp__fact { grid-template-columns: 130px minmax(0, 1fr); font-size: 14px; }
	.sh-pp .sh-pp__intro { font-size: 16px; }
	.sh-pp .sh-pp__chips { grid-template-columns: 1fr 1fr; gap: 8px; }
	.sh-pp button.sh-pp__chip { min-height: 58px; padding: 11px 13px; }
	.sh-pp .sh-pp__plans { grid-template-columns: 1fr; }
	.sh-pp button.sh-pp__plan { min-height: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
	.sh-pp .sh-pp__plan-price { grid-column: 2; grid-row: 1; font-size: 19px; }
	.sh-pp .sh-pp__plan-each { grid-column: 1; }
	.sh-pp .sh-pp__plan-save { grid-column: 2; text-align: right; }
	.sh-pp .sh-pp__summary { grid-template-columns: 1fr; }
	.sh-pp .sh-pp__summary .sh-pp__book { justify-self: stretch; justify-content: space-between; }

	.sh-pp-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		box-shadow: 0 -10px 28px -18px rgba(60, 45, 35, 0.5);
		transform: translateY(110%);
		transition: transform 0.25s ease;
	}
	body.sh-pp-ready.sh-pp-bar-on .sh-pp-bar { transform: none; }
	.sh-pp-bar .sh-pp-bar__text { display: flex; flex-direction: column; min-width: 0; }
	.sh-pp-bar .sh-pp-bar__total { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 19px; color: #242424; }
	.sh-pp-bar .sh-pp-bar__pick { font-size: 12.5px; color: #8a827c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	/* Keep Sky360's WhatsApp bubble clear of the bar. */
	body.sh-pp-ready.sh-pp-bar-on .sky-whatsapp-widget { bottom: 84px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.sh-pp-bar,
	.sh-pp button.sh-pp__chip,
	.sh-pp button.sh-pp__plan { transition: none; }
}