/**
 * Storefront: store pages, the store directory and the "sold by" block.
 */

.tcgmp-store {
	max-width: var( --tcgmp-max-width );
	margin: 0 auto;
	/* The store card is pulled up over the banner, so the page needs its own
	   top gap or it collides with a theme-built site header. */
	padding: var( --tcgmp-gap ) 16px 64px;
	color: var( --tcgmp-ink );
}

.tcgmp-store__header {
	margin-bottom: var( --tcgmp-gap );
}

.tcgmp-store__banner {
	height: clamp( 140px, 22vw, 280px );
	border-radius: var( --tcgmp-radius );
	background-color: var( --tcgmp-primary-soft );
	background-size: cover;
	background-position: center;
}

/* Stores without a banner still get a full-height brand block, so the layout
   below it never shifts and the identity card always overlaps something. */
.tcgmp-store__banner--placeholder {
	background-image:
		radial-gradient( circle at 18% 22%, rgba( 42, 134, 134, 0.45 ), transparent 55% ),
		radial-gradient( circle at 82% 78%, rgba( 200, 149, 31, 0.3 ), transparent 52% ),
		linear-gradient( 135deg, var( --tcgmp-brand-charcoal ), #1b1b22 );
}

.tcgmp-store__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --tcgmp-gap-sm );
	padding: var( --tcgmp-gap );
	margin-top: -40px;
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius );
	background: var( --tcgmp-surface );
	box-shadow: var( --tcgmp-shadow );
	position: relative;
}

.tcgmp-store__avatar {
	width: 84px;
	height: 84px;
	border-radius: var( --tcgmp-radius );
	border: 3px solid var( --tcgmp-surface );
	object-fit: cover;
	flex: 0 0 auto;
	margin-top: -48px;
	background: var( --tcgmp-surface );
}

.tcgmp-store__meta {
	flex: 1 1 260px;
	min-width: 0;
}

.tcgmp-store__name {
	margin: 0 0 6px;
	font-size: clamp( 22px, 3vw, 30px );
	font-weight: 700;
	line-height: 1.2;
}

.tcgmp-store__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var( --tcgmp-muted );
}

.tcgmp-store__state {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.tcgmp-store__state.is-open {
	background: var( --tcgmp-success-soft );
	color: var( --tcgmp-success );
}

.tcgmp-store__state.is-closed {
	background: var( --tcgmp-danger-soft );
	color: var( --tcgmp-danger );
}

.tcgmp-store__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.tcgmp-store__social a {
	color: var( --tcgmp-primary );
	text-decoration: none;
}

.tcgmp-store__tabs {
	display: flex;
	gap: 4px;
	margin-top: var( --tcgmp-gap-sm );
	border-bottom: 1px solid var( --tcgmp-border );
}

.tcgmp-store__tab {
	padding: 12px 16px;
	border-bottom: 2px solid transparent;
	color: var( --tcgmp-muted );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.tcgmp-store__tab.is-current,
.tcgmp-store__tab:hover {
	border-bottom-color: var( --tcgmp-primary );
	color: var( --tcgmp-primary-dark );
}

.tcgmp-store__policies {
	max-width: 70ch;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
 * Store directory
 * ----------------------------------------------------------------------- */

.tcgmp-store-listing__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var( --tcgmp-gap );
}

.tcgmp-store-listing__filters input,
.tcgmp-store-listing__filters select {
	padding: 9px 12px;
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius-sm );
	background: var( --tcgmp-surface );
	color: var( --tcgmp-ink );
	font-size: 14px;
}

.tcgmp-store-listing__filters input {
	flex: 1 1 220px;
}

.tcgmp-store-listing__count {
	margin: 0 0 var( --tcgmp-gap-sm );
	font-size: 13px;
	color: var( --tcgmp-muted );
}

.tcgmp-store-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: var( --tcgmp-gap-sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcgmp-store-card {
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius );
	background: var( --tcgmp-surface );
	box-shadow: var( --tcgmp-shadow );
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tcgmp-store-card:hover {
	transform: translateY( -2px );
	box-shadow: var( --tcgmp-shadow-lg );
}

.tcgmp-store-card__link {
	display: block;
	padding-bottom: 16px;
	color: inherit;
	text-decoration: none;
}

.tcgmp-store-card__banner {
	display: block;
	height: 92px;
	background-color: var( --tcgmp-primary-soft );
	background-size: cover;
	background-position: center;
}

.tcgmp-store-card__avatar {
	display: block;
	width: 56px;
	height: 56px;
	margin: -28px 16px 8px;
	border: 3px solid var( --tcgmp-surface );
	border-radius: var( --tcgmp-radius-sm );
	background: var( --tcgmp-surface );
	object-fit: cover;
}

.tcgmp-store-card__name {
	display: block;
	padding: 0 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.tcgmp-store-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 0;
	font-size: 13px;
	color: var( --tcgmp-muted );
}

.tcgmp-store-card__location {
	display: block;
	padding: 4px 16px 0;
	font-size: 12px;
	color: var( --tcgmp-muted );
}

/* --------------------------------------------------------------------------
 * Sold by
 * ----------------------------------------------------------------------- */

.tcgmp-sold-by {
	display: flex;
	align-items: center;
	gap: var( --tcgmp-gap-sm );
	padding: var( --tcgmp-gap-sm );
	margin: var( --tcgmp-gap-sm ) 0;
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius );
	background: var( --tcgmp-surface-alt );
}

.tcgmp-sold-by__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.tcgmp-sold-by__meta {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.4;
}

.tcgmp-sold-by__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --tcgmp-muted );
}

.tcgmp-sold-by__name {
	font-size: 15px;
	font-weight: 700;
	color: var( --tcgmp-ink );
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Reviews and tracking
 * ----------------------------------------------------------------------- */

.tcgmp-reviews__summary {
	display: flex;
	align-items: center;
	gap: var( --tcgmp-gap-sm );
	padding-bottom: var( --tcgmp-gap-sm );
	margin-bottom: var( --tcgmp-gap );
	border-bottom: 1px solid var( --tcgmp-border );
}

.tcgmp-reviews__score {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
}

.tcgmp-reviews__count {
	font-size: 13px;
	color: var( --tcgmp-muted );
}

.tcgmp-reviews__form {
	max-width: 560px;
	padding: var( --tcgmp-gap );
	margin-bottom: var( --tcgmp-gap );
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius );
	background: var( --tcgmp-surface );
}

.tcgmp-reviews__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcgmp-reviews__item {
	padding: var( --tcgmp-gap-sm ) 0;
	border-bottom: 1px solid var( --tcgmp-border );
}

.tcgmp-reviews__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.tcgmp-reviews__item-title {
	font-size: 15px;
}

.tcgmp-reviews__body p {
	margin: 0 0 6px;
	line-height: 1.6;
}

.tcgmp-reviews__meta {
	font-size: 12px;
	color: var( --tcgmp-muted );
}

.tcgmp-tracking {
	padding: var( --tcgmp-gap );
	margin-bottom: var( --tcgmp-gap );
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius );
	background: var( --tcgmp-surface-alt );
}

.tcgmp-tracking__title {
	margin: 0 0 var( --tcgmp-gap-sm );
	font-size: 16px;
}

.tcgmp-tracking__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcgmp-tracking__item {
	padding: 8px 0;
	border-bottom: 1px solid var( --tcgmp-border );
}

.tcgmp-tracking__item:last-child {
	border-bottom: 0;
}

.tcgmp-tracking__status {
	display: block;
	font-size: 14px;
}

.tcgmp-tracking__meta,
.tcgmp-tracking__note {
	display: block;
	font-size: 13px;
	color: var( --tcgmp-muted );
}

/* --------------------------------------------------------------------------
 * Product grid on the store page
 *
 * hello-elementor ships almost no WooCommerce styling, so listings would
 * otherwise render as bare list items. WooCommerce's own grid rules are shaped
 * like `.woocommerce:where(...) ul.products li.product .price`, which lands at
 * (0,3,2); every selector here carries the `.tcgmp-store ul` prefix so it
 * clears that weight without resorting to !important.
 *
 * Scoped to the store page — the tcg-storefront theme will own the site-wide
 * product grid.
 * ----------------------------------------------------------------------- */

.tcgmp-store ul.tcgmp-store__products {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
	gap: var( --tcgmp-gap-sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce puts a clearfix pseudo-element on ul.products. Inside a grid
   container that becomes a phantom first cell, shunting every tile one column
   to the right. */
.tcgmp-store ul.tcgmp-store__products::before,
.tcgmp-store ul.tcgmp-store__products::after,
.woocommerce ul.tcgmp-store__products::before,
.woocommerce ul.tcgmp-store__products::after {
	content: none;
	display: none;
}

.tcgmp-store ul.tcgmp-store__products li.product {
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0 0 var( --tcgmp-gap-sm );
	border: 1px solid var( --tcgmp-border );
	border-radius: var( --tcgmp-radius );
	background: var( --tcgmp-surface );
	box-shadow: var( --tcgmp-shadow );
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tcgmp-store ul.tcgmp-store__products li.product:hover {
	transform: translateY( -2px );
	box-shadow: var( --tcgmp-shadow-lg );
}

.tcgmp-store ul.tcgmp-store__products li.product > a:first-of-type {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tcgmp-store ul.tcgmp-store__products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	margin: 0 0 var( --tcgmp-gap-sm );
	object-fit: cover;
	background: var( --tcgmp-surface-alt );
}

.tcgmp-store ul.tcgmp-store__products li.product .woocommerce-loop-product__title {
	padding: 0 12px;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --tcgmp-ink );
}

.tcgmp-store ul.tcgmp-store__products li.product .price {
	display: block;
	padding: 0 12px;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var( --tcgmp-primary );
}

.tcgmp-store ul.tcgmp-store__products li.product .price del {
	margin-right: 6px;
	font-weight: 400;
	color: var( --tcgmp-muted );
}

.tcgmp-store ul.tcgmp-store__products li.product .price ins {
	text-decoration: none;
}

.tcgmp-store ul.tcgmp-store__products li.product .star-rating {
	margin: 0 12px 6px;
}

.tcgmp-store ul.tcgmp-store__products li.product a.button {
	margin: auto 12px 0;
	padding: 9px 14px;
	border: 1px solid var( --tcgmp-primary );
	border-radius: var( --tcgmp-radius-sm );
	background: var( --tcgmp-primary );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.tcgmp-store ul.tcgmp-store__products li.product a.button:hover {
	background: var( --tcgmp-primary-dark );
	border-color: var( --tcgmp-primary-dark );
	color: #fff;
}

.tcgmp-store ul.tcgmp-store__products li.product .onsale {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 999px;
	background: var( --tcgmp-accent );
	color: #3a2a00;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
 * Store directory corrections
 *
 * Themes set `width: 100%` on form controls, which makes them full-width flex
 * items and stacks the filter bar. A class + element selector clears that.
 * ----------------------------------------------------------------------- */

.tcgmp-store-listing__filters select,
.tcgmp-store-listing__filters button {
	width: auto;
	flex: 0 0 auto;
}

.tcgmp-store-listing__filters input[type='search'] {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 420px;
	width: auto;
}

/* The card is a grid item; list-item display would draw a marker box. */
.tcgmp-store-grid .tcgmp-store-card {
	display: block;
}

/* Same brand fallback as the store page banner, so a store without artwork
   still looks deliberate in the directory. */
.tcgmp-store-card .tcgmp-store-card__banner {
	background-color: var( --tcgmp-brand-charcoal );
	background-image:
		radial-gradient( circle at 20% 25%, rgba( 42, 134, 134, 0.42 ), transparent 58% ),
		radial-gradient( circle at 85% 80%, rgba( 200, 149, 31, 0.28 ), transparent 55% ),
		linear-gradient( 135deg, var( --tcgmp-brand-charcoal ), #1b1b22 );
	background-size: cover;
	background-position: center;
}


.tcgmp-store-grid .tcgmp-store-card .tcgmp-store-card__name {
	color: var( --tcgmp-ink );
}

.tcgmp-store-grid .tcgmp-store-card .tcgmp-store-card__meta,
.tcgmp-store-grid .tcgmp-store-card .tcgmp-store-card__location {
	color: var( --tcgmp-muted );
}

/* Store pages print their own heading; suppress the theme's. */
body.tcgmp-store .page-header,
body.tcgmp-store .entry-title,
body.tcgmp-store .elementor-page-title {
	display: none;
}

/* Phones: iOS zooms into any field under 16px; the directory's search and
   sort were 14px. (Mobile audit, round 2, 2026-10.) */
@media ( max-width: 640px ) {
	.tcgmp-store-listing__filters input,
	.tcgmp-store-listing__filters select {
		min-height: 44px;
		font-size: 16px;
	}
}

/* The store page adds `tcgmp-store` to <body> as well (class-rewrites.php),
   so the wrapper's max-width, 16px gutters and bottom padding were also
   being applied to the whole page: on a phone the site header was inset by
   32px and the logo squeezed to 64x20. The wrapper <div> keeps the layout;
   the body does not. (Mobile audit, round 2, 2026-10.) */
body.tcgmp-store {
	max-width: none;
	margin: 0;
	padding: 0;
	color: var( --tcgsf-ink, inherit );
}