/**
 * 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; }
.tgcs-form-wrap a { color: var(--tg-green-strong, #1f7a30); }
.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-strong, #1f7a30); }
.tgcs-status--pending { background: #fdf1dc; color: #8a5a00; }