/*
 * Homepage sections. Enqueued only on the front page.
 * Dark editorial hero/explore + light retail lower sections.
 */

/* Shared section furniture (.tg-section-head, .tg-chip, .tg-badge, etc.) now lives in components.css. */

/* ===== Hero ===== */
.tg-hero {
	position: relative; background: var(--tg-black); color: #fff;
	/* One fade, left to right: dark behind the headline, clearing by the middle
	   so the photograph is actually visible on the right. No vertical fade and
	   no darkening of the right edge - the aside cards carry their own panel
	   background, so they do not need the band dimmed underneath them.
	   With no --tg-hero-img set this sits over flat black and is invisible, so
	   an environment without a hero photo looks exactly as it did.

	   Lifted from .95/.88/.45 on 26 Oct, on the client's note that the banner
	   "just looks like black" and he wanted to "just make out that there's a
	   pitch behind it". There was room: the headline measured 19.4:1 and the
	   lead 15.0:1 against the 3.0 and 4.5 they need, so a good deal of the dark
	   was doing nothing but hiding the picture. */
	background-image:
		linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.3) 55%, rgba(0,0,0,0) 74%),
		var(--tg-hero-img, none);
	background-size: cover; background-position: center;
	/* The renderer sets --tg-hero-d and --tg-hero-m in the style attribute; the
	   property the rule above reads is derived here so a media query can swap
	   it. An inline custom property outranks every stylesheet rule, so setting
	   --tg-hero-img inline would make the mobile crop below unreachable. */
	--tg-hero-img: var(--tg-hero-d, none);
}
/* Below 900px the hero is one column, so the copy sits ON the picture.

   It was briefly moved ABOVE the copy instead, when darkening the picture
   enough to carry the headline buried the photograph. The client asked for it
   back behind the text (27 Oct), and wanted the pitch visible through it, so the
   two requirements are met a different way: a light scrim, plus a lighter green
   for the accent line.

   The accent is the only thing that ever failed here. --tg-green-strong is a
   0.25-luminance green, so at 44px bold over the banner's sunrise it measured
   2.21:1 against the 3.0:1 it needs, while the white headline and lead were
   comfortably clear at the same scrim. Lightening that one line is what lets the
   scrim stay light enough to see the pitch. */
@media (max-width: 899px) {
	.tg-hero {
		--tg-hero-img: var(--tg-hero-m, var(--tg-hero-d, none));
		background-image:
			linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.56) 42%, rgba(0,0,0,.78) 100%),
			var(--tg-hero-img, none);
		background-size: cover;
		background-position: center top;
	}
}
.tg-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-6); padding-block: var(--tg-band-y-loose); }
.tg-hero__title { font-size: clamp(2.75rem, 8vw, 5rem); line-height: .95; margin: 0 0 var(--tg-sp-4); text-transform: uppercase; }
.tg-hero__accent { color: var(--tg-green-strong); }
.tg-hero__lead { max-width: 42ch; font-size: var(--tg-fs-md); color: var(--tg-n-200); }
.tg-hero__cta { display: flex; gap: var(--tg-sp-3); flex-wrap: wrap; margin-top: var(--tg-sp-5); }
.tg-hero__cta .tg-btn--outline { color: #fff; }

.tg-hero__aside { display: grid; gap: var(--tg-sp-4); align-content: start; }
.tg-hero__breaking {
	display: block; background: rgba(20,20,20,.82); border: var(--tg-bw) solid var(--tg-n-800);
	border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); color: #fff;
}
.tg-hero__breaking:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-hero__breaking h2 { font-size: var(--tg-fs-lg); margin: var(--tg-sp-3) 0; }
.tg-hero__breaking-meta { color: var(--tg-n-400); font-size: var(--tg-fs-sm); margin: 0 0 var(--tg-sp-4); }
.tg-hero__breaking-cta { pointer-events: none; }
.tg-hero__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tg-sp-3); }
.tg-hero__tile { display: flex; flex-direction: column; gap: var(--tg-sp-2); background: rgba(20,20,20,.82); border: var(--tg-bw) solid var(--tg-n-800); border-radius: var(--tg-radius); padding: var(--tg-sp-4); color: #fff; }
.tg-hero__tile:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-hero__tile-title { font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); line-height: 1.3; }
.tg-hero__tile-meta { color: var(--tg-n-500); font-size: var(--tg-fs-xs); margin-top: auto; }

@media (min-width: 900px) {
	.tg-hero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; padding-block: calc(var(--tg-band-y-loose) * 1.4); }
}

/* ===== Trust strip ===== */
.tg-trust { background: var(--tg-trust-bg, var(--tg-n-900)); border-block: var(--tg-bw) solid var(--tg-n-800); position: relative; }
/* Matched to the utility bar at the very top of the page: same 36px row, same
   12px type. That means the item has to read on ONE line - title and sub
   side by side, as the utility bar does it - because a stacked pair cannot fit
   in 36px. Below 900px it stacks and the single-line constraint is dropped,
   since five one-line items will not sit across a phone. */
.tg-trust__row {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4);
	padding-block: var(--tg-sp-3);
}
.tg-trust__item { display: flex; align-items: center; gap: var(--tg-sp-3); color: #fff; }
.tg-trust__icon { width: 26px; height: 26px; color: var(--tg-green); flex: 0 0 auto; }
.tg-trust__item strong { display: block; font-size: var(--tg-fs-sm); }
.tg-trust__item span { display: block; font-size: var(--tg-fs-xs); color: var(--tg-n-400); }

@media (min-width: 900px) {
	.tg-trust__row { min-height: 36px; padding-block: 0; align-items: center; }
	.tg-trust__item { gap: var(--tg-sp-2); font-size: var(--tg-fs-xs); min-width: 0; }
	.tg-trust__icon { width: 18px; height: 18px; }
	/* The wrapper around the two lines: inline so they sit on one. */
	.tg-trust__item > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
	.tg-trust__item strong { display: inline; font-size: var(--tg-fs-xs); white-space: nowrap; }
	.tg-trust__item span {
		display: inline; font-size: var(--tg-fs-xs);
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
}
@media (min-width: 768px) { .tg-trust__row { grid-template-columns: repeat(5, 1fr); } }

/* Phone: one sliding row, and it has to LOOK like one.
   It was a 2-column grid, so five promises became three stacked rows eating
   scroll on every page. A plain horizontal scroller was tried before and the
   client's objection was that you could not tell it scrolled - "all you see is
   fast delivery on orders over £100, you don't know it's scrollable". So the
   items are sized to 78% of the rail: the next one is always half in view,
   which is the affordance, and a fade at the right edge says there is more. */
@media (max-width: 767px) {
	.tg-trust__row {
		display: flex; flex-wrap: nowrap; gap: var(--tg-sp-5);
		overflow-x: auto; scroll-snap-type: x proximity;
		scrollbar-width: none; -ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}
	.tg-trust__row::-webkit-scrollbar { display: none; }
	.tg-trust__item { flex: 0 0 78%; scroll-snap-align: start; }
	/* The fade takes the band's own background, which differs between the dark
	   homepage strip and the white one under the shop hero. */
	.tg-trust::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
		pointer-events: none;
		background: linear-gradient(90deg, transparent, var(--tg-trust-bg, var(--tg-n-900)));
	}
}

/* ===== Explore tiles ===== */
.tg-explore__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4); }
.tg-explore__tile {
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--tg-sp-6);
	min-height: 180px; padding: var(--tg-sp-4);
	border-radius: var(--tg-radius-lg); overflow: hidden; color: #fff;
	background: linear-gradient(155deg, var(--tg-n-800) 0%, var(--tg-black) 70%);
	border: var(--tg-bw) solid var(--tg-n-800);
	transition: border-color var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease), background var(--tg-dur) var(--tg-ease);
}
.tg-explore__tile:hover { text-decoration: none; border-color: var(--tg-green); transform: translateY(-3px); background: linear-gradient(155deg, var(--tg-n-700) 0%, var(--tg-black) 70%); }

/* A category tile carrying a photograph.

   The scrim is a gradient, not a flat overlay: the label sits bottom-left and
   has to stay readable over whatever the photograph happens to be there, while
   the top of the picture is left almost untouched so the product still reads.
   Taller than a plain tile, because a photograph cropped into 180px of a wide
   box is a horizontal slice of itself. */
.tg-explore__tile--photo {
	min-height: 260px;
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.82) 100%),
		var(--tg-tile-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* The base :hover uses the `background` SHORTHAND, which resets background-size
   to auto and background-position to 0% 0%. Re-declaring only background-image
   here left those reset, so on hover the photograph snapped to its natural size
   anchored at the top-left corner and looked like a broken zoom. Restate size,
   position and repeat with it. */
.tg-explore__tile--photo:hover {
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.8) 100%),
		var(--tg-tile-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* On a photograph the green chip competes with the picture, so it becomes a
   quiet glass disc instead of a filled block. */
.tg-explore__tile--photo .tg-explore__tile-icon {
	background: rgba(0,0,0,.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
}
.tg-explore__tile--photo .tg-explore__tile-sub { color: rgba(255,255,255,.82); }
.tg-explore__tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--tg-radius); background: rgba(120,200,40,.12); color: var(--tg-green); }
.tg-explore__tile-body { width: 100%; }
.tg-explore__tile-title { display: block; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-lg); }
.tg-explore__tile-sub { display: block; font-size: var(--tg-fs-sm); color: var(--tg-n-300); }
.tg-explore__tile-arrow { position: absolute; top: var(--tg-sp-4); right: var(--tg-sp-4); color: var(--tg-n-500); transform: rotate(-90deg); transition: color var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease); }
.tg-explore__tile:hover .tg-explore__tile-arrow { color: var(--tg-green); transform: rotate(-90deg) translateX(3px); }
@media (min-width: 700px) { .tg-explore__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tg-explore__grid { grid-template-columns: repeat(6, 1fr); } }

/* ===== Latest from the pitch ===== */
.tg-latest { background: var(--tg-bg); color: var(--tg-text); }
.tg-latest__tabs { display: flex; gap: var(--tg-sp-3); overflow-x: auto; padding-bottom: var(--tg-sp-4); scrollbar-width: none; }
.tg-latest__tabs::-webkit-scrollbar { display: none; }
.tg-latest__grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-5); }
@media (min-width: 640px) { .tg-latest__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tg-latest__grid { grid-template-columns: repeat(4, 1fr); } }

/* .tg-post-card now lives in components.css (used across news pages too). */

/* ===== Kit + Club Shop ===== */
.tg-kit__grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-5); }
.tg-kit__panel { border-radius: var(--tg-radius-lg); padding: var(--tg-sp-7); }
/* Same idea as the hero: one fade, left to right. Solid brand green behind the
   copy, clearing by about two thirds so the kit photograph reads on the right.
   background-position sits right so the kit itself stays in frame when a wide
   photo is cropped into this narrow panel. The colour underneath matters: if
   the image is missing the panel is still the green-to-black it always was. */
.tg-kit__panel--teamwear {
	color: #fff; background-color: #0e0e0e;
	background-image:
		linear-gradient(90deg, rgba(20,58,18,.97) 0%, rgba(20,58,18,.92) 32%, rgba(14,14,14,.6) 62%, rgba(14,14,14,.15) 86%),
		var(--tg-kit-img, linear-gradient(135deg, #143a12, #0e0e0e));
	background-size: cover; background-position: center right;
}
/* Black, white type: the plain counterpart to the teamwear panel's photograph.
   A photo was tried here and read as an afterthought, so this is deliberately
   flat - the pair works as one dark-green picture panel and one solid black
   one, rather than two competing pictures.
   The button has to be re-coloured: its .tg-btn--dark is near-black and would
   vanish on this ground, so it reverses to white here. */
.tg-kit__panel--clubshop {
	background: var(--tg-black); color: #fff; border: 0;
	/* The grid stretches this panel to its neighbour's height and it holds less,
	   so the content is centred rather than sitting on ~100px of dead space.
	   align-items stays at stretch so the heading and lead keep the full width
	   and wrap as before; only the button opts out, or it would stretch to the
	   panel's width as a flex item. */
	display: flex; flex-direction: column; justify-content: center;
}
.tg-kit__panel--clubshop .tg-btn { align-self: flex-start; }
.tg-kit__panel--clubshop .tg-kit__title { color: #fff; }
.tg-kit__panel--clubshop .tg-kit__lead { color: var(--tg-n-300); }
.tg-kit__panel--clubshop .tg-btn--dark {
	background: #fff; color: var(--tg-ink); border-color: #fff;
}
.tg-kit__panel--clubshop .tg-btn--dark:hover {
	background: var(--tg-n-200); color: var(--tg-ink);
}
/* The lighter tint: this eyebrow sits on the panel's own dark-green wash over a
   photograph, where the brand green measured 3.96:1 at 16px. */
.tg-kit__eyebrow { text-transform: uppercase; letter-spacing: .06em; color: var(--tg-green-on-dark); font-weight: var(--tg-fw-bold); margin: 0; }
.tg-kit__title { font-size: var(--tg-fs-2xl); margin: var(--tg-sp-2) 0 var(--tg-sp-4); text-transform: uppercase; }
.tg-kit__list { list-style: none; padding: 0; margin: 0 0 var(--tg-sp-5); display: grid; gap: var(--tg-sp-2); }
.tg-kit__list li { display: flex; align-items: center; gap: var(--tg-sp-2); }
.tg-kit__list svg { color: var(--tg-green); flex: 0 0 auto; }
.tg-kit__lead { font-size: var(--tg-fs-md); max-width: 34ch; margin-bottom: var(--tg-sp-5); }
@media (min-width: 900px) { .tg-kit__grid { grid-template-columns: 1.4fr 1fr; } }

/* Below 900px the panel stacks to full width and the left-to-right fade stops
   working: the gradient's percentages map onto ~358px, so the photograph sits
   bright behind the copy. Measured at 390px it put the title on 2.21:1 and the
   checklist on 2.25:1, both failing. The fade turns VERTICAL there - solid
   behind the text, clearing below the button so the kit is still visible. */
@media (max-width: 899px) {
	.tg-kit__panel--teamwear {
		background-image:
			linear-gradient(180deg, rgba(20,58,18,.97) 0%, rgba(20,58,18,.95) 58%, rgba(14,14,14,.55) 82%, rgba(14,14,14,.2) 100%),
			var(--tg-kit-img, linear-gradient(135deg, #143a12, #0e0e0e));
		background-position: center bottom;
		padding-bottom: calc(var(--tg-sp-7) * 2.2);
	}
}

/* ===== Brands ===== */
.tg-brands__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tg-sp-4); align-items: center; }
.tg-brands__item { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: var(--tg-sp-3); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); color: var(--tg-text); }
.tg-brands__item:hover { text-decoration: none; border-color: var(--tg-border-strong); }
.tg-brands__logo { max-height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter var(--tg-dur), opacity var(--tg-dur); }
.tg-brands__item:hover .tg-brands__logo { filter: none; opacity: 1; }
.tg-brands__name { font-family: var(--tg-font-head); font-weight: var(--tg-fw-black); font-size: var(--tg-fs-lg); text-transform: uppercase; }
@media (min-width: 700px) { .tg-brands__row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .tg-brands__row { grid-template-columns: repeat(8, 1fr); } }

/* The product grid and card moved to components.css: tg_product_card() is a
   SHARED component (home, search and the catalogue page all render it) and this
   sheet only loads on the home page and a couple of others, so on the catalogue
   page the cards came out with no card styling at all - no square media box, no
   line reserved for an absent brand - and their titles and prices sat 26px and
   56px apart across a row. */

/* ===== Shop landing ===== */
/* Black product-navigation strip */
.tg-prodnav { background: var(--tg-black); }
.tg-prodnav__row { display: flex; gap: var(--tg-sp-5); overflow-x: auto; padding-block: var(--tg-sp-3); scrollbar-width: none; }
.tg-prodnav__row::-webkit-scrollbar { display: none; }
.tg-prodnav__row a { color: #fff; font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.tg-prodnav__row a:hover { color: var(--tg-green); text-decoration: none; }
.tg-prodnav__all { color: var(--tg-green) !important; }

/* Shop by Need */
.tg-shopneed { background: var(--tg-white); color: var(--tg-ink); }
.tg-shopneed__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--tg-sp-4); }
@media (min-width: 700px) { .tg-shopneed__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .tg-shopneed__grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.tg-shopneed__card { display: flex; flex-direction: column; gap: 2px; padding: var(--tg-sp-4); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); color: var(--tg-ink); }
.tg-shopneed__card:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-shopneed__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--tg-radius); background: var(--tg-green-soft); color: var(--tg-green-strong); margin-bottom: var(--tg-sp-2); }
.tg-shopneed__label { font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-sm); }
.tg-shopneed__sub { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* Product feed carousels (two-card horizontal on mobile) */
.tg-feed { background: var(--tg-white); color: var(--tg-ink); }
.tg-feed__track { display: grid; grid-auto-flow: column; grid-auto-columns: 45%; gap: var(--tg-sp-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--tg-sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tg-feed__track::-webkit-scrollbar { display: none; }
.tg-feed__item { scroll-snap-align: start; }
@media (min-width: 620px) { .tg-feed__track { grid-auto-columns: 30%; } }
@media (min-width: 1000px) { .tg-feed__track { grid-auto-columns: 18%; } }

/* Shop routes */
.tg-shoproutes { background: var(--tg-paper); color: var(--tg-ink); }
.tg-shoproutes__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--tg-sp-4); }
@media (min-width: 800px) { .tg-shoproutes__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tg-shoproute { display: flex; align-items: center; gap: var(--tg-sp-3); padding: var(--tg-sp-4); background: var(--tg-white); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); color: var(--tg-ink); }
.tg-shoproute:hover { text-decoration: none; border-color: var(--tg-green); }
.tg-shoproute svg { color: var(--tg-green); flex: 0 0 auto; }
.tg-shoproute strong { display: block; }
.tg-shoproute span { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-shoproute span strong { font-size: var(--tg-fs-sm); color: var(--tg-ink); }

.tg-shop-hero__inner { padding-block: var(--tg-band-y-loose); max-width: var(--tg-maxw-text); }
.tg-shop-hero__search { margin: var(--tg-sp-5) 0; }
.tg-shop-hero__search .tg-search { background: #fff; border-radius: var(--tg-radius-pill); }
.tg-shop-hero__search { max-width: 560px; }
.tg-shop-hero__search .tg-search { padding-right: var(--tg-sp-2); }
.tg-shop-hero__search .tg-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--tg-ink); }
.tg-shop-hero__search .tg-search__submit { color: var(--tg-ink); }
/* The focus ring goes round the WHOLE pill, not the text field.
   Here `.tg-search` is the white pill and the input inside it is borderless and
   transparent, so the generic `.tg-search__input:focus` ring stopped at the end
   of the typed-in area and left the magnifier sitting outside it - the green
   line visibly not reaching the end of the box. Drawn with box-shadow only, so
   nothing shifts by a border's width, and it follows the pill radius. The
   input's own ring is suppressed so the two do not both draw. */
.tg-shop-hero__search .tg-search__input:focus,
.tg-shop-hero__search .tg-search__input:focus-visible {
	border: 0; outline: none; box-shadow: none;
}
.tg-shop-hero__search .tg-search:focus-within {
	box-shadow: 0 0 0 2px var(--tg-green), 0 0 0 5px rgba(95,175,45,.25);
}

/* ===== Shop hero photography =====
   An art-directed <picture> plus per-screen layout, both set in the block. The
   <picture> is kept rather than moving to a background image because this is the
   page's LCP element: it carries fetchpriority and the browser downloads only
   the crop it needs.

   NO LAYOUT DECISIONS LIVE HERE, same as the hub hero.
   tg_hero_breakpoint_style( ..., 'picture' ) resolves each breakpoint's choices
   into custom properties and the three media queries below only read them, with
   a mobile -> tablet -> desktop fallback chain. The breakpoints MUST match the
   <picture>'s source media (600 and 1024) or a crop art-directed for one
   arrangement is laid out under another.

   THE CLIPPING LIVES ON THE MEDIA, NOT ON THE SECTION. `overflow: hidden` used
   to be on .tg-shop-hero--photo, which clipped every descendant at the section's
   edge - including the search autocomplete, whose results were cut off mid-list.
   No z-index can fix that: overflow clips a descendant whatever it is stacked
   at. Only the photograph can actually overflow, so the clipping is scoped to it
   and the dropdown is free to hang below. */
.tg-shop-hero--photo { background-image: none; isolation: isolate; }
.tg-shop-hero__media { display: block; overflow: hidden; }
.tg-shop-hero__media img { width: 100%; max-width: none; display: block; }
/* The scrim and the bottom fade are separate jobs: the scrim darkens the ground
   the copy stands on when the copy is OVER the picture, the fade melts the
   picture into the panel when the copy is BELOW it. */
.tg-shop-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.tg-shop-hero__media { position: relative; }
.tg-shop-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tg-shop-hero--photo .tg-shop-hero__inner { position: relative; max-width: var(--tg-maxw); display: flex; flex-direction: column; align-items: stretch; }
.tg-shop-hero--photo .tg-shop-hero__inner > * { max-width: 600px; }
.tg-shop-hero .tg-hero__accent { display: block; } /* approved copy: accent line sits on its own row */

@media (min-width: 1025px) {
	.tg-shop-hero__media { position: var(--tg-hh-d-mediapos, absolute); inset: 0; height: var(--tg-hh-d-mediah, 100%); z-index: var(--tg-hh-d-mediaz, -2); }
	.tg-shop-hero__media img { height: var(--tg-hh-d-mediah, 100%); object-fit: var(--tg-hh-d-objfit, cover); object-position: var(--tg-hh-d-objpos, 70% 30%); }
	.tg-shop-hero__media::after { background: var(--tg-hh-d-fade, none); }
	.tg-shop-hero--photo::before { background: var(--tg-hh-d-scrim, none); }
	.tg-shop-hero--photo .tg-shop-hero__inner {
		min-height: var(--tg-hh-d-minh, clamp(420px, 41.7vw, 600px));
		padding-top: var(--tg-hh-d-padtop, var(--tg-band-y-loose));
		justify-content: var(--tg-hh-d-justify, center);
		text-align: var(--tg-hh-d-text, left);
	}
	.tg-shop-hero--photo .tg-shop-hero__inner > * {
		margin-left: var(--tg-hh-d-childml, 0);
		margin-right: var(--tg-hh-d-childmr, 0);
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.tg-shop-hero__media { position: var(--tg-hh-t-mediapos, var(--tg-hh-d-mediapos, absolute)); inset: 0; height: var(--tg-hh-t-mediah, var(--tg-hh-d-mediah, 100%)); z-index: var(--tg-hh-t-mediaz, var(--tg-hh-d-mediaz, -2)); }
	.tg-shop-hero__media img { height: var(--tg-hh-t-mediah, var(--tg-hh-d-mediah, 100%)); object-fit: var(--tg-hh-t-objfit, var(--tg-hh-d-objfit, cover)); object-position: var(--tg-hh-t-objpos, var(--tg-hh-d-objpos, 70% 30%)); }
	.tg-shop-hero__media::after { background: var(--tg-hh-t-fade, var(--tg-hh-d-fade, none)); }
	.tg-shop-hero--photo::before { background: var(--tg-hh-t-scrim, var(--tg-hh-d-scrim, none)); }
	.tg-shop-hero--photo .tg-shop-hero__inner {
		min-height: var(--tg-hh-t-minh, var(--tg-hh-d-minh, clamp(420px, 41.7vw, 600px)));
		padding-top: var(--tg-hh-t-padtop, var(--tg-hh-d-padtop, var(--tg-band-y-loose)));
		justify-content: var(--tg-hh-t-justify, var(--tg-hh-d-justify, center));
		text-align: var(--tg-hh-t-text, var(--tg-hh-d-text, left));
	}
	.tg-shop-hero--photo .tg-shop-hero__inner > * {
		margin-left: var(--tg-hh-t-childml, var(--tg-hh-d-childml, 0));
		margin-right: var(--tg-hh-t-childmr, var(--tg-hh-d-childmr, 0));
	}
}

@media (max-width: 600px) {
	.tg-shop-hero__media { position: var(--tg-hh-m-mediapos, var(--tg-hh-t-mediapos, absolute)); inset: 0; height: var(--tg-hh-m-mediah, var(--tg-hh-t-mediah, 100%)); z-index: var(--tg-hh-m-mediaz, var(--tg-hh-t-mediaz, -2)); }
	.tg-shop-hero__media img { height: var(--tg-hh-m-mediah, var(--tg-hh-t-mediah, 100%)); object-fit: var(--tg-hh-m-objfit, var(--tg-hh-t-objfit, cover)); object-position: var(--tg-hh-m-objpos, var(--tg-hh-t-objpos, 50% 0)); }
	.tg-shop-hero__media::after { background: var(--tg-hh-m-fade, var(--tg-hh-t-fade, none)); }
	.tg-shop-hero--photo::before { background: var(--tg-hh-m-scrim, var(--tg-hh-t-scrim, none)); }
	.tg-shop-hero--photo .tg-shop-hero__inner {
		min-height: var(--tg-hh-m-minh, var(--tg-hh-t-minh, 0));
		padding-top: var(--tg-hh-m-padtop, var(--tg-hh-t-padtop, var(--tg-band-y-loose)));
		padding-bottom: var(--tg-sp-6);
		justify-content: var(--tg-hh-m-justify, var(--tg-hh-t-justify, flex-start));
		text-align: var(--tg-hh-m-text, var(--tg-hh-t-text, left));
	}
	.tg-shop-hero--photo .tg-shop-hero__inner > * {
		margin-left: var(--tg-hh-m-childml, var(--tg-hh-t-childml, var(--tg-hh-d-childml, 0)));
		margin-right: var(--tg-hh-m-childmr, var(--tg-hh-t-childmr, var(--tg-hh-d-childmr, 0)));
	}
}

/* Paper, not white: the cards are white now, and white-on-white would leave
   them defined by a hairline border alone. Set after the shared rule that
   gives .tg-shopcats/.tg-feed/.tg-trust a white ground, so only this band
   changes. */
.tg-shopcats { background: var(--tg-paper); }
/* Denser on a wide screen. The cards are taller now they carry the picture and
   the name separately, and 28 categories at four across ran to seven rows. */
.tg-shopcats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4); }
@media (min-width: 700px)  { .tg-shopcats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tg-shopcats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1300px) { .tg-shopcats__grid { grid-template-columns: repeat(5, 1fr); } }
/* Category cards, LIGHT.
   These were dark tiles: the photograph used as a cover background under a
   black scrim, label and count reversed out over it. With 28 of them that is a
   wall of near-identical dark boxes, and it fought the photography - the
   product shots are all taken on near-white (#f5f5f5), so a dark scrim is
   exactly the wrong treatment for them. This is the same shape the product
   cards already use and that already works: the picture on a white plate,
   shown WHOLE rather than cropped to fill, with the name on the card beneath
   it in ink. The categories become legible at a glance and the photographs
   look like the products they are. */
.tg-shopcat {
	display: flex; flex-direction: column;
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg);
	background: var(--tg-white); color: var(--tg-ink); overflow: hidden;
	transition: border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease);
}
.tg-shopcat:hover {
	text-decoration: none; border-color: var(--tg-green);
	box-shadow: var(--tg-shadow-lg); transform: translateY(-2px);
}
/* The picture is absolutely positioned inside the box rather than being laid
   out by it. `aspect-ratio: 16/9` alone did not hold: the media is a flex item
   and the image is the only thing in it, so the IMAGE's own proportions won the
   height back and the box came out square. Taking the image out of flow leaves
   the ratio as the only thing deciding the height. */
.tg-shopcat__media {
	position: relative; display: block; aspect-ratio: 16 / 9; flex: 0 0 auto;
	background: var(--tg-white); border-bottom: var(--tg-bw) solid var(--tg-border);
}
/* `contain`, not `cover`: a ball cropped to a rectangle stops reading as a
   ball. The padding keeps it off the card edges. */
.tg-shopcat__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: contain; padding: var(--tg-sp-3);
}
.tg-shopcat__body { display: block; padding: var(--tg-sp-3) var(--tg-sp-4) var(--tg-sp-4); }
.tg-shopcat__label {
	display: block; font-family: var(--tg-font-head); font-weight: var(--tg-fw-black);
	font-size: var(--tg-fs-base); text-transform: uppercase; line-height: 1.15;
}
.tg-shopcat__count { display: block; margin-top: 2px; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-shopcats, .tg-feed, .tg-shop-hero + .tg-trust { background: var(--tg-white); color: var(--tg-ink); }
/* Tells the mobile fade which colour to fade INTO on this variant. */
.tg-shop-hero + .tg-trust { --tg-trust-bg: var(--tg-white); }
/* Light trust strip under the shop hero: its item text is white by default (dark homepage strip).
   The strip still carries .tg-dark, which redefines --tg-text-muted to a grey
   meant for black ground; on white that grey is 2.3:1, so the token is put back
   to the light-surface one here rather than hard-coding a colour. */
.tg-shop-hero + .tg-trust { --tg-text-muted: var(--tg-n-600); }
.tg-shop-hero + .tg-trust .tg-trust__item { color: var(--tg-ink); }
.tg-shop-hero + .tg-trust .tg-trust__item span { color: var(--tg-text-muted); }

/* Lower retail sections sit on a light surface even though body is dark. */
.tg-latest, .tg-kit, .tg-brands, .tg-bestsellers { background: var(--tg-white); color: var(--tg-ink); }
/* A 12px link needs 4.5:1; the strong green gives 3.5 on white. The newsroom's
   view-all links already use the text green - this matches them. */
.tg-latest .tg-viewall, .tg-kit .tg-viewall, .tg-brands .tg-viewall, .tg-bestsellers .tg-viewall { color: var(--tg-green-text); }

/* ===== Showcase: oversized lifestyle boxes =====

   Two across on desktop so each one is genuinely large (about 590px in a 1200
   container); four across would be 290px, which is a card, not a showcase.
   One per row on a phone, which is how the reference behaves and what makes the
   page "box up tidy" on mobile.

   Every box is a photograph with type over it, so the scrim is not optional:
   it is bottom-weighted because the copy sits at the foot, and the top of the
   frame is left nearly clear so the subject still reads. */
.tg-showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tg-sp-4);
}

@media (min-width: 700px) {
	.tg-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A four-across row, the size of the product cards above it. Two across on a
   tablet, because four 290px panels with a heading over a photograph is a row of
   stamps. */
@media (min-width: 700px) {
	.tg-showcase__grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.tg-showcase__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Shorter than the big panels, and the type comes down with it so a 290px box
   does not get a 36px headline. */
.tg-showcase__grid--cols-4 .tg-showcase__item {
	min-height: 300px;
	aspect-ratio: 3 / 4;
	padding: var(--tg-sp-4);
}

.tg-showcase__grid--cols-4 .tg-showcase__title {
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}

.tg-showcase__grid--cols-4 .tg-showcase__body { max-width: none; }

.tg-showcase__item {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Tall enough to be a showcase and to survive a portrait source; capped in
	   vh so a tall phone does not get a box taller than its screen. */
	min-height: 420px;
	aspect-ratio: 4 / 3;
	max-height: 70vh;
	padding: var(--tg-sp-6);
	/* Square edges, on request (20 Oct). The rounded corner is the house style
	   elsewhere, but at this size it reads as a card and these are meant to read
	   as panels. */
	border-radius: 0;
	overflow: hidden;
	color: #fff;
	background-color: var(--tg-black);
	/* The ramp used to reach its darkest value only at the very bottom edge,
	   which is BELOW the copy: the body sits a padding-width up from there, so
	   the eyebrow and title were landing on the thin part of the scrim. Over a
	   bright photograph (the shop's grass and the blue shirt) that left the
	   12px green eyebrow at 1.46:1 against its worst pixel and 2.09:1 against
	   its mean, both well under the 4.5:1 a 12px label needs.
	   A plateau from 72% down holds the dark across the whole copy block
	   instead, which costs the picture very little and fixes the title's
	   contrast on the brightest sources at the same time.

	   .86 rather than .80 because the shop's matchday panel (sunlit grass
	   behind a pale blue shirt) is the brightest source on the site and still
	   sat at 3.91:1 at .80. Every panel on the shop and the Coaching Hub is
	   measured above 4.5:1 at .86. */
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.86) 72%, rgba(0,0,0,.92) 100%),
		var(--tg-tile-img, none);
	background-size: cover;
	background-position: var(--tg-tile-pos, center);
	background-repeat: no-repeat;
	transition: transform var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}

.tg-showcase__item:hover,
.tg-showcase__item:focus-visible {
	text-decoration: none;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* The hover state must restate size and position: the base rule sets them
   alongside background-image, and any shorthand later would reset them. */
.tg-showcase__item:hover { background-size: cover; background-position: var(--tg-tile-pos, center); }

.tg-showcase__item--plain {
	background-image: linear-gradient(155deg, var(--tg-n-800) 0%, var(--tg-black) 70%);
}

/* Right-aligned variant, for a box whose subject sits on the left. */
.tg-showcase__item--right { justify-content: flex-end; text-align: right; }

.tg-showcase__body { display: block; max-width: 30ch; }

.tg-showcase__eyebrow {
	display: block;
	margin-bottom: var(--tg-sp-1, .25rem);
	font-size: var(--tg-fs-xs, .75rem);
	font-weight: var(--tg-fw-bold);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tg-green);
}

/* Over a PHOTOGRAPH the brand green is not light enough for a 12px label.
   Deepening the scrim took the worst case from 1.46:1 to 3.31:1, still short of
   the 4.5:1 that size needs, and darkening further would start to flatten the
   picture. A lighter tint of the same hue clears it with room to spare (5.2:1
   measured on the brightest of the shop's four) and still reads as the brand
   colour at label size.

   The black boxes keep the brand green: on near-black it is already 6.2:1, and
   the green eyebrow on a black panel is the pattern Paul signed off. */
.tg-showcase__item:not(.tg-showcase__item--plain) .tg-showcase__eyebrow {
	color: var(--tg-green-on-dark);
}

.tg-showcase__title {
	display: block;
	font-family: var(--tg-font-head);
	font-weight: var(--tg-fw-black);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.05;
	text-transform: uppercase;
}

.tg-showcase__cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: var(--tg-sp-3);
	font-weight: var(--tg-fw-semi);
	font-size: var(--tg-fs-sm);
	border-bottom: 2px solid var(--tg-green);
	padding-bottom: 2px;
}

.tg-showcase__item:hover .tg-showcase__cta { color: var(--tg-green); }

/* The long box: one panel across the full width of the grid, under the four.

   Shorter than a square box because a 4:3 at full width would be taller than the
   viewport on a laptop; the copy still sits at the foot over the same scrim. */
.tg-showcase__item--wide {
	aspect-ratio: 16 / 6;
	min-height: 260px;
	/*
	 * A wide panel needs the scrim coming from the LEFT, not just the foot.
	 * There is far less height for a bottom gradient to work with, and measured
	 * over a pale studio shot the title came out at 4.5:1 on a phone, right on
	 * the limit. The copy sits left, so the dark sits left, which also reads as
	 * a deliberate panel rather than a darkened photograph.
	 */
	background-image:
		linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.25) 62%, rgba(0,0,0,.08) 100%),
		linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%),
		var(--tg-tile-img, none);
}

.tg-showcase__item--wide:hover {
	background-image:
		linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.68) 32%, rgba(0,0,0,.2) 62%, rgba(0,0,0,.05) 100%),
		linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%),
		var(--tg-tile-img, none);
	background-size: cover;
	background-position: var(--tg-tile-pos, center);
}

@media (min-width: 700px) {
	.tg-showcase__item--wide { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
	/* On a phone the grid is one column anyway, so the only thing to fix is the
	   shape: 16:6 at 358px wide is 134px tall, which cannot hold the copy. */
	.tg-showcase__item--wide { aspect-ratio: 4 / 3; }
}

/* Two showcase bands in a row read as ONE band.

   The four-box row sits directly under the full-width panel, so the section
   padding between them (a bottom pad plus a top pad, both band-sized) left a
   gap far wider than the gap between the boxes themselves. Collapse both and
   leave exactly one grid gap, so the rhythm matches the boxes above. */
.tg-showcase:has(+ .tg-showcase) { padding-bottom: 0; }
.tg-showcase + .tg-showcase { padding-top: var(--tg-sp-4); }

/* :has() is widely supported now, but a browser without it would show the old
   double gap rather than anything broken, so no fallback is needed. */


/* The hero copy on a phone, where it sits over the banner rather than beside it.

   These live at the end of the file ON PURPOSE: the mobile hero block above is
   next to .tg-hero, which comes BEFORE .tg-hero__accent and .tg-hero__lead are
   defined, so an override placed there loses on source order and silently does
   nothing. That cost a round of "the colour did not change".

   The accent takes the lighter tint of the brand green: --tg-green-strong is a
   0.25-luminance green and at 44px bold over the banner's sunrise it measured
   1.56:1, while the white headline alongside it was over 11:1. The lead goes to
   full white for the same reason at 18px. Both let the scrim stay light enough
   to see the pitch, which is what the client asked for. */
@media (max-width: 899px) {
	.tg-hero__accent { color: var(--tg-green-on-dark); }
	.tg-hero__lead { color: #fff; }
}