/**
 * Tapgrix Child — Homepage Product Collection
 *
 * Parent Theme: Blocksy
 * Store: Tapgrix — GPCB Pay Demo Store
 *
 * PURPOSE:
 * - Display WooCommerce product cards
 * - Responsive product grid
 * - Premium product imagery
 * - Product titles and real prices
 * - Stock availability presentation
 * - Accessible product navigation
 *
 * COMPATIBILITY:
 * Transitional tnx-* classes are preserved
 * for template-parts/home/products.php.
 *
 * All styles are scoped to .tgx-home.
 *
 * No payment, cart or checkout logic.
 */

/* =========================================================
   1. PRODUCTS SECTION
   ========================================================= */

.tgx-home .tnx-products {

	position: relative;

	padding: 76px 0 86px;

	background: linear-gradient(
		180deg,
		#ffffff 0%,
		#f8fbff 100%
	);

	border-top:
		1px solid rgba(6, 17, 38, 0.06);
}

/* =========================================================
   2. SECTION HEADER
   ========================================================= */

.tgx-home .tnx-products__header {

	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 24px;

	margin-bottom: 34px;
}

.tgx-home .tnx-section-header__content {

	flex: 1 1 auto;

	min-width: 0;
}

/* =========================================================
   3. SECTION EYEBROW
   ========================================================= */

.tgx-home .tnx-section-header__eyebrow {

	margin: 0 0 12px;

	color: #2563eb;

	font-size: 0.76rem;
	font-weight: 850;
	line-height: 1.5;

	letter-spacing: 0.16em;

	text-transform: uppercase;
}

/* =========================================================
   4. SECTION TITLE
   ========================================================= */

.tgx-home .tnx-section-header__title {

	max-width: 760px;

	margin: 0;

	color: #061126;

	font-size: clamp(
		1.9rem,
		3.2vw,
		2.7rem
	);

	font-weight: 850;

	line-height: 1.15;

	letter-spacing: -0.035em;

	text-wrap: balance;
}

/* =========================================================
   5. SECTION DESCRIPTION
   ========================================================= */

.tgx-home .tnx-section-header__description {

	max-width: 670px;

	margin: 15px 0 0;

	color: #60758c;

	font-size: 1rem;

	line-height: 1.75;
}

/* =========================================================
   6. VIEW ALL PRODUCTS
   ========================================================= */

.tgx-home .tnx-products__view-all {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex-shrink: 0;

	gap: 8px;

	padding: 10px 0;

	color: #2563eb;

	font-size: 0.92rem;
	font-weight: 750;
	line-height: 1.4;

	text-decoration: none;

	transition:
		gap 160ms ease,
		color 160ms ease;
}

.tgx-home .tnx-products__view-all:hover {

	gap: 12px;

	color: #1d4ed8;
}

.tgx-home .tnx-products__view-all:focus-visible {

	outline: 3px solid #22d3ee;

	outline-offset: 5px;

	border-radius: 4px;
}

/* =========================================================
   7. RESPONSIVE PRODUCT GRID
   ========================================================= */

/*
 * Auto-fit adapts to the number of products.
 *
 * 2 products = 2 balanced columns.
 * 3 products = 3 columns when space permits.
 * 4 products = up to 4 columns.
 *
 * Mobile uses a single column.
 */

.tgx-home .tnx-product-grid {

	display: grid;

	grid-template-columns: repeat(
		auto-fit,
		minmax(min(100%, 250px), 1fr)
	);

	gap: 22px;

	align-items: stretch;
}

/* =========================================================
   8. PRODUCT CARD
   ========================================================= */

.tgx-home .tnx-product-card {

	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	border: 1px solid
		rgba(6, 17, 38, 0.09);

	border-radius: 17px;

	background: #ffffff;

	box-shadow:
		0 3px 8px rgba(6, 17, 38, 0.025),
		0 12px 32px rgba(6, 17, 38, 0.045);

	transition:
		transform 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease;
}

.tgx-home .tnx-product-card:hover {

	transform: translateY(-5px);

	border-color:
		rgba(37, 99, 235, 0.28);

	box-shadow:
		0 8px 18px rgba(6, 17, 38, 0.055),
		0 22px 48px rgba(6, 17, 38, 0.10);
}

.tgx-home .tnx-product-card:focus-within {

	border-color: #2563eb;
}

/* =========================================================
   9. PRODUCT LINK
   ========================================================= */

.tgx-home .tnx-product-card__link {

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	color: inherit;

	text-decoration: none;
}

.tgx-home .tnx-product-card__link:hover {

	color: inherit;

	text-decoration: none;
}

.tgx-home .tnx-product-card__link:focus-visible {

	outline: 3px solid #22d3ee;

	outline-offset: -3px;
}

/* =========================================================
   10. PRODUCT IMAGE CONTAINER
   ========================================================= */

.tgx-home .tnx-product-card__media {

	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	aspect-ratio: 1 / 1;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 50% 35%,
			rgba(34, 211, 238, 0.11),
			transparent 65%
		),
		linear-gradient(
			145deg,
			#f8fbff 0%,
			#eef4fc 100%
		);

	border-bottom:
		1px solid rgba(6, 17, 38, 0.05);
}

/* =========================================================
   11. PRODUCT IMAGE
   ========================================================= */

.tgx-home .tnx-product-card__image {

	position: relative;
	z-index: 1;

	display: block;

	width: 100%;
	height: 100%;

	margin: 0;

	padding: clamp(
		20px,
		3vw,
		34px
	);

	box-sizing: border-box;

	object-fit: contain;
	object-position: center;

	transition:
		transform 220ms ease;
}

.tgx-home .tnx-product-card:hover
.tnx-product-card__image {

	transform: scale(1.05);
}

/* =========================================================
   12. STOCK STATUS
   ========================================================= */

.tgx-home .tnx-product-card__stock {

	position: absolute;
	z-index: 3;

	top: 14px;
	left: 14px;

	display: inline-flex;
	align-items: center;

	padding: 7px 11px;

	border: 1px solid
		rgba(153, 27, 27, 0.12);

	border-radius: 7px;

	background: #fff1f2;

	color: #9f1239;

	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.2;
}

/* =========================================================
   13. PRODUCT CONTENT
   ========================================================= */

.tgx-home .tnx-product-card__content {

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	flex: 1 1 auto;

	min-width: 0;

	padding: 23px;
}

/* =========================================================
   14. PRODUCT TITLE
   ========================================================= */

.tgx-home .tnx-product-card__title {

	margin: 0;

	color: #061126;

	font-size: 1rem;
	font-weight: 800;
	line-height: 1.5;

	letter-spacing: -0.01em;

	overflow-wrap: anywhere;

	transition:
		color 160ms ease;
}

.tgx-home .tnx-product-card:hover
.tnx-product-card__title {

	color: #2563eb;
}

/* =========================================================
   15. PRODUCT PRICE
   ========================================================= */

.tgx-home .tnx-product-card__price {

	width: 100%;

	margin-top: auto;

	padding-top: 20px;

	color: #061126;

	font-size: 1.22rem;
	font-weight: 850;
	line-height: 1.4;

	font-variant-numeric: tabular-nums;
}

.tgx-home .tnx-product-card__price .amount {

	color: inherit;

	font-weight: inherit;
}

/* Original Price */

.tgx-home .tnx-product-card__price del {

	margin-right: 6px;

	color: #64748b;

	font-size: 0.83rem;
	font-weight: 500;
}

.tgx-home .tnx-product-card__price del .amount {

	color: inherit;

	font-weight: inherit;
}

/* Sale Price */

.tgx-home .tnx-product-card__price ins {

	color: #2563eb;

	font-weight: 850;

	text-decoration: none;
}

.tgx-home .tnx-product-card__price ins .amount {

	color: inherit;
}

/* =========================================================
   16. PRODUCT CTA
   ========================================================= */

.tgx-home .tnx-product-card__cta {

	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin-top: 17px;

	color: #2563eb;

	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1.4;

	transition:
		gap 160ms ease,
		color 160ms ease;
}

.tgx-home .tnx-product-card:hover
.tnx-product-card__cta {

	gap: 12px;

	color: #1d4ed8;
}

/* =========================================================
   17. TABLET — 1100px
   ========================================================= */

@media (max-width: 1100px) {

	.tgx-home .tnx-products {

		padding-top: 68px;
		padding-bottom: 76px;
	}

	.tgx-home .tnx-product-grid {

		gap: 20px;
	}
}

/* =========================================================
   18. SMALL TABLET — 767px
   ========================================================= */

@media (max-width: 767px) {

	.tgx-home .tnx-products {

		padding-top: 58px;
		padding-bottom: 64px;
	}

	.tgx-home .tnx-products__header {

		align-items: flex-start;
		flex-direction: column;

		gap: 16px;

		margin-bottom: 27px;
	}

	.tgx-home .tnx-products__view-all {

		padding: 4px 0;
	}

	.tgx-home .tnx-product-grid {

		gap: 17px;
	}

	.tgx-home .tnx-product-card__content {

		padding: 20px;
	}
}

/* =========================================================
   19. MOBILE — 600px
   ========================================================= */

@media (max-width: 600px) {

	.tgx-home .tnx-products {

		padding-top: 52px;
		padding-bottom: 58px;
	}

	.tgx-home .tnx-section-header__title {

		font-size: clamp(
			1.8rem,
			7.5vw,
			2.35rem
		);
	}

	.tgx-home .tnx-section-header__description {

		font-size: 0.94rem;

		line-height: 1.75;
	}

	.tgx-home .tnx-product-grid {

		grid-template-columns:
			minmax(0, 1fr);

		gap: 20px;
	}

	.tgx-home .tnx-product-card__media {

		aspect-ratio: 4 / 3;
	}

	.tgx-home .tnx-product-card__image {

		padding: 25px;
	}

	.tgx-home .tnx-product-card__content {

		padding: 21px;
	}

	.tgx-home .tnx-product-card__title {

		font-size: 1.03rem;
	}

	.tgx-home .tnx-product-card__price {

		font-size: 1.22rem;
	}

	.tgx-home .tnx-product-card__cta {

		margin-top: 16px;
	}
}

/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.tgx-home .tnx-product-card,
	.tgx-home .tnx-product-card__image,
	.tgx-home .tnx-product-card__title,
	.tgx-home .tnx-product-card__cta,
	.tgx-home .tnx-products__view-all {

		transition: none;
	}

	.tgx-home .tnx-product-card:hover {

		transform: none;
	}

	.tgx-home .tnx-product-card:hover
	.tnx-product-card__image {

		transform: none;
	}
}