/*
 * Rua theme styles.
 *
 * Colour, type and spacing come from theme.json as --wp--preset--* custom
 * properties, so the block editor and the front end stay in sync from a single
 * source. Nothing here hardcodes a brand colour.
 *
 * Mobile first: base rules target the small screen, media queries only add.
 */

/* -------------------------------------------------- tokens and resets -- */

:root {
	--rua-header-height: 60px;
	/*
	 * On phones the page is a sheet pulled up over a wine backdrop, its
	 * rounded top corners revealing it; this sliver of backdrop joins the
	 * sheet to the browser bar, which wears the same wine. Desktop has no
	 * sheet. --rua-header-offset is where the header's bar really ends.
	 * --rua-backdrop is that wine; in dark mode it goes charcoal, since
	 * Chrome on a phone paints its bar charcoal then and the wine would
	 * jar against it.
	 */
	--rua-backdrop: var(--wp--preset--color--primary, #7d2e3d);
	--rua-header-strip: 2px;
	--rua-header-top: var(--rua-header-strip);
	--rua-header-offset: calc(var(--rua-header-top) + var(--rua-header-height));
	--rua-sheet-radius: 24px;
	--rua-logo-height: 36px;
	--rua-max-width: 1360px;
	--rua-gutter: var(--wp--preset--spacing--40, 1.5rem);
	--rua-radius: 8px;
	--rua-transition: 160ms ease;
	--rua-border: 1px solid var(--wp--preset--color--border, #e6dfd6);
	/* Fields and cards on the cream page: a warm off-white, not a bare white that glares. */
	--rua-field: #fffbf5;
	--rua-tabbar-height: 56px;
	/* Space the fixed tab bar takes at the foot of the viewport; 0 without it. */
	--rua-tabbar-offset: 0px;
}

/* Chrome's own dark bar colour, so the bar and the sheet's corners still meet. */
@media (max-width: 899.98px) and (prefers-color-scheme: dark) {
	:root {
		--rua-backdrop: #202124;
	}
}

body.has-rua-tabbar {
	--rua-tabbar-offset: calc(var(--rua-tabbar-height) + env(safe-area-inset-bottom, 0px));
}

/* The product page's buy bar takes the tab bar's slot (see woocommerce.css). */
body.has-rua-buybar {
	--rua-tabbar-offset: calc(var(--rua-buybar-height, 72px) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
	:root {
		--rua-header-strip: 0px;
		--rua-header-height: 76px;
		--rua-logo-height: 48px;
		--rua-gutter: var(--wp--preset--spacing--50, 2.5rem);
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	/* In-page anchors stop below the sticky header, not behind it. */
	scroll-padding-top: calc(var(--rua-header-offset) + 1rem);
}

body {
	margin: 0;
	background: var(--wp--preset--color--base, #fff6e8);
	color: var(--wp--preset--color--contrast, #403b3b);
	font-family: var(--wp--preset--font-family--body);
	line-height: 1.65;
	overflow-wrap: break-word;
	/* Keeps the footer clear of the fixed tab bar on small screens. */
	padding-bottom: var(--rua-tabbar-offset);
}

/*
 * Touch feel. No grey flash on tap, and no double-tap-to-zoom wait on
 * controls (pinch zoom and panning are untouched).
 */
a,
button,
input,
label,
select,
textarea,
[role="button"] {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

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

/*
 * Touch feedback: controls give a little under the finger. Transform only,
 * so nothing around them reflows.
 */
.rua-button,
.rua-swatches__item,
.rua-tabbar__item,
.rua-header__action,
.rua-header__back {
	transition: transform 120ms ease;
}

.rua-button:active,
.rua-swatches__item:not(:disabled):active,
.rua-tabbar__item:active,
.rua-header__action:active,
.rua-header__back:active {
	transform: scale(0.95);
}

/* The bag badge pops and the bag shakes when the count changes (theme.js). */
@keyframes rua-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.45); }
	100% { transform: scale(1); }
}

@keyframes rua-shake {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-10deg); }
	60% { transform: rotate(8deg); }
	80% { transform: rotate(-4deg); }
}

[data-rua-cart-count].is-bumped {
	animation: rua-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-shaken > .rua-icon {
	animation: rua-shake 520ms ease;
	transform-origin: 50% 20%;
}

/* Home sections below the fold rise into view as they are reached (theme.js). */
.rua-section[data-rua-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rua-section[data-rua-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/*
 * The hero's words settle in one after another on arrival. Movement only:
 * starting them transparent left nothing for the browser to count as a
 * first paint until the hero photo arrived.
 */
@keyframes rua-rise {
	from {
		transform: translateY(14px);
	}
}

.rua-hero__body > * {
	animation: rua-rise 480ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.rua-hero__body > :nth-child(2) { animation-delay: 70ms; }
.rua-hero__body > :nth-child(3) { animation-delay: 140ms; }
.rua-hero__body > :nth-child(4) { animation-delay: 210ms; }

/* Respect the user's motion preference across every animation in the theme. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ------------------------------------------------------ page moves ---- */

/*
 * Cross-document view transitions. Every page is still its own server-
 * rendered URL -- nothing here changes what a crawler receives -- but the
 * browser paints the change like an app screen instead of a white flash.
 * The header and tab bar are named so they hold still while the content
 * beneath them crossfades. Browsers without support ignore the whole thing.
 *
 * The switch itself, `@view-transition { navigation: auto; }`, is printed
 * by Assets::enqueue() only while Customizer > Page transitions has it on;
 * without it the rules below never run.
 */

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation: 120ms ease-in both rua-page-out;
	}

	::view-transition-new(root) {
		animation: 220ms ease-out both rua-page-in;
	}
}

@keyframes rua-page-out {
	to { opacity: 0; }
}

@keyframes rua-page-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/*
 * Installed to the home screen, the page is the whole screen: no browser
 * chrome, so no pull-to-refresh bounce, and the header steps down below
 * the status bar.
 */
@media (display-mode: standalone) {
	html {
		overscroll-behavior-y: none;
	}

	:root {
		--rua-header-top: calc(var(--rua-header-strip) + env(safe-area-inset-top, 0px));
	}
}

/* ------------------------------------------------------- accessibility -- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rua-skip-link:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/*
 * A single visible focus style for keyboard users. :focus-visible keeps it off
 * mouse clicks, so it never reads as a stray outline.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* --------------------------------------------------------- layout ------ */

.rua-main {
	display: block;
	max-width: var(--rua-max-width);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50, 2.5rem) var(--rua-gutter);
}

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

/*
 * Three columns: toggle | brand | actions on mobile, nav | brand | actions on
 * desktop. The outer columns are equal (1fr) so the brand sits on the true
 * centre line of the page no matter how wide the nav or the action cluster is.
 */
.rua-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: var(--rua-border);
	/* The hairline only appears once content scrolls under. */
	border-bottom-color: transparent;
	transition: box-shadow var(--rua-transition), border-color var(--rua-transition), background-color var(--rua-transition);
	view-transition-name: rua-header;
}

.rua-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 1px 0 var(--wp--preset--color--border), 0 8px 24px -16px rgb(64 59 59 / 0.25);
}

/*
 * Phones: the page is an opened bottom sheet over a wine backdrop. The
 * header carries the sliver of backdrop above the sheet and paints the
 * sheet's rounded top edge in ::before, fixed to the viewport with the bar
 * so the shape holds however far the page scrolls. No hairline here --
 * only the soft lift once content scrolls under.
 */
@media (max-width: 899.98px) {
	html {
		/* Seen past the sheet's corners and on overscroll. */
		background: var(--rua-backdrop);
	}

	.rua-header {
		padding-top: var(--rua-header-top);
		background: var(--rua-backdrop);
		border-bottom: 0;
	}

	.rua-header::before {
		content: "";
		position: absolute;
		inset: var(--rua-header-top) 0 0;
		z-index: -1;
		background: var(--wp--preset--color--base);
		border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
		transition: opacity var(--rua-transition);
	}

	.rua-header.is-scrolled {
		box-shadow: 0 8px 24px -16px rgb(64 59 59 / 0.25);
	}
}

.rua-header__inner {
	display: grid;
	/* minmax(0, 1fr) keeps both outer columns equal so the brand is centred. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	min-height: var(--rua-header-height);
	max-width: var(--rua-max-width);
	margin-inline: auto;
	padding-inline: var(--rua-gutter);
}

.rua-header__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.rua-header__brand a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
}

.rua-header__brand .custom-logo {
	width: auto;
	height: var(--rua-logo-height);
	max-width: 120px;
	object-fit: contain;
}

.rua-header__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--wp--preset--color--primary);
}

.rua-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.125rem;
	/* Pull the last icon's hit area flush with the gutter edge. */
	margin-inline-end: -0.6875rem;
}

.rua-header__toggle {
	/* Same on the left for the menu toggle. */
	margin-inline-start: -0.6875rem;
	justify-self: start;
}

.rua-header__back {
	margin-inline-start: -0.6875rem;
	justify-self: start;
}

/* Touch targets stay at 44px even though the icon inside is 22px. */
.rua-header__toggle,
.rua-header__back,
.rua-header__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color var(--rua-transition), background-color var(--rua-transition);
}

/* On small screens the account link lives in the menu panel instead. */
.rua-header__action--account {
	display: none;
}

.rua-header__toggle:hover,
.rua-header__back:hover,
.rua-header__action:hover,
.rua-header__action[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--accent-soft);
}

.rua-header__toggle-bar,
.rua-header__toggle-bar::before,
.rua-header__toggle-bar::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--rua-transition), opacity var(--rua-transition);
}

.rua-header__toggle-bar::before,
.rua-header__toggle-bar::after {
	content: "";
	position: relative;
}

.rua-header__toggle-bar::before { top: -6.5px; }
.rua-header__toggle-bar::after  { top: 5px; }

.rua-header__toggle[aria-expanded="true"] .rua-header__toggle-bar {
	background: transparent;
}

.rua-header__toggle[aria-expanded="true"] .rua-header__toggle-bar::before {
	transform: translateY(6.5px) rotate(45deg);
}

.rua-header__toggle[aria-expanded="true"] .rua-header__toggle-bar::after {
	transform: translateY(-6.5px) rotate(-45deg);
}

.rua-header__cart {
	position: relative;
}

.rua-header__cart-count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	/* A hairline of page colour keeps the badge legible over the icon. */
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

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

/*
 * Phone header: menu, brand, then search and the bag at the top right on
 * every page (the tab bar repeats them at the bottom; the account link
 * lives in the menu). On a product page, which is a pushed screen, a back
 * button replaces the menu and the icons float over the photo until the
 * page scrolls and the bar turns solid.
 */
@media (max-width: 899.98px) {
	body.rua-product .rua-header__toggle {
		display: none;
	}

	body.rua-product .rua-header {
		position: fixed;
		inset: 0 0 auto;
		background: transparent;
	}

	body.rua-product .rua-header:not(.is-scrolled)::before {
		opacity: 0;
	}

	body.rua-product .rua-header.is-scrolled {
		background: var(--rua-backdrop);
	}

	body.rua-product .rua-header:not(.is-scrolled) .rua-header__brand {
		opacity: 0;
		pointer-events: none;
	}

	body.rua-product .rua-header__brand {
		transition: opacity var(--rua-transition);
	}

	body.rua-product .rua-header:not(.is-scrolled) .rua-header__back,
	body.rua-product .rua-header:not(.is-scrolled) .rua-header__action {
		background: var(--wp--preset--color--surface);
		box-shadow: 0 2px 10px rgb(64 59 59 / 0.15);
	}

	/* The bag badge's halo matches the floating button, not the page. */
	body.rua-product .rua-header:not(.is-scrolled) .rua-header__cart-count {
		box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
	}
}

/* ------------------------------------------------------------- nav ----- */

/*
 * Mobile: the nav is a full-height panel. It is hidden with `display: none`
 * via [hidden]-like semantics rather than opacity, so its links stay out of
 * the tab order while closed.
 */
.rua-nav {
	position: fixed;
	inset: var(--rua-header-offset) 0 var(--rua-tabbar-offset);
	display: none;
	padding: var(--wp--preset--spacing--30) var(--rua-gutter) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--base);
	border-top: var(--rua-border);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rua-nav.is-open {
	display: block;
}

.rua-nav__list,
.rua-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rua-nav__list a {
	display: block;
	padding: 1rem 0;
	border-bottom: var(--rua-border);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast);
}

.rua-nav__list .current-menu-item > a,
.rua-nav__list .current-menu-ancestor > a {
	color: var(--wp--preset--color--primary);
}

.rua-nav__list .sub-menu a {
	padding: 0.65rem 0 0.65rem var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-nav__account {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0.85rem 0;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

/* Narrow desktops: the nav sits in a third of the width, so it tightens up. */
@media (min-width: 900px) and (max-width: 1099.98px) {
	.rua-nav__list {
		gap: 0;
	}

	.rua-nav__list a {
		padding: 0 0.5rem;
		letter-spacing: 0.06em;
	}

	.rua-nav__list a::after {
		left: 0.5rem;
		right: 0.5rem;
	}

	.rua-header__brand .custom-logo {
		max-width: 150px;
	}
}

/* ---------------------------------------------------------- search ----- */

/*
 * Desktop: a strip under the header bar. Phones: a sheet rising from the
 * foot of the screen, the field at its top and room beneath for results.
 * Both share one element; theme.js opens it the same way, and CSS
 * decides the shape. theme.js fills data-rua-search-results as the
 * customer types: a list of matches, then a link to the full results.
 */
.rua-search[hidden] {
	display: none;
}

.rua-search {
	border-top: var(--rua-border);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--30) var(--rua-gutter);
}

.rua-search__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rua-search__bar .rua-searchform {
	flex: 1 1 auto;
	min-width: 0;
}

.rua-search__backdrop,
.rua-search__grab,
.rua-search__close {
	display: none;
}

.rua-search__results {
	max-width: 42rem;
	margin-inline: auto;
}

.rua-search__results:empty {
	display: none;
}

.rua-search__results[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 200ms ease 150ms;
}

.rua-search__list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

/* A row: photo, name with its category or code beneath, price at the end. */
.rua-search__result {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 0.9rem;
	align-items: center;
	padding: 0.6rem 0;
	border-bottom: var(--rua-border);
	text-decoration: none;
	color: inherit;
}

.rua-search__list li:last-child .rua-search__result {
	border-bottom: 0;
}

.rua-search__thumb {
	display: block;
	aspect-ratio: var(--rua-card-ratio, 3 / 4);
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--accent-soft);
	overflow: hidden;
}

.rua-search__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rua-search__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.rua-search__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	transition: color var(--rua-transition);
}

/* The typed letters, in the name: a wine underline rather than a yellow block. */
.rua-search__name mark {
	background: none;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.15em;
}

.rua-search__meta {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rua-search__price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.rua-search__price s {
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

/* The way to the full results, a row like the rest. */
.rua-search__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.25rem 0 0.5rem;
	padding: 0.75rem 0;
	border-top: var(--rua-border);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.rua-search__all .rua-icon {
	flex: 0 0 auto;
	transition: transform var(--rua-transition);
}

.rua-search__empty {
	margin: 1rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-search__result:focus-visible,
.rua-search__all:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
	border-radius: var(--rua-radius);
}

@media (hover: hover) {
	.rua-search__result:hover .rua-search__name {
		color: var(--wp--preset--color--primary);
	}

	.rua-search__all:hover .rua-icon {
		transform: translateX(3px);
	}
}

@media (max-width: 899.98px) {
	.rua-search {
		position: fixed;
		inset: 0;
		z-index: 150;
		padding: 0;
		border-top: 0;
		background: transparent;
	}

	.rua-search__backdrop {
		display: block;
		position: absolute;
		inset: 0;
		background: rgb(64 59 59 / 0.45);
		opacity: 0;
		transition: opacity 260ms ease;
	}

	.rua-search.is-open .rua-search__backdrop {
		opacity: 1;
	}

	.rua-search__panel {
		position: absolute;
		inset: auto 0 0;
		display: flex;
		flex-direction: column;
		height: min(86vh, 86dvh);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-radius: var(--rua-sheet-radius) var(--rua-sheet-radius) 0 0;
		background: var(--wp--preset--color--base);
		box-shadow: 0 -12px 40px rgb(64 59 59 / 0.25);
		transform: translateY(100%);
		transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
		outline: none;
	}

	.rua-search.is-open .rua-search__panel {
		transform: none;
	}

	.rua-search__panel.is-dragging {
		transition: none;
	}

	.rua-search__grab {
		display: block;
		width: 40px;
		height: 4px;
		margin: 10px auto 0;
		border-radius: 999px;
		background: var(--wp--preset--color--border);
	}

	.rua-search__bar {
		padding: 0.75rem var(--rua-gutter);
	}

	.rua-search__bar .rua-searchform {
		max-width: none;
	}

	.rua-search__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		margin-right: -8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}

	/* A flex item with auto side margins shrinks to its content; the width keeps the rows full. */
	.rua-search__results {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 var(--rua-gutter);
	}

	.rua-search__results:empty {
		display: block;
	}
}

.rua-searchform {
	display: flex;
	max-width: 42rem;
	margin-inline: auto;
	border: var(--rua-border);
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--surface);
	transition: border-color var(--rua-transition), box-shadow var(--rua-transition);
}

.rua-searchform:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.rua-searchform__field {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 0 1rem;
	border: 0;
	background: none;
	font: inherit;
	/* 16px minimum stops iOS Safari zooming the page on focus. */
	font-size: 16px;
	color: inherit;
}

.rua-searchform__field::placeholder {
	color: var(--wp--preset--color--contrast-muted);
}

.rua-searchform__field::-webkit-search-decoration,
.rua-searchform__field::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.rua-searchform__field:focus-visible {
	outline: none;
}

.rua-searchform__submit {
	/* Rounded only on the outer corners, flush with the field on the inner one. */
	border-radius: 0 var(--rua-radius) var(--rua-radius) 0;
	min-height: 46px;
	padding-inline: 1.25rem;
}

/* The archive "nothing found" form is standalone, so it keeps a gap. */
.rua-empty .rua-searchform {
	margin-top: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.rua-header {
		border-bottom-color: var(--wp--preset--color--border);
	}

	.rua-header__toggle,
	.rua-header__back {
		display: none;
	}

	.rua-header__inner {
		gap: var(--wp--preset--spacing--40, 1.5rem);
	}

	.rua-header__brand .custom-logo {
		max-width: 200px;
	}

	.rua-header__action--account {
		display: inline-flex;
	}

	.rua-nav__account {
		display: none;
	}

	/*
	 * The nav comes after the brand in the DOM (so it reads in order for
	 * assistive tech) but is placed in the first column visually.
	 */
	.rua-nav {
		position: static;
		display: block;
		inset: auto;
		grid-column: 1;
		grid-row: 1;
		padding: 0;
		border: 0;
		background: none;
		overflow: visible;
		justify-self: start;
		/* Line the first link's text up with the content edge. */
		margin-inline-start: -0.75rem;
	}

	.rua-header__brand {
		grid-column: 2;
		grid-row: 1;
	}

	.rua-header__actions {
		grid-column: 3;
		grid-row: 1;
	}

	.rua-nav__list {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}

	.rua-nav__list > li {
		position: relative;
	}

	.rua-nav__list a {
		position: relative;
		display: inline-flex;
		align-items: center;
		height: var(--rua-header-height);
		padding: 0 0.75rem;
		border: 0;
		white-space: nowrap;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast);
		transition: color var(--rua-transition);
	}

	/* Underline grows from the centre; sits inside the link's padding. */
	.rua-nav__list a::after {
		content: "";
		position: absolute;
		left: 0.75rem;
		right: 0.75rem;
		bottom: calc(50% - 0.95em);
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--rua-transition);
	}

	.rua-nav__list a:hover,
	.rua-nav__list a:focus-visible,
	.rua-nav__list .current-menu-item > a,
	.rua-nav__list .current-menu-ancestor > a {
		color: var(--wp--preset--color--primary);
	}

	.rua-nav__list a:hover::after,
	.rua-nav__list .current-menu-item > a::after,
	.rua-nav__list .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	.rua-nav__list a:focus-visible {
		outline-offset: -2px;
	}

	.rua-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: block;
		min-width: 220px;
		padding: 0.5rem 0;
		background: var(--wp--preset--color--surface);
		border: var(--rua-border);
		border-top-color: var(--wp--preset--color--primary);
		box-shadow: 0 12px 32px -12px rgb(64 59 59 / 0.3);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity var(--rua-transition), transform var(--rua-transition), visibility 0s var(--rua-transition);
	}

	.rua-nav__list > li:hover > .sub-menu,
	.rua-nav__list > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.rua-nav__list .sub-menu a {
		display: block;
		height: auto;
		padding: 0.6rem 1.25rem;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--wp--preset--color--contrast);
	}

	.rua-nav__list .sub-menu a::after {
		display: none;
	}

	.rua-nav__list .sub-menu a:hover,
	.rua-nav__list .sub-menu .current-menu-item > a {
		color: var(--wp--preset--color--primary);
		background: var(--wp--preset--color--accent-soft);
	}

	.rua-search {
		padding-block: var(--wp--preset--spacing--40);
	}

	.rua-search__panel {
		max-width: 42rem;
		margin-inline: auto;
	}

	/* The strip sits in the sticky header, so the list scrolls rather than the header growing past the screen. */
	.rua-search__results {
		max-height: min(60vh, 520px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ---------------------------------------------------------- buttons ---- */

.rua-button,
.rua-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: var(--rua-radius);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rua-transition);
}

.rua-button:hover,
.rua-searchform__submit:hover {
	background: var(--wp--preset--color--primary-dark);
}

.rua-button {
	gap: 0.5rem;
}

.rua-button .rua-icon {
	flex: 0 0 auto;
}

.rua-button--large {
	min-height: 52px;
	padding-inline: 2.25rem;
}

/* Outline: same shape, drawn with a stroke; fills on hover. */
.rua-button--outline {
	background: transparent;
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	transition: background-color var(--rua-transition), color var(--rua-transition), transform 120ms ease;
}

.rua-button--outline:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Light: for use on the wine ground. */
.rua-button--light {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.rua-button--light:hover {
	background: var(--wp--preset--color--surface);
}

/* Text link with an arrow that nudges on hover: "View all", "Browse". */
.rua-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color var(--rua-transition);
}

.rua-link .rua-icon {
	flex: 0 0 auto;
	transition: transform var(--rua-transition);
}

.rua-link:hover {
	color: var(--wp--preset--color--primary);
}

.rua-link:hover .rua-icon {
	transform: translateX(3px);
}

/* Small caps line above a heading. */
.rua-eyebrow {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

.rua-eyebrow--light {
	color: var(--wp--preset--color--base);
	opacity: 0.8;
}

/* ------------------------------------------------------ content -------- */

.rua-posts {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 700px) {
	.rua-posts {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.rua-posts {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rua-post__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.rua-post__title {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 0.75rem;
}

.rua-archive__header,
.rua-empty {
	max-width: 46rem;
	margin: 0 auto var(--wp--preset--spacing--50);
	text-align: center;
}

.rua-empty {
	padding-block: var(--wp--preset--spacing--60);
}

/* ------------------------------------------------------ singular ------ */

/*
 * Single posts and pages. Every child of the article is centred and capped at
 * the theme.json contentSize; .alignwide and .alignfull blocks may break out
 * to the wideSize and to the full main container respectively.
 */
.rua-main--singular .rua-post > :not(.rua-post__body),
.rua-main--singular .rua-post__body > * {
	max-width: var(--wp--style--global--content-size, 800px);
	margin-inline: auto;
}

.rua-main--singular .rua-post__body > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1360px);
}

.rua-main--singular .rua-post__body > .alignfull {
	max-width: none;
}

.rua-main--singular .rua-post__media img {
	aspect-ratio: auto;
}

.rua-main--singular .rua-post__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------- tab bar ---- */

/*
 * Fixed bottom bar on small screens, in the position a native store app
 * keeps its tabs. Sits under the header's stacking context (z 100) so the
 * open menu panel can stop above it rather than cover it.
 */
.rua-tabbar {
	position: fixed;
	inset: auto 0 0;
	z-index: 90;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	height: var(--rua-tabbar-offset);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--wp--preset--color--base);
	border-top: var(--rua-border);
	box-shadow: 0 -8px 24px -16px rgb(64 59 59 / 0.25);
	view-transition-name: rua-tabbar;
}

.rua-tabbar__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-muted);
	transition: color var(--rua-transition);
}

.rua-tabbar__item:active {
	color: var(--wp--preset--color--primary);
}

.rua-tabbar__item .rua-icon {
	transition: transform var(--rua-transition);
}

.rua-tabbar__item:active .rua-icon {
	transform: scale(0.9);
}

.rua-tabbar__item[aria-current="page"],
.rua-tabbar__item[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
}

.rua-tabbar__item:focus-visible {
	outline-offset: -2px;
}

.rua-tabbar__label {
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rua-tabbar__count {
	position: absolute;
	top: 6px;
	left: calc(50% + 4px);
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 10px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

.rua-tabbar__count.is-empty {
	display: none;
}

@media (min-width: 900px) {
	.rua-tabbar {
		display: none;
	}

	body.has-rua-tabbar,
	body.has-rua-buybar {
		--rua-tabbar-offset: 0px;
	}
}

/* ----------------------------------------------------------- home ------ */

/*
 * The front page is full-bleed: bands of colour run the width of the
 * viewport while their contents stay on the theme's max width. .rua-main
 * therefore drops its own padding here and each section carries its own,
 * through .rua-section__inner.
 */
.rua-main--home {
	max-width: none;
	padding: 0;
}

.rua-section__inner {
	max-width: var(--rua-max-width);
	margin-inline: auto;
	padding-inline: var(--rua-gutter);
}

.rua-section {
	padding-block: var(--wp--preset--spacing--60);
}

.rua-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.rua-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

/* hero --------------------------------------------------------------- */

/*
 * Phones: the photo is the screen, with the copy laid over its lower half
 * on a gradient that keeps the text legible whatever the photo does.
 * From 900px it becomes two columns -- copy left, photo right -- and the
 * gradient is dropped.
 */
.rua-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(58vh, 520px);
	padding: var(--wp--preset--spacing--50) var(--rua-gutter) var(--wp--preset--spacing--40);
	overflow: hidden;
	color: var(--wp--preset--color--base);
	isolation: isolate;
}

.rua-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.rua-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Wine, fading to clear over the top half: legible text, visible photo. */
.rua-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgb(94 34 46 / 0.92) 0%,
		rgb(94 34 46 / 0.75) 35%,
		rgb(94 34 46 / 0.25) 70%,
		rgb(94 34 46 / 0.1) 100%
	);
}

.rua-hero__body {
	position: relative;
	max-width: 34rem;
}

.rua-hero__eyebrow {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
}

.rua-hero__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.rua-hero__text {
	margin: 1rem 0 0;
	max-width: 30rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	opacity: 0.92;
}

.rua-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: var(--wp--preset--spacing--40);
}

.rua-hero .rua-button {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.rua-hero .rua-button:hover {
	background: var(--wp--preset--color--surface);
}

.rua-hero .rua-link {
	color: inherit;
}

.rua-hero .rua-link:hover {
	color: inherit;
	opacity: 0.8;
}

/* No photo: the wine ground carries the copy on its own. */
.rua-hero--text {
	min-height: 0;
	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--primary);
}

.rua-hero--text::after {
	display: none;
}

@media (min-width: 900px) {
	/*
	 * Two columns. The copy sits on the page's cream, so it goes back to
	 * ink, and the photo is a rounded panel rather than a backdrop.
	 */
	.rua-hero {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
		gap: var(--wp--preset--spacing--60);
		min-height: 0;
		padding: var(--wp--preset--spacing--60) var(--rua-gutter);
		max-width: var(--rua-max-width);
		margin-inline: auto;
		color: var(--wp--preset--color--contrast);
	}

	.rua-hero::after {
		display: none;
	}

	.rua-hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		border-radius: calc(var(--rua-radius) * 3);
		overflow: hidden;
	}

	.rua-hero__media img {
		aspect-ratio: 5 / 4;
		max-height: 620px;
	}

	.rua-hero__body {
		max-width: none;
	}

	.rua-hero__eyebrow {
		color: var(--wp--preset--color--primary);
		opacity: 1;
	}

	.rua-hero__text {
		color: var(--wp--preset--color--contrast-muted);
		opacity: 1;
	}

	.rua-hero .rua-button {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}

	.rua-hero .rua-button:hover {
		background: var(--wp--preset--color--primary-dark);
	}

	.rua-hero .rua-link {
		color: var(--wp--preset--color--contrast);
	}

	.rua-hero .rua-link:hover {
		color: var(--wp--preset--color--primary);
		opacity: 1;
	}

	.rua-hero--text {
		color: var(--wp--preset--color--base);
		max-width: none;
	}

	.rua-hero--text .rua-hero__eyebrow,
	.rua-hero--text .rua-hero__text,
	.rua-hero--text .rua-link {
		color: inherit;
	}

	.rua-hero--text .rua-button {
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--primary);
	}
}

@media (min-width: 1200px) {
	.rua-hero__title {
		font-size: clamp(3rem, 4.2vw, 4.25rem);
	}
}

/* value ticker -------------------------------------------------------- */

/*
 * A marquee of four copies of the list. Each copy is exactly 25% of the
 * track, so translating by -25% lands on an identical frame and the loop
 * has no seam. Duplicates are aria-hidden; the first copy is the one read.
 */
.rua-ticker {
	padding-block: 0.9rem;
	border-block: var(--rua-border);
	background: var(--wp--preset--color--accent-soft);
	overflow: hidden;
}

.rua-ticker__track {
	display: flex;
	width: max-content;
	animation: rua-ticker 40s linear infinite;
}

.rua-ticker__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0 calc(var(--wp--preset--spacing--50) / 2);
	list-style: none;
}

.rua-ticker__list li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

/* A diamond between items, drawn on the item rather than as a list marker. */
.rua-ticker__list li::after {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--primary);
	transform: rotate(45deg);
}

@keyframes rua-ticker {
	to { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * No drift: the row becomes a plain scrollable strip. The keyframe rule
	 * above is already neutralised by the global reduced-motion block.
	 */
	.rua-ticker {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rua-ticker__track {
		animation: none;
	}

	.rua-ticker__list:not(:first-child) {
		display: none;
	}
}

/* categories ---------------------------------------------------------- */

/*
 * Tiles with the name over the photo. Phones and tablets: two columns,
 * the first category the full width above them. Desktop: four columns,
 * the first two by two at the left, so five categories make one block.
 */
.rua-categories__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 13.5rem;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rua-categories__list > li.is-lead {
	grid-column: span 2;
	grid-row: span 1;
}

@media (min-width: 700px) {
	.rua-categories__list {
		grid-auto-rows: 17rem;
		gap: 1rem;
	}
}

@media (min-width: 1000px) {
	.rua-categories__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: clamp(14rem, 19vw, 17.5rem);
		gap: var(--wp--preset--spacing--30);
	}

	.rua-categories__list > li.is-lead {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.rua-categories__card {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: calc(var(--rua-radius) * 2);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	isolation: isolate;
}

/* Dark at the foot, where the name sits. */
.rua-categories__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.62) 100%);
	pointer-events: none;
}

.rua-categories__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	transition: transform 500ms ease;
}

@media (hover: hover) {
	.rua-categories__card:hover .rua-categories__img {
		transform: scale(1.05);
	}
}

.rua-categories__text {
	position: absolute;
	right: 3.5rem;
	bottom: 0.875rem;
	left: 0.875rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.rua-categories__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.15;
}

.rua-categories__count {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.rua-categories__go {
	position: absolute;
	right: 0.75rem;
	bottom: 0.875rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: var(--wp--preset--color--contrast);
	transition: transform var(--rua-transition), background-color var(--rua-transition), color var(--rua-transition);
}

.rua-categories__card:hover .rua-categories__go,
.rua-categories__card:focus-visible .rua-categories__go {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: translateX(2px);
}

.is-lead .rua-categories__text {
	bottom: 1.25rem;
	left: 1.25rem;
}

.is-lead .rua-categories__name {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}

.is-lead .rua-categories__go {
	right: 1.25rem;
	bottom: 1.25rem;
	width: 2.75rem;
	height: 2.75rem;
}

/* product rows -------------------------------------------------------- */

/*
 * The grid itself is styled in woocommerce.css, with the shop's cards.
 * "New arrivals" sits flush under categories (see products.php); other
 * product rows keep .rua-section's normal padding on both sides.
 */
.rua-products--flush-top {
	padding-top: 0;
}

/*
 * The sections after "new arrivals" are laid out only as they near the
 * screen. Chrome widens its lazy-load margin to 2500-3000px on a slow
 * connection, which on a phone reached the foot of the home page: every
 * card photo downloaded alongside the hero and held back its paint. An
 * image inside a section that has not been laid out is not near anything,
 * so it waits. The sizes are each section's measured height, so the
 * scrollbar barely moves when one renders; `auto` then keeps the real one.
 */
.rua-main--home > .rua-story {
	content-visibility: auto;
	contain-intrinsic-size: auto 760px;
}

.rua-main--home > .rua-products:not(.rua-products--flush-top) {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

.rua-main--home > .rua-follow {
	content-visibility: auto;
	contain-intrinsic-size: auto 220px;
}

/* story --------------------------------------------------------------- */

.rua-story {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--accent-soft);
	border-block: var(--rua-border);
}

.rua-story__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

@media (min-width: 900px) {
	.rua-story__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}

	.rua-story--text .rua-story__inner {
		grid-template-columns: minmax(0, 46rem);
		justify-content: center;
		text-align: center;
	}
}

.rua-story__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}

.rua-story__text {
	margin: 1rem 0 0;
	max-width: 34rem;
	line-height: 1.8;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-story__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * Two photos, the second overlapping the first from below -- the same
 * layered feel as the product page's sheet, at rest.
 */
.rua-story__collage {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--40);
}

.rua-story__photo {
	display: block;
	border-radius: calc(var(--rua-radius) * 2);
	overflow: hidden;
}

.rua-story__photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.rua-story__photo--aside {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42%;
	border: 4px solid var(--wp--preset--color--accent-soft);
	box-shadow: 0 16px 40px -24px rgb(64 59 59 / 0.5);
}

.rua-story__photo--main {
	width: 78%;
}

/* follow -------------------------------------------------------------- */

.rua-follow {
	padding-block: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.rua-follow__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.rua-follow__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.rua-follow__text {
	margin: 0.5rem 0 0;
	opacity: 0.85;
}

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

/*
 * Brand, shop, help and visit, as one column on phones, two from 600px and
 * four from 900px, with the legal line beneath. Everything left-aligned:
 * a footer is read like a table, not a poster.
 */
.rua-footer {
	margin-top: var(--wp--preset--spacing--60);
	border-top: var(--rua-border);
	background: var(--wp--preset--color--accent-soft);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * The front page ends in a full-bleed band that carries its own padding, so
 * the gap above the footer would read as a stripe of stray page colour.
 */
body.rua-home .rua-footer {
	margin-top: 0;
}

.rua-footer__inner {
	max-width: var(--rua-max-width);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60) var(--rua-gutter) var(--wp--preset--spacing--40);
}

/*
 * The brand and the "visit us" block: stacked on phones, side by side
 * from 900px. Inside the visit block the details run in two columns
 * once there is room -- the address down the left, email, phone and
 * hours down the right -- so the block stays short.
 */
.rua-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

@media (min-width: 900px) {
	.rua-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.rua-footer__brand {
		grid-column: auto;
		padding-right: var(--wp--preset--spacing--50);
	}
}

.rua-footer__brand .custom-logo-link {
	display: inline-block;
	line-height: 1;
}

.rua-footer__brand .custom-logo {
	width: auto;
	height: 40px;
	max-width: 140px;
	object-fit: contain;
}

.rua-footer__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.rua-footer__tagline {
	max-width: 22rem;
	margin: 0.9rem 0 0;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast-muted);
}

.rua-footer__social {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.rua-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: var(--rua-border);
	border-radius: 999px;
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	transition: color var(--rua-transition), border-color var(--rua-transition);
}

.rua-footer__social a:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.rua-footer__heading {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.rua-footer__contact {
	display: grid;
	gap: 0.75rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--contrast-muted);
}

/*
 * Two columns from the smallest screen: the address down the left with
 * email and phone beside it, and the hours -- the longest line -- across
 * the full width beneath. From 900px the hours join the right column,
 * so the block sits in two even halves beside the brand.
 */
.rua-footer__contact {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

.rua-footer__contact a,
.rua-footer__contact span {
	overflow-wrap: anywhere;
}

.rua-footer__contact-item--address {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.rua-footer__contact-item--email {
	grid-column: 2;
	grid-row: 1;
}

.rua-footer__contact-item--phone {
	grid-column: 2;
	grid-row: 2;
}

.rua-footer__contact-item--hours {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.rua-footer__contact {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 2rem;
	}

	.rua-footer__contact-item--address {
		grid-row: 1 / span 3;
	}

	.rua-footer__contact-item--hours {
		grid-column: 2;
		grid-row: 3;
	}
}

.rua-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.rua-footer__contact .rua-icon {
	flex: 0 0 auto;
	margin-top: 0.2em;
	color: var(--wp--preset--color--primary);
}

.rua-footer__contact address {
	font-style: normal;
	line-height: 1.6;
}

.rua-footer__contact a {
	text-decoration: none;
	color: inherit;
	transition: color var(--rua-transition);
}

.rua-footer__contact a:hover {
	color: var(--wp--preset--color--primary);
}

.rua-footer__chat {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 40px;
	margin-top: 1.25rem;
	padding: 0 1.1rem;
	border: var(--rua-border);
	border-radius: 999px;
	background: var(--rua-field);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--rua-transition), border-color var(--rua-transition);
}

.rua-footer__chat:hover {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.rua-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: var(--rua-border);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-muted);
}

.rua-footer__copy {
	margin: 0;
}

.rua-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rua-footer__legal-links a {
	text-decoration: none;
	color: inherit;
}

.rua-footer__legal-links a:hover {
	text-decoration: underline;
}

/*
 * Below 600px the desktop-sized gaps read as a lot of empty scroll --
 * tighten the whole block.
 */
@media (max-width: 599px) {
	.rua-footer {
		margin-top: var(--wp--preset--spacing--40);
	}

	.rua-footer__inner {
		padding: var(--wp--preset--spacing--50) var(--rua-gutter) var(--wp--preset--spacing--30);
	}

	.rua-footer__grid {
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.rua-footer__heading {
		margin-bottom: 0.75rem;
	}

	.rua-footer__legal {
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* Prevents background scroll while the mobile nav panel is open. */
body.rua-no-scroll {
	overflow: hidden;
}