/* =====================================================================
   THG Crew — Front-end styles
   v0.2.0 — page-shell scaffold
   Locked tokens live in :root. Never hardcode hex anywhere else.
   ===================================================================== */

:root {
	/* Brand colors */
	--thg-ink:        #020202;
	--thg-ink-soft:   #3a3a3a;
	--thg-teal:       #2aa890;
	--thg-teal-deep:  #1f7c6b;
	--thg-teal-soft:  #dff2ee;
	--thg-cream:      #f7e4c9;
	--thg-fog:        #e8dec5;
	--thg-paper:      #fffdf7;

	/* Typography */
	--thg-font-display: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
	--thg-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Layout */
	--thg-container:   1200px;
	--thg-gutter:      clamp(16px, 4vw, 32px);
	--thg-radius:      10px;
	--thg-radius-lg:   18px;

	/* Motion */
	--thg-ease:        cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base reset ---------- */

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

body.thg-crew-active,
body { /* Apply globally because the theme wraps content. */
	margin: 0;
	background: var(--thg-paper);
	color: var(--thg-ink);
	font-family: var(--thg-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--thg-teal-deep);
	text-decoration: none;
	transition: color .15s var(--thg-ease);
}
a:hover { color: var(--thg-ink); }

.thg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--thg-ink);
	color: var(--thg-paper);
	padding: 8px 12px;
	z-index: 9999;
}
.thg-skip-link:focus { left: 8px; top: 8px; }

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

.thg-header {
	background: var(--thg-paper);
	border-bottom: 1px solid var(--thg-fog);
	color: var(--thg-ink);
	position: relative;
	z-index: 50;
}

.thg-header__inner {
	max-width: var(--thg-container);
	margin: 0 auto;
	padding: 14px var(--thg-gutter);
	display: flex;
	align-items: center;
	gap: 24px;
}

.thg-brand {
	display: inline-flex;
	align-items: center;
	color: var(--thg-ink);
	line-height: 0;
	transition: transform .15s var(--thg-ease);
}
.thg-brand:hover { transform: translateY(-1px); }

.thg-header img.thg-brand__logo,
.thg-brand .thg-brand__logo {
	display: block;
	width: auto !important;
	height: 48px !important;
	max-width: 160px !important;
}

.thg-nav {
	margin-left: auto;
}
.thg-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
}
.thg-nav__link {
	font-family: var(--thg-font-display);
	font-size: 20px;
	letter-spacing: 0.08em;
	color: var(--thg-ink);
	padding: 6px 0;
	position: relative;
}
.thg-nav__link:hover { color: var(--thg-teal-deep); }
.thg-nav__item.is-active .thg-nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--thg-teal);
}

.thg-wave-divider {
	display: block;
	width: 100%;
	height: 14px;
	color: var(--thg-teal);
	opacity: 0.6;
}
.thg-wave-divider--top { transform: scaleY(-1); }

/* ---------- Responsive nav (no hamburger — always visible) ---------- */

/* Tablet — tighten the header, keep brand + nav inline. */
@media (max-width: 768px) {
	.thg-header__inner {
		padding: 12px var(--thg-gutter);
		gap: 18px;
	}
	.thg-header img.thg-brand__logo { height: 42px !important; }
	.thg-nav__list { gap: 22px; }
	.thg-nav__link { font-size: 18px; }
}

/* Phone — stack brand on top, nav centered below. Touch-friendly tap area. */
@media (max-width: 540px) {
	.thg-header__inner {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 10px var(--thg-gutter) 6px;
	}
	.thg-header img.thg-brand__logo { height: 38px !important; }
	.thg-nav { margin-left: 0; width: 100%; }
	.thg-nav__list {
		justify-content: center;
		flex-wrap: wrap;
		gap: 6px 18px;
	}
	.thg-nav__link {
		font-size: 17px;
		padding: 10px 6px;          /* ~44px tap target with line-height */
		display: inline-block;
		min-height: 44px;
		line-height: 24px;
	}
	/* Active underline sits closer to the link on smaller text. */
	.thg-nav__item.is-active .thg-nav__link::after { bottom: 6px; }
}

/* Very narrow phones — keep 4 items on one row by shrinking gap + text. */
@media (max-width: 380px) {
	.thg-nav__list { gap: 4px 12px; }
	.thg-nav__link { font-size: 16px; padding: 10px 4px; }
}

/* ---------- Page wrapper ---------- */

/* Break out of the theme's constrained content container so our sections
   can paint full-bleed (full viewport width). Each section's `__inner`
   wrapper still constrains text/content to a readable max-width. */
.thg-page {
	display: block;
	min-height: 60vh;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Belt-and-suspenders against themes that add their own padding. */
	padding-left: 0;
	padding-right: 0;
}

/* Prevent the breakout from causing horizontal scroll on the page. */
body:has(.thg-page) { overflow-x: hidden; }

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

.thg-hero {
	background: var(--thg-cream);
	color: var(--thg-ink);
	padding: clamp(48px, 9vw, 96px) var(--thg-gutter);
	text-align: center;
}
.thg-hero--home { padding-block: clamp(72px, 12vw, 128px); }

.thg-hero__inner {
	max-width: 820px;
	margin: 0 auto;
}
.thg-hero__eyebrow {
	font-family: var(--thg-font-display);
	letter-spacing: 0.25em;
	color: var(--thg-teal-deep);
	margin: 0 0 14px;
	font-size: 14px;
}
.thg-hero__title {
	font-family: var(--thg-font-display);
	font-size: clamp(44px, 8vw, 84px);
	line-height: 0.95;
	margin: 0 0 18px;
	letter-spacing: 0.02em;
}
.thg-hero__lede {
	font-size: clamp(16px, 2vw, 19px);
	color: var(--thg-ink-soft);
	margin: 0 auto 28px;
	max-width: 580px;
}
.thg-hero__cta {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

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

.thg-btn {
	display: inline-block;
	font-family: var(--thg-font-display);
	font-size: 18px;
	letter-spacing: 0.12em;
	padding: 14px 26px;
	border-radius: var(--thg-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s var(--thg-ease), background .15s var(--thg-ease), color .15s var(--thg-ease);
	text-transform: uppercase;
}
.thg-btn--primary {
	background: var(--thg-teal);
	color: var(--thg-paper);
}
.thg-btn--primary:hover {
	background: var(--thg-teal-deep);
	color: var(--thg-paper);
	transform: translateY(-1px);
}
.thg-btn--ghost {
	background: transparent;
	color: var(--thg-ink);
	border-color: var(--thg-ink);
}
.thg-btn--ghost:hover {
	background: var(--thg-ink);
	color: var(--thg-paper);
}

/* ---------- Sections ---------- */

.thg-section {
	padding: clamp(48px, 8vw, 96px) var(--thg-gutter);
	background: var(--thg-paper);
}
.thg-section--alt {
	background: var(--thg-cream);
}

.thg-section__inner {
	max-width: var(--thg-container);
	margin: 0 auto;
}

.thg-section__head {
	text-align: center;
	margin-bottom: 32px;
}
.thg-section__eyebrow {
	font-family: var(--thg-font-display);
	letter-spacing: 0.25em;
	font-size: 13px;
	color: var(--thg-teal-deep);
	margin: 0 0 6px;
}
.thg-section__title {
	font-family: var(--thg-font-display);
	font-size: clamp(32px, 5vw, 52px);
	margin: 0;
	letter-spacing: 0.02em;
	line-height: 1;
}

.thg-placeholder {
	border: 1px dashed var(--thg-teal);
	background: var(--thg-teal-soft);
	color: var(--thg-teal-deep);
	padding: 48px 24px;
	border-radius: var(--thg-radius-lg);
	text-align: center;
	font-style: italic;
}

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

.thg-footer {
	background: var(--thg-ink);
	color: var(--thg-paper);
	padding: 0 0 24px;
	margin-top: 32px;
}
.thg-footer .thg-wave-divider {
	color: var(--thg-teal);
	opacity: 0.8;
	margin-bottom: 32px;
}
.thg-footer__inner {
	max-width: var(--thg-container);
	margin: 0 auto;
	padding: 0 var(--thg-gutter);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
}
.thg-footer__wordmark {
	display: block;
	font-family: var(--thg-font-display);
	font-size: 32px;
	letter-spacing: 0.04em;
	color: var(--thg-cream);
	margin-bottom: 8px;
}
.thg-footer__tagline {
	color: var(--thg-cream);
	opacity: 0.8;
	margin: 0;
	max-width: 360px;
}
.thg-footer__nav ul,
.thg-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}
.thg-footer__nav a,
.thg-footer__social a {
	color: var(--thg-cream);
	display: inline-block;
	padding: 4px 0;
	font-family: var(--thg-font-display);
	letter-spacing: 0.08em;
	font-size: 18px;
}
.thg-footer__nav a:hover,
.thg-footer__social a:hover {
	color: var(--thg-teal);
}
.thg-footer__social-label {
	font-family: var(--thg-font-display);
	letter-spacing: 0.25em;
	font-size: 13px;
	color: var(--thg-teal);
	margin: 0 0 8px;
	text-transform: uppercase;
}
.thg-footer__legal {
	max-width: var(--thg-container);
	margin: 24px auto 0;
	padding: 16px var(--thg-gutter) 0;
	border-top: 1px solid rgba(247, 228, 201, 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	color: var(--thg-cream);
	opacity: 0.7;
	font-size: 14px;
}
.thg-footer__legal a {
	color: var(--thg-cream);
}
.thg-footer__legal a:hover { color: var(--thg-teal); }

@media (max-width: 700px) {
	.thg-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ---------- Home: Hero (full-bleed image bg + overlay) ---------- */

.thg-home-hero {
	position: relative;
	background-color: var(--thg-ink);
	background-size: cover;
	background-position: center;
	color: var(--thg-paper);
	min-height: clamp(440px, 70vh, 720px);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.thg-home-hero:not(.has-image) { background-color: var(--thg-cream); color: var(--thg-ink); }

.thg-home-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(2,2,2,0.20) 0%,
		rgba(2,2,2,0.55) 65%,
		rgba(2,2,2,0.78) 100%
	);
	pointer-events: none;
}
.thg-home-hero:not(.has-image) .thg-home-hero__overlay { background: none; }

.thg-home-hero__inner {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(56px, 10vw, 120px) var(--thg-gutter);
	text-align: center;
}

.thg-home-hero__eyebrow {
	font-family: var(--thg-font-display);
	letter-spacing: 0.25em;
	color: var(--thg-cream);
	margin: 0 0 14px;
	font-size: clamp(16px, 1.7vw, 22px);
	text-transform: uppercase;
	opacity: 0.95;
}
.thg-home-hero:not(.has-image) .thg-home-hero__eyebrow { color: var(--thg-teal-deep); }

.thg-home-hero__title {
	font-family: var(--thg-font-display);
	font-size: clamp(52px, 10vw, 108px);
	line-height: 0.92;
	margin: 0 0 18px;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.thg-home-hero:not(.has-image) .thg-home-hero__title { text-shadow: none; }

.thg-home-hero__lede {
	font-size: clamp(17px, 2.2vw, 21px);
	margin: 0 auto 32px;
	max-width: 620px;
	color: var(--thg-paper);
	opacity: 0.92;
	text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.thg-home-hero:not(.has-image) .thg-home-hero__lede { color: var(--thg-ink-soft); text-shadow: none; }

.thg-home-hero__cta {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}

/* Ghost variant for use on dark hero images. */
.thg-btn--ghost-on-image {
	background: transparent;
	color: var(--thg-paper);
	border: 2px solid var(--thg-paper);
	display: inline-block;
	font-family: var(--thg-font-display);
	font-size: 18px;
	letter-spacing: 0.12em;
	padding: 14px 26px;
	border-radius: var(--thg-radius);
	text-transform: uppercase;
	transition: transform .15s var(--thg-ease), background .15s var(--thg-ease), color .15s var(--thg-ease);
}
.thg-btn--ghost-on-image:hover {
	background: var(--thg-paper);
	color: var(--thg-ink);
	transform: translateY(-1px);
}

/* ---------- Home: Latest video embed ---------- */

.thg-video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 960px;
	margin: 0 auto;
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	background: #000;
	box-shadow: 0 18px 36px -18px rgba(2,2,2,0.4);
}
.thg-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.thg-video-caption {
	text-align: center;
	color: var(--thg-ink-soft);
	margin-top: 16px;
	font-style: italic;
}

/* ---------- Home: Intro (image + text split) ---------- */

.thg-home-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.thg-home-intro__media img {
	width: 100%;
	height: auto;
	border-radius: var(--thg-radius-lg);
	box-shadow: 0 18px 36px -18px rgba(2,2,2,0.35);
}
.thg-home-intro__placeholder {
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thg-home-intro__copy .thg-section__eyebrow { text-align: left; }
.thg-home-intro__copy .thg-section__title   { text-align: left; }
.thg-home-intro__body {
	font-size: 17px;
	color: var(--thg-ink-soft);
	margin: 18px 0 24px;
	max-width: 540px;
}
@media (max-width: 820px) {
	.thg-home-intro__inner { grid-template-columns: 1fr; }
}

/* When the intro section sits inside .thg-home-intro, neutralize the
   centered section head treatment so the eyebrow/title align left. */
.thg-home-intro .thg-section__head { text-align: left; margin-bottom: 0; }

/* ---------- Generic content split (image + text) ----------
   Used by Content / About / Shop page sections via templates/partials/page-section.php.
   Configurable: alt background, image-left vs image-right. */

.thg-content-split__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.thg-content-split--image-right .thg-content-split__inner {
	grid-template-areas: "copy media";
	grid-template-columns: 1fr 1fr;
}
.thg-content-split--image-right .thg-content-split__media { grid-area: media; }
.thg-content-split--image-right .thg-content-split__copy  { grid-area: copy; }

.thg-content-split__media img {
	width: 100%;
	height: auto;
	border-radius: var(--thg-radius-lg);
	box-shadow: 0 18px 36px -18px rgba(2,2,2,0.35);
	display: block;
}

.thg-content-split__copy .thg-section__eyebrow { text-align: left; }
.thg-content-split__copy .thg-section__title   { text-align: left; }
.thg-content-split__body {
	font-size: 17px;
	color: var(--thg-ink-soft);
	margin: 18px 0 24px;
	max-width: 540px;
}

/* Sections without an image collapse to single-column copy, left-aligned for readability. */
.thg-content-split__inner:not(:has(.thg-content-split__media)) {
	grid-template-columns: 1fr;
	max-width: 880px;
}
.thg-content-split__inner:not(:has(.thg-content-split__media)) .thg-content-split__copy {
	text-align: left;
}
.thg-content-split__inner:not(:has(.thg-content-split__media)) .thg-section__eyebrow,
.thg-content-split__inner:not(:has(.thg-content-split__media)) .thg-section__title { text-align: left; }
.thg-content-split__inner:not(:has(.thg-content-split__media)) .thg-content-split__body {
	max-width: 720px;
}

@media (max-width: 820px) {
	.thg-content-split__inner,
	.thg-content-split--image-right .thg-content-split__inner {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}
}

/* Portrait variant — circular avatar styling for the Crew section. */
.thg-content-split--portrait .thg-content-split__media {
	display: flex;
	justify-content: center;
}
.thg-content-split--portrait .thg-content-split__media img {
	width: clamp(180px, 26vw, 300px);
	height: clamp(180px, 26vw, 300px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid var(--thg-paper);
	box-shadow: 0 16px 36px -12px rgba(2, 2, 2, 0.45);
}

/* ---------- Event cards (Events page, from thg_show CPT) ---------- */

.thg-event-list {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	max-width: 880px;
	margin: 0 auto;
}

.thg-event-card {
	display: grid;
	grid-template-columns: 120px 1fr auto;
	gap: 24px;
	align-items: center;
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius);
	padding: 20px 24px;
	box-shadow: 0 4px 14px -8px rgba(2, 2, 2, 0.18);
}
.thg-event-card--past {
	opacity: 0.78;
}

.thg-event-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--thg-teal-deep);
	font-family: var(--thg-font-display);
	letter-spacing: 0.06em;
	line-height: 1;
	border-right: 1px solid var(--thg-fog);
	padding-right: 24px;
	min-width: 96px;
}
.thg-event-card__month {
	font-size: 14px;
	text-transform: uppercase;
	color: var(--thg-teal-deep);
}
.thg-event-card__day {
	font-size: 44px;
	color: var(--thg-ink);
	margin: 4px 0;
}
.thg-event-card__range {
	font-size: 13px;
	color: var(--thg-ink-soft);
	margin-top: 4px;
}
.thg-event-card__year {
	font-size: 11px;
	color: var(--thg-ink-soft);
	margin-top: 4px;
}

.thg-event-card__body {
	min-width: 0;
}
.thg-event-card__title {
	font-family: var(--thg-font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.1;
	margin: 0 0 6px;
	color: var(--thg-ink);
	letter-spacing: 0.02em;
}
.thg-event-card__location {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--thg-ink);
}
.thg-event-card__meta {
	margin: 0 0 8px;
	color: var(--thg-ink-soft);
	font-size: 14px;
}
.thg-event-card__meta-sep {
	color: var(--thg-fog);
}
.thg-event-card__description {
	color: var(--thg-ink-soft);
	font-size: 15px;
	margin-bottom: 8px;
}
.thg-event-card__description p { margin: 0 0 8px; }
.thg-event-card__description p:last-child { margin-bottom: 0; }
.thg-event-card__link {
	display: inline-block;
	font-family: var(--thg-font-display);
	letter-spacing: 0.12em;
	font-size: 14px;
	color: var(--thg-teal-deep);
	text-transform: uppercase;
}
.thg-event-card__link:hover { color: var(--thg-ink); }

.thg-event-card__image img {
	width: 160px;
	height: 200px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

@media (max-width: 700px) {
	.thg-event-card {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.thg-event-card__date {
		flex-direction: row;
		gap: 8px;
		align-items: baseline;
		border-right: none;
		border-bottom: 1px solid var(--thg-fog);
		padding: 0 0 12px;
		justify-content: flex-start;
	}
	.thg-event-card__day { font-size: 32px; margin: 0; }
	.thg-event-card__image img { width: 100%; height: auto; max-height: 240px; }
}

/* Page hero (non-home) — picks up the home hero overlay/typography when
   an image background is set, otherwise sits on the cream surface. */
.thg-hero--page.has-image {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--thg-paper);
}
.thg-hero--page.has-image .thg-hero__inner {
	position: relative;
	z-index: 1;
}
.thg-hero--page.has-image .thg-hero__title,
.thg-hero--page.has-image .thg-hero__lede {
	text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

/* ===================================================================
   Home: Animated hero — 8-phase cinematic sequence.
   1: phrase fades in (stacked words)
   2: non-kept words drop together (Piece + Cards)
   3: kept word "One" scales up
   4: non-kept letters in "One" (O, e) drop
   5: the surviving N scales up further on its own
   6: a white card-shaped face wipes in left-to-right across the N's
      exact width and height, covering and "absorbing" the N
   7: the (now solid white) card flips 180° on Y, back face = the
      uploaded card image — as if it had been the back all along
   8: sub-headline + CTAs fade in
   =================================================================== */

.thg-home-hero-anim {
	position: relative;
	min-height: clamp(620px, 84vh, 880px);
}

.thg-home-hero-anim__inner {
	position: relative;
	padding: clamp(64px, 11vw, 140px) var(--thg-gutter);
	text-align: center;
}

.thg-home-hero-anim__phrase {
	font-family: var(--thg-font-display);
	font-size: clamp(44px, 8.5vw, 96px);
	line-height: 1.02;
	margin: 0 auto 36px;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 3;
}
.thg-home-hero-anim.has-image .thg-home-hero-anim__phrase {
	text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

.thg-anim-word {
	display: block;
	transition: transform 0.7s var(--thg-ease);
	will-change: transform, opacity;
}

/* Extra breathing room below the kept word ("One") so its big SVG
   letters don't crowd the words below. */
.thg-anim-word.is-kept-word {
	margin-bottom: 0.2em;
}

.thg-anim-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.5s var(--thg-ease),
		transform 0.5s var(--thg-ease);
	transition-delay: calc(var(--i, 0) * 50ms);
	will-change: transform, opacity;
}

/* The kept letter needs its own positioning context so the card lives
   inside it. It also gets its own scale transform in phase 5.
   line-height: 0 collapses the inline-block's height down to its SVG
   content, so the card-host (inset: 0) matches the N's exact bounds —
   not the inherited phrase line-height which would make it ~10% taller. */
.thg-anim-char.is-kept {
	position: relative;
	line-height: 0;
	vertical-align: top;
	transition:
		opacity 0.5s var(--thg-ease),
		transform 0.7s var(--thg-ease);
}

/* Phase 1: every character fades + lifts into place. */
.thg-home-hero-anim.is-phase-1 .thg-anim-char {
	opacity: 1;
	transform: translateY(0);
}

/* Phase 2: ALL non-kept letters drop together — non-kept words
   (Piece, Cards) AND the O+e inside the kept word ("One"). The N
   alone remains. */
.thg-home-hero-anim.is-phase-2 .thg-anim-word:not(.is-kept-word) {
	opacity: 0;
	transform: translateY(85vh) rotate(6deg);
	transition:
		opacity 0.7s ease-in,
		transform 1.05s cubic-bezier(.4, 0, .68, 1.02);
	transition-delay: calc(var(--w, 0) * 160ms);
}
.thg-home-hero-anim.is-phase-2 .thg-anim-word.is-kept-word .thg-anim-char:not(.is-kept) {
	opacity: 0;
	transform: translateY(78vh) rotate(18deg);
	transition:
		opacity 0.6s ease-in,
		transform 0.95s cubic-bezier(.42, 0, .68, 1.02);
}

/* Phase 2 (continued): the N drops AND grows simultaneously alongside
   the falling letters — single combined transition, no pause between
   drop and grow. By the time the other letters are gone, the N has
   already reached its final position and size. */
.thg-home-hero-anim.is-phase-2 .thg-anim-char.is-kept {
	transform: scale(3.2) translateY(0.4em);
}


/* --- The card lives INSIDE the kept N --- */

/* Each letter wraps in its own inner span so it can be transformed
   independently of the outer .thg-anim-char (which handles phase-level
   drop/fade transforms). */
.thg-anim-char__letter {
	display: inline-block;
	transition: opacity 0.45s ease-out 0.1s;
}

/* Any letter that's a hand-designed SVG (currently N / O / E in the
   kept word) hugs its SVG box and renders at the consistent 0.92em
   height. */
.thg-anim-char__letter--svg {
	line-height: 0;
}
.thg-anim-char__letter--svg svg {
	display: block;
	width: auto;
	height: 0.92em;
	color: inherit;
}

/* Bebas Neue text letters get stretched vertically so they sit at the
   same visual height as the SVG letters (0.92em vs cap-height ~0.72em
   → scaleY 1.28). Origin bottom so they grow upward from the baseline. */
.thg-anim-char__letter:not(.thg-anim-char__letter--svg) {
	transform: scaleY(1.28);
	transform-origin: bottom center;
}

/* Phase 6: the N fades while the white wipes in over it. The fade is
   a backup — the wipe is doing the real visual work. */
.thg-home-hero-anim.is-phase-6 .thg-anim-char.is-kept .thg-anim-char__letter {
	opacity: 0;
}

.thg-home-hero-anim__card-host {
	position: absolute;
	/* Match the SVG's box exactly — the SVG determines the parent's
	   dimensions, so inset: 0 means the card-host covers the N completely. */
	inset: 0;
	perspective: 900px;
	pointer-events: none;
	visibility: hidden;
	z-index: 2;
}

.thg-home-hero-anim.is-phase-6 .thg-home-hero-anim__card-host {
	visibility: visible;
}

.thg-home-hero-anim__card {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 1s cubic-bezier(.7, .04, .25, 1);
	z-index: 1; /* in front of the side cards which sit behind it */
}

/* Side cards: sized identically to the main card, stacked directly behind
   it (hidden by opacity: 0 + lower z-index). Phase 9 slides them out to
   either side and fades them in. */
.thg-home-hero-anim__side-card {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	overflow: hidden;
	border-radius: 4%;
	background: var(--thg-paper);
	box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.55);
	transition:
		transform 0.85s cubic-bezier(.2, .9, .3, 1),
		opacity 0.45s ease-out;
}
.thg-home-hero-anim__side-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__side-card {
	opacity: 1;
}
.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__side-card--left {
	transform: translateX(-95%) rotate(-9deg);
}
.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__side-card--right {
	transform: translateX(95%) rotate(9deg);
}

/* After the cards settle, each one floats with a subtle independent
   up-and-down bob — slightly different durations + delays so they
   bounce out of sync (more natural than locked-step). Uses the CSS
   `translate` property (not `transform: translate(...)`) so it
   composes cleanly with each card's existing `transform`. */
@keyframes thg-card-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -3px; }
}
.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__card {
	animation: thg-card-bob 2.8s ease-in-out 1s infinite;
}
.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__side-card--left {
	animation: thg-card-bob 2.5s ease-in-out 1.15s infinite;
}
.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__side-card--right {
	animation: thg-card-bob 2.6s ease-in-out 1.05s infinite;
}

.thg-home-hero-anim.is-phase-7 .thg-home-hero-anim__card {
	transform: rotateY(180deg);
}

.thg-home-hero-anim__card-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	/* Semi-rounded corners. Percentage scales with the card so the
	   roundness looks consistent regardless of how scaled the N is. */
	border-radius: 4%;
	/* No box-shadow — would extend past the card-host bounds and make
	   the card's visual footprint larger than the N SVG. */
}

/* White face — initially visible, wipes in over the N from left to right. */
.thg-home-hero-anim__card-face--white {
	background: var(--thg-paper);
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
	transition:
		clip-path 0.8s cubic-bezier(.45, 0, .25, 1),
		-webkit-clip-path 0.8s cubic-bezier(.45, 0, .25, 1);
}
.thg-home-hero-anim.is-phase-6 .thg-home-hero-anim__card-face--white {
	clip-path: inset(0 0 0 0);
	-webkit-clip-path: inset(0 0 0 0);
}

/* Compass rose centered on the white card face. Sits inside the white
   face so it's clipped by the same wipe — appears progressively as the
   white reveals left-to-right, painted on like ink on the card. */
.thg-home-hero-anim__card-compass {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45%;
	height: auto;
	transform: translate(-50%, -50%);
	color: var(--thg-teal);
	pointer-events: none;
}

/* Image face — the One Piece card, behind the white until the flip.
   Gets a soft shadow in phase 8 (after the rotation completes) so the
   card reads as floating in front of the hero rather than embedded in
   the page. Shadow is only on this face — not the white face — so it
   never appears before the flip. */
.thg-home-hero-anim__card-face--image {
	transform: rotateY(180deg);
	background: var(--thg-paper);
	transition: box-shadow 0.6s ease-out;
}
.thg-home-hero-anim.is-phase-8 .thg-home-hero-anim__card-face--image {
	box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.55);
}
.thg-home-hero-anim__card-face--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;     /* fill the card-face; crop the wider side if PNG aspect != card aspect */
	display: block;
}

/* --- Supporting copy + CTAs --- */

.thg-home-hero-anim__supporting {
	margin-top: clamp(60px, 8vw, 110px);
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s var(--thg-ease),
		transform 0.7s var(--thg-ease);
	position: relative;
	z-index: 3;
}
.thg-home-hero-anim.is-phase-8 .thg-home-hero-anim__supporting {
	opacity: 1;
	transform: translateY(0);
}

/* Reduced motion: paint the final state on first frame. */
@media (prefers-reduced-motion: reduce) {
	.thg-anim-char { opacity: 1; transform: none; transition: none; }
	.thg-anim-word { transform: none; transition: none; }
	.thg-anim-word:not(.is-kept-word) { opacity: 0; }
	.thg-anim-word.is-kept-word .thg-anim-char:not(.is-kept) { opacity: 0; }
	.thg-anim-char.is-kept { transform: scale(3.2) translateY(0.4em); }
	.thg-home-hero-anim__side-card { opacity: 1; transition: none; }
	.thg-home-hero-anim__side-card--left { transform: translateX(-95%) rotate(-9deg); }
	.thg-home-hero-anim__side-card--right { transform: translateX(95%) rotate(9deg); }
	/* No idle bobbing under prefers-reduced-motion. */
	.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__card,
	.thg-home-hero-anim.is-phase-9 .thg-home-hero-anim__side-card { animation: none; }
	.thg-anim-char__letter { opacity: 0; transition: none; }
	.thg-home-hero-anim__card-host { visibility: visible; }
	.thg-home-hero-anim__card-face--white {
		clip-path: inset(0 0 0 0);
		-webkit-clip-path: inset(0 0 0 0);
	}
	.thg-home-hero-anim__card { transform: rotateY(180deg); transition: none; }
	.thg-home-hero-anim__supporting { opacity: 1; transform: none; transition: none; }
}

/* Mobile tuning. */
@media (max-width: 540px) {
	.thg-home-hero-anim { min-height: clamp(560px, 90vh, 720px); }
	.thg-home-hero-anim__phrase { font-size: clamp(36px, 11vw, 64px); }
	.thg-home-hero-anim.is-phase-2 .thg-anim-char.is-kept { transform: scale(2.8) translateY(0.35em); }
}

/* =============================================================
   WooCommerce — Shop archive
   ============================================================= */

body.thg-shop-archive .woocommerce-notices-wrapper:empty { display: none; }
body.thg-shop-archive .woocommerce-result-count,
body.thg-shop-archive .woocommerce-ordering { display: none; } /* hide woo's default toolbar — we render our own headers */

/* ---- Featured product showcase ---- */
.thg-shop-featured {
	padding-block: clamp(48px, 7vw, 88px);
}
.thg-shop-featured__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.thg-shop-featured__media {
	display: block;
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	box-shadow: 0 22px 40px -18px rgba(2, 2, 2, 0.4);
	transition: transform .35s var(--thg-ease);
	background: var(--thg-paper);
}
.thg-shop-featured__media:hover {
	transform: translateY(-3px);
}
.thg-shop-featured__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.thg-shop-featured__title {
	font-family: var(--thg-font-display);
	font-size: clamp(36px, 5vw, 64px);
	letter-spacing: 0.01em;
	line-height: 1.02;
	margin: 8px 0 14px;
	color: var(--thg-ink);
}
.thg-shop-featured__title a {
	color: inherit;
	text-decoration: none;
}
.thg-shop-featured__title a:hover {
	color: var(--thg-teal-deep);
}
.thg-shop-featured__body {
	font-size: 17px;
	color: var(--thg-ink-soft);
	max-width: 520px;
	margin-bottom: 18px;
}
.thg-shop-featured__body p { margin: 0 0 12px; }
.thg-shop-featured__price {
	font-size: 22px;
	font-weight: 600;
	color: var(--thg-ink);
	margin: 0 0 22px;
}
.thg-shop-featured__price del { color: #999; font-weight: 400; margin-right: 10px; }
.thg-shop-featured__price ins { text-decoration: none; color: var(--thg-teal-deep); }
.thg-shop-featured__cta { margin: 0; }

@media (max-width: 820px) {
	.thg-shop-featured__inner {
		grid-template-columns: 1fr;
	}
}

/* ---- Product grid ---- */
.thg-shop-grid-section {
	padding-block: clamp(48px, 7vw, 88px);
}
.thg-shop-grid__head {
	text-align: center;
	margin-bottom: clamp(28px, 4vw, 48px);
}
.thg-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}

.thg-product-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s var(--thg-ease), box-shadow .25s var(--thg-ease), border-color .25s var(--thg-ease);
}
.thg-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 30px -16px rgba(2, 2, 2, 0.28);
	border-color: var(--thg-cream);
}
.thg-product-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--thg-cream);
}
.thg-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--thg-ease);
}
.thg-product-card:hover .thg-product-card__media img {
	transform: scale(1.04);
}
.thg-product-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--thg-ink);
	color: var(--thg-paper);
	font-family: var(--thg-font-display);
	letter-spacing: 0.08em;
	font-size: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	z-index: 2;
}
.thg-product-card__badge--feature { background: var(--thg-teal); }
.thg-product-card__body {
	padding: 18px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}
.thg-product-card__title {
	font-family: var(--thg-font-display);
	font-size: clamp(22px, 1.8vw, 28px);
	letter-spacing: 0.01em;
	line-height: 1.1;
	margin: 0;
}
.thg-product-card__title a {
	color: var(--thg-ink);
	text-decoration: none;
}
.thg-product-card__title a:hover {
	color: var(--thg-teal-deep);
}
.thg-product-card__price {
	font-size: 17px;
	font-weight: 600;
	color: var(--thg-ink);
	margin: 0;
}
.thg-product-card__price del { color: #999; font-weight: 400; margin-right: 8px; }
.thg-product-card__price ins { text-decoration: none; color: var(--thg-teal-deep); }
.thg-product-card__cta { margin-top: auto; padding-top: 6px; }
.thg-product-card__cta .thg-btn { width: 100%; text-align: center; }

/* ---- Empty state + pagination ---- */
.thg-shop-empty {
	text-align: center;
	padding: 40px 16px;
	color: var(--thg-ink-soft);
}
.thg-shop-grid-section .page-numbers {
	display: inline-flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: clamp(32px, 4vw, 56px) auto 0;
	justify-content: center;
}
.thg-shop-grid-section .page-numbers li { margin: 0; }
.thg-shop-grid-section .page-numbers a,
.thg-shop-grid-section .page-numbers span {
	display: inline-block;
	min-width: 36px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	border: 1px solid var(--thg-fog);
	border-radius: 8px;
	color: var(--thg-ink);
	text-decoration: none;
	padding: 0 10px;
	font-weight: 500;
	transition: border-color .2s, color .2s, background .2s;
}
.thg-shop-grid-section .page-numbers a:hover { border-color: var(--thg-teal); color: var(--thg-teal-deep); }
.thg-shop-grid-section .page-numbers .current {
	background: var(--thg-ink);
	color: var(--thg-paper);
	border-color: var(--thg-ink);
}

/* =============================================================
   WooCommerce — Single product story page
   ============================================================= */

body.thg-product-single .woocommerce-notices-wrapper { max-width: var(--thg-container); margin: 0 auto; padding: 0 var(--thg-gutter); }
body.thg-product-single .product { margin: 0; } /* WC wraps the product in <div class="product ..."> */

/* ---- Hero ---- */
.thg-product-hero { padding-block: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 72px); }
.thg-product-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.thg-product-hero__media { position: sticky; top: 100px; }
.thg-product-hero__feature {
	background: var(--thg-cream);
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	box-shadow: 0 22px 40px -18px rgba(2,2,2,0.4);
}
.thg-product-hero__feature img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.thg-product-hero__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.thg-product-hero__thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	background: var(--thg-cream);
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s, transform .2s;
}
.thg-product-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thg-product-hero__thumb:hover { transform: translateY(-2px); }
.thg-product-hero__thumb.is-active { border-color: var(--thg-teal); }

.thg-product-hero__title {
	font-family: var(--thg-font-display);
	font-size: clamp(40px, 5.5vw, 72px);
	line-height: 1;
	letter-spacing: 0.01em;
	margin: 8px 0 14px;
	color: var(--thg-ink);
}
.thg-product-hero__pitch {
	font-size: 18px;
	color: var(--thg-ink-soft);
	max-width: 540px;
	margin-bottom: 22px;
}
.thg-product-hero__pitch p { margin: 0 0 10px; }
.thg-product-hero__price {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	color: var(--thg-ink);
	margin: 0 0 18px;
}
.thg-product-hero__price del { color: #999; font-weight: 400; margin-right: 10px; }
.thg-product-hero__price ins { text-decoration: none; color: var(--thg-teal-deep); }
.thg-product-hero__price .price { font-size: inherit; color: inherit; font-weight: inherit; }

.thg-product-hero__buy { margin: 6px 0 16px; }
.thg-product-hero__meta {
	font-size: 13px;
	color: var(--thg-ink-soft);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 12px 0 0;
}

/* ---- Themed Woo add-to-cart form ---- */
.thg-product-hero__buy form.cart,
.thg-product-closing__buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.thg-product-hero__buy .quantity input.qty,
.thg-product-closing__buy .quantity input.qty {
	width: 70px;
	height: 50px;
	padding: 0 10px;
	border: 1.5px solid var(--thg-ink);
	border-radius: var(--thg-radius);
	background: var(--thg-paper);
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}
.thg-product-hero__buy button.single_add_to_cart_button,
.thg-product-closing__buy button.single_add_to_cart_button {
	background: var(--thg-ink);
	color: var(--thg-paper);
	border: 1.5px solid var(--thg-ink);
	font-family: var(--thg-font-display);
	font-size: 20px;
	letter-spacing: 0.06em;
	padding: 0 28px;
	height: 50px;
	border-radius: var(--thg-radius);
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.thg-product-hero__buy button.single_add_to_cart_button:hover,
.thg-product-closing__buy button.single_add_to_cart_button:hover {
	background: var(--thg-teal-deep);
	border-color: var(--thg-teal-deep);
	transform: translateY(-2px);
}

/* Variations table for variable products */
.thg-product-hero__buy table.variations,
.thg-product-closing__buy table.variations {
	width: 100%;
	margin-bottom: 14px;
	border-collapse: collapse;
}
.thg-product-hero__buy table.variations th,
.thg-product-closing__buy table.variations th {
	text-align: left;
	padding: 8px 12px 8px 0;
	font-family: var(--thg-font-display);
	font-size: 15px;
	letter-spacing: 0.06em;
	color: var(--thg-ink);
	font-weight: 400;
}
.thg-product-hero__buy table.variations td,
.thg-product-closing__buy table.variations td {
	padding: 8px 0;
}
.thg-product-hero__buy table.variations select,
.thg-product-closing__buy table.variations select {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--thg-ink);
	border-radius: var(--thg-radius);
	background: var(--thg-paper);
	font: inherit;
}
.thg-product-hero__buy .single_variation_wrap .woocommerce-variation-price,
.thg-product-closing__buy .single_variation_wrap .woocommerce-variation-price {
	font-size: 22px;
	font-weight: 700;
	color: var(--thg-ink);
	margin-bottom: 12px;
}
.thg-product-hero__buy .reset_variations,
.thg-product-closing__buy .reset_variations {
	font-size: 13px;
	color: var(--thg-ink-soft);
	text-decoration: underline;
}
.thg-product-hero__buy .stock,
.thg-product-closing__buy .stock { font-size: 14px; margin-top: 6px; }

@media (max-width: 820px) {
	.thg-product-hero__inner { grid-template-columns: 1fr; }
	.thg-product-hero__media { position: static; }
}

/* ---- Story sections inside a product page ---- */
.thg-product-story { padding-block: clamp(48px, 7vw, 88px); }
.thg-product-story:nth-child(odd) { background: var(--thg-paper); }
.thg-product-story:nth-child(even) { background: var(--thg-teal-soft); }

/* ---- Specs ---- */
.thg-product-specs { padding-block: clamp(48px, 6vw, 80px); }
.thg-product-specs__list {
	max-width: 720px;
	margin: 28px auto 0;
	display: grid;
	gap: 0;
}
.thg-product-specs__row {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 16px;
	padding: 16px 8px;
	border-bottom: 1px solid var(--thg-fog);
}
.thg-product-specs__row dt {
	font-family: var(--thg-font-display);
	font-size: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--thg-ink);
	margin: 0;
}
.thg-product-specs__row dd {
	font-size: 16px;
	color: var(--thg-ink-soft);
	margin: 0;
}

/* ---- FAQ ---- */
.thg-product-faq { padding-block: clamp(48px, 6vw, 80px); }
.thg-product-faq__list {
	max-width: 760px;
	margin: 28px auto 0;
	display: grid;
	gap: 12px;
}
.thg-product-faq__item {
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	background: var(--thg-paper);
	overflow: hidden;
	transition: border-color .2s;
}
.thg-product-faq__item[open] { border-color: var(--thg-teal); }
.thg-product-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	cursor: pointer;
	list-style: none;
	font-family: var(--thg-font-display);
	font-size: 20px;
	letter-spacing: 0.04em;
	color: var(--thg-ink);
}
.thg-product-faq__q::-webkit-details-marker { display: none; }
.thg-product-faq__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--thg-cream);
	color: var(--thg-ink);
	font-size: 20px;
	line-height: 1;
	transition: transform .25s var(--thg-ease), background .25s;
}
.thg-product-faq__item[open] .thg-product-faq__chevron {
	transform: rotate(45deg);
	background: var(--thg-teal);
	color: var(--thg-paper);
}
.thg-product-faq__a {
	padding: 0 22px 18px;
	font-size: 16px;
	color: var(--thg-ink-soft);
}
.thg-product-faq__a p { margin: 0 0 10px; }

/* ---- Closing CTA ---- */
.thg-product-closing { padding-block: clamp(56px, 7vw, 96px); text-align: center; }
.thg-product-closing__head { max-width: 680px; margin: 0 auto 28px; }
.thg-product-closing__title {
	font-family: var(--thg-font-display);
	font-size: clamp(36px, 4.5vw, 56px);
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 10px 0 14px;
	color: var(--thg-ink);
}
.thg-product-closing__body { font-size: 17px; color: var(--thg-ink-soft); }
.thg-product-closing__price { margin: 14px 0 18px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; }
.thg-product-closing__buy { max-width: 480px; margin: 0 auto; }
.thg-product-closing__buy form.cart {
	justify-content: center;
}

/* =============================================================
   WooCommerce — Cart / Checkout / My Account (shared theming)
   ============================================================= */

/* The themed eyebrow + title injected at the top of /cart/, /checkout/, /my-account/ */
.thg-wc-pageheader {
	padding-block: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 36px);
	text-align: center;
}
.thg-wc-pageheader__title {
	font-family: var(--thg-font-display);
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	letter-spacing: 0.01em;
	margin: 8px 0 0;
	color: var(--thg-ink);
}

/* Wrap the entire cart/checkout/account page in a container */
body.thg-wc-cart .entry-content,
body.thg-wc-checkout .entry-content,
body.thg-wc-account .entry-content,
body.thg-wc-cart .wp-block-post-content,
body.thg-wc-checkout .wp-block-post-content,
body.thg-wc-account .wp-block-post-content {
	max-width: var(--thg-container);
	margin: 0 auto;
	padding: 0 var(--thg-gutter) clamp(40px, 5vw, 72px);
}

/* Hello Elementor's site-title block adds a duplicate brand link above our content. Hide it. */
body.thg-wc-cart #site-header,
body.thg-wc-checkout #site-header,
body.thg-wc-account #site-header,
body.thg-product-single #site-header,
body.thg-shop-archive #site-header { display: none; }

/* =============================================================
   Cart + Checkout — block-based (WC Blocks)
   ============================================================= */

/* Generic block-based button (used everywhere in cart/checkout) */
.wc-block-components-button:not(.is-link),
.wp-block-button__link {
	background-color: var(--thg-ink) !important;
	color: var(--thg-paper) !important;
	border: 1.5px solid var(--thg-ink) !important;
	font-family: var(--thg-font-display) !important;
	font-size: 18px !important;
	letter-spacing: 0.06em !important;
	border-radius: var(--thg-radius) !important;
	padding: 12px 24px !important;
	transition: background .2s, transform .2s !important;
	height: auto !important;
	min-height: 44px;
}
.wc-block-components-button:not(.is-link):hover,
.wp-block-button__link:hover {
	background-color: var(--thg-teal-deep) !important;
	border-color: var(--thg-teal-deep) !important;
	transform: translateY(-2px);
}

/* Text/link-style block buttons */
.wc-block-components-button.is-link {
	color: var(--thg-teal-deep) !important;
	background: transparent !important;
}

/* Inputs (text, email, select) */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	border: 1.5px solid var(--thg-ink) !important;
	border-radius: var(--thg-radius) !important;
	background: var(--thg-paper) !important;
	font-family: var(--thg-font-body) !important;
	color: var(--thg-ink) !important;
	transition: border-color .2s, box-shadow .2s !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-state-input select:focus {
	border-color: var(--thg-teal) !important;
	box-shadow: 0 0 0 3px rgba(42, 168, 144, 0.18) !important;
	outline: none !important;
}

/* Section / step titles */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart-order-summary-heading-block h2 {
	font-family: var(--thg-font-display) !important;
	letter-spacing: 0.02em !important;
	color: var(--thg-ink) !important;
}

/* Order summary panel */
.wp-block-woocommerce-cart-totals-block,
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--thg-teal-soft);
	border-radius: var(--thg-radius-lg);
	padding: clamp(20px, 2.5vw, 32px) !important;
	border: 1px solid var(--thg-fog);
}
.wc-block-components-totals-item__label {
	color: var(--thg-ink-soft) !important;
	font-weight: 500 !important;
}
.wc-block-components-totals-item__value {
	color: var(--thg-ink) !important;
	font-weight: 600 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 22px !important;
	color: var(--thg-ink) !important;
}

/* Cart line items table */
.wc-block-cart-items__row,
.wc-block-cart-item__wrap {
	border-bottom: 1px solid var(--thg-fog);
}
.wc-block-cart-items__header {
	font-family: var(--thg-font-display) !important;
	letter-spacing: 0.06em !important;
	color: var(--thg-ink) !important;
}
.wc-block-components-product-name {
	font-family: var(--thg-font-display) !important;
	font-size: 20px !important;
	letter-spacing: 0.02em !important;
	color: var(--thg-ink) !important;
	text-decoration: none !important;
}
.wc-block-components-product-name:hover { color: var(--thg-teal-deep) !important; }

/* Empty cart state */
.wp-block-woocommerce-empty-cart-block {
	text-align: center;
	padding: 48px 16px !important;
}

/* Cross-sells/upsells in the empty cart can be heavy — give them breathing room */
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--thg-font-display) !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	margin-top: 32px !important;
}

/* Coupon form */
.wc-block-components-totals-coupon__form button,
.wc-block-components-totals-coupon-link {
	color: var(--thg-teal-deep) !important;
	font-weight: 600 !important;
}

/* Checkout layout: two-column on wide screens */
@media (min-width: 1080px) {
	.wp-block-woocommerce-checkout {
		display: grid !important;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: clamp(28px, 3vw, 56px);
		align-items: start;
	}
}

/* =============================================================
   My Account — classic WC templates
   ============================================================= */

/* Container */
.woocommerce-account .woocommerce {
	max-width: var(--thg-container);
	margin: 0 auto;
}

/* Notice messages */
body.thg-wc-account .woocommerce-message,
body.thg-wc-cart .woocommerce-message,
body.thg-wc-checkout .woocommerce-message {
	background: var(--thg-teal-soft);
	border-left: 4px solid var(--thg-teal);
	border-radius: var(--thg-radius);
	padding: 14px 18px;
	color: var(--thg-ink);
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}
body.thg-wc-account .woocommerce-message a.button,
body.thg-wc-cart .woocommerce-message a.button {
	background: var(--thg-ink);
	color: var(--thg-paper);
	padding: 8px 16px;
	border-radius: var(--thg-radius);
	font-family: var(--thg-font-display);
	letter-spacing: 0.06em;
	text-decoration: none;
}

/* Login / Register form (Account page) */
.woocommerce-account .u-columns,
.woocommerce-account .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
}
@media (max-width: 720px) {
	.woocommerce-account .u-columns,
	.woocommerce-account .col2-set { grid-template-columns: 1fr; }
}
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(20px, 2.5vw, 32px);
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}
.woocommerce-account h2 {
	font-family: var(--thg-font-display);
	font-size: clamp(24px, 2.4vw, 32px);
	letter-spacing: 0.04em;
	color: var(--thg-ink);
	margin: 0 0 18px;
}

/* Inputs (classic) */
body.thg-wc-account input.input-text,
body.thg-wc-account .woocommerce-Input,
body.thg-wc-cart input.input-text,
body.thg-wc-checkout input.input-text,
body.thg-wc-checkout select,
body.thg-wc-account select,
body.thg-wc-cart input[type=text],
body.thg-wc-account input[type=text],
body.thg-wc-account input[type=email],
body.thg-wc-account input[type=password] {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--thg-ink);
	border-radius: var(--thg-radius);
	background: var(--thg-paper);
	font: inherit;
	font-size: 15px;
	color: var(--thg-ink);
	transition: border-color .2s, box-shadow .2s;
}
body.thg-wc-account input.input-text:focus,
body.thg-wc-account input:focus,
body.thg-wc-cart input:focus,
body.thg-wc-checkout input:focus {
	border-color: var(--thg-teal);
	box-shadow: 0 0 0 3px rgba(42, 168, 144, 0.18);
	outline: none;
}

/* Classic buttons (login submit, etc.) */
.woocommerce-account button.button,
.woocommerce-account .woocommerce-button,
.woocommerce-cart button.button,
.woocommerce-checkout button.button {
	background: var(--thg-ink) !important;
	color: var(--thg-paper) !important;
	border: 1.5px solid var(--thg-ink) !important;
	font-family: var(--thg-font-display) !important;
	font-size: 18px !important;
	letter-spacing: 0.06em !important;
	padding: 12px 24px !important;
	border-radius: var(--thg-radius) !important;
	cursor: pointer;
	transition: background .2s, transform .2s !important;
}
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce-button:hover,
.woocommerce-cart button.button:hover {
	background: var(--thg-teal-deep) !important;
	border-color: var(--thg-teal-deep) !important;
	transform: translateY(-2px);
}

/* Form rows */
.woocommerce-form-row { margin-bottom: 14px; }
.woocommerce-form__label { font-weight: 600; color: var(--thg-ink); margin-bottom: 6px; display: block; }

/* Logged-in My Account dashboard */
.woocommerce-MyAccount-navigation {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: 8px 0;
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 12px 18px;
	font-family: var(--thg-font-display);
	font-size: 17px;
	letter-spacing: 0.05em;
	color: var(--thg-ink);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background .2s, border-color .2s, color .2s;
}
.woocommerce-MyAccount-navigation a:hover {
	background: var(--thg-teal-soft);
	color: var(--thg-teal-deep);
}
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--thg-teal-soft);
	border-left-color: var(--thg-teal);
	color: var(--thg-teal-deep);
}

.woocommerce-MyAccount-content {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	padding: clamp(20px, 3vw, 36px);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--thg-font-display);
	letter-spacing: 0.02em;
	color: var(--thg-ink);
}

/* My Account layout: sidebar nav + content side-by-side */
@media (min-width: 880px) {
	.woocommerce-account .woocommerce > div.woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce > div.woocommerce-MyAccount-content {
		display: block;
	}
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: 28px;
		align-items: start;
	}
}

/* Account orders table */
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--thg-fog);
	text-align: left;
}
.woocommerce-orders-table th {
	font-family: var(--thg-font-display);
	letter-spacing: 0.06em;
	font-weight: 400;
	color: var(--thg-ink);
}

/* "Lost your password?" link */
.woocommerce-LostPassword a,
.woocommerce-account a {
	color: var(--thg-teal-deep);
}

/* =============================================================
   Content page (YouTube hub) — categories, video grid, playlists,
   subscribe, about. Loaded sitewide via thg-crew.css.
   ============================================================= */

/* Category pills under the hero */
.thg-content-categories { padding-block: clamp(16px, 2.5vw, 28px); }
.thg-content-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.thg-content-category {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border: 1.5px solid var(--thg-fog);
	border-radius: 999px;
	background: var(--thg-paper);
	color: var(--thg-ink);
	text-decoration: none;
	font-family: var(--thg-font-display);
	font-size: 15px;
	letter-spacing: 0.04em;
	transition: border-color .15s, background .15s, color .15s;
}
.thg-content-category:hover {
	border-color: var(--thg-teal);
	background: var(--thg-teal-soft);
	color: var(--thg-teal-deep);
}

/* Featured video section */
.thg-content-featured { padding-block: clamp(28px, 4vw, 48px); }

/* Recent videos grid */
.thg-content-videos { padding-block: clamp(40px, 5vw, 72px); }
.thg-content-videos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin-top: clamp(22px, 3vw, 32px);
}
.thg-content-video-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--thg-ink);
	transition: transform .15s, box-shadow .15s, border-color .15s;
	display: block;
}
.thg-content-video-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -10px rgba(2,2,2,0.18);
	border-color: var(--thg-teal);
}
.thg-content-video-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--thg-cream);
	overflow: hidden;
}
.thg-content-video-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thg-content-video-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 38px;
	color: var(--thg-paper);
	background: rgba(2,2,2,0.18);
	opacity: 0;
	transition: opacity .2s;
}
.thg-content-video-card:hover .thg-content-video-card__play { opacity: 1; }
.thg-content-video-card__body {
	padding: 14px 16px 18px;
}
.thg-content-video-card__body h3 {
	font-family: var(--thg-font-display);
	font-size: 18px;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0 0 6px;
}
.thg-content-video-card__body p {
	font-size: 13px;
	color: var(--thg-ink-soft);
	margin: 0;
}
.thg-content-videos__cta {
	text-align: center;
	margin-top: clamp(22px, 3vw, 32px);
}

/* Playlists showcase */
.thg-content-playlists { padding-block: clamp(40px, 5vw, 72px); }
.thg-content-playlists__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	margin-top: clamp(22px, 3vw, 32px);
}
.thg-content-playlist-card {
	background: var(--thg-paper);
	border: 1px solid var(--thg-fog);
	border-radius: var(--thg-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--thg-ink);
	transition: transform .15s, box-shadow .15s, border-color .15s;
	display: block;
}
.thg-content-playlist-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -10px rgba(2,2,2,0.18);
	border-color: var(--thg-teal);
}
.thg-content-playlist-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--thg-cream);
	overflow: hidden;
}
.thg-content-playlist-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thg-content-playlist-card__icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: rgba(2,2,2,0.7);
	color: var(--thg-paper);
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 14px;
	font-family: var(--thg-font-display);
	letter-spacing: 0.08em;
}
.thg-content-playlist-card__body {
	padding: 14px 16px 18px;
}
.thg-content-playlist-card__body h3 {
	font-family: var(--thg-font-display);
	font-size: 20px;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
}
.thg-content-playlist-card__body p {
	font-size: 14px;
	color: var(--thg-ink-soft);
	margin: 0;
}

/* Subscribe CTA */
.thg-content-subscribe {
	padding-block: clamp(56px, 7vw, 96px);
	text-align: center;
}
.thg-content-subscribe__title {
	font-family: var(--thg-font-display);
	font-size: clamp(36px, 4.5vw, 56px);
	letter-spacing: 0.01em;
	line-height: 1.05;
	margin: 10px 0 14px;
	color: var(--thg-ink);
}
.thg-content-subscribe__body {
	font-size: 17px;
	color: var(--thg-ink-soft);
	max-width: 560px;
	margin: 0 auto 22px;
}
.thg-content-subscribe__btn {
	font-size: 18px;
	padding: 14px 28px;
}

/* About the channel — image + text two-column */
.thg-content-about { padding-block: clamp(40px, 5vw, 72px); }
.thg-content-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.thg-content-about__media img {
	width: 100%;
	height: auto;
	border-radius: var(--thg-radius-lg);
	box-shadow: 0 16px 32px -16px rgba(2,2,2,0.3);
}
.thg-content-about__copy p {
	font-size: 17px;
	color: var(--thg-ink-soft);
	line-height: 1.7;
	margin: 0 0 14px;
	max-width: 620px;
}
@media (max-width: 820px) {
	.thg-content-about__inner { grid-template-columns: 1fr; }
	.thg-content-about__media img { max-width: 360px; margin: 0 auto; display: block; }
}