/* ============================================================
   Wellwet redesign 2026 — product page.
   Figma: wellwet_client file, nodes 322:133 (1440) / 322:443 (744) / 322:740 (393).
   Parsed design trees: design-ref/product/tree-*.txt.
   Base tokens, buttons, badges, cards — in wellwet-redesign.css.
   ============================================================ */

/* ============ TOP BAR (purple strip above the header) ============ */

.ww-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100; /* above #header (99): they don't overlap, but the strip must stay above the blend layer */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	background: var(--ww-purple);
	color: #fff;
	font-family: var(--ww-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
/* Shift the fixed header and content down by the strip height */
body.single-product #header { top: 34px; }
body.admin-bar.single-product #header { top: 66px; }
body.single-product:not(.home) #wrapper { padding-top: 120px; } /* 34 + 86 */
body.admin-bar.single-product .ww-topbar { top: 32px; }
/* Header divider, per design. Drawn on body::after instead of .ww-header:
   #header has mix-blend-mode: exclusion which would invert #E9E9E9 to #161616.
   Visible only at the very top of the page (JS toggles .ww-scrolled on body). */
body.single-product::after {
	content: '';
	position: fixed;
	top: 120px; /* 34 topbar + 86 header */
	left: 0;
	right: 0;
	height: 1px;
	background: #E9E9E9;
	z-index: 98; /* just below #header (99) */
	pointer-events: none;
	transition: opacity .25s;
}
body.admin-bar.single-product::after { top: 152px; }
body.single-product.ww-scrolled::after { opacity: 0; }

/* ============ MAIN BLOCK: gallery + info ============ */

.ww-product {
	display: grid;
	grid-template-columns: 686fr 640fr;
	column-gap: 56px;
	align-items: start;
	padding: 0 var(--ww-side);
}

/* --- Gallery --- */
.ww-product__media {
	position: relative;
	aspect-ratio: 686 / 804;
	overflow: hidden;
	background: var(--ww-light);
}
.ww-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Слайд-трек: фото в рядок, перегортання — плавний зсув; під час свайпу
   transition вимикається (is-dragging), щоб трек ішов за пальцем без лагу */
.ww-product__track {
	display: flex;
	height: 100%;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.ww-product__track.is-dragging { transition: none; }
.ww-product__track img { flex: 0 0 100%; }
/* EWWW «Picture WebP» загортає img у <picture>: тоді flex-елементом стає обгортка */
.ww-product__track picture { flex: 0 0 100%; height: 100%; }
.ww-product__track picture img { width: 100%; height: 100%; }
.ww-product__thumb picture,
.ww-about__media picture { display: block; width: 100%; height: 100%; }
/* Arrow buttons over the main photo — desktop only, mobile/tablet flips by swipe */
.ww-product__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
	min-width: 0;
	color: var(--ww-dark);
	cursor: pointer;
	transition: opacity .2s;
}
.ww-product__nav:hover,
.ww-product__nav:focus { background: none; color: var(--ww-dark); box-shadow: none; opacity: .6; }
.ww-product__nav svg { width: 24px; height: 24px; display: block; }
.ww-product__nav--prev { left: 12px; }
.ww-product__nav--prev svg { transform: scaleX(-1); }
.ww-product__nav--next { right: 12px; }
@media (max-width: 849px) {
	.ww-product__nav { display: none; }
}

.ww-product__thumbs {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}
.ww-product__thumbs::-webkit-scrollbar { display: none; }
.ww-product__thumb {
	flex: 0 0 91px;
	width: 91px;
	height: 114px;
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--ww-light);
	box-shadow: none;
	min-width: 0;
	cursor: pointer;
	opacity: .3;
	transition: opacity .2s;
	overflow: hidden;
}
.ww-product__thumb:hover { opacity: .6; background: var(--ww-light); }
.ww-product__thumb.is-active { opacity: 1; }
.ww-product__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Info column --- */
.ww-product__summary {
	display: flex;
	flex-direction: column;
	gap: 52px;
	padding-top: 35px; /* in the design the column starts lower than the photo */
}
.ww-product__head { display: flex; flex-direction: column; gap: 14px; }
.ww-product__status { font-family: var(--ww-body); font-size: 16px; line-height: 1.2; color: var(--ww-gray); }
.ww-product__title {
	font-family: var(--ww-head);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.04;
	color: #000;
	margin: 0;
}
.ww-product__price { font-family: var(--ww-head); font-weight: 400; font-size: 24px; line-height: 1; color: var(--ww-gray); }

.ww-product__desc { font-family: var(--ww-body); font-size: 16px; line-height: 1.2; color: #000; }
.ww-product__desc p { max-width: 466px; margin: 0; }
.ww-product__desc p + p { margin-top: 8px; }
/* Рейтинг під ціною (макет 421:2194): зірки ion:star + лічильник, клік скролить до секції відгуків */
.ww-product__rating { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.ww-product__desc .ww-product__rating { text-decoration: none; color: #000; }
.ww-product__stars { display: flex; gap: 3px; }
.ww-product__star { width: 16px; height: 16px; color: #D9D9D9; }
.ww-product__star.is-on { color: var(--ww-dark); }
.ww-product__star svg { display: block; width: 100%; height: 100%; }
.ww-product__benefits { display: flex; gap: 7px; margin-top: 24px; }
.ww-product__benefit { width: 65px; height: 65px; color: #000; }
.ww-product__benefit svg { width: 100%; height: 100%; display: block; }
/* Arbitrary images below the description (product metabox "Images below description") */
.ww-product__desc-media { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.ww-product__desc-media img { width: 65px; height: 65px; object-fit: contain; display: block; }

/* --- Delivery (dot leader, per design) --- */
.ww-product__delivery { display: flex; flex-direction: column; gap: 10px; }
.ww-product__delivery-row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	font-family: var(--ww-body);
	font-size: 16px;
	line-height: 1.2;
	color: #000;
}
.ww-product__dots {
	flex: 1 1 auto;
	height: 2px;
	align-self: flex-end;
	margin-bottom: 4px;
	background-image: radial-gradient(circle, #000 1px, transparent 1.2px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
	opacity: .4;
}

/* --- Volume selector --- */
.ww-product__form { display: flex; flex-direction: column; gap: 52px; }
.ww-volumes { display: flex; flex-direction: column; gap: 13px; }
.ww-volumes__label { font-family: var(--ww-body); font-size: 16px; line-height: 1.2; color: #000; }
.ww-volumes__list { display: flex; flex-direction: column; gap: 13px; }
.ww-volume {
	display: flex;
	align-items: center;
	height: 58px;
	padding: 0 16px;
	background: #F4F6F7;
	cursor: pointer;
	margin: 0;
	transition: box-shadow .15s;
}
.ww-volume.is-active { box-shadow: inset 0 0 0 1px #000; }
.ww-volume.is-out { opacity: .5; cursor: default; }
.ww-volume input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.ww-volume__radio {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-radius: 50%;
	position: relative;
}
.ww-volume.is-active .ww-volume__radio::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: #000;
}
/* font-weight явно: .ww-volume — це <label>, Flatsome глобально робить лейбли жирними */
.ww-volume__name { margin-left: 10px; font-family: var(--ww-body); font-weight: 400; font-size: 16px; line-height: 1.2; color: #000; }
.ww-volume__price { margin-left: auto; font-family: var(--ww-head); font-weight: 500; font-size: 20px; line-height: 1; color: var(--ww-gray); }
.ww-volume.is-active .ww-volume__price { color: #000; }
.ww-volumes__note { font-family: var(--ww-body); font-size: 14px; line-height: 1.3; color: #000; opacity: .4; }

.ww-product__buy { align-self: flex-start; border: 0; cursor: pointer; }
.ww-product__buy:disabled { opacity: .5; cursor: default; }

/* ============ DESCRIPTION + ACCORDION ============ */

.ww-about {
	display: grid;
	grid-template-columns: 686fr 640fr;
	column-gap: 56px;
	align-items: start;
	padding: 0 var(--ww-side);
	margin-top: 48px;
}
.ww-about__media { aspect-ratio: 686 / 775; overflow: hidden; background: var(--ww-light); }
.ww-about__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ww-about__body {
	display: flex;
	flex-direction: column;
	gap: 54px;
	border-top: 1px solid #D3D3D3;
	padding-top: 54px;
}
.ww-about__text { display: flex; flex-direction: column; gap: 12px; }
.ww-about__label { font-family: var(--ww-body); font-size: 16px; line-height: 1.2; color: #999; }
.ww-about__content { font-family: var(--ww-body); font-size: 16px; line-height: 1.2; color: #000; max-width: 466px; }
.ww-about__content p { margin: 0 0 12px; }
.ww-about__content p:last-child { margin-bottom: 0; }

/* Посилання в описах товару: виділяємо лише підкресленням, без жирності та зміни кольору.
   У контенті з БД посилання загорнуті в <strong> — гасимо і його */
.ww-product__desc a,
.ww-about__content a,
.ww-pacc__inner a {
	color: inherit;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ww-product__desc a:hover, .ww-product__desc a:focus,
.ww-about__content a:hover, .ww-about__content a:focus,
.ww-pacc__inner a:hover, .ww-pacc__inner a:focus { color: inherit; text-decoration: underline; }
.ww-product__desc a strong, .ww-product__desc a b,
.ww-about__content a strong, .ww-about__content a b,
.ww-pacc__inner a strong, .ww-pacc__inner a b { font-weight: 400; }

/* Specs accordion: rows with divider lines */
.ww-pacc { border-bottom: 1px solid #D3D3D3; }
.ww-pacc__item { border-top: 1px solid #D3D3D3; }
.ww-pacc__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	width: 100%;
	background: none;
	border: 0;
	padding: 21px 0;
	margin: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--ww-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: #000;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	min-width: 0;
}
.ww-pacc__q:hover,
.ww-pacc__q:focus,
.ww-pacc__q:active { background: none; color: #000; box-shadow: none; }
/* Smooth expand — same mechanics as the homepage FAQ */
.ww-pacc__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
	font-family: var(--ww-body);
	font-size: 15px;
	line-height: 1.35;
	color: #444;
}
.ww-pacc__inner { overflow: hidden; }
.ww-pacc__item.is-open .ww-pacc__a { grid-template-rows: 1fr; }
.ww-pacc__inner > * { margin: 0 0 10px; }
.ww-pacc__item.is-open .ww-pacc__inner { padding-bottom: 24px; }
.ww-pacc__props { list-style: none; margin: 0; padding: 0; }
.ww-pacc__props li { margin: 0 0 8px; }
.ww-pacc__props li span { color: var(--ww-gray); margin-right: 6px; }

/* ============ REVIEWS: картки відгуків каруселлю (макет 421:1060) ============ */

/* Ціль якоря #ww-reviews — не ховати заголовок під фіксованим хедером (висоти = padding-top #wrapper) */
.ww-prod-reviews { scroll-margin-top: 120px; }
.ww-prod-reviews__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}
/* Стрілки видно на всіх брейкпоінтах (на відміну від головної): ряд скролиться завжди */
.ww-prod-reviews .ww-reviews__nav { display: flex; }
.ww-prod-reviews__prev svg { transform: scaleX(-1); } /* та сама іконка, що й «вперед», віддзеркалена */
.ww-prod-reviews__row {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
}
.ww-prod-reviews__row::-webkit-scrollbar { display: none; }
.ww-prod-reviews__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* Картка 338×546 (макет 1440: рівно 4 в ряд на контейнері 1382) */
.ww-rev-card {
	flex: 0 0 calc((100% - 30px) / 4);
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 546px;
	padding: 24px;
	background: #F4F6F7;
	scroll-snap-align: start;
	font-family: var(--ww-body);
}
.ww-rev-card.is-hidden { display: none; } /* приховані до кліку «Більше відгуків» */
.ww-rev-card__name { font-size: 16px; line-height: 1.2; color: #999; }
.ww-rev-card__stars { display: flex; gap: 3px; }
.ww-rev-card__star { width: 16px; height: 16px; color: #D9D9D9; }
.ww-rev-card__star.is-on { color: var(--ww-dark); }
.ww-rev-card__star svg { display: block; width: 100%; height: 100%; }
/* Довгий відгук скролиться всередині картки (примітка дизайнера в макеті);
   тонкий скролбар 7px за макетом */
.ww-rev-card__text {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden auto;
	font-size: 16px;
	line-height: 1.2;
	color: var(--ww-dark);
	scrollbar-width: thin;
	scrollbar-color: #E8E8E8 transparent;
}
.ww-rev-card__text::-webkit-scrollbar { width: 7px; }
.ww-rev-card__text::-webkit-scrollbar-thumb { background: #E8E8E8; border-radius: 10px; }
.ww-rev-card__text::-webkit-scrollbar-track { background: transparent; }
.ww-rev-card__text p { margin: 0 0 10px; }
.ww-rev-card__text p:last-child { margin-bottom: 0; }
.ww-rev-card__img { width: 161px; height: 212px; object-fit: cover; flex: 0 0 auto; }
.ww-rev-card__date { font-size: 14px; line-height: 1.2; color: #999; margin-top: 12px; } /* 12 gap + 12 = 24 після фото, за макетом */

/* ============ ≤1100: офсети під бургер-хедер (70px) ============ */
@media (max-width: 1100px) {
	body.single-product:not(.home) #wrapper { padding-top: 104px; } /* 34 + 70 */
	body.single-product::after { top: 104px; }
	body.admin-bar.single-product::after { top: 136px; }
	.ww-prod-reviews { scroll-margin-top: 104px; }
}

/* ============ TABLET ≤849 ============ */
/* Стековий лейаут з фото на всю ширину — лише від 849 і нижче: на 850–1100
   лишається двоколонковий грід, інакше фото завелике (пропорції макета 1440) */
@media (max-width: 849px) {
	.ww-product { display: block; padding: 0; }
	.ww-product__media { aspect-ratio: 744 / 758; }
	.ww-product__thumbs { padding: 0 var(--ww-side); }
	.ww-product__summary { padding: 41px var(--ww-side) 0; }

	.ww-about { display: block; margin-top: 64px; }
	.ww-about__media { aspect-ratio: 696 / 786; margin: 0; }
	.ww-about__body { border-top: 0; padding-top: 0; margin-top: 64px; }

	/* Картки відгуків на планшеті — фіксовані 323×522, ряд скролиться (макет 744) */
	.ww-rev-card { flex-basis: 323px; height: 522px; padding: 16px; }
}

/* ============ MOBILE ≤549 ============ */
@media (max-width: 549px) {
	body.single-product:not(.home) #wrapper { padding-top: 89px; } /* 34 + 55 */
	body.single-product::after { top: 89px; }
	body.admin-bar.single-product::after { top: 121px; }
	.ww-prod-reviews { scroll-margin-top: 89px; }

	.ww-product__media { aspect-ratio: 393 / 675; }
	.ww-product__thumb { flex-basis: 86px; width: 86px; height: 108px; }
	.ww-product__summary { padding-top: 26px; gap: 34px; }
	.ww-product__form { gap: 34px; }

	.ww-rev-card { flex-basis: 323px; height: 506px; } /* макет 393 */

	.ww-about { margin-top: 54px; }
	/* Lifestyle photo wider than the viewport (overflows the edges in the design) */
	.ww-about__media { aspect-ratio: auto; height: 640px; }
	.ww-about__media img { width: 132%; max-width: none; margin-left: -21%; }
	.ww-about__body { margin-top: 54px; }
}
/* Product sections on tablet/mobile — full width, photos without side padding */
@media (max-width: 849px) {
	.ww-about { padding: 0; }
	.ww-about__body { padding-left: var(--ww-side); padding-right: var(--ww-side); }
}
@media (min-width: 550px) and (max-width: 849px) {
	.ww-about__media { margin: 0 var(--ww-side); } /* padded photo on tablet, edge-to-edge on mobile */
}

/* ============ WIDE SCREENS >1440: proportional scaling ============ */
/* px from the 1440 design ÷ 14.4 (1vw at 1440px) — same scheme as the homepage.
   Шрифти НЕ масштабуємо: на >1440 лишаються базові px (прохання клієнта 15.07) */
@media (min-width: 1441px) {
	.ww-topbar { height: 2.361vw; }
	body.single-product #header { top: 2.361vw; }
	body.single-product:not(.home) #wrapper { padding-top: 8.333vw; }
	.ww-prod-reviews { scroll-margin-top: 8.333vw; }
	body.single-product::after { top: 8.333vw; }
	body.admin-bar.single-product::after { top: calc(8.333vw + 32px); }

	.ww-product { column-gap: 3.889vw; }
	.ww-product__thumbs { gap: .417vw; margin-top: .417vw; }
	.ww-product__thumb { flex-basis: 6.319vw; width: 6.319vw; height: 7.917vw; }
	.ww-product__summary { gap: 3.611vw; padding-top: 2.431vw; }
	.ww-product__head { gap: .972vw; }
	.ww-product__desc p { max-width: 32.361vw; }
	.ww-product__rating { gap: 1.111vw; margin-bottom: 1.667vw; }
	.ww-product__benefits { gap: .486vw; margin-top: 1.667vw; }
	.ww-product__benefit { width: 4.514vw; height: 4.514vw; }
	.ww-product__desc-media { gap: .486vw; margin-top: 1.667vw; }
	.ww-product__desc-media img { width: 4.514vw; height: 4.514vw; }
	.ww-product__delivery { gap: .694vw; }
	.ww-product__delivery-row { gap: 1.111vw; }
	.ww-product__form { gap: 3.611vw; }
	.ww-volumes, .ww-volumes__list { gap: .903vw; }
	.ww-volume { height: 4.028vw; padding: 0 1.111vw; }
	.ww-volume__radio { flex-basis: 1.389vw; width: 1.389vw; height: 1.389vw; }
	.ww-volume__name { margin-left: .694vw; }

	.ww-prod-reviews__row { gap: .694vw; }
	.ww-rev-card { flex-basis: calc((100% - 2.082vw) / 4); height: 37.917vw; padding: 1.667vw; }
	.ww-rev-card__img { width: 11.181vw; height: 14.722vw; }

	.ww-about { column-gap: 3.889vw; margin-top: 3.333vw; }
	.ww-about__body { gap: 3.75vw; padding-top: 3.75vw; }
	.ww-about__text { gap: .833vw; }
	.ww-about__content { max-width: 32.361vw; }
	.ww-pacc__q { padding: 1.458vw 0; }
}