/**
 * Members' Shop page (templates/page-shop-members.html). The product
 * card styles here (.tb-club-shop-*) are the markup
 * assets/js/members-product-grid.js renders — also used by
 * templates/page-whisky-club.html's own embedded grid, which repeats
 * the same handful of rules from whisky-club.css so each page's
 * stylesheet only loads on the page that needs it.
 */

.tb-shop-members-banner {
	background: var(--wp--preset--color--juniper);
	color: var(--wp--preset--color--oatmilk);
	text-align: center;
	padding: 0.7rem 1rem;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}
.tb-shop-members-banner span {
	color: var(--wp--preset--color--apricot);
}

.tb-shop-members-guest,
.tb-shop-members-head {
	text-align: center;
	padding: 3.5rem 1.5rem 1rem;
	max-width: 560px;
}
.tb-shop-members-guest h1,
.tb-shop-members-head h1 {
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 500;
	margin: 0.4rem 0 0.6rem;
}
.tb-shop-members-guest p,
.tb-shop-members-head p {
	font-size: 0.9rem;
	color: var(--wp--preset--color--juniper-soft);
	margin-bottom: 1rem;
}
.tb-shop-members-guest .wp-element-button {
	margin-top: 0.6rem;
}

/* Grid container only — card design itself (.tb-shop-card and friends)
is shared with the shop archive grid, see shop.css (loaded here as a
dependency, inc/enqueue.php) and assets/js/members-product-grid.js. */
.tb-club-shop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6rem 1.1rem;
	max-width: 1200px;
	margin: 2.6rem auto 4rem;
	padding: 0 clamp(1.2rem, 4vw, 3rem);
}

@media (max-width: 960px) {
	.tb-club-shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}