/*
 * Shop: category listing (archive) + product cards. Light retail surface.
 */

.tg-shop { padding-block: var(--tg-band-y) var(--tg-band-y-loose); }
.tg-shop__head { margin-bottom: var(--tg-sp-4); }
.tg-shop__title { font-size: clamp(var(--tg-fs-2xl), 4vw, var(--tg-fs-3xl)); text-transform: uppercase; margin: 0 0 var(--tg-sp-2); }
.tg-shop__desc { color: var(--tg-text-muted); max-width: 70ch; }

/* Category description, collapsed by default (client, 26 Oct).
   <details> so it is shut before any script runs and is keyboard operable for
   free. The default disclosure triangle is replaced by the house chevron, which
   rotates on open. */
.tg-catbanner__about, .tg-shop__about { margin: var(--tg-sp-3) 0 0; }
.tg-catbanner__about > summary,
.tg-shop__about > summary {
	display: inline-flex; align-items: center; gap: var(--tg-sp-2);
	cursor: pointer; list-style: none;
	font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi);
	padding: var(--tg-sp-2) 0;
}
.tg-catbanner__about > summary::-webkit-details-marker,
.tg-shop__about > summary::-webkit-details-marker { display: none; }
.tg-catbanner__about > summary:focus-visible,
.tg-shop__about > summary:focus-visible { outline: 2px solid var(--tg-green); outline-offset: 3px; border-radius: var(--tg-radius-sm); }
/* The house chevron points RIGHT, so a disclosure has to turn it: down when
   shut, up when open, which is what a disclosure arrow is expected to do.
   Left unrotated it read as "go to" rather than "open". */
.tg-catbanner__about-chev, .tg-shop__about-chev {
	stroke: currentColor; fill: none;
	transform: rotate(90deg);
	transition: transform var(--tg-dur) var(--tg-ease);
}
.tg-catbanner__about[open] > summary .tg-catbanner__about-chev,
.tg-shop__about[open] > summary .tg-shop__about-chev { transform: rotate(-90deg); }
/* On the banner the summary sits on the photograph, so it takes the same white
   as the title above it. */
.tg-catbanner__about > summary { color: #fff; }
.tg-catbanner__about .tg-catbanner__desc { margin-top: var(--tg-sp-2); }

/* Club shop context note: intro + "set one up" CTA above the product grid. */
.tg-clubshop-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tg-sp-4);
	margin-bottom: var(--tg-sp-5);
	padding: var(--tg-sp-4) var(--tg-sp-5);
	background: var(--tg-green-soft);
	border: var(--tg-bw) solid var(--tg-green-line);
	border-radius: var(--tg-radius-lg);
}
.tg-clubshop-note p { margin: 0; max-width: 62ch; color: var(--tg-ink); }
.tg-clubshop-note .tg-btn { flex: 0 0 auto; }
.tg-shop__tabs { margin-bottom: var(--tg-sp-4); border-bottom: var(--tg-bw) solid var(--tg-border); }

/* Bar: filter toggle + count + sort */
.tg-shop__bar { display: flex; align-items: center; gap: var(--tg-sp-4); flex-wrap: wrap; padding-block: var(--tg-sp-3); border-block: var(--tg-bw) solid var(--tg-border); margin-bottom: var(--tg-sp-5); }
.tg-shop__count { margin: 0; color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }
.tg-shop__sort { margin-left: auto; }
.tg-shop__sort select { min-height: 44px; } /* shell + chevron come from components.css */
@media (max-width: 599px) {
	/* The sort cannot share the row with the filter button and the count at this
	   width, so it wraps - and margin-left: auto then parks it on the right of an
	   otherwise empty line. Give it the whole row instead. */
	.tg-shop__sort { flex: 1 1 100%; margin-left: 0; }
	.tg-shop__sort select { width: 100%; }
}
.tg-shop__filter-toggle { display: inline-flex; }
@media (min-width: 900px) { .tg-shop__filter-toggle { display: none; } }

/* Layout: filter rail + product grid. minmax(0,1fr) lets the main column shrink
   below wide content (large product images) instead of blowing out the page. */
.tg-shop__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tg-sp-6); }
.tg-shop__main { min-width: 0; }
@media (min-width: 900px) { .tg-shop__layout { grid-template-columns: 240px minmax(0, 1fr); } }

/* Filters (desktop rail; mobile drawer) */
.tg-shop__filters-head { display: none; }
.tg-filter { padding-bottom: var(--tg-sp-4); margin-bottom: var(--tg-sp-4); border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-filter__head { font-size: var(--tg-fs-sm); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--tg-sp-3); }
.tg-filter__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-1); }
.tg-filter__list a { display: flex; justify-content: space-between; gap: var(--tg-sp-2); padding: 6px 0; color: var(--tg-text); font-size: var(--tg-fs-sm); }
.tg-filter__list a:hover { color: var(--tg-link); text-decoration: none; }
.tg-filter__list span { color: var(--tg-text-muted); }

/* Faceted controls: checkboxes with counts, price range, in-stock. */
.tg-filters-clear { margin: 0 0 var(--tg-sp-3); }
.tg-filters-clear a { font-size: var(--tg-fs-sm); font-weight: 600; color: var(--tg-link); }
/* A long facet scrolls, but it stops on a whole option: 240px landed two
   thirds of the way through the seventh row, which reads as a rendering fault
   rather than as "there is more below". Six rows, then the scrollbar says the
   rest is there. */
.tg-filter__checks {
	--tg-filter-row: 36px;
	list-style: none; margin: 0; padding: 0 var(--tg-sp-2) 0 0;
	display: grid; gap: 2px;
	max-height: calc(6 * var(--tg-filter-row) + 5 * 2px);
	overflow-y: auto; scrollbar-width: thin;
}
@media (pointer: coarse) {
	/* Touch targets grow the rows, so the same six options need more room. */
	.tg-filter__checks { --tg-filter-row: 48px; }
}
.tg-filter__checks label { display: flex; align-items: center; gap: var(--tg-sp-2); padding: 6px 0; font-size: var(--tg-fs-sm); cursor: pointer; }
.tg-filter__checks input { width: 18px; height: 18px; accent-color: var(--tg-green); flex: none; }
.tg-filter__checks label > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.tg-filter__count { color: var(--tg-text-muted); flex: none; }
.tg-filter__price { display: flex; align-items: center; gap: var(--tg-sp-2); }
.tg-filter__price input { width: 100%; min-width: 0; padding: 8px 10px; border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-sm); font-size: var(--tg-fs-sm); }
.tg-filter__price span { color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }
.tg-filter__stock { display: flex; align-items: center; gap: var(--tg-sp-2); font-size: var(--tg-fs-sm); font-weight: 600; cursor: pointer; }
.tg-filter__stock input { width: 18px; height: 18px; accent-color: var(--tg-green); }

@media (max-width: 899px) {
	.tg-shop__filters {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--tg-z-drawer);
		width: min(86vw, 340px); background: var(--tg-bg); padding: var(--tg-sp-4) var(--tg-sp-5);
		transform: translateX(-100%); transition: transform var(--tg-dur-slow) var(--tg-ease); overflow-y: auto;
	}
	.tg-shop__filters.is-open { transform: translateX(0); box-shadow: var(--tg-shadow-lg); }
	.tg-shop__filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tg-sp-4); }
	.tg-shop__filters-head .tg-iconbtn { color: var(--tg-ink); }
}

/* Product grid. minmax(0,1fr) columns so an oversized product image can't blow
   the track out (some source images are 3000px wide). */
.tg-product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tg-sp-5); }
@media (min-width: 700px) { .tg-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tg-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Empty result set: a real state, not a stray line of text. */
.tg-shop__empty { padding: var(--tg-band-y-loose) 0; max-width: 60ch; }
.tg-shop__empty h2 { font-size: clamp(var(--tg-fs-xl), 3vw, var(--tg-fs-2xl)); text-transform: uppercase; margin: 0 0 var(--tg-sp-3); }
.tg-shop__empty p { color: var(--tg-text-muted); margin: 0 0 var(--tg-sp-4); }
.tg-shop__empty-actions { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); }

/* Product card.
   The grid stretches every card to the tallest in its row and the button is
   pushed to the bottom of the body, so the row of "Add to basket" buttons sits
   on one line instead of stepping up and down with the length of each title. */
.tg-pcard { display: flex; flex-direction: column; height: 100%; }
/* Pure white behind product images. The photographs are not shot on white
   (about #f5f5f5), so the tile stays white and the lift below brings the
   backdrop up to match it. */
.tg-pcard__media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--tg-radius); overflow: hidden; background: var(--tg-white); }
.tg-pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.tg-pcard__wish { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.9); border: 0; border-radius: var(--tg-radius-pill); color: var(--tg-n-500); }
.tg-pcard__wish.is-active, .tg-pcard__wish:hover { color: var(--tg-error); }
.tg-badge--sale { background: var(--tg-error); }
/* The gap is also the minimum space above the button in the tallest card of a
   row, where margin-top: auto has no slack left to take. */
.tg-pcard__body { display: flex; flex-direction: column; gap: var(--tg-sp-2); padding-top: var(--tg-sp-3); flex: 1 1 auto; }
/* Exactly one line box of room whether there is a brand or not, so a card
   without one does not sit a few pixels higher than the rest of its row. */
.tg-pcard__brand { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; min-height: 1.6em; min-height: 1lh; }
.tg-pcard__title { font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); line-height: 1.3; margin: 0; }
.tg-pcard__title a { color: inherit; }
.tg-pcard__price { font-weight: var(--tg-fw-bold); margin: 2px 0; }
.tg-pcard__price del { color: var(--tg-text-muted); font-weight: var(--tg-fw-normal); margin-right: 4px; }

/* Rating stars */
.tg-rating { display: flex; align-items: center; gap: var(--tg-sp-2); font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }
.tg-rating__stars { position: relative; display: inline-block; width: 5.2em; font-size: 13px; line-height: 1; }
.tg-rating__stars::before { content: "\2605\2605\2605\2605\2605"; letter-spacing: 2px; color: var(--tg-n-300); }
.tg-rating__stars::after { content: "\2605\2605\2605\2605\2605"; letter-spacing: 2px; color: #f4c531; position: absolute; inset: 0; width: var(--tg-rating, 0%); overflow: hidden; white-space: nowrap; }

/* Colour swatches */
.tg-swatches { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.tg-swatch { width: 16px; height: 16px; border-radius: 50%; border: var(--tg-bw) solid var(--tg-border-strong); }
.tg-swatches__more { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* Add-to-cart button (WooCommerce loop button) */
.tg-pcard .button, .tg-pcard .add_to_cart_button, .tg-pcard .added_to_cart {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; margin-top: auto; padding: 0 var(--tg-sp-4);
	background: var(--tg-black); color: #fff; border: 0; border-radius: var(--tg-radius);
	font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); text-decoration: none;
}
.tg-pcard .button:hover { background: var(--tg-green); }
.tg-pcard .added_to_cart { margin-left: var(--tg-sp-2); }

/* ===================== Single product (PDP) ===================== */
.tg-pdp { padding-bottom: var(--tg-band-y-loose); }
.tg-pdp__grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-6); padding-top: var(--tg-sp-4); }
@media (min-width: 900px) { .tg-pdp__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--tg-sp-8); align-items: start; } }

/* Gallery: vertical thumbnail rail + white stage */
.tg-pdp__gallery { position: relative; }
/* Beat WooCommerce's default `.woocommerce div.product .woocommerce-product-gallery { width:48% }`. */
.woocommerce div.product .tg-pdp__gallery .woocommerce-product-gallery { width: 100%; float: none; margin: 0; }
.tg-pdp__gallery .woocommerce-product-gallery { display: flex; gap: var(--tg-sp-4); }
/* The square keeps the stage the same height before and after WooCommerce's
   slider runs. Until it does, all four product images are stacked in the flow -
   four times the height - and the collapse when the script finally arrives was
   this page's entire layout shift. With the box fixed and the overflow clipped
   the stack is simply not visible, and once the slider sets its own inline
   height the ratio is ignored. */
.tg-pdp__gallery .woocommerce-product-gallery__wrapper, .tg-pdp__gallery .flex-viewport { flex: 1; min-width: 0; aspect-ratio: 1; background: var(--tg-white); border-radius: var(--tg-radius-lg); overflow: hidden; }
/* Product shots are photographed on white, so multiply drops that white into
   the grey tile and the product appears cut out.
   It must NOT reach the zoom or the lightbox: both put the image over a layer
   of their own, and multiplying against that is what makes a zoomed product
   look half transparent. Those two get a plain white ground instead. */
.tg-pdp__gallery .zoomImg {
	background: var(--tg-white);
}
.pswp img,
.pswp__img {
	background: var(--tg-white);
}
.tg-pdp__gallery .flex-control-thumbs { order: -1; display: flex; flex-direction: column; gap: 10px; width: 76px; margin: 0; padding: 0; list-style: none; }
.tg-pdp__gallery .flex-control-thumbs li { width: 76px; }
.tg-pdp__gallery .flex-control-thumbs img { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-sm); cursor: pointer; opacity: .65; background: var(--tg-paper); }
/* The full-screen trigger. WooCommerce's own stylesheet used to place this over
   the image; it is no longer loaded on this page, so without these rules the
   magnifier drops into the flow as a loose glyph beside the thumbnails. */
.tg-pdp__gallery .woocommerce-product-gallery { position: relative; }

.tg-pdp__gallery .woocommerce-product-gallery__trigger {
	/* Bottom right, not top right: the thumbnails sit above the stage on a phone
	   and to its left on a desktop, so the top right of the gallery is beside
	   the thumbs on mobile. The bottom right is over the image in both. */
	position: absolute; bottom: var(--tg-sp-3); right: var(--tg-sp-3); z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--tg-radius-pill);
	background: rgba(255,255,255,.92); color: var(--tg-ink);
	font-size: 18px; line-height: 1; text-decoration: none;
	box-shadow: var(--tg-shadow-sm);
}
.tg-pdp__gallery .woocommerce-product-gallery__trigger:hover { background: #fff; box-shadow: var(--tg-shadow); }
.tg-pdp__gallery .flex-control-thumbs img.flex-active, .tg-pdp__gallery .flex-control-thumbs img:hover { opacity: 1; border-color: var(--tg-green); }
@media (max-width: 899px) {
	.tg-pdp__gallery .woocommerce-product-gallery { flex-direction: column; }
	.tg-pdp__gallery .flex-control-thumbs { flex-direction: row; width: auto; overflow-x: auto; }
	.tg-pdp__gallery .flex-control-thumbs li { width: 64px; flex: 0 0 64px; }
}

/* Summary */
.tg-pdp__title { font-size: clamp(var(--tg-fs-xl), 3vw, var(--tg-fs-2xl)); text-transform: uppercase; margin: 0 0 var(--tg-sp-3); }
.tg-pdp__topmeta { display: flex; align-items: center; gap: var(--tg-sp-4); flex-wrap: wrap; margin-bottom: var(--tg-sp-4); }
.tg-pdp__price { font-size: var(--tg-fs-xl); font-weight: var(--tg-fw-bold); }
.tg-pdp__price del { color: var(--tg-text-muted); font-weight: var(--tg-fw-normal); margin-right: 6px; }
.tg-pdp__rating { color: var(--tg-text-muted); }
.tg-pdp__excerpt { color: var(--tg-text-muted); margin-bottom: var(--tg-sp-4); }
.tg-pdp__stock { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--tg-fw-semi); margin: 0 0 var(--tg-sp-3); }
/* Body-size status text, so the green that passes at body size. */
.tg-pdp__stock--in { color: var(--tg-green-text); }
.tg-pdp__stock--out { color: var(--tg-error); }
.tg-pdp__sizeguide { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); margin-bottom: var(--tg-sp-4); }

/* Variation table -> swatches + size buttons */
/* The variation block below carries the gap, so the table does not add a second one. */
.tg-pdp .variations { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.tg-pdp .variations th, .tg-pdp .variations td { display: block; text-align: left; padding: 0; }
.tg-pdp .variations th { text-transform: uppercase; letter-spacing: .04em; font-size: var(--tg-fs-sm); margin: var(--tg-sp-3) 0 var(--tg-sp-2); }
.tg-pdp .reset_variations { display: inline-block; font-size: var(--tg-fs-sm); margin-top: var(--tg-sp-2); }
/* WooCommerce ships its own margins on the block that holds the chosen
   variation's price, stock line and add-to-cart row. Left alone they open a
   40px hole between the size buttons and the button, which is why the summary
   column's rhythm looked arbitrary. */
.tg-pdp .single_variation_wrap { margin-top: var(--tg-sp-4); }
.tg-pdp .woocommerce-variation { margin: 0 0 var(--tg-sp-3); }
.tg-pdp .woocommerce-variation-price { font-weight: var(--tg-fw-bold); }
.tg-pdp .woocommerce-variation-availability p { margin: 0; }
.tg-pdp .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: var(--tg-sp-3); flex-wrap: wrap; margin: 0; }
.tg-variation { display: flex; flex-wrap: wrap; gap: var(--tg-sp-2); }
.tg-vopt {
	min-width: 48px; min-height: 44px; padding: 0 var(--tg-sp-3);
	border: var(--tg-bw-thick) solid var(--tg-border-strong); border-radius: var(--tg-radius);
	background: var(--tg-bg); font: inherit; font-weight: var(--tg-fw-semi); cursor: pointer;
}
.tg-vopt.is-selected { border-color: var(--tg-ink); }
.tg-vopt.is-disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.tg-variation--swatch .tg-vopt { width: 34px; height: 34px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; }
.tg-variation--swatch .tg-vopt.is-selected { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--tg-ink); }

/* Add to cart + qty */
.tg-pdp form.cart { margin: var(--tg-sp-4) 0; }
.tg-pdp .quantity { display: inline-flex; align-items: center; border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius); overflow: hidden; margin-right: var(--tg-sp-3); }
.tg-pdp .quantity input.qty { width: 56px; height: 52px; border: 0; text-align: center; font: inherit; -moz-appearance: textfield; }
.tg-pdp .single_add_to_cart_button, .tg-pdp form.cart .button {
	min-height: 52px; padding: 0 var(--tg-sp-6); border: 0; border-radius: var(--tg-radius);
	background: var(--tg-green-fill); color: #fff; font-weight: var(--tg-fw-bold); font-size: var(--tg-fs-md);
	text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
}
.tg-pdp .single_add_to_cart_button:hover { background: var(--tg-green-strong); }
.tg-pdp form.cart:not(.variations_form) { display: flex; align-items: center; gap: var(--tg-sp-3); flex-wrap: wrap; }
.tg-pdp .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: var(--tg-sp-3); flex-wrap: wrap; margin-top: var(--tg-sp-3); }
.tg-pdp .woocommerce-variation-price { margin-bottom: var(--tg-sp-3); font-size: var(--tg-fs-lg); font-weight: var(--tg-fw-bold); }

/* Trust */
.tg-pdp__trust { display: flex; flex-wrap: wrap; gap: var(--tg-sp-4); margin-top: var(--tg-sp-5); padding-top: var(--tg-sp-4); border-top: var(--tg-bw) solid var(--tg-border); }
.tg-pdp__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-pdp__trust svg { color: var(--tg-green); }

/* Tabs */
.tg-pdp__tabs { margin-top: var(--tg-sp-8); }
/* ===== Product panels =====
   The tabs are expanders, all shut until asked (woocommerce/single-product/
   tabs/tabs.php). The strip of tab links, the script that re-showed one panel
   and the layout shift that came with it are all gone with them: a <details>
   needs no JavaScript, so there is no settled state to match up front. */
.tg-pdp__panels { border-top: var(--tg-bw) solid var(--tg-border); }
.tg-pdp__panel { border-bottom: var(--tg-bw) solid var(--tg-border); }
.tg-pdp__panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--tg-sp-3);
	cursor: pointer; list-style: none;
	/* sp-3, not sp-4: three rows at 67px was 206px of a shopper's scroll for
	   three words each. The row still spans the full width, so the tap target
	   is large even at this height. */
	padding: var(--tg-sp-3) 0;
	font-weight: var(--tg-fw-semi);
}
.tg-pdp__panel-head::-webkit-details-marker { display: none; }
.tg-pdp__panel-head:focus-visible { outline: 2px solid var(--tg-green); outline-offset: -2px; border-radius: var(--tg-radius-sm); }
.tg-pdp__panel-head:hover .tg-pdp__panel-title { color: var(--tg-green); }
.tg-pdp__panel-title { font-size: var(--tg-fs-md, 1.125rem); }
/* The house chevron points RIGHT, so a disclosure has to turn it: down when
   shut, up when open, as on the shop archive's category description. */
.tg-pdp__panel-chev {
	flex: 0 0 auto;
	stroke: currentColor; fill: none;
	transform: rotate(90deg);
	transition: transform var(--tg-dur) var(--tg-ease);
}
.tg-pdp__panel[open] > .tg-pdp__panel-head .tg-pdp__panel-chev { transform: rotate(-90deg); }
.tg-pdp__panel-body { padding: 0 0 var(--tg-sp-5); }
/* WooCommerce prints its own heading inside each panel, which repeats the
   summary now that the summary IS the heading. The reviews one is nested a
   couple of levels down rather than being a direct child, so it needs naming
   separately or "Reviews" appears twice. Hidden from sight, not from a screen
   reader, which still benefits from the heading in the document. */
.tg-pdp__panel-body > h2:first-child,
.tg-pdp__panel-body .woocommerce-Reviews-title {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* A product description ran the full 1360px of the container, roughly double a
   comfortable line. Only the prose is capped; the specification table is left
   alone, it wants the width. */
.tg-pdp__panel-body > p,
.tg-pdp__panel-body > ul,
.tg-pdp__panel-body > ol,
.tg-pdp__panel-body > h3,
.tg-pdp__panel-body > blockquote { max-width: 70ch; }
.tg-pdp__panel-body > hr { max-width: 70ch; margin-inline: 0; }

/* ===== Money-path buttons =====
   "Proceed to Checkout" and "Place Order" are WooCommerce Blocks buttons, and
   nothing had styled them: charcoal rgb(50,55,60), square corners, 41px tall
   and weight 400, where every other primary action on the site is the brand
   green, 10px radius, 48px tall and semibold. The two most important buttons
   in the shop were the only ones off-brand.

   Matched to .tg-btn--primary, including --tg-green-FILL rather than the brand
   green: white on the brand green is 2.74:1, which fails AA at button size. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions .wc-block-components-button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%;
	min-height: var(--tg-tap);
	padding: 0 var(--tg-sp-5);
	border: var(--tg-bw-thick) solid transparent;
	border-radius: var(--tg-radius);
	background-color: var(--tg-green-fill); color: #fff;
	font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-base);
	line-height: 1; text-decoration: none;
	transition: background var(--tg-dur) var(--tg-ease);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout__actions .wc-block-components-button:hover { background-color: #35691a; }
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible { outline: 2px solid var(--tg-green); outline-offset: 3px; }
/* The block button wraps its label in a span that carries its own line-height. */
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text { display: inline-flex; align-items: center; }

/* ===== Review form =====
   WooCommerce's own stylesheet is dequeued on this page (see tg_shop_styles),
   which is right for everything the theme draws itself, but the review form is
   core markup nobody had styled: raw 21px inputs, a default Submit button and a
   star picker that read as the words "1 of 5 stars 2 of 5 stars" in a row. It
   was hidden behind a tab before; now that the panel opens cleanly it is on
   show, so it is dressed to match the theme's own fields. */
#review_form .comment-reply-title { font-size: var(--tg-fs-md); font-weight: var(--tg-fw-bold); margin: 0 0 var(--tg-sp-2); }
#review_form .comment-notes { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); margin: 0 0 var(--tg-sp-4); }
#review_form .comment-form-rating,
#review_form .comment-form-comment,
#review_form .comment-form-author,
#review_form .comment-form-email { margin: 0 0 var(--tg-sp-4); max-width: 34rem; }
#review_form label { display: block; margin-bottom: var(--tg-sp-2); font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); }
#review_form input[type=text],
#review_form input[type=email],
#review_form 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: var(--tg-bg); color: var(--tg-text); font: inherit; font-size: var(--tg-fs-base);
}
#review_form textarea { min-height: 140px; resize: vertical; }
#review_form input[type=text]:focus,
#review_form input[type=email]:focus,
#review_form textarea:focus { border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2); }
#review_form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--tg-sp-2); margin: 0 0 var(--tg-sp-4); }
#review_form .comment-form-cookies-consent label { margin: 0; font-weight: var(--tg-fw-normal); color: var(--tg-text-muted); }
#review_form input[type=submit] {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--tg-tap); padding: var(--tg-sp-3) var(--tg-sp-6);
	border: 0; border-radius: var(--tg-radius);
	background: var(--tg-green-fill); color: #fff;
	font: inherit; font-size: var(--tg-fs-base); font-weight: var(--tg-fw-semi);
	cursor: pointer;
}
#review_form input[type=submit]:hover { background: #35691a; }
#review_form input[type=submit]:focus-visible { outline: 2px solid var(--tg-green); outline-offset: 3px; }

/* The star picker. Core ships it as five links that only become stars with
   WooCommerce's CSS, so without this it is a line of "1 of 5 stars" labels. */
#review_form .stars { display: inline-flex; gap: var(--tg-sp-1, 4px); margin: 0; }
#review_form .stars a {
	/* inline-BLOCK: as plain inline elements the width, height and overflow
	   were all ignored, so the labels "1 of 5 stars" stayed on screen with the
	   star glyphs sitting on top of them. */
	display: inline-block;
	position: relative; width: 1.75rem; height: 1.75rem;
	text-indent: -9999px; overflow: hidden;
	text-decoration: none; vertical-align: middle;
}
#review_form .stars a::before {
	content: "\2605"; /* a filled star, greyed until chosen */
	position: absolute; inset: 0;
	text-indent: 0; overflow: visible;
	font-size: 1.6rem; line-height: 1.75rem; text-align: center;
	color: var(--tg-border-strong);
	transition: color var(--tg-dur) var(--tg-ease);
}
#review_form .stars:hover a::before,
#review_form .stars a:focus-visible::before { color: var(--tg-green); }
/* Hovering a star should fill it and everything BEFORE it, not after, so the
   row reads as a rating rather than five independent toggles. */
#review_form .stars a:hover ~ a::before { color: var(--tg-border-strong); }
#review_form .stars.selected a.active::before,
#review_form .stars.selected a.active ~ a::before { color: var(--tg-border-strong); }
#review_form .stars.selected a::before { color: var(--tg-green); }
#review_form .stars.selected a.active::before { color: var(--tg-green); }
#review_form .stars a:focus-visible { outline: 2px solid var(--tg-green); outline-offset: 2px; border-radius: 4px; }

/* The list of existing reviews. */
.tg-pdp__panel-body .commentlist { list-style: none; margin: 0 0 var(--tg-sp-5); padding: 0; display: grid; gap: var(--tg-sp-4); }
.tg-pdp__panel-body .commentlist .comment_container { display: flex; gap: var(--tg-sp-3); }
.tg-pdp__panel-body .commentlist img.avatar { width: 40px; height: 40px; border-radius: 50%; }
.tg-pdp__panel-body .woocommerce-review__author { font-weight: var(--tg-fw-semi); }
.tg-pdp__panel-body .woocommerce-review__dash,
.tg-pdp__panel-body .woocommerce-review__published-date { color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }

/* Secondary CTA: Add bundle (outlined, per brief CTA hierarchy) */
.tg-pdp__bundle { margin-top: var(--tg-sp-3); display: inline-flex; align-items: center; gap: 8px; }

/* Context-led recommendation modules */
.tg-recsec, .tg-fbt, .tg-ballguide { margin-top: var(--tg-sp-8); }
.tg-recsec__title { font-size: var(--tg-fs-xl); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 var(--tg-sp-5); }
.tg-recsec ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tg-sp-5); }
@media (min-width: 700px) { .tg-recsec ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* WooCommerce's default `li.product { float:left; width:22.05% }` isn't dequeued on
   single-product pages; neutralise it so the cards fill their grid cells. */
.tg-recsec ul.products li.product { width: 100%; float: none; margin: 0; clear: none; }
/* WC's clearfix ::before/::after become stray grid cells; remove them. */
.tg-recsec ul.products::before, .tg-recsec ul.products::after { display: none; }

/* Frequently bought together */
.tg-fbt__inner { display: grid; gap: var(--tg-sp-5); align-items: start; }
@media (min-width: 900px) { .tg-fbt__inner { grid-template-columns: minmax(0, 1fr) 280px; } }
.tg-fbt__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-sp-3); }
.tg-fbt__plus { font-size: var(--tg-fs-xl); color: var(--tg-text-muted); font-weight: var(--tg-fw-bold); }
.tg-fbt__item { display: flex; gap: var(--tg-sp-3); align-items: center; padding: var(--tg-sp-3); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); cursor: pointer; max-width: 260px; }
.tg-fbt__item.is-main { border-color: var(--tg-ink); }
.tg-fbt__item input { width: 18px; height: 18px; accent-color: var(--tg-green); flex: none; }
.tg-fbt__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--tg-radius-sm); display: block; }
.tg-fbt__meta { display: grid; gap: 4px; min-width: 0; }
.tg-fbt__name { font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); }
.tg-fbt__price { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-fbt__cta { padding: var(--tg-sp-5); background: var(--tg-surface, #f6f6f4); border-radius: var(--tg-radius); display: grid; gap: var(--tg-sp-3); align-content: start; }
.tg-fbt__total { margin: 0; font-size: var(--tg-fs-md); }
.tg-fbt__total strong { font-size: var(--tg-fs-lg); }

/* Which ball is right for me */
.tg-ballguide__inner { display: grid; gap: var(--tg-sp-4); padding: var(--tg-sp-6); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius); background: var(--tg-surface, #f6f6f4); }
@media (min-width: 800px) { .tg-ballguide__inner { grid-template-columns: minmax(0,1fr) auto auto; align-items: center; } }
.tg-ballguide__lead { display: flex; gap: var(--tg-sp-3); align-items: flex-start; }
.tg-ballguide__lead svg { color: var(--tg-green); flex: none; }
.tg-ballguide__lead h2 { margin-bottom: 4px; }
.tg-ballguide__lead p { margin: 0; color: var(--tg-text-muted); font-size: var(--tg-fs-sm); }
.tg-ballguide__sizes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--tg-sp-4); flex-wrap: wrap; }
.tg-ballguide__sizes li { display: flex; align-items: center; gap: 8px; font-size: var(--tg-fs-sm); font-weight: var(--tg-fw-semi); }
.tg-ballguide__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tg-ink); color: #fff; font-weight: var(--tg-fw-bold); }

/* Sticky mobile basket bar */
.tg-pdp__sticky {
	position: fixed; left: 0; right: 0; bottom: var(--tg-bottombar-h); z-index: var(--tg-z-bottombar);
	display: none; align-items: center; justify-content: space-between; gap: var(--tg-sp-3);
	padding: var(--tg-sp-3) var(--tg-gutter); background: var(--tg-white);
	border-top: var(--tg-bw) solid var(--tg-border); box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.tg-pdp__sticky.is-shown { display: flex; }
.tg-pdp__sticky-price { font-weight: var(--tg-fw-bold); }
.tg-pdp__sticky .tg-btn { flex: 1; max-width: 240px; }
@media (min-width: 900px) { .tg-pdp__sticky { display: none !important; } }

/* ===================== Cart ===================== */
.woocommerce-cart .tg-container, .woocommerce-checkout .tg-container { max-width: var(--tg-maxw); }
/* Focus the checkout to a sensible width so the coupon bar, billing form and order
   summary all align and the single-line fields stay readable (~630px) instead of
   filling a ~930px column. */
.woocommerce-checkout .woocommerce { max-width: 1060px; }
/* Two-column cart: line items left, totals right (notice spans the top). */
@media (min-width: 900px) {
	.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--tg-sp-6) var(--tg-sp-7); align-items: start; }
	.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; margin: 0; min-width: 0; }
	.woocommerce-cart .cart-collaterals { grid-column: 2; margin-top: 0; min-width: 0; }
}
.woocommerce-cart-form table.shop_table { width: 100%; border-collapse: collapse; }
/* Fixed table layout so the product-name column expands and remove + thumbnail
   sit tight on the left; auto-layout was dumping ~295px into the remove column,
   leaving a big empty gap before the product. */
@media (min-width: 900px) {
	.woocommerce-cart-form table.shop_table { table-layout: fixed; }
	.woocommerce-cart-form .product-remove { width: 56px; }
	.woocommerce-cart-form .product-thumbnail { width: 96px; }
	.woocommerce-cart-form .product-price { width: 100px; }
	.woocommerce-cart-form .product-quantity { width: 108px; }
	.woocommerce-cart-form .product-subtotal { width: 108px; }
}
/* Keep the coupon/update buttons on one line (the actions cell is a flex box). */
.woocommerce-cart-form td.actions button { white-space: nowrap; }
.woocommerce-cart-form table.shop_table th { text-align: left; text-transform: uppercase; font-size: var(--tg-fs-xs); letter-spacing: .04em; color: var(--tg-text-muted); padding: var(--tg-sp-3); border-bottom: var(--tg-bw) solid var(--tg-border); }
.woocommerce-cart-form table.shop_table td { padding: var(--tg-sp-4) var(--tg-sp-3); border-bottom: var(--tg-bw) solid var(--tg-border); vertical-align: middle; }
/* .woocommerce table.cart img is more specific than this was, and pins the
   thumbnail at 32px - a stamp in a 96px column with the product name stranded
   to its right. */
.woocommerce .woocommerce-cart-form table.cart td.product-thumbnail img,
.woocommerce-cart-form .product-thumbnail img { width: 72px; height: 72px; object-fit: contain; background: var(--tg-paper); border-radius: var(--tg-radius-sm); }
.woocommerce-cart-form .product-name a { font-weight: var(--tg-fw-semi); color: var(--tg-text); }
.woocommerce-cart-form .product-remove a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--tg-paper); color: var(--tg-error); text-decoration: none; font-weight: 700; }
.woocommerce-cart-form .quantity input.qty { width: 64px; height: 44px; text-align: center; border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius); }
/* Actions row: coupon left, update basket right (both clearly visible). */
.woocommerce-cart-form td.actions { padding: var(--tg-sp-4) var(--tg-sp-3); border-bottom: 0; }
.woocommerce-cart-form td.actions { display: flex; flex-wrap: wrap; gap: var(--tg-sp-3); align-items: center; justify-content: space-between; }
.woocommerce-cart-form td.actions .coupon { display: flex; gap: var(--tg-sp-2); align-items: center; }
.woocommerce-cart-form td.actions .coupon input.input-text { height: 44px; padding: 0 var(--tg-sp-3); border: var(--tg-bw) solid var(--tg-border-strong); border-radius: var(--tg-radius); min-width: 160px; }
.woocommerce-cart-form td.actions button[name="update_cart"] { background: transparent; color: var(--tg-ink); border: var(--tg-bw) solid var(--tg-border-strong); min-height: 44px; padding: 0 var(--tg-sp-4); border-radius: var(--tg-radius); font-weight: var(--tg-fw-semi); }
.woocommerce-cart-form td.actions button[name="update_cart"]:disabled { opacity: .45; cursor: not-allowed; }
.woocommerce-cart-form td.actions button[name="update_cart"]:not(:disabled):hover { border-color: var(--tg-ink); background: var(--tg-paper); }
.woocommerce-cart .cart-collaterals { display: block; margin-top: var(--tg-sp-6); width: 100%; }
.woocommerce-cart .cart-collaterals .cross-sells { display: none; } /* keep the totals column clean */
/* Beat WooCommerce's default `.woocommerce .cart-collaterals .cart_totals { float:right; width:48% }`. */
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; background: var(--tg-paper); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); }
.woocommerce-cart .cart_totals h2 { font-size: var(--tg-fs-lg); margin-top: 0; }
.woocommerce-cart .cart_totals table { width: 100%; }
.woocommerce-cart .cart_totals th, .woocommerce-cart .cart_totals td { padding: var(--tg-sp-2) 0; text-align: left; vertical-align: top; }
.woocommerce-cart .cart_totals td { text-align: right; }
.woocommerce-cart .cart_totals .woocommerce-shipping-methods, .woocommerce-cart .cart_totals .shipping-calculator-button { font-size: var(--tg-fs-sm); }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: var(--tg-sp-4); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; white-space: nowrap; }

/* ===================== Checkout ===================== */
.woocommerce-checkout form.checkout { display: grid; gap: var(--tg-sp-6) var(--tg-sp-7); }
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0,1fr) 380px; align-items: start; }
	.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
	.woocommerce-checkout form.checkout > .checkout_coupon { grid-column: 1 / -1; }
	.woocommerce-checkout form.checkout #customer_details { grid-column: 1; }
	.woocommerce-checkout form.checkout #order_review { grid-column: 2; }
}
.woocommerce-checkout .col2-set { display: grid; gap: var(--tg-sp-5); }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.woocommerce-checkout h3 { font-size: var(--tg-fs-lg); }
/* The separate "Your order" heading floats away from its card in a spanning grid;
   hide it and render the label inside the review card so they can never gap. */
.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout #order_review {
	background: var(--tg-paper); border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg);
	padding: var(--tg-sp-5); margin: 0;
}
.woocommerce-checkout #order_review::before { content: "Your order"; display: block; font-family: var(--tg-font-head); font-size: var(--tg-fs-lg); font-weight: var(--tg-fw-bold); margin-bottom: var(--tg-sp-4); }
.woocommerce-checkout #order_review table.shop_table { width: 100%; }
.woocommerce-checkout #order_review th, .woocommerce-checkout #order_review td { padding: var(--tg-sp-2) 0; text-align: left; }
.woocommerce-checkout #order_review td { text-align: right; }

/* ===================== My Account ===================== */
.woocommerce-account .tg-container { max-width: var(--tg-maxw); }
/* Use WooCommerce's own float layout (nav left, content right) but tighten it so
   it spans the full container instead of leaving a dead column: a slim fixed nav
   and a content column that takes the rest. (An earlier CSS grid on .woocommerce
   reserved an empty 240px track because nav+content are nested a level deeper.) */
@media (min-width: 820px) {
	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { width: 240px; margin-right: var(--tg-sp-7); }
	.woocommerce-account.logged-in .woocommerce-MyAccount-content { width: calc(100% - 240px - var(--tg-sp-7)); }
}
/* Lost-password: a single email field shouldn't span the full width. */
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password { max-width: 460px; }
/* Address cards: WooCommerce squishes them to 47%-floated columns inside the
   content; lay them out as a clean two-column grid that fills the content width. */
.woocommerce-account.logged-in .woocommerce-Addresses { display: grid; gap: var(--tg-sp-5); margin-top: var(--tg-sp-4); }
@media (min-width: 480px) { .woocommerce-account.logged-in .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-account.logged-in .woocommerce-Addresses .col-1,
.woocommerce-account.logged-in .woocommerce-Addresses .col-2,
.woocommerce-account.logged-in .woocommerce-Address { float: none; width: auto; }
@media (min-width: 480px) {
	.woocommerce-account.logged-in .woocommerce-Addresses .col-1 { grid-column: 1; grid-row: 1; }
	.woocommerce-account.logged-in .woocommerce-Addresses .col-2 { grid-column: 2; grid-row: 1; }
}
.woocommerce-account .woocommerce-Address { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); }
.woocommerce-account .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tg-sp-3); margin-bottom: var(--tg-sp-3); }
.woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: var(--tg-fs-lg); }

/* Logged-out login / register: a left-aligned card under the page title (the
   title and every logged-in account page are left-aligned, so centring the form
   left a big empty gutter and read as misaligned on wide screens). */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 900px; margin-inline: 0; }
.woocommerce-account .u-columns { display: grid; gap: var(--tg-sp-6); }
@media (min-width: 720px) { .woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-account .u-column1, .woocommerce-account .u-column2, .woocommerce-account .col-1, .woocommerce-account .col-2 { width: auto; float: none; }
.woocommerce-account form.login, .woocommerce-account form.register { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); padding: var(--tg-sp-6); margin: 0; }
.woocommerce-account:not(.logged-in) form.login { max-width: 460px; margin-inline: 0; }
.woocommerce-account form.login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--tg-sp-2); }

/* Account edit forms: keep single-line fields to a readable width instead of
   stretching the full content column (postcode/phone/email were ~1160px wide). */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields { max-width: 600px; }
.woocommerce-account form.login button, .woocommerce-account form.register button { margin-top: var(--tg-sp-2); }
.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--tg-sp-5); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--tg-sp-3) var(--tg-sp-4); font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); color: var(--tg-text); border-left: 3px solid transparent; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--tg-paper); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--tg-paper); border-left-color: var(--tg-green); color: var(--tg-ink); }
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--tg-link); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius-lg); padding: var(--tg-sp-5); }
.woocommerce-account table.shop_table, .woocommerce-account table.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { padding: var(--tg-sp-3); text-align: left; border-bottom: var(--tg-bw) solid var(--tg-border); font-size: var(--tg-fs-sm); }
.woocommerce-account table.shop_table th { text-transform: uppercase; font-size: var(--tg-fs-xs); letter-spacing: .04em; color: var(--tg-text-muted); }
.woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { font-size: var(--tg-fs-lg); margin: 0 0 var(--tg-sp-4); }

/* WooCommerce form fields -> theme look (cart, checkout, account) */
.woocommerce form .form-row { display: block; margin-bottom: var(--tg-sp-4); }
.woocommerce form .form-row label { display: block; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); margin-bottom: var(--tg-sp-2); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	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: var(--tg-bg); color: var(--tg-text); font: inherit;
}
/* ...but a select keeps room for its chevron (see components.css). */
.woocommerce form .form-row select { padding-right: calc(var(--tg-sp-4) + 20px); }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--tg-green); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2); }

/* Primary WooCommerce buttons -> brand green; secondary -> dark */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: var(--tg-tap); padding: 0 var(--tg-sp-5); border: 0; border-radius: var(--tg-radius);
	background: var(--tg-black); color: #fff; font-weight: var(--tg-fw-semi); font-size: var(--tg-fs-sm); cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--tg-n-800); color: #fff; }
/* The same green as .tg-btn--primary, not the brand green: white on the brand
   green is 2.74:1, which fails AA, and these are the buttons that take the
   money - add to basket, proceed to checkout, place order. --tg-green-fill is
   the nearest green that passes behind white text. */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .button.checkout-button, .woocommerce #place_order,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.tg-pdp .single_add_to_cart_button {
	background: var(--tg-green-fill) !important; color: #fff !important; font-weight: var(--tg-fw-bold);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .button.checkout-button:hover, .woocommerce #place_order:hover,
.tg-pdp .single_add_to_cart_button:hover { background: #35691a !important; }
.woocommerce button.button.alt.disabled, .tg-pdp .single_add_to_cart_button.disabled { opacity: .5; }
.woocommerce #place_order, .woocommerce .checkout-button { width: 100%; min-height: 52px; font-size: var(--tg-fs-md); text-transform: uppercase; letter-spacing: .02em; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--tg-radius); padding: var(--tg-sp-4); border: var(--tg-bw) solid var(--tg-border); background: var(--tg-paper); list-style: none; }
/* WooCommerce absolutely positions a glyph from its own icon font at the left
   of a notice, sized for its own padding: against ours it landed on top of the
   first word. The coloured left edge below already says which kind of notice it
   is, and it says it the same way on the pages where WooCommerce's stylesheet
   is not loaded at all. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
/* Same icon font, same problem: a glyph tacked onto the "Calculate shipping"
   link that reads as a stray mark next to the theme's own icons. */
.woocommerce .shipping-calculator-button::after { display: none; }
.woocommerce-message { border-left: 4px solid var(--tg-green); }
.woocommerce-error { border-left: 4px solid var(--tg-error); }

/* Approved card stock line + PDP delivery/instalment lines (brief p27/p28). */
.tg-pcard__stock { font-size: var(--tg-fs-xs); color: var(--tg-text-muted); margin: 0 0 var(--tg-sp-2); }
.tg-pcard__stock::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tg-green); margin-right: 6px; vertical-align: middle; }
/* 4.24:1 at 12px, just under the bar; this amber clears it. */
.tg-pcard__stock--low { color: #a05f00; }
.tg-pcard__stock--low::before { background: #e0a800; }
.tg-pcard__stock--out { color: var(--tg-text-muted); }
.tg-pcard__stock--out::before { background: var(--tg-n-400); }
.tg-pdp__delivery {
	display: flex; align-items: flex-start; gap: var(--tg-sp-3);
	padding: var(--tg-sp-3) var(--tg-sp-4); margin: 0 0 var(--tg-sp-4);
	border: var(--tg-bw) solid var(--tg-border); border-radius: var(--tg-radius);
	font-size: var(--tg-fs-sm);
}
.tg-pdp__delivery svg { color: var(--tg-green); flex: 0 0 auto; }
.tg-pdp__delivery a { display: block; font-size: var(--tg-fs-xs); }
.tg-pdp__instalments { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); margin: var(--tg-sp-3) 0 0; }

/* Active filter chips: what is filtering the grid, each removable (brief p27). */
.tg-activefilters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tg-sp-2) var(--tg-sp-3); margin-bottom: var(--tg-sp-4); }
.tg-activefilters__label { font-size: var(--tg-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--tg-text-muted); font-weight: var(--tg-fw-bold); }
.tg-activefilters ul { display: flex; flex-wrap: wrap; gap: var(--tg-sp-2); list-style: none; margin: 0; padding: 0; }
.tg-activefilters a {
	display: inline-flex; align-items: center; gap: var(--tg-sp-2); min-height: 34px;
	padding: 0 var(--tg-sp-3); border: var(--tg-bw) solid var(--tg-border-strong);
	border-radius: var(--tg-radius-pill); font-size: var(--tg-fs-sm); color: var(--tg-text);
}
.tg-activefilters a:hover { text-decoration: none; border-color: var(--tg-green); background: var(--tg-green-soft); }
.tg-activefilters a span[aria-hidden] { color: var(--tg-text-muted); font-size: var(--tg-fs-md); line-height: 1; }
.tg-activefilters__clear { font-size: var(--tg-fs-xs); font-weight: var(--tg-fw-bold); text-transform: uppercase; letter-spacing: .06em; border: 0 !important; padding: 0 !important; min-height: 0 !important; color: var(--tg-green-text) !important; }

/* Delivery rule shown in the basket and at checkout (amends 2026-10-09). */
.tg-delivery-note {
	margin: 0 0 var(--tg-sp-3); padding: var(--tg-sp-3) var(--tg-sp-4);
	background: var(--tg-paper); border-radius: var(--tg-radius-sm);
	font-size: var(--tg-fs-sm); color: var(--tg-text);
}
.tg-delivery-note.is-free { background: rgba(67,132,30,.1); color: var(--tg-green-text); font-weight: var(--tg-fw-semi); }

/* Goalkeeper glove cut + size guides (client copy, 2026-10-09). Mirrors the ball
   guide so the two read as one component family. */
.tg-gloveguide { margin-block: var(--tg-band-y); }
.tg-gloveguide__inner {
	background: var(--tg-paper); border-radius: var(--tg-radius-lg);
	padding: var(--tg-sp-6); display: grid; gap: var(--tg-sp-5);
}
.tg-gloveguide__lead { display: flex; gap: var(--tg-sp-4); align-items: flex-start; color: var(--tg-green-text); }
.tg-gloveguide__lead p { color: var(--tg-text); margin: var(--tg-sp-2) 0 0; max-width: 72ch; }
.tg-gloveguide__cuts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-3); }
@media (min-width: 760px) { .tg-gloveguide__cuts { grid-template-columns: repeat(2, 1fr); gap: var(--tg-sp-4); } }
@media (min-width: 1100px) { .tg-gloveguide__cuts { grid-template-columns: repeat(4, 1fr); } }
.tg-gloveguide__cuts li {
	background: var(--tg-white); border: var(--tg-bw) solid var(--tg-border);
	border-radius: var(--tg-radius); padding: var(--tg-sp-4);
}
.tg-gloveguide__cuts strong { display: block; margin-bottom: var(--tg-sp-1); }
.tg-gloveguide__cuts span { font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-gloveguide__note { margin: 0; font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }
.tg-gloveguide__cta { display: flex; gap: var(--tg-sp-3); flex-wrap: wrap; }

/* VAT note under the single-product price. */
.tg-vatnote { margin: -2px 0 var(--tg-sp-3); font-size: var(--tg-fs-sm); color: var(--tg-text-muted); }

/* Filters applying over AJAX: dim the grid rather than collapsing it, so the
   page does not jump while the replacement is fetched. */
.tg-shop__main.is-loading { opacity: .55; transition: opacity var(--tg-dur) var(--tg-ease); pointer-events: none; }
.tg-delivery-note__sale { display: block; margin-top: 2px; font-size: var(--tg-fs-xs); color: var(--tg-text-muted); }

/* ===== Category banner =====

   The "big banner on the top" of a product category, so a listing opens like a
   shop rather than with a bare heading. Full-bleed photograph, copy over a
   bottom-weighted scrim, the category's own H1 inside it. */
.tg-catbanner {
	position: relative;
	display: flex;
	align-items: flex-end;
	/*
	 * Height is clamped directly; there is NO aspect-ratio here.
	 *
	 * `aspect-ratio: 16/6` plus `max-height: 520px` made the banner 1387px wide
	 * in a 1440px viewport: with the height capped, the browser shrank the WIDTH
	 * to keep the ratio (520 x 16/6 = 1386.67). It looked like a container was
	 * constraining it, and nothing was. A clamped height leaves width alone, so
	 * full bleed stays full bleed, and it still scales with the viewport.
	 */
	width: 100%;
	height: clamp(280px, 34vw, 520px);
	margin-bottom: var(--tg-sp-5);
	color: #fff;
	background-color: var(--tg-black);
	background-image:
		linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.8) 100%),
		var(--tg-tile-img, none);
	background-size: cover;
	background-position: var(--tg-tile-pos, center);
	background-repeat: no-repeat;
}

/* Designed artwork: no scrim, and nothing printed over it. The gradient above
   exists to keep a white title readable on a photograph; on a banner that
   carries its own lockup it just dims the artwork. */
.tg-catbanner--plain { background-image: var(--tg-tile-img, none); }
.tg-catbanner--plain .tg-catbanner__inner { padding-block: 0; }

.tg-catbanner__inner { padding-block: var(--tg-sp-6); }

.tg-catbanner__title {
	margin: 0;
	font-family: var(--tg-font-head);
	font-weight: var(--tg-fw-black);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	line-height: 1.03;
	text-transform: uppercase;
}

.tg-catbanner__desc {
	margin: var(--tg-sp-2) 0 0;
	max-width: 56ch;
	font-size: var(--tg-fs-md, 1rem);
	color: rgba(255,255,255,.88);
}

.tg-catbanner__count {
	margin: var(--tg-sp-2) 0 0;
	font-size: var(--tg-fs-sm);
	font-weight: var(--tg-fw-semi);
	/* The lighter tint, for the same reason as the showcase eyebrow and the kit
	   panel: the brand green at 14px over a photograph measured 3.47:1 on the
	   Kids banner and 3.78:1 on Respect, against the 4.5:1 that size needs. */
	color: var(--tg-green-on-dark);
}

/* A phone gets a squarer frame: 16:5 at 390px is 122px tall, which cannot hold
   a heading of this size plus a line of copy. */
@media (max-width: 699px) {
	/* Taller on a phone: 34vw at 390px is 133px, which cannot hold the heading
	   plus a line of copy. */
	.tg-catbanner { height: clamp(300px, 72vw, 420px); }
}