/**
 * Club shops: storefront, browse grid and self-service forms. Uses the theme's
 * --tg-* design tokens so it stays on-brand.
 */

/* ---- Storefront hero ---- */
.tgcs-hero {
	background: linear-gradient(135deg, var(--tgcs-primary, #111), #0c0c0c 70%);
	border-bottom: 4px solid var(--tgcs-secondary, var(--tg-green, #2f9e3f));
	padding-block: var(--tg-sp-7, 3rem);
}
.tgcs-hero__inner { display: flex; align-items: center; gap: var(--tg-sp-6, 2rem); flex-wrap: wrap; }
.tgcs-hero__crest {
	flex: 0 0 auto; width: 112px; height: 112px; border-radius: var(--tg-radius-lg, 14px);
	background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden;
}
.tgcs-hero__crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tgcs-hero__body { min-width: 0; }
.tgcs-hero__title { font-size: clamp(var(--tg-fs-2xl, 2rem), 4vw, var(--tg-fs-3xl, 2.6rem)); text-transform: uppercase; margin: 0 0 var(--tg-sp-2, .5rem); color: #fff; }
.tgcs-hero__sub { color: var(--tgcs-secondary, var(--tg-green, #2f9e3f)); }
.tgcs-hero__blurb { color: var(--tg-n-300, #cfcfcf); margin: 0 0 var(--tg-sp-2, .5rem); max-width: 60ch; }
.tgcs-hero__note { color: var(--tg-n-400, #9aa0a6); font-size: var(--tg-fs-sm, .9rem); margin: 0; max-width: 60ch; }

.tgcs-preview { background: rgba(207,59,46,.1); border: var(--tg-bw, 1px) solid var(--tg-error, #cf3b2e); border-radius: var(--tg-radius, 8px); padding: var(--tg-sp-3, .75rem) var(--tg-sp-4, 1rem); color: var(--tg-text, #222); }

/* Product page reached from a club shop. */
.tgcs-order-notice { background: var(--tg-green-soft, #e7f6ea); border: var(--tg-bw, 1px) solid var(--tg-green-line, #bfe6c8); border-radius: var(--tg-radius, 8px); padding: var(--tg-sp-3, .75rem) var(--tg-sp-4, 1rem); color: var(--tg-ink, #111); font-weight: var(--tg-fw-semi, 600); margin: 0 0 var(--tg-sp-4, 1rem); }

/* Retail (light) band for the products, like the shop archive. */
.tgcs-products-section { background: var(--tg-white, #fff); color: var(--tg-ink, #111); }
.tgcs-products .tg-product-grid { margin-top: 0; }
.tgcs-product { display: flex; flex-direction: column; list-style: none; }
.tgcs-product .tg-product-card { flex: 1 1 auto; }
.tgcs-product__cta { margin-top: var(--tg-sp-3, .75rem); text-align: center; }
.tgcs-empty { color: var(--tg-text-muted, #666); }

/* ---- Browse grid ---- */
.tgcs-grid { display: grid; grid-template-columns: 1fr; gap: var(--tg-sp-5, 1.5rem); }
@media (min-width: 560px) { .tgcs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tgcs-grid { grid-template-columns: repeat(4, 1fr); } }
.tgcs-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--tg-sp-3, .75rem);
	padding: var(--tg-sp-5, 1.5rem); border: var(--tg-bw, 1px) solid var(--tg-border, #e5e5e5);
	border-radius: var(--tg-radius-lg, 14px); color: var(--tg-text, #222); text-decoration: none;
	border-top: 4px solid var(--tgcs-primary, #111); transition: transform var(--tg-dur, .18s), border-color var(--tg-dur, .18s);
}
.tgcs-card:hover { transform: translateY(-2px); border-color: var(--tgcs-secondary, var(--tg-green, #2f9e3f)); text-decoration: none; }
.tgcs-card__crest { width: 72px; height: 72px; border-radius: var(--tg-radius, 8px); background: var(--tg-paper, #f6f6f4); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px; }
.tgcs-card__crest img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tgcs-card__initial { font-family: var(--tg-font-head, sans-serif); font-weight: var(--tg-fw-black, 800); font-size: var(--tg-fs-2xl, 2rem); color: var(--tgcs-primary, #111); }
.tgcs-card__name { font-family: var(--tg-font-head, sans-serif); font-weight: var(--tg-fw-black, 800); }
.tgcs-card__meta { font-size: var(--tg-fs-sm, .9rem); color: var(--tg-text-muted, #666); }

/* ---- Forms (light card over the page) ---- */
.tgcs-form-wrap {
	max-width: 680px; background: var(--tg-white, #fff); color: var(--tg-ink, #111);
	padding: var(--tg-sp-6, 2rem); border: var(--tg-bw, 1px) solid var(--tg-border, #e5e5e5); border-radius: var(--tg-radius-lg, 14px);
}
.tgcs-form-wrap h2 { margin-top: 0; }
/* Body-size link text, so the theme's green that passes at body size. */
.tgcs-form-wrap a { color: var(--tg-green-text, #3f7d1d); }
.tgcs-form-lead, .tgcs-form-name { color: var(--tg-text-muted, #666); }
.tgcs-form .tg-field { margin-bottom: var(--tg-sp-4, 1rem); }
.tgcs-form label { display: block; font-weight: var(--tg-fw-semi, 600); margin-bottom: 4px; }
.tgcs-form input[type=text], .tgcs-form input[type=email], .tgcs-form textarea {
	width: 100%; padding: 12px var(--tg-sp-3, .75rem); border: var(--tg-bw, 1px) solid var(--tg-border-strong, #cfcfcf);
	border-radius: var(--tg-radius, 8px); font: inherit; background: #fff; color: var(--tg-text, #222);
}
.tgcs-form input[type=file] { font: inherit; }
.tgcs-hint { font-size: var(--tg-fs-sm, .85rem); color: var(--tg-text-muted, #666); margin: 4px 0 0; }
.tgcs-colours { display: flex; gap: var(--tg-sp-5, 1.5rem); flex-wrap: wrap; }
.tgcs-colours input[type=color] { width: 60px; height: 44px; padding: 2px; border: var(--tg-bw, 1px) solid var(--tg-border-strong, #cfcfcf); border-radius: var(--tg-radius, 8px); background: #fff; }
.tgcs-crest-current { display: inline-block; width: 64px; height: 64px; border: var(--tg-bw, 1px) solid var(--tg-border, #e5e5e5); border-radius: var(--tg-radius, 8px); padding: 4px; margin-bottom: 6px; }
.tgcs-crest-current img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tgcs-picklist { display: grid; grid-template-columns: 1fr; gap: 2px; border: var(--tg-bw, 1px) solid var(--tg-border, #e5e5e5); border-radius: var(--tg-radius, 8px); overflow: hidden; }
@media (min-width: 560px) { .tgcs-picklist { grid-template-columns: 1fr 1fr; } }
.tgcs-pick { display: flex; align-items: center; gap: var(--tg-sp-3, .75rem); padding: var(--tg-sp-3, .75rem); margin: 0; font-weight: 400; }
.tgcs-pick:hover { background: var(--tg-paper, #f6f6f4); }
.tgcs-pick__name { flex: 1; }
.tgcs-pick__price { color: var(--tg-text-muted, #666); font-size: var(--tg-fs-sm, .9rem); }

.tgcs-notice { padding: var(--tg-sp-3, .75rem) var(--tg-sp-4, 1rem); border-radius: var(--tg-radius, 8px); margin-bottom: var(--tg-sp-4, 1rem); }
.tgcs-notice--err { background: rgba(207,59,46,.1); color: var(--tg-error, #cf3b2e); }

.tgcs-mylist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tg-sp-3, .75rem); }
.tgcs-mylist li { display: flex; align-items: center; justify-content: space-between; gap: var(--tg-sp-4, 1rem); padding: var(--tg-sp-4, 1rem); border: var(--tg-bw, 1px) solid var(--tg-border, #e5e5e5); border-radius: var(--tg-radius, 8px); flex-wrap: wrap; }
.tgcs-mylist__actions { display: flex; gap: var(--tg-sp-4, 1rem); }
.tgcs-status { font-size: var(--tg-fs-xs, .75rem); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--tg-radius-pill, 999px); }
.tgcs-status--live { background: var(--tg-green-soft, #e7f6ea); color: var(--tg-green-text, #3f7d1d); }
.tgcs-status--pending { background: #fdf1dc; color: #8a5a00; }

/* ---------------------------------------------------------------------------
   Kit sections, club pricing and personalisation.

   A club shop is read the way the paper order form is read: by kit, not as one
   undifferentiated grid. Each section keeps its own heading so a parent looking
   for away socks can find them.
   ------------------------------------------------------------------------- */

.tgcs-kit + .tgcs-kit { margin-top: 3rem; }

.tgcs-kit__title {
	margin: 0 0 1.25rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--tgcs-primary, var(--tg-green, #78c828));
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
}

.tgcs-product__spec {
	margin: .4rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .6rem;
	font-size: .85rem;
	line-height: 1.3;
}

.tgcs-product__colour { font-weight: 600; }

.tgcs-product__code {
	color: #6b6b66;
	font-variant-numeric: tabular-nums;
}

.tgcs-product__price {
	margin: .45rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .15rem .9rem;
	font-weight: 600;
}

.tgcs-product__included {
	margin: .35rem 0 0;
	font-size: .82rem;
	line-height: 1.35;
	color: #4a6b2a;
}

/* Personalisation on the product page. */
.tgcs-personalise {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid #e3e3de;
	border-radius: 8px;
	background: #fafaf7;
}

.tgcs-personalise__title {
	margin: 0 0 .5rem;
	font-size: 1rem;
}

.tgcs-personalise__included {
	margin: 0 0 .75rem;
	font-size: .88rem;
	color: #4a6b2a;
}

.tgcs-personalise__field {
	margin: 0 0 .7rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.tgcs-personalise__field label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	font-weight: 600;
	font-size: .9rem;
}

.tgcs-personalise__price {
	font-weight: 400;
	font-size: .82rem;
	color: #6b6b66;
}

/* The inputs must not collapse to content width inside the flex column. */
.tgcs-personalise__field input {
	width: 100%;
	max-width: 320px;
	padding: .5rem .6rem;
	border: 1px solid #ccccc6;
	border-radius: 6px;
	font: inherit;
}

.tgcs-personalise__help {
	margin: .5rem 0 0;
	font-size: .8rem;
	line-height: 1.4;
	color: #6b6b66;
}

/* Squad-number list hint and the sponsor artwork field (Ben, 27 Oct).
   The number box now takes a list, one per shirt, and the sponsor takes a file
   as well as a name, so both need a line of guidance under them. */
.tgcs-personalise__hint {
	display: block;
	margin-top: 4px;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--tg-text-muted, #5b5b5b);
}
.tgcs-personalise__art {
	display: block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--tg-border, #e4e4e0);
}
.tgcs-personalise__art label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}
.tgcs-personalise__art input[type="file"] {
	display: block;
	width: 100%;
	max-width: 420px;
	font-size: .875rem;
}

/* ===== Bulk order: quantity per size, then numbers =====
   Ben's Whitley Bay mockup, 29 Oct. Replaces the size dropdown on a club-shop
   product: a club buys a run of shirts in one go, so it enters a quantity
   against every size and then the numbers for each size that has one. */
.tgcs-bulk { margin: var(--tg-sp-5, 20px) 0 0; }
.tgcs-bulk__step { padding: var(--tg-sp-4, 16px) 0; border-top: 1px solid var(--tg-border, #e4e4e0); }
.tgcs-bulk__title { margin: 0 0 4px; font-size: var(--tg-fs-md, 1.125rem); font-weight: 700; text-transform: uppercase; }
.tgcs-bulk__hint { margin: 0 0 var(--tg-sp-3, 12px); font-size: var(--tg-fs-sm, .875rem); color: var(--tg-text-muted, #5b5b5b); }

.tgcs-bulk__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tgcs-bulk__col { display: flex; flex-direction: column; gap: 3px; width: 68px; }
.tgcs-bulk__size { font-size: .75rem; text-align: center; color: var(--tg-text-muted, #5b5b5b); }
.tgcs-bulk__qty {
	width: 100%; padding: 9px 4px; text-align: center;
	border: 1px solid var(--tg-border-strong, #cdd2d7); border-radius: var(--tg-radius, 10px);
	font-size: .95rem;
}
.tgcs-bulk__qty:focus { border-color: var(--tg-green, #5faf2d); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2); }
.tgcs-bulk__qty:disabled { background: #f3f3f3; color: #999; }
.tgcs-bulk__oos { font-size: .65rem; text-align: center; color: var(--tg-text-muted, #5b5b5b); }

.tgcs-bulk__rows { display: grid; gap: 0; }
.tgcs-bulk__row { display: grid; grid-template-columns: 110px 90px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--tg-border, #e4e4e0); }
.tgcs-bulk__row--head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tg-text-muted, #5b5b5b); }
.tgcs-bulk__row--head em { font-style: normal; text-transform: none; letter-spacing: 0; }
.tgcs-bulk__rsize { font-weight: 700; }
.tgcs-bulk__rqty { color: var(--tg-text-muted, #5b5b5b); }
.tgcs-bulk__rnums { display: flex; flex-direction: column; gap: 4px; }
.tgcs-bulk__rnums input {
	width: 100%; padding: 9px 12px;
	border: 1px solid var(--tg-border-strong, #cdd2d7); border-radius: var(--tg-radius, 10px);
	font: inherit;
}
.tgcs-bulk__rnums input:focus { border-color: var(--tg-green, #5faf2d); outline: none; box-shadow: 0 0 0 3px rgba(95,175,45,.2); }
.tgcs-bulk__rnums input.is-err { border-color: #cf3b2e; }
.tgcs-bulk__rerr { font-size: .75rem; color: #cf3b2e; }

.tgcs-bulk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tg-sp-3, 12px); margin-top: var(--tg-sp-4, 16px); }
.tgcs-bulk__total { font-size: var(--tg-fs-sm, .875rem); font-weight: 600; }

@media (max-width: 560px) {
	/* Stacked: three columns leaves nothing for the numbers on a phone. */
	.tgcs-bulk__row { grid-template-columns: auto auto; grid-template-areas: 'size qty' 'nums nums'; gap: 6px 10px; padding: 12px 0; }
	.tgcs-bulk__row--head { display: none; }
	.tgcs-bulk__rsize { grid-area: size; }
	.tgcs-bulk__rqty { grid-area: qty; }
	.tgcs-bulk__rqty::before { content: "x"; }
	.tgcs-bulk__rnums { grid-area: nums; }
	.tgcs-bulk__col { width: calc(25% - 6px); }
}

/* ===== Sponsor logo card on a club shop product (Ben's mock-up, 30 Oct) =====
   A preview, an upload button and printed-or-not, sitting between the size
   quantities and the player numbers. */
.tgcs-sponsor {
	max-width: 300px;
	margin: var(--tg-sp-4, 16px) 0;
	padding: 12px;
	border: 1px solid var(--tg-border, #e4e4e0);
	border-radius: 12px;
	background: #fff;
}
.tgcs-sponsor__title { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.tgcs-sponsor__art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 8px;
	background: #f1f1ef;
	color: #46464a;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
}
/* The input is the label's own control, so the button is the whole target and
   the native "no file chosen" text stays out of the card. */
.tgcs-sponsor__up { display: block; margin-bottom: 8px; cursor: pointer; }
.tgcs-sponsor__up input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tgcs-sponsor__up .button { display: inline-block; }
.tgcs-sponsor__up:focus-within .button { outline: 2px solid var(--tg-green-fill, #43841e); outline-offset: 2px; }
.tgcs-sponsor__file { display: block; margin-top: 6px; font-size: 12px; color: var(--tg-muted, #5b5b5b); }
.tgcs-sponsor__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tgcs-sponsor__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--tg-border, #e4e4e0);
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
}
.tgcs-sponsor__opt:has(input:checked) {
	border-color: var(--tg-green-fill, #43841e);
	background: rgba(95, 175, 45, .06);
	font-weight: 600;
}
.tgcs-sponsor__opt input { width: 16px; height: 16px; accent-color: var(--tg-green-fill, #43841e); }
.tgcs-sponsor__note { margin: 8px 0 0; font-size: 12px; color: var(--tg-muted, #5b5b5b); }

/* The real turnaround, in place of the shop's delivery-date estimate. */
.tgcs-bulk__lead { margin: 0 0 10px; font-size: 13px; font-weight: 600; }

/* Junior and adult size bands on one product (Ben's mock-up, 30 Oct). */
.tgcs-bulk__band + .tgcs-bulk__band { margin-top: 12px; }
.tgcs-bulk__bandname {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tg-muted, #5b5b5b);
}

/* ===== A locked club shop ===== */
.tgcs-locked {
	max-width: 520px;
	margin: 0 auto;
	padding: var(--tg-sp-6, 24px);
	border: 1px solid var(--tg-border, #e4e4e0);
	border-radius: 16px;
	background: #fff;
	text-align: center;
}
.tgcs-locked__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--tg-sp-3, 12px);
	border-radius: 50%;
	background: rgba(95, 175, 45, .1);
	color: var(--tg-green-text, #3f7d1d);
}
.tgcs-locked__title { margin: 0 0 var(--tg-sp-2, 8px); font-size: 1.375rem; }
.tgcs-locked__intro { margin: 0 0 var(--tg-sp-4, 16px); color: var(--tg-muted, #5b5b5b); }
.tgcs-locked__error {
	margin: 0 0 var(--tg-sp-3, 12px);
	padding: 10px 12px;
	border-radius: 8px;
	background: #fdecea;
	color: #a4231a;
	font-weight: 600;
}
.tgcs-locked__label {
	display: block;
	margin-bottom: 6px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
}
/* Wraps on a phone so the button never squeezes the field to nothing. */
.tgcs-locked__row { display: flex; flex-wrap: wrap; gap: var(--tg-sp-2, 8px); }
.tgcs-locked__row input {
	flex: 1 1 200px;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--tg-border-strong, #cdd2d7);
	border-radius: 10px;
	font: inherit;
}
.tgcs-locked__row .tg-btn { flex: 0 0 auto; }
.tgcs-locked__help { margin: var(--tg-sp-4, 16px) 0 0; font-size: 13px; color: var(--tg-muted, #5b5b5b); }