/**
 * Single product page.
 */

.tcgsf-product {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 1fr );
	gap: var( --tcgsf-gap-lg );
	align-items: start;
	margin-bottom: var( --tcgsf-gap-lg );
}

@media ( max-width: 900px ) {
	.tcgsf-product { grid-template-columns: minmax( 0, 1fr ); gap: var( --tcgsf-gap ); }
}

/* --------------------------------------------------------------------------
 * Gallery
 * ----------------------------------------------------------------------- */

.woocommerce div.product div.images {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product div.images img {
	border-radius: var( --tcgsf-radius );
	background: var( --tcgsf-surface-alt );
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; float: none; }

.woocommerce div.product div.images .flex-control-thumbs img {
	opacity: 0.6;
	border: 2px solid transparent;
	border-radius: var( --tcgsf-radius-sm );
	transition: opacity 0.16s var( --tcgsf-ease ), border-color 0.16s var( --tcgsf-ease );
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var( --tcgsf-primary );
}

/* Thumbnails beside the main image on wide screens. */
@media ( min-width: 900px ) {
	.tcgsf-product-gallery--thumbnails-left .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: 84px minmax( 0, 1fr );
		gap: 12px;
		direction: rtl;
	}

	.tcgsf-product-gallery--thumbnails-left .woocommerce-product-gallery > * { direction: ltr; }

	.tcgsf-product-gallery--thumbnails-left .flex-control-thumbs {
		grid-template-columns: minmax( 0, 1fr ) !important;
		margin: 0 !important;
		max-height: 620px;
		overflow-y: auto;
	}
}

.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: 5px 12px;
	border-radius: var( --tcgsf-radius-pill );
	background: var( --tcgsf-danger );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
 * Summary
 * ----------------------------------------------------------------------- */

.woocommerce div.product .summary {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce div.product .product_title {
	margin: 0 0 10px;
	font-size: clamp( 24px, 3.2vw, 34px );
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: block;
	margin: 0 0 var( --tcgsf-gap-sm );
	font-size: 28px;
	font-weight: 700;
	color: var( --tcgsf-ink );
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var( --tcgsf-gap-sm );
	font-size: 14px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: var( --tcgsf-gap-sm );
	color: var( --tcgsf-ink-soft );
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --tcgsf-gap-sm );
	margin: var( --tcgsf-gap-sm ) 0;
	padding: var( --tcgsf-gap-sm ) 0;
	border-top: 1px solid var( --tcgsf-border );
	border-bottom: 1px solid var( --tcgsf-border );
}

.woocommerce div.product form.cart .button {
	flex: 1 1 200px;
	padding-block: 14px;
	font-size: 16px;
}

.woocommerce div.product .product_meta {
	margin-top: var( --tcgsf-gap-sm );
	font-size: 13px;
	color: var( --tcgsf-muted );
}

.woocommerce div.product .product_meta > span { display: block; padding: 3px 0; }

/* --------------------------------------------------------------------------
 * Swatches
 * ----------------------------------------------------------------------- */

.tcgsf-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}

/* The original select stays in the DOM for WooCommerce's variation script,
   but is only shown to screen readers and when JS is unavailable. */
.tcgsf-js .tcgsf-swatches__select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
}

.tcgsf-swatch {
	padding: 9px 16px;
	border: 1px solid var( --tcgsf-border );
	border-radius: var( --tcgsf-radius-sm );
	background: var( --tcgsf-surface );
	color: var( --tcgsf-ink );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.16s var( --tcgsf-ease ), background-color 0.16s var( --tcgsf-ease );
}

.tcgsf-swatch:hover { border-color: var( --tcgsf-primary ); }

.tcgsf-swatch.is-selected {
	border-color: var( --tcgsf-primary );
	background: var( --tcgsf-primary-soft );
	color: var( --tcgsf-primary-dark );
}

.tcgsf-swatch[disabled],
.tcgsf-swatch.is-unavailable {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.tcgsf-swatch--colour {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	background: var( --tcgsf-swatch-colour, var( --tcgsf-surface-alt ) );
}

.tcgsf-swatch--colour.is-selected { box-shadow: 0 0 0 2px var( --tcgsf-surface ), 0 0 0 4px var( --tcgsf-primary ); }

.tcgsf-swatch--image { width: 52px; height: 52px; padding: 3px; }
.tcgsf-swatch--image img { width: 100%; height: 100%; border-radius: var( --tcgsf-radius-sm ); object-fit: cover; }

/* --------------------------------------------------------------------------
 * Trust block
 * ----------------------------------------------------------------------- */

.tcgsf-trust {
	display: grid;
	gap: 10px;
	margin: var( --tcgsf-gap-sm ) 0 0;
	padding: var( --tcgsf-gap-sm );
	border-radius: var( --tcgsf-radius );
	background: var( --tcgsf-surface-alt );
	list-style: none;
}

.tcgsf-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13px;
	color: var( --tcgsf-muted );
}

.tcgsf-trust__item .tcgsf-icon { color: var( --tcgsf-primary ); margin-top: 2px; }
.tcgsf-trust__body strong { display: block; color: var( --tcgsf-ink ); font-size: 14px; }

/* --------------------------------------------------------------------------
 * Tabs, reviews, related
 * ----------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 var( --tcgsf-gap );
	padding: 0;
	border-bottom: 1px solid var( --tcgsf-border );
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 14px 18px;
	border-bottom: 2px solid transparent;
	color: var( --tcgsf-muted );
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var( --tcgsf-primary );
	color: var( --tcgsf-primary );
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs .panel { max-width: 76ch; }

.woocommerce #reviews #comments ol.commentlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
	margin: 0 0 var( --tcgsf-gap-sm );
	padding: var( --tcgsf-gap-sm );
	border: 1px solid var( --tcgsf-border );
	border-radius: var( --tcgsf-radius );
	background: var( --tcgsf-surface );
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	position: static;
	float: left;
	width: 44px;
	margin-right: 12px;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}

.related.products,
.upsells.products {
	margin-top: var( --tcgsf-gap-lg );
	padding-top: var( --tcgsf-gap );
	border-top: 1px solid var( --tcgsf-border );
}

/* --------------------------------------------------------------------------
 * Sticky add-to-cart
 * ----------------------------------------------------------------------- */

.tcgsf-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 140;
	background: var( --tcgsf-surface );
	border-top: 1px solid var( --tcgsf-border );
	box-shadow: 0 -4px 24px rgba( 19, 26, 58, 0.12 );
	transform: translateY( 100% );
	transition: transform 0.28s var( --tcgsf-ease );
}

.tcgsf-sticky-cart[hidden] { display: none; }
.tcgsf-sticky-cart.is-visible { transform: translateY( 0 ); }

.tcgsf-sticky-cart__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --tcgsf-gap-sm );
	padding: 10px 20px;
}

.tcgsf-sticky-cart__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tcgsf-sticky-cart__product img { width: 44px; height: 58px; border-radius: var( --tcgsf-radius-sm ); object-fit: cover; }
.tcgsf-sticky-cart__title { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44vw; }
.tcgsf-sticky-cart__price { font-size: 14px; color: var( --tcgsf-muted ); }

@media ( max-width: 640px ) {
	.tcgsf-sticky-cart__product img { display: none; }
	.tcgsf-sticky-cart__title { max-width: none; }
	.tcgsf-sticky-cart__price { display: block; font-size: 16px; font-weight: 700; color: var( --tcgsf-ink ); }
	.tcgsf-sticky-cart .tcgsf-btn { flex: 0 0 auto; min-width: 46%; }
}

/* --------------------------------------------------------------------------
 * Quick view
 * ----------------------------------------------------------------------- */

.tcgsf-quickview {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: var( --tcgsf-gap );
}

@media ( max-width: 720px ) {
	.tcgsf-quickview { grid-template-columns: minmax( 0, 1fr ); }
}

/* Card art is portrait and can be tall; cap it so the summary column stays
   on screen without the modal scrolling on a normal laptop. */
.tcgsf-quickview__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 58vh;
	margin: 0 auto;
	border-radius: var( --tcgsf-radius );
}

.tcgsf-quickview__thumbs {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 8px;
	margin-top: 8px;
}

.tcgsf-quickview__thumbs img { border-radius: var( --tcgsf-radius-sm ); }
.tcgsf-quickview__title { margin: 0 0 8px; font-size: 22px; }
.tcgsf-quickview__vendor { margin: 0 0 10px; font-size: 13px; color: var( --tcgsf-muted ); }
.tcgsf-quickview__price { margin-bottom: var( --tcgsf-gap-sm ); font-size: 24px; font-weight: 700; }
.tcgsf-quickview__excerpt { margin-bottom: var( --tcgsf-gap-sm ); color: var( --tcgsf-ink-soft ); font-size: 15px; }
.tcgsf-quickview__more { display: inline-block; margin-top: var( --tcgsf-gap-sm ); font-weight: 600; }

/* ---- Gallery without thumbnails ---------------------------------------
   The thumbnails-left layout reserves an 84px column for thumbs. A product
   with a single image (or none) has no thumbs, so the main image was being
   squeezed into that column. */
.woocommerce-product-gallery--without-images,
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) { grid-template-columns: 1fr; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img.wp-post-image { width: 100%; height: auto; display: block; border-radius: var(--tcgsf-radius); }
/* The sticky bar's button must match the one it stands in for. */
.tcgsf-sticky-cart .single_add_to_cart_button { background: var(--tcgsf-accent); color: #1f1600; border-color: var(--tcgsf-accent); }

/* ---- Mobile audit, 2026-10 ---------------------------------------------- */

/* WooCommerce's lightbox trigger relies on its own stylesheet, which this
   theme does not load: it was a bare 20px emoji sitting above the gallery.
   Overlay it on the image as a proper 44px button. */
.woocommerce div.product div.images.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var( --tcgsf-border );
	border-radius: 50%;
	background: var( --tcgsf-surface );
	color: var( --tcgsf-ink-soft );
	box-shadow: var( --tcgsf-shadow );
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-product-gallery__trigger:hover,
.woocommerce-product-gallery__trigger:focus-visible {
	background: var( --tcgsf-primary );
	border-color: var( --tcgsf-primary );
	color: #fff;
	text-decoration: none;
}

/* Thumbnails-left (wide screens): the grid placed children by source order,
   and the lightbox trigger happened to be the first child, so it was the
   element filling the 84px column. Now that it is overlaid, place the
   viewport and the thumbnail strip explicitly. */
@media ( min-width: 900px ) {
	.tcgsf-product-gallery--thumbnails-left .woocommerce-product-gallery:has( > .flex-control-thumbs ) { direction: ltr; }
	.tcgsf-product-gallery--thumbnails-left .woocommerce-product-gallery:has( > .flex-control-thumbs ) > .flex-control-thumbs { grid-column: 1; grid-row: 1; }
	.tcgsf-product-gallery--thumbnails-left .woocommerce-product-gallery:has( > .flex-control-thumbs ) > .flex-viewport,
	.tcgsf-product-gallery--thumbnails-left .woocommerce-product-gallery:has( > .flex-control-thumbs ) > .woocommerce-product-gallery__wrapper { grid-column: 2; grid-row: 1; }
}

/* A single-unit listing renders the quantity as a hidden input; the
   bordered wrapper and its +/- buttons are hidden by app.js (is-hidden) and,
   for browsers that support :has, here as well. */
.quantity.is-hidden,
.quantity:has( > input[type='hidden']:only-of-type ) { display: none; }

/* ---- Mobile audit, round 2 (2026-10) ------------------------------------ */

/* Sticky add-to-cart: a 48px target, room for the home indicator, and the
   page gets bottom padding while the bar is up so it never sits over the
   footer links or the toasts. */
.tcgsf-sticky-cart__inner { padding: 10px 16px calc( 10px + env( safe-area-inset-bottom, 0px ) ); }

.tcgsf-sticky-cart .tcgsf-btn,
.woocommerce .tcgsf-sticky-cart .tcgsf-btn.tcgsf-btn {
	min-height: 48px;
	padding: 12px 22px;
	font-size: 16px;
	white-space: nowrap;
}

body.tcgsf-sticky-cart-visible { padding-bottom: calc( 76px + env( safe-area-inset-bottom, 0px ) ); }
body.tcgsf-sticky-cart-visible .tcgsf-toasts { bottom: calc( 92px + env( safe-area-inset-bottom, 0px ) ); }
body.tcgsf-sticky-cart-visible .tcgsf-compare-bar { bottom: calc( 70px + env( safe-area-inset-bottom, 0px ) ); }

@media ( prefers-reduced-motion: reduce ) {
	.tcgsf-sticky-cart { transition: none; }
}

/* "Ask a question" in the sold-by block was a 30px button. */
.tcgsf-product .tcgmp-btn.tcgmp-btn--small {
	min-height: 40px;
	padding: 9px 14px;
	font-size: 14px;
}

/* No hover on a phone, so no hover zoom: product.js turns it off below
   900px, and this catches a clone that was created anyway. */
@media ( max-width: 899px ) {
	.woocommerce-product-gallery .zoomImg { display: none !important; }
}