/*
 * Team Grassroots components: buttons, contextual tabs, header, footer,
 * mobile side menu + bottom bar. Behaviour is in assets/js/nav.js.
 */

/* ===== Buttons ===== */
.tg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--tg-sp-2);
	min-height: var(--tg-tap);
	padding: 0 var(--tg-sp-5);
	border: var(--tg-bw-thick) solid transparent;
	border-radius: var(--tg-radius);
	font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm);
	line-height: 1; text-decoration: none; white-space: nowrap;
	transition: background var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease);
}
.tg-btn:hover { text-decoration: none; }
/* Fill is the accessible green: white on the brand green is 2.74:1, which
   fails WCAG AA for button-sized text. */
.tg-btn--primary { background: var(--tg-green-fill); color: #fff; }
.tg-btn--primary:hover { background: #35691a; }
.tg-btn--dark { background: var(--tg-black); color: #fff; }
.tg-btn--dark:hover { background: var(--tg-n-800); }
.tg-btn--outline { background: transparent; color: var(--tg-text); border-color: currentColor; }
.tg-btn--block { display: flex; width: 100%; }

/* ===== Contextual tab row (disguised secondary nav) ===== */
.tg-tabs { background: var(--tg-bg); }
.tg-tabs__scroll {
	display: flex; gap: var(--tg-sp-3);
	overflow-x: auto; scroll-snap-type: x proximity;
	padding-block: var(--tg-sp-4);
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tg-tabs__scroll::-webkit-scrollbar { display: none; }
/*
 * Fade the cut edge so a clipped tab reads as "there is more", not as broken
 * markup. The Coaching Hub's eight tabs are long enough to overflow even at
 * 1440, where the site-section row fitted, and the last pill was landing
 * exactly on the viewport edge.
 *
 * The classes are set by nav.js only while the row really does overflow: a
 * mask applied unconditionally would fade the last tab on every row that fits.
 */
.tg-tabs__scroll.is-overflowing {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.tg-tabs__scroll.is-overflowing.is-scrolled {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent);
}
.tg-tabs__scroll.is-overflowing.is-at-end {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
	mask-image: linear-gradient(to right, transparent, #000 40px);
}
.tg-tabs__scroll.is-overflowing.is-at-end:not(.is-scrolled) {
	-webkit-mask-image: none;
	mask-image: none;
}
.tg-tab {
	display: inline-flex; align-items: center; gap: var(--tg-sp-2);
	flex: 0 0 auto; scroll-snap-align: start;
	min-height: var(--tg-tap); padding: 0 var(--tg-sp-4);
	border: var(--tg-bw) solid var(--tg-green-line);
	border-radius: var(--tg-radius-pill);
	background: var(--tg-bg); color: var(--tg-text);
	font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm);
	white-space: nowrap;
}
.tg-tab:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-tab[aria-current="page"], .tg-tab.is-active { background: var(--tg-green-fill); border-color: var(--tg-green-fill); color: #fff; }
.tg-tab__icon { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* ===== Shared section furniture (global) ===== */
.tg-section-head { font-size: clamp(var(--tg-fs-xl), 3vw, var(--tg-fs-2xl)); margin: 0 0 var(--tg-sp-5); }
.tg-section-head .tg-accent, .tg-accent { color: var(--tg-green); }
.tg-section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tg-sp-4); margin-bottom: var(--tg-sp-5); flex-wrap: wrap; }
.tg-section-head-row .tg-section-head { margin: 0; }
.tg-viewall { font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); color: var(--tg-link); white-space: nowrap; }
/* Eyebrows sit on light grounds, where the brand green is 2.74:1 at 12px. */
.tg-eyebrow { text-transform: uppercase; letter-spacing: .06em; font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-xs); color: var(--tg-green-text); margin: 0 0 var(--tg-sp-2); }
.tg-dark .tg-eyebrow, .tg-eyebrow.tg-eyebrow--light { color: var(--tg-green); }

.tg-chip {
	display: inline-block; padding: 3px 10px; border-radius: var(--tg-radius-sm);
	background: var(--tg-green-fill); color: #fff; font-size: 11px; font-weight: var(--tg-fw-bold);
	text-transform: uppercase; letter-spacing: .04em;
}
.tg-chip--alert { background: var(--tg-error); }
.tg-badge { position: absolute; top: 10px; left: 10px; background: var(--tg-green-fill); color: #fff; font-size: 11px; font-weight: var(--tg-fw-bold); padding: 3px 8px; border-radius: var(--tg-radius-sm); text-transform: uppercase; }

/* Article/news card (global) */
.tg-post-card { display: flex; flex-direction: column; }
.tg-post-card__media { position: relative; display: block; aspect-ratio: 16/10; border-radius: var(--tg-radius); overflow: hidden; background: var(--tg-n-200); }
.tg-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tg-post-card__media .tg-chip { position: absolute; top: 10px; left: 10px; }
.tg-post-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--tg-n-300), var(--tg-n-200)); }
.tg-post-card__title { font-size: var(--tg-fs-md); margin: var(--tg-sp-3) 0 var(--tg-sp-2); line-height: 1.25; }
.tg-post-card__title a { color: inherit; }
.tg-post-card__meta { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin: 0; }
.tg-post-card--row { flex-direction: row; gap: var(--tg-sp-3); align-items: center; }
.tg-post-card--row .tg-post-card__media { width: 88px; flex: 0 0 88px; aspect-ratio: 1; border-radius: var(--tg-radius-sm); }
.tg-post-card--row .tg-post-card__title { font-size: var(--tg-fs-sm); margin: 0 0 4px; }

/* ===== Search results page ===== */
.tg-searchpage__head { padding-bottom: var(--tg-sp-5); margin-bottom: var(--tg-sp-6); border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-searchpage__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); color: var(--tg-green-text); margin: 0 0 var(--tg-sp-1); }
.tg-searchpage__title { font-size: clamp(var(--tg-fs-2xl), 4vw, var(--tg-fs-3xl)); margin: 0; }
.tg-searchpage__count { color: var(--tg-text-muted); margin: var(--tg-sp-2) 0 var(--tg-sp-4); }
.tg-searchpage__form { max-width: 520px; }
.tg-searchgroup { margin-bottom: var(--tg-sp-8); }
.tg-searchgroup__title { font-size: var(--tg-fs-lg); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 var(--tg-sp-5); }
.tg-searchgrid { display: grid; gap: var(--tg-sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tg-searchgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tg-searchgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg-searchempty { text-align: center; padding: var(--tg-sp-8) var(--tg-sp-4); max-width: 560px; margin: 0 auto; }
.tg-searchempty h2 { margin: 0 0 var(--tg-sp-3); }
.tg-searchempty p { color: var(--tg-text-muted); margin: 0 0 var(--tg-sp-5); }
.tg-searchempty__links { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); justify-content: center; }

/* ===== 404 ===== */
.tg-404 { text-align: center; max-width: 640px; margin: 0 auto; padding-block: var(--tg-sp-8); }
.tg-404__code { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--tg-green); margin: 0; }
.tg-404__title { font-size: clamp(var(--tg-fs-2xl), 4vw, var(--tg-fs-3xl)); margin: 0 0 var(--tg-sp-3); }
.tg-404__lead { color: var(--tg-text-muted); margin: 0 auto var(--tg-sp-5); max-width: 48ch; }
.tg-404__search { max-width: 480px; margin: 0 auto var(--tg-sp-6); text-align: left; }
.tg-404__links { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); justify-content: center; }

/* ===== Forms (contact + shared) ===== */
.tg-form { max-width: 720px; }
.tg-form__row { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-4); }
@media (min-width: 560px) { .tg-form__row { grid-template-columns: 1fr 1fr; } }
.tg-field { margin-bottom: var(--tg-sp-4); }
.tg-field label { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); margin-bottom: var(--tg-sp-2); }
/* The required marker carries meaning, so it has to pass as text. */
.tg-req { color: var(--tg-green-text); }
.tg-field input, .tg-field select, .tg-field textarea {
	width: 100%; min-height: var(--tg-tap); padding: var(--tg-sp-3) var(--tg-sp-4);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	/* background-COLOR, not the shorthand: a select's chevron is a background image. */
	background-color: var(--tg-bg); color: var(--tg-text); font: inherit; font-size: var(--tg-fs-base);
}
.tg-field select { padding-right: calc(var(--tg-sp-4) + 20px); }
.tg-field textarea { min-height: 140px; resize: vertical; }
.tg-field input:focus, .tg-field select:focus, .tg-field textarea:focus { border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2); }
/* On dark surfaces (hubs, contact form) the default var(--tg-bg) fill blends into
   the page; give fields an elevated fill + lighter border so they read clearly. */
.tg-dark .tg-field input, .tg-dark .tg-field select, .tg-dark .tg-field textarea {
	background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: #fff;
}
.tg-dark .tg-field input::placeholder, .tg-dark .tg-field textarea::placeholder { color: rgba(255,255,255,.5); }
.tg-dark .tg-field select option { color: #111; }
.tg-check { display: flex; align-items: flex-start; gap: var(--tg-sp-2); margin-bottom: var(--tg-sp-5); font-size: var(--tg-fs-sm); }
.tg-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--tg-green); flex: 0 0 auto; }

/* ===== Search (form + predictive results) ===== */
.tg-search { position: relative; display: flex; align-items: center; gap: var(--tg-sp-2); }
.tg-search__input {
	flex: 1; min-height: var(--tg-tap);
	padding: 0 var(--tg-sp-4); border: var(--tg-bw) solid var(--tg-border-strong);
	border-radius: var(--tg-radius-pill); background: var(--tg-white); color: var(--tg-ink);
	font-size: var(--tg-fs-base);
}
/* Matches the other fields (.tg-field, select, newsletter): green border plus a
   soft green halo, rather than the pill keeping its grey border and relying on
   the ring alone. */
.tg-search__input:focus,
.tg-search__input:focus-visible {
	border-color: var(--tg-green); outline: none;
	box-shadow: 0 0 0 3px rgba(95,175,45,.25);
}
.tg-search__results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--tg-z-drawer);
	background: var(--tg-white); color: var(--tg-ink);
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius);
	box-shadow: var(--tg-shadow-lg); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.tg-search__group { margin: 0; padding: var(--tg-sp-2) var(--tg-sp-4); font-size: var(--tg-fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--tg-fw-bold); color: var(--tg-text-muted); background: var(--tg-paper); border-bottom: var(--tg-bw) solid var(--tg-border); position: sticky; top: 0; }
.tg-search__result { display: flex; align-items: center; gap: var(--tg-sp-3); padding: var(--tg-sp-3) var(--tg-sp-4); border-bottom: var(--tg-bw) solid var(--tg-border); color: var(--tg-ink); }
.tg-search__result:hover, .tg-search__result:focus { background: var(--tg-paper); text-decoration: none; outline: 2px solid var(--tg-green); outline-offset: -2px; }
.tg-search__result img, .tg-search__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--tg-radius-sm); flex: none; }
.tg-search__thumb { display: inline-flex; align-items: center; justify-content: center; background: var(--tg-paper); border: var(--tg-bw) solid var(--tg-border); color: var(--tg-text-muted); font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); }
.tg-search__thumb--brand::before { content: 'B'; }
.tg-search__thumb--club::before { content: 'C'; }
.tg-search__thumb--post::before { content: 'N'; }
.tg-search__result-text { display: flex; flex-direction: column; }
.tg-search__result-title { font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); }
.tg-search__result-meta { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-search__empty { margin: 0; padding: var(--tg-sp-4); font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }

/* Visible delivery-threshold strip (shop). */
.tg-deliverybar { display: flex; align-items: center; justify-content: center; gap: var(--tg-sp-2); margin: var(--tg-sp-4) 0; padding: var(--tg-sp-2) var(--tg-sp-4); background: var(--tg-paper); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); color: var(--tg-ink); }
.tg-deliverybar svg { color: var(--tg-green); flex: none; }
.tg-deliverybar--wide { border-radius: 0; border-inline: 0; }

/* ===== Header ===== */
.tg-header {
	position: sticky; top: 0; z-index: var(--tg-z-header);
	background: var(--tg-black); color: #fff;
	border-bottom: var(--tg-bw) solid var(--tg-n-800);
}
.tg-header__bar {
	display: flex; align-items: center; gap: var(--tg-sp-4);
	min-height: var(--tg-header-h);
}
/* The logo must not be squeezed out.

   It is a flex child with no shrink protection, so the nav simply took the room:
   measured at 1400 the logo was 171px wide, at 1300 it was 83px, and from 1200
   down it was ZERO - crushed to nothing while the header still reported no
   overflow. Nine top-level nav items made that worse, but the fault was always
   there. */
.tg-header__logo { display: inline-flex; align-items: center; margin-right: auto; flex: 0 0 auto; min-width: 0; }
.tg-header__logo img, .tg-header__logo .custom-logo { flex: 0 0 auto; }
.tg-header__logo .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.tg-header__logo img, .tg-header__logo .custom-logo { max-height: 30px; width: auto; height: auto; }

/* The supplied logo (Team_Grassroots_logo_web.png, 471x78) is drawn for a LIGHT
   background: a black wordmark beside a GRF roundel whose interior is white.
   Both the header and the footer are --tg-black, so as supplied the wordmark is
   invisible.
   invert(1), NOT brightness(0) invert(1): flattening every pixel to white turns
   the roundel into a featureless white disc, because its black linework and its
   white interior end up the same colour. Plain invert keeps figure and ground,
   so the wordmark reverses to white and the roundel keeps its detail.
   This is a stand-in. When a proper reversed asset arrives (ideally SVG, and
   with the brand green), drop the filter in one line:
   :root { --tg-logo-filter: none; } */
:root { --tg-logo-filter: invert(1); }
.tg-header__logo img, .tg-header__logo .custom-logo,
.tg-footer__logo img, .tg-footer__logo .custom-logo { filter: var(--tg-logo-filter); }
@media (max-width: 600px) { .tg-header__logo img, .tg-header__logo .custom-logo { max-height: 26px; } }
.tg-header__wordmark { color: #fff; font-family: var(--tg-font-head); font-size: var(--tg-fs-lg); letter-spacing: .02em; }
.tg-header__wordmark span { color: var(--tg-green); }
.tg-header__actions { display: flex; align-items: center; gap: var(--tg-sp-2); }

/* ===== Mega menu (desktop) ===== */
.tg-mega { display: none; }
/* The gap tightens as the viewport narrows.

   The nav runs from 900px up and carries NINE top-level items since Tournaments
   was added. At a fixed sp-5 gap the labels no longer fitted, and because each
   one is an inline-flex box they absorbed the shortfall by BREAKING MID-LABEL:
   "CLUB / SHOPS", "NEWS & / COMMUNITY", "TEAM / FINDER" all went to two lines,
   which measures as zero overflow while looking broken. */
.tg-mega__list { display: flex; gap: clamp(var(--tg-sp-3), 1.5vw, var(--tg-sp-5)); margin: 0; padding: 0; list-style: none; }
.tg-mega__item { position: static; }
.tg-mega__top { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tg-header-h); color: #fff; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.tg-mega__top:hover { color: var(--tg-green); text-decoration: none; }
.tg-mega__caret { transition: transform var(--tg-dur) var(--tg-ease); }
.tg-mega__panel {
	position: absolute; left: 0; right: 0; top: 100%; z-index: var(--tg-z-header);
	background: #fff; color: var(--tg-ink); border-top: 3px solid var(--tg-green);
	box-shadow: var(--tg-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease), visibility var(--tg-dur);
}
.tg-mega__item:hover > .tg-mega__panel,
.tg-mega__item:focus-within > .tg-mega__panel,
.tg-mega__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.tg-mega__item:hover .tg-mega__caret, .tg-mega__top[aria-expanded="true"] .tg-mega__caret { transform: rotate(90deg); }
/* Navigation is set in caps throughout: the header's top level already was,
   and the rest of the menus now match it. Done with text-transform, not by
   typing capitals into the menu labels, so Appearance > Menus still reads
   normally and screen readers announce words rather than letters. */
.tg-tab,
.tg-mega__col ul a,
.tg-footer__col ul a,
/* `button` as well as `a`: the rows that open a sub-panel (Shop, Teamwear) are
   buttons, so a link-only selector left exactly those two rows in sentence case
   among a column of caps. .tg-drawer__actions is the Account / Basket row,
   which the panels selector never reached - it sits above them in the head. */
.tg-drawer__panels a,
.tg-drawer__panels button,
.tg-drawer__actions a,
.tg-bottombar__item {
	text-transform: uppercase;
	letter-spacing: .02em;
}

.tg-mega__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tg-sp-6); padding-block: var(--tg-sp-6); }
/* A column heading, and it has to read as one. At 12px grey it was a caption
   under its own links; at 16px bold caps it just looked like another link, the
   links now being caps too. Size alone cannot carry it when both are caps, so
   the difference is in KIND: brand green and wide tracking, which no link uses. */
.tg-mega__heading {
	font-size: var(--tg-fs-base); font-weight: var(--tg-fw-semi);
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--tg-green-text); margin: 0 0 var(--tg-sp-4);
}
.tg-mega__col ul { list-style: none; margin: 0; padding: 0; }
.tg-mega__col li { margin-bottom: var(--tg-sp-2); }
.tg-mega__col a { color: var(--tg-ink); font-weight: var(--tg-fw-medium); font-size: var(--tg-fs-sm); }
.tg-mega__col a:hover { color: var(--tg-green-strong); }

.tg-drawer__actions { display: flex; gap: var(--tg-sp-3); padding: var(--tg-sp-3) var(--tg-sp-4); border-bottom: var(--tg-bw) solid var(--tg-n-900); }
.tg-drawer__actions a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); }
/* One flex item, so the flex gap does not open the brackets into "( 0 )". */
.tg-drawer__count { display: inline; }
.tg-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--tg-tap); height: var(--tg-tap);
	background: transparent; border: 0; color: #fff; border-radius: var(--tg-radius-sm);
}
.tg-iconbtn:hover { background: rgba(255,255,255,.08); }
.tg-iconbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.tg-basket { position: relative; }
.tg-basket__count {
	position: absolute; top: 6px; right: 4px;
	min-width: 18px; height: 18px; padding: 0 4px;
	background: var(--tg-green-fill); color: #fff; border-radius: var(--tg-radius-pill);
	font-size: 11px; font-weight: var(--tg-fw-bold); line-height: 18px; text-align: center;
}

/* The full nav swaps in for the drawer here, not at 900px.

   Nine top-level items have to sit beside a 180px logo and a 160px utility
   cluster. Measured, the whole header needs about 1400px at the roomy spacing,
   and at 900 the nav list alone ran to 949px inside a 900px viewport: the icons
   were off-screen and the logo was crushed to zero.
   
   Rather than give up the nav on a 1366 laptop, the 1280-1439 range tightens the
   gap and drops the label a point, which measurement says fits with room to
   spare. Below 1280 it is the drawer's job: fitting 1200 needed 12.5px uppercase
   labels, which is too small to be worth it. */
@media (min-width: 1280px) {
	.tg-mega { display: block; }
	.tg-header__menu-trigger { display: none; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
	.tg-mega__list { gap: 10px; }
	.tg-mega__top { font-size: 13px; }
}

/* ===== Footer ===== */
.tg-footer {
	background: var(--tg-black); color: var(--tg-n-300);
	padding-block: var(--tg-band-y-loose) var(--tg-band-y-tight);
	border-top: 3px solid var(--tg-green);
}
.tg-footer a { color: var(--tg-n-300); transition: color var(--tg-dur) var(--tg-ease); }
.tg-footer a:hover { color: #fff; text-decoration: none; }

.tg-footer__main { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-7); }
@media (min-width: 720px) { .tg-footer__main { grid-template-columns: 1.2fr 2fr; gap: var(--tg-sp-8); } }

.tg-footer__logo { display: inline-block; margin-bottom: var(--tg-sp-4); }
.tg-footer__logo img { max-height: 48px; width: auto; }
.tg-footer__logo strong { color: #fff; font-family: var(--tg-font-head); font-size: var(--tg-fs-xl); letter-spacing: .02em; }
.tg-footer__logo strong span { color: var(--tg-green); }
.tg-footer__blurb { color: var(--tg-n-400); font-size: var(--tg-fs-sm); max-width: 34ch; margin: 0 0 var(--tg-sp-4); line-height: 1.6; }
.tg-footer__social { display: flex; gap: var(--tg-sp-2); list-style: none; margin: 0; padding: 0; }
.tg-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: var(--tg-bw) solid var(--tg-n-800); border-radius: 50%; }
.tg-footer__social a:hover { border-color: var(--tg-green); color: var(--tg-green); }

.tg-footer__cols { display: grid; gap: var(--tg-sp-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .tg-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tg-footer__cols { grid-template-columns: repeat(4, 1fr); } } /* four approved columns */
/* Same reasoning as .tg-mega__heading, on the dark ground: green-strong rather
   than green-text, which is the pair meant for dark backgrounds. */
.tg-footer__col-title {
	font-size: var(--tg-fs-base); font-weight: var(--tg-fw-semi);
	text-transform: uppercase; letter-spacing: .12em;
	color: var(--tg-green-strong); margin: 0 0 var(--tg-sp-4);
}
/* Links explicitly below the column title, matching the mega panel's 14px. */
.tg-footer__col ul a { font-size: var(--tg-fs-sm); }
.tg-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-2); }
.tg-footer__col a { font-size: var(--tg-fs-sm); }

.tg-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tg-sp-3);
	margin-top: var(--tg-sp-7); padding-top: var(--tg-sp-4);
	border-top: var(--tg-bw) solid var(--tg-n-800); font-size: var(--tg-fs-xs); color: var(--tg-n-500);
}
.tg-footer__legal { display: flex; flex-wrap: wrap; gap: var(--tg-sp-4); list-style: none; margin: 0; padding: 0; }
.tg-footer__legal a { color: var(--tg-n-400); font-size: var(--tg-fs-xs); }

/* ===== Mobile side menu (right slide-in) + overlay ===== */
.tg-overlay {
	position: fixed; inset: 0; z-index: var(--tg-z-overlay);
	background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
	transition: opacity var(--tg-dur) var(--tg-ease), visibility var(--tg-dur) var(--tg-ease);
}
.tg-overlay.is-open { opacity: 1; visibility: visible; }
.tg-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--tg-z-drawer);
	width: min(88vw, 380px);
	background: var(--tg-black); color: #fff;
	transform: translateX(100%); transition: transform var(--tg-dur-slow) var(--tg-ease);
	display: flex; flex-direction: column;
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tg-drawer.is-open { transform: translateX(0); }
.tg-drawer__head { display: flex; align-items: center; gap: var(--tg-sp-3); padding: var(--tg-sp-3) var(--tg-sp-4); border-bottom: var(--tg-bw) solid var(--tg-n-800); }
.tg-drawer__search { flex: 1; }
.tg-drawer__panels { flex: 1; overflow-y: auto; }
.tg-drawer__panel { display: none; }
.tg-drawer__panel.is-active { display: block; }
.tg-drawer__list { list-style: none; margin: 0; padding: 0; }
.tg-drawer__list a, .tg-drawer__list button {
	display: flex; align-items: center; justify-content: space-between; gap: var(--tg-sp-3);
	width: 100%; min-height: var(--tg-tap);
	padding: var(--tg-sp-3) var(--tg-sp-4);
	background: transparent; border: 0; border-bottom: var(--tg-bw) solid var(--tg-n-900);
	color: #fff; font-size: var(--tg-fs-md); font-weight: var(--tg-fw-medium); text-align: left;
}
.tg-drawer__back { color: var(--tg-green); font-weight: var(--tg-fw-semi); }
/* Drill affordance: a chevron on rows that open a sub-panel. */
.tg-drawer__drill::after { content: '\203A'; color: var(--tg-n-500); font-size: 1.4em; line-height: 1; margin-left: auto; }
.tg-drawer__subhead { padding: var(--tg-sp-4) var(--tg-sp-4) var(--tg-sp-2); font-size: var(--tg-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tg-n-500); font-weight: var(--tg-fw-bold); }
.tg-drawer__subhead:first-child { padding-top: var(--tg-sp-2); }

/* ===== Fixed mobile bottom bar ===== */
.tg-bottombar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--tg-z-bottombar);
	/* `minmax(0, 1fr)`, not `1fr`: a bare 1fr has an implicit AUTO minimum, so
	   the longest label ("COACHING") set each track to its min-content width of
	   67px and five of those is 335px - 15px wider than a 320px phone, which
	   pushed the WHOLE PAGE sideways. Same trap as the article grid. */
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	background: var(--tg-black); color: var(--tg-n-300);
	border-top: var(--tg-bw) solid var(--tg-n-800);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tg-bottombar__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: var(--tg-bottombar-h); min-width: 0; overflow: hidden;
	color: inherit; font-size: 11px; font-weight: var(--tg-fw-semi); text-decoration: none;
}
.tg-bottombar__item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.tg-bottombar__item[aria-current="page"] { color: var(--tg-green); }
.tg-bottombar__item--shop { position: relative; }
.tg-bottombar__item--shop svg { width: 26px; height: 26px; }
.tg-bottombar__item--shop::before {
	content: ""; position: absolute; top: 6px; width: 44px; height: 44px;
	background: var(--tg-green); border-radius: var(--tg-radius-pill); z-index: -1;
}
.tg-bottombar__item--shop { color: #fff; }
@media (min-width: 769px) { .tg-bottombar { display: none; } }

/* ===== Pagination =====
   One style for every paged list: WooCommerce archives (ul.page-numbers),
   and core's the_posts_pagination (.navigation.pagination .nav-links) used by
   news archives, the blog index and search. WooCommerce's own stylesheet is
   dequeued on shop archives, so without this its list renders with bullets. */
.woocommerce-pagination,
.navigation.pagination {
	margin: var(--tg-sp-7) 0 var(--tg-sp-4);
}
.woocommerce-pagination ul.page-numbers,
.navigation.pagination .nav-links {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--tg-sp-2); margin: 0; padding: 0; list-style: none; border: 0;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; padding: 0; list-style: none; border: 0; }
.woocommerce-pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--tg-tap); min-height: var(--tg-tap); padding: 0 var(--tg-sp-3);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background: var(--tg-white); color: var(--tg-ink);
	font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); line-height: 1;
	text-decoration: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.woocommerce-pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:hover {
	border-color: var(--tg-green); background: var(--tg-green-soft); color: var(--tg-ink); text-decoration: none;
}
.woocommerce-pagination a.page-numbers:focus-visible,
.navigation.pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--tg-green); outline-offset: 2px;
}
/* Current page: solid green, not a link. */
.woocommerce-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
	background: var(--tg-green-fill); border-color: var(--tg-green-fill); color: #fff;
}
/* The gap marker is text, not a button. */
.woocommerce-pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots {
	border-color: transparent; background: none; color: var(--tg-text-muted); min-width: 0; padding: 0 var(--tg-sp-1);
}
/* Prev/next read as arrows on mobile, words on wider screens. */
.woocommerce-pagination .page-numbers.prev, .woocommerce-pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev, .navigation.pagination .page-numbers.next {
	font-weight: var(--tg-fw-bold);
}
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Dark sections (news archives sit on the near-black surface). */
.tg-dark .woocommerce-pagination .page-numbers,
.tg-dark .navigation.pagination .page-numbers {
	background: rgba(255,255,255,.06); border-color: var(--tg-n-700); color: #fff;
}
.tg-dark .woocommerce-pagination a.page-numbers:hover,
.tg-dark .navigation.pagination a.page-numbers:hover { background: rgba(95,175,45,.18); border-color: var(--tg-green); color: #fff; }
.tg-dark .woocommerce-pagination .page-numbers.current,
.tg-dark .navigation.pagination .page-numbers.current { background: var(--tg-green-fill); border-color: var(--tg-green-fill); color: #fff; }
.tg-dark .woocommerce-pagination .page-numbers.dots,
.tg-dark .navigation.pagination .page-numbers.dots { background: none; border-color: transparent; color: var(--tg-n-400); }

/* ===== Selects =====
   Native selects drop the OS control and take the same shell as text inputs,
   with our own chevron. Every dropdown on the site (shop sort, contact, squad
   rows, WooCommerce address fields) then reads as one family. */
select {
	appearance: none; -webkit-appearance: none;
	min-height: var(--tg-tap); padding: 0 calc(var(--tg-sp-4) + 20px) 0 var(--tg-sp-4);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background-color: var(--tg-white); color: var(--tg-text);
	font: inherit; font-size: var(--tg-fs-base); line-height: 1.2; cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--tg-sp-3) center; background-size: 16px 16px;
}
select:hover { border-color: var(--tg-n-400); }
select:focus, select:focus-visible {
	border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2);
}
select:disabled { background-color: var(--tg-paper); color: var(--tg-text-muted); cursor: not-allowed; }
/* Multi/size selects are lists, not dropdowns: no chevron, no forced height. */
select[multiple], select[size]:not([size="1"]) {
	min-height: 0; padding: var(--tg-sp-2); background-image: none; cursor: default;
}
.tg-dark select {
	background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.tg-dark select option { color: #111; }

/* ----- select2 / selectWoo (WooCommerce country, state, and anywhere else) -----
   Ships its own stylesheet, which looks nothing like our fields: a taller
   control, square dropdown, and a blue highlight. Match the native shell. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	min-height: var(--tg-tap); padding: 0 calc(var(--tg-sp-4) + 20px) 0 var(--tg-sp-4);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background: var(--tg-white); display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0; line-height: 1.2; color: var(--tg-text);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tg-text-muted); }
/* Replace select2's CSS-triangle arrow with the same chevron the natives use. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%; right: var(--tg-sp-3); width: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: 0; margin: 0; left: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--tg-green); box-shadow: 0 0 0 3px rgba(95,175,45,.2);
}
/* Keep the corners of the control and its panel continuous while open. */
.select2-container--default.select2-container--open .select2-selection--single { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single { border-radius: 0 0 var(--tg-radius) var(--tg-radius); }
.select2-container--default .select2-dropdown {
	border: var(--tg-bw) solid var(--tg-green); border-radius: 0 0 var(--tg-radius) var(--tg-radius);
	background: var(--tg-white); box-shadow: var(--tg-shadow-lg, 0 12px 28px rgba(0,0,0,.14)); overflow: hidden;
}
.select2-container--default .select2-dropdown--above { border-radius: var(--tg-radius) var(--tg-radius) 0 0; }
.select2-container--default .select2-search--dropdown { padding: var(--tg-sp-3); }
.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 40px; padding: 0 var(--tg-sp-3);
	border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius-sm);
	font: inherit; font-size: var(--tg-fs-base); color: var(--tg-text);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2);
}
.select2-container--default .select2-results__option {
	padding: var(--tg-sp-3) var(--tg-sp-4); font-size: var(--tg-fs-base); color: var(--tg-text);
}
/* The option already chosen: a quiet tint. */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--tg-green-soft); color: var(--tg-ink); font-weight: var(--tg-fw-semi);
}
/* The option under the pointer or keyboard, i.e. what Enter picks: solid green.
   Declared last so it wins over the chosen one. (select2's own default here is
   its blue, which belongs to no part of this design.) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted {
	background: var(--tg-green); color: #fff;
}
.select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--tg-text-muted); }

/* ===== Utility bar =====
   Thin strip above the header on every approved page: delivery promise and
   trust line on the left, Club Portal / Help & Contact on the right. */
.tg-utilitybar {
	background: var(--tg-black); color: rgba(255,255,255,.78);
	border-bottom: var(--tg-bw) solid rgba(255,255,255,.1);
	font-size: var(--tg-fs-xs);
}
.tg-utilitybar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-sp-4); min-height: 36px; }
.tg-utilitybar ul { display: flex; align-items: center; gap: var(--tg-sp-5); margin: 0; padding: 0; list-style: none; }
/* The promise stays on its line. There is room for it - the two promises and
   the links together use under half the bar - but as a shrinkable flex item the
   text was wrapping anyway, which it started doing the moment the delivery
   figure went from £50 to £100. The media queries below handle small screens by
   dropping the qualifier and then the second promise. */
.tg-utilitybar__promises li { display: inline-flex; align-items: center; gap: var(--tg-sp-2); flex: 0 0 auto; white-space: nowrap; }
.tg-utilitybar__promises strong { color: #fff; font-weight: var(--tg-fw-semi); }
.tg-utilitybar__icon { color: var(--tg-green); flex: 0 0 auto; }
.tg-utilitybar__links a { color: rgba(255,255,255,.78); }
.tg-utilitybar__links a:hover { color: #fff; }
/* Phone: the promises would wrap the bar onto two lines, so only the links stay. */
@media (max-width: 767px) {
	.tg-utilitybar__promises li:not(:first-child) { display: none; }
	.tg-utilitybar__row { justify-content: space-between; gap: var(--tg-sp-3); }
}
/* Narrow phones: the qualifier wraps the bar onto two lines, so drop it. */
@media (max-width: 479px) { .tg-utilitybar__sub { display: none; } }

/* ===== Newsletter band ===== */
.tg-newsletter { background: var(--tg-black); color: #fff; }
.tg-newsletter__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--tg-sp-5); padding-block: var(--tg-band-y); flex-wrap: wrap;
}
.tg-newsletter__copy { display: flex; align-items: flex-start; gap: var(--tg-sp-3); min-width: 0; }
.tg-newsletter__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--tg-radius-pill);
	background: var(--tg-green); color: #fff;
}
.tg-newsletter__title { font-size: var(--tg-fs-lg); margin: 0 0 var(--tg-sp-1); text-transform: uppercase; }
.tg-newsletter__lead { margin: 0; color: var(--tg-n-300); font-size: var(--tg-fs-sm); max-width: 52ch; }
.tg-newsletter__form { display: flex; gap: var(--tg-sp-2); flex: 1 1 380px; max-width: 520px; }
.tg-newsletter__form input[type="email"] {
	flex: 1 1 auto; min-width: 0; min-height: var(--tg-tap); padding: 0 var(--tg-sp-4);
	border: var(--tg-bw) solid rgba(255,255,255,.24); border-radius: var(--tg-radius);
	background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: var(--tg-fs-base);
}
.tg-newsletter__form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.tg-newsletter__form input[type="email"]:focus { border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.25); }
.tg-newsletter__done { margin: 0; font-weight: var(--tg-fw-semi); color: var(--tg-green); }
.tg-hp { position: absolute; left: -9999px; }
/* On a light page the band keeps its dark treatment: it is a break, not a section. */
@media (max-width: 640px) {
	.tg-newsletter__inner { flex-direction: column; align-items: stretch; }
	/* flex: 1 1 380px was written for a row, where 380px is a width. In a column
	   the main axis is vertical, so that basis became a 380px-TALL form: a field
	   a third of a phone screen high with its placeholder at the bottom. */
	.tg-newsletter__form { max-width: none; flex: 0 0 auto; }
}

/* ===== Footer trust row (review score + payment methods) ===== */
.tg-footer__trust {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: var(--tg-sp-4); padding-block: var(--tg-band-y-tight);
	/* No rule above this row: the footer already separates by spacing, and a
	   line here cut the payment marks off from the menu above them. */
}
.tg-footer__review { display: inline-flex; align-items: baseline; gap: var(--tg-sp-2); color: #fff; }
.tg-footer__review span { color: var(--tg-n-400); font-size: var(--tg-fs-sm); }
.tg-footer__pay { display: flex; flex-wrap: wrap; gap: var(--tg-sp-2); margin: 0; padding: 0; list-style: none; }
/* A method shows either its official mark or its name. The chip is drawn around
   the text only: a logo in a bordered box looks like a mistake. */
.tg-footer__pay li { display: inline-flex; align-items: center; }
.tg-footer__pay-text {
	padding: 4px var(--tg-sp-3); border: var(--tg-bw) solid rgba(255,255,255,.18); border-radius: var(--tg-radius-sm);
	font-size: var(--tg-fs-xs); color: var(--tg-n-300); letter-spacing: .02em;
}
/* Two classes, not one, and an explicit WIDTH as well as a height.
   `woocommerce-layout.css` carries `.woocommerce img, .woocommerce-page img
   { height: auto }`, which is both more specific than a single class and loaded
   after this file. On the basket - where the block cart pulls in that
   stylesheet - the marks lost their height, fell back to the SVGs' intrinsic
   780x500, and rendered 792px wide each, so the footer ended in five enormous
   card logos stacked down the page. Fixing the width as well means the mark
   stays 38x24 even if some future stylesheet wins the height again. */
.tg-footer__pay .tg-footer__pay-mark {
	width: 38px; height: 24px; max-width: 38px; display: block;
	object-fit: contain;
	background: #fff; border-radius: var(--tg-radius-sm); padding: 3px 6px;
}

/* Sale stands out in the header (amends 2026-10-09). --tg-error is the palette's
   red; on the black bar it is bright enough without a second colour being
   invented for it. The panel links inside a sale item are left alone - the
   call-out is the top-level word, not the whole dropdown. */
.tg-mega__item.is-sale > .tg-mega__top { color: var(--tg-error); }
.tg-mega__item.is-sale > .tg-mega__top:hover { color: #fff; }
/* Sale is a product CATEGORY inside the Shop panel rather than a top-level item,
   so it is matched on its link too. Both rules are kept: the top-level one takes
   effect the moment Sale is promoted to the menu bar. */
.tg-mega__panel a[href*="/sale/"],
.tg-mega__panel a[href*="product_cat=sale"],
.tg-drawer__panels a[href*="/sale/"] { color: var(--tg-error); font-weight: var(--tg-fw-bold); }
.tg-mega__panel a[href*="/sale/"]:hover,
.tg-drawer__panels a[href*="/sale/"]:hover { color: var(--tg-ink); }

/* Prose. Lives here rather than in news.css because page.php renders page
   content in .tg-prose and a plain page loads only base + components, so any
   prose rule kept in news.css silently did nothing on pages like the
   goalkeeper glove guides. */
.tg-prose { font-size: var(--tg-fs-md); line-height: var(--tg-lh-base); }
.tg-prose > :first-child { margin-top: 0; }
.tg-prose p { margin-block: var(--tg-sp-3); }
.tg-prose img { border-radius: var(--tg-radius); margin-block: var(--tg-sp-4); }
.tg-prose h2 { font-size: var(--tg-fs-xl); margin-top: var(--tg-sp-6); }
.tg-prose h3 { font-size: var(--tg-fs-lg); margin-top: var(--tg-sp-5); }
.tg-prose ul, .tg-prose ol { margin-block: var(--tg-sp-3); padding-left: var(--tg-sp-5); }
.tg-prose li { margin-block: var(--tg-sp-2); }

/* Comparison tables scroll horizontally rather than squashing on a phone. */
.tg-table { margin: var(--tg-sp-5) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tg-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--tg-fs-sm); }
.tg-table th, .tg-table td { padding: var(--tg-sp-3); text-align: left; vertical-align: top; border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-table thead th { background: var(--tg-paper); font-weight: var(--tg-fw-bold); border-bottom: 2px solid var(--tg-border-strong); white-space: nowrap; }
.tg-table tbody tr:last-child td { border-bottom: 0; }
.tg-prose__cta { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); margin-top: var(--tg-sp-6); }

/* Breadcrumb. Moved here from news.css, which a SINGLE PRODUCT page never
   loads (that file is gated on is_singular('post')/is_archive), so the
   breadcrumb above a product was falling back to browser defaults. Caps to
   match the rest of the navigation chrome; the letter-spacing stops uppercase
   from setting too tight at this size. */
.tg-breadcrumb {
	font-size: var(--tg-fs-xs); color: var(--tg-text-muted); padding-block: var(--tg-sp-5) 0;
	text-transform: uppercase; letter-spacing: .06em; font-weight: var(--tg-fw-semi);
}
.tg-breadcrumb a { color: var(--tg-text-muted); }
.tg-breadcrumb a:hover { color: var(--tg-link); }

/* Migrated content carries raw <table> and <iframe> with no wrapper and often a
   hard-coded width. They are made to fit rather than pushing the page sideways:
   a table scrolls inside its own box, an embed scales to the column. */
.tg-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.tg-prose iframe,
.tg-prose embed,
.tg-prose object,
.tg-prose video { max-width: 100%; }
/* A YouTube embed keeps its shape instead of becoming a letterbox slit. */
.tg-prose iframe[src*="youtube"],
.tg-prose iframe[src*="youtu.be"],
.tg-prose iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }
/* A long unbroken URL in body copy is its own kind of overflow. */
.tg-prose a { overflow-wrap: anywhere; }

/* WordPress's classic caption markup puts a HARD WIDTH on the wrapper -
   `<figure class="wp-caption" style="width: 850px">` - and nothing capped it,
   so an image inside resolved its own `max-width: 100%` against 840px and
   stayed 840px wide inside a 390px phone. Capping the wrapper is what fixes the
   image: `max-width` beats an inline `width` without needing !important.
   `.wp-caption` covers the old <div> form as well as the <figure> one. */
.tg-prose figure,
.tg-prose .wp-caption,
.tg-prose .wp-block-image { max-width: 100%; }
.tg-prose figure img,
.tg-prose .wp-caption img { width: auto; height: auto; margin-inline: auto; }
.tg-prose .wp-caption-text,
.tg-prose figcaption { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); text-align: center; margin-top: var(--tg-sp-2); }
/* Last resort for any other migrated wrapper carrying an inline width. */
.tg-prose > *,
.tg-prose div,
.tg-prose p { max-width: 100%; }

/* Small phones (320px and the like). Two things did not fit and pushed the
   whole page sideways: the bottom bar's five labels, fixed above, and the
   newsletter's input-and-button row. */
.tg-bottombar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-newsletter__form { min-width: 0; }
@media (max-width: 360px) {
	/* The sign-up button drops under the field rather than squeezing it to
	   nothing - a 60px email box is not usable anyway. */
	.tg-newsletter__form { flex-wrap: wrap; }
	.tg-newsletter__form input[type="email"] { flex: 1 1 100%; }
	.tg-newsletter__form button { flex: 1 1 100%; }
	.tg-bottombar__item { font-size: 10px; }
}