/**
 * LuksPlayZ Universe gateway (only on the page holding it, inc/gateway.php).
 *
 * Styles the blocks of the luksplayz-core pattern: a Group with a Heading and two core/cover panels, so
 * the owner replaces an image in the block editor and nothing here changes. Every effect is a pseudo
 * element or a property of existing elements: no extra wrappers and no custom block. Selectors start
 * with .lpz-gw because core's Cover styles and Astra's content styles load on the same page.
 *
 * Layers inside a panel (the panel is a stacking context):
 *   -4 image  .wp-block-cover__image-background (an <img> in WordPress)
 *   -3 ambient light  ::after
 *   -2 shade  .wp-block-cover__background
 *    0 copy   in normal flow
 *    1 click area  a::after, stretched over the whole panel (works without JavaScript)
 *
 * Only transform, translate, scale and opacity are animated, except the panel's flex-grow.
 */

/* Cormorant Garamond 600 (SIL OFL 1.1), the 3D PrintXpress name. Same faces as pxp.css. */
@font-face {
	font-family: "LPZ Display";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "LPZ Display";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The gateway sits directly under the header. Astra adds 40px under the header and, depending on
   the page's title setting, pads the article; neither applies to the full-bleed gateway page. */
body:has(.lpz-gw) #primary {
	margin-top: 0;
	padding-top: 0;
}

body:has(.lpz-gw) .site-header {
	margin-bottom: 0;
}

body:has(.lpz-gw) #primary article {
	padding: 0;
}

/* Astra's page-title header (empty here; the gateway has its own h1) would push the panels down. */
body:has(.lpz-gw) #primary article > .entry-header {
	display: none;
}

.entry-content > .lpz-gw:first-child {
	margin-top: 0;
}

/* Astra pads full-width groups; the panels must reach both screen edges. */
.entry-content .wp-block-group.alignfull.lpz-gw {
	padding: 0;
}

#kategorije {
	scroll-margin-top: var(--lpz-header-h, 88px);
}

.lpz-gw {
	--gw-min: 560px;
	--gw-h: max(var(--gw-min), calc(100vh - var(--lpz-header-h, 88px)));
	--gw-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	--gw-grow: 1.857; /* 65 / 35 */
	--gw-speed: 720ms;
	/* Spacing sits on the copy: padding on a panel would count as flex base size and skew 65/35. */
	--gw-pad-x: clamp(1.25rem, 4vw, 4.5rem);
	--gw-pad-y: clamp(2.5rem, 10vh, 6.5rem);
	position: relative;
	display: flex;
	height: var(--gw-h);
	overflow: hidden;
	isolation: isolate;
	background: #0b0d12;
	color: #f5f5f7;
}

@supports (height: 100svh) {
	.lpz-gw {
		--gw-h: max(var(--gw-min), calc(100svh - var(--lpz-header-h, 88px)));
	}
}

/* "Lights up" curtain of the entrance. */
.lpz-gw::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	background: #0b0d12;
	opacity: 0;
	pointer-events: none;
	animation: lpz-gw-curtain 1100ms var(--gw-ease) backwards;
}

/* ---------------------------------------------------------------- Headline */

.lpz-gw .lpz-gw__title {
	position: absolute;
	top: clamp(1.75rem, 8.5vh, 5.5rem);
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0;
	padding-inline: 1rem;
	color: #f5f5f7;
	font-size: clamp(2.25rem, 1.1rem + 3.9vw, 5.25rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-align: center;
	text-shadow: 0 2px 40px rgb(5 6 10 / 0.75);
	pointer-events: none;
}

.lpz-gw .lpz-gw__line {
	display: block;
	animation: lpz-gw-rise 900ms var(--gw-ease) 180ms backwards;
}

.lpz-gw .lpz-gw__line + .lpz-gw__line {
	margin-top: -0.12em;
	padding-top: 0.12em; /* Room for the caron of Č: background-clip stops at the box. */
	color: #d8cdb8;
	background: linear-gradient(90deg, #b9a1fb 12%, #f0e9dc 50%, #d9bd85 88%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 2px 24px rgb(5 6 10 / 0.7));
	animation-delay: 340ms;
}

/* ------------------------------------------------------------------ Panels */

.lpz-gw .lpz-gw__panel {
	--gw-accent: 139 92 246;
	--gw-accent-hover: #a78bfa;
	--gw-accent-solid: #8b5cf6;
	position: relative;
	display: flex;
	flex: 1 1 0;
	align-items: flex-end;
	justify-content: flex-start;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	contain: layout paint;
	cursor: pointer;
	transition: flex-grow var(--gw-speed) var(--gw-ease);
}

.lpz-gw .lpz-gw__panel--pxp {
	--gw-accent: 201 168 106;
	--gw-accent-hover: #dcc28f;
	--gw-accent-solid: #c9a86a;
	--gw-shade-active: 0.82; /* The studio scene is light: the copy keeps its contrast when expanded. */
	justify-content: flex-end;
}

/* Fixed size wider than the panel: expanding reveals more of the image and never rescales it.
   Keep the subject near the middle of a photo; the outer quarter is only seen when expanded. */
.lpz-gw .lpz-gw__panel .wp-block-cover__image-background {
	position: absolute;
	top: -24px;
	left: 50%;
	z-index: -4;
	display: block;
	width: calc(65vw + 48px);
	max-width: none;
	height: calc(var(--gw-h) + 48px);
	margin: 0 0 0 calc(-32.5vw - 24px);
	padding: 0;
	border: 0;
	object-fit: cover;
	animation: lpz-gw-settle 1700ms var(--gw-ease) backwards;
}

.lpz-gw.lpz-gw .lpz-gw__panel .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, rgb(11 13 18 / 0.5) 0%, rgb(11 13 18 / 0.08) 38%, rgb(11 13 18 / 0.86) 100%);
	opacity: 0.92;
	box-shadow: inset 0 0 0 0 rgb(var(--gw-accent) / 0);
	transition: opacity var(--gw-speed) var(--gw-ease), box-shadow var(--gw-speed) var(--gw-ease);
}

/* Ambient light drifting across the scene. */
.lpz-gw .lpz-gw__panel::after {
	content: "";
	position: absolute;
	top: -30%;
	left: -30%;
	z-index: -3;
	width: 160%;
	height: 160%;
	background: radial-gradient(38% 38% at 50% 50%, rgb(var(--gw-accent) / 0.34), rgb(var(--gw-accent) / 0) 72%);
	opacity: 0.75;
	will-change: transform;
	pointer-events: none;
	animation: lpz-gw-drift 15s ease-in-out infinite alternate;
	transition: opacity var(--gw-speed) var(--gw-ease);
}

.lpz-gw .lpz-gw__panel--pxp::after {
	animation-duration: 19s;
	animation-direction: alternate-reverse;
}

/* Seam between the worlds. */
.lpz-gw .lpz-gw__panel + .lpz-gw__panel::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 1px;
	background: linear-gradient(180deg, rgb(167 139 250 / 0), rgb(167 139 250 / 0.75) 30%, rgb(220 194 143 / 0.75) 70%, rgb(220 194 143 / 0));
	transform-origin: 50% 0;
	pointer-events: none;
	animation: lpz-gw-seam 1100ms var(--gw-ease) 250ms backwards;
}

/* ------------------------------------------------------------------ Copy */

/* Static on purpose: core's position: relative would stop the link's click area at the copy. */
.lpz-gw .lpz-gw__panel .wp-block-cover__inner-container {
	position: static;
	flex: none;
	width: min(calc(35vw - 2 * var(--gw-pad-x)), 30rem); /* Fits the 35% state: text never re-wraps. */
	margin: var(--gw-pad-top, 0) var(--gw-pad-x) var(--gw-pad-y);
	color: inherit;
	transition: opacity var(--gw-speed) var(--gw-ease);
}

.lpz-gw .lpz-gw__panel--pxp .wp-block-cover__inner-container {
	text-align: right;
}

.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--gw-accent-hover);
	font-size: clamp(0.6875rem, 0.62rem + 0.2vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	animation: lpz-gw-rise 800ms var(--gw-ease) 520ms backwards;
}

.lpz-gw .lpz-gw__brand {
	margin: 0 0 0.75rem;
	color: #f5f5f7;
	font-size: clamp(2rem, 1.2rem + 2.3vw, 3.5rem);
	line-height: 1;
	animation: lpz-gw-rise 800ms var(--gw-ease) 600ms backwards;
}

.lpz-gw .lpz-gw__panel--shop .lpz-gw__brand {
	font-size: clamp(1.875rem, 1rem + 2.15vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
}

.lpz-gw .lpz-gw__brand span {
	color: var(--gw-accent-hover);
}

.lpz-gw .lpz-gw__panel--pxp .lpz-gw__brand {
	font-family: "LPZ Display", "Cormorant Garamond", Georgia, serif;
	font-size: clamp(2.25rem, 1.3rem + 2.7vw, 4rem);
	font-weight: 600;
	font-variant-numeric: lining-nums;
	letter-spacing: 0;
	text-shadow: 0 2px 20px rgb(11 13 18 / 0.8);
}

.lpz-gw .lpz-gw__panel--pxp .lpz-gw__brand span {
	color: #ecd9b2;
}

.lpz-gw.lpz-gw .lpz-gw__panel.lpz-gw__panel--pxp .lpz-gw__eyebrow {
	color: #e8d3a8;
	text-shadow: 0 1px 12px rgb(11 13 18 / 0.85);
}

.lpz-gw.lpz-gw .lpz-gw__panel.lpz-gw__panel--pxp .lpz-gw__lead {
	color: #f5f5f7;
	text-shadow: 0 1px 14px rgb(11 13 18 / 0.85);
}

.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__lead {
	margin: 0 0 1.5rem;
	color: rgb(245 245 247 / 0.84);
	font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem);
	line-height: 1.5;
	text-wrap: balance;
	animation: lpz-gw-rise 800ms var(--gw-ease) 680ms backwards;
}

/* Opacity only: a transform here would capture the stretched click area. */
.lpz-gw .lpz-gw__panel .wp-block-buttons {
	display: flex;
	margin: 0;
	animation: lpz-gw-fade 800ms ease-out 800ms backwards;
}

.lpz-gw .lpz-gw__panel--pxp .wp-block-buttons {
	justify-content: flex-end;
}

/* One button for both brands: only the colours come from the panel. No transform on hover, it
   would capture the stretched click area. */
.lpz-gw .lpz-gw__panel .wp-block-button__link {
	--gw-btn-edge: inset 0 1px 0 rgb(255 255 255 / 0.24);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15rem;
	min-height: 52px;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 12px;
	background: var(--gw-accent-solid);
	color: #0b0d12;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--gw-btn-edge), 0 8px 24px rgb(var(--gw-accent) / 0.24);
	transition: background-color 240ms ease, box-shadow 320ms var(--gw-ease);
}

.lpz-gw .lpz-gw__panel .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* No press nudge (base.css): a transform would shrink the click area mid-click and lose the click. */
.lpz-gw .lpz-gw__panel .wp-block-button__link:active {
	background: var(--gw-accent-hover);
	transform: none;
}

/* Keyboard: the ring is drawn on the button, the panel expands as on hover. */
.lpz-gw .lpz-gw__panel .wp-block-button__link:focus-visible {
	background: var(--gw-accent-hover);
	outline: 3px solid #f5f5f7;
	outline-offset: 3px;
	box-shadow: var(--gw-btn-edge), 0 10px 34px rgb(var(--gw-accent) / 0.5);
}

/* ----------------------------------------------------------- Active states */

.lpz-gw .lpz-gw__panel.is-pressed,
.lpz-gw .lpz-gw__panel:has(a:focus-visible) {
	flex-grow: var(--gw-grow);
}

.lpz-gw.lpz-gw .lpz-gw__panel.is-pressed .wp-block-cover__background,
.lpz-gw.lpz-gw .lpz-gw__panel:has(a:focus-visible) .wp-block-cover__background {
	opacity: var(--gw-shade-active, 0.66);
	box-shadow: inset 0 0 90px 0 rgb(var(--gw-accent) / 0.3);
}

.lpz-gw .lpz-gw__panel.is-pressed::after,
.lpz-gw .lpz-gw__panel:has(a:focus-visible)::after {
	opacity: 1;
}

.lpz-gw .lpz-gw__panel.is-pressed .wp-block-button__link {
	background: var(--gw-accent-hover);
	box-shadow: var(--gw-btn-edge), 0 10px 34px rgb(var(--gw-accent) / 0.5);
}

/* Only with a real mouse: a touch "hover" would stick and ask for a second tap. */
@media (hover: hover) and (pointer: fine) {
	.lpz-gw .lpz-gw__panel:hover {
		flex-grow: var(--gw-grow);
	}

	.lpz-gw.lpz-gw .lpz-gw__panel:hover .wp-block-cover__background {
		opacity: var(--gw-shade-active, 0.66);
		box-shadow: inset 0 0 110px 0 rgb(var(--gw-accent) / 0.26);
	}

	.lpz-gw .lpz-gw__panel:hover::after {
		opacity: 1;
	}

	.lpz-gw .lpz-gw__panel:hover .wp-block-button__link {
		background: var(--gw-accent-hover);
		box-shadow: var(--gw-btn-edge), 0 10px 34px rgb(var(--gw-accent) / 0.5);
	}

	.lpz-gw:hover .lpz-gw__panel:not(:hover) .wp-block-cover__background {
		opacity: 1;
	}

	.lpz-gw:hover .lpz-gw__panel:not(:hover) .wp-block-cover__inner-container {
		opacity: 0.62;
	}
}

.lpz-gw.is-leaving .lpz-gw__title {
	opacity: 0;
	transition: opacity 240ms ease;
}

.lpz-gw.is-paused .lpz-gw__panel::after {
	animation-play-state: paused;
}

/* --------------------------------------------------------------- Scroll cue */

.lpz-gw .lpz-gw__cue {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	z-index: 5;
	width: 44px;
	height: 44px;
	margin: 0 0 0 -22px;
	animation: lpz-gw-fade 900ms ease-out 1150ms backwards;
}

/* The link text is for screen readers and for editing; the arrow is drawn here. */
.lpz-gw .lpz-gw__cue a {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 1px solid rgb(245 245 247 / 0.28);
	border-radius: 50%;
	background: rgb(11 13 18 / 0.55);
	color: transparent;
	font-size: 0;
	text-decoration: none;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.lpz-gw .lpz-gw__cue a::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 12px;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f7' stroke-width='2.4'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: lpz-gw-nudge 2.6s ease-in-out 2s infinite;
}

.lpz-gw .lpz-gw__cue a:hover {
	border-color: #f5f5f7;
	background: rgb(11 13 18 / 0.85);
}

.lpz-gw .lpz-gw__cue a:focus-visible {
	outline: 3px solid #f5f5f7;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ Portal */

.lpz-portal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

/* A small circle scaled up: cheap on phones, and the soft ring needs no sharp texture. */
.lpz-portal__iris {
	position: absolute;
	top: var(--portal-y);
	left: var(--portal-x);
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, #0b0d12 0 56%, rgb(var(--gw-accent) / 0.9) 68%, var(--gw-accent-hover) 73%, rgb(var(--gw-accent) / 0.5) 80%, rgb(var(--gw-accent) / 0) 100%);
	transform: scale(0.02);
	will-change: transform;
	animation: lpz-portal-open 620ms cubic-bezier(0.62, 0, 0.24, 1) forwards;
}

.lpz-portal::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #0b0d12;
	opacity: 0;
	animation: lpz-gw-fade 170ms ease-in 450ms forwards;
}

.lpz-portal--shop {
	--gw-accent: 139 92 246;
	--gw-accent-hover: #a78bfa;
}

.lpz-portal--pxp {
	--gw-accent: 201 168 106;
	--gw-accent-hover: #dcc28f;
}

/* -------------------------------------------------------------- Keyframes */

@keyframes lpz-gw-curtain {
	from { opacity: 1; }
}

@keyframes lpz-gw-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

@keyframes lpz-gw-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes lpz-gw-settle {
	from { scale: 1.08; }
}

@keyframes lpz-gw-seam {
	from {
		opacity: 0;
		transform: scaleY(0);
	}
}

@keyframes lpz-gw-drift {
	from { transform: translate3d(-16%, 12%, 0); }
	to { transform: translate3d(18%, -14%, 0); }
}

@keyframes lpz-gw-nudge {
	0%, 70%, 100% { transform: none; }
	85% { transform: translateY(3px); }
}

@keyframes lpz-portal-open {
	to { transform: scale(var(--portal-scale, 30)); }
}

/* ---------------------------------------------------------- Stacked (phone) */

@media (max-width: 767px) and (orientation: portrait) {
	.lpz-gw {
		--gw-min: 480px;
		--gw-grow: 1.3;
		--gw-pad-x: 1.25rem;
		flex-direction: column;
	}

	.lpz-gw .lpz-gw__title {
		top: 50%;
		font-size: clamp(1.375rem, 0.95rem + 3.2vw, 2rem);
		line-height: 1.14;
		letter-spacing: -0.02em;
		transform: translateY(-50%);
	}

	/* A soft dark band: keeps the headline clear of the seam and of any two photos. */
	.lpz-gw .lpz-gw__title::before {
		content: "";
		position: absolute;
		inset: -2.25rem 0;
		z-index: -1;
		background: radial-gradient(74% 50% at 50% 50%, rgb(11 13 18 / 0.94) 35%, rgb(11 13 18 / 0));
	}

	.lpz-gw .lpz-gw__panel--shop {
		--gw-pad-top: 1rem;
		--gw-pad-y: 4rem;
		align-items: flex-start;
	}

	.lpz-gw .lpz-gw__panel--pxp {
		--gw-pad-top: 4rem;
		--gw-pad-y: 1.25rem;
		justify-content: flex-start;
	}

	.lpz-gw .lpz-gw__panel .wp-block-cover__image-background {
		top: 50%;
		left: 0;
		width: 100%;
		height: calc(var(--gw-h) * 0.66);
		margin: calc(var(--gw-h) * -0.33) 0 0;
	}

	.lpz-gw.lpz-gw .lpz-gw__panel .wp-block-cover__background {
		background: linear-gradient(180deg, rgb(11 13 18 / 0.72), rgb(11 13 18 / 0.36));
	}

	.lpz-gw.lpz-gw .lpz-gw__panel--pxp .wp-block-cover__background {
		background: linear-gradient(0deg, rgb(11 13 18 / 0.76), rgb(11 13 18 / 0.36));
	}

	.lpz-gw .lpz-gw__panel .wp-block-cover__inner-container {
		width: calc(100% - 2 * var(--gw-pad-x));
	}

	.lpz-gw .lpz-gw__panel--pxp .wp-block-cover__inner-container {
		text-align: left;
	}

	.lpz-gw .lpz-gw__panel--pxp .wp-block-buttons {
		justify-content: flex-start;
	}

	.lpz-gw .lpz-gw__panel + .lpz-gw__panel::before {
		top: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, rgb(167 139 250 / 0), rgb(167 139 250 / 0.75) 30%, rgb(220 194 143 / 0.75) 70%, rgb(220 194 143 / 0));
		transform-origin: 0 50%;
		animation-name: lpz-gw-seam-x;
	}

	.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__eyebrow {
		margin-bottom: 0.375rem;
		letter-spacing: 0.14em;
	}

	.lpz-gw .lpz-gw__brand {
		margin-bottom: 0.375rem;
		font-size: clamp(1.75rem, 1.2rem + 3.6vw, 2.5rem);
	}

	.lpz-gw .lpz-gw__panel--pxp .lpz-gw__brand {
		font-size: clamp(2rem, 1.4rem + 4vw, 2.875rem);
	}

	.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__lead {
		margin-bottom: 0.75rem;
		font-size: 0.9375rem;
		line-height: 1.4;
	}

	.lpz-gw .lpz-gw__cue {
		right: 0.75rem;
		left: auto;
		margin: 0;
	}
}

@keyframes lpz-gw-seam-x {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
}

/* Short phones in portrait: the buttons and names stay, the sentence goes. */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 620px) {
	.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__lead {
		display: none;
	}

	.lpz-gw .lpz-gw__brand {
		margin-bottom: 0.75rem;
	}
}

/* Narrowest phones: the arrow would crowd the CTA, and swiping already scrolls the page. */
@media (max-width: 359px) {
	.lpz-gw .lpz-gw__cue {
		display: none;
	}
}

/* Touch tablets, side by side: a smaller press expansion. */
@media (hover: none) and (min-width: 768px) {
	.lpz-gw {
		--gw-grow: 1.4;
	}
}

/* Phones in landscape and other very short windows. */
@media (max-height: 520px) and (min-width: 480px) {
	.lpz-gw {
		--gw-min: 320px;
		--gw-pad-y: 1.25rem;
	}

	.lpz-gw .lpz-gw__title {
		top: 0.75rem;
		font-size: 1.5rem;
	}

	.lpz-gw .lpz-gw__line {
		display: inline;
	}

	.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__eyebrow,
	.lpz-gw.lpz-gw .lpz-gw__panel .lpz-gw__lead {
		display: none;
	}

	.lpz-gw .lpz-gw__brand {
		font-size: 1.75rem;
	}

	.lpz-gw .lpz-gw__panel--pxp .lpz-gw__brand {
		font-size: 2rem;
	}

	.lpz-gw .lpz-gw__cue {
		display: none;
	}
}

/* ----------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.lpz-gw,
	.lpz-gw *,
	.lpz-gw::after,
	.lpz-gw *::before,
	.lpz-gw *::after {
		animation: none !important;
		transition: none !important;
	}
}