/* RUO Storefront: styles theme.json can't express. Colors come from palette tokens, so rebranding stays in theme.json. */

.ruo-eyebrow,
.ruo-mono {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ruo-eyebrow { color: var(--wp--preset--color--accent); }

.ruo-pill {
	display: inline-block;
	width: fit-content;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ruo-pill-warn {
	background: var(--wp--preset--color--warning-soft);
	color: var(--wp--preset--color--warning);
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--mono);
}

.ruo-stat-value { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.ruo-stats p { margin: 0; }

/* Announcement marquee */
.ruo-announcement { overflow: hidden; }
.ruo-marquee {
	display: flex;
	gap: 3rem;
	width: max-content;
	margin: 0;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	animation: ruo-marquee 32s linear infinite;
}
.ruo-marquee span::before { content: "✓ "; opacity: 0.6; }
@keyframes ruo-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ruo-marquee { animation: none; margin: 0 auto; }
}

/* Header */
.ruo-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent); backdrop-filter: blur(10px); }

/* Hero: full-bleed photo or looping video with the copy on a dark gradient. Stays dark in every look,
   because the text sits on the member's photo, not on the page background. */
.ruo-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(560px, 84vh, 860px);
	background:
		radial-gradient(60% 80% at 78% 40%, color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent), transparent 70%),
		#05080D;
	color: #FFFFFF;
}
.ruo-hero > .ruo-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none !important;
	margin: 0 !important;
}
.ruo-hero__media img,
.ruo-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 72% center;
}
.ruo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(4 7 12 / 0.92) 0%, rgb(4 7 12 / 0.72) 34%, rgb(4 7 12 / 0.12) 62%, rgb(4 7 12 / 0) 100%),
		linear-gradient(0deg, rgb(4 7 12 / 0.55) 0%, rgb(4 7 12 / 0) 30%);
}
.ruo-hero__content { position: relative; width: 100%; }
.ruo-hero__content > * { max-width: 40rem; }
.ruo-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	width: fit-content;
	margin: 0;
	padding: 0.45rem 0.95rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.06);
	backdrop-filter: blur(12px);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.86);
}
.ruo-hero__eyebrow::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: #34D399;
	box-shadow: 0 0 0 0 rgb(52 211 153 / 0.6);
	animation: ruo-pulse 2.4s infinite;
}
@keyframes ruo-pulse {
	70% { box-shadow: 0 0 0 0.5rem rgb(52 211 153 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(52 211 153 / 0); }
}
.ruo-hero .ruo-hero__title {
	margin-top: 1.5rem;
	font-size: clamp(2.6rem, 6.2vw, 5.4rem);
	font-weight: 650;
	line-height: 1.02;
	letter-spacing: -0.04em;
	text-wrap: balance;
	color: #FFFFFF;
}
.ruo-hero__lead {
	margin-top: 1.25rem;
	max-width: 34rem !important;
	color: rgb(255 255 255 / 0.72);
	text-wrap: pretty;
}
.ruo-hero__buttons { margin-top: 2rem; gap: 0.75rem; }
.ruo-hero__buttons .wp-block-button__link { padding: 0.95rem 1.6rem; font-size: var(--wp--preset--font-size--md); }
.ruo-hero__buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: #FFFFFF; color: #05080D; }
.ruo-on-dark .wp-block-button__link,
.wp-block-button.is-style-outline.ruo-on-dark .wp-block-button__link {
	color: #FFFFFF;
	border-color: rgb(255 255 255 / 0.28);
	background: rgb(255 255 255 / 0.04);
	backdrop-filter: blur(12px);
}
.wp-block-button.is-style-outline.ruo-on-dark .wp-block-button__link:hover { border-color: #FFFFFF; background: rgb(255 255 255 / 0.1); }
.ruo-hero__stats {
	gap: 0 !important;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.14);
}
.ruo-hero__stats > * { padding-right: 2rem; margin-right: 2rem; border-right: 1px solid rgb(255 255 255 / 0.14); }
.ruo-hero__stats > *:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ruo-hero__stats p { margin: 0; }
.ruo-hero__stats .ruo-stat-value { color: #FFFFFF; }
.ruo-hero__stat-label { color: rgb(255 255 255 / 0.6); }
.ruo-hero__chip {
	position: absolute;
	right: max(var(--wp--preset--spacing--40), calc((100% - 1240px) / 2));
	bottom: var(--wp--preset--spacing--50);
	margin: 0 !important;
	padding: 0.9rem 1.1rem 0.9rem 3.1rem;
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 14px;
	background: rgb(255 255 255 / 0.08);
	backdrop-filter: blur(16px);
	box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6);
	max-width: none !important;
}
.ruo-hero__chip::before {
	content: "✓";
	position: absolute;
	left: 1rem;
	top: 50%;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: -0.75rem;
	border-radius: 50%;
	background: #34D399;
	color: #05080D;
	font-size: 0.8rem;
	font-weight: 700;
}
.ruo-hero__chip p { margin: 0; color: #FFFFFF; }
.ruo-hero__chip .ruo-mono { color: rgb(255 255 255 / 0.62); }

/* Entrance */
.ruo-hero__content > * { animation: ruo-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ruo-hero__content > *:nth-child(2) { animation-delay: 0.08s; }
.ruo-hero__content > *:nth-child(3) { animation-delay: 0.16s; }
.ruo-hero__content > *:nth-child(4) { animation-delay: 0.24s; }
.ruo-hero__content > *:nth-child(5) { animation-delay: 0.32s; }
.ruo-hero__chip { animation: ruo-rise 0.9s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes ruo-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ruo-hero__video { display: none; }
	.ruo-hero__content > *,
	.ruo-hero__chip,
	.ruo-hero__eyebrow::before { animation: none; }
}

@media (max-width: 781px) {
	/* Phones: the photo becomes a band across the top that fades into the copy. */
	.ruo-hero { min-height: 0; justify-content: flex-end; padding-top: 64vw !important; }
	.ruo-hero > .ruo-hero__media { bottom: auto; height: 96vw; }
	.ruo-hero__media img,
	.ruo-hero__video { object-position: 82% 50%; }
	.ruo-hero__media::after { background: linear-gradient(180deg, rgb(5 8 13 / 0) 40%, rgb(5 8 13 / 0.85) 75%, #05080D 100%); }
	.ruo-hero__eyebrow { letter-spacing: 0.04em; }
	.ruo-hero__stats { margin-top: 2rem; }
	.ruo-hero__stats > * { padding-right: 1rem; margin-right: 1rem; }
	.ruo-hero__stats .ruo-stat-value { font-size: 1.35rem !important; }
	.ruo-hero__chip { position: relative; right: auto; bottom: auto; width: fit-content; margin-top: 1.75rem !important; }
	.ruo-header .wp-block-site-title { font-size: 1.05rem; white-space: nowrap; }
}

/* Outline buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--contrast); }

/* Trust bar: an icon per item (shield, document, clock, snowflake), drawn as masks in the brand color. */
.ruo-trust p { margin: 0; }
.ruo-trust .wp-block-column { position: relative; padding-left: 3.25rem; }
.ruo-trust .wp-block-column::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0.7rem;
	background: var(--wp--preset--color--accent-soft);
}
.ruo-trust .wp-block-column::after {
	content: "";
	position: absolute;
	left: 0.6rem;
	top: 0.7rem;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--ruo-icon) center / contain no-repeat;
	mask: var(--ruo-icon) center / contain no-repeat;
}
.ruo-trust .wp-block-column:nth-child(4n+1) { --ruo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ruo-trust .wp-block-column:nth-child(4n+2) { --ruo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.ruo-trust .wp-block-column:nth-child(4n+3) { --ruo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.ruo-trust .wp-block-column:nth-child(4n+4) { --ruo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9 4.9 19.1'/%3E%3C/svg%3E"); }

/* Product cards */
.ruo-product-grid > li,
.ruo-product-grid .wc-block-product {
	position: relative;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ruo-product-grid > li:hover,
.ruo-product-grid .wc-block-product:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
	box-shadow: 0 18px 40px -24px rgb(14 20 25 / 0.35);
	transform: translateY(-2px);
}
.ruo-product-grid > li,
.ruo-product-grid .wc-block-product { transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.ruo-product-grid .wc-block-components-product-image { overflow: hidden; border-radius: var(--wp--custom--radius-sm); }
.ruo-product-grid .wc-block-components-product-image img { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ruo-product-grid > li:hover .wc-block-components-product-image img,
.ruo-product-grid .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.ruo-product-grid .wc-block-components-product-image img { border-radius: var(--wp--custom--radius-sm); background: var(--wp--preset--color--surface); }
.ruo-product-grid .wp-block-woocommerce-product-button,
.ruo-product-grid .wp-block-button__link,
.ruo-product-grid .wc-block-components-product-button__button,
.ruo-product-grid .wc-block-components-product-button > * { display: block; width: 100%; text-align: center; }
.ruo-product-grid .wp-block-post-title a { color: var(--wp--preset--color--contrast); }
.wc-block-components-product-sale-badge,
.onsale {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: var(--wp--preset--font-size--xs) !important;
}

/* Product page */
.ruo-pdp-summary > * + * { margin-top: 1rem; }
.ruo-pdp .single_add_to_cart_button { width: 100%; }
.ruo-tabs { margin-top: var(--wp--preset--spacing--60); }
.ruo-tabs .wc-tabs { border-bottom: 1px solid var(--wp--preset--color--border); }

/* FAQ */
.ruo-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 1.1rem 0;
}
.ruo-faq summary { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.ruo-faq summary::-webkit-details-marker { display: none; }
.ruo-faq summary::after { content: "+"; color: var(--wp--preset--color--accent); font-size: 1.25rem; line-height: 1; }
.ruo-faq details[open] summary::after { content: "−"; }
.ruo-faq summary + * { margin-top: 0.75rem; }

/* Footer */
.ruo-footer a { color: inherit; }
.ruo-footer-links { list-style: none; padding-left: 0; }
.ruo-footer-links li + li { margin-top: 0.4rem; }
.ruo-footer-links a { color: var(--wp--preset--color--inverse-muted); }
.ruo-footer-links a:hover { color: var(--wp--preset--color--on-inverse); }

/* Shop by category */
.ruo-cat-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none !important;
}
.ruo-cat-tile img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: var(--wp--preset--color--surface); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ruo-cat-tile:hover img { transform: scale(1.05); }
.ruo-cat-tile { transition: box-shadow 0.2s, border-color 0.2s; }
.ruo-cat-tile:hover { border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent); box-shadow: 0 18px 40px -24px rgb(14 20 25 / 0.35); }
.ruo-cat-tile__text {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.9rem 1rem;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
}
.ruo-cat-tile__text span { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); white-space: nowrap; }

/* Category chips on shop pages */
.ruo-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--wp--preset--spacing--40); }
.ruo-chips a {
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none !important;
}
.ruo-chips a span { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--xs); margin-left: 0.2rem; }
.ruo-chips a:hover { border-color: var(--wp--preset--color--contrast); }
.ruo-chips a[aria-current] { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.ruo-chips a[aria-current] span { color: inherit; opacity: 0.7; }

/* "From $X" */
.ruo-from { font-size: 0.85em; color: var(--wp--preset--color--muted); }

/* Native selects (sorting, variation size) follow the palette in dark looks */
.wc-block-catalog-sorting select,
.woocommerce-ordering select,
.variations select {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius-sm);
	padding: 0.5rem 0.75rem;
}

/* Split sections (quality, COA, shipping) */
.ruo-split h2 { margin-top: 0.5rem; text-wrap: balance; }
.ruo-photo { position: relative; margin: 0; overflow: hidden; border-radius: calc(var(--wp--custom--radius) * 1.6); box-shadow: 0 40px 80px -40px rgb(14 20 25 / 0.45); }
.ruo-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ruo-photo--tall img { aspect-ratio: 4 / 4.4; }
.ruo-photo--glow { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 40px 120px -30px color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent); }
.ruo-photo__tag {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.85);
	backdrop-filter: blur(10px);
	color: #0E1419;
	font-size: var(--wp--preset--font-size--xs);
}

.ruo-steps { margin-top: var(--wp--preset--spacing--40); }
.ruo-step { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--wp--preset--color--border); }
.ruo-step > * { margin: 0 !important; grid-column: 2; }
.ruo-step > .ruo-step__num {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}
.ruo-step h3 { margin-bottom: 0.25rem !important; }

.ruo-dark-band .ruo-eyebrow { color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, #FFFFFF); }
.ruo-dark-band h2 { color: inherit; }
.ruo-checklist { list-style: none; padding: 0; margin-top: var(--wp--preset--spacing--40); }
.ruo-checklist li { position: relative; padding: 0.7rem 0 0.7rem 2rem; border-top: 1px solid rgb(255 255 255 / 0.1); }
.ruo-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.75rem;
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	color: #FFFFFF;
	font-size: 0.7rem;
}

.ruo-facts { margin-top: var(--wp--preset--spacing--40); gap: 1rem; }
.ruo-fact { padding: 1.25rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius); background: var(--wp--preset--color--surface); }
.ruo-fact p { margin: 0; }
.ruo-fact .ruo-mono { margin: 0.2rem 0 0.5rem; }

@media (max-width: 781px) {
	.ruo-split { gap: var(--wp--preset--spacing--50) !important; }
}

/* Category tiles stretch to fill the row however many categories there are. */
.ruo-cat-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)) !important; }
.ruo-steps > * { margin-block-start: 0 !important; }
/* Header, main and footer butt together; each template's main sets its own padding. */
.wp-site-blocks > * + * { margin-block-start: 0; }