/*
Theme Name: Top Cat's Retro
Theme URI: https://example.com/topcats-retro
Author: Built for Top Cat's Retro
Author URI: https://example.com
Description: A standalone classic WooCommerce theme for Top Cat's Retro — mancave outfitters. Loud retro-signage design system: ink outlines, hard offset shadows, cream/pink/cyan/yellow palette, Vintage Town Extrude and Luckiest Guy display type. Full shop, cart, checkout and account styling, homepage section builder, and a striped placeholder system for products without photos.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topcats-retro
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
WC requires at least: 8.0
WC tested up to: 9.4
*/

/* =========================================================================
   1. FONTS  (self-hosted — supplied brand faces)
   ========================================================================= */

@font-face {
	font-family: "Vintage Town Extrude";
	src: url("assets/fonts/VintageTownExtrude.woff2") format("woff2"),
	     url("assets/fonts/VintageTownExtrude.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Luckiest Guy";
	src: url("assets/fonts/LuckiestGuy-Regular.woff2") format("woff2"),
	     url("assets/fonts/LuckiestGuy-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
   2. DESIGN TOKENS
   ========================================================================= */

:root {
	/* Core palette — lifted from the Top Cats Retro Store design */
	--tc-ink:            #111014;
	--tc-ink-soft:       #2B2830;
	--tc-cream:          #FBF4E4;
	--tc-cream-deep:     #F4EAD3;
	--tc-yellow:         #F7DE3A;
	--tc-pink:           #EC1E79;
	--tc-cyan:           #4FCDE8;

	/* Neutrals */
	--tc-grey:           #6D6772;
	--tc-grey-mid:       #8B858F;
	--tc-grey-light:     #9B95A1;
	--tc-line:           #C9C4CE;

	/* Semantic */
	--tc-bg:             var(--tc-cream);
	--tc-text:           var(--tc-ink);
	--tc-muted:          var(--tc-grey);
	--tc-accent:         var(--tc-pink);
	--tc-accent-2:       var(--tc-cyan);
	--tc-success:        #1E9E5A;
	--tc-error:          var(--tc-pink);

	/* Type */
	--tc-font-display:   "Luckiest Guy", Archivo, Impact, sans-serif;
	--tc-font-sign:      "Luckiest Guy", Archivo, Impact, sans-serif;
	--tc-font-body:      Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tc-font-mono:      "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--tc-track-mono:     .12em;
	--tc-track-sign:     .02em;

	/* Vintage Town Extrude carries its 3-D side faces inside each glyph, so the
	   ink runs ~0.2em wider than the advance. Without signage tracking the
	   letters merge into a blob — this pair of tokens is what keeps it legible.
	   The .tc-display-sign body class resets them for Luckiest Guy. */
	--tc-track-display:  .17em;
	--tc-lh-display:     1.5;

	/* Structure */
	--tc-border:         4px;
	--tc-border-thin:    3px;
	--tc-border-thick:   5px;

	--tc-radius-sm:      6px;
	--tc-radius:         10px;
	--tc-radius-lg:      20px;
	--tc-radius-pill:    44px;

	--tc-shadow-sm:      4px 4px 0 var(--tc-ink);
	--tc-shadow:         6px 6px 0 var(--tc-ink);
	--tc-shadow-lg:      12px 12px 0 var(--tc-ink);
	--tc-shadow-pink:    7px 7px 0 var(--tc-pink);
	--tc-shadow-cyan:    7px 7px 0 var(--tc-cyan);
	--tc-shadow-cream:   6px 6px 0 var(--tc-cream);
	--tc-shadow-soft:    0 6px 0 rgba(17, 16, 20, .12);

	/* Rhythm */
	--tc-wrap:           1240px;
	--tc-wrap-narrow:    820px;
	--tc-gutter:         clamp(16px, 4vw, 40px);
	--tc-section-y:      clamp(48px, 7vw, 92px);
	--tc-gap:            clamp(16px, 2.4vw, 28px);

	/* Motion */
	--tc-ease:           cubic-bezier(.2, .8, .3, 1);
	--tc-marquee-speed:  32s;
}

/* Headline face options — Customizer → Top Cat's Retro → Brand & behaviour.

   Default (no class): Luckiest Guy — the signage voice, readable at every size.

   .tc-display-extrude: Vintage Town Extrude. The face draws its 3-D side faces
   inside each glyph, so the ink runs ~0.2em wider than the advance width. It
   only works with signage tracking and open leading; set it tight and the
   letters merge. Use it on short headlines, not on long product titles.

   .tc-display-clean: Archivo Bold. The quietest option — for shops with long
   product names, or anywhere the display faces feel too loud. */

.tc-display-extrude {
	--tc-font-display:   "Vintage Town Extrude", "Luckiest Guy", Archivo, Impact, sans-serif;
	--tc-track-display:  .17em;
	--tc-lh-display:     1.5;
	--tc-weight-display: 400;
}

.tc-display-clean {
	--tc-font-display:   Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tc-track-display:  -.015em;
	--tc-lh-display:     1.05;
	--tc-weight-display: 700;
}

/* =========================================================================
   3. RESET / BASE
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--tc-bg);
	color: var(--tc-text);
	font-family: var(--tc-font-body);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a {
	color: var(--tc-pink);
	text-decoration: none;
	transition: color .15s var(--tc-ease);
}

a:hover,
a:focus { color: var(--tc-ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--tc-cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

hr {
	border: 0;
	border-top: var(--tc-border-thin) solid var(--tc-ink);
	margin: 2rem 0;
}

::selection {
	background: var(--tc-yellow);
	color: var(--tc-ink);
}

/* =========================================================================
   4. TYPOGRAPHY
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.tc-display,
.tc-sign {
	font-weight: 400;
	margin: 0 0 .55em;
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

h1, h2, .tc-display {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-weight-display);
	letter-spacing: var(--tc-track-display);
	line-height: var(--tc-lh-display);
	margin-bottom: .4em;
}

h3, h4, h5, h6, .tc-sign {
	font-family: var(--tc-font-sign);
	letter-spacing: var(--tc-track-sign);
	line-height: 1.02;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-cyan);
	font-size: 1.1rem;
}

code, pre, kbd {
	font-family: var(--tc-font-mono);
	font-size: .9em;
}

pre {
	padding: 1rem 1.25rem;
	background: var(--tc-ink);
	color: var(--tc-cream);
	border-radius: var(--tc-radius);
	overflow: auto;
}

/* Mono meta label — the small tracked-out type all over the design */
.tc-meta,
.tc-eyebrow,
.tc-kicker {
	font-family: var(--tc-font-mono);
	font-size: .78rem;
	letter-spacing: var(--tc-track-mono);
	text-transform: uppercase;
	color: var(--tc-muted);
}

.tc-eyebrow {
	display: inline-block;
	padding: .55em 1.1em;
	background: var(--tc-ink);
	color: var(--tc-yellow);
	border-radius: var(--tc-radius-sm);
	letter-spacing: .18em;
	font-size: .8rem;
}

.tc-section-title {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-weight-display);
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	letter-spacing: var(--tc-track-display);
	line-height: var(--tc-lh-display);
	margin: 0 0 .2em;
}

.tc-section-sub {
	font-family: var(--tc-font-mono);
	font-size: .92rem;
	letter-spacing: .04em;
	color: var(--tc-muted);
	text-transform: none;
	margin: 0 0 clamp(24px, 3vw, 44px);
}

.tc-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.tc-section-head .tc-section-sub { margin-bottom: 0; }

/* =========================================================================
   5. LAYOUT
   ========================================================================= */

.tc-wrap {
	width: 100%;
	max-width: var(--tc-wrap);
	margin-inline: auto;
	padding-inline: var(--tc-gutter);
}

.tc-wrap--narrow { max-width: var(--tc-wrap-narrow); }

.tc-section { padding-block: var(--tc-section-y); }

.tc-section--cream { background: var(--tc-cream); }
.tc-section--ink   { background: var(--tc-ink);   color: var(--tc-cream); }
.tc-section--pink  { background: var(--tc-pink);  color: var(--tc-ink); }
.tc-section--cyan  { background: var(--tc-cyan);  color: var(--tc-ink); }
.tc-section--yellow{ background: var(--tc-yellow);color: var(--tc-ink); }

.tc-section--ink .tc-section-title,
.tc-section--ink h1, .tc-section--ink h2, .tc-section--ink h3 { color: var(--tc-cream); }
.tc-section--ink .tc-section-sub { color: var(--tc-grey-light); }
.tc-section--ink a { color: var(--tc-yellow); }
.tc-section--ink a:hover { color: #fff; }

/* Buttons keep their own colour inside dark bands. */
.tc-section--ink a.tc-btn,
.tc-packages a.tc-btn { color: var(--tc-ink); }
.tc-section--ink a.tc-btn--pink { color: #fff; }
.tc-section--ink a.tc-btn--ink,
.tc-packages a.tc-btn--ink { color: var(--tc-yellow); }
.tc-section--ink a.tc-btn:hover { color: var(--tc-ink); }
.tc-section--ink a.tc-btn--pink:hover { color: #fff; }
.tc-section--ink a.tc-btn--ink:hover,
.tc-packages a.tc-btn--ink:hover { color: #fff; }

/* The hard black rule that separates coloured bands in the design */
.tc-band-edge { border-top: var(--tc-border-thick) solid var(--tc-ink); }

/* Dotted + striped backdrops */
.tc-dots {
	background-image: radial-gradient(rgba(17, 16, 20, .18) 1.6px, transparent 1.6px);
	background-size: 18px 18px;
}

.tc-stripes {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--tc-stripe, var(--tc-cyan)) 0 14px,
		var(--tc-cream) 14px 28px
	);
}

.tc-site-main { display: block; }

.tc-content-wrap {
	padding-block: clamp(32px, 5vw, 64px);
}

/* =========================================================================
   6. BUTTONS
   ========================================================================= */

.tc-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: .85em 1.9em;
	font-family: var(--tc-font-sign);
	font-size: 1.02rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tc-ink);
	background: var(--tc-cream);
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius-pill);
	box-shadow: var(--tc-shadow);
	cursor: pointer;
	text-align: center;
	transition: transform .12s var(--tc-ease), box-shadow .12s var(--tc-ease), background .15s var(--tc-ease);
	-webkit-appearance: none;
	appearance: none;
}

.tc-btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	color: var(--tc-ink);
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 var(--tc-ink);
}

.tc-btn:active,
button:active,
input[type="submit"]:active {
	transform: translate(6px, 6px);
	box-shadow: 0 0 0 var(--tc-ink);
}

.tc-btn--pink   { background: var(--tc-pink);   color: #fff; }
.tc-btn--pink:hover { color: #fff; }
.tc-btn--cyan   { background: var(--tc-cyan);   color: var(--tc-ink); }
.tc-btn--yellow { background: var(--tc-yellow); color: var(--tc-ink); }
.tc-btn--ink    { background: var(--tc-ink);    color: var(--tc-yellow); }
.tc-btn--ink:hover { color: #fff; }
.tc-btn--cream  { background: var(--tc-cream);  color: var(--tc-ink); }

.tc-btn--ghost {
	background: transparent;
	box-shadow: none;
}
.tc-btn--ghost:hover { background: var(--tc-ink); color: var(--tc-cream); transform: none; box-shadow: none; }

.tc-btn--lg {
	padding: 1.05em 2.4em;
	font-size: 1.18rem;
	box-shadow: var(--tc-shadow);
}

.tc-btn--sm {
	padding: .6em 1.2em;
	font-size: .85rem;
	border-width: var(--tc-border-thin);
	box-shadow: var(--tc-shadow-sm);
}

.tc-btn--block { display: flex; width: 100%; }

.tc-btn[disabled],
button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: var(--tc-shadow) !important;
}

.tc-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 2vw, 20px);
}

/* =========================================================================
   7. BADGES & CHIPS
   ========================================================================= */

.tc-badge {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .45em 1em;
	font-family: var(--tc-font-sign);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tc-ink);
	background: var(--tc-yellow);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius-pill);
	box-shadow: 1px 1px 0 var(--tc-ink);
	white-space: nowrap;
}

.tc-badge--pink  { background: var(--tc-pink);  color: #fff; }
.tc-badge--cyan  { background: var(--tc-cyan);  color: var(--tc-ink); }
.tc-badge--ink   { background: var(--tc-ink);   color: var(--tc-yellow); }
.tc-badge--cream { background: var(--tc-cream); color: var(--tc-ink); }

/* The little mono caption plates sitting on product imagery */
.tc-caption-plate {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: .4em .8em;
	background: var(--tc-ink);
	color: var(--tc-cream);
	font-family: var(--tc-font-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	border-radius: var(--tc-radius-sm);
	pointer-events: none;
}

/* Starburst disc — "20% off neon" */
.tc-starburst {
	display: grid;
	place-content: center;
	text-align: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--tc-yellow);
	border: var(--tc-border) solid var(--tc-ink);
	box-shadow: var(--tc-shadow-sm);
	font-family: var(--tc-font-sign);
	line-height: 1;
	rotate: -8deg;
}

.tc-starburst b { font-size: 1.7rem; display: block; font-weight: 400; }
.tc-starburst span { font-size: .72rem; letter-spacing: .08em; }

/* =========================================================================
   8. CARDS & SURFACES
   ========================================================================= */

.tc-card {
	position: relative;
	background: var(--tc-cream);
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
	overflow: hidden;
}

.tc-card--pop   { box-shadow: var(--tc-shadow-pink); }
.tc-card--cool  { box-shadow: var(--tc-shadow-cyan); }
.tc-card--flat  { box-shadow: none; }
.tc-card--white { background: #fff; }

.tc-card__body { padding: clamp(16px, 2vw, 22px); }

.tc-panel {
	background: #fff;
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
	padding: clamp(20px, 3vw, 32px);
}

/* Media frame with the dashed inner rule from the hero */
.tc-frame {
	position: relative;
	background: var(--tc-cream);
	border: var(--tc-border-thick) solid var(--tc-ink);
	border-radius: var(--tc-radius-lg);
	box-shadow: var(--tc-shadow-lg);
	padding: 14px;
	overflow: hidden;
}

.tc-frame__inner {
	position: relative;
	border: 2px dashed var(--tc-ink);
	border-radius: 8px;
	overflow: hidden;
	min-height: 260px;
}

/* =========================================================================
   9. FORMS
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.select2-container .select2-selection--single {
	width: 100%;
	padding: .85em 1.1em;
	font-family: var(--tc-font-body);
	font-size: 1rem;
	color: var(--tc-ink);
	background: #fff;
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius-pill);
	box-shadow: none;
	transition: box-shadow .15s var(--tc-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	border-radius: var(--tc-radius);
	min-height: 140px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--tc-grey-light);
	font-family: var(--tc-font-mono);
	font-size: .92em;
	letter-spacing: .03em;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	box-shadow: var(--tc-shadow-sm);
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111014' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1em center;
	padding-right: 2.6em;
}

label {
	display: block;
	font-family: var(--tc-font-mono);
	font-size: .78rem;
	letter-spacing: var(--tc-track-mono);
	text-transform: uppercase;
	color: var(--tc-ink);
	margin-bottom: .45em;
}

.tc-field { margin-bottom: 1.1rem; }

/* Search form */
.tc-search {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tc-search input[type="search"] { min-width: 0; }

/* =========================================================================
   10. TOP MARQUEE
   ========================================================================= */

.tc-marquee {
	position: relative;
	background: var(--tc-pink);
	color: #fff;
	border-bottom: var(--tc-border-thick) solid var(--tc-ink);
	overflow: hidden;
	padding-block: .85em;
}

.tc-marquee__track {
	display: flex;
	width: max-content;
	animation: tc-marquee var(--tc-marquee-speed) linear infinite;
}

.tc-marquee:hover .tc-marquee__track { animation-play-state: paused; }

.tc-marquee__group {
	display: flex;
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	padding-right: clamp(28px, 5vw, 64px);
}

.tc-marquee__item {
	font-family: var(--tc-font-sign);
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tc-marquee__star {
	color: var(--tc-yellow);
	font-size: 1rem;
	line-height: 1;
}

@keyframes tc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Visitors with "reduce motion" turned on get a static, centred bar rather
   than a stalled scroller with a stray scrollbar. */
@media (prefers-reduced-motion: reduce) {
	.tc-marquee { overflow: hidden; }

	.tc-marquee__track {
		width: 100%;
		justify-content: center;
		animation: none;
	}

	.tc-marquee__group {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: .35em;
		padding-right: 0;
	}

	.tc-marquee__group[aria-hidden="true"] { display: none; }
}

/* Customizer → Promo marquee → "Always scroll" overrides the above, including
   the global reduced-motion damper, for shops that want the bar moving for
   everyone. */
body.tc-marquee-force .tc-marquee { overflow: hidden; }

body.tc-marquee-force .tc-marquee__track {
	width: max-content !important;
	justify-content: flex-start !important;
	animation: tc-marquee var(--tc-marquee-speed) linear infinite !important;
	animation-duration: var(--tc-marquee-speed) !important;
	animation-play-state: running !important;
}

body.tc-marquee-force .tc-marquee:hover .tc-marquee__track { animation-play-state: paused !important; }

body.tc-marquee-force .tc-marquee__group {
	flex-wrap: nowrap !important;
	padding-right: clamp(28px, 5vw, 64px);
}

body.tc-marquee-force .tc-marquee__group[aria-hidden="true"] { display: flex !important; }

/* =========================================================================
   11. SITE HEADER
   ========================================================================= */

.tc-header {
	position: relative;
	z-index: 40;
	background: var(--tc-cream);
	border-bottom: var(--tc-border-thick) solid var(--tc-ink);
}

.tc-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.5vw, 32px);
	padding-block: clamp(10px, 1.4vw, 16px);
}

.tc-brand {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.tc-brand img {
	width: auto;
	height: clamp(52px, 6vw, 74px);
}

.tc-brand__text {
	font-family: var(--tc-font-display);
	font-size: 1.7rem;
	color: var(--tc-ink);
	line-height: 1;
}

.tc-nav { flex: 1 1 auto; }

.tc-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-nav a {
	font-family: var(--tc-font-sign);
	font-size: clamp(.95rem, 1.2vw, 1.08rem);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--tc-ink);
	padding: .2em 0;
	border-bottom: 3px solid transparent;
}

.tc-nav a:hover,
.tc-nav .current-menu-item > a,
.tc-nav .current_page_item > a,
.tc-nav .current-menu-parent > a {
	color: var(--tc-pink);
	border-bottom-color: var(--tc-pink);
}

/* Dropdowns */
.tc-nav li { position: relative; }

.tc-nav .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: -14px;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 8px;
	background: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .15s var(--tc-ease), transform .15s var(--tc-ease), visibility .15s;
}

.tc-nav li:hover > .sub-menu,
.tc-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tc-nav .sub-menu a {
	display: block;
	padding: .5em .7em;
	border-bottom: 0;
	border-radius: var(--tc-radius-sm);
	font-size: .95rem;
}

.tc-nav .sub-menu a:hover { background: var(--tc-yellow); color: var(--tc-ink); }

.tc-header__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.4vw, 16px);
}

.tc-header__search { width: clamp(190px, 21vw, 290px); }

/* WooCommerce's product search form is block-level and ships a full-width
   submit button. Lay it out as one row and turn the submit into a round icon
   button, so the input and the cart button share a baseline. */
.tc-header__search form,
.tc-header__search .woocommerce-product-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.tc-header__search input[type="search"],
.tc-header__search .search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: .7em 1.1em;
	font-size: .95rem;
}

.tc-header__search button[type="submit"],
.tc-header__search input[type="submit"] {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background-color: var(--tc-cyan);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23111014' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.8 12.8 17 17'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--tc-ink);
}

.tc-header__search button[type="submit"]:hover,
.tc-header__search input[type="submit"]:hover { background-color: var(--tc-yellow); }

/* Same treatment inside the mobile drawer, where there is room for a full button. */
.tc-mobile-nav form,
.tc-mobile-nav .woocommerce-product-search { display: flex; gap: 8px; align-items: center; }
.tc-mobile-nav .search-field { flex: 1 1 auto; min-width: 0; }

/* Cart button */
.tc-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .7em 1.35em;
	font-family: var(--tc-font-sign);
	font-size: 1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tc-ink);
	background: var(--tc-yellow);
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius-pill);
	box-shadow: var(--tc-shadow-sm);
	cursor: pointer;
	transition: transform .12s var(--tc-ease), box-shadow .12s var(--tc-ease);
}

.tc-cart-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tc-ink); color: var(--tc-ink); }

.tc-cart-btn__count {
	display: grid;
	place-content: center;
	min-width: 26px;
	height: 26px;
	padding-inline: .35em;
	border-radius: 50px;
	background: var(--tc-pink);
	color: #fff;
	font-size: .85rem;
	line-height: 1;
}

/* Burger */
.tc-burger {
	display: none;
	width: 52px;
	height: 52px;
	padding: 0;
	background: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius-sm);
	box-shadow: 3px 3px 0 var(--tc-ink);
}

.tc-burger span {
	display: block;
	width: 24px;
	height: 3px;
	margin: 4px auto;
	background: var(--tc-ink);
	border-radius: 2px;
	transition: transform .2s var(--tc-ease), opacity .2s var(--tc-ease);
}

.tc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.tc-mobile-nav {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(88vw, 400px);
	z-index: 90;
	background: var(--tc-cream);
	border-left: var(--tc-border-thick) solid var(--tc-ink);
	padding: 24px var(--tc-gutter) 40px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .28s var(--tc-ease);
}

.tc-mobile-nav.is-open { transform: translateX(0); }

.tc-mobile-nav ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.tc-mobile-nav li { border-bottom: 2px solid rgba(17, 16, 20, .12); }

.tc-mobile-nav a {
	display: block;
	padding: .8em 0;
	font-family: var(--tc-font-sign);
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--tc-ink);
}

.tc-mobile-nav .sub-menu { margin: 0 0 .5rem 1rem; }
.tc-mobile-nav .sub-menu a { font-size: 1rem; font-family: var(--tc-font-body); text-transform: none; }

.tc-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(17, 16, 20, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--tc-ease), visibility .25s;
}

.tc-overlay.is-open { opacity: 1; visibility: visible; }

body.tc-locked { overflow: hidden; }

/* =========================================================================
   12. HERO
   ========================================================================= */

.tc-hero {
	position: relative;
	background: var(--tc-cyan);
	border-bottom: var(--tc-border-thick) solid var(--tc-ink);
	padding-block: clamp(40px, 6vw, 84px);
	overflow: hidden;
}

.tc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.tc-hero__title {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-weight-display);
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	letter-spacing: var(--tc-track-display);
	line-height: var(--tc-lh-display);
	margin: .25em 0 .35em;
	color: var(--tc-yellow);
	text-shadow: 3px 3px 0 var(--tc-ink);
}

.tc-hero__title span {
	display: block;
	color: var(--tc-pink);
}

.tc-hero__text {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	max-width: 46ch;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.tc-hero__media { position: relative; }

.tc-hero__badge {
	position: absolute;
	top: -34px;
	right: -14px;
	z-index: 2;
}

.tc-hero__proof {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 3vw, 34px);
	margin-top: clamp(24px, 3vw, 38px);
	font-family: var(--tc-font-mono);
	font-size: .82rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tc-ink);
}

.tc-hero__stars { color: var(--tc-ink); letter-spacing: .1em; }

/* =========================================================================
   13. CATEGORY GRID
   ========================================================================= */

.tc-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--tc-gap);
}

.tc-cat {
	display: block;
	color: var(--tc-ink);
	background: var(--tc-cream);
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
	overflow: hidden;
	transition: transform .14s var(--tc-ease), box-shadow .14s var(--tc-ease);
}

.tc-cat:hover {
	color: var(--tc-ink);
	transform: translate(3px, 3px);
	box-shadow: 3px 3px 0 var(--tc-ink);
}

.tc-cat__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-bottom: var(--tc-border) solid var(--tc-ink);
	overflow: hidden;
}

.tc-cat__media img { width: 100%; height: 100%; object-fit: cover; }

.tc-cat__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 14px 18px 16px;
}

.tc-cat__name {
	font-family: var(--tc-font-sign);
	font-size: 1.22rem;
	text-transform: uppercase;
	margin: 0;
}

.tc-cat__count {
	font-family: var(--tc-font-mono);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--tc-muted);
	white-space: nowrap;
}

/* =========================================================================
   14. PACKAGE BUILDER BAND
   ========================================================================= */

.tc-packages {
	background: var(--tc-pink);
	color: var(--tc-ink);
	border-block: var(--tc-border-thick) solid var(--tc-ink);
	background-image: repeating-linear-gradient(
		90deg,
		rgba(17, 16, 20, .07) 0 2px,
		transparent 2px 14px
	);
}

.tc-packages__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.tc-packages__title {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-weight-display);
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	letter-spacing: var(--tc-track-display);
	line-height: var(--tc-lh-display);
	color: var(--tc-yellow);
	text-shadow: 3px 3px 0 var(--tc-ink);
	margin-bottom: .35em;
}

.tc-packages__list { display: grid; gap: 16px; }

.tc-package {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 18px 24px;
	background: var(--tc-ink);
	color: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-yellow);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-cream);
}

.tc-package__name {
	font-family: var(--tc-font-sign);
	font-size: 1.2rem;
	text-transform: uppercase;
	margin: 0 0 .25em;
	color: var(--tc-cream);
}

.tc-package__desc {
	font-family: var(--tc-font-mono);
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--tc-grey-light);
	margin: 0;
}

.tc-package__price {
	font-family: var(--tc-font-sign);
	font-size: 1.5rem;
	color: var(--tc-pink);
	white-space: nowrap;
}

/* =========================================================================
   15. TESTIMONIALS
   ========================================================================= */

.tc-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--tc-gap);
}

.tc-quote {
	background: #fff;
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-cyan);
	padding: clamp(18px, 2.4vw, 26px);
}

.tc-quote__stars {
	color: var(--tc-pink);
	letter-spacing: .18em;
	font-size: 1rem;
	margin-bottom: .8rem;
}

.tc-quote__text { font-size: 1.05rem; margin-bottom: 1.2rem; }

.tc-quote__who {
	font-family: var(--tc-font-mono);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tc-muted);
}

/* =========================================================================
   16. NEWSLETTER
   ========================================================================= */

.tc-newsletter {
	background: var(--tc-cyan);
	border-block: var(--tc-border-thick) solid var(--tc-ink);
	text-align: center;
}

.tc-newsletter__title {
	font-family: var(--tc-font-display);
	font-weight: var(--tc-weight-display);
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	letter-spacing: var(--tc-track-display);
	line-height: var(--tc-lh-display);
	margin-bottom: .3em;
}

.tc-newsletter__text {
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: clamp(22px, 3vw, 32px);
	font-size: 1.06rem;
}

.tc-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.tc-newsletter__form input[type="email"] {
	flex: 0 1 340px;
	border-width: var(--tc-border);
	box-shadow: var(--tc-shadow-sm);
	padding: 1em 1.4em;
}

/* =========================================================================
   17. FOOTER
   ========================================================================= */

.tc-footer {
	background: var(--tc-ink);
	color: var(--tc-cream);
	padding-top: clamp(40px, 5vw, 68px);
}

.tc-footer a { color: var(--tc-cream); }
.tc-footer a:hover { color: var(--tc-yellow); }

.tc-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(26px, 4vw, 52px);
	padding-bottom: clamp(32px, 4vw, 52px);
}

.tc-footer__brand img {
	width: 190px;
	background: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-yellow);
	border-radius: var(--tc-radius-sm);
	padding: 10px;
	margin-bottom: 18px;
}

.tc-footer__address {
	font-family: var(--tc-font-mono);
	font-size: .84rem;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--tc-grey-light);
	white-space: pre-line;
}

.tc-footer__heading {
	font-family: var(--tc-font-sign);
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tc-yellow);
	margin: 0 0 1rem;
}

.tc-footer ul { list-style: none; margin: 0; padding: 0; }
.tc-footer li { margin-bottom: .6em; }

.tc-footer__club {
	margin-top: clamp(24px, 3vw, 36px);
	max-width: 46ch;
}

.tc-footer__bar {
	border-top: 2px solid rgba(251, 244, 228, .18);
	padding-block: 20px;
	text-align: center;
	font-family: var(--tc-font-mono);
	font-size: .76rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tc-grey-light);
}

.tc-socials {
	display: flex;
	gap: 10px;
	margin-top: 1rem;
}

.tc-socials a {
	display: grid;
	place-content: center;
	width: 42px;
	height: 42px;
	border: 2px solid var(--tc-cream);
	border-radius: 50%;
}

.tc-socials a:hover { background: var(--tc-yellow); border-color: var(--tc-yellow); color: var(--tc-ink); }

/* =========================================================================
   18. POSTS / PAGES
   ========================================================================= */

.tc-entry {
	background: #fff;
	border: var(--tc-border) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
	padding: clamp(22px, 3.4vw, 44px);
}

.tc-entry__title { margin-bottom: .3em; }

.tc-entry__meta {
	font-family: var(--tc-font-mono);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tc-muted);
	margin-bottom: 1.6rem;
}

.tc-entry__content > *:first-child { margin-top: 0; }

.tc-entry__content ul,
.tc-entry__content ol { padding-left: 1.3em; }

.tc-entry__content li { margin-bottom: .45em; }

.tc-entry__content img { border-radius: var(--tc-radius); }

.tc-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--tc-gap);
}

.tc-post-card__media {
	aspect-ratio: 3 / 2;
	border-bottom: var(--tc-border) solid var(--tc-ink);
	overflow: hidden;
}

.tc-post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.tc-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(28px, 4vw, 48px);
}

.tc-pagination .page-numbers {
	display: grid;
	place-content: center;
	min-width: 48px;
	height: 48px;
	padding-inline: .7em;
	font-family: var(--tc-font-sign);
	color: var(--tc-ink);
	background: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius-pill);
	box-shadow: 3px 3px 0 var(--tc-ink);
}

.tc-pagination .page-numbers.current,
.tc-pagination .page-numbers:hover {
	background: var(--tc-pink);
	color: #fff;
}

/* Comments */
.tc-comments { margin-top: clamp(32px, 4vw, 56px); }
.tc-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.tc-comments .comment-body {
	background: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	padding: 18px 22px;
	margin-bottom: 18px;
}
.tc-comments .children { list-style: none; margin-left: clamp(14px, 3vw, 40px); padding: 0; }

/* =========================================================================
   19. WIDGETS / SIDEBAR
   ========================================================================= */

.tc-sidebar .widget {
	background: var(--tc-cream);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow-sm);
	padding: 20px 22px;
	margin-bottom: var(--tc-gap);
}

.tc-sidebar .widget-title,
.tc-sidebar .wp-block-heading {
	font-family: var(--tc-font-sign);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .8rem;
}

.tc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.tc-sidebar li { padding: .4em 0; border-bottom: 1px solid rgba(17, 16, 20, .12); }
.tc-sidebar li:last-child { border-bottom: 0; }

/* =========================================================================
   20. UTILITIES
   ========================================================================= */

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

.skip-link:focus {
	position: fixed;
	top: 12px; left: 12px;
	z-index: 200;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: .8em 1.4em;
	background: var(--tc-yellow);
	color: var(--tc-ink);
	border: var(--tc-border-thin) solid var(--tc-ink);
	border-radius: var(--tc-radius-pill);
	font-family: var(--tc-font-sign);
}

.tc-tilt-l { rotate: -2deg; }
.tc-tilt-r { rotate: 2deg; }
.tc-center { text-align: center; }
.tc-mt-0 { margin-top: 0; }
.tc-mb-0 { margin-bottom: 0; }

.alignwide  { max-width: calc(var(--tc-wrap) - 80px); margin-inline: auto; }
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }

.tc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--tc-gap); }
.tc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--tc-gap); }

.tc-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}

/* =========================================================================
   21. RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
	.tc-header__search { display: none; }
}

@media (max-width: 960px) {
	.tc-nav { display: none; }
	.tc-burger { display: block; }
	.tc-header__inner { justify-content: space-between; }
	.tc-hero__grid,
	.tc-packages__grid,
	.tc-with-sidebar { grid-template-columns: minmax(0, 1fr); }
	.tc-hero__badge { top: -26px; right: 6px; }
	.tc-starburst { width: 96px; height: 96px; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.tc-btn-row .tc-btn { width: 100%; }
	.tc-newsletter__form input[type="email"] { flex: 1 1 100%; }
	.tc-newsletter__form .tc-btn { width: 100%; }
	.tc-package { flex-direction: column; align-items: flex-start; gap: .6rem; }
	.tc-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
	.tc-marquee, .tc-header__tools, .tc-newsletter, .tc-footer, .tc-burger { display: none !important; }
	body { background: #fff; }
	.tc-card, .tc-panel { box-shadow: none; }
}