/* ============================================================
   Wellwet redesign 2026 — header, footer, homepage.
   Colors and geometry: Figma wellwet_client file, node 288:152.
   Breakpoints: desktop 1440 (base) / tablet ≤1100 / mobile ≤549.
   ============================================================ */

/* --- Fonts (files in the theme, from Google Fonts) --- */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/inter-tight/inter-tight-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/inter-tight/inter-tight-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/inter-tight/inter-tight-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/inter-tight/inter-tight-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Nata Sans WW'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../../fonts/NataSans/nata-sans-var-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nata Sans WW'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../../fonts/NataSans/nata-sans-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Nata Sans WW'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../../fonts/NataSans/nata-sans-800-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nata Sans WW'; font-style: normal; font-weight: 700 800; font-display: swap; src: url('../../fonts/NataSans/nata-sans-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

/* Anchor jumps; when Lenis (smooth scroll) is active, it takes over */
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

:root {
	--ww-dark: #0E0E13;
	--ww-purple: #461377;
	--ww-purple-soft: #6D4595;
	--ww-gray: #808080;
	--ww-light: #F3F3F3;
	--ww-badge-bg: #F0F0F0;
	/* Вебшрифт теми першим: локальний 'Nata Sans' у відвідувача може мати
	   неповний набір ваг (у дизайнера відмалювався Extra-bold замість Regular) */
	--ww-head: 'Nata Sans WW', 'Nata Sans', sans-serif;
	--ww-body: 'Inter Tight', sans-serif;
	--ww-side: 30px;
	--ww-gap-section: 84px;
}

/* Підкладка сторінки — тільки біла (правка дизайнера 15.07): перекриває
   кастомайзерний #461377 (.absolute-footer, html) — фіолетовий просвічував
   у статус-барі iOS та при overscroll. Локально мод footer_bottom_color уже
   білий, це страховка на випадок переносу теми без зміни мода на проді. */
html:root { background-color: #fff; }

/* ============ HEADER (site-wide) ============ */

#header .header-wrapper { background: transparent !important; box-shadow: none; }
#masthead { min-height: 0; }

/*
 * Menu per UI kit: always fixed, no background, blend effect (mix-blend exclusion).
 * White text: stays white over dark, inverts to black over white.
 */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background: transparent !important;
	mix-blend-mode: exclusion;
}
body.admin-bar #header { top: 32px; }

/* fixed-header offset on inner pages (on the homepage the hero goes under the header).
   #wrapper specifically: some Flatsome blocks (shop-page-title) render outside #main */
body:not(.home) #wrapper { padding-top: 86px; }

.ww-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 100%;
	padding: 0 29px;
	height: 86px;
	font-family: var(--ww-head);
	color: #fff;
}
.ww-header__nav { display: flex; gap: 32px; align-items: center; }
.ww-header__nav a {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1;
	transition: opacity .2s;
}
.ww-header__nav a:hover { color: #fff; opacity: .7; }
.ww-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 222px;
	color: #fff;
	display: block;
}
/* Logo keeps its color on hover/click */
.ww-header__logo:hover,
.ww-header__logo:focus,
.ww-header__logo:active { color: #fff; opacity: 1; }
.ww-header__logo svg { display: block; width: 100%; height: auto; }
.ww-header__burger { display: none; color: #fff; }
.ww-header__cart-icon { display: none; }
.ww-header__cart-icon svg { width: 24px; height: 24px; display: block; } /* кошик 24×24 за макетом */

/* ============ MOBILE MENU (fullscreen overlay per design) ============ */

/*
 * Оверлей лежить ПІД хедером (z-index 98 < 99): бургер/лого/кошик у відкритому
 * меню — той самий #header, інвертований блендом у чорний над білим фоном.
 * Так іконки не міняють «жирність» при відкритті (правка дизайнера 15.07),
 * а бургер у відкритому меню лишається бургером — як у макеті (фрейм 288:809).
 */
.ww-mmenu {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: #fff;
	color: var(--ww-dark);
	display: flex;
	flex-direction: column;
	padding: 0 24px 40px;
	font-family: var(--ww-head);
	visibility: hidden;
	opacity: 0;
	transition: opacity .35s ease, visibility 0s linear .35s; /* плавне відкриття/закриття */
}
.ww-mmenu.is-open { visibility: visible; opacity: 1; transition: opacity .35s ease; }
body.ww-mmenu-open { overflow: hidden; }

/* Пункти меню і соцкнопки м'яко підпливають з каскадом при відкритті;
   при закритті ховаються разом з оверлеєм (без затримок) */
.ww-mmenu__nav a,
.ww-mmenu__socials {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .3s ease, transform .3s ease, color .2s;
}
.ww-mmenu.is-open .ww-mmenu__nav a,
.ww-mmenu.is-open .ww-mmenu__socials { opacity: 1; transform: none; }
.ww-mmenu.is-open .ww-mmenu__nav a:nth-child(1) { transition-delay: .05s; }
.ww-mmenu.is-open .ww-mmenu__nav a:nth-child(2) { transition-delay: .1s; }
.ww-mmenu.is-open .ww-mmenu__nav a:nth-child(3) { transition-delay: .15s; }
.ww-mmenu.is-open .ww-mmenu__nav a:nth-child(4) { transition-delay: .2s; }
.ww-mmenu.is-open .ww-mmenu__nav a:nth-child(n+5) { transition-delay: .25s; }
.ww-mmenu.is-open .ww-mmenu__socials { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
	.ww-mmenu,
	.ww-mmenu__nav a,
	.ww-mmenu__socials { transition-duration: 0s; transition-delay: 0s; transform: none; }
}

/* Порожній спейсер під фіксованим хедером + лінія, як у макеті */
.ww-mmenu__bar {
	height: 70px;
	border-bottom: 1px solid #E2E2E2;
	margin: 0 -24px 43px; /* меню починається за 43px під баром (макет 744) */
	flex: 0 0 auto;
}

.ww-mmenu__nav { display: flex; flex-direction: column; gap: 8px; }
.ww-mmenu__nav a {
	font-size: 42px; /* макет 744: пункти 42px/400 */
	font-weight: 400;
	color: var(--ww-dark);
	line-height: 1.05;
}
.ww-mmenu__nav a:hover { color: var(--ww-dark); opacity: .6; }
.ww-mmenu__account { margin-top: 64px; }

.ww-mmenu__socials { margin-top: auto; display: flex; gap: 13px; }
.ww-mmenu__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ww-dark);
	border-radius: 50%;
	color: var(--ww-dark);
	transition: opacity .2s;
}
.ww-mmenu__socials a:hover { color: var(--ww-dark); opacity: .5; }
.ww-mmenu__socials svg { width: 26px; height: 26px; display: block; }

@media (max-width: 549px) {
	.ww-mmenu { padding: 0 16px 28px; }
	.ww-mmenu__bar { height: 55px; margin: 0 -16px 66px; } /* макет 393: меню за 66px під баром */
	.ww-mmenu__nav a { font-size: 28px; } /* макет 393: пункти 28px */
	.ww-mmenu__account { margin-top: 76px; }
}

/* ============ BUTTONS / LABELS / BADGES ============ */

.ww-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 18px;
	font-family: var(--ww-body); /* макет (main_button): Inter Tight Medium 14px UPPER, без скруглень */
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	border-radius: 0;
	line-height: 1;
	transition: opacity .2s;
}
.ww-btn:hover { opacity: .85; }
.ww-btn--purple { background: var(--ww-purple-soft); color: #fff; }
.ww-btn--purple:hover { color: #fff; }
.ww-btn--black { background: var(--ww-dark); color: #fff; }
.ww-btn--black:hover { color: #fff; }

.ww-label {
	font-family: var(--ww-head);
	font-size: 19px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--ww-dark);
	margin: 0 0 32px;
}

.ww-card__badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 4px; }
.ww-badge {
	padding: 10px 16px;
	font-family: var(--ww-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .01em;
	white-space: nowrap;
}
.ww-badge--light { background: var(--ww-badge-bg); color: #000; }
.ww-badge--purple { background: var(--ww-purple); color: #fff; }
.ww-badge--sale { background: #C98DBB; color: #000; } /* UI kit: рожевий бадж знижки, чорний текст */

/* ============ HOMEPAGE SECTIONS ============ */

.home main#main { padding: 0; background: #fff; }

/* Fluid layout (designer's decision): full-width sections,
   on screens >1440 everything scales proportionally — see the @media (min-width: 1441px) block at the bottom */

.ww-section { padding: var(--ww-gap-section) var(--ww-side) 0; }
.ww-section__actions { display: flex; justify-content: center; margin-top: 32px; }

/* --- Hero --- */
.ww-hero { position: relative; height: min(862px, 100svh); overflow: hidden; background: var(--ww-dark); }
.ww-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 25%; }
.ww-hero__content { position: absolute; left: var(--ww-side); bottom: 84px; z-index: 2; }
.ww-hero__content h1 {
	font-family: var(--ww-head);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.16;
	color: #fff;
	margin: 0 0 34px;
}

/* --- Product rows --- */
.ww-products__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 9px;
}
.ww-products__row .ww-card:nth-child(n+5) { display: none; } /* max 4 on desktop, per design */

/* Cards without hover effects (designer's decision) */
.ww-card { display: flex; flex-direction: column; gap: 14px; color: var(--ww-dark); container-type: inline-size; }
.ww-card:hover { color: var(--ww-dark); }
.ww-card__media { position: relative; aspect-ratio: 338 / 449; overflow: hidden; background: var(--ww-light); }
.ww-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* EWWW «Picture WebP» загортає img у <picture> — розтягуємо обгортку, щоб height:100% на img не схлопнувся */
.ww-card__media picture,
.ww-blog-card__media picture { display: block; width: 100%; height: 100%; }
.ww-card__title {
	font-family: var(--ww-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--ww-dark);
	/* Вужча за картку картка (<342px) → назва 7/8 ширини; ширша → фікс 296px (див. @container нижче) */
	width: 87.5%;
}
/* Поки картка ширша за 342px — назва фіксовано 296px за макетом */
@container (min-width: 342px) {
	.ww-card__title { width: 296px; }
}
.ww-card__price { font-family: var(--ww-body); font-size: 17px; line-height: 1.3; color: var(--ww-gray); }
/* Ціна зі знижкою (UI kit «Картка знижка»): стара перекреслена сіра, нова #FF4313 */
.ww-card__price del { color: var(--ww-gray); text-decoration: line-through; }
.ww-card__price ins { color: #FF4313; text-decoration: none; margin-left: 8px; background: none; }

/* --- Brand banner with USPs --- */
.ww-brand {
	position: relative;
	margin-top: var(--ww-gap-section);
	min-height: 862px;
	background: linear-gradient(175deg, var(--ww-dark) 30%, #494A57 100%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* Фото з жорстким лівим краєм, без градієнт-маски — правка дизайнера 15.07 */
.ww-brand__photo {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 50%; /* 721/1440 з макета */
	object-fit: cover;
	object-position: center;
}
.ww-brand__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 862px;
	padding: 34px var(--ww-side);
}
.ww-brand__title {
	font-family: var(--ww-head);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.16;
	color: #fff;
	max-width: 540px;
	margin: 0;
}
/* Колонки 272px з кроком 312px, як у макеті: другий USP закінчується
   на x≈614 і не заходить під фото (жорсткий край на x=720) */
.ww-brand__usps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 272px 272px;
	gap: 40px;
	max-width: 690px;
}
.ww-brand__usps li { display: flex; gap: 13px; align-items: flex-start; margin: 0; }
.ww-brand__usps span:last-child {
	font-family: var(--ww-body);
	font-size: 16px;
	line-height: 1.2;
	color: #D9D7D7;
}
.ww-usp-icon { flex: 0 0 32px; width: 32px; height: 32px; color: #D9D7D7; }
.ww-usp-icon svg { width: 100%; height: 100%; display: block; }

/* --- New line teaser (baked 1440x868 section photo as in the design, text on top) --- */
/* Фон секції = білий, як тло запеченого фото: на планшеті/мобайлі фото не покриває
   верх секції, і кольорова підкладка світила б смугою між банерами (правка 23.07) */
.ww-teaser { position: relative; height: 868px; background: #fff; overflow: hidden; }
.ww-teaser__inner { position: absolute; top: 54px; left: var(--ww-side); z-index: 2; }
/* Шрифт банера за макетом — Otoiwo Grotesk Wide 700 (@font-face підключається
   з PHP, коли ліцензійний файл лежить у fonts/otoiwo/; фолбек — Nata Sans) */
.ww-teaser__inner h2 {
	font-family: 'Otoiwo Grotesk Wide WW', var(--ww-head);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #1E1E1E;
	margin: 0 0 20px;
}
.ww-teaser__date { font-family: 'Otoiwo Grotesk Wide WW', var(--ww-head); font-size: 24px; font-weight: 700; color: #1E1E1E; }
.ww-teaser__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

/* --- Partners --- */
.ww-partners .ww-label { text-align: center; } /* this label is centered in the design (desktop and tablet) */
.ww-partners__marquee { overflow: hidden; }
.ww-partners__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: ww-marquee 40s linear infinite;
	will-change: transform;
}
/* margin-right instead of gap: 2N logos have 2N−1 gaps, so translateX(-50%)
   misses the ribbon period by half a gap and a jump shows at the loop seam */
.ww-partners__track img {
	max-height: 82px;
	max-width: 210px;
	width: auto;
	object-fit: contain;
	margin-right: 110px;
}
@keyframes ww-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.ww-partners__track { animation: none; }
}

/* --- Blog --- */
.ww-blog__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.ww-blog-card { display: flex; flex-direction: column; gap: 12px; color: var(--ww-dark); }
.ww-blog-card:hover { color: var(--ww-dark); }
.ww-blog-card__media { aspect-ratio: 450 / 400; overflow: hidden; background: var(--ww-light); }
.ww-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ww-blog-card__title { font-family: var(--ww-body); font-size: 17px; line-height: 1.35; }
.ww-blog-card__more { font-family: var(--ww-body); font-size: 15px; color: var(--ww-gray); text-decoration: underline; text-underline-offset: 3px; }

/* --- Reviews --- */
.ww-reviews__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.ww-reviews__head .ww-label { margin-bottom: 0; }
.ww-reviews__nav { display: none; gap: 28px; } /* arrows visible only where the row scrolls (≤1100) */
.ww-reviews__nav button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
	width: 24px;
	height: 24px;
	min-width: 0;
	line-height: 1;
	color: var(--ww-dark);
	cursor: pointer;
	transition: opacity .2s;
}
.ww-reviews__nav button:hover { background: none; color: var(--ww-dark); opacity: .6; }
.ww-reviews__nav button:disabled { opacity: .3; cursor: default; }
.ww-reviews__nav svg { display: block; width: 100%; height: 100%; }
.ww-reviews__prev svg { transform: scaleX(-1); }
.ww-reviews__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ww-review-card { aspect-ratio: 338 / 546; overflow: hidden; border-radius: 8px; background: var(--ww-light); }
.ww-review-card img,
.ww-review-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Play button over the video; hidden during playback (is-playing class set by JS) */
.ww-review-card--video { position: relative; cursor: pointer; }
.ww-review-card--video::after {
	content: '';
	position: absolute; inset: 0; margin: auto;
	width: 64px; height: 64px; border-radius: 50%;
	background: rgba(255, 255, 255, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230F0E0C'/%3E%3C/svg%3E") 55% center / 24px no-repeat;
	pointer-events: none;
	transition: opacity .2s;
}
.ww-review-card--video.is-playing::after { opacity: 0; }

/* --- FAQ --- */
.ww-faq { padding-bottom: var(--ww-gap-section); }
/* No dividers between questions — per design */
.ww-faq__item { border: 0; }
.ww-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	width: 100%;
	background: none;
	border: 0;
	padding: 22px 0;
	margin: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--ww-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2; /* overrides line-height 2.4em from Flatsome's global button styles */
	color: var(--ww-dark);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}
/* Question is not highlighted on hover or focus/click (stays black per design) */
.ww-faq__q:hover,
.ww-faq__q:focus,
.ww-faq__q:active,
.ww-faq__q:focus-visible { background: none; color: var(--ww-dark); box-shadow: none; }
.ww-faq__plus { flex: 0 0 16px; width: 16px; height: 16px; }
.ww-faq__plus svg { display: block; width: 100%; height: 100%; }
.ww-faq__plus-v { transition: opacity .2s; }
.ww-faq__item.is-open .ww-faq__plus-v { opacity: 0; } /* + turns into − */
/* Smooth expand: grid-row animation 0fr -> 1fr, content hidden by overflow */
.ww-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
	font-family: var(--ww-body);
	font-size: 15px;
	line-height: 1.3;
	color: #444;
}
.ww-faq__a p { overflow: hidden; margin: 0; padding: 0 40px 0 0; max-width: 622px; transition: padding-bottom .35s ease; }
.ww-faq__item.is-open .ww-faq__a { grid-template-rows: 1fr; }
.ww-faq__item.is-open .ww-faq__a p { padding-bottom: 40px; }

/* ============ FOOTER (site-wide) ============ */

.footer-wrapper { background: none; }
.ww-footer {
	background: linear-gradient(180deg, var(--ww-dark) 0%, #383844 100%);
	color: #fff;
	padding: 90px var(--ww-side) 26px;
	font-family: var(--ww-head);
}
.ww-footer a { color: #fff; }
.ww-footer__top { display: flex; flex-direction: column; gap: 48px; }
.ww-footer__cols { display: flex; gap: 240px; }
.ww-footer__nav { display: flex; flex-direction: column; gap: 12px; }
.ww-footer__nav a {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.1;
}
#footer .ww-footer__nav a:hover, #footer .ww-footer__bottom a:hover { color: #cfc3de; }
.ww-footer__socials { display: flex; gap: 10px; }
.ww-footer__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	color: #fff;
}
/* UI kit "Secondary button behavior": social links change only opacity
   (default 100% → hover ~50% → click ~35%), color untouched.
   The #footer prefix is needed to override the site-wide rule
   `#footer a:hover { color: #1950b8 }` (blue) from functions.php */
.ww-footer__socials a { transition: opacity .2s; }
#footer .ww-footer__socials a:hover,
#footer .ww-footer__socials a:focus { color: #fff; opacity: .5; }
#footer .ww-footer__socials a:active { color: #fff; opacity: .35; }
.ww-footer__socials svg { width: 22px; height: 22px; display: block; }
.ww-footer__brand {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin: 150px auto 28px;
}
.ww-footer__mark { width: 178px; color: #fff; flex: 0 0 auto; }
.ww-footer__mark svg { display: block; width: 100%; height: auto; }
.ww-footer__wordmark { color: #fff; flex: 1 1 auto; max-width: 800px; }
.ww-footer__wordmark svg { display: block; width: 100%; height: auto; }
.ww-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	font-family: var(--ww-body);
	font-size: 15px;
	color: #C9C9D1;
}
.ww-footer__bottom a { color: #C9C9D1; }

/* ============ ≤1100: mobile menu ============ */
/* Планшетна верстка тепер до 1100px (побажання клієнта 15.07) — бургер-хедер
   покриває весь планшетний діапазон; десктопна навігація з'являється з 1101px */
@media (max-width: 1100px) {
	.ww-header__nav--left { display: none; }
	.ww-header__nav--right a:not(.ww-header__cart) { display: none; }
	/* Бургер — svg bitcoin-icons:menu-filled 32×32, як у макеті */
	.ww-header__burger {
		display: block;
		width: 32px;
		height: 32px;
		background: none;
		border: 0;
		padding: 0;
		margin: 0;
		box-shadow: none;
		min-width: 0;
		cursor: pointer;
	}
	.ww-header__burger:hover, .ww-header__burger:focus { background: none; color: #fff; }
	.ww-header__burger { position: relative; }
	.ww-header__burger span {
		position: absolute;
		inset: 0;
		display: block;
		transition: opacity .25s ease, transform .25s ease;
	}
	.ww-header__burger svg { display: block; width: 100%; height: 100%; }
	/* Відкрите меню: бургер плавно перетікає в хрестик (за макетом) */
	.ww-header__burger .ww-burger-close { opacity: 0; transform: rotate(-45deg); }
	.ww-header__burger[aria-expanded="true"] .ww-burger-open { opacity: 0; transform: rotate(45deg); }
	.ww-header__burger[aria-expanded="true"] .ww-burger-close { opacity: 1; transform: none; }
	@media (prefers-reduced-motion: reduce) {
		.ww-header__burger span { transition: none; }
	}
	.ww-header__cart { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 500; } /* лічильник (0) 16px/500 за макетом */
	.ww-header__cart-label { display: none; }
	.ww-header__cart-icon { display: block; }
}

/* ============ TABLET ≤1100 ============ */
@media (max-width: 1100px) {
	:root { --ww-side: 24px; --ww-gap-section: 64px; }

	.ww-header { height: 70px; padding: 0 24px; }
	/* Лого на планшеті лишається 222px — у макеті (744) воно як на десктопі */
	body:not(.home) #wrapper { padding-top: 70px; }

	.ww-products__row { grid-template-columns: repeat(2, 1fr); gap: 28px 6px; }

	.ww-hero { height: min(862px, 92svh); }
	/* Заголовки Nata Sans за макетом: 42px, міжряддя 104%, трекінг -4% */
	.ww-hero__content h1 { font-size: 42px; line-height: 1.05; letter-spacing: -.04em; }

	.ww-label { font-size: 24px; } /* лейбли секцій у макеті 744: 24px */
	.ww-card__title, .ww-card__price { font-size: 18px; } /* картки в макеті 744: 18px */
	.ww-blog-card__title { font-size: 18px; }
	.ww-blog-card__more { font-size: 18px; }

	/* Бренд-банер за макетом 744: темний блок 862px (заголовок 42px зверху,
	   USP 19px унизу), фото повної ширини 862px окремим блоком нижче */
	.ww-brand { min-height: 0; }
	.ww-brand__photo { position: static; width: 100%; height: 862px; object-fit: cover; order: 2; }
	.ww-brand__inner { height: auto; min-height: 862px; gap: 56px; padding: 34px var(--ww-side) 64px; }
	.ww-brand__title { font-size: 42px; line-height: 1.05; letter-spacing: -.04em; max-width: 520px; }
	.ww-brand__usps { grid-template-columns: 1fr 1fr; gap: 40px 43px; max-width: 717px; }
	.ww-brand__usps span:last-child { font-size: 19px; }
	.ww-brand__usps li { gap: 17px; }
	/* Третій USP у макеті — широкий рядок на обидві колонки (текст 411px) */
	.ww-brand__usps li:nth-child(3) { grid-column: 1 / -1; max-width: 470px; }
	.ww-usp-icon { flex-basis: 38px; width: 38px; height: 38px; }

	.ww-teaser { height: 640px; }
	/* Tablet design: photo 572px (89.4% of section), pinned to bottom, center slightly right */
	.ww-teaser__img {
		inset: auto;
		left: 50%;
		bottom: 0;
		width: auto;
		height: 89.4%;
		max-width: none;
		transform: translateX(calc(-50% + 3.4vw));
		object-fit: contain;
		object-position: bottom;
	}

	.ww-blog__row { grid-template-columns: repeat(2, 1fr); }
	.ww-blog__row .ww-blog-card:nth-child(3) { display: none; }

	/* Reviews on tablet: single row with horizontal scroll (2 cards visible in the design).
	   Scrolling: arrows in the section head + touch swipe + mouse drag (wellwet.js) */
	.ww-reviews__nav { display: flex; }
	.ww-reviews__row {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		gap: 8px;
		scrollbar-width: none;
		cursor: grab;
	}
	.ww-reviews__row::-webkit-scrollbar { display: none; }
	.ww-reviews__row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
	.ww-review-card { flex: 0 0 48.5%; scroll-snap-align: start; }

	.ww-faq__q { padding: 24px 0; }

	.ww-footer__cols { gap: 100px; }
	.ww-footer__brand { margin-top: 100px; }
}

/* ============ MOBILE ≤549 ============ */
@media (max-width: 549px) {
	:root { --ww-side: 16px; --ww-gap-section: 54px; }

	.ww-header { height: 55px; padding: 0 16px; }
	body:not(.home) #wrapper { padding-top: 55px; }
	.ww-header__logo { width: 150px; } /* макет 393: вордмарк 150.4px */

	.ww-hero { height: 100svh; } /* перший екран на всю висоту, за логікою десктопа (правка 15.07) */
	.ww-hero__img { object-position: 40% 25%; } /* mobile crop per design: box on the left, model on the right */
	.ww-hero__content { bottom: 60px; right: var(--ww-side); }
	.ww-hero__content h1 { font-size: 28px; margin-bottom: 26px; } /* макет 393: 28px */
	.ww-btn { height: 32px; font-size: 12px; }

	.ww-label { font-size: 20px; margin-bottom: 28px; } /* макет 393: лейбли 20px */

	.ww-brand__photo { height: 655px; }
	.ww-brand__inner { min-height: 655px; }

	.ww-products__row { gap: 24px 5px; }
	/* Блок «Вам також може сподобатись» — 1 картка в рядок на мобільних */
	.ww-product-related .ww-products__row { grid-template-columns: 1fr; }
	.ww-card { gap: 10px; }
	.ww-card__title { font-size: 14px; } /* макет 393: 14px */
	.ww-card__price { font-size: 14px; }
	.ww-card__badges { top: 6px; left: 6px; }
	.ww-badge { padding: 8px 10px; font-size: 10px; }

	.ww-brand__title { font-size: 28px; line-height: 1.05; } /* макет 393: 28px */
	.ww-brand__usps { grid-template-columns: 1fr; gap: 34px; max-width: none; }
	.ww-brand__usps span:last-child { font-size: 16px; } /* скидання планшетних 19px */

	/* Позиції тексту звірені з макетом 393: заголовок 54px від верху секції,
	   дата 143px (фолбек-шрифт додає ~3px верхнього відступу — компенсуємо) */
	.ww-teaser__inner { top: 51px; }
	.ww-teaser__inner h2 { font-size: 20px; margin-bottom: 15px; }
	.ww-teaser__date { font-size: 20px; }
	/* photo not full height: ~84% of section height, pinned to bottom, per design */
	.ww-teaser__img {
		inset: auto;
		left: 50%;
		bottom: 0;
		width: auto;
		min-width: 100%;
		height: 84%;
		max-width: none;
		transform: translateX(-50%);
		object-fit: cover;
		object-position: center bottom;
	}

	.ww-partners .ww-label { text-align: left; } /* on mobile the label is left-aligned in the design */
	.ww-partners__track img { max-height: 44px; max-width: 120px; margin-right: 48px; }

	.ww-blog__row { grid-template-columns: 1fr; } /* 3rd card stays hidden: mobile design shows 2 posts */
	.ww-blog-card__title { font-size: 18px; } /* макет 393: 18px */
	.ww-blog-card__more { font-size: 18px; }

	.ww-reviews__row {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 8px;
		margin-right: calc(-1 * var(--ww-side));
		padding-right: var(--ww-side);
		scrollbar-width: none;
	}
	.ww-reviews__row::-webkit-scrollbar { display: none; }
	.ww-review-card { flex: 0 0 88%; scroll-snap-align: start; }

	.ww-faq__q { font-size: 16px; padding: 22px 0; } /* макет 393: 16px */
	.ww-faq__a { font-size: 14px; }

	/* Footer per mobile design (фрейм 288:745, 393×833): single column of links,
	   vertical wordmark on the right, circle logo bottom left, bottom row spread */
	.ww-footer { position: relative; padding: 57px var(--ww-side) 19px; overflow: hidden; }
	.ww-footer__top { gap: 42px; padding-right: 110px; }
	.ww-footer__cols { flex-direction: column; gap: 10px; }
	.ww-footer__nav { gap: 10px; }
	.ww-footer__nav a { font-size: 16px; } /* макет: Nata Sans 16/600 */
	.ww-footer__socials { gap: 13px; }
	.ww-footer__socials a { width: 44px; height: 44px; }
	.ww-footer__socials svg { width: 26px; height: 26px; }
	/* margin-top 327px тримає висоту футера ~833px, як у макеті */
	.ww-footer__brand { display: block; margin: 327px 0 16px; }
	.ww-footer__mark { width: 102px; display: block; }
	/* Вордмарк 558×84 (рідні пропорції 6.64:1 — svg має preserveAspectRatio:none,
	   тому контейнер не має його розтягувати) */
	.ww-footer__wordmark {
		position: absolute;
		right: 22px;
		bottom: 47px;
		width: 84px;
		height: 558px;
		max-width: none;
	}
	.ww-footer__wordmark svg {
		width: 558px;
		height: 84px;
		transform: rotate(-90deg) translateX(-558px);
		transform-origin: top left;
	}
	.ww-footer__bottom { flex-direction: row; justify-content: space-between; gap: 12px; font-size: 10px; }
}

/* ============ WIDE SCREENS >1440: proportional scaling ============ */
/* All values = px from the 1440 design ÷ 14.4 (1vw at 1440px).
   Шрифти НЕ масштабуємо: на >1440 лишаються базові px (прохання клієнта 15.07) */
@media (min-width: 1441px) {
	:root { --ww-side: 2.083vw; --ww-gap-section: 5.833vw; }

	.ww-header { height: 5.972vw; padding: 0 2.014vw; }
	.ww-header__logo { width: 15.417vw; }
	.ww-header__nav { gap: 2.222vw; }
	body:not(.home) #wrapper { padding-top: 5.972vw; }

	.ww-btn { height: 2.5vw; padding: 0 1.25vw; }
	.ww-label { margin-bottom: 2.222vw; }
	.ww-card__badges { top: .972vw; left: .972vw; gap: .278vw; }
	.ww-badge { padding: .694vw 1.111vw; }

	.ww-hero { height: 59.861vw; }
	.ww-hero__content { bottom: 5.833vw; }
	.ww-hero__content h1 { margin-bottom: 2.361vw; }

	.ww-products__row { gap: 2.222vw .625vw; }
	.ww-card { gap: .972vw; }
	.ww-section__actions { margin-top: 2.222vw; }

	.ww-brand { min-height: 59.861vw; }
	.ww-brand__inner { height: 59.861vw; padding: 2.361vw var(--ww-side); }
	.ww-brand__title { max-width: 37.5vw; }
	.ww-brand__usps { grid-template-columns: 18.889vw 18.889vw; gap: 2.778vw; max-width: 47.917vw; }
	.ww-usp-icon { flex-basis: 2.222vw; width: 2.222vw; height: 2.222vw; }

	.ww-teaser { height: 60.278vw; }
	.ww-teaser__inner { top: 3.75vw; }
	.ww-teaser__inner h2 { margin-bottom: 1.389vw; }

	.ww-partners__track img { max-height: 5.694vw; max-width: 14.583vw; margin-right: 7.639vw; }

	.ww-blog__row { gap: 1.042vw; }
	.ww-blog-card { gap: .833vw; }

	.ww-reviews__row { gap: .625vw; }

	.ww-faq__q { padding: 1.528vw 0; gap: 1.667vw; }
	.ww-faq__plus { flex-basis: 1.111vw; width: 1.111vw; height: 1.111vw; }
	.ww-faq__a p { padding-right: 2.778vw; max-width: 43.194vw; }
	.ww-faq__item.is-open .ww-faq__a p { padding-bottom: 2.778vw; }

	.ww-footer { padding: 6.25vw var(--ww-side) 1.806vw; }
	.ww-footer__cols { gap: 16.667vw; }
	.ww-footer__nav { gap: .833vw; }
	.ww-footer__socials { gap: .694vw; }
	.ww-footer__socials a { width: 3.194vw; height: 3.194vw; }
	.ww-footer__socials svg { width: 1.528vw; height: 1.528vw; }
	.ww-footer__brand { margin: 10.417vw 0 1.944vw; gap: 2.778vw; }
	.ww-footer__mark { width: 12.361vw; }
	.ww-footer__wordmark { max-width: 55.556vw; }
}