/*
 * Header and footer.
 *
 * Built from the B2C design (Purovitalis-rebranding-2026, node 308:2952).
 * The header's numbers are measured off the 1440px frame rather than eyeballed:
 * a 56px row, hairline cell dividers running its full height, 14px labels in
 * cells padded 20px either side, and a four-cell 50px action group on the
 * right. There is deliberately no bottom rule — the frame has none.
 *
 * Dropdown PANELS for the primary nav are still unstyled: that design does not
 * exist yet. The markup, toggles and aria wiring are in place, so adding them
 * later is a CSS-only change. The language dropdown IS styled, because it is
 * ours rather than the designer's.
 */

/* --- shared shell ------------------------------------------------------- */

:root {
	--pv-header-h: 56px;
	--pv-header-cell: 50px;
	--pv-rule: rgba(0, 0, 0, 0.12);
}

.pv-header__inner,
.pv-footer__inner {
	margin: 0 auto;
	max-width: var(--pv-wrap);
	padding-inline: var(--pv-gutter);
	width: 100%;
}

.pv-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-menu__item {
	position: relative;
}

.pv-menu__link {
	color: inherit;
	display: inline-block;
	font-family: var(--pv-font-body);
	text-decoration: none;
}

.pv-menu__link:hover,
.pv-menu__link:focus-visible {
	text-decoration: underline;
}

.pv-menu__item.is-current > .pv-menu__link {
	font-weight: 700;
}

.pv-icon {
	display: block;
	flex-shrink: 0;
}

/* Each icon keeps its own viewBox (see inc/icons.php), so a viewBox-relative
   stroke would land at a different weight per icon. Pinning it non-scaling
   gives the 1px hairline the design uses across the whole set. */
.pv-icon [stroke] {
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Dropdown affordance. */
.pv-menu__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--pv-neutral-300);
	cursor: pointer;
	display: flex;
	line-height: 1;
	padding: 0;
}

.pv-menu__chevron {
	transition: rotate 150ms ease;
}

.pv-menu__toggle[aria-expanded="true"] .pv-menu__chevron {
	rotate: 180deg;
}

.pv-menu__submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-menu__submenu.is-open {
	display: block;
}

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

.pv-header {
	background: var(--pv-surface-card);
	position: sticky;
	top: 0;
	z-index: 100;
}

.pv-header__top {
	background: var(--pv-surface-header);
	font-size: 13px;
}

.pv-header__top .pv-header__inner {
	display: flex;
	justify-content: flex-end;
	padding-block: 6px;
}

.pv-header__main .pv-header__inner {
	align-items: stretch;
	display: flex;
	gap: 0;
	height: var(--pv-header-h);
}

/* Every cell in the row carries its own leading rule, so the row reads as a
   set of columns and the trailing edge stays open — as the frame draws it. */
.pv-header__brand,
.pv-menu--primary > .pv-menu__item,
.pv-header__cell {
	border-inline-start: 1px solid var(--pv-rule);
}

.pv-header__brand {
	border-inline-start: 0;
	align-items: center;
	display: flex;
	flex-shrink: 0;
	padding-inline: 26px 56px;
}

.pv-header__brand img,
.pv-header__brand .custom-logo {
	display: block;
	height: auto;
	width: 115px;
}

.pv-header__nav {
	display: flex;
}

.pv-header__nav .pv-menu--primary {
	flex-wrap: nowrap;
	gap: 0;
}

.pv-menu--primary > .pv-menu__item {
	align-items: center;
	display: flex;
	gap: 6px;
	padding-inline: 20px;
}

/* The frame closes the nav with a rule of its own (x=832 on the 1440 board)
   before the empty stretch that separates it from the action group. */
.pv-menu--primary > .pv-menu__item:last-child {
	border-inline-end: 1px solid var(--pv-rule);
}

/* Funnel Sans Regular, per the frame — the nav is the display face at its
   lightest weight, not the body face. */
.pv-menu--primary .pv-menu__link {
	font-family: var(--pv-font-heading);
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

.pv-header__actions {
	align-items: stretch;
	display: flex;
	flex-shrink: 0;
	margin-inline-start: auto;
}

/* Fixed-width cells: the frame's language and icon cells are all 50px, which
   is what gives the group its even rhythm regardless of glyph width. */
.pv-header__cell {
	align-items: center;
	background: none;
	color: inherit;
	display: flex;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	width: var(--pv-header-cell);
}

.pv-header__icon:hover,
.pv-header__icon:focus-visible {
	color: var(--pv-brand-purple);
}

.pv-header__cart {
	position: relative;
}

.pv-header__cart-count {
	background: var(--pv-brand-orange);
	border-radius: 999px;
	color: var(--pv-text-inverse);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
	right: 8px;
	top: 12px;
}

.pv-header__cart-count.is-empty {
	display: none;
}

/* --- language dropdown -------------------------------------------------- */

.pv-dropdown {
	position: relative;
}

.pv-dropdown__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	font: inherit;
	/* Funnel Sans Medium 12px, per the frame. */
	font-family: var(--pv-font-heading);
	font-size: 12px;
	font-weight: 500;
	gap: 5px;
	height: 100%;
	justify-content: center;
	padding: 0;
	width: 100%;
}

.pv-dropdown__toggle .pv-icon {
	color: var(--pv-neutral-300);
	transition: rotate 150ms ease;
}

.pv-dropdown__toggle[aria-expanded="true"] .pv-icon {
	rotate: 180deg;
}

.pv-dropdown__panel {
	background: var(--pv-surface-card);
	border: 1px solid var(--pv-rule);
	border-radius: var(--pv-radius);
	display: none;
	inset-inline-end: 0;
	list-style: none;
	margin: 0;
	min-width: 160px;
	padding: 6px;
	position: absolute;
	top: 100%;
	z-index: 10;
}

.pv-dropdown.is-open .pv-dropdown__panel {
	display: block;
}

.pv-dropdown__link {
	border-radius: 6px;
	color: inherit;
	display: block;
	font-size: 14px;
	padding: 7px 10px;
	text-decoration: none;
}

.pv-dropdown__link:hover,
.pv-dropdown__link:focus-visible {
	background: var(--pv-brand-cream);
}

.pv-dropdown__link.is-current {
	font-weight: 700;
}

/* --- burger + mobile drawer --------------------------------------------- */

.pv-header__burger {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: none;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.pv-header__burger .pv-icon--close,
.pv-header__burger[aria-expanded="true"] .pv-icon--menu {
	display: none;
}

.pv-header__burger[aria-expanded="true"] .pv-icon--close {
	display: block;
}

.pv-header__mobile {
	border-top: 1px solid var(--pv-rule);
	padding: 24px var(--pv-gutter);
}

.pv-header__mobile .pv-menu {
	flex-direction: column;
	gap: 12px;
}

@media (max-width: 1100px) {
	/* Below this the six labels plus the action group stop fitting on one row
	   at 14px; the drawer holds the same menus, so nothing is lost. */
	.pv-header__burger { display: flex; }
	.pv-header__nav { display: none; }
	.pv-header__brand { padding-inline: 12px 20px; }
}

@media (min-width: 1101px) {
	.pv-header__mobile { display: none; }
}

@media (max-width: 640px) {
	.pv-header__top { display: none; }
	.pv-header__brand { border-inline-start: 0; }
	.pv-header__cell--lang { display: none; }
}
/* --- footer ------------------------------------------------------------- */

.pv-footer {
	background: var(--pv-surface-card);
	margin-top: 64px;
	padding-bottom: 24px;
}

/*
 * The two purple bands are one picture.
 *
 * In the design the LifeCells arcs run straight through the gap between the
 * brand band and the sign-up band, so both must sample the SAME box: a single
 * background-image per band would restart `cover` in each one and the arcs
 * would jump at the seam.
 *
 * Each band therefore holds a .pv-band__art layer stretched to the height of
 * the pair (--pv-bands-h) and offset upwards by everything above it, so both
 * layers resolve `cover` against an identical box and each band clips out its
 * own slice. That needs the pair's geometry to be known, which is why the two
 * bands take fixed heights here — matching the design — rather than growing
 * with their content. Below 900px the bands stack, the illusion is no longer
 * visible, and each band goes back to covering itself.
 */
.pv-footer__bands {
	--pv-band-brand-h: 108px;
	--pv-band-signup-h: 196px;
	--pv-band-gap: 28px;
	--pv-bands-h: calc(var(--pv-band-brand-h) + var(--pv-band-gap) + var(--pv-band-signup-h));

	display: flex;
	flex-direction: column;
	gap: var(--pv-band-gap);
}

.pv-footer__band {
	border-radius: var(--pv-band-radius);
	box-sizing: border-box;
	color: var(--pv-text-inverse);
	overflow: hidden;
	position: relative;
}

/* Content sits above the art layer. */
.pv-footer__band > *:not(.pv-band__art) {
	position: relative;
	z-index: 1;
}

.pv-band__art {
	/* The gradient is the fallback: it holds the band's colour if the image is
	   still loading, blocked, or 404s after a bad deploy. */
	background-color: var(--pv-brand-purple);
	background-image:
		image-set(
			url('../img/lifecells/lifecells-purple.webp') 1x,
			url('../img/lifecells/lifecells-purple@2x.webp') 2x
		),
		radial-gradient(90% 160% at 68% 45%, rgba(198, 122, 190, 0.55) 0%, rgba(198, 122, 190, 0) 60%),
		linear-gradient(90deg, var(--pv-brand-ink) 0%, var(--pv-brand-purple) 55%, #6b5a8f 100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: var(--pv-bands-h);
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.pv-footer__band--brand {
	align-items: center;
	display: flex;
	height: var(--pv-band-brand-h);
	justify-content: center;
	padding: 20px 24px;
}

.pv-footer__logo-link {
	display: block;
	line-height: 0;
}

.pv-footer__logo {
	height: auto;
	width: 132px;
}

.pv-footer__band--signup {
	align-items: center;
	display: flex;
	height: var(--pv-band-signup-h);
	padding: 0 56px;
}

/* Offset by everything above it, so this layer's box is the pair's. Both this
   and --pv-bands-h are re-measured by chrome.js once the bands have laid out,
   which is what lets the bands grow with their content — the values below are
   only the no-JS fallback, and they are the comp's desktop numbers. */
.pv-footer__band--signup .pv-band__art {
	top: calc(-1 * var(--pv-band-offset, calc(var(--pv-band-brand-h) + var(--pv-band-gap))));
}

/* --- footer columns ----------------------------------------------------- */

.pv-footer__columns {
	background: var(--pv-brand-cream);
	border-radius: var(--pv-band-radius);
	margin-top: var(--pv-band-gap, 28px);
	padding: 36px 0 54px;
}

/*
 * Even tracks rather than content-sized ones. The comp's first four columns
 * are equal with the last a little wider, but sizing tracks by content makes
 * every column shift whenever an editor renames a menu item or a translation
 * runs long — not a trade worth making for a few pixels.
 */
.pv-footer__grid {
	display: grid;
	gap: 0;
	grid-template-columns: var(--pv-footer-track, repeat(var(--pv-footer-cols, 5), minmax(0, 1fr)));
}

.pv-footer__column {
	padding: 54px 28px 30px;
}

/* Hairline separators between columns, matching the design's vertical rules. */
.pv-footer__column + .pv-footer__column {
	border-inline-start: 1px solid rgba(73, 59, 107, 0.25);
}

/*
 * The first column keeps its leading padding even though it has no rule to sit
 * against: in the frame its text starts 26px inside the card, and dropping that
 * to zero pinned "SHOP" to the card's edge, reading as though the column had
 * merged with the panel behind it.
 */

.pv-footer__column-title {
	color: var(--pv-brand-purple);
	font-family: var(--pv-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 22px;
	text-transform: uppercase;
}

.pv-footer__column .pv-menu {
	flex-direction: column;
	gap: 8px;
}

.pv-footer__column .pv-menu__link {
	font-size: 16px;
}

@media (max-width: 1024px) {
	.pv-footer__grid { --pv-footer-track: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
	.pv-footer__columns { padding: 40px 32px; }
	.pv-footer__column { padding: 0 28px 0 0; }

	/* Matches the sibling selector above, which would otherwise out-specify a
	   plain .pv-footer__column rule and keep the rules once columns wrap. */
	.pv-footer__column + .pv-footer__column { border-inline-start: 0; }
}

@media (max-width: 900px) {
	/* Released from the comp's fixed heights so the copy can wrap. The art
	   still spans both bands: chrome.js measures the pair and feeds the two
	   custom properties above, so the cells stay continuous down here too. */
	.pv-footer__band--brand { height: auto; min-height: 96px; }
	.pv-footer__band--signup { height: auto; padding: 36px 24px; }
}

@media (max-width: 640px) {
	.pv-footer__grid { --pv-footer-track: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pv-footer__columns { padding: 32px 24px; }
	.pv-footer__column { padding: 0 16px 0 0; }
}

/* Two columns leave roughly 150px each on a phone, which breaks link labels
   across three lines. One column reads better than a tidier-looking grid. */
@media (max-width: 460px) {
	.pv-footer__grid { --pv-footer-track: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.pv-footer__column { padding: 0; }
}

/* --- footer legal bar --------------------------------------------------- */

.pv-footer__legal {
	font-size: 15px;
	padding-top: 40px;
}

.pv-footer__legal .pv-footer__inner {
	align-items: start;
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pv-footer__legal-start {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* Region switcher and payment marks share a row, per the design. */
.pv-footer__legal-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.pv-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pv-footer__payment {
	align-items: center;
	background: var(--pv-brand-cream);
	border-radius: 999px;
	color: var(--pv-neutral-300);
	display: flex;
	font-size: 12px;
	justify-content: center;
	min-height: 30px;
	min-width: 52px;
	padding: 4px 12px;
}

.pv-footer__payment img {
	display: block;
	height: 16px;
	width: auto;
}

.pv-footer__copyright {
	align-items: center;
	color: var(--pv-neutral-300);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.pv-footer__legal-nav .pv-menu {
	gap: 8px;
}

.pv-footer__legal-nav .pv-menu__item + .pv-menu__item::before,
.pv-footer__legal-nav + span::before {
	content: "-";
	margin-inline-end: 8px;
}

.pv-footer__disclaimer {
	color: var(--pv-neutral-300);
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 900px) {
	.pv-footer__legal .pv-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* --- newsletter --------------------------------------------------------- */

/*
 * Heading on the left; copy and field stacked on the right, so the field's
 * rule starts under the copy rather than under the heading.
 */
.pv-newsletter {
	align-items: center;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	width: 100%;
}

.pv-newsletter__heading {
	font-family: var(--pv-font-heading);
	font-size: clamp(32px, 3.4vw, 46px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	max-width: 12ch;
}

.pv-newsletter__body {
	max-width: 545px;
}

.pv-newsletter__text {
	margin: 0 0 26px;
	opacity: 0.92;
}

/* Underline field on the gradient — no box, per the design. */
.pv-newsletter__form {
	align-items: center;
	display: flex;
	gap: 16px;
}

.pv-newsletter__input {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 0;
	color: inherit;
	flex: 1 1 auto;
	font: inherit;
	min-width: 0;
	padding: 10px 2px;
}

.pv-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.pv-newsletter__input:focus-visible {
	border-bottom-color: var(--pv-text-inverse);
	outline: none;
}

.pv-newsletter__button {
	align-items: center;
	background: var(--pv-text);
	border: 0;
	border-radius: 50%;
	color: var(--pv-text-inverse);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 40px;
}

.pv-newsletter__button[disabled] {
	cursor: progress;
	opacity: 0.6;
}

/* Honeypot: removed from the visual and a11y trees without display:none,
   which some bots detect and skip. */
.pv-newsletter__hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.pv-newsletter__message:empty { display: none; }
.pv-newsletter__message { margin: 12px 0 0; }
.pv-newsletter__message.is-success { color: #cdeccf; }
.pv-newsletter__message.is-error { color: #ffd2bb; }

@media (max-width: 900px) {
	.pv-newsletter { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.pv-newsletter__heading { max-width: none; }
	.pv-newsletter__body { max-width: none; }
}

/* --- footer legal controls ---------------------------------------------- */

/* Aelia's own wrapper/form/select contract is preserved (see
   inc/footer-regions.php); this only restyles it. */
.pv-region__select {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	padding: 6px 26px 6px 12px;
}

.pv-region {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.56 6L10.28 14.28L2 6' stroke='%23727272' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		no-repeat right 12px center;
	border: 1px solid var(--pv-rule);
	border-radius: 999px;
}

.pv-region__select:focus-visible {
	outline: 2px solid var(--pv-brand-purple);
	outline-offset: 2px;
}

/* --- TranslatePress language-detection popup ----------------------------- */

/*
 * The add-on ships a blue-and-grey WordPress-admin dialog that lands on the
 * page looking like a plugin. Restyled here rather than disabled — the prompt
 * earns its place for a visitor arriving in the wrong language.
 *
 * These selectors mirror the add-on's own specificity on purpose. It styles
 * the dialog, the button and the close link through IDs (and two of them with
 * !important), so class-level rules never reach them; matching ID for ID is
 * what makes the override land. Markup and class names are TranslatePress's:
 * add-ons-pro/automatic-language-detection/{partials/popup.php,assets/css}.
 */
#trp_ald_modal_container {
	background-color: rgba(43, 35, 64, 0.45);
}

#trp_ald_modal_popup {
	background-color: var(--pv-surface-card);
	border: 0;
	border-radius: var(--pv-band-radius);
	box-shadow: 0 24px 60px rgba(43, 35, 64, 0.28);
	color: var(--pv-text);
	font-family: var(--pv-font-body);
	max-width: min(520px, 90vw);
	padding: 32px;
}

#trp_ald_popup_text {
	font-size: 18px;
	line-height: 1.4;
}

#trp_ald_popup_change_language {
	background: var(--pv-text);
	border-color: var(--pv-text);
	border-radius: var(--pv-radius-full);
	font-size: 16px;
	font-weight: 700;
	height: 48px;
}

#trp_ald_popup_change_language:hover,
#trp_ald_popup_change_language:focus-visible {
	background: var(--pv-brand-purple);
	border-color: var(--pv-brand-purple);
}

/* Both carry color:#0085ba !important, so the override has to match it. */
#trp_ald_x_button_and_textarea,
#trp_ald_x_button_textarea {
	color: var(--pv-neutral-300) !important;
	font-size: 14px;
}

/* The add-on gives this anchor width:50%, which wraps a six-word label onto
   two lines in a 520px dialog. */
#trp_ald_x_button_and_textarea {
	margin-top: 20px;
	width: auto;
}

/* Its cross is a background image in the add-on's own blue, and the label it
   sits beside already says exactly what the control does. */
#trp_ald_modal_popup #trp_ald_x_button {
	display: none;
}

#trp_ald_x_button_and_textarea:hover,
#trp_ald_x_button_textarea:hover {
	color: var(--pv-text) !important;
}

/*
 * One border, not three. The add-on outlines the closed box AND the open list
 * in 2px #C9C0BB — two nested elements — which is the doubled edge visible
 * around the select. The closed box keeps the outline; everything around it
 * gives its own up.
 */
.trp_ald_ls_container,
.trp_ald_ls_container .trp-language-switcher-container,
.trp_ald_ls_container .trp-ls-shortcode-language {
	border: 0;
}

.trp_ald_ls_container .trp-ls-shortcode-current-language {
	border: 1px solid var(--pv-rule);
	border-radius: var(--pv-radius-full);
	color: var(--pv-text);
	font-size: 16px;
}

.trp_ald_ls_container .trp-ls-shortcode-language {
	background: var(--pv-surface-card);
	border: 1px solid var(--pv-rule);
	border-radius: var(--pv-radius);
	box-shadow: 0 12px 30px rgba(43, 35, 64, 0.16);
	overflow: hidden;
}

.trp_ald_ls_container .trp-ald-popup-select {
	color: var(--pv-text);
	font-size: 16px;
}

.trp_ald_ls_container .trp-ls-shortcode-language > div:hover {
	background: var(--pv-brand-cream);
	color: var(--pv-text);
}

/* The caret is drawn as two linear-gradient wedges; swap in the brand chevron
   so the dialog uses the same glyph as the header's switcher. */
.trp_ald_ls_container .trp-language-switcher-container > div {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.56 6L10.28 14.28L2 6' stroke='%23727272' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-size: 11px 8px;
}

.trp_ald_ls_container .trp-language-switcher-container .trp-ls-shortcode-language.trp-ls-clicked {
	background-image: none;
}