/*
 * Skidmore's TT5 — custom.css (G1 foundation)
 *
 * Scope: design token CSS variables + font enforcement safety net only.
 * Motion (Lenis, scroll progress, transparent header), header grid, button
 * variants, and section styles land in G2+ per STGN_ADOPTION_DECISIONS.md.
 */

:root {
	--skid-surface: #f7f4ef;
	--skid-ink: #1a1a1a;
	--skid-ink-brown: #463c36;
	--skid-muted: #6b6560;
	--skid-wax: #945a4d;
	--skid-honey: #c8922a;
	--skid-gold: #ffcb69;
	--skid-bloom: #c794c1;
	--skid-trust: #f0ebe3;
	--skid-sage: #5e774a;
	--skid-white: #ffffff;

	/* Q3 LOCKED preset 3a — Cormorant Garamond + Barlow (Jimmy interim; Susan may override). */
	--skid-font-body: "Barlow", system-ui, sans-serif;
	--skid-font-heading: "Cormorant Garamond", Georgia, serif;

	/*
	 * Woo header icons (account + mini-cart) — palette presets.
	 * Default = light surface (Q2 locked). Dark-surface + scheme hooks below.
	 * Full dark-mode page palette is deferred (STGN Q2); scheme classes are the switch.
	 */
	color-scheme: light;
	--skid-woo-icon: var(--skid-ink);
	--skid-woo-icon-hover: var(--skid-honey);
	--skid-woo-icon-on-dark: var(--skid-white);
	--skid-woo-icon-on-dark-hover: var(--skid-gold);
}

/*
 * Font enforcement (dual-load half of wordpress_fse_tt5.mdc Rule 1).
 * Replace stacks with the locked Q3 pair; keep !important to defeat TT5 fallbacks.
 */
body,
p,
.wp-block-paragraph {
	font-family: var(--skid-font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	font-family: var(--skid-font-heading) !important;
}

body {
	background-color: var(--skid-surface);
	color: var(--skid-ink);
}

/* -------------------------------------------------------------------------
 * Floor 5 — homepage luxury + Gishty primary CTA (Q5 interim 5a)
 * ------------------------------------------------------------------------- */

/* Transparent / fixed header (Nat tnt-header transfer → skid-*) */
body.skid-is-front-page,
body.skid-has-transparent-header {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5.5rem);
}

body.skid-has-transparent-header header.wp-block-template-part.skid-header-float {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	z-index: 20;
	background: transparent;
	border-bottom: 1px solid transparent;
	padding: 0.75rem 0 1rem;
}

body.skid-has-transparent-header header.skid-header-float .skid-header-nav a,
body.skid-has-transparent-header header.skid-header-float .skid-header-nav .wp-block-navigation-item__content,
body.skid-has-transparent-header header.skid-header-float .skid-header-phone,
body.skid-has-transparent-header header.skid-header-float .skid-header-phone a,
body.skid-has-transparent-header header.skid-header-float .skid-call-whisper,
body.skid-has-transparent-header header.skid-header-float .skid-call-whisper a {
	color: var(--skid-white) !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Transparent header = dark film behind chrome → light Woo icons */
body.skid-has-transparent-header header.skid-header-float {
	--skid-woo-icon: var(--skid-woo-icon-on-dark);
	--skid-woo-icon-hover: var(--skid-woo-icon-on-dark-hover);
}

body.skid-is-inner-page:not(.skid-has-transparent-header) {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 5.5rem);
}

/* Two-tier inner-page header: utility strip over nav band.
 *
 * The palette is five tokens so a scheme can be swapped by redefining them
 * rather than rewriting rules — that is what the staging scheme picker
 * (mu-plugins/skidmores-header-scheme-lab.php) overrides. Defaults are I4 Sage.
 */
body.skid-is-inner-page:not(.skid-has-transparent-header) header.wp-block-template-part.skid-header-float {
	--skid-hdr-strip-bg: var(--skid-sage);
	--skid-hdr-strip-ink: var(--skid-surface);
	--skid-hdr-nav-bg: color-mix(in srgb, var(--skid-sage) 16%, var(--skid-surface));
	--skid-hdr-nav-ink: var(--skid-ink);
	--skid-hdr-nav-accent: var(--skid-honey);

	position: relative;
	z-index: 20;
	background: var(--skid-hdr-nav-bg);
	border-bottom: 1px solid color-mix(in srgb, var(--skid-hdr-strip-bg) 45%, transparent);
	padding: 0 0 1rem;

	/* Account/cart sit on the strip, so the icons follow strip ink, not nav ink. */
	--skid-woo-icon: var(--skid-hdr-strip-ink);
	--skid-woo-icon-hover: var(--skid-hdr-nav-accent);
}

/* Strip spans the header, so it drops the content-column cap and reaches back
   through .skid-header-inner's padding rather than using 100vw (scrollbar). */
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-call-and-woo {
	max-width: none;
	margin-bottom: 0.9rem;
	padding-block: 0.4rem;
}

body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-call-and-woo::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: calc(-1 * clamp(1rem, 3vw, 2.5rem));
	right: calc(-1 * clamp(1rem, 3vw, 2.5rem));
	background: var(--skid-hdr-strip-bg);
	z-index: 0;
}

body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-call-whisper {
	position: relative;
	z-index: 1;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

/* Strip tier */
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-call-whisper,
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-call-whisper a,
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-header-phone,
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-header-phone a {
	color: var(--skid-hdr-strip-ink) !important;
}

/* Nav tier */
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-header-nav a,
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-header-nav .wp-block-navigation-item__content {
	color: var(--skid-hdr-nav-ink) !important;
}

/* Shop is the one link we want people to take. */
body.skid-is-inner-page:not(.skid-has-transparent-header) header.skid-header-float .skid-header-nav a[href*="/store/"] {
	color: var(--skid-hdr-nav-accent) !important;
}

header.wp-block-template-part .skid-header-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.skid-header-whisper {
	margin-bottom: 0.35rem;
}

.skid-header-phone {
	margin: 0;
	font-family: var(--skid-font-body);
	letter-spacing: 0.02em;
}

.skid-header-phone a {
	text-decoration: none;
}

/* Call + Woo account/minicart top bar (spike → future real header)
   Width follows theme layout contentSize (same column as post body). */
.skid-call-and-woo {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1140px);
	margin-inline: auto;
	margin-bottom: 0.35rem;
	min-height: 1.5rem;
}

.skid-call-whisper {
	margin: 0;
	font-family: var(--skid-font-body);
	letter-spacing: 0.02em;
	color: inherit;
}

.skid-call-whisper a {
	text-decoration: none;
	color: inherit;
}

.skid-call-and-woo .woo-account-minicart {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
	z-index: 2;
	/* Out of flow — keeps .skid-call-whisper optically centered in the content column */
	margin: 0;
	padding: 0;
	/* Block-level icon color from palette presets (context / scheme flip the vars) */
	color: var(--skid-woo-icon);
}

/*
 * Woo Blocks account + mini-cart icons — currentColor SVGs.
 * Force token color so Woo `color: inherit` cannot wash them out.
 */
.woo-account-minicart .wp-block-woocommerce-customer-account,
.woo-account-minicart .wc-block-mini-cart,
.woo-account-minicart .wc-block-customer-account__link,
.woo-account-minicart .wc-block-mini-cart__button {
	color: var(--skid-woo-icon) !important;
	line-height: 0;
}

.woo-account-minicart .wc-block-customer-account__link,
.woo-account-minicart .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	text-decoration: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.woo-account-minicart .wc-block-customer-account__link:hover,
.woo-account-minicart .wc-block-customer-account__link:focus-visible,
.woo-account-minicart .wc-block-mini-cart__button:hover,
.woo-account-minicart .wc-block-mini-cart__button:focus-visible {
	color: var(--skid-woo-icon-hover) !important;
}

.woo-account-minicart svg.icon,
.woo-account-minicart .wc-block-mini-cart__icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
	color: inherit;
}

/* Local surface context (sections / covers) — prefer these over OS scheme alone */
.skid-on-dark,
.skid-on-dark .woo-account-minicart,
.is-dark .woo-account-minicart {
	--skid-woo-icon: var(--skid-woo-icon-on-dark);
	--skid-woo-icon-hover: var(--skid-woo-icon-on-dark-hover);
}

.skid-on-light,
.skid-on-light .woo-account-minicart {
	--skid-woo-icon: var(--skid-ink);
	--skid-woo-icon-hover: var(--skid-honey);
}

/*
 * Window / theme scheme — only when explicitly enabled.
 * Dark page palette is deferred (STGN Q2); do not flip icons on prefers-color-scheme
 * while the site surface stays light (would make icons vanish on cream).
 * When dark mode ships: set html[data-skid-scheme="dark"] or body.skid-scheme-dark,
 * or html.skid-scheme-auto + prefers-color-scheme: dark.
 */
html[data-skid-scheme="dark"],
body.skid-scheme-dark {
	color-scheme: dark;
	--skid-woo-icon: var(--skid-woo-icon-on-dark);
	--skid-woo-icon-hover: var(--skid-woo-icon-on-dark-hover);
}

@media (prefers-color-scheme: dark) {
	html.skid-scheme-auto {
		color-scheme: dark;
		--skid-woo-icon: var(--skid-woo-icon-on-dark);
		--skid-woo-icon-hover: var(--skid-woo-icon-on-dark-hover);
	}
}

/* Option 2: one Navigation with Site Logo as center inner block */
.skid-header-row,
.skid-header-row.is-layout-flow {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 85px;
}

.skid-header-nav {
	width: 100%;
}

.skid-header-nav .wp-block-navigation__container {
	display: flex !important;
	align-items: center !important;
	justify-content: center;
	flex-wrap: nowrap;
	column-gap: 1.35rem;
	min-height: 85px;
	width: 100%;
}

.skid-header-nav .wp-block-navigation-item,
.skid-header-nav .wp-block-site-logo {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
}

.skid-header-nav a,
.skid-header-nav .wp-block-navigation-item__content {
	font-family: var(--skid-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.skid-header-nav a:hover,
.skid-header-nav a:focus-visible,
.skid-header-nav .wp-block-navigation-item__content:hover,
.skid-header-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--skid-gold) !important;
}

/* Reserved logo box — 0 CLS (1.25× over 214×68; Susan bee/purple bump) */
.skid-header-logo,
.skid-header-logo .custom-logo-link,
.skid-header-logo img {
	display: block;
	width: 268px;
	height: 85px;
	max-width: 268px;
	object-fit: contain;
	line-height: 0;
}

.skid-header-logo .custom-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
}

/* Footer logo (placeholder path still used) */
.skid-header-logo-link {
	display: block;
	line-height: 0;
	text-decoration: none;
	color: inherit;
}

.skid-footer-logo-img {
	max-height: 65px;
	width: auto;
	height: auto;
	display: block;
}

.skid-header-logo-text {
	font-family: var(--skid-font-heading);
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.1;
}

@media (max-width: 781px) {
	.skid-header-nav .wp-block-navigation-link {
		display: none !important;
	}

	.skid-header-nav .wp-block-navigation__container {
		justify-content: center;
	}
}

.skid-hero-stage,
.skid-hero-cover {
	margin: 0;
}

.skid-hero-cover .wp-block-cover__video-background {
	object-fit: cover;
}

/* During-dev (staging): corner play/pause — autoplay stripped server-side */
.skid-hero-video-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 5;
	margin: 0;
	padding: 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--skid-white) 55%, transparent);
	border-radius: 2px;
	background: color-mix(in srgb, var(--skid-ink) 72%, transparent);
	color: var(--skid-white);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.skid-hero-video-toggle:hover,
.skid-hero-video-toggle:focus-visible {
	background: color-mix(in srgb, var(--skid-ink) 88%, transparent);
	border-color: var(--skid-honey);
	outline: none;
}

.skid-hero-video-toggle[aria-pressed='true'] {
	border-color: var(--skid-honey);
	color: var(--skid-honey);
}

.skid-hero-title {
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-wrap: balance;
}

.skid-hero-sub {
	opacity: 0.92;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

.skid-section-title {
	line-height: 1.1;
	text-wrap: balance;
}

.skid-section-lead {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

.skid-trust-strip__cols,
.skid-badge-row__grid {
	align-items: center;
}

.skid-badge {
	border-top: 1px solid color-mix(in srgb, var(--skid-muted) 25%, transparent);
	padding-top: 0.75rem;
	margin: 0;
}

.skid-kit-card__inner,
.skid-line-door__inner {
	height: 100%;
	border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 12%, transparent);
}

.skid-kit-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.35rem;
}

.skid-line-door__inner a {
	text-decoration: none;
	color: inherit;
}

.skid-line-door__inner a:hover {
	color: var(--skid-wax);
}

.skid-proof-quote {
	border-left: 3px solid var(--skid-honey);
	padding-left: 1.25rem;
	margin: 1.5rem auto 0;
	max-width: 40rem;
}

.skid-proof-quote cite {
	font-family: var(--skid-font-body);
	font-style: normal;
	font-size: 0.9rem;
	color: var(--skid-muted);
}

.skid-heritage-photo-slot,
.skid-media-slot {
	min-height: 16rem;
	position: relative;
	overflow: hidden;
	padding: 0 !important;
}

.skid-media-slot__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 16rem;
	object-fit: cover;
}

.skid-media-slot__overlay {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.55rem 0.75rem;
	background: color-mix(in srgb, var(--skid-ink) 72%, transparent);
	color: var(--skid-surface) !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 0.72rem !important;
	line-height: 1.35;
	border-left: 3px solid var(--skid-honey);
	text-align: left;
}

.skid-media-slot__overlay strong {
	display: block;
	color: var(--skid-gold);
	letter-spacing: 0.04em;
	margin-bottom: 0.15rem;
}

/* Nerdy / staging notices — unfinished content + site banner */
.skid-dev-notice,
.skid-proof-placeholder.skid-dev-notice,
.skidmores-staging-banner {
	box-sizing: border-box;
	max-width: 36rem;
	margin: 1rem 0 0 auto;
	padding: 0.65rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--skid-bloom) 45%, var(--skid-ink-brown));
	border-left: 4px solid var(--skid-bloom);
	background: color-mix(in srgb, var(--skid-trust) 85%, var(--skid-white));
	color: var(--skid-ink-brown) !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 0.75rem !important;
	line-height: 1.4;
	text-align: left !important;
	position: relative;
	z-index: 1;
}

.skid-dev-notice--center {
	margin-left: auto;
	margin-right: auto;
}

.skidmores-staging-banner,
.skidmores-staging-banner--footer {
	display: block !important;
	width: calc(100% - 2rem);
	max-width: 42rem;
	margin: 1.5rem auto 2rem !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 1 !important;
	pointer-events: none;
	float: none !important;
	inset: auto !important;
}

.skid-badge-row__grid .skid-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	border-top: none;
	padding-top: 0;
}

.skid-badge__icon {
	width: 2rem;
	height: 2rem;
	display: block;
	flex-shrink: 0;
	color: var(--skid-sage);
	object-fit: contain;
}

.skid-badge__icon--wax {
	color: var(--skid-wax);
}

.skid-badge__label {
	margin: 0;
}

.skid-education-teaser {
	border-top: 3px solid var(--skid-sage);
}

/* -------------------------------------------------------------------------
 * Footer — premium dark band (2026-08-04)
 * Ink ground + bloom→honey faded top stripe (Toby-style contrast bar, Skid colors)
 * ------------------------------------------------------------------------- */
.skid-site-footer {
	position: relative;
	background: var(--skid-ink, #1a1a1a) !important;
	color: color-mix(in srgb, var(--skid-surface) 88%, transparent);
	overflow: hidden;
}

.skid-site-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	background: linear-gradient(
		90deg,
		var(--skid-bloom, #c794c1) 0%,
		color-mix(in srgb, var(--skid-bloom) 55%, var(--skid-honey)) 42%,
		var(--skid-honey, #c8922a) 72%,
		var(--skid-gold, #ffcb69) 100%
	);
	opacity: 0.92;
	pointer-events: none;
}

.skid-site-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 5px;
	height: 28px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--skid-bloom, #c794c1) 22%, transparent) 0%,
		transparent 100%
	);
	pointer-events: none;
}

.skid-site-footer .skid-footer-inner {
	position: relative;
	z-index: 1;
}

.skid-footer-logo-wrap {
	margin-bottom: 1.15rem;
}

.skid-footer-eyebrow {
	margin: 0 0 0.65rem !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--skid-gold, #ffcb69) !important;
}

.skid-footer-blurb {
	max-width: 28rem;
	margin: 0 0 1.25rem !important;
	font-family: var(--skid-font-heading) !important;
	font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--skid-surface, #f7f4ef) !important;
}

.skid-footer-phone {
	margin: 0 0 0.35rem !important;
	font-family: var(--skid-font-body) !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	line-height: 1.35 !important;
}

.skid-footer-phone a {
	color: var(--skid-gold) !important;
	text-decoration: none;
}

.skid-footer-phone a:hover {
	color: var(--skid-honey) !important;
}

.skid-footer-phone-note {
	margin: 0 0 1.25rem !important;
	font-size: 0.8125rem !important;
	color: color-mix(in srgb, var(--skid-surface) 62%, transparent) !important;
}

.skid-footer-social {
	margin-top: 0.25rem !important;
	gap: 0.85rem !important;
}

.skid-footer-heading {
	margin: 0 0 1.1rem !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--skid-gold, #ffcb69) !important;
}

.skid-footer-links {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.skid-footer-links li {
	margin: 0;
	padding: 0;
}

.skid-footer-links a {
	font-family: var(--skid-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: color-mix(in srgb, var(--skid-surface) 82%, transparent) !important;
	transition: color 160ms ease;
}

.skid-footer-links a:hover {
	color: var(--skid-gold) !important;
}

.skid-footer-band--primary {
	margin-bottom: 0 !important;
	gap: 2.5rem !important;
}

.skid-footer-rule {
	margin: 2.75rem 0 1.5rem !important;
	border: 0 !important;
	height: 1px !important;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--skid-honey) 55%, transparent) 20%,
		color-mix(in srgb, var(--skid-bloom) 45%, transparent) 50%,
		color-mix(in srgb, var(--skid-honey) 55%, transparent) 80%,
		transparent 100%
	) !important;
	opacity: 1 !important;
}

.skid-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.skid-footer-copyright,
.skid-footer-made {
	margin: 0 !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--skid-surface) 48%, transparent) !important;
}

.skid-footer-made {
	font-style: italic;
	font-family: var(--skid-font-heading) !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--skid-gold) 70%, var(--skid-surface)) !important;
}

.skid-site-footer a {
	color: var(--skid-gold);
}

.skid-site-footer a:hover {
	color: var(--skid-honey);
}

@media (max-width: 781px) {
	.skid-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

.skid-faq-item {
	border-bottom: 1px solid color-mix(in srgb, var(--skid-ink-brown) 14%, transparent);
	padding: 0.85rem 0;
}

.skid-faq-item summary {
	cursor: pointer;
	font-family: var(--skid-font-body);
	font-weight: 600;
	color: var(--skid-ink-brown);
}

/* -------------------------------------------------------------------------
 * Buttons — LOCKED 2026-07-10 (button-lab → theme)
 * Outline hover parity 2026-07-12 — face presses; hollow ::after stays put
 * Normal (Fill) = .skid-btn--primary / is-style-skid-gishty
 * Outline       = .skid-btn--outline / is-style-skid-outline
 * Spec: docs/REDESIGN/design/INTERACTIONS_AND_MOTION.md · COMPONENTS.md
 * ------------------------------------------------------------------------- */

/* Normal (Fill) — honey face + solid ink-brown offset */
.skid-btn--primary .wp-block-button__link,
a.skid-btn--primary,
.wp-block-button.is-style-skid-gishty .wp-block-button__link,
.single_add_to_cart_button.button,
.woocommerce .single_add_to_cart_button,
button.single_add_to_cart_button {
	--skid-btn-face: var(--skid-honey);
	--skid-btn-ink: var(--skid-ink);
	--skid-btn-offset: var(--skid-ink-brown);
	--skid-btn-offset-shift: 4px;
	position: relative;
	display: inline-block;
	background: var(--skid-btn-face) !important;
	background-color: var(--skid-btn-face) !important;
	color: var(--skid-btn-ink) !important;
	border: 2px solid var(--skid-btn-offset) !important;
	border-radius: 0 !important;
	box-shadow: var(--skid-btn-offset-shift) var(--skid-btn-offset-shift) 0 0 var(--skid-btn-offset);
	transform: translate(0, 0);
	transition: transform 180ms ease-out, box-shadow 180ms ease-out;
	text-decoration: none;
	font-family: var(--skid-font-body) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 0.65rem 1.75rem !important;
	line-height: 1.2;
}

.skid-btn--primary .wp-block-button__link:hover,
.skid-btn--primary .wp-block-button__link:focus-visible,
a.skid-btn--primary:hover,
a.skid-btn--primary:focus-visible,
.wp-block-button.is-style-skid-gishty .wp-block-button__link:hover,
.wp-block-button.is-style-skid-gishty .wp-block-button__link:focus-visible,
.single_add_to_cart_button.button:hover,
.single_add_to_cart_button.button:focus-visible,
.woocommerce .single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 0 var(--skid-btn-offset);
}

.skid-btn--primary .wp-block-button__link:active,
a.skid-btn--primary:active,
.wp-block-button.is-style-skid-gishty .wp-block-button__link:active,
.single_add_to_cart_button.button:active,
button.single_add_to_cart_button:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 0 var(--skid-btn-offset);
}

.skid-btn--primary .wp-block-button__link:focus-visible,
a.skid-btn--primary:focus-visible,
.wp-block-button.is-style-skid-gishty .wp-block-button__link:focus-visible {
	outline: 2px solid var(--skid-gold);
	outline-offset: 4px;
}

.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.disabled,
button.single_add_to_cart_button:disabled {
	opacity: 0.55;
	transform: none !important;
	box-shadow: 4px 4px 0 0 var(--skid-btn-offset);
	cursor: not-allowed;
}

/*
 * Outline — opaque page-cream face + hollow offset on WRAPPER
 * (never z-index:-1 on the link — that punches through the face).
 */
.wp-block-button.skid-btn--outline,
.wp-block-button.is-style-skid-outline {
	position: relative;
	display: inline-block;
}

.wp-block-button.skid-btn--outline::after,
.wp-block-button.is-style-skid-outline::after {
	content: "";
	position: absolute;
	top: var(--skid-btn-offset-shift, 4px);
	left: var(--skid-btn-offset-shift, 4px);
	width: 100%;
	height: 100%;
	border: 2px solid var(--skid-ink-brown);
	background: transparent;
	box-sizing: border-box;
	pointer-events: none;
}

.skid-btn--outline .wp-block-button__link,
.wp-block-button.is-style-skid-outline .wp-block-button__link {
	--skid-btn-face: var(--skid-surface);
	--skid-btn-ink: var(--skid-ink);
	--skid-btn-offset: var(--skid-ink-brown);
	position: relative;
	z-index: 1;
	display: inline-block;
	background: var(--skid-btn-face) !important;
	background-color: var(--skid-btn-face) !important;
	color: var(--skid-btn-ink) !important;
	border: 2px solid var(--skid-btn-offset) !important;
	border-radius: 0 !important;
	box-shadow: none;
	transform: translate(0, 0);
	transition: transform 180ms ease-out;
	text-decoration: none;
	font-family: var(--skid-font-body) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	padding: 0.65rem 1.75rem !important;
	line-height: 1.2;
}

.wp-block-button.skid-btn--outline:hover .wp-block-button__link,
.wp-block-button.skid-btn--outline:focus-within .wp-block-button__link,
.wp-block-button.is-style-skid-outline:hover .wp-block-button__link,
.wp-block-button.is-style-skid-outline:focus-within .wp-block-button__link {
	transform: translate(3px, 3px);
}

.wp-block-button.skid-btn--outline:active .wp-block-button__link,
.wp-block-button.is-style-skid-outline:active .wp-block-button__link {
	transform: translate(4px, 4px);
}

.skid-btn--outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-skid-outline .wp-block-button__link:focus-visible {
	outline: 2px solid var(--skid-gold);
	outline-offset: 4px;
}

/* Legacy flat secondary / ghost — prefer Outline for new work */
.skid-btn--secondary .wp-block-button__link,
.skid-btn--ghost .wp-block-button__link {
	border-radius: 0 !important;
	border: 2px solid var(--skid-ink-brown) !important;
	background: transparent !important;
	color: var(--skid-ink) !important;
	box-shadow: none;
}

.skid-btn--secondary .wp-block-button__link:hover,
.skid-btn--ghost .wp-block-button__link:hover {
	background: var(--skid-trust) !important;
}

/* -------------------------------------------------------------------------
 * Store-wide Woo breadcrumb bar (shop, PDP, category) — see WOO_BREADCRUMB_BAR.md
 * ------------------------------------------------------------------------- */

/* Woo breadcrumbs block defaults to alignwide (auto margins) — shell uses justifyContent:left; bar hugs copy. */
body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .wc-block-breadcrumbs {
	display: flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	margin-inline: 0;
	padding-block: 6px;
	padding-inline: 0.75rem;
	text-align: start;
	background-color: color-mix(in srgb, var(--wp--preset--color--skid-gold, var(--skid-gold)) 50%, transparent);
	transition: background-color 0.2s ease;
}

body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .wc-block-breadcrumbs:hover {
	background-color: var(--wp--preset--color--skid-gold, var(--skid-gold));
}

/* Empty store notices — hide even when breadcrumbs are OFF */
.skid-archive-product > .wc-block-store-notices:has(.woocommerce-notices-wrapper:empty),
.skid-single-product > .wc-block-store-notices:has(.woocommerce-notices-wrapper:empty),
.skid-taxonomy-product-cat > .wc-block-store-notices:has(.woocommerce-notices-wrapper:empty),
body.skid-has-woo-breadcrumbs main.skid-site-main > .wc-block-store-notices:has(.woocommerce-notices-wrapper:empty) {
	display: none;
}

.skid-archive-product > .wc-block-store-notices,
.skid-single-product > .wc-block-store-notices,
.skid-taxonomy-product-cat > .wc-block-store-notices,
body.skid-has-woo-breadcrumbs main.skid-site-main > .wc-block-store-notices {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * Floor 10 — category magazine (T08 / P10–P13)
 * ------------------------------------------------------------------------- */

body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell nav.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-family: var(--skid-font-body, inherit);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--skid-ink, var(--skid-ink));
	text-transform: uppercase;
	letter-spacing: 1px;
}

body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .woocommerce-breadcrumb a {
	padding-inline-end: 0.75rem;
	color: inherit;
	text-decoration: none;
}

body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .woocommerce-breadcrumb a:hover,
body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .woocommerce-breadcrumb a:focus-visible {
	text-decoration: underline;
}

body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .skid-breadcrumb-sep {
	display: inline-block;
	padding-inline-end: 0.75rem;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	unicode-bidi: isolate;
}

body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .skid-breadcrumb-sep::before {
	content: '\203A';
}

:dir(rtl) body.skid-has-woo-breadcrumbs .skid-woo-breadcrumb-shell .skid-breadcrumb-sep::before {
	content: '\2039';
}

.skid-cat-hero-5050 {
	align-items: center;
}

.skid-cat-hero-photo-slot.skid-media-slot {
	min-height: 20rem;
}

.skid-cat-hero-photo-slot .skid-media-slot__img {
	min-height: 20rem;
}

.skid-cat-hero-5050__kicker {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.35rem;
}

.skid-cat-hero-5050__title {
	line-height: 1.08;
	text-wrap: balance;
}

.skid-featured-four__note,
.skid-full-grid__note {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	.skid-badge-row__grid,
	.skid-trust-strip__cols,
	.skid-kit-row__grid,
	.skid-line-doors,
	.skid-cat-hero-5050 {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skid-hero-cover .wp-block-cover__video-background {
		display: none;
	}

	.skid-hero-video-toggle {
		display: none;
	}

	.skid-btn--primary .wp-block-button__link,
	a.skid-btn--primary,
	.wp-block-button.is-style-skid-gishty .wp-block-button__link,
	.skid-btn--outline .wp-block-button__link,
	.wp-block-button.is-style-skid-outline .wp-block-button__link {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Header spikes (lab pages) — options 2 & 3
   Template: page-spike-lab (no site header/footer)
   ------------------------------------------------------------------------- */

.skid-spike-lab-note {
	padding-block: 1.25rem 0.5rem;
	color: var(--skid-muted, #6b6560);
}

.skid-spike-lab-body {
	padding-block: 2rem;
}

/* Shared: every interactive item vertically centered in the row */
.skid-spike-2-row,
.skid-spike-3-row {
	box-sizing: border-box;
	width: 100%;
	min-height: 64px;
	border-block: 1px solid rgba(26, 26, 26, 0.12);
	background: var(--skid-surface, #f7f4ef);
}

.skid-spike-2-nav .wp-block-navigation__container,
.skid-spike-3-nav .wp-block-navigation__container {
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap;
	min-height: 64px;
}

.skid-spike-2-nav .wp-block-navigation-item,
.skid-spike-3-nav .wp-block-navigation-item,
.skid-spike-2-nav .wp-block-site-logo,
.skid-spike-3-logo {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
}

.skid-spike-2-nav a,
.skid-spike-3-nav a {
	font-family: var(--skid-font-body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

/* Reserved logo box — 0 CLS (dims match Site Logo width attr) */
.skid-spike-2-logo,
.skid-spike-3-logo,
.skid-spike-2-logo .custom-logo-link,
.skid-spike-3-logo .custom-logo-link,
.skid-spike-2-logo img,
.skid-spike-3-logo img {
	display: block;
	width: 200px;
	height: 64px;
	max-width: 200px;
	object-fit: contain;
	line-height: 0;
}

.skid-spike-2-logo .custom-logo-link,
.skid-spike-3-logo .custom-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Option 2 — logo is a nav inner block; flex does the centering */
.skid-spike-2-row .skid-spike-2-nav {
	width: 100%;
}

.skid-spike-2-nav .wp-block-navigation__container {
	justify-content: center;
	column-gap: 1.35rem;
}

/* Option 3 — one nav (links) + sibling logo; shared grid row */
.skid-spike-3-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(0.5rem, 1.25vw, 1.25rem);
}

.skid-spike-3-nav {
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100%;
	min-width: 0;
	z-index: 1;
}

.skid-spike-3-logo {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	z-index: 2;
	pointer-events: auto;
}

/* 8 links: first 4 hug left of center slot, last 4 hug right */
.skid-spike-3-nav .wp-block-navigation__container {
	justify-content: center;
	width: 100%;
}

.skid-spike-3-nav .wp-block-navigation-item:nth-child(4) {
	margin-inline-end: calc(100px + 0.675rem);
}

.skid-spike-3-nav .wp-block-navigation-item:nth-child(5) {
	margin-inline-start: calc(100px + 0.675rem);
}

@media (max-width: 900px) {
	.skid-spike-2-nav .wp-block-navigation__container,
	.skid-spike-3-nav .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0.75rem;
	}

	.skid-spike-3-row {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 0.75rem;
	}

	.skid-spike-3-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.skid-spike-3-nav {
		grid-column: 1;
		grid-row: 2;
	}

	.skid-spike-3-nav .wp-block-navigation-item:nth-child(4),
	.skid-spike-3-nav .wp-block-navigation-item:nth-child(5) {
		margin-inline: 0;
	}
}

/* -------------------------------------------------------------------------
 * Heritage map cover — parchment story panel over 1883 post-route map
 * Pattern: pattern-heritage-mark-map-cover (parallax via Cover hasParallax)
 * ------------------------------------------------------------------------- */

.skid-heritage-cover {
	isolation: isolate;
}

.skid-heritage-cover .wp-block-cover__image-background.has-parallax {
	/* Slight warm paper feel; keep map detail for later true parallax JS */
	filter: sepia(0.12) contrast(1.02) brightness(0.96);
}

.skid-heritage-cover__panel {
	position: relative;
	z-index: 1;
	max-width: 34rem;
	margin-inline: 0;
	background:
		linear-gradient(
			165deg,
			color-mix(in srgb, var(--skid-surface) 94%, var(--skid-gold)) 0%,
			color-mix(in srgb, var(--skid-trust) 92%, var(--skid-surface)) 100%
		);
	border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 22%, transparent);
	box-shadow:
		0 0 0 6px color-mix(in srgb, var(--skid-surface) 35%, transparent),
		0 18px 48px color-mix(in srgb, var(--skid-ink-brown) 28%, transparent);
	backdrop-filter: blur(1.5px);
}

.skid-heritage-cover__panel::before {
	content: "";
	position: absolute;
	inset: 0.55rem;
	border: 1px solid color-mix(in srgb, var(--skid-honey) 45%, var(--skid-ink-brown));
	pointer-events: none;
	opacity: 0.55;
}

.skid-heritage-cover__eyebrow {
	margin: 0 0 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 500;
}

.skid-heritage-cover__title {
	margin-top: 0;
	margin-bottom: 0.85rem;
	line-height: 1.05;
}

.skid-heritage-cover__panel p {
	line-height: 1.55;
}

.skid-heritage-cover__panel a:not(.wp-element-button) {
	color: var(--skid-wax);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.skid-heritage-cover__panel a:not(.wp-element-button):hover {
	color: var(--skid-ink-brown);
}

.skid-heritage-cover__credit {
	margin: 1.25rem 0 0;
	max-width: 34rem;
	padding: 0.45rem 0.65rem;
	background: color-mix(in srgb, var(--skid-ink) 48%, transparent);
	color: color-mix(in srgb, var(--skid-surface) 92%, white) !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.72rem !important;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.skid-heritage-cover__credit a {
	color: var(--skid-gold) !important;
}

/* -------------------------------------------------------------------------
 * Contact — "Knock on the workshop door" (PG09)
 * Phone-first concierge hero + parchment contact cards + live Pacific hours.
 * Page content: content/pages/contact-us.html · JS: assets/js/contact-hours.js
 * ------------------------------------------------------------------------- */

/* Shared editorial atoms (contact-first; safe to reuse on later pages) */
.skid-eyebrow {
	margin: 0 0 0.6rem !important;
	font-family: var(--skid-font-body) !important;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.skid-rule-gold {
	width: 54px;
	max-width: 54px;
	height: 3px;
	margin: 1.15rem auto 0 !important;
	border: 0 !important;
	background: linear-gradient(90deg, var(--skid-honey), var(--skid-gold)) !important;
	opacity: 1 !important;
}

/* --- Hero ---------------------------------------------------------------- */

.skid-contact-hero {
	/* Clear the transparent header regardless of the preset padding in content */
	padding-top: clamp(7.5rem, 15vh, 11rem) !important;
	isolation: isolate;
}

.skid-contact-hero .wp-block-cover__image-background {
	filter: brightness(0.82) saturate(0.88);
}

/* Extra scrim so cream type stays readable over the light bee suit */
.skid-contact-hero .wp-block-cover__background {
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--skid-ink) 55%, transparent) 0%,
		color-mix(in srgb, var(--skid-ink) 20%, transparent) 45%,
		color-mix(in srgb, var(--skid-ink) 62%, transparent) 100%
	);
}

/* The shared .skid-eyebrow margin shorthand kills the constrained-layout
   auto margins, which pins centered eyebrows left of their column. */
.skid-eyebrow.has-text-align-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

.skid-contact-hero__title {
	margin-top: 0.35rem;
	margin-bottom: 0.9rem;
	line-height: 1.03;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.skid-contact-hero__lead {
	max-width: 34rem;
	margin-inline: auto;
	line-height: 1.5;
	opacity: 0.92;
}

/* The workshop line — the page's hero object */
.skid-line {
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	padding: clamp(1.5rem, 3vw, 2.25rem) 1.5rem clamp(1.25rem, 2.5vw, 1.75rem);
	max-width: 34rem;
	text-align: center;
	position: relative;
	border-top: 1px solid color-mix(in srgb, var(--skid-gold) 42%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--skid-gold) 42%, transparent);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--skid-ink) 30%, transparent),
		transparent
	);
	backdrop-filter: blur(2px);
}

.skid-line__label {
	margin: 0 0 0.5rem !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.6875rem !important;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--skid-gold) 88%, var(--skid-white)) !important;
}

.skid-line__number {
	display: inline-block;
	font-family: var(--skid-font-heading);
	font-size: clamp(2.35rem, 7vw, 4.25rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.005em;
	color: var(--skid-gold);
	text-decoration: none;
	background-image: linear-gradient(var(--skid-honey), var(--skid-honey));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size 280ms ease, color 200ms ease;
}

.skid-line__number:hover,
.skid-line__number:focus-visible {
	color: var(--skid-white);
	background-size: 100% 2px;
}

.skid-line__number:focus-visible {
	outline: 2px solid var(--skid-gold);
	outline-offset: 6px;
}

.skid-line__alt {
	margin: 0.5rem 0 0 !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.9375rem !important;
	letter-spacing: 0.03em;
	color: color-mix(in srgb, var(--skid-surface) 76%, transparent) !important;
}

.skid-line__alt a {
	color: inherit !important;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--skid-gold) 55%, transparent);
}

.skid-line__alt a:hover {
	color: var(--skid-gold) !important;
}

/* Live open/closed pill — JS adds .is-open / .is-closed (Pacific time) */
.skid-status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 1.1rem 0 0 !important;
	padding: 0.4rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--skid-surface) 26%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--skid-ink) 45%, transparent);
	font-family: var(--skid-font-body) !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--skid-surface) 88%, transparent) !important;
}

.skid-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--skid-surface) 55%, transparent);
}

.skid-status.is-open {
	border-color: color-mix(in srgb, var(--skid-sage) 70%, transparent);
	color: var(--skid-white) !important;
}

.skid-status.is-open .skid-status__dot {
	background: #7fc47f;
	box-shadow: 0 0 0 0 rgba(127, 196, 127, 0.65);
	animation: skid-pulse 2.4s ease-out infinite;
}

.skid-status.is-closed .skid-status__dot {
	background: var(--skid-gold);
	opacity: 0.75;
}

@keyframes skid-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(127, 196, 127, 0.6);
	}

	70% {
		box-shadow: 0 0 0 9px rgba(127, 196, 127, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(127, 196, 127, 0);
	}
}

/* --- Three doors (contact cards) ----------------------------------------- */

.skid-contact-cards .wp-block-column {
	display: flex;
}

.skid-contact-card {
	position: relative;
	width: 100%;
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--skid-white) 92%, var(--skid-gold)) 0%,
		color-mix(in srgb, var(--skid-trust) 94%, var(--skid-white)) 100%
	);
	border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 18%, transparent);
	box-shadow: 0 14px 34px color-mix(in srgb, var(--skid-ink-brown) 12%, transparent);
	transition: transform 240ms ease, box-shadow 240ms ease;
}

/* Deckled inner keyline — heritage panel vocabulary */
.skid-contact-card::before {
	content: "";
	position: absolute;
	inset: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--skid-honey) 38%, transparent);
	opacity: 0.6;
	pointer-events: none;
}

/* Honey cap rule */
.skid-contact-card::after {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--skid-honey), var(--skid-gold));
	pointer-events: none;
}

.skid-contact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 46px color-mix(in srgb, var(--skid-ink-brown) 20%, transparent);
}

.skid-contact-card__label {
	position: relative;
	margin: 0 0 0.75rem !important;
	font-family: var(--skid-font-body) !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.skid-contact-card__value {
	position: relative;
	margin: 0 0 0.85rem !important;
	font-family: var(--skid-font-heading) !important;
	font-size: clamp(1.5rem, 2.6vw, 1.95rem) !important;
	font-weight: 600;
	line-height: 1.22;
	color: var(--skid-ink-brown) !important;
	overflow-wrap: anywhere;
}

.skid-contact-card__value--email {
	font-size: clamp(1.15rem, 2vw, 1.45rem) !important;
}

.skid-contact-card__value--mail {
	font-size: clamp(1.25rem, 2.1vw, 1.55rem) !important;
}

.skid-contact-card__value a {
	color: inherit !important;
	text-decoration: none;
	border-bottom: 2px solid color-mix(in srgb, var(--skid-honey) 45%, transparent);
	transition: border-color 200ms ease, color 200ms ease;
}

.skid-contact-card__value a:hover,
.skid-contact-card__value a:focus-visible {
	color: var(--skid-wax) !important;
	border-bottom-color: var(--skid-honey);
}

.skid-contact-card__note {
	position: relative;
	margin: 0 !important;
	/* Match the hours note so every supporting line on the page reads the same */
	font-size: 0.9375rem !important;
	line-height: 1.55;
}

/*
 * Inline links inside body copy — the stock brick underline sits tight against
 * the text and reads cheap next to the serif. Gold hairline, dropped away.
 */
.skid-contact-card__note a,
.skid-week__note a {
	color: var(--skid-wax) !important;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--skid-gold) 62%, transparent);
	text-underline-offset: 0.28em;
	transition: text-decoration-color 160ms ease, color 160ms ease;
}

.skid-contact-card__note a:hover,
.skid-contact-card__note a:focus-visible,
.skid-week__note a:hover,
.skid-week__note a:focus-visible {
	color: var(--skid-ink-brown) !important;
	text-decoration-color: var(--skid-honey);
}

/* --- "Tell us what you need" tiles --------------------------------------- */

.skid-need-grid .wp-block-column {
	display: flex;
}

.skid-need-tile {
	position: relative;
	width: 100%;
	background: var(--skid-white);
	border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 12%, transparent);
	border-left: 3px solid color-mix(in srgb, var(--skid-honey) 55%, transparent);
	transition: transform 220ms ease, border-left-color 220ms ease, box-shadow 220ms ease;
}

.skid-need-tile:hover,
.skid-need-tile:focus-within {
	transform: translateY(-3px);
	border-left-color: var(--skid-honey);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--skid-ink-brown) 14%, transparent);
}

.skid-need-tile__title {
	margin: 0 0 0.55rem !important;
	line-height: 1.22;
	text-wrap: balance;
}

.skid-need-tile__title a {
	color: inherit !important;
	text-decoration: none;
}

/* Stretched link — whole tile is the target, one focusable element */
.skid-need-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.skid-need-tile__title a:focus-visible::after {
	outline: 2px solid var(--skid-honey);
	outline-offset: 3px;
}

/* The stretched ::after already rings the whole tile — drop the global link
   ring so keyboard focus is one clear rectangle, not two nested ones. */
.skid-need-tile__title a:focus-visible {
	outline: none;
}

.skid-need-tile:hover .skid-need-tile__title {
	color: var(--skid-wax) !important;
}

.skid-need-tile__note {
	margin: 0 !important;
	padding-right: 1.35rem;
	font-size: 0.9375rem !important;
	line-height: 1.5;
}

/* Corner chevron */
.skid-need-tile::after {
	content: "\203A";
	position: absolute;
	right: 1rem;
	bottom: 0.55rem;
	font-family: var(--skid-font-heading);
	font-size: 1.5rem;
	line-height: 1;
	color: color-mix(in srgb, var(--skid-honey) 70%, transparent);
	transition: transform 220ms ease, color 220ms ease;
}

.skid-need-tile:hover::after {
	transform: translateX(4px);
	color: var(--skid-honey);
}

/*
 * Button pairs — the Outline style throws a hollow offset 4px right/down, which
 * eats into the stock gap and reads as a collision. Buy that back.
 */
.skid-contact-hero .wp-block-buttons,
.skid-contact-outro .wp-block-buttons {
	gap: 1.5rem;
}

/* --- Workshop hours ------------------------------------------------------ */

.skid-contact-hours {
	position: relative;
	overflow: hidden;
}

/* Honeycomb whisper — beeswax, quietly */
.skid-contact-hours::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0 0 10v20l17.32 10L34.64 30V10Z' fill='none' stroke='%23c8922a' stroke-width='1.1'/%3E%3Cpath d='M17.32 40v20' fill='none' stroke='%23c8922a' stroke-width='1.1'/%3E%3C/svg%3E");
	background-size: 34.64px 60px;
	opacity: 0.07;
	pointer-events: none;
}

.skid-contact-hours > * {
	position: relative;
	z-index: 1;
}

.skid-week {
	margin: 1.75rem auto 0;
	max-width: 34rem;
	text-align: center;
}

.skid-week__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.skid-week__day {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.4rem;
	padding: 0.5rem 0.35rem;
	font-family: var(--skid-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 16%, transparent);
	background: var(--skid-white);
	color: var(--skid-muted);
}

.skid-week__day.is-open {
	border-color: color-mix(in srgb, var(--skid-honey) 55%, transparent);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--skid-gold) 40%, var(--skid-white)),
		color-mix(in srgb, var(--skid-gold) 18%, var(--skid-white))
	);
	color: var(--skid-ink-brown);
}

.skid-week__day.is-closed {
	opacity: 0.55;
}

/* JS marks today in Pacific time */
.skid-week__day.is-today {
	position: relative;
	border-color: var(--skid-ink-brown);
	box-shadow: 3px 3px 0 0 var(--skid-ink-brown);
}

.skid-week__hours {
	margin: 1.5rem 0 0 !important;
	font-family: var(--skid-font-heading) !important;
	font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
	font-weight: 600;
	line-height: 1.2;
	color: var(--skid-ink-brown) !important;
}

.skid-week__hours span {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--skid-font-body) !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--skid-muted) !important;
}

.skid-week__note {
	margin: 1.1rem 0 0 !important;
	font-family: var(--skid-font-body) !important;
	font-size: 0.9375rem !important;
	line-height: 1.55;
	color: var(--skid-muted) !important;
}

.skid-week__note a {
	color: var(--skid-wax) !important;
	text-underline-offset: 0.15em;
}

/* --- Closing split ------------------------------------------------------- */

/*
 * The tin shot is 4:3. Any full-bleed cover crop on a wide screen zooms it ~4x,
 * so the labels turn into wallpaper behind the type and no amount of dimming
 * saves it. Split the closer instead: ink panel for the words, photo at its own
 * proportion beside it.
 */
.skid-contact-close {
	gap: 0 !important;
	align-items: stretch;
	overflow: hidden;
	/* Root-padding-aware alignfull insets the whole block; a closer has to bleed. */
	padding: 0 !important;
}

.skid-contact-close .wp-block-column {
	min-width: 0;
}

.skid-contact-close__copy {
	position: relative;
	z-index: 2; /* keep the honey seam above the photo's ink feather */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Breathe with the viewport now that the block itself carries no gutter. */
	padding-left: clamp(1.5rem, 7vw, 9rem) !important;
	padding-right: clamp(1.5rem, 4vw, 4.5rem) !important;
}

/* Honey seam where the panel meets the photograph. */
.skid-contact-close__copy::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 3px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--skid-gold) 22%,
		var(--skid-honey) 50%,
		var(--skid-gold) 78%,
		transparent
	);
	opacity: 0.7;
}

.skid-contact-close__copy > * {
	max-width: 34rem;
}

/* Same gold tick the other sections open with, squared off for a left rail. */
.skid-contact-close .skid-eyebrow::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-bottom: 1.1rem;
	background: linear-gradient(90deg, var(--skid-honey), var(--skid-gold));
}

.skid-contact-close .skid-section-title {
	margin-top: 0.35rem;
	margin-bottom: 0;
	text-wrap: balance;
}

.skid-contact-close__lead {
	margin-top: 1.15rem;
	line-height: 1.62;
	color: color-mix(in srgb, var(--skid-surface) 82%, transparent) !important;
}

.skid-contact-close__media {
	position: relative;
	align-self: stretch;
}

.skid-contact-close__shot {
	margin: 0;
	height: 100%;
}

.skid-contact-close__shot img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 29rem;
	object-fit: cover;
	object-position: 50% 55%;
}

/* Ink feathered into the photo edge so the seam is a fade, not a butt joint. */
.skid-contact-close__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--skid-ink) 55%, transparent) 0%,
		transparent 22%
	);
}

/* --- Scroll reveal (JS adds .skid-reveal, then .is-visible) --------------- */

.skid-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 720ms ease, transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.skid-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.skid-reveal,
	.skid-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.skid-status.is-open .skid-status__dot {
		animation: none;
	}

	.skid-contact-card,
	.skid-need-tile,
	.skid-need-tile::after,
	.skid-line__number {
		transition: none;
	}
}

@media (max-width: 781px) {
	/*
	 * Phone header stacks the utility bar over the logo, so the stock hero pad
	 * dropped the eyebrow onto the beehive mark. Clear the whole lockup.
	 */
	.skid-contact-hero {
		padding-top: clamp(9rem, 22vh, 12rem) !important;
		min-height: auto !important;
	}

	/* iOS ignores fixed parallax — keep the cover as a scrollable background */
	.skid-contact-hero .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll !important;
	}

	/* Stacked: copy first, then the photo cropped to a short band. */
	.skid-contact-close__copy::after,
	.skid-contact-close__media::before {
		display: none;
	}

	.skid-contact-close__shot img {
		min-height: 0;
		height: 17rem;
	}

	.skid-contact-cards,
	.skid-need-grid {
		flex-direction: column;
	}

	.skid-week__day {
		min-width: 2.85rem;
	}

	/* Ragged centred pills read cheap when stacked — square them off. */
	.skid-contact-hero .wp-block-buttons {
		gap: 0.9rem;
	}

	.skid-contact-hero .wp-block-button,
	.skid-contact-close .wp-block-button {
		width: 100%;
	}

	.skid-contact-hero .wp-block-button__link,
	.skid-contact-close .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	/*
	 * Seven fixed columns instead of wrapping flex — at phone widths the pills
	 * were spilling Sunday onto its own row, which read as a broken calendar.
	 */
	.skid-week__row {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 0.3rem;
	}

	.skid-week__day {
		min-width: 0;
		padding: 0.5rem 0.15rem;
		font-size: 0.625rem;
		letter-spacing: 0.02em;
	}
}

@media (max-width: 781px) {
	.skid-heritage-cover {
		min-height: auto !important;
	}

	.skid-heritage-cover__panel {
		max-width: 100%;
		box-shadow:
			0 0 0 4px color-mix(in srgb, var(--skid-surface) 28%, transparent),
			0 12px 32px color-mix(in srgb, var(--skid-ink-brown) 30%, transparent);
	}

	/* iOS ignores fixed parallax — keep cover image as scrollable bg */
	.skid-heritage-cover .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll !important;
	}
}

/* =========================================================================
 * Line pages (T08 v2) — product_cat static templates
 * Bands carry tone classes from theme.json presets; everything here is
 * rhythm, chrome, and the mobile collapses the spec asks for.
 * ========================================================================= */

.skid-line-page .skid-band__kicker {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 0.5rem;
}

.skid-line-page .skid-band__title,
.skid-line-page .skid-band__subtitle {
	margin: 0;
	line-height: 1.1;
	text-wrap: balance;
}

/* --- Band 1: hero ------------------------------------------------------- */

/*
 * The hero band is alignfull with an unconstrained columns block so the media
 * column can run to the right viewport edge with no gutter (spec band 1). That
 * leaves the copy column flush against the left edge, so pad the container back
 * to the same left edge the constrained bands below it use.
 */
.skid-line-hero {
	padding-left: max(
		var(--wp--style--root--padding-left, 1.25rem),
		calc((100% - var(--wp--style--global--content-size, 1140px)) / 2)
	);
}

.skid-line-hero__title {
	margin: 0;
	letter-spacing: -0.02em;
	line-height: 1.04;
	text-wrap: balance;
}

.skid-line-hero__lead {
	max-width: 34rem;
	margin: 1rem 0 0;
}

.skid-line-hero__link a,
.skid-howto__learn a,
.skid-accessories-band__link a,
.skid-line-faq-band__footer a {
	color: var(--skid-wax);
	text-underline-offset: 0.2em;
}

.skid-line-hero__figure {
	margin: 0;
	min-height: 22rem;
}

.skid-line-hero__figure .skid-media-slot__img {
	min-height: 22rem;
}

/* --- Band 2: chooser table --------------------------------------------- */

.skid-chooser-table table {
	border-collapse: collapse;
	background: transparent;
}

.skid-chooser-table th,
.skid-chooser-table td {
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--skid-ink-brown) 14%, transparent);
	padding: 0.85rem 0.75rem;
	font-family: var(--skid-font-body);
	font-size: 0.9rem;
	line-height: 1.45;
	vertical-align: top;
	text-align: left;
}

.skid-chooser-table thead th {
	border-bottom: 2px solid color-mix(in srgb, var(--skid-ink-brown) 28%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	color: var(--skid-muted);
	font-weight: 600;
}

.skid-chooser-table td:first-child {
	font-weight: 600;
}

.skid-chooser-table td:first-child a {
	color: var(--skid-ink-brown);
	text-decoration: none;
}

.skid-chooser-table td:first-child a:hover {
	color: var(--skid-wax);
	text-decoration: underline;
}

.skid-chooser-table td:last-child {
	white-space: nowrap;
	color: var(--skid-wax);
	font-weight: 600;
}

/* --- Bands 3–5: flagship, rest of line, accessories -------------------- */

.skid-flagship__collection .wp-block-woocommerce-product-template,
.skid-line-cards .wp-block-woocommerce-product-template,
.skid-accessory-strip .wp-block-woocommerce-product-template {
	margin: 0;
}

.skid-line-cards,
.skid-accessory-strip {
	margin-top: 1.5rem;
}

.skid-flagship__name {
	margin: 0;
	line-height: 1.15;
}

.skid-flagship__name a {
	color: inherit;
	text-decoration: none;
}

.skid-flagship__name a:hover {
	color: var(--skid-wax);
}

.skid-flagship__price {
	margin: 0.35rem 0 0;
	font-weight: 600;
}

.skid-flagship__blurb {
	margin: 1rem 0 0;
	max-width: 34rem;
}

.skid-flagship__sizes {
	margin: 0.75rem 0 0;
}

.skid-line-cards .wc-block-product-template__responsive,
.skid-accessory-strip .wc-block-product-template__responsive {
	align-items: start;
}

.skid-line-cards .wp-block-post-title,
.skid-accessory-strip .wp-block-post-title {
	margin: 0.75rem 0 0.25rem;
	line-height: 1.2;
}

.skid-line-cards .wp-block-post-title a,
.skid-accessory-strip .wp-block-post-title a {
	color: var(--skid-ink-brown);
	text-decoration: none;
}

.skid-line-cards .wp-block-post-title a:hover,
.skid-accessory-strip .wp-block-post-title a:hover {
	color: var(--skid-wax);
}

.skid-line-cards .wp-block-woocommerce-product-price,
.skid-accessory-strip .wp-block-woocommerce-product-price {
	color: var(--skid-wax);
}

/* --- Bands 6 / 11: image breaks (photo pending — flat tone stands in) --- */

.skid-image-break {
	min-height: 18rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.skid-image-break__line {
	margin: 0;
	max-width: 34rem;
	margin-inline: auto;
	line-height: 1.15;
	text-wrap: balance;
}

/* --- Band 7: how to apply ---------------------------------------------- */

.skid-howto__step {
	border-top: 2px solid color-mix(in srgb, var(--skid-honey) 55%, transparent);
	padding-top: 1rem;
}

.skid-howto__number {
	margin: 0;
	line-height: 1;
	font-weight: 600;
}

.skid-howto__verb {
	margin: 0.35rem 0 0.5rem;
	line-height: 1.15;
}

/* --- Band 9: use cases ------------------------------------------------- */

.skid-usecase {
	margin: 0;
	padding: 0.4rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 18%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--skid-trust) 70%, var(--skid-white));
	color: var(--skid-ink-brown);
}

.skid-usecase--link a {
	color: var(--skid-wax);
	text-decoration: none;
}

.skid-usecase--link a:hover {
	text-decoration: underline;
}

/* --- Band 10: proof (dark tone) ---------------------------------------- */

.skid-proof-band .skid-proof-quote {
	margin: 0;
	max-width: none;
	border-left-color: var(--skid-gold);
}

.skid-proof-band .skid-proof-quote p {
	color: var(--skid-surface);
}

.skid-proof-band .skid-proof-quote cite {
	display: block;
	margin-top: 0.75rem;
	color: color-mix(in srgb, var(--skid-surface) 70%, var(--skid-ink-brown));
}

/* --- Band 12: FAQ ------------------------------------------------------ */

.skid-faq-item {
	border-bottom: 1px solid color-mix(in srgb, var(--skid-ink-brown) 16%, transparent);
	padding: 0.9rem 0;
}

.skid-faq-item summary {
	cursor: pointer;
	font-family: var(--skid-font-heading);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--skid-ink-brown);
}

.skid-faq-item summary:hover {
	color: var(--skid-wax);
}

.skid-faq-item p {
	margin: 0.65rem 0 0;
	max-width: 40rem;
}

/* --- Band 14: makers --------------------------------------------------- */

.skid-makers__figure {
	margin: 0;
	min-height: 20rem;
}

.skid-makers__figure .skid-media-slot__img {
	min-height: 20rem;
}

/* --- Tablet / phone --------------------------------------------------- */

@media (max-width: 781px) {
	/*
	 * Stacked hero leads with the photo (spec band 1). Source order stays
	 * copy-first so the H1 is the first thing a screen reader or a stylesheet-less
	 * render reaches; only the visual order flips.
	 */
	.skid-line-hero {
		display: flex;
		flex-direction: column;
		padding-left: 0;
	}

	.skid-line-hero__media {
		order: -1;
	}

	/*
	 * Padding, not a narrower column: the media column has to keep running the
	 * full width. box-sizing is explicit because core sizes columns with
	 * flex-basis: 100%, which would otherwise add this padding on top of the
	 * viewport and give the whole page a horizontal scrollbar.
	 */
	.skid-line-hero__copy {
		box-sizing: border-box;
		padding-inline: var(--wp--style--root--padding-left, 1.25rem);
	}

	.skid-line-hero__figure,
	.skid-line-hero__figure .skid-media-slot__img,
	.skid-makers__figure,
	.skid-makers__figure .skid-media-slot__img {
		min-height: 15rem;
	}

	.skid-line-hero .wp-block-button,
	.skid-flagship .wp-block-button {
		width: 100%;
	}

	.skid-line-hero .wp-block-button__link,
	.skid-flagship .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	/*
	 * Chooser collapses to one card per product. core/table strips per-cell
	 * data-label on save, so column names are pinned here — the five columns
	 * are fixed by LINE_PAGE_SPEC.md, not per-line content.
	 */
	.skid-chooser-table thead {
		display: none;
	}

	.skid-chooser-table table,
	.skid-chooser-table tbody,
	.skid-chooser-table tr,
	.skid-chooser-table td {
		display: block;
		width: auto;
	}

	.skid-chooser-table table.has-fixed-layout {
		table-layout: auto;
	}

	.skid-chooser-table tr {
		border: 1px solid color-mix(in srgb, var(--skid-ink-brown) 16%, transparent);
		background: color-mix(in srgb, var(--skid-trust) 60%, var(--skid-white));
		padding: 0.9rem 1rem;
		margin-bottom: 1rem;
	}

	.skid-chooser-table td {
		border-bottom: 0;
		padding: 0.35rem 0;
	}

	.skid-chooser-table td:not(:first-child)::before {
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 0.68rem;
		color: var(--skid-muted);
	}

	.skid-chooser-table td:first-child {
		font-family: var(--skid-font-heading);
		font-size: 1.2rem;
		padding-bottom: 0.5rem;
	}

	.skid-chooser-table td:nth-child(2)::before {
		content: "What it's for";
	}

	.skid-chooser-table td:nth-child(3)::before {
		content: "Finish / result";
	}

	.skid-chooser-table td:nth-child(4)::before {
		content: "Reapply";
	}

	.skid-chooser-table td:nth-child(5)::before {
		content: "From";
	}

	.skid-image-break {
		min-height: 13rem;
	}
}