/*
 * YeffoPrint global UI styles.
 * Component styles only — page/section-specific styles live in patterns.
 * All spacing/radius/color/shadow values read from theme.json tokens
 * (var(--wp--custom--...) / var(--wp--preset--...)) so the palette and
 * scale stay editable in one place. See docs/PROJECT_SPEC.md §5.
 */

/* ---------- Base & motion ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Root template spacing ---------- */

/* WordPress spaces top-level template blocks with
   margin-block-start: var(--wp--style--block-gap) on every root child
   but the first (core's `.wp-site-blocks > * + *` rule) — this
   theme.json never sets blockGap, so that falls back to core's own
   default (~2em), showing as a thin strip of bare warm-white between
   consecutive root-level blocks. Every template in this theme follows
   the same header-then-main(-then-footer) structure (plus the
   persistent search bar, now also a root-level block right after the
   header on every page), so this is fixed once here rather than per
   template — same root cause already hit and fixed the same way
   inside individual patterns (.yp-steps, .yp-hero__grid), just at the
   template root this time. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .yp-search-bar {
	margin-block-start: 0 !important;
}

/* WordPress's "constrained" layout (used on `main` and most section
   wrappers across this theme) only ever caps max-width and centers
   via margin-inline:auto — it never adds its own padding-inline. On
   any viewport narrower than that max-width (i.e. any phone screen,
   since every contentSize in this theme is 1200px+), the cap and the
   centering both do nothing, so text/buttons/form fields sit flush
   against the actual screen edges. Padding on `main` itself, not on
   .yp-section/.yp-hero's own text content, because that's the one
   wrapper every template already shares (homepage, Shop Labels, the
   configurator, custom design form, proof approval, and — since
   these are `wp:post-content`, not the classic-template `.entry-
   content` div the WooCommerce-specific padding rule further down
   this file was written for and which never matches in a block
   theme — cart/checkout/my-account too), so this is fixed once
   instead of per page. Sections that want a full-bleed background
   (.yp-hero, .yp-section) opt back out with a negative margin below,
   the standard "inset content, full-bleed section" pattern — a
   background always paints under an element's own padding, so this
   never affects anything that *doesn't* also claw the width back.

   flow-root: `main` has no padding-block, so a first-child section's
   own margin-top (e.g. .yp-promo's, patterns.css) collapses straight
   through it and lands above `main` instead — same end result on a
   plain warm-white body background, but it made that margin read as
   barely-there once .yp-promo's own dark/colorful background sat
   right against the dark search bar above it with only the collapsed
   amount of visible gap. flow-root gives `main` its own block
   formatting context so a child's margin renders as real space inside
   it instead, with no other layout side effects. */
main.wp-block-group {
	display: flow-root;
	padding-inline: var(--wp--preset--spacing--sm);
}

@media (min-width: 782px) {
	main.wp-block-group {
		padding-inline: var(--wp--preset--spacing--md);
	}
}

/* ---------- Accessibility foundations ---------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--warm-white);
	display: block;
	height: auto;
	width: auto;
	clip: auto;
	clip-path: none;
	padding: 0.85rem 1.25rem;
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	border-radius: var(--wp--custom--radius--control);
	text-decoration: none;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--custom--focus-ring);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--control);
}

/* ---------- Announcement bar ---------- */

.yp-announcement-bar {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--warm-white);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.5rem 1rem;
}

.yp-announcement-bar a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.yp-announcement-bar:empty {
	display: none;
}

/* ---------- Header ---------- */

.yp-header {
	/* Light, matching the approved brand mockup — a flat warm-white bar
	   with a hairline border reads as considered rather than "just
	   unstyled," and the new icon+wordmark lockup (near-black text) no
	   longer needs a dark backdrop to be legible the way the old
	   text-fallback wordmark did. */
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--wp--preset--color--warm-white);
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
	transition: padding 200ms ease, box-shadow 200ms ease;
	padding-block: 1.25rem;
	padding-inline: var(--wp--preset--spacing--sm);
}

@media (min-width: 782px) {
	.yp-header {
		padding-inline: var(--wp--preset--spacing--md);
	}
}

.yp-header.is-scrolled {
	padding-block: 0.65rem;
	box-shadow: var(--wp--custom--shadow-elevation--low);
}

.yp-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.yp-brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
}

.yp-brand-lockup__mark {
	width: 1.6rem;
	height: 1.8rem;
	flex-shrink: 0;
}

.yp-brand-lockup__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--near-black);
}

.yp-header__nav {
	flex: 1;
}

.yp-header__nav ul.wp-block-navigation__container {
	gap: 0.5rem;
}

.yp-header__nav a.wp-block-navigation-item__content {
	/* Plain text links on the now-light header — no pill background
	   needed; near-black on warm-white already clears contrast on its
	   own, unlike the old dark header where this exact global link
	   color (theme.json's default near-black) would have gone
	   invisible against a near-black background. */
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--charcoal) !important;
	text-decoration: none;
	padding: 0.55rem 0.85rem;
	border-radius: var(--wp--custom--radius--control);
	transition: background-color 150ms ease, color 150ms ease;
}

.yp-header__nav a.wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--light-gray);
	color: var(--wp--preset--color--near-black) !important;
}

/* Mobile hamburger overlay stays dark regardless of the (now light)
   header bar — deliberate contrast, not left over from the old dark
   header. The real, authoritative styling is the Navigation block's
   own overlayBackgroundColor/overlayTextColor attributes
   (parts/header.html); the rules below are a defensive fallback in
   case the open overlay isn't a descendant of .yp-header__nav in the
   DOM WordPress renders (a portaled/modal-style panel), same
   reasoning as before this file's header went light. */
.yp-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--near-black);
}

.yp-header__nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--warm-white) !important;
}

/* The hamburger toggle itself sits in the light header bar (not
   inside the dark overlay it opens), so it needs the dark-header-era
   warm-white forced color flipped back to near-black; the X "close"
   control only exists inside the open (dark) overlay and keeps the
   light-on-dark color the rule above already sets for that state. */
.yp-header__nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--near-black) !important;
}

.yp-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--warm-white) !important;
}

.yp-header__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Icon-only buttons: search toggle, account, cart */
.yp-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--light-gray);
	/* !important for the same reason it was needed on the old dark
	   header: this class also renders as the WooCommerce
	   customer-account block's iconClass, a plain <a>, which
	   theme.json's global link color (already near-black) would
	   otherwise be free to override via its own specificity. */
	color: var(--wp--preset--color--near-black) !important;
	cursor: pointer;
	position: relative;
	transition: background-color 150ms ease, box-shadow 150ms ease;
}

.yp-icon-button:hover {
	background: var(--wp--preset--color--light-gray);
}

.yp-icon-button__count {
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--magenta-deep);
	color: var(--wp--preset--color--white);
	font-size: 0.65rem;
	line-height: 1.1rem;
	text-align: center;
}

/* ---------- Persistent search bar (below the header) ---------- */
/* Dark bar + mono-placeholder input + solid accent button — the same
   treatment the approved brand mockup used for its "search templates"
   band, adapted from a mid-page rounded card into a slim full-width
   strip that sits directly under the header on every page. */

.yp-search-bar {
	position: relative;
	background: var(--wp--preset--color--near-black);
}

.yp-search-bar__form {
	display: flex;
	gap: 0.6rem;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.75rem var(--wp--preset--spacing--sm);
}

@media (min-width: 782px) {
	.yp-search-bar__form {
		padding-inline: var(--wp--preset--spacing--md);
	}
}

.yp-search-bar__form input {
	flex: 1;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp--custom--radius--input);
	padding: 0.7rem 1rem;
	color: var(--wp--preset--color--warm-white);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
}

.yp-search-bar__form input::placeholder {
	color: rgba(250, 249, 246, 0.45);
}

.yp-search-bar__form input:focus {
	border-color: var(--wp--preset--color--cyan);
}

.yp-search-bar__button {
	flex-shrink: 0;
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--near-black);
	border: 0;
	font-weight: 700;
	font-size: 0.85rem;
	border-radius: var(--wp--custom--radius--input);
	padding: 0 1.3rem;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.yp-search-bar__button:hover {
	background: var(--wp--preset--color--white);
}

.yp-search-bar__results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 850;
}

.yp-search-bar__results:empty {
	display: none;
}

.yp-search-bar__results .yp-search-results__list,
.yp-search-bar__results .yp-search-results__empty {
	max-width: 1200px;
	margin-inline: auto;
}

.yp-search-bar__results .yp-search-results__list {
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--high);
	border-radius: 0 0 var(--wp--custom--radius--container) var(--wp--custom--radius--container);
	padding-bottom: var(--wp--custom--radius--container);
	overflow: hidden;
}

.yp-search-bar__results .yp-search-results__empty {
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--high);
	border-radius: 0 0 var(--wp--custom--radius--container) var(--wp--custom--radius--container);
}

/* Shared result list styling — also used by the header's search
   drawer (same markup, no absolute positioning needed there since
   it's already inside a modal panel). */
.yp-search-results__list {
	list-style: none;
	margin: 0;
	padding: 0.5rem;
}

.yp-search-results__item {
	display: block;
	padding: 0.65rem 0.85rem;
	border-radius: var(--wp--custom--radius--control);
	text-decoration: none;
	color: var(--wp--preset--color--near-black);
	font-size: var(--wp--preset--font-size--small);
}

.yp-search-results__item:hover {
	background: var(--wp--preset--color--light-gray);
}

.yp-search-results__empty {
	margin: 0;
	padding: 1rem 0.85rem;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Buttons ---------- */

.wp-block-button__link {
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.wp-block-button__link:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--near-black);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--warm-white);
}

.wp-block-button.is-style-accent .wp-block-button__link {
	/* "deep" variant: white button text on top needs to meet contrast,
	   which the brighter decorative gradient (used for washes/glows
	   elsewhere) doesn't reliably clear at its cyan end. */
	background: var(--wp--custom--gradient-brand-deep);
	background-size: 160% 160%;
	background-position: 0% 50%;
	color: var(--wp--preset--color--white);
	box-shadow: 0 8px 22px rgba(236, 0, 140, 0.28);
	transition: background-position 300ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background-position: 100% 50%;
	box-shadow: 0 10px 28px rgba(0, 174, 239, 0.35);
	transform: translateY(-1px);
}

/* ---------- Cards ---------- */

.yp-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow-elevation--low);
	overflow: hidden;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.yp-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--wp--custom--gradient-brand);
	z-index: 1;
}

.yp-card:hover {
	box-shadow: 0 16px 36px rgba(0, 174, 239, 0.16), var(--wp--custom--shadow-elevation--medium);
	transform: translateY(-4px);
}

.yp-card__media {
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--light-gray);
	overflow: hidden;
}

.yp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yp-card__body {
	padding: 1.25rem;
}

.yp-card__badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25rem 0.65rem;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--custom--gradient-brand-deep);
	border: none;
	color: var(--wp--preset--color--white);
	box-shadow: 0 4px 12px rgba(236, 0, 140, 0.25);
}

/* ---------- Forms ---------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--near-black);
	transition: border-color 150ms ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--near-black);
}

label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	display: inline-block;
	margin-bottom: 0.4rem;
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

/* ---------- Drawer primitive (mobile search, cart, etc.) ---------- */

.yp-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
}

.yp-drawer[data-open="true"] {
	visibility: visible;
}

.yp-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.4);
	opacity: 0;
	transition: opacity 200ms ease;
}

.yp-drawer[data-open="true"] .yp-drawer__backdrop {
	opacity: 1;
}

.yp-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 100%);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--high);
	transform: translateX(100%);
	transition: transform 250ms ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.yp-drawer[data-open="true"] .yp-drawer__panel {
	transform: translateX(0);
}

.yp-drawer--top .yp-drawer__panel {
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 100%;
	transform: translateY(-100%);
}

.yp-drawer--top[data-open="true"] .yp-drawer__panel {
	transform: translateY(0);
}

/* Centered modal variant — the splash screen (functions.php's wp_footer
   renderer) is this component's only user so far, but nothing below is
   splash-specific. */
.yp-drawer--center .yp-drawer__panel {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: min(600px, calc(100% - 2rem));
	max-height: min(680px, calc(100% - 2rem));
	/* dvh accounts for a mobile browser's own collapsing address/tab
	   bar — % and vh both size against the *largest* case there, which
	   overstates how much vertical room is actually available once
	   that bar is on-screen. Harmless on browsers that don't support
	   dvh: an invalid value here is ignored, leaving the line above. */
	max-height: min(680px, calc(100dvh - 2rem));
	height: auto;
	border-radius: var(--wp--custom--radius--card);
	transform: translate(-50%, -50%) scale(0.96);
	opacity: 0;
	transition: transform 250ms ease, opacity 200ms ease;
}

.yp-drawer--center[data-open="true"] .yp-drawer__panel {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.yp-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

.yp-drawer__body {
	padding: 1.5rem;
	flex: 1;
}

.yp-search-form input {
	font-size: var(--wp--preset--font-size--large);
	border: none;
	border-bottom: 1.5px solid var(--wp--preset--color--light-gray);
	border-radius: 0;
	padding-left: 0;
}

/* ---------- Cart drawer contents (server-rendered, see PROJECT_SPEC §14) ---------- */

.yp-cart-drawer__item {
	display: flex;
	gap: 0.9rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

.yp-cart-drawer__thumb {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--light-gray);
	flex-shrink: 0;
}

.yp-cart-drawer__details {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

.yp-cart-drawer__details strong {
	color: var(--wp--preset--color--near-black);
}

.yp-cart-drawer__price {
	font-weight: 600;
	color: var(--wp--preset--color--near-black);
}

.yp-cart-drawer__total {
	display: flex;
	justify-content: space-between;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--light-gray);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.yp-cart-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1rem;
}

/* ---------- Footer ---------- */

.yp-footer {
	background: var(--wp--preset--color--warm-white);
	border-top: 1px solid var(--wp--preset--color--light-gray);
	padding-block: var(--wp--preset--spacing--xl);
	padding-inline: var(--wp--preset--spacing--sm);
}

@media (min-width: 782px) {
	.yp-footer {
		padding-inline: var(--wp--preset--spacing--md);
	}
}

.yp-footer a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
}

.yp-footer a:hover {
	color: var(--wp--preset--color--near-black);
}

.yp-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--lg);
	justify-content: space-between;
}

.yp-footer__meta {
	margin-top: var(--wp--preset--spacing--lg);
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--light-gray);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	justify-content: space-between;
}

/* ---------- Splash screen (functions.php's wp_footer renderer, Dashboard → YeffoPrint → Settings → Splash Screen) ---------- */

.yp-splash {
	padding: 0;
	display: block;
}

.yp-splash__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 1;
	background: var(--wp--preset--color--white);
}

.yp-splash__image {
	display: block;
	width: 100%;
	height: 13rem;
	object-fit: cover;
	object-position: top;
	background: var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
}

.yp-splash__body {
	padding: 1.75rem 2rem 0;
}

.yp-splash__body h2 {
	margin: 0.2rem 0 0.75rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.yp-splash__body p {
	color: var(--wp--preset--color--charcoal);
}

/* Sticky, not just "last in the flow": on a phone-height screen this
   panel scrolls internally (.yp-drawer--center's own max-height), and
   a button that only appears once you've scrolled to the very bottom
   is a button most people never find — direct report, confirmed on a
   real device. Pinning it to the bottom of the panel's own scroll area
   means it's always the last thing in view, however tall the message
   above ends up being on a given screen. */
.yp-splash__actions {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.25rem;
	padding: 1rem 0;
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.yp-splash__dismiss {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
	text-decoration: underline;
	cursor: pointer;
}

.yp-splash__dismiss:hover {
	color: var(--wp--preset--color--near-black);
}

/* ---------- Responsive ---------- */

@media (max-width: 781px) {
	.yp-header__row {
		flex-wrap: nowrap;
	}

	/* Less room to give the screenshot on a phone-height screen, so
	   there's more left for the actual message before the sticky
	   actions bar (above) has to kick in at all. */
	.yp-splash__image {
		height: 8rem;
	}

	.yp-splash__body {
		padding: 1.25rem 1.5rem 0;
	}
}