/*
 * Eat & Train v2, brand pass (B4): the homepage and Assess hub vocabulary on every Eat/Train page. Loaded after et.css.
 * Heroes become the soft dotted band with a floating white card and a Sneaky ribbon; search panels and cards become the
 * Assess directory's components; marks are the homepage icons (added by et.js, aria-hidden). Motion is finite and only
 * runs under prefers-reduced-motion: no-preference (html.et-motion is set by et.js in that case only).
 * Every selector is scoped to body.sh-et-look.
 */

body.sh-et-look.sh-et-eat { --et-rib-a: #2f7a34; --et-rib-b: #3d9442; --et-rib-c: #9bd49b; --et-glow: rgba(61, 148, 66, .16); --et-orb-a: #4fae55; --et-orb-b: #2f7a34; }
body.sh-et-look.sh-et-train { --et-rib-a: #1b6fae; --et-rib-b: #2b8fd6; --et-rib-c: #8fd0f0; --et-glow: rgba(43, 143, 214, .16); --et-orb-a: #45a6ea; --et-orb-b: #1b6fae; }
body.sh-et-look { --et-spring: cubic-bezier(.34, 1.56, .64, 1); }
body.sh-et-look { overflow-x: clip; }
body.sh-et-look main.site-main { max-width: none; width: 100%; }
body.sh-et-look .et-i { display: block; width: 100%; height: 100%; }

/* =====================================================================
 * 1. hero: the dotted band, display headline, floating card, ribbon
 * ===================================================================== */
body.sh-et-look.sh-shell .et-hero {
	position: relative;
	isolation: isolate;
	margin-top: 0 !important;
	margin-bottom: clamp(32px, 4vw, 56px) !important;
	padding: clamp(40px, 6vw, 88px) 0 clamp(36px, 5vw, 72px) !important;
	border: 0 !important;
	background: none !important;
}
/* the band runs edge to edge behind the frame */
body.sh-et-look.sh-shell .et-hero::before {
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background:
		radial-gradient(55% 75% at 82% 18%, var(--et-glow), transparent 70%),
		radial-gradient(40% 60% at 4% 100%, rgba(110, 196, 232, .12), transparent 70%),
		linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
	border-bottom: 1px solid var(--et-line-soft);
}
body.sh-et-look.sh-shell .et-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-image: radial-gradient(rgba(18, 44, 58, .075) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 88%);
	mask-image: linear-gradient(180deg, #000, transparent 88%);
	pointer-events: none;
}
/* breadcrumbs sit above the band; pull the band up under them on single pages */
body.sh-et-look main > .sh-breadcrumbs-slot + .et-hero { margin-top: 0 !important; }

body.sh-et-look.sh-shell .et-hero--panel {
	display: grid !important;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
	gap: clamp(28px, 5vw, 72px) !important;
	align-items: center !important;
	min-height: clamp(360px, 32vw, 470px);
}
body.sh-et-look.sh-shell .et-hero--solo { display: grid; gap: 16px; padding-right: min(40%, 480px) !important; min-height: clamp(300px, 26vw, 400px); align-content: center; }
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-copy, .rep-page-hero > div:first-child, .rrc-page-hero > div:first-child) { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: start; }

/* eyebrow: the pillar icon + tracked caps (the homepage's "✦ SNEAKY HELPERS") */
body.sh-et-look.sh-shell .et-hero :is(.sxl-kicker, .rep-page-kicker, .rrc-page-kicker, .sh-detail-kicker) {
	gap: 10px;
	color: var(--et-pillar-ink);
	font: 800 13.5px/1.2 var(--et-text);
	letter-spacing: .16em;
}
body.sh-et-look.sh-shell .et-hero :is(.sxl-kicker, .rep-page-kicker, .rrc-page-kicker, .sh-detail-kicker):has(.et-kicker-i)::before { content: none; }
body.sh-et-look .et-kicker-i {
	flex: none;
	width: 30px !important;
	height: 30px !important;
	padding: 6px;
	box-sizing: border-box;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--et-orb-a), var(--et-orb-b));
	color: #fff;
	box-shadow: 0 6px 14px -8px var(--et-orb-b);
}

/* the headline at the Assess hub's size */
body.sh-et-look.sh-shell main .et-hero h1 {
	margin: 0 !important;
	font-size: clamp(2.6rem, 1.5rem + 3.9vw, 4.75rem) !important;
	line-height: .98 !important;
	letter-spacing: -0.04em !important;
	max-width: 13ch;
}
body.sh-et-look.sh-shell main .et-hero--solo h1 { max-width: 18ch; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.1rem) !important; }
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-copy > p, .rep-page-hero > div:first-child > p, .rrc-page-hero > div:first-child > p, .nf-food-meta) {
	margin: 0;
	max-width: 52ch;
	color: var(--et-copy);
	font: 400 clamp(1.06rem, .98rem + .4vw, 1.27rem)/1.55 var(--et-text);
}

/* the hero card: the homepage's floating white card with a pillar bar */
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) {
	position: relative;
	z-index: 2;
	justify-self: end;
	width: min(100%, 400px);
	display: grid;
	gap: 10px;
	padding: 30px 28px 26px !important;
	border: 1px solid var(--et-line-soft) !important;
	border-radius: 26px !important;
	background: #fff !important;
	color: var(--et-ink) !important;
	box-shadow: 0 34px 70px -40px rgba(18, 44, 58, .55), 0 2px 6px rgba(18, 44, 58, .04) !important;
	overflow: hidden;
}
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--et-rib-a), var(--et-rib-b) 55%, var(--et-rib-c));
}
body.sh-et-look .et-panel-badge {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--et-orb-a), var(--et-orb-b));
	color: #fff;
	box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--et-line-soft), 0 14px 26px -14px var(--et-orb-b);
}
body.sh-et-look .et-panel-badge .et-i { width: 26px; height: 26px; }
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) > span:not(.et-panel-badge) {
	color: var(--et-pillar-ink) !important;
	font: 800 12px/1.2 var(--et-text) !important;
	letter-spacing: .14em !important;
}
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) strong { color: var(--et-ink) !important; font: 800 1.6rem/1.1 var(--et-display) !important; letter-spacing: -0.02em; }
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) p { margin: 0 0 6px; color: var(--et-copy) !important; font-size: 15.5px !important; line-height: 1.55; }
body.sh-et-look.sh-shell main .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) > a:first-of-type {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--et-teal) !important;
	color: #fff !important;
	font: 750 16px/1 var(--et-text) !important;
	text-decoration: none !important;
	box-shadow: 0 14px 26px -14px rgba(23, 61, 57, .8) !important;
	transition: background .18s var(--et-ease), transform .18s var(--et-ease);
}
body.sh-et-look.sh-shell main .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) > a:first-of-type:hover { background: var(--et-teal-deep) !important; transform: translateY(-1px); }
body.sh-et-look.sh-shell main .et-hero .sxl-hero-panel :is(a ~ a, .sh-cf-panel-link) { border: 1.5px solid var(--et-line) !important; background: #fff !important; color: var(--et-ink) !important; }
body.sh-et-look.sh-shell main .et-hero .sxl-hero-panel :is(a ~ a, .sh-cf-panel-link) * { color: var(--et-ink) !important; }
body.sh-et-look .et-go-i { width: 18px !important; height: 18px !important; transition: transform .18s var(--et-ease); }
body.sh-et-look .et-hero a:hover .et-go-i { transform: translateX(3px); }

/* the ribbon and its orbs: behind the card on the right */
body.sh-et-look .et-hero-art { position: absolute; z-index: 0; top: 0; bottom: 0; right: -2%; width: 50%; pointer-events: none; }
body.sh-et-look .et-hero--solo .et-hero-art { width: 42%; right: 0; }
body.sh-et-look .et-rib { position: absolute; inset: 4% 0 0 0; width: 100%; height: 92%; overflow: visible; }
body.sh-et-look .et-rib path { fill: none; stroke-linecap: round; }
body.sh-et-look .et-rib-a { stop-color: var(--et-rib-a); }
body.sh-et-look .et-rib-b { stop-color: var(--et-rib-b); }
body.sh-et-look .et-rib-c { stop-color: var(--et-rib-c); }
body.sh-et-look .et-rib-path { stroke: url(#et-rib-grad); stroke-width: 30; }
body.sh-et-look .et-rib-shadow { stroke: #0b3a46; stroke-opacity: .12; stroke-width: 30; filter: blur(9px); }
body.sh-et-look .et-rib-sheen { stroke: url(#et-rib-sheen); stroke-width: 7; }
body.sh-et-look .et-rib-dot { fill: #fff; stroke: var(--et-rib-a); stroke-width: 4; opacity: 0; }
body.sh-et-look .et-dot-on .et-rib-dot { opacity: 1; transition: opacity .3s; }
body.sh-et-look .et-orb {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 0 0 6px #fff, 0 18px 34px -16px rgba(18, 44, 58, .55);
}
body.sh-et-look .et-orb--main { left: 10%; top: 26%; width: 86px; height: 86px; background: linear-gradient(145deg, var(--et-orb-a), var(--et-orb-b)); }
body.sh-et-look .et-orb--main .et-i { width: 40px; height: 40px; }
body.sh-et-look .et-orb--other { right: 4%; bottom: 8%; width: 58px; height: 58px; background: linear-gradient(145deg, #4fae55, #2f7a34); }
body.sh-et-look.sh-et-eat .et-orb--other { background: linear-gradient(145deg, #45a6ea, #1b6fae); }
body.sh-et-look .et-orb--other .et-i { width: 27px; height: 27px; }
body.sh-et-look .et-orb--assess { left: 2%; bottom: 10%; width: 50px; height: 50px; background: linear-gradient(145deg, #2f8a7b, #1d5a50); }
body.sh-et-look .et-orb--assess .et-i { width: 24px; height: 24px; }
body.sh-et-look .et-orb--spark { right: 2%; top: 4%; width: 48px; height: 48px; background: #fbe3ec; color: #d6336c; box-shadow: 0 0 0 6px rgba(255, 255, 255, .7); }
body.sh-et-look .et-orb--spark .et-i { width: 22px; height: 22px; }
/* with a card in front, the orbs sit around it rather than under it */
body.sh-et-look .et-hero--panel .et-orb--main { left: -2%; top: 14%; }
body.sh-et-look .et-hero--panel .et-orb--assess { left: 6%; bottom: 6%; }

/* motion: the ribbon draws, the orbs pop, the copy rises; once */
@media (prefers-reduced-motion: no-preference) {
body.sh-et-look.et-motion .et-hero.et-play :is(.et-rib-path, .et-rib-shadow, .et-rib-sheen) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: et-rib-draw 1.5s var(--et-ease) .15s forwards; }
body.sh-et-look.et-motion .et-hero.et-play .et-orb { opacity: 0; transform: scale(.4); animation: et-orb-pop .6s var(--et-spring) forwards; }
body.sh-et-look.et-motion .et-hero.et-play .et-orb--main { animation-delay: .45s; }
body.sh-et-look.et-motion .et-hero.et-play .et-orb--assess { animation-delay: .8s; }
body.sh-et-look.et-motion .et-hero.et-play .et-orb--other { animation-delay: 1.15s; }
body.sh-et-look.et-motion .et-hero.et-play .et-orb--spark { animation: et-orb-pop .6s var(--et-spring) 1.35s forwards, et-spark-turn 2.4s var(--et-ease) 1.9s 1; }
body.sh-et-look.et-motion .et-hero.et-play :is(.sxl-hero-copy, .rep-page-hero > div:first-child, .rrc-page-hero > div:first-child) > *,
body.sh-et-look.et-motion .et-hero--solo.et-play > :not(.et-hero-art) { opacity: 0; transform: translateY(14px); animation: et-rise .7s var(--et-ease) forwards; }
body.sh-et-look.et-motion .et-hero.et-play :is(.sxl-hero-copy, .rep-page-hero > div:first-child, .rrc-page-hero > div:first-child) > :nth-child(2),
body.sh-et-look.et-motion .et-hero--solo.et-play > :nth-child(2) { animation-delay: .08s; }
body.sh-et-look.et-motion .et-hero.et-play :is(.sxl-hero-copy, .rep-page-hero > div:first-child, .rrc-page-hero > div:first-child) > :nth-child(3),
body.sh-et-look.et-motion .et-hero--solo.et-play > :nth-child(3) { animation-delay: .16s; }
body.sh-et-look.et-motion .et-hero--solo.et-play > :nth-child(n+4) { animation-delay: .24s; }
body.sh-et-look.et-motion .et-hero.et-play :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) { opacity: 0; transform: translateY(22px) scale(.98); animation: et-rise .8s var(--et-ease) .3s forwards; }
}
@media (prefers-reduced-motion: no-preference) {
	@keyframes et-rib-draw { to { stroke-dashoffset: 0; } }
	@keyframes et-orb-pop { to { opacity: 1; transform: scale(1); } }
	@keyframes et-rise { to { opacity: 1; transform: none; } }
	@keyframes et-spark-turn { 50% { transform: rotate(90deg) scale(1.12); } 100% { transform: rotate(180deg) scale(1); } }
}

/* =====================================================================
 * 2. search panels: the Assess search card
 * ===================================================================== */
body.sh-et-look.sh-shell .sxl-main > .sxl-search,
body.sh-et-look.sh-shell .sxl-layout .sxl-search:first-of-type,
body.sh-et-look.sh-shell main > .sxl-wrap > .sxl-search {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 18px;
	margin: 0 0 18px !important;
	padding: clamp(20px, 2.4vw, 28px) !important;
	border: 1px solid var(--et-line-soft) !important;
	border-radius: 26px !important;
	background: #fff !important;
	box-shadow: 0 30px 60px -46px rgba(18, 44, 58, .55) !important;
}
body.sh-et-look main .sxl-search :is(.sxl-field > span, legend, label > span:first-child) {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	color: var(--et-muted) !important;
	font: 800 12px/1.2 var(--et-text) !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
}
body.sh-et-look main .sxl-search .sxl-field { display: grid; flex: 0 1 220px; margin: 0; }
body.sh-et-look main .sxl-search .sxl-search-field { flex: 1 1 320px; }
body.sh-et-look main .sxl-search :is(input[type="search"], input[type="text"], select) {
	width: 100%;
	min-height: 54px;
	border-radius: 999px !important;
	box-shadow: 0 10px 24px -22px rgba(18, 44, 58, .6) !important;
}
body.sh-et-look main .sxl-search :is(input[type="search"], input[type="text"]):focus,
body.sh-et-look main .sxl-search select:focus { border-color: var(--et-teal) !important; }
body.sh-et-look main .sxl-search select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122c3a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 18px 18px !important;
}
body.sh-et-look .et-has-search-i { position: relative; }
body.sh-et-look .et-search-i { position: absolute; left: 18px; bottom: 17px; width: 20px !important; height: 20px !important; color: var(--et-muted); pointer-events: none; z-index: 1; }
body.sh-et-look main .et-has-search-i input { padding-left: 48px !important; }
body.sh-et-look main .sxl-search button[type="submit"] { min-height: 54px; padding: 0 28px; }
body.sh-et-look main .sxl-search button[type="submit"]::after {
	content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--et-arrow) center / contain no-repeat; mask: var(--et-arrow) center / contain no-repeat;
}
/* equipment chips: one pill each (the label and its span were both drawn, a doubled border), a real checked state */
body.sh-et-look main .sh-cf-equipment { flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
body.sh-et-look main .sh-cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.sh-et-look main label.sh-cf-chip { position: relative; display: inline-flex; min-height: 0; margin: 0; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; }
body.sh-et-look main label.sh-cf-chip > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.sh-et-look main label.sh-cf-chip > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 42px;
	padding: 0 16px;
	border: 1.5px solid var(--et-line) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--et-ink) !important;
	font: 650 14.5px/1 var(--et-text) !important;
	box-shadow: none !important;
	transition: background .16s var(--et-ease), border-color .16s var(--et-ease), color .16s var(--et-ease);
}
body.sh-et-look main label.sh-cf-chip:hover > span { border-color: var(--et-pillar) !important; background: var(--et-pillar-wash) !important; }
body.sh-et-look main label.sh-cf-chip > input:checked + span { border-color: var(--et-teal) !important; background: var(--et-teal) !important; color: #fff !important; }
body.sh-et-look main label.sh-cf-chip > input:checked + span::before {
	content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--et-tick) center / contain no-repeat; mask: var(--et-tick) center / contain no-repeat;
}
body.sh-et-look main label.sh-cf-chip > input:focus-visible + span { outline: 2px solid var(--et-ink); outline-offset: 3px; }
body.sh-et-look main label.sh-cf-chip:has(input:checked) { background: none !important; }
/* the hint under the form and the clear link */
body.sh-et-look main .sxl-main > .sxl-search + p { margin: 0 0 10px; max-width: 80ch; color: var(--et-muted); font-size: 14.5px; line-height: 1.55; }

/* results count: a quiet chip with a pillar dot. Only the count line: .sxl-results is the hubs' whole results wrapper
   (count + grid + pagination), and styling it as a chip squeezed the /exercises/ grid into narrow columns (11 Oct). */
body.sh-et-look main .sxl-result-line { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 14px; padding: 6px 14px; border-radius: 999px; background: var(--et-pillar-wash); color: var(--et-ink) !important; font: 700 14px/1.2 var(--et-text) !important; }
body.sh-et-look main .sxl-result-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--et-pillar); }

/* =====================================================================
 * 3. cards: the Assess directory card (icon tile, title, facts, arrow)
 * ===================================================================== */
body.sh-et-look .sxl-grid { gap: clamp(14px, 1.6vw, 20px) !important; }
body.sh-et-look.sh-shell .sxl-card {
	border: 1px solid var(--et-line-soft) !important;
	border-radius: 22px !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(18, 44, 58, .04), 0 14px 30px -26px rgba(18, 44, 58, .45) !important;
	transition: transform .22s var(--et-ease), box-shadow .22s var(--et-ease), border-color .22s var(--et-ease) !important;
}
body.sh-et-look.sh-shell .sxl-card::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--et-rib-a), var(--et-rib-b) 55%, var(--et-rib-c));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--et-ease);
}
body.sh-et-look.sh-shell .sxl-card:hover { transform: translateY(-4px) !important; border-color: var(--et-line) !important; box-shadow: 0 30px 50px -34px rgba(18, 44, 58, .55) !important; }
body.sh-et-look.sh-shell .sxl-card:hover::before { transform: scaleX(1); }
body.sh-et-look.sh-shell .sxl-card > a { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
body.sh-et-look.sh-shell .sxl-card.et-card--icon > a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; padding: 20px 20px 22px; align-content: start; }
body.sh-et-look.sh-shell .sxl-card.et-card--icon .sxl-card-body { padding: 0 26px 0 0 !important; }
/* a hub with a sidebar (/food/) leaves each card about 225px wide: there the icon sits above the text, not beside it,
   so names no longer wrap one word per line (11 Oct). The libraries without a sidebar keep the side-by-side card. */
body.sh-et-look.sh-shell .sxl-layout .sxl-card.et-card--icon > a { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
body.sh-et-look.sh-shell .sxl-layout .sxl-card.et-card--icon .sxl-card-body { padding: 0 !important; }
body.sh-et-look .et-card-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: var(--et-pillar-soft);
	color: var(--et-pillar-ink);
	transition: background .22s var(--et-ease), color .22s var(--et-ease), transform .22s var(--et-spring);
}
body.sh-et-look .et-card-icon .et-i { width: 25px; height: 25px; }
body.sh-et-look.sh-shell .sxl-card:hover .et-card-icon { background: linear-gradient(145deg, var(--et-orb-a), var(--et-orb-b)); color: #fff; transform: rotate(-6deg) scale(1.05); }
body.sh-et-look .et-card-go {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--et-pillar-wash);
	color: var(--et-pillar-ink);
	transition: transform .22s var(--et-ease), background .22s var(--et-ease), color .22s var(--et-ease);
}
body.sh-et-look .et-card-go .et-i { width: 16px; height: 16px; }
body.sh-et-look.sh-shell .sxl-card:hover .et-card-go { transform: translateX(3px); background: var(--et-teal); color: #fff; }
body.sh-et-look.sh-shell .sxl-card-body { gap: 7px !important; padding: 18px 20px 22px !important; }
body.sh-et-look.sh-shell .sxl-card-body > strong { padding-right: 30px; color: var(--et-ink); font: 750 1.08rem/1.28 var(--et-display); letter-spacing: -0.01em; }
body.sh-et-look.sh-shell .sxl-card .sxl-card-kicker { color: var(--et-pillar-ink); font-size: 11.5px !important; letter-spacing: .12em !important; }
body.sh-et-look.sh-shell .sxl-card .sxl-card-kicker::before { content: none !important; }
body.sh-et-look.sh-shell .sxl-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; padding-right: 36px; border: 0 !important; }
/* card facts are a checklist (owner rule: facts as checklists, never pills): a pillar tick before each, no fill */
body.sh-et-look.sh-shell :is(.sxl-card-meta, .sxl-levels) { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; padding: 0 36px 0 0; border: 0 !important; background: none !important; }
body.sh-et-look.sh-shell :is(.sxl-card-meta > span, .sxl-levels > em) {
	display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
	color: var(--et-copy) !important; font: 600 13.5px/1.35 var(--et-text) !important; font-style: normal !important;
}
body.sh-et-look.sh-shell :is(.sxl-card-meta > span, .sxl-levels > em)::before {
	content: ""; flex: none; width: 14px; height: 14px; background: var(--et-pillar); -webkit-mask: var(--et-tick) center / contain no-repeat; mask: var(--et-tick) center / contain no-repeat;
}
/* media cards (exercises): the picture inset, rounded, with a soft zoom */
body.sh-et-look.sh-shell .sxl-card-media { display: block; margin: 8px 8px 0; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, var(--et-pillar-soft), #fff 70%); }
body.sh-et-look.sh-shell .sxl-card-media img { transition: transform .5s var(--et-ease); }
body.sh-et-look.sh-shell .sxl-card:hover .sxl-card-media img { transform: scale(1.04); }

/* arrival: sections and cards rise in as they reach the screen (only with motion allowed and JavaScript running) */
@media (prefers-reduced-motion: no-preference) {
body.sh-et-look.et-motion .et-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--et-ease), transform .6s var(--et-ease); transition-delay: calc(var(--et-i, 0) * 70ms); }
body.sh-et-look.et-motion .et-reveal.et-in { opacity: 1; transform: none; }
body.sh-et-look.et-motion.sh-shell .sxl-card.et-reveal.et-in:hover { transform: translateY(-4px) !important; transition-delay: 0s; }
}

/* =====================================================================
 * 4. sections, sidebar, pagination: the Assess hub's rhythm
 * ===================================================================== */
body.sh-et-look .sxl-section-head :is(h2, h3), body.sh-et-look .sxl-section > h2 {
	font: 800 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.05 var(--et-display) !important;
	letter-spacing: -0.03em !important;
}
body.sh-et-look.sh-shell :is(.sxl-side-box, .rep-page-side-box, .rrc-page-side-box) {
	border-radius: 24px !important;
	background: #fff !important;
	box-shadow: 0 24px 48px -40px rgba(18, 44, 58, .5) !important;
}
body.sh-et-look .sxl-pagination :is(a, button, span) { min-width: 46px; min-height: 46px; border-radius: 999px !important; }
body.sh-et-look .sxl-pagination [aria-current] { display: inline-grid; place-items: center; background: var(--et-teal); color: #fff; }

/* =====================================================================
 * 5. smaller screens
 * ===================================================================== */
@media (max-width: 1023px) {
	body.sh-et-look.sh-shell .et-hero--panel { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; }
	body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) { justify-self: start; width: min(100%, 520px); }
	body.sh-et-look.sh-shell .et-hero--solo { padding-right: 0 !important; min-height: 0; }
	body.sh-et-look .et-hero-art { display: none; }
}
@media (max-width: 767px) {
	body.sh-et-look.sh-shell .et-hero { padding: 28px 0 32px !important; }
	body.sh-et-look.sh-shell main .et-hero h1 { font-size: clamp(2.3rem, 1.4rem + 5vw, 2.9rem) !important; }
	body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) { padding: 24px 20px 20px !important; border-radius: 22px !important; }
	body.sh-et-look .et-panel-badge { width: 44px; height: 44px; }
	body.sh-et-look main .sxl-search .sxl-field { flex: 1 1 100%; }
	body.sh-et-look main .sxl-search button[type="submit"] { width: 100%; }
	body.sh-et-look main label.sh-cf-chip > span { min-height: 40px; padding: 0 14px; font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
	body.sh-et-look .et-reveal { opacity: 1 !important; transform: none !important; }
	body.sh-et-look .et-rib-dot { display: none; }
	body.sh-et-look.sh-shell .sxl-card, body.sh-et-look .et-card-icon, body.sh-et-look .et-card-go, body.sh-et-look.sh-shell .sxl-card-media img { transition: none !important; }
}

/* =====================================================================
 * 6. B4 corrections after the first render
 * ===================================================================== */
/* the band starts right under the header (no white strip) when the hero opens the page */
body.sh-et-look :is(.sxl-wrap, .rep-page, .rrc-page):has(> .et-hero:first-child) { margin-top: 0 !important; }
/* the ribbon fills its box; the stroke keeps its width at any size */
body.sh-et-look .et-rib { inset: 0; width: 100%; height: 100%; }
body.sh-et-look .et-rib path { vector-effect: non-scaling-stroke; }
body.sh-et-look .et-rib-path { stroke-width: 26; }
body.sh-et-look .et-rib-shadow { stroke-width: 26; }
body.sh-et-look .et-rib-sheen { stroke-width: 6; }
body.sh-et-look .et-hero-art { right: 0; width: 50%; }
body.sh-et-look .et-hero--solo .et-hero-art { width: 44%; }
/* orbs sit on the line (centred on path points of the 600 x 460 box) */
body.sh-et-look .et-orb { translate: -50% -50%; }
body.sh-et-look .et-hero .et-orb--main { left: 7%; top: 50%; right: auto; bottom: auto; }
body.sh-et-look .et-hero .et-orb--assess { left: 48%; top: 96%; right: auto; bottom: auto; }
body.sh-et-look .et-hero .et-orb--other { left: 97%; top: 88%; right: auto; bottom: auto; }
body.sh-et-look .et-hero .et-orb--spark { left: 96%; top: 8%; right: auto; bottom: auto; }
/* the card leaves room for the line around it */
body.sh-et-look.sh-shell .et-hero :is(.sxl-hero-panel, .rep-page-hero-card, .rrc-page-hero-card) { width: min(100%, 380px); margin-right: 5%; }
/* the card's icon badge (et.css strips the card's first span; the badge is that span now) */
body.sh-et-look.sh-shell .et-hero .et-panel-badge {
	display: grid !important;
	width: 52px !important;
	height: 52px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: linear-gradient(145deg, var(--et-orb-a), var(--et-orb-b)) !important;
	color: #fff !important;
}
/* "Clear filters": a small ghost chip with a cross, not a loose blue link */
body.sh-et-look main .sxl-main > p > a:only-child {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
	border: 1.5px solid var(--et-line); border-radius: 999px; background: #fff;
	color: var(--et-ink) !important; font: 700 14px/1 var(--et-text); text-decoration: none !important;
}
body.sh-et-look main .sxl-main > p > a:only-child::before {
	content: ""; width: 14px; height: 14px; background: currentColor;
	-webkit-mask: 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.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.sh-et-look main .sxl-main > p > a:only-child:hover { border-color: var(--et-teal); background: var(--et-sky-soft); }
/* the creators' card label is an eyebrow (workouts.css draws it as a sky pill) and its copy is regular weight */
body.sh-et-look.sh-shell .et-hero :is(.rrc-page-hero-card, .rep-page-hero-card) :is(.rrc-page-kicker, .rep-page-kicker),
body.sh-et-look.sh-shell .et-hero :is(.rrc-page-hero-card, .rep-page-hero-card) > span:not(.et-panel-badge) {
	padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
	color: var(--et-pillar-ink) !important; font: 800 12px/1.2 var(--et-text) !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
body.sh-et-look.sh-shell .et-hero :is(.rrc-page-hero-card, .rep-page-hero-card) p { font-weight: 400 !important; }
body.sh-et-look.sh-shell .et-hero :is(.rrc-page-hero, .rep-page-hero) > div:first-child > p { font-weight: 400 !important; }