/**
 * Brand v2 (round 3, Lane N; D-371, D-372, D-373, D-377; BRAND-V2-PORT.md).
 *
 * Loaded only while `eupepsia_brand_v2` is on and design system v4 is active (body class `eup-brand2`), after
 * header v5 (priority 117). Header rules also need header v5 (`eup-hd5`).
 *
 *   Logo     the new lockup is 338 x 261 (ratio 1.298). Owner (D-377): 76 px tall in a 104 px header from
 *            1024, 52 px in a 72 px header on phones, 48 px once pinned (the bar's height); D-403 (22 Oct):
 *            40 % larger unpinned (106 / 73 px), the horizontal lockup when pinned. 768-1023 keep header v3's
 *            size (52-70 px).
 *   Sticky   the pinned bar appears at once: no size animation; only its ground and shadow fade, 100 ms
 *            (owner: at most 120 ms), and nothing moves under reduced motion.
 *   Icons    .eup-b2i (inline <svg><use> from assets/img/icons-v2.svg, a 24-unit grid with the designer's
 *            relative sizes, so each icon box is larger than the old full-bleed glyphs it replaces).
 */

/* -------------------------------------------------------------------------
 * Logo size
 * ---------------------------------------------------------------------- */

/* D-403.3 (owner, 22 Oct 2026): the full (unpinned) logo larger than D-377's 76 px / 52 px, with the bar centred on
   it (it sat at the logo's foot). The owner picks +30, +40 or +50 %; default +40 %. To change the pick, edit only
   the two custom properties (desktop / phone logo height; the header's reserve follows):
     +30 %  99px / 68px      +40 %  106px / 73px      +50 %  114px / 78px      before D-403  76px / 52px */
body.eup-brand2.eup-hd5 {
	--eup-b2-logo-desk: 106px;
	--eup-b2-logo-phone: 73px;
}

@media (min-width: 1024px) {
	body.eup-brand2.eup-hd5 {
		--eup3-header-h: calc(var(--eup-b2-logo-desk) + 28px);
		--eup3-hd-pinned-h: 64px;
	}

	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) {
		--eup3-hd-logo: var(--eup-b2-logo-desk);
		--eup3-hd-pad: 14px;
	}

	/* The bar, the bag and the SHOP panel line up on the logo's centre line (pinned, logo and bar are both 48 px, so
	   nothing moves there). The panel keeps its 11 px gap under the bar, not under the taller logo (D-390: the
	   pointer crosses that gap). */
	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__inner {
		align-items: center;
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
		bottom: auto;
		top: calc(50% - var(--eup3-hd-pill) / 2);
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__panel.eup-hd3__panel {
		top: calc(50% + var(--eup3-hd-pill) / 2 + var(--eup-hd5-gap, 11px));
	}

	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned {
		--eup3-hd-logo: 48px;
		--eup3-hd-pad: 8px;
		--eup3-hd-pill: 48px;
	}
}

@media (max-width: 767.98px) {
	body.eup-brand2.eup-hd5 {
		--eup3-header-h: calc(var(--eup-b2-logo-phone) + 20px);
	}

	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3:not(.is-pinned) {
		--eup3-hd-logo: var(--eup-b2-logo-phone);
		--eup3-hd-pad: 10px;
	}

	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned {
		--eup3-hd-logo: 44px;
	}
}

/* The SHOP panel hangs from the bar's left edge: the logo's width is now 1.298 x its height (was 1.308). */
@media (min-width: 1280px) {
	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__panel.eup-hd3__panel {
		left: calc(var(--eup3-gutter, 16px) + var(--eup3-hd-logo, 76px) * 1.298 + clamp(24px, 3.55vw, 68px));
	}
}

/* -------------------------------------------------------------------------
 * Pinned: the mark alone (owner option; the lockup's "Wellness Boutique" is about 5 px at 48 px). The mark
 * is 94.2 x 159.83 (width 0.589 x height). Unpinned, the mark image is never shown.
 * ---------------------------------------------------------------------- */

body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__logo-mark {
	display: none;
	height: var(--eup3-hd-logo, 48px);
	max-width: none;
	width: auto;
}

body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__logo-img {
	display: none;
}

body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__logo-mark {
	display: block;
}

@media (min-width: 1280px) {
	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__panel.eup-hd3__panel {
		left: calc(var(--eup3-gutter, 16px) + var(--eup3-hd-logo, 48px) * 4.116 + clamp(24px, 3.55vw, 68px));
	}
}

/* -------------------------------------------------------------------------
 * Pinned: the horizontal lockup (D-403.2, owner 22 Oct 2026; the file as sent, 670.19 x 162.84, ratio 4.116):
 * 48 px tall (198 px wide) from 1280 and 44 px (181 px) on phones and tablets below 1024. At 1024-1279 the mark
 * stays: with the 198 px lockup the search line shrinks to "WHAT ARE YO..." at 1024.
 * ---------------------------------------------------------------------- */

body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__logo-horizontal {
	display: none;
	height: var(--eup3-hd-logo, 48px);
	max-width: none;
	width: auto;
}

@media (min-width: 1280px), (max-width: 1023.98px) {
	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__logo-mark {
		display: none;
	}

	body.eup-brand2.eup-hd5 .eup-hd.eup-hd3.is-pinned .eup-hd__logo-horizontal {
		display: block;
	}
}

/* -------------------------------------------------------------------------
 * The pinned bar appears at once (D-371e)
 * ---------------------------------------------------------------------- */

body.eup-brand2.eup-motion-v3 .eup-hd3 .eup-hd3__inner,
body.eup-brand2.eup-motion-v3 .eup-hd3 .eup-hd__logo-img,
body.eup-brand2.eup-motion-v3 .eup-hd3 .eup-hd__top {
	transition: none;
}

body.eup-brand2.eup-motion-v3 .eup-hd3 .eup-hd3__bar {
	transition:
		background-color 100ms linear,
		box-shadow 100ms linear;
}

body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__pill {
	transition: background-color 100ms linear;
}

body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
	transition: background-color var(--eup3-dur-fast, 0.25s) ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	body.eup-brand2.eup-motion-v3 .eup-hd3 .eup-hd3__bar,
	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__pill,
	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd__action.eup-hd__action--cart {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Icons
 * ---------------------------------------------------------------------- */

.eup-brand2 .eup-b2i {
	display: block;
	fill: currentColor;
	flex: none;
	overflow: visible;
}

/* Header: search, account, wishlist and bag, about the old glyphs' visual size (old: 18-22 px tall). */
body.eup-brand2 .eup-hd3 .eup-b2i.eup-hd__icon.eup-hd3__icon,
body.eup-brand2 .eup-hd3 .eup-hd3__search-submit .eup-b2i.eup-hd__icon.eup-hd3__icon {
	height: calc(var(--eup3-hd-icon-h, 20px) * 1.6);
	width: calc(var(--eup3-hd-icon-h, 20px) * 1.6);
}

body.eup-brand2 .eup-hd__drawer-close .eup-b2i,
body.eup-brand2 .eup-drawer .eup-drawer__close .eup-b2i {
	height: 28px;
	width: 28px;
}

body.eup-brand2 .eup-product-v3 .eup-b2i.eup-icon {
	flex: 0 0 26px;
	height: 26px;
	margin-top: -2px;
	width: 26px;
}

body.eup-brand2 .eup-b2i.eup-acc2-icon {
	height: 28px;
	margin: -3px;
	width: 28px;
}

/* -------------------------------------------------------------------------
 * By Eupepsia (template-parts/brand-v2/panel-by-eupepsia.php)
 * ---------------------------------------------------------------------- */

.eup-brand2 .eup-b2-by {
	display: grid;
	gap: 4px;
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.eup-brand2 .eup-b2-by__item {
	margin: 0;
}

.eup-brand2 .eup-hd .eup-b2-by__link {
	align-items: center;
	display: flex;
	gap: 12px;
	min-height: 44px;
}

.eup-brand2 .eup-b2-by__icon {
	height: 32px;
	width: 32px;
}

@media (min-width: 1024px) {
	.eup-brand2 .eup-b2-by {
		column-gap: 40px;
		grid-template-columns: repeat(2, minmax(0, max-content));
		row-gap: 8px;
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-b2-by__link {
		min-height: 44px;
		padding-bottom: 6px;
		padding-top: 6px;
	}
}

/* -------------------------------------------------------------------------
 * SHOP panel, D-402 (owner, 22 Oct 2026), 1024 and up. Behaviour (D-390: instant open, keyboard, touch) unchanged.
 *
 *   Two tones   the rail (left: Shop by need, Shop by category, Shop by body part, By Eupepsia, then the links)
 *               keeps the panel's teal; the open section (right) lies on a white veil at 45 %, a lighter shade of
 *               the same teal, edge to edge (it bleeds over the panel's padding: 28 / clamp(24px, 2.5vw, 48px) /
 *               32, and 24 px into the column gap). The open rail entry already carries the same veil, so it
 *               reads as the tab of the lighter area. Indigo text (frost, teal and veil composited): rail 6.1:1
 *               over a black page and 10.3:1 over white; veil 9.7:1 and 12.6:1 (AA 4.5:1).
 *   Need labels 14 px (was 13), tracking 0.08 em (was 0.12: relaxed so every label fits on one line), columns
 *               as wide as their longest label (the longest, "Mood & Stress Management", is 236 px), spread across
 *               the section: three from 1440, two at 1024-1439 (one line at every desktop width; a label may
 *               wrap only if a longer need is added, never overflow).
 *   Foot link   "Explore everything we carry" (template) sits on the section's bottom edge: no empty band
 *               under it. Rows are 36 px (were about 27), which uses the freed height.
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__shop > .eup-hd3__section:not([hidden]) {
		align-self: stretch;
		background: rgba(255, 255, 255, 0.45);
		display: flex;
		flex-direction: column;
		margin: -28px calc(-1 * clamp(24px, 2.5vw, 48px)) -32px -24px;
		padding: 28px clamp(24px, 2.5vw, 48px) 32px 24px;
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd3__section > .eup-hd__panel-foot {
		margin-top: auto;
		padding-top: 12px;
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__grid--needs {
		column-gap: clamp(24px, 2.5vw, 48px);
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: space-between;
		margin-bottom: 16px;
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__grid--needs .eup-hd__link {
		font-size: 14px;
		letter-spacing: 0.08em;
		line-height: 1.3;
		min-height: 36px;
		padding-bottom: 4px;
		padding-top: 4px;
	}

	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__panel-all {
		font-size: 14px;
		letter-spacing: 0.08em;
	}
}

/* Three columns need a section of about 704 px (656 px of labels and two gaps): 1440 and up. Below, two. */
@media (min-width: 1440px) {
	body.eup-brand2.eup-hd5 .eup-hd3 .eup-hd3__panel .eup-hd__grid--needs {
		grid-template-columns: repeat(3, minmax(0, max-content));
	}
}