/**
 * Tapgrix Child — WooCommerce Single Product
 *
 * Parent Theme: Blocksy
 * Store: Tapgrix — GPCB Pay Demo Store
 *
 * PURPOSE:
 * - Premium product page presentation
 * - Product gallery and thumbnails
 * - Product details and prices
 * - Variations and quantity controls
 * - WooCommerce Add to Cart
 * - Product tabs and related products
 * - Responsive layouts
 *
 * SECURITY:
 * - CSS presentation only
 * - No payment or checkout processing
 * - No changes to WooCommerce functionality
 * - No changes to GPCB Pay Payment Core
 *
 * All rules are scoped to single-product pages.
 */

/* =========================================================
   1. PRODUCT DESIGN TOKENS
   ========================================================= */

body.single-product {

	--tgx-product-navy: #061126;
	--tgx-product-navy-light: #0a1c3a;

	--tgx-product-blue: #2563eb;
	--tgx-product-blue-hover: #1d4ed8;
	--tgx-product-cyan: #22d3ee;

	--tgx-product-muted: #60758c;
	--tgx-product-text: #334155;

	--tgx-product-border:
		rgba(6, 17, 38, 0.10);

	--tgx-product-radius: 14px;
}

/* =========================================================
   2. BREADCRUMBS
   ========================================================= */

body.single-product :is(
	.ct-breadcrumbs,
	.woocommerce-breadcrumb
) {
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.7;

	color: var(--tgx-product-muted);
}

body.single-product :is(
	.ct-breadcrumbs,
	.woocommerce-breadcrumb
) a {
	color: var(--tgx-product-blue-hover);
	text-decoration: none;
}

body.single-product :is(
	.ct-breadcrumbs,
	.woocommerce-breadcrumb
) a:hover {
	text-decoration: underline;
}

/* =========================================================
   3. PRODUCT GALLERY
   ========================================================= */

body.single-product :is(
	.woocommerce-product-gallery,
	.ct-product-gallery-container
) {
	min-width: 0;

	border-radius:
		var(--tgx-product-radius);
}

/*
 * Preserve native WooCommerce and Blocksy
 * gallery sizing and JavaScript behavior.
 */

body.single-product :is(
	.woocommerce-product-gallery__image,
	.ct-product-gallery-container .ct-image-container
) {
	overflow: hidden;

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

	border-radius: 14px;

	background: #ffffff;
}

body.single-product :is(
	.woocommerce-product-gallery,
	.ct-product-gallery-container
) img {
	max-width: 100%;
	height: auto;
}

/* =========================================================
   4. GALLERY THUMBNAILS
   ========================================================= */

body.single-product :is(
	.flex-control-thumbs,
	.ct-product-gallery-thumbnails
) img {
	border-radius: 9px;

	transition:
		opacity 180ms ease,
		filter 180ms ease;
}

body.single-product :is(
	.flex-control-thumbs,
	.ct-product-gallery-thumbnails
) img:hover {
	filter: brightness(0.97);
}

/* =========================================================
   5. PRODUCT SUMMARY
   ========================================================= */

body.single-product .entry-summary {
	min-width: 0;

	color: var(--tgx-product-navy-light);
}

/* =========================================================
   6. PRODUCT TITLE
   ========================================================= */

body.single-product :is(
	.entry-summary .product_title,
	.entry-summary .entry-title
) {
	margin-top: 0;

	font-size: clamp(
		1.65rem,
		2.7vw,
		2.45rem
	);

	font-weight: 800;
	line-height: 1.22;

	letter-spacing: -0.025em;

	color: var(--tgx-product-navy);

	overflow-wrap: anywhere;
}

/* =========================================================
   7. PRODUCT PRICE
   ========================================================= */

body.single-product .entry-summary .price {
	font-size: clamp(
		1.35rem,
		2.1vw,
		1.75rem
	);

	font-weight: 800;
	line-height: 1.4;

	color: var(--tgx-product-navy);
}

body.single-product .entry-summary .price .amount {
	font-weight: inherit;
}

body.single-product .entry-summary .price del {
	margin-right: 7px;

	color: #64748b;

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

body.single-product .entry-summary .price ins {
	color: var(--tgx-product-blue-hover);

	font-weight: 800;

	text-decoration: none;
}

/* =========================================================
   8. SHORT DESCRIPTION
   ========================================================= */

body.single-product
.woocommerce-product-details__short-description {
	color: #43566d;

	font-size: 0.98rem;
	line-height: 1.8;
}

body.single-product
.woocommerce-product-details__short-description p {
	margin-bottom: 16px;
}

body.single-product
.woocommerce-product-details__short-description li {
	margin-bottom: 6px;
}

body.single-product
.woocommerce-product-details__short-description li::marker {
	color: var(--tgx-product-blue);
}

/* =========================================================
   9. PRODUCT VARIATIONS
   ========================================================= */

body.single-product form.variations_form {
	width: 100%;
}

body.single-product table.variations {
	width: 100%;
}

body.single-product table.variations label {
	color: var(--tgx-product-navy);

	font-size: 0.9rem;
	font-weight: 750;
}

body.single-product table.variations select {
	width: 100%;
	min-height: 48px;

	padding-inline: 12px;

	border: 1px solid #d8e3f0;
	border-radius: 9px;

	background-color: #ffffff;

	color: var(--tgx-product-navy-light);

	font-size: 0.92rem;

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

body.single-product table.variations select:hover {
	border-color: #93c5fd;
}

body.single-product table.variations select:focus-visible {
	outline: 3px solid
		rgba(34, 211, 238, 0.45);

	outline-offset: 2px;

	border-color: var(--tgx-product-blue);
}

body.single-product .reset_variations {
	color: var(--tgx-product-blue-hover);

	font-size: 0.82rem;
	font-weight: 700;
}

/* =========================================================
   10. VARIATION INFORMATION
   ========================================================= */

body.single-product .woocommerce-variation-description {
	color: var(--tgx-product-muted);

	font-size: 0.9rem;
	line-height: 1.7;
}

body.single-product .woocommerce-variation-price {
	margin-bottom: 14px;

	color: var(--tgx-product-navy);

	font-weight: 800;
}

/* =========================================================
   11. QUANTITY CONTROLS
   ========================================================= */

body.single-product form.cart .quantity {
	border-radius: 9px;
}

body.single-product form.cart .quantity input.qty {
	min-height: 46px;

	color: var(--tgx-product-navy);

	font-size: 0.92rem;
	font-weight: 700;
}

body.single-product form.cart .quantity button {
	color: var(--tgx-product-navy-light);
}

body.single-product form.cart .quantity button:hover {
	color: var(--tgx-product-blue-hover);
}

/* =========================================================
   12. ADD TO CART BUTTON
   ========================================================= */

body.single-product
form.cart .single_add_to_cart_button {
	min-height: 49px;

	padding: 12px 26px;

	border: 1px solid
		rgba(255, 255, 255, 0.15);

	border-radius: 9px;

	background: linear-gradient(
		135deg,
		#2563eb,
		#3b82f6
	);

	color: #ffffff;

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

	box-shadow:
		0 9px 26px
		rgba(37, 99, 235, 0.22);

	transition:
		filter 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

/* Button Hover */

body.single-product
form.cart .single_add_to_cart_button:not(
	:disabled
):not(.disabled):hover {
	background: linear-gradient(
		135deg,
		#1d4ed8,
		#2563eb
	);

	color: #ffffff;

	filter: brightness(1.04);

	transform: translateY(-2px);

	box-shadow:
		0 13px 32px
		rgba(37, 99, 235, 0.30);
}

/* Keyboard Focus */

body.single-product
form.cart .single_add_to_cart_button:focus-visible {
	outline: 3px solid
		var(--tgx-product-cyan);

	outline-offset: 3px;
}

/* Disabled Button */

body.single-product
form.cart .single_add_to_cart_button:is(
	:disabled,
	.disabled
) {
	cursor: not-allowed;

	opacity: 0.6;

	box-shadow: none;

	transform: none;
}

/* =========================================================
   13. PRODUCT METADATA
   ========================================================= */

body.single-product .product_meta {
	color: var(--tgx-product-muted);

	font-size: 0.8rem;
	line-height: 1.8;

	overflow-wrap: anywhere;
}

body.single-product .product_meta a {
	color: var(--tgx-product-blue-hover);

	text-decoration: none;
}

body.single-product .product_meta a:hover {
	text-decoration: underline;
}

/* =========================================================
   14. PRODUCT TABS
   ========================================================= */

body.single-product .woocommerce-tabs {
	margin-top: 54px;
}

body.single-product .woocommerce-tabs ul.tabs {
	gap: 12px;

	border-bottom-color:
		var(--tgx-product-border);
}

body.single-product .woocommerce-tabs ul.tabs li a {
	color: var(--tgx-product-muted);

	font-size: 0.85rem;
	font-weight: 750;
	line-height: 1.5;

	transition: color 160ms ease;
}

body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--tgx-product-blue-hover);
}

body.single-product
.woocommerce-tabs .woocommerce-Tabs-panel {
	padding-top: 26px;

	color: #43566d;

	font-size: 0.97rem;
	line-height: 1.8;
}

body.single-product .woocommerce-Tabs-panel h2 {
	margin-bottom: 18px;

	color: var(--tgx-product-navy);

	font-weight: 800;
	letter-spacing: -0.02em;
}

body.single-product .woocommerce-Tabs-panel li::marker {
	color: var(--tgx-product-blue);
}

/* =========================================================
   15. ADDITIONAL INFORMATION
   ========================================================= */

body.single-product
.woocommerce-product-attributes th {
	color: var(--tgx-product-navy);

	font-weight: 700;
}

body.single-product
.woocommerce-product-attributes td {
	color: #43566d;
}

/* =========================================================
   16. RELATED PRODUCTS
   ========================================================= */

body.single-product .related.products {
	margin-top: 56px;
}

body.single-product .related.products > h2 {
	margin-bottom: 28px;

	color: var(--tgx-product-navy);

	font-size: clamp(
		1.8rem,
		3vw,
		2.3rem
	);

	font-weight: 800;
}

body.single-product
.related.products ul.products li.product {
	min-width: 0;

	overflow: hidden;

	border: 1px solid
		var(--tgx-product-border);

	border-radius: 14px;

	background: #ffffff;

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

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

body.single-product
.related.products ul.products li.product:hover {
	transform: translateY(-3px);

	box-shadow:
		0 8px 18px rgba(6, 17, 38, 0.06),
		0 18px 40px rgba(6, 17, 38, 0.08);
}

body.single-product
.related.products ul.products li.product img {
	max-width: 100%;
	height: auto;

	object-fit: contain;
}

/* =========================================================
   17. TABLET
   ========================================================= */

@media (max-width: 1024px) {

	body.single-product :is(
		.entry-summary .product_title,
		.entry-summary .entry-title
	) {
		font-size: clamp(
			1.55rem,
			3vw,
			2rem
		);
	}

	body.single-product .woocommerce-tabs {
		margin-top: 42px;
	}

	body.single-product .related.products {
		margin-top: 44px;
	}
}

/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 767px) {

	body.single-product :is(
		.entry-summary .product_title,
		.entry-summary .entry-title
	) {
		font-size: clamp(
			1.5rem,
			6vw,
			1.9rem
		);

		line-height: 1.26;
	}

	body.single-product .entry-summary .price {
		font-size: 1.4rem;
	}

	body.single-product
	.woocommerce-product-details__short-description {
		font-size: 0.94rem;
		line-height: 1.75;
	}

	body.single-product .woocommerce-tabs {
		margin-top: 34px;
	}

	body.single-product
	.woocommerce-tabs .woocommerce-Tabs-panel {
		padding-top: 20px;
	}

	body.single-product .related.products {
		margin-top: 36px;
	}

	body.single-product .related.products > h2 {
		font-size: 1.65rem;
	}
}

/* =========================================================
   19. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	body.single-product
	form.cart .single_add_to_cart_button {
		min-height: 48px;
	}

	body.single-product .woocommerce-tabs ul.tabs {
		gap: 8px;
	}

	body.single-product
	.woocommerce-tabs ul.tabs li a {
		font-size: 0.78rem;
	}
}

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

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

	body.single-product :is(
		.single_add_to_cart_button,
		.related.products ul.products li.product,
		.woocommerce-tabs ul.tabs li a,
		table.variations select,
		.flex-control-thumbs img,
		.ct-product-gallery-thumbnails img
	) {
		transition: none;
	}

	body.single-product
	form.cart .single_add_to_cart_button:hover,
	body.single-product
	.related.products ul.products li.product:hover {
		transform: none;
	}
}