/* ==========================================================================
   Ghost Production – Single Track Page (v4 – revamped)
   ========================================================================== */

:root {
	--tgp-bg:           #0a0a0c;
	--tgp-surface:      #111114;
	--tgp-surface-2:    #16161b;
	--tgp-surface-3:    #1c1c22;
	--tgp-surface-hi:   #232330;
	--tgp-line:         rgba(255, 255, 255, 0.07);
	--tgp-line-strong:  rgba(255, 255, 255, 0.14);
	--tgp-text:         #ffffff;
	--tgp-text-2:       #c4c5cc;
	--tgp-text-3:       #8a8d97;
	--tgp-text-4:       #5e616a;
	--tgp-accent:       #ffffff;
	--tgp-accent-ink:   #0a0a0c;
	--tgp-violet:       #a78bfa;
	--tgp-violet-2:     #8b5cf6;
	--tgp-violet-soft:  rgba(167, 139, 250, 0.15);
	--tgp-violet-glow:  rgba(139, 92, 246, 0.35);
	--tgp-good:         #6ee7b7;
	--tgp-info:         #93c5fd;
	--tgp-amber:        #fbbf24;
	--tgp-warn:         #ff6b6b;
	--tgp-radius:       8px;
	--tgp-radius-lg:    14px;
	--tgp-radius-xl:    18px;
	--tgp-grad-violet:  linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
	--tgp-grad-surface: linear-gradient(180deg, #14141a 0%, #0e0e12 100%);
}

/* ==========================================================================
   Page wrapper + stray-element nuke
   ========================================================================== */
.tgp-track-page {
	background: var(--tgp-bg);
	color: var(--tgp-text);
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: 0 0 96px;
}

/* Hide stray vendor avatars / badges injected outside our container */
body.single-product .author-img,
body.single-product .author-img-like,
body.single-product .author-img-mobile,
body.single-product .by-text,
body.single-product .store-name-shortcode,
body.single-product .store-name-shortcode-like,
body.single-product .marketking-vendor-badge,
body.single-product [class*="marketking_vendor_badge"] {
	display: none !important;
}
body.single-product .tgp-page .author-img,
body.single-product .tgp-page .author-img-like,
body.single-product .tgp-page .by-text,
body.single-product .tgp-page .store-name-shortcode,
body.single-product .tgp-page .marketking-vendor-badge,
body.single-product .tgp-page [class*="marketking_vendor_badge"] {
	display: initial !important;
}

.tgp-page {
	max-width: 1140px;
	margin: 0 auto;
	padding: 28px 24px 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/*
 * Performance: skip rendering work for sections that are below the viewport
 * until they're scrolled near. Falls back to no-op in older browsers.
 * `contain-intrinsic-size` reserves space so scrollbars stay accurate.
 */
.tgp-producer,
.tgp-reviews,
.tgp-faq,
.tgp-cta,
.tgp-related,
.tgp-how {
	content-visibility: auto;
	contain-intrinsic-size: 1px 600px;
}

/* Sections that include media (images, players) get a more generous budget */
.tgp-producer { contain-intrinsic-size: 1px 360px; }
.tgp-cta      { contain-intrinsic-size: 1px 280px; }
.tgp-how      { contain-intrinsic-size: 1px 260px; }
.tgp-faq      { contain-intrinsic-size: 1px 800px; }

/* --- Generic --- */
.tgp-muted { color: var(--tgp-text-3); }
.tgp-dot { color: var(--tgp-text-4); margin: 0 6px; }
.tgp-link {
	color: var(--tgp-text-2);
	text-decoration: none;
	transition: color 0.15s ease;
}
.tgp-link:hover { color: var(--tgp-violet); }

.tgp-link--arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tgp-text-2);
}
.tgp-link--arrow svg {
	transition: transform 0.18s ease;
	flex-shrink: 0;
}
.tgp-link--arrow:hover {
	color: var(--tgp-violet);
}
.tgp-link--arrow:hover svg {
	transform: translateX(3px);
}

.tgp-section-head { margin-bottom: 18px; }
.tgp-section-head h2 {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.025em;
}
.tgp-section-head p { margin: 0; font-size: 14px; }

.tgp-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--tgp-line-strong);
	color: var(--tgp-text-2);
}
.tgp-pill--good {
	color: var(--tgp-good);
	border-color: rgba(110, 231, 183, 0.4);
	background: rgba(110, 231, 183, 0.08);
}

.tgp-chip {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--tgp-text-2);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.tgp-chip--link {
	cursor: pointer;
}
.tgp-chip--link:hover {
	color: var(--tgp-text);
	background: rgba(167, 139, 250, 0.12);
	border-color: rgba(167, 139, 250, 0.40);
}
.tgp-chip--link:active {
	background: rgba(167, 139, 250, 0.18);
}

/* ==========================================================================
   Custom buttons — beats theme/Elementor defaults
   ========================================================================== */
.tgp-page .tgp-btn,
.tgp-stickybar .tgp-btn {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 12px 22px !important;
	min-height: 44px !important;
	border-radius: var(--tgp-radius) !important;
	border: 1px solid var(--tgp-line-strong) !important;
	background: transparent !important;
	color: var(--tgp-text) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.08s ease, box-shadow 0.2s ease !important;
	width: auto !important;
	white-space: nowrap !important;
	overflow: hidden;
}
.tgp-page .tgp-btn:hover { border-color: var(--tgp-text) !important; transform: translateY(-1px); }
.tgp-page .tgp-btn:active { transform: translateY(0); }

.tgp-page .tgp-btn--primary,
.tgp-stickybar .tgp-btn--primary {
	background: var(--tgp-accent) !important;
	color: var(--tgp-accent-ink) !important;
	border-color: var(--tgp-accent) !important;
	box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 24px -10px rgba(255,255,255,0.2) !important;
}
.tgp-page .tgp-btn--primary:hover,
.tgp-stickybar .tgp-btn--primary:hover {
	background: #e8e8ea !important;
	border-color: #e8e8ea !important;
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 12px 32px -10px rgba(255,255,255,0.28) !important;
}
.tgp-page .tgp-btn--primary:active,
.tgp-stickybar .tgp-btn--primary:active { transform: translateY(0); }

.tgp-page .tgp-btn--ghost {
	background: var(--tgp-surface-2) !important;
	color: var(--tgp-text) !important;
	border-color: var(--tgp-line-strong) !important;
}
.tgp-page .tgp-btn--ghost:hover {
	background: var(--tgp-surface-3) !important;
	border-color: var(--tgp-text) !important;
}

.tgp-page .tgp-btn--lg {
	padding: 16px 28px !important;
	min-height: 52px !important;
	font-size: 15px !important;
}

.tgp-page .tgp-btn--sold,
.tgp-stickybar .tgp-btn--sold {
	background: rgba(255, 107, 107, 0.08) !important;
	color: var(--tgp-warn) !important;
	border-color: rgba(255, 107, 107, 0.35) !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* AJAX add-to-cart visual states */
.tgp-page .tgp-btn .tgp-btn__icon,
.tgp-page .tgp-btn .tgp-btn__check,
.tgp-page .tgp-btn .tgp-btn__spinner,
.tgp-page .tgp-btn .tgp-btn__label,
.tgp-page .tgp-btn .tgp-btn__label-added,
.tgp-stickybar .tgp-btn .tgp-btn__icon,
.tgp-stickybar .tgp-btn .tgp-btn__check,
.tgp-stickybar .tgp-btn .tgp-btn__spinner,
.tgp-stickybar .tgp-btn .tgp-btn__label,
.tgp-stickybar .tgp-btn .tgp-btn__label-added {
	display: inline-flex;
	align-items: center;
	transition: opacity 0.18s ease, transform 0.25s ease;
}
.tgp-page .tgp-btn .tgp-btn__check,
.tgp-page .tgp-btn .tgp-btn__spinner,
.tgp-page .tgp-btn .tgp-btn__label-added,
.tgp-stickybar .tgp-btn .tgp-btn__check,
.tgp-stickybar .tgp-btn .tgp-btn__spinner,
.tgp-stickybar .tgp-btn .tgp-btn__label-added {
	display: none;
}

.tgp-page .tgp-btn__spinner,
.tgp-stickybar .tgp-btn__spinner {
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: tgp-spin 0.7s linear infinite;
	opacity: 0.7;
}
@keyframes tgp-spin { to { transform: rotate(360deg); } }

/* Loading state */
.tgp-page .tgp-btn.loading,
.tgp-stickybar .tgp-btn.loading { pointer-events: none; }
.tgp-page .tgp-btn.loading .tgp-btn__icon,
.tgp-stickybar .tgp-btn.loading .tgp-btn__icon { display: none; }
.tgp-page .tgp-btn.loading .tgp-btn__spinner,
.tgp-stickybar .tgp-btn.loading .tgp-btn__spinner { display: inline-flex; }

/* Added state */
.tgp-page .tgp-btn.added,
.tgp-stickybar .tgp-btn.added {
	background: var(--tgp-good) !important;
	border-color: var(--tgp-good) !important;
	color: #052e1a !important;
	cursor: pointer;
	animation: tgp-pop 0.35s ease;
}
.tgp-page .tgp-btn.added:hover,
.tgp-stickybar .tgp-btn.added:hover {
	filter: brightness(1.05);
}
.tgp-page .tgp-btn.added .tgp-btn__icon,
.tgp-page .tgp-btn.added .tgp-btn__spinner,
.tgp-page .tgp-btn.added .tgp-btn__label,
.tgp-stickybar .tgp-btn.added .tgp-btn__icon,
.tgp-stickybar .tgp-btn.added .tgp-btn__spinner,
.tgp-stickybar .tgp-btn.added .tgp-btn__label { display: none; }
.tgp-page .tgp-btn.added .tgp-btn__check,
.tgp-page .tgp-btn.added .tgp-btn__label-added,
.tgp-stickybar .tgp-btn.added .tgp-btn__check,
.tgp-stickybar .tgp-btn.added .tgp-btn__label-added { display: inline-flex; }

@keyframes tgp-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}

/* Hide WooCommerce's auto-injected "View cart" link next to our buttons */
.tgp-page .added_to_cart.wc-forward,
.tgp-stickybar .added_to_cart.wc-forward { display: none !important; }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.tgp-crumb {
	font-size: 13px;
	color: var(--tgp-text-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.tgp-crumb a {
	color: var(--tgp-text-3);
	text-decoration: none;
	transition: color 0.15s ease;
}
.tgp-crumb a:hover { color: var(--tgp-violet); }
.tgp-crumb__sep { color: var(--tgp-text-4); }
.tgp-crumb__current { color: var(--tgp-text); }

/* ==========================================================================
   HERO – with cover backdrop
   ========================================================================== */
.tgp-hero {
	position: relative;
	border-radius: var(--tgp-radius-xl);
	overflow: hidden;
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.65);
}
.tgp-hero::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(167,139,250,0.35) 0%, transparent 35%, transparent 65%, rgba(167,139,250,0.18) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index: 3;
}
.tgp-hero__backdrop {
	position: absolute;
	inset: 0;
	background-image: var(--tgp-cover);
	background-size: cover;
	background-position: center;
	filter: blur(60px) saturate(120%);
	transform: scale(1.2);
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}
.tgp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(80% 80% at 70% 0%, rgba(167,139,250,0.10) 0%, transparent 60%),
		linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.92) 100%);
	pointer-events: none;
	z-index: 1;
}
.tgp-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 28px 32px;
}

.tgp-hero__cover {
	position: relative;
	width: 220px;
	height: 220px;
	border-radius: var(--tgp-radius-lg);
	overflow: hidden;
	background: var(--tgp-surface-2);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.tgp-hero__cover img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 0.4s ease;
}
.tgp-hero__cover:hover img { transform: scale(1.03); }

/* Cover overlay removed — wishlist/share moved to hero toolbar */
.tgp-cover__actions { display: none; }

/* Hero toolbar — wishlist + share, always visible below buy section */
.tgp-hero__toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--tgp-line);
	flex-wrap: wrap;
}

/* Mobile-only floating wishlist + share over the cover image */
.tgp-cover-actions {
	display: none; /* shown only on mobile via media query */
	position: absolute;
	top: 10px;
	right: 10px;
	gap: 8px;
	z-index: 4;
}
.tgp-page .tgp-cover-actions .tgp-cover-btn,
.tgp-page button.tgp-cover-btn {
	all: unset !important;
	box-sizing: border-box !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	color: #fff !important;
	border: 0 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	cursor: pointer !important;
	transition: color 0.15s, transform 0.12s, opacity 0.15s !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
	opacity: 0.95 !important;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)) !important;
}
.tgp-page .tgp-cover-actions .tgp-cover-btn:hover {
	background: transparent !important;
	border: 0 !important;
	opacity: 1 !important;
	transform: scale(1.1) !important;
}
.tgp-page .tgp-cover-actions .tgp-cover-btn:active {
	transform: scale(0.92) !important;
}
.tgp-page .tgp-cover-actions .tgp-cover-btn.is-wished {
	color: #f87171 !important;
	background: transparent !important;
	border: 0 !important;
}
.tgp-page .tgp-cover-actions .tgp-cover-btn.is-wished svg {
	stroke: #f87171 !important;
	fill: rgba(248, 113, 113, 0.35) !important;
}
.tgp-page .tgp-cover-actions .tgp-cover-btn svg {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
}

/* Toolbar buttons — icon-only square buttons (high specificity to beat theme styles) */
.tgp-page .tgp-toolbar-btn,
.tgp-page button.tgp-toolbar-btn,
.tgp-page a.tgp-toolbar-btn {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	padding: 0 !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 10px !important;
	border: 1px solid var(--tgp-line-strong) !important;
	background: transparent !important;
	color: var(--tgp-text-2) !important;
	cursor: pointer !important;
	transition: background 0.15s, border-color 0.15s, color 0.15s !important;
	box-shadow: none !important;
	flex-shrink: 0 !important;
}
/* Hide text label visually but keep it for screen readers */
.tgp-page .tgp-toolbar-btn > span {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.tgp-page .tgp-toolbar-btn:hover,
.tgp-page button.tgp-toolbar-btn:hover {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: var(--tgp-text-4) !important;
	color: var(--tgp-text) !important;
}
.tgp-page .tgp-toolbar-btn svg { flex-shrink: 0 !important; }
.tgp-page .tgp-toolbar-btn.is-wished {
	color: #f87171 !important;
	border-color: rgba(248, 113, 113, 0.5) !important;
	background: rgba(248, 113, 113, 0.08) !important;
}
.tgp-page .tgp-toolbar-btn.is-wished svg {
	stroke: #f87171 !important;
	fill: rgba(248, 113, 113, 0.25) !important;
}

/* Share modal (full-screen overlay, not dropdown) */
.tgp-share-wrap { display: inline-block; }
.tgp-share-dropdown { display: none !important; }

/* ─── Popup-login plugin — keep its native dark surface intact on the track page.
   The plugin renders the modal inside the document body but our wider CSS scope
   (and any plugin that reparents the overlay) can occasionally make the inner
   panel look washed-out grey. Pin the colours and stacking order explicitly so
   it always shows on top of everything we render and the inner sections stay
   transparent (so the popup-login-box's dark surface is the only thing showing
   through). */
body.single-product .popup-login-overlay,
html.popup-login-modal-open .popup-login-overlay {
	background: rgba(0, 0, 0, 0.85) !important;
	z-index: 2147483646 !important;
}
body.single-product .popup-login-container,
html.popup-login-modal-open .popup-login-container {
	z-index: 2147483647 !important;
}
body.single-product .popup-login-box {
	background: #0a0a0a !important;
	background-image: none !important;
	background-color: #0a0a0a !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7) !important;
}
/* Force every direct wrapper inside the popup to be transparent so nothing
   else paints a lighter grey block over our solid #0a0a0a surface.
   We deliberately exclude interactive elements (tabs, inputs, buttons,
   the Google button, divider span, messages) so their existing tints stay. */
body.single-product .popup-login-content,
body.single-product .popup-login-tab-content,
body.single-product .popup-login-tab-content.active,
body.single-product #login-tab,
body.single-product #register-tab,
body.single-product #lostpassword-tab,
body.single-product .popup-login-form,
body.single-product .popup-login-field,
body.single-product .popup-login-links,
body.single-product .popup-login-tabs,
body.single-product .popup-login-terms-agreement,
body.single-product .popup-login-divider {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}
body.single-product .popup-login-box * {
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ─── Share modal — modern centered overlay ─── */
.tgp-share-modal,
body .tgp-share-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	background: rgba(6, 6, 10, 0.82) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	animation: tgp-share-fade 0.2s ease;
}
.tgp-share-modal.is-open,
body .tgp-share-modal.is-open { display: flex !important; }
@keyframes tgp-share-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tgp-share-pop  { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

.tgp-share-modal__panel,
body .tgp-share-modal .tgp-share-modal__panel {
	width: 100% !important;
	max-width: 460px !important;
	background-color: #15151b !important;
	background-image: linear-gradient(180deg, #1a1a22 0%, #111116 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 18px !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(167, 139, 250, 0.08) !important;
	overflow: hidden !important;
	opacity: 1 !important;
	animation: tgp-share-pop 0.22s ease;
}

.tgp-share-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 12px;
}
.tgp-share-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
}
.tgp-share-modal__sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--tgp-text-3);
}
/* Selectors deliberately not scoped to .tgp-page — the modal is portaled to
   <body> at runtime, so .tgp-page parent selectors stop matching. We use
   body-level qualifiers for specificity instead. */
html body .tgp-share-modal button.tgp-share-modal__close,
html body .tgp-share-modal .tgp-share-modal__close {
	all: unset !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--tgp-text-3) !important;
	border: 1px solid var(--tgp-line) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s !important;
	flex-shrink: 0 !important;
}
html body .tgp-share-modal button.tgp-share-modal__close:hover,
html body .tgp-share-modal .tgp-share-modal__close:hover {
	background: var(--tgp-surface-2) !important;
	border-color: var(--tgp-line-strong) !important;
	color: var(--tgp-text) !important;
}

.tgp-share-modal__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 6px 18px 18px;
}
html body .tgp-share-modal a.tgp-share-modal__item,
html body .tgp-share-modal button.tgp-share-modal__item,
html body .tgp-share-modal .tgp-share-modal__item {
	all: unset !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 14px 6px !important;
	border-radius: 12px !important;
	border: 1px solid var(--tgp-line) !important;
	background: var(--tgp-surface-2) !important;
	background-color: var(--tgp-surface-2) !important;
	background-image: none !important;
	color: var(--tgp-text-2) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: border-color 0.15s, background 0.15s, transform 0.12s, color 0.15s !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-height: 88px !important;
	width: auto !important;
}
html body .tgp-share-modal a.tgp-share-modal__item:hover,
html body .tgp-share-modal button.tgp-share-modal__item:hover,
html body .tgp-share-modal .tgp-share-modal__item:hover {
	background: rgba(167, 139, 250, 0.08) !important;
	background-color: rgba(167, 139, 250, 0.08) !important;
	background-image: none !important;
	border-color: rgba(167, 139, 250, 0.45) !important;
	color: var(--tgp-text) !important;
	transform: translateY(-2px) !important;
}
.tgp-share-modal__item-icon {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.04) !important;
	background-image: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}
.tgp-share-modal__item--x       .tgp-share-modal__item-icon { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.tgp-share-modal__item--fb      .tgp-share-modal__item-icon { background: rgba(24, 119, 242, 0.18) !important; color: #4f8df9 !important; }
.tgp-share-modal__item--whatsapp .tgp-share-modal__item-icon { background: rgba(37, 211, 102, 0.16) !important; color: #25d366 !important; }
.tgp-share-modal__item--telegram .tgp-share-modal__item-icon { background: rgba(34, 158, 217, 0.18) !important; color: #38b6e3 !important; }
.tgp-share-modal__item--reddit  .tgp-share-modal__item-icon { background: rgba(255, 69, 0, 0.18) !important; color: #ff7733 !important; }
.tgp-share-modal__item--linkedin .tgp-share-modal__item-icon { background: rgba(10, 102, 194, 0.18) !important; color: #4591db !important; }
.tgp-share-modal__item--email   .tgp-share-modal__item-icon { background: rgba(167, 139, 250, 0.16) !important; color: var(--tgp-violet) !important; }
.tgp-share-modal__item--copy    .tgp-share-modal__item-icon { background: rgba(110, 231, 183, 0.14) !important; color: var(--tgp-good) !important; }

.tgp-share-modal__item-label {
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: var(--tgp-text-2) !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

.tgp-share-modal__url {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 10px 10px 14px;
	margin: 0 18px 18px;
	border: 1px solid var(--tgp-line);
	border-radius: 10px;
	background: var(--tgp-surface-2);
	font-size: 12px;
	color: var(--tgp-text-3);
	overflow: hidden;
}
.tgp-share-modal__url-text {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
html body .tgp-share-modal button.tgp-share-modal__url-copy,
html body .tgp-share-modal .tgp-share-modal__url-copy {
	all: unset !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 7px 14px !important;
	border-radius: 8px !important;
	background: var(--tgp-violet) !important;
	background-color: var(--tgp-violet) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background 0.15s !important;
}
html body .tgp-share-modal button.tgp-share-modal__url-copy:hover,
html body .tgp-share-modal .tgp-share-modal__url-copy:hover {
	background: #7c4ef0 !important;
	background-color: #7c4ef0 !important;
}
html body .tgp-share-modal button.tgp-share-modal__url-copy.is-copied,
html body .tgp-share-modal .tgp-share-modal__url-copy.is-copied {
	background: rgba(110, 231, 183, 0.2) !important;
	background-color: rgba(110, 231, 183, 0.2) !important;
	color: var(--tgp-good) !important;
}

@media (max-width: 480px) {
	.tgp-share-modal__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 14px 14px; }
	.tgp-share-modal__item { padding: 10px 4px !important; min-height: 78px !important; }
	.tgp-share-modal__item-icon { width: 32px; height: 32px; }
	.tgp-share-modal__item-label { font-size: 10.5px; }
	.tgp-share-modal__head { padding: 16px 18px 10px; }
	.tgp-share-modal__url  { margin: 0 14px 14px; }
}

.tgp-hero__sold-chip {
	position: absolute;
	top: 12px; left: 12px;
	background: var(--tgp-warn);
	color: #0a0a0c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
}

.tgp-hero__body { min-width: 0; }

/* Curator's Pick — editorial eyebrow above the hero title */
.tgp-curator-pick {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	padding: 5px 11px 5px 9px;
	border: 1px solid rgba(251, 191, 36, 0.32);
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.06));
	border-radius: 999px;
	font-size: 11.5px;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tgp-curator-pick__icon {
	color: var(--tgp-amber);
	fill: var(--tgp-amber);
	flex-shrink: 0;
	filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}
.tgp-curator-pick__label {
	color: var(--tgp-amber);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.tgp-curator-pick__sep {
	color: rgba(251, 191, 36, 0.45);
}
.tgp-curator-pick__sub {
	color: var(--tgp-text-2, #c1c4cc);
	font-weight: 500;
	letter-spacing: 0.01em;
}
@media (max-width: 520px) {
	.tgp-curator-pick { padding: 4px 9px 4px 8px; font-size: 11px; gap: 6px; }
	.tgp-curator-pick__sep,
	.tgp-curator-pick__sub { display: none; }
}

.tgp-hero__title {
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 12px;
	color: var(--tgp-text);
}

.tgp-hero__byline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	color: var(--tgp-text-3);
	font-size: 14px;
}
.tgp-hero__author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tgp-text-2);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}
.tgp-hero__author:hover { color: var(--tgp-text); }
.tgp-hero__author img {
	width: 22px; height: 22px;
	border-radius: 50%; object-fit: cover; display: block;
}
.tgp-hero__author-badges { display: inline-flex; gap: 4px; align-items: center; }
.tgp-hero__author-badges img { width: 16px; height: 16px; }

.tgp-hero__meta {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	/* Padding gives hover lift (translateY) room so chips aren't clipped */
	padding: 3px 2px 4px;
	margin-left: -2px;
}
/* On very narrow viewports switch back to single-line scroll */
@media (max-width: 480px) {
	.tgp-hero__meta {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.tgp-hero__meta::-webkit-scrollbar { display: none; }
}

.tgp-hero__buy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	min-width: 160px;
}
.tgp-hero__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.tgp-hero__price-current {
	font-size: 32px;
	font-weight: 800;
	color: var(--tgp-text);
	letter-spacing: -0.025em;
	line-height: 1;
}
.tgp-hero__price-current .woocommerce-Price-amount { color: var(--tgp-text); }
.tgp-hero__price-current del { display: none; }
.tgp-hero__price-current ins { text-decoration: none; background: transparent; }
.tgp-hero__price-old { font-size: 13px; color: var(--tgp-text-4); text-decoration: line-through; }
.tgp-hero__price-saving {
	font-size: 12px;
	color: var(--tgp-good);
	font-weight: 600;
}

/* Wishlist + share — glass buttons overlaid on cover art */
.tgp-page .tgp-action-btn,
.tgp-page button.tgp-action-btn {
	all: unset;
	box-sizing: border-box;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.20) !important;
	background: rgba(10, 10, 12, 0.55) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	        backdrop-filter: blur(10px) !important;
	color: rgba(255, 255, 255, 0.80) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease !important;
	line-height: 1 !important;
	font-size: 0 !important;
}
.tgp-page .tgp-action-btn:hover,
.tgp-page button.tgp-action-btn:hover {
	background: rgba(10, 10, 12, 0.80) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
	transform: scale(1.08) !important;
}
.tgp-page .tgp-action-btn:active,
.tgp-page button.tgp-action-btn:active { transform: scale(0.94) !important; }
.tgp-page .tgp-action-btn svg {
	display: block !important;
	width: 15px !important;
	height: 15px !important;
	color: inherit !important;
	flex-shrink: 0 !important;
}
/* Wished state — heart fills red */
.tgp-page .tgp-wishlist-btn.is-wished {
	color: #f87171 !important;
	border-color: rgba(248, 113, 113, 0.5) !important;
	background: rgba(10, 10, 12, 0.70) !important;
}
.tgp-page .tgp-wishlist-btn.is-wished svg {
	fill: #f87171 !important;
}

/* Mobile price embed inside button (hidden by default, visible at ≤640px) */
/* Mobile-only price + savings inside the buy button — desktop uses the
   standalone .tgp-hero__price block instead, so hide them on desktop. */
.tgp-btn__mobile-price,
.tgp-btn__mobile-saving { display: none; }

/* Subtle checkout link injected after "Added" */
.tgp-checkout-nudge {
	display: block;
	font-size: 12px;
	color: var(--tgp-violet);
	text-decoration: none;
	text-align: center;
	margin-top: 4px;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.tgp-checkout-nudge:hover { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   TRUST STRIP – colored icons
   ========================================================================== */
.tgp-trust {
	display: none; /* legacy, replaced by .tgp-trust-badges */
}

/* Trust badges — clean text-only verification, centered, no cards */
.tgp-trust-badges {
	list-style: none;
	margin: 0;
	padding: 22px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px 40px;
}
.tgp-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: default;
}
.tgp-trust-badge__check { flex-shrink: 0; }
.tgp-trust-badge__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tgp-trust-badge strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1.2;
}
.tgp-trust-badge span {
	font-size: 11.5px;
	color: var(--tgp-text-3);
	white-space: nowrap;
	line-height: 1.3;
}

@media (max-width: 880px) {
	.tgp-trust-badges { gap: 18px 32px; padding: 20px 0; }
}
@media (max-width: 640px) {
	.tgp-trust-badges {
		padding: 16px 0;
		gap: 14px 20px;
		justify-content: flex-start;
	}
	.tgp-trust-badge strong { font-size: 13px; }
	.tgp-trust-badge span   { font-size: 11px; }
	.tgp-trust-badge__check { width: 22px; height: 22px; }
	.tgp-trust-badge__check circle { r: 10; }
}

/* ==========================================================================
   PLAYER (Sonaar) — clean, single-row layout: play | wave | time
   ========================================================================== */
.tgp-player-wrap {
	position: relative;
	background: var(--tgp-grad-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius-lg);
	padding: 14px 20px;
	overflow: hidden;
}

/* In-hero variant — flush with the hero card, no border */
.tgp-player-wrap--inhero {
	position: relative;
	z-index: 2;
	background: rgba(0, 0, 0, 0.18);
	border: 0;
	border-top: 1px solid var(--tgp-line);
	border-radius: 0;
	padding: 14px 32px;
	margin-top: 0;
}

/* Reset every Sonaar wrapper inside us */
.tgp-player-wrap .iron-audioplayer,
.tgp-player-wrap .iron_widget_radio,
.tgp-player-wrap .sonaar-player,
.tgp-player-wrap .sr_it-player-wrapper,
.tgp-player-wrap .sr_it-mediaplayer,
.tgp-player-wrap .sr_player_main,
.tgp-player-wrap [class*="sonaar"] {
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Hide every metadata/title text Sonaar might inject (the cause of "filename + raw <a>" appearing). */
.tgp-player-wrap .srp_player_meta,
.tgp-player-wrap .srp_miniplayer_metas,
.tgp-player-wrap .srp_meta,
.tgp-player-wrap .track-title,
.tgp-player-wrap .album-title,
.tgp-player-wrap .srp_artistname,
.tgp-player-wrap .srp_trackartist,
.tgp-player-wrap .sr_it-playlist-title,
.tgp-player-wrap .srp_track_cta,
.tgp-player-wrap .sr_it-MediaTitle,
.tgp-player-wrap .sr_it-MediaArtist,
.tgp-player-wrap .sr_it-PlayerArtworkContainer,
.tgp-player-wrap .sr_it-MediaArtwork,
.tgp-player-wrap .sr_it-track-store,
.tgp-player-wrap .sr_it-album-store,
.tgp-player-wrap .sr_it-NowPlaying,
.tgp-player-wrap .sr_it-MediaInfo,
.tgp-player-wrap .sr_it-track-title,
.tgp-player-wrap .sr_it-album-title,
.tgp-player-wrap .sr_it-PlayerInfoContainer,
.tgp-player-wrap .sr_it-trackArt,
.tgp-player-wrap .sr_it-track-card-trackTitle,
.tgp-player-wrap .sr_it-track-card-albumTitle,
.tgp-player-wrap .sr_track_cover,
.tgp-player-wrap .sr_track_cover_wrapper,
.tgp-player-wrap .vendorpic,
.tgp-player-wrap .vendorname-mobile,
.tgp-player-wrap .sricon-p,
.tgp-player-wrap .heading-t3,
.tgp-player-wrap .widgettitle {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Single-row grid: [play] | [waveform fills the rest] (timestamps hidden) */
.tgp-player-wrap .iron-audioplayer .player,
.tgp-player-wrap .iron-audioplayer .player.sr_player__inline {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	grid-template-rows: auto !important;
	align-items: center !important;
	column-gap: 14px !important;
	row-gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Controls (play / prev / next) — single column, single row */
.tgp-player-wrap .iron-audioplayer .player .control,
.tgp-player-wrap .iron-audioplayer .player .srp_main_control,
.tgp-player-wrap .iron-audioplayer .player.sr_player__inline .control,
.tgp-player-wrap .iron-audioplayer .player.sr_player__inline .srp_main_control,
.tgp-player-wrap .iron-audioplayer .player > .play,
.tgp-player-wrap .iron-audioplayer .player > .sr_play_btn {
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-self: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	column-gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* ─── Play button — clean dark circle with custom triangle, only known classes ─── */
.tgp-player-wrap .play,
.tgp-player-wrap .sr_play_btn,
.tgp-player-wrap .sr_it-playBtn,
.tgp-player-wrap button.play {
	position: relative !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	max-width: 38px !important;
	max-height: 38px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: none !important;
	color: var(--tgp-text) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	flex: 0 0 38px !important;
	cursor: pointer !important;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease !important;
	overflow: hidden !important;
}
.tgp-player-wrap .play:hover,
.tgp-player-wrap .sr_play_btn:hover,
.tgp-player-wrap .sr_it-playBtn:hover,
.tgp-player-wrap button.play:hover {
	background: rgba(167, 139, 250, 0.18) !important;
	border-color: rgba(167, 139, 250, 0.5) !important;
	transform: scale(1.05) !important;
}
.tgp-player-wrap .play:active,
.tgp-player-wrap .sr_play_btn:active,
.tgp-player-wrap .sr_it-playBtn:active,
.tgp-player-wrap button.play:active { transform: scale(0.96) !important; }

/* Hide Sonaar's default play/pause icon and inject our own clean triangle */
.tgp-player-wrap .play .sricon-play,
.tgp-player-wrap .play .sricon-pause,
.tgp-player-wrap .play i,
.tgp-player-wrap .sr_play_btn .sricon-play,
.tgp-player-wrap .sr_play_btn .sricon-pause,
.tgp-player-wrap .sr_play_btn i,
.tgp-player-wrap .sr_it-playBtn .sricon-play,
.tgp-player-wrap .sr_it-playBtn .sricon-pause,
.tgp-player-wrap .sr_it-playBtn i {
	font-size: 0 !important;
	color: transparent !important;
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

/* Custom play triangle via CSS — clean, sharp, white */
.tgp-player-wrap .play::after,
.tgp-player-wrap .sr_play_btn::after,
.tgp-player-wrap .sr_it-playBtn::after,
.tgp-player-wrap button.play::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
	margin-left: 2px;
	pointer-events: none;
	transition: border-color 0.15s ease;
}
/* When playing — Sonaar swaps the inner <i.sricon-play> to <i.sricon-pause>
   OR adds a .playing/.is-playing/.sr_playing class to the button itself.
   Detect either via :has() and class-based selectors. */
.tgp-player-wrap .play:has(.sricon-pause)::after,
.tgp-player-wrap .play:has(.sr_pause)::after,
.tgp-player-wrap .sr_play_btn:has(.sricon-pause)::after,
.tgp-player-wrap .sr_it-playBtn:has(.sricon-pause)::after,
.tgp-player-wrap button.play:has(.sricon-pause)::after,
.tgp-player-wrap .play.playing::after,
.tgp-player-wrap .play.is-playing::after,
.tgp-player-wrap .play.sr_playing::after,
.tgp-player-wrap .play.sr_paused-false::after,
.tgp-player-wrap .sr_play_btn.playing::after,
.tgp-player-wrap .sr_play_btn.is-playing::after,
.tgp-player-wrap .sr_it-playBtn.playing::after,
.tgp-player-wrap .sr_it-playBtn.is-playing::after,
.tgp-player-wrap button.play.playing::after,
.tgp-player-wrap button.play.is-playing::after,
.tgp-player-wrap .play.tgp-is-playing::after,
.tgp-player-wrap .sr_play_btn.tgp-is-playing::after,
.tgp-player-wrap .sr_it-playBtn.tgp-is-playing::after,
.tgp-player-wrap button.play.tgp-is-playing::after {
	width: 10px;
	height: 12px;
	border: 0 solid transparent;
	border-width: 0;
	background:
		linear-gradient(currentColor, currentColor) left  / 3px 100% no-repeat,
		linear-gradient(currentColor, currentColor) right / 3px 100% no-repeat;
	margin-left: 0;
}
/* Cap the entire player row height (two-row grid: wave + times below) */
.tgp-player-wrap .player,
.tgp-player-wrap .sr_player_main,
.tgp-player-wrap .sr_it-mediaplayer > * {
	max-height: 86px !important;
	overflow: visible !important;
}

/* Prev / next chevrons – muted */
.tgp-player-wrap .iron-audioplayer .player .previous,
.tgp-player-wrap .iron-audioplayer .player .next {
	width: 28px; height: 28px;
	color: var(--tgp-text-3) !important;
	font-size: 12px !important;
	opacity: 0.85 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: color 0.15s ease;
}
.tgp-player-wrap .iron-audioplayer .player .previous:hover,
.tgp-player-wrap .iron-audioplayer .player .next:hover { color: var(--tgp-text) !important; }

/* Waveform / progressbar — fills the rest of the player row */
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar,
.tgp-player-wrap .iron-audioplayer .player.sr_player__inline .sr_progressbar {
	grid-column: 2 / -1 !important;
	grid-row: 1 !important;
	min-width: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	display: block !important;
	align-items: center;
}
/* If times live INSIDE .sr_progressbar, place them on the second inner row */
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .wave,
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .sr_wave,
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .sr-wavesurfer {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	flex: none !important;
	margin: 0 !important;
	min-height: 38px !important;
}
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .currentTime {
	grid-column: 1 !important;
	grid-row: 2 !important;
	justify-self: start !important;
}
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .totalTime,
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .timing {
	grid-column: 2 !important;
	grid-row: 2 !important;
	justify-self: end !important;
}

/* If wave is OUTSIDE .sr_progressbar (direct child of .player) */
.tgp-player-wrap .iron-audioplayer .player > .wave,
.tgp-player-wrap .iron-audioplayer .player > .sr_wave,
.tgp-player-wrap .iron-audioplayer .player > .sr-wavesurfer {
	grid-column: 2 / -1 !important;
	grid-row: 1 !important;
	width: 100% !important;
	flex: none !important;
	margin: 0 !important;
	min-height: 38px !important;
}

/* Compress the wavesurfer canvas vertically (without clipping it) so the
   visible waveform feels less tall. wavesurfer renders bars at the canvas
   height it was init'd with (~80px). We can't change that height post-init,
   but we CAN scale the inner <wave wave> visually. The container box stays
   the canvas's natural size, so the bars never get clipped — they're just
   drawn shorter. */
/* Scale the OUTER <wave> wrapper, not the inner <wave wave>. The inner
   element is what Sonaar redraws frame-by-frame during playback (the played-
   portion overlay), and applying a transform there forces the GPU to re-apply
   scaleY on every redraw — that's what was producing the shimmer/glitch on
   mobile. Transforming the stable outer wrapper means the canvases inside can
   redraw freely without re-rasterizing the transform. */
.tgp-player-wrap .iron-audioplayer .player > wave,
.tgp-player-wrap .iron-audioplayer .player > .wave,
.tgp-player-wrap .iron-audioplayer .player > .sr_wave,
.tgp-player-wrap .iron-audioplayer .player > .sr-wavesurfer {
	transform: scaleY(0.55) !important;
	transform-origin: center center !important;
	will-change: transform !important;
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
	contain: paint;
}
/* Make absolutely sure no transform leaks back onto the inner wave or the
   canvases — those must stay un-transformed so the GPU just composites them
   inside the parent's transformed layer. */
.tgp-player-wrap .iron-audioplayer .player wave wave,
.tgp-player-wrap .iron-audioplayer .player wave canvas,
.tgp-player-wrap .iron-audioplayer .player wave wave canvas {
	transform: none !important;
	will-change: auto !important;
}

/* Kill Sonaar's `transition: width 400ms` on the played-portion overlay.
   That CSS transition is THE root cause of the mobile waveform shimmer — as
   playback progresses Sonaar repeatedly updates the inner <wave wave>'s
   width, and the browser keeps a continuous width-tween running, which
   forces re-layout / re-paint every frame inside our scaled parent layer.
   With the transition disabled the width updates apply instantly per
   playback frame and the layer composites cleanly. */
.tgp-player-wrap .iron-audioplayer .player wave wave,
.tgp-player-wrap .iron-audioplayer .wave wave,
.tgp-player-wrap #sonaar-player .wave wave {
	transition: none !important;
	-webkit-transition: none !important;
}

/* If currentTime / totalTime are DIRECT children of .player, drop them to row 2 */
.tgp-player-wrap .iron-audioplayer .player > .currentTime {
	grid-column: 2 !important;
	grid-row: 2 !important;
	justify-self: start !important;
}
.tgp-player-wrap .iron-audioplayer .player > .totalTime,
.tgp-player-wrap .iron-audioplayer .player > .timing {
	grid-column: 3 !important;
	grid-row: 2 !important;
	justify-self: end !important;
}

/* Hide all timestamp displays from the waveform — Sonaar renders these as
   .currentTime / .totalTime / .timing in various skin variants. */
.tgp-player-wrap .iron-audioplayer .player .currentTime,
.tgp-player-wrap .iron-audioplayer .player .totalTime,
.tgp-player-wrap .iron-audioplayer .player .timing,
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .currentTime,
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .totalTime,
.tgp-player-wrap .iron-audioplayer .player .sr_progressbar > .timing {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* Wave colors – tweak Sonaar's wave to violet */
.tgp-player-wrap .iron-audioplayer wave wave { background: var(--tgp-violet) !important; }
.tgp-player-wrap .sr_it-PlayerProgessBar,
.tgp-player-wrap .sr_it-progress-bar { background-color: var(--tgp-line) !important; }
.tgp-player-wrap .sr_it-PlayerProgessBar > div,
.tgp-player-wrap .sr_it-progress-fill { background-color: var(--tgp-violet) !important; }

/* Hide Sonaar global sticky bottom player – we use our own */
/* Sonaar's sticky player is intentionally kept visible on single product pages —
   it serves as the main bottom bar with playback controls + add-to-cart. */

.tgp-player-wrap__none {
	font-size: 13px;
	color: var(--tgp-text-3);
	padding: 12px 0;
	text-align: center;
}

/* Mobile player tweaks */
@media (max-width: 640px) {
	.tgp-player-wrap {
		padding: 10px 14px;
		border-radius: var(--tgp-radius);
	}
	.tgp-player-wrap--inhero {
		padding: 12px 22px;
		border-radius: 0;
	}
	/* Force the whole player row to fit single line */
	.tgp-player-wrap .iron-audioplayer .player,
	.tgp-player-wrap .iron-audioplayer .player.sr_player__inline {
		gap: 8px !important;
		min-height: 44px !important;
	}
	/* Clamp play button firmly */
	.tgp-player-wrap .iron-audioplayer .player .play,
	.tgp-player-wrap .iron-audioplayer .player button.play,
	.tgp-player-wrap .iron-audioplayer .player .sr_play_btn {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
		min-height: 32px !important;
		max-height: 32px !important;
		flex: 0 0 32px !important;
		border-radius: 50% !important;
		overflow: hidden !important;
		padding: 0 !important;
	}
	/* Cap every child of play button absolutely */
	.tgp-player-wrap .iron-audioplayer .player .play *,
	.tgp-player-wrap .iron-audioplayer .player .sr_play_btn * {
		max-width: 14px !important;
		max-height: 14px !important;
		font-size: 12px !important;
	}
	.tgp-player-wrap .iron-audioplayer .player .play canvas,
	.tgp-player-wrap .iron-audioplayer .player .play svg {
		width: 13px !important;
		height: 13px !important;
		max-width: 13px !important;
		max-height: 13px !important;
	}
	/* Time: smaller on mobile */
	.tgp-player-wrap .iron-audioplayer .player .currentTime,
	.tgp-player-wrap .iron-audioplayer .player .totalTime,
	.tgp-player-wrap .iron-audioplayer .player .timing {
		font-size: 11px !important;
		min-width: 0 !important;
	}
	/* MOBILE WAVEFORM — surgical anti-flicker, NOT a layout override.
	   We kill transforms + transitions on the wave subtree so Sonaar's canvas
	   repaints don't fight with our own compositor effects. */
	.tgp-player-wrap .iron-audioplayer .player > wave,
	.tgp-player-wrap .iron-audioplayer .player > .wave,
	.tgp-player-wrap .iron-audioplayer .player .sonaar_fake_wave,
	.tgp-player-wrap .iron-audioplayer .player .sonaar_wave_base,
	.tgp-player-wrap .iron-audioplayer .player .sonaar_wave_cut,
	.tgp-player-wrap .iron-audioplayer .player wave wave,
	.tgp-player-wrap .iron-audioplayer .player wave canvas,
	.tgp-player-wrap .iron-audioplayer .player wave wave canvas {
		transform: none !important;
		-webkit-transform: none !important;
		transition: none !important;
		-webkit-transition: none !important;
		will-change: auto !important;
		contain: none !important;
	}

	/* MOBILE WAVE FLICKER — kill every expensive compositor effect inside the
	   hero card on mobile. */
	.tgp-hero__backdrop { display: none !important; }
	.tgp-hero::before   { display: none !important; }
	.tgp-hero::after    { background: rgba(10, 10, 12, 0.6) !important; }
	.tgp-page .tgp-action-btn,
	.tgp-page button.tgp-action-btn {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: rgba(10, 10, 12, 0.78) !important;
	}

	/* HARD-ISOLATE THE PLAYER FROM THE HERO'S COMPOSITING CHAIN.
	   `isolation: isolate` creates a new stacking context. `contain: paint`
	   tells the browser to never paint outside this box, which gives the
	   compositor a free pass to put it on its own layer. `transform:
	   translateZ(0)` forces the GPU layer creation. The combination means
	   Sonaar's canvas updates inside the player wrap can NEVER trigger a
	   repaint of any ancestor — no matter what effects the ancestors have. */
	.tgp-player-wrap--inhero {
		isolation: isolate !important;
		contain: paint !important;
		transform: translateZ(0) !important;
		-webkit-transform: translateZ(0) !important;
		will-change: transform !important;
		overflow: hidden !important;
	}
}

/* ==========================================================================
   SALE COUNTDOWN
   ========================================================================== */
.tgp-countdown {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: var(--tgp-radius);
	background: rgba(255, 107, 107, 0.08);
	border: 1px solid rgba(255, 107, 107, 0.3);
	color: var(--tgp-warn);
	font-size: 13px;
	font-weight: 500;
	width: fit-content;
}
.tgp-countdown__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--tgp-text);
}
.tgp-countdown__sep { opacity: 0.5; }
.tgp-countdown__save { color: var(--tgp-text-2); }

/* Inline countdown sits between current price and "Save XX" line — sized down,
   right-aligned in the price column. The standalone strip would have repeated
   the savings info; we removed that to keep one source of truth per metric. */
.tgp-countdown--inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	border-radius: 999px;
	background: rgba(255, 107, 107, 0.10);
	border: 1px solid rgba(255, 107, 107, 0.28);
	color: var(--tgp-warn);
	width: auto;
}
.tgp-countdown--inline .tgp-countdown__label { color: var(--tgp-warn); opacity: 0.85; }
.tgp-countdown--inline .tgp-countdown__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--tgp-text);
}
.tgp-countdown--inline svg { flex-shrink: 0; opacity: 0.9; }

/* ==========================================================================
   TABS – soft purple accent
   ========================================================================== */
.tgp-tabs__nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--tgp-line);
	margin-bottom: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	/* Allow BOTH horizontal tab-scroll and vertical page-scroll. The browser
	   picks direction from the initial finger movement, so a vertical swipe
	   that happens to start on the tabs still scrolls the page. */
	touch-action: pan-x pan-y;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
.tgp-tabs__nav::-webkit-scrollbar { display: none; }

.tgp-page .tgp-tabs__btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 14px 18px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--tgp-text-3) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	margin-bottom: -1px !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
	min-height: 0 !important;
	transition: color 0.15s ease, border-color 0.15s ease !important;
}
.tgp-page .tgp-tabs__btn:hover { color: var(--tgp-text-2) !important; }
.tgp-page .tgp-tabs__btn.is-active {
	color: var(--tgp-text) !important;
	border-bottom-color: var(--tgp-violet) !important;
}
.tgp-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	background: var(--tgp-violet-soft);
	color: var(--tgp-violet);
	border-radius: 999px;
	font-weight: 600;
}

.tgp-tabs__panel { display: none; }
.tgp-tabs__panel.is-active { display: block; animation: tgp-fade 0.2s ease; }
@keyframes tgp-fade {
	from { opacity: 0; transform: translateY(2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Prose --- */
.tgp-prose {
	max-width: 720px;
	color: var(--tgp-text-2);
	font-size: 15px;
	line-height: 1.7;
}
.tgp-prose p { margin: 0 0 14px; }
.tgp-prose a { color: var(--tgp-violet); }

/* --- Specs --- */
.tgp-specs { margin: 0; max-width: 640px; }
.tgp-specs__row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tgp-line);
}
.tgp-specs__row:last-child { border-bottom: 0; }
.tgp-specs__row dt { margin: 0; font-size: 13px; color: var(--tgp-text-3); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.tgp-specs__row dd { margin: 0; font-size: 14px; color: var(--tgp-text); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tgp-specs__row dd a { color: var(--tgp-violet); text-decoration: none; }
.tgp-specs__row dd a:hover { text-decoration: underline; }

/* DAW group — parent row + indented sub-rows */
.tgp-specs__group { border-bottom: 1px solid var(--tgp-line); }
.tgp-specs__group .tgp-specs__row { border-bottom: 0; }
.tgp-specs__group .tgp-specs__row--parent { padding-bottom: 8px; }
.tgp-specs__group .tgp-specs__row--parent dt { color: var(--tgp-text-2); font-weight: 600; }
.tgp-specs__group-icon { color: var(--tgp-text-3); flex-shrink: 0; }
.tgp-specs__row--sub {
	padding: 5px 0 5px 16px;
	position: relative;
}
.tgp-specs__row--sub::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--tgp-line);
}
.tgp-specs__row--sub:last-child { padding-bottom: 12px; }
.tgp-specs__row--sub dt { font-size: 12px; color: var(--tgp-text-4); }
.tgp-specs__row--sub dd { font-size: 13px; color: var(--tgp-text-2); font-weight: 400; }
.tgp-specs__plugins { font-size: 12px !important; line-height: 1.5; }

/* Instrumental type badges */
.tgp-specs__instr-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid;
	line-height: 1.6;
}
.tgp-specs__instr-badge--green {
	color: var(--tgp-good);
	border-color: rgba(110, 231, 183, 0.35);
	background: rgba(110, 231, 183, 0.07);
}
.tgp-specs__instr-badge--amber {
	color: #fbbf24;
	border-color: rgba(251, 191, 36, 0.35);
	background: rgba(251, 191, 36, 0.07);
}

/* Tooltip — CSS-only, positioned above the trigger */
.tgp-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.tgp-tooltip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: default;
	vertical-align: middle;
}
.tgp-tooltip-icon { color: var(--tgp-text-4); flex-shrink: 0; }
.tgp-tooltip-wrap:hover .tgp-tooltip-icon { color: var(--tgp-text-3); }
.tgp-tooltip-wrap::after {
	content: attr(data-tgp-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) scale(0.96);
	background: var(--tgp-surface-3);
	color: var(--tgp-text);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	padding: 7px 11px;
	border-radius: 8px;
	border: 1px solid var(--tgp-line);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 100;
	/* Use the content's natural width up to 260px. Without an explicit
	   width, the absolute pseudo-element gets shrink-to-fit sized against
	   its tiny containing block (the icon wrap) and breaks each word onto
	   its own line. `width: max-content` forces it to be its natural width. */
	width: max-content;
	max-width: 260px;
	white-space: normal;
	word-break: normal;
	overflow-wrap: normal;
	text-align: center;
}
.tgp-tooltip-wrap:hover::after {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

/* --- Lists --- */
.tgp-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 32px;
	max-width: 720px;
}
.tgp-list li {
	font-size: 14px;
	color: var(--tgp-text-2);
	line-height: 1.5;
	padding-left: 24px;
	position: relative;
}
.tgp-list li::before {
	content: "";
	position: absolute;
	left: 0; top: 7px;
	width: 8px; height: 8px;
	border-radius: 2px;
	background: var(--tgp-violet);
	opacity: 0.6;
}
.tgp-list--check li::before {
	left: 0; top: 4px;
	width: 14px; height: 14px;
	background: transparent;
	border-radius: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236ee7b7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-repeat: no-repeat;
	opacity: 1;
}

/* ==========================================================================
   LICENSE — revamped: banner + permission rows
   ========================================================================== */
.tgp-license {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Top banner ── */
.tgp-license__banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: linear-gradient(135deg, rgba(167,139,250,0.10) 0%, rgba(167,139,250,0.03) 60%, transparent 100%);
	border-bottom: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius) var(--tgp-radius) 0 0;
}
.tgp-license__banner-left {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tgp-license__type {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tgp-violet);
	background: rgba(167, 139, 250, 0.12);
	border: 1px solid rgba(167, 139, 250, 0.28);
	padding: 3px 10px;
	border-radius: 999px;
	width: fit-content;
}
.tgp-license__tagline {
	margin: 0;
	font-size: 13px;
	color: var(--tgp-text-2);
	line-height: 1.5;
	max-width: 480px;
}
.tgp-license__banner-right {
	flex-shrink: 0;
	color: var(--tgp-violet);
	opacity: 0.35;
}
.tgp-license__seal-icon { display: block; }

/* ── Permission rows ── */
.tgp-license__perms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.tgp-license-perm {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--tgp-line);
	transition: background 0.15s ease;
}
.tgp-license-perm:nth-child(odd)  { border-right: 1px solid var(--tgp-line); }
/* Bottom row: last two items — remove bottom border */
.tgp-license-perm:nth-last-child(-n+2) { border-bottom: 0; }
/* If last row has only one odd item, also remove its right border */
.tgp-license-perm:last-child:nth-child(odd) { border-right: 0; }
.tgp-license-perm:hover { background: rgba(255, 255, 255, 0.02); }

.tgp-license-perm__check {
	flex-shrink: 0;
	margin-top: 2px;
}
.tgp-license-perm__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tgp-license-perm__body strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--tgp-text);
	letter-spacing: -0.005em;
}
.tgp-license-perm__body span {
	font-size: 11.5px;
	color: var(--tgp-text-3);
	line-height: 1.4;
}

/* Scope tag */
.tgp-license-perm__tag {
	flex-shrink: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--tgp-text-4);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 2px 7px;
	border-radius: 999px;
	white-space: nowrap;
	align-self: flex-start;
	margin-top: 3px;
}
.tgp-license-perm__tag--violet {
	color: var(--tgp-violet);
	background: rgba(167, 139, 250, 0.08);
	border-color: rgba(167, 139, 250, 0.22);
}

/* ── Bottom note ── */
.tgp-license__note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--tgp-text-4);
	padding: 11px 20px;
	border-top: 1px solid var(--tgp-line);
	line-height: 1.5;
}
.tgp-license__note svg { color: var(--tgp-violet); flex-shrink: 0; }

/* Rights-transfer agreement preview row inside the License tab */
.tgp-license__preview {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-top: 1px solid var(--tgp-line);
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.04), rgba(167, 139, 250, 0.01));
}
.tgp-license__preview-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(167, 139, 250, 0.1);
	border: 1px solid rgba(167, 139, 250, 0.22);
	color: var(--tgp-violet);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tgp-license__preview-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.tgp-license__preview-body strong {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.tgp-license__preview-body span {
	font-size: 12px;
	color: var(--tgp-text-3);
	line-height: 1.45;
}
.tgp-page .tgp-license__preview-btn {
	all: unset !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 9px 14px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(167, 139, 250, 0.4) !important;
	background: rgba(167, 139, 250, 0.08) !important;
	color: var(--tgp-violet) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s !important;
	font-family: inherit !important;
	flex-shrink: 0 !important;
}
.tgp-page .tgp-license__preview-btn:hover {
	background: rgba(167, 139, 250, 0.18) !important;
	border-color: rgba(167, 139, 250, 0.6) !important;
	color: #c7b6ff !important;
	transform: translateY(-1px) !important;
}
.tgp-page .tgp-license__preview-btn:active {
	transform: translateY(0) !important;
}
.tgp-page .tgp-license__preview-btn svg { flex-shrink: 0 !important; }

@media (max-width: 540px) {
	.tgp-license__preview {
		flex-wrap: wrap;
		padding: 14px 14px;
		gap: 12px;
	}
	.tgp-license__preview-icon { width: 36px; height: 36px; border-radius: 9px; }
	.tgp-license__preview-icon svg { width: 18px; height: 18px; }
	.tgp-license__preview-body strong { font-size: 13px; }
	.tgp-license__preview-body span   { font-size: 11.5px; }
	.tgp-page .tgp-license__preview-btn {
		flex: 1 0 100% !important;
		justify-content: center !important;
		padding: 10px 14px !important;
	}
}

/* ==========================================================================
   WHAT YOU GET – compact file explorer mockup (no scrolling)
   ========================================================================== */
.tgp-deliverables {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 760px;
}

/* Legal-docs note: explains that the rights-transfer + NDA PDFs are not in the zip */
.tgp-deliverables__docs {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: rgba(167, 139, 250, 0.06);
	border: 1px solid rgba(167, 139, 250, 0.18);
	border-radius: var(--tgp-radius);
}
.tgp-deliverables__docs-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--tgp-violet-soft);
	border: 1px solid rgba(167, 139, 250, 0.28);
	color: var(--tgp-violet);
}
.tgp-deliverables__docs-body { flex: 1; min-width: 0; }
.tgp-deliverables__docs-body strong {
	display: block;
	font-size: 13px;
	color: var(--tgp-text);
	font-weight: 600;
	margin-bottom: 2px;
}
.tgp-deliverables__docs-body p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--tgp-text-3);
}

/* File explorer window mockup */
.tgp-explorer {
	position: relative;
	background: var(--tgp-grad-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius-lg);
	overflow: hidden;
	font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.7);
}
.tgp-explorer::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(167,139,250,0.25), transparent 35%, transparent 65%, rgba(167,139,250,0.18) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

.tgp-explorer__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: var(--tgp-surface-2);
	border-bottom: 1px solid var(--tgp-line);
}
.tgp-explorer__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.tgp-explorer__dot--red    { background: #ff5f56; }
.tgp-explorer__dot--yellow { background: #ffbd2e; }
.tgp-explorer__dot--green  { background: #27c93f; }
.tgp-explorer__path {
	margin-left: 14px;
	font-size: 12px;
	color: var(--tgp-text-2);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tgp-explorer__path svg { color: var(--tgp-amber); flex-shrink: 0; }
.tgp-explorer__chrome-meta {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--tgp-good);
	background: rgba(110, 231, 183, 0.08);
	border: 1px solid rgba(110, 231, 183, 0.25);
	padding: 3px 9px;
	border-radius: 999px;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-weight: 500;
	letter-spacing: 0.01em;
	flex-shrink: 0;
}

.tgp-explorer__body {
	padding: 8px 4px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	background: linear-gradient(180deg, transparent 0%, rgba(167,139,250,0.02) 100%);
}

.tgp-explorer__group {
	padding: 8px 12px 10px;
	border-radius: 8px;
	transition: background 0.18s ease;
}
.tgp-explorer__group:hover { background: rgba(255,255,255,0.015); }

.tgp-explorer__group-head {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 0 8px;
	font-size: 12px;
	color: var(--tgp-text-3);
	border-bottom: 1px dashed var(--tgp-line);
	margin-bottom: 6px;
}
.tgp-explorer__group-head .tgp-fi--folder { color: var(--tgp-amber); flex-shrink: 0; }
.tgp-explorer__group-head strong {
	color: var(--tgp-text);
	font-weight: 600;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
}
.tgp-explorer__count {
	margin-left: auto;
	font-size: 10px;
	color: var(--tgp-text-4);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
	flex-shrink: 0;
}

.tgp-explorer__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.tgp-explorer__group ul li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-size: 12px;
	color: var(--tgp-text-2);
	border-radius: 5px;
	transition: background 0.15s ease, color 0.15s ease;
	min-width: 0;
}
.tgp-explorer__group ul li:hover {
	background: rgba(167,139,250,0.06);
	color: var(--tgp-text);
}
.tgp-explorer__name {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 12px;
}
.tgp-explorer__meta {
	grid-column: 2 / -1;
	font-size: 10px;
	color: var(--tgp-text-4);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.01em;
	white-space: nowrap;
	margin-top: 1px;
}
.tgp-explorer__more {
	display: flex !important;
	align-items: center;
	gap: 8px;
	grid-template-columns: none !important;
	color: var(--tgp-text-3) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif !important;
	font-size: 11px !important;
	padding: 6px 8px !important;
	letter-spacing: 0.02em;
}
.tgp-explorer__more svg {
	color: var(--tgp-violet);
	flex-shrink: 0;
	opacity: 0.85;
}
.tgp-explorer__more:hover { background: transparent !important; color: var(--tgp-text-3) !important; }

/* File-format mini badges */
.tgp-fi-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 18px;
	padding: 0 5px;
	border-radius: 3px;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	border: 1px solid;
	flex-shrink: 0;
}
.tgp-fi-badge--wav   { color: var(--tgp-good);   border-color: rgba(110, 231, 183, 0.4); background: rgba(110, 231, 183, 0.1); }
.tgp-fi-badge--mp3   { color: var(--tgp-info);   border-color: rgba(147, 197, 253, 0.4); background: rgba(147, 197, 253, 0.1); }
.tgp-fi-badge--midi  { color: var(--tgp-amber);  border-color: rgba(251, 191, 36, 0.4);  background: rgba(251, 191, 36, 0.1); }
.tgp-fi-badge--daw   { color: var(--tgp-violet); border-color: rgba(167, 139, 250, 0.45); background: var(--tgp-violet-soft); }
.tgp-fi-badge--pdf   { color: var(--tgp-warn);   border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); }

.tgp-explorer__footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-size: 12px;
	color: var(--tgp-text-3);
	background: var(--tgp-surface-2);
	border-top: 1px solid var(--tgp-line);
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
.tgp-explorer__footer svg { color: var(--tgp-good); }

/* ==========================================================================
   LOOPS – modern card list
   ========================================================================== */
.tgp-loops { margin-top: 28px; }
.tgp-loops__head {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tgp-text-3);
	margin-bottom: 14px;
}
.tgp-loops__head h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tgp-text-3);
}
.tgp-loops__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}
.tgp-loop-card {
	display: grid;
	grid-template-columns: auto 36px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius);
	transition: border-color 0.15s ease, transform 0.15s ease;
	overflow: hidden;
}
.tgp-loop-card:hover {
	border-color: rgba(167, 139, 250, 0.4);
	transform: translateY(-1px);
}
.tgp-loop-card__num {
	font-size: 11px;
	font-weight: 700;
	color: var(--tgp-text-4);
	letter-spacing: 0.06em;
}
.tgp-loop-card__icon {
	width: 36px; height: 36px;
	border-radius: 8px;
	background: var(--tgp-violet-soft);
	color: var(--tgp-violet);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tgp-loop-card__body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.tgp-loop-card__instrument {
	font-size: 11px;
	color: var(--tgp-text-3);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tgp-loop-card__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--tgp-text);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Click-to-copy styling for the loop name button — strip native button chrome,
   keep the title-row look identical, but add a subtle copy icon that appears
   on hover so users know they can click to copy. */
.tgp-page button.tgp-loop-card__name {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--tgp-text);
	line-height: 1.35;
	cursor: pointer;
	border-radius: 6px;
	padding: 1px 4px;
	margin: -1px -4px;
	transition: background 0.15s ease, color 0.15s ease;
}
.tgp-page button.tgp-loop-card__name:hover {
	background: rgba(167, 139, 250, 0.08);
	color: var(--tgp-violet);
}
.tgp-page button.tgp-loop-card__name:focus-visible {
	outline: 2px solid var(--tgp-violet);
	outline-offset: 2px;
	background: rgba(167, 139, 250, 0.08);
}
.tgp-loop-card__name-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.tgp-loop-card__name-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--tgp-text-3);
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.tgp-loop-card__name-copy-icon,
.tgp-loop-card__name-check-icon {
	position: absolute;
}
.tgp-loop-card__name-check-icon { display: none; color: var(--tgp-good); }
.tgp-page button.tgp-loop-card__name:hover .tgp-loop-card__name-copy,
.tgp-page button.tgp-loop-card__name:focus-visible .tgp-loop-card__name-copy {
	opacity: 1;
	color: var(--tgp-violet);
}
.tgp-page button.tgp-loop-card__name.is-copied {
	background: rgba(110, 231, 183, 0.08);
	color: var(--tgp-good);
}
.tgp-page button.tgp-loop-card__name.is-copied .tgp-loop-card__name-copy {
	opacity: 1;
}
.tgp-page button.tgp-loop-card__name.is-copied .tgp-loop-card__name-copy-icon { display: none; }
.tgp-page button.tgp-loop-card__name.is-copied .tgp-loop-card__name-check-icon { display: inline-block; }

/* Plain-text source-pack button (when the value is not a URL) — same low-key
   click-to-copy treatment so producers can grab the name with one tap. */
.tgp-page button.tgp-loop-card__source {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	max-width: 100%;
	font-size: 11px;
	color: var(--tgp-text-3);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 4px;
	padding: 1px 4px;
	margin-left: -4px;
	border-bottom: 1px dashed transparent;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tgp-page button.tgp-loop-card__source:hover,
.tgp-page button.tgp-loop-card__source:focus-visible {
	color: var(--tgp-text-2);
	border-bottom-color: rgba(255, 255, 255, 0.18);
	outline: none;
}
.tgp-page button.tgp-loop-card__source.is-copied {
	color: var(--tgp-good);
	background: rgba(110, 231, 183, 0.08);
	border-bottom-color: transparent;
}
.tgp-loop-card__source {
	font-size: 11px;
	color: var(--tgp-text-3);
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.tgp-loop-card__source--link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	color: var(--tgp-violet);
	text-decoration: none;
	transition: color 0.15s ease;
}
a.tgp-loop-card__source--link svg { flex-shrink: 0; opacity: 0.85; }
a.tgp-loop-card__source--link span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	border-bottom: 1px dashed rgba(167, 139, 250, 0.4);
	transition: border-color 0.15s ease;
}
a.tgp-loop-card__source--link:hover {
	color: #c4b5fd;
}
a.tgp-loop-card__source--link:hover span {
	border-bottom-color: rgba(167, 139, 250, 0.85);
}

/* --- Tags --- */
.tgp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tgp-tags--inline {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--tgp-line);
}
.tgp-tag {
	font-size: 12px;
	color: var(--tgp-text-3);
	border: 1px solid var(--tgp-line);
	padding: 5px 10px;
	border-radius: 999px;
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tgp-tag:hover {
	color: var(--tgp-violet);
	border-color: rgba(167, 139, 250, 0.4);
	background: var(--tgp-violet-soft);
}

/* ==========================================================================
   HOW IT WORKS — compact single-line flow
   ========================================================================== */
/* ==========================================================================
   HOW IT WORKS – horizontal track-timeline (subway-map) visualization
   ========================================================================== */
.tgp-how {
	background: var(--tgp-grad-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius-lg);
	padding: 30px 32px 36px;
	overflow: hidden;
	position: relative;
}
.tgp-how::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: radial-gradient(60% 80% at 0% 0%, rgba(167,139,250,0.06), transparent 60%),
	            radial-gradient(60% 80% at 100% 100%, rgba(110,231,183,0.05), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.tgp-how > * { position: relative; z-index: 1; }

/* Section header */
.tgp-how__head { margin-bottom: 36px; max-width: 640px; }
.tgp-how__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tgp-violet);
	background: rgba(167, 139, 250, 0.1);
	padding: 5px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.tgp-how__title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* The timeline — horizontal gradient track with circular nodes on it */
.tgp-how__timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 28px;
	position: relative;
}
/* The gradient line that runs through all the node centers */
.tgp-how__line {
	position: absolute;
	top: 26px; /* matches the node center (52px node / 2) */
	left: calc(100% / 6);
	right: calc(100% / 6);
	height: 2px;
	background: linear-gradient(to right,
		#60a5fa 0%,
		var(--tgp-violet) 50%,
		var(--tgp-good) 100%
	);
	border-radius: 2px;
	opacity: 0.5;
	pointer-events: none;
}

.tgp-how-stop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.tgp-how-stop--buy     { color: #60a5fa; }
.tgp-how-stop--dl      { color: var(--tgp-violet); }
.tgp-how-stop--release { color: var(--tgp-good); }

/* The "stop" node — a colored circle that sits on the line */
.tgp-how-stop__node {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--tgp-bg);
	border: 2px solid currentColor;
	color: currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 0 0 6px color-mix(in srgb, currentColor 10%, transparent),
		0 0 24px -6px currentColor;
	flex-shrink: 0;
	z-index: 1;
}

.tgp-how-stop__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 280px;
}
.tgp-how-stop__label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: currentColor;
	opacity: 0.85;
}
.tgp-how-stop__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.tgp-how-stop__desc {
	margin: 0;
	font-size: 13px;
	color: var(--tgp-text-3);
	line-height: 1.55;
}

/* Old neutralized styles — keep hidden */
.tgp-how__steps, .tgp-how__subtitle,
.tgp-how-step, .tgp-how-step__top, .tgp-how-step__circle,
.tgp-how-step__body, .tgp-how-step__title, .tgp-how-step__desc, .tgp-how-step__tags,
.tgp-how__rail, .tgp-how-card { display: none !important; }

/* ==========================================================================
   PRODUCER CARD – with services list
   ========================================================================== */
.tgp-producer__card {
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius-lg);
	overflow: hidden;
	box-shadow: 0 0 0 1px transparent;
	transition: box-shadow 0.2s ease;
}
.tgp-producer__card:hover { box-shadow: 0 0 0 1px rgba(167,139,250,0.18); }
.tgp-producer__head {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 16px 20px;
	align-items: center;
	padding: 24px 26px;
}
.tgp-producer__avatar {
	display: block;
	width: 64px; height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tgp-surface-2);
	border: 1px solid rgba(255,255,255,0.06);
}
.tgp-producer__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgp-producer__avatar--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* "No profile image" placeholder — used wherever an avatar would normally
   render (hero byline, producer card) when the vendor has not uploaded one.
   We deliberately skip the Gravatar fallback because it returns the generic
   mystery-person silhouette which feels low-quality for a marketplace. */
.tgp-avatar-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(167, 139, 250, 0.14) 0%, rgba(167, 139, 250, 0.06) 100%);
	border: 1px solid rgba(167, 139, 250, 0.25);
	color: rgba(167, 139, 250, 0.75);
	vertical-align: middle;
}
.tgp-hero__author .tgp-avatar-placeholder {
	background: rgba(167, 139, 250, 0.12);
	border-color: rgba(167, 139, 250, 0.22);
}

.tgp-producer__meta { min-width: 0; }
.tgp-producer__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--tgp-text);
	margin-bottom: 6px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.tgp-producer__name a { color: var(--tgp-text); text-decoration: none; }
.tgp-producer__name a:hover { text-decoration: underline; }
.tgp-producer__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 13px;
	color: var(--tgp-text-3);
	line-height: 1.4;
}
.tgp-producer__stats > span:not(.tgp-pill):not(.tgp-producer__stats-sep) {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.tgp-producer__stats strong { color: var(--tgp-text); font-weight: 600; }
.tgp-producer__stats-sep { color: var(--tgp-text-4); user-select: none; }

/* Vendor rating — sits inline with the producer name like a verification
   credential. Stars + numeric value, no card/pill background. */
.tgp-producer__rating {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--tgp-text-2) !important;
	line-height: 1 !important;
	letter-spacing: -0.005em;
}
.tgp-producer__rating-stars {
	position: relative;
	display: inline-flex;
	height: 13px;
	line-height: 0;
}
.tgp-producer__rating-stars-bg,
.tgp-producer__rating-stars-fill {
	display: inline-flex;
	gap: 1px;
	overflow: hidden;
	white-space: nowrap;
}
.tgp-producer__rating-stars-bg {
	color: rgba(251, 191, 36, 0.22);
}
.tgp-producer__rating-stars-fill {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--tgp-amber);
	width: 0;
}
.tgp-producer__rating strong {
	color: var(--tgp-amber);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	font-size: 12px;
}
.tgp-producer__rating-count {
	color: var(--tgp-text-3);
	font-size: 12.5px;
	font-weight: 500;
}
.tgp-producer__actions { display: flex; gap: 8px; align-self: center; }
.tgp-producer__actions .tgp-btn {
	padding: 10px 18px !important;
	min-height: 40px !important;
	white-space: nowrap !important;
}

/* Follow button — sits next to "View profile". Reuses .tgp-btn--ghost.
   The marketking_follow_button class is what the MarketKing public.js
   delegate listener hooks into, so do NOT remove it. */
.tgp-page button.tgp-producer__follow,
.tgp-page a.tgp-producer__follow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	transition: background 0.18s, border-color 0.18s, color 0.18s !important;
}
.tgp-page .tgp-producer__follow .tgp-producer__follow-icon { flex-shrink: 0; }
.tgp-page .tgp-producer__follow .tgp-producer__follow-icon--check { display: none; }

/* Following state — soft violet tint */
.tgp-page .tgp-producer__follow.is-following {
	background: rgba(167, 139, 250, 0.1) !important;
	border-color: rgba(167, 139, 250, 0.4) !important;
	color: var(--tgp-violet) !important;
}
.tgp-page .tgp-producer__follow.is-following .tgp-producer__follow-icon--add { display: none; }
.tgp-page .tgp-producer__follow.is-following .tgp-producer__follow-icon--check { display: inline-block; }
.tgp-page .tgp-producer__follow.is-following:hover {
	background: rgba(248, 113, 113, 0.1) !important;
	border-color: rgba(248, 113, 113, 0.4) !important;
	color: #f87171 !important;
}
/* On hover while following — show "Unfollow" + X to signal click effect */
.tgp-page .tgp-producer__follow.is-following:hover .tgp-producer__follow-label::after {
	content: 'Unfollow';
	position: absolute;
}
.tgp-page .tgp-producer__follow.is-following .tgp-producer__follow-label { position: relative; }
.tgp-page .tgp-producer__follow.is-following:hover .tgp-producer__follow-label {
	color: transparent;
}
.tgp-page .tgp-producer__follow.is-following:hover .tgp-producer__follow-label::after {
	color: #f87171;
	left: 0;
}

/* Loading spinner — replaces label while AJAX in flight */
.tgp-page .tgp-producer__follow.is-loading {
	color: transparent !important;
	pointer-events: none !important;
	position: relative !important;
}
.tgp-page .tgp-producer__follow.is-loading::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--tgp-text);
	animation: tgp-follow-spin 0.7s linear infinite;
}
@keyframes tgp-follow-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   PRODUCER REVIEWS — editorial ticker
   Two rows of inline review-quotes flowing in opposite directions. No cards,
   no boxes — just typography. Pure CSS marquee, paused on hover.
   ========================================================================== */
.tgp-prev-reviews {
	margin-top: 18px;
}
.tgp-prev-reviews__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 16px;
	margin-bottom: 14px;
}
.tgp-prev-reviews__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tgp-violet);
	margin-bottom: 6px;
}
.tgp-prev-reviews__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--tgp-text);
	line-height: 1.3;
}
.tgp-prev-reviews__name { color: var(--tgp-text); }
.tgp-prev-reviews__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tgp-text-3);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, gap 0.15s ease;
	flex-shrink: 0;
}
.tgp-prev-reviews__more:hover { color: var(--tgp-violet); gap: 9px; }

/* The viewport contains both rows and applies the side-fade mask. */
.tgp-prev-reviews__viewport {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 0;
	mask-image: linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}

/* Each row is its own clipping window with its own marquee animation. The
   two rows scroll in opposite directions for a subtle parallax-y feel. */
.tgp-prev-reviews__row {
	overflow: hidden;
}
.tgp-prev-reviews__track {
	display: inline-flex;
	align-items: center;
	gap: 22px;
	width: max-content;
	padding: 6px 0;
	will-change: transform;
}
.tgp-prev-reviews__row--ltr .tgp-prev-reviews__track {
	animation: tgp-prev-reviews-marquee-ltr 90s linear infinite;
}
.tgp-prev-reviews__row--rtl .tgp-prev-reviews__track {
	animation: tgp-prev-reviews-marquee-rtl 75s linear infinite;
}
.tgp-prev-reviews__viewport:hover .tgp-prev-reviews__track,
.tgp-prev-reviews__viewport:focus-within .tgp-prev-reviews__track {
	animation-play-state: paused;
}
@keyframes tgp-prev-reviews-marquee-ltr {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes tgp-prev-reviews-marquee-rtl {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.tgp-prev-reviews__row--ltr .tgp-prev-reviews__track,
	.tgp-prev-reviews__row--rtl .tgp-prev-reviews__track { animation: none; }
}

/* ─── Inline review line ─── */
.tgp-prev-reviews__line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--tgp-text-2);
	white-space: nowrap;
	transition: color 0.18s ease;
}
.tgp-prev-reviews__line:hover { color: var(--tgp-text); }

/* Faint vertical hairline between reviews — replaces the bullet/dot. */
.tgp-prev-reviews__sep {
	flex-shrink: 0;
	width: 1px;
	height: 14px;
	background: linear-gradient(to bottom, transparent, rgba(167, 139, 250, 0.32), transparent);
	display: inline-block;
}

.tgp-prev-reviews__stars {
	position: relative;
	display: inline-flex;
	width: max-content;
	line-height: 0;
	color: rgba(255, 255, 255, 0.14);
	flex-shrink: 0;
}
.tgp-prev-reviews__stars-bg { display: inline-flex; gap: 1px; }
.tgp-prev-reviews__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	gap: 1px;
	overflow: hidden;
	color: #fbbf24;
	white-space: nowrap;
}

/* Editorial-style quote with real curly quotation marks via the <q> element.
   Italic display gives it that "this is something they said" cadence rather
   than a generic UI label. */
.tgp-prev-reviews__quote {
	font-style: italic;
	font-weight: 400;
	color: var(--tgp-text);
	letter-spacing: -0.005em;
	quotes: "\201C" "\201D";
	max-width: 60ch;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tgp-prev-reviews__quote::before { content: open-quote; opacity: 0.5; margin-right: 1px; }
.tgp-prev-reviews__quote::after  { content: close-quote; opacity: 0.5; margin-left: 1px; }

.tgp-prev-reviews__byline {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--tgp-text-4);
	flex-shrink: 0;
}
.tgp-prev-reviews__dash {
	color: var(--tgp-text-4);
	opacity: 0.55;
}
.tgp-prev-reviews__author {
	color: var(--tgp-text-3);
	font-weight: 500;
}
.tgp-prev-reviews__tag {
	color: rgba(167, 139, 250, 0.95);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease;
}
.tgp-prev-reviews__tag:hover { color: #fff; }

/* ─── "Hire this producer" panel — analog console aesthetic ─── */
.tgp-hire {
	position: relative;
	padding: 24px 26px 24px;
	border-top: 1px solid var(--tgp-line);
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(167, 139, 250, 0.07), transparent 55%),
		radial-gradient(120% 100% at 100% 100%, rgba(110, 231, 183, 0.04), transparent 55%);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
/* Subtle horizontal accent line at the top — like a fader rail */
.tgp-hire::before {
	content: '';
	position: absolute;
	left: 26px;
	right: 26px;
	top: -1px;
	height: 1px;
	background: linear-gradient(to right,
		transparent 0%,
		rgba(167, 139, 250, 0.45) 30%,
		rgba(167, 139, 250, 0.45) 70%,
		transparent 100%);
}

.tgp-hire__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tgp-hire__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

/* Availability badge — clean green pill with one pulsing live dot. */
.tgp-hire__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
	background: rgba(110, 231, 183, 0.1);
	border: 1px solid rgba(110, 231, 183, 0.3);
	color: var(--tgp-good);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1;
}
.tgp-hire__badge-pulse {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
}
.tgp-hire__badge-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tgp-good);
	z-index: 2;
}
.tgp-hire__badge-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--tgp-good);
	opacity: 0;
	animation: tgp-hire-pulse 2.2s ease-out infinite;
}
.tgp-hire__badge-label {
	white-space: nowrap;
}
@keyframes tgp-hire-pulse {
	0%   { transform: scale(0.5); opacity: 0.7; }
	80%  { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}

.tgp-hire__title {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--tgp-text-2);
	letter-spacing: -0.015em;
	line-height: 1.35;
}
.tgp-hire__title strong { color: var(--tgp-text); font-weight: 600; }

.tgp-hire__types {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tgp-hire__types li {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tgp-text-2);
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--tgp-line);
	padding: 7px 13px;
	border-radius: 999px;
	letter-spacing: 0.005em;
	white-space: nowrap;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tgp-hire__types li:hover {
	border-color: rgba(167, 139, 250, 0.45);
	background: rgba(167, 139, 250, 0.06);
	color: var(--tgp-text);
}
/* Icons removed for a cleaner pill look — keep style hidden in case markup
   ever brings them back, so they don't render mid-text. */
.tgp-hire__type-icon { display: none !important; }

.tgp-hire__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Price block — two-line stack: label on top, price emphasised below */
.tgp-hire__from {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.2;
}
.tgp-hire__from-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--tgp-text-4);
}
.tgp-hire__from-price {
	font-size: 17px;
	font-weight: 600;
	color: var(--tgp-text);
	letter-spacing: -0.015em;
	line-height: 1;
}
.tgp-hire__from-price .woocommerce-Price-amount,
.tgp-hire__from-price bdi { color: inherit; font-size: inherit; font-weight: inherit; }

/* Simple CTA — clean violet gradient pill with one arrow icon. No glows, no shimmer. */
.tgp-page .tgp-hire__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 10px 18px !important;
	min-height: 40px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, #a78bfa 0%, #7c4ef0 100%) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background 0.18s ease, filter 0.18s ease, transform 0.18s ease !important;
	flex-shrink: 0;
}
.tgp-hire__cta-label { white-space: nowrap; }
.tgp-hire__cta-arrow {
	flex-shrink: 0;
	transition: transform 0.18s ease;
}
.tgp-page .tgp-hire__cta:hover {
	background: linear-gradient(135deg, #b79dfe 0%, #6e3ee0 100%) !important;
	filter: brightness(1.05) !important;
	transform: none !important;
	box-shadow: none !important;
}
.tgp-page .tgp-hire__cta:hover .tgp-hire__cta-arrow {
	transform: translateX(2px);
}
.tgp-page .tgp-hire__cta:active {
	background: linear-gradient(135deg, #8b5cf6 0%, #6e3ee0 100%) !important;
	filter: none !important;
}
.tgp-page .tgp-hire__cta:focus-visible {
	outline: 2px solid var(--tgp-violet) !important;
	outline-offset: 2px !important;
}

/* Hide old card-based services list (kept in HTML for safety) */
.tgp-producer__services {
	border-top: 1px solid var(--tgp-line);
	padding: 18px 22px 20px;
	background: linear-gradient(180deg, rgba(167,139,250,0.025) 0%, var(--tgp-surface-2) 100%);
	display: none !important;
}
.tgp-producer__services > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}
.tgp-producer__services-title {
	display: flex;
	align-items: center;
	gap: 12px;
}
.tgp-producer__services-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(167, 139, 250, 0.06));
	border: 1px solid rgba(167, 139, 250, 0.24);
	color: var(--tgp-violet);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tgp-producer__services h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.tgp-producer__services-title p {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--tgp-text-3);
	line-height: 1.3;
}
.tgp-page .tgp-producer__services-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tgp-violet);
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 0;
	transition: color 0.15s, transform 0.15s;
}
.tgp-page .tgp-producer__services-all:hover {
	color: #b79dfe;
	text-decoration: none;
}
.tgp-page .tgp-producer__services-all svg { transition: transform 0.15s; }
.tgp-page .tgp-producer__services-all:hover svg { transform: translateX(2px); }
.tgp-producer__service-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
}
.tgp-producer__service-list a {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius);
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
/* old .tgp-producer__service-list a styles — replaced by .tgp-svc-card */
.tgp-producer__service-list a:not(.tgp-svc-card) { display: none; }

/* Service cards — icon + type + description + price */
.tgp-svc-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
	position: relative;
}
.tgp-svc-card:hover {
	border-color: rgba(167, 139, 250, 0.45);
	background: rgba(167, 139, 250, 0.04);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px -8px rgba(167, 139, 250, 0.25);
}
.tgp-svc-card__icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	flex-shrink: 0;
	background: rgba(167, 139, 250, 0.1);
	color: var(--tgp-violet);
	border: 1px solid rgba(167, 139, 250, 0.2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.tgp-svc-card:hover .tgp-svc-card__icon {
	background: rgba(167, 139, 250, 0.18);
	border-color: rgba(167, 139, 250, 0.4);
	transform: scale(1.05);
}
/* Different accent per category (subtle hue shift) */
.tgp-svc-card--remix    .tgp-svc-card__icon { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.22); }
.tgp-svc-card--mix      .tgp-svc-card__icon { background: rgba(110,231,183,0.1); color: var(--tgp-good); border-color: rgba(110,231,183,0.22); }
.tgp-svc-card--master   .tgp-svc-card__icon { background: rgba(252,211,77,0.1); color: #fcd34d; border-color: rgba(252,211,77,0.22); }
.tgp-svc-card--vocal    .tgp-svc-card__icon { background: rgba(244,114,182,0.1); color: #f472b6; border-color: rgba(244,114,182,0.22); }
.tgp-svc-card--coprod   .tgp-svc-card__icon { background: rgba(56,189,248,0.1); color: #38bdf8; border-color: rgba(56,189,248,0.22); }

.tgp-svc-card__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* Hide anything WooCommerce injects that isn't our own elements */
.tgp-svc-card__body > *:not(.tgp-svc-card__type):not(.tgp-svc-card__desc) { display: none !important; }
.tgp-svc-card__type {
	font-size: 14px;
	font-weight: 700;
	color: var(--tgp-text);
	line-height: 1.25;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tgp-svc-card__desc {
	font-size: 12px;
	color: var(--tgp-text-3);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tgp-svc-card__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.tgp-svc-card__price {
	font-size: 13px;
	font-weight: 700;
	color: var(--tgp-violet);
	white-space: nowrap;
}
.tgp-svc-card__price .woocommerce-Price-amount { color: inherit; }
.tgp-svc-card__price del { display: none; }
.tgp-svc-card__price ins { text-decoration: none; background: transparent; }
.tgp-svc-card__arrow { color: var(--tgp-text-4); transition: color 0.15s, transform 0.15s; flex-shrink: 0; }
.tgp-svc-card:hover .tgp-svc-card__arrow { color: var(--tgp-violet); transform: translateX(3px); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.tgp-reviews__body { font-size: 14px; }
.tgp-reviews__body .ivole-fp-name,
.tgp-reviews__body .ivole-fp-text { color: var(--tgp-text-2); }

/* ==========================================================================
   FAQ — single-open accordion
   ========================================================================== */
.tgp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tgp-faq__list details {
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	overflow: hidden;
}
.tgp-faq__list details:hover { border-color: var(--tgp-line-strong); }
.tgp-faq__list details[open] {
	border-color: rgba(167, 139, 250, 0.35);
	box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.1) inset;
}
.tgp-faq__list summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tgp-text);
}
.tgp-faq__list summary::-webkit-details-marker { display: none; }
.tgp-faq__list summary::after {
	content: "";
	width: 14px; height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238a8d97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 14px 14px;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.tgp-faq__list details[open] summary::after { transform: rotate(180deg); }
.tgp-faq__list details > p {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 14px;
	color: var(--tgp-text-2);
	line-height: 1.65;
}

/* ==========================================================================
   BIG CTA – with cover backdrop
   ========================================================================== */
.tgp-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 32px 36px;
	background:
		radial-gradient(ellipse 80% 120% at 0% 0%, rgba(167, 139, 250, 0.10) 0%, transparent 60%),
		var(--tgp-surface);
	border: 1px solid var(--tgp-line);
	border-radius: var(--tgp-radius-xl);
	overflow: hidden;
}
.tgp-cta::before { display: none; }
.tgp-cta__bg { display: none; }
.tgp-cta__content { position: relative; z-index: 1; }
.tgp-cta .tgp-btn { position: relative; z-index: 1; }
.tgp-cta h2 {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--tgp-text);
}
.tgp-cta p { margin: 0; font-size: 14px; color: var(--tgp-text-2); }

/* ==========================================================================
   HELP / SUPPORT — subtle inline link row below the big CTA
   ========================================================================== */
.tgp-help-line {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--tgp-text-4);
	line-height: 1.6;
	text-align: center;
}
.tgp-help-line__lead {
	color: var(--tgp-text-3);
	margin-right: 6px;
}
.tgp-help-line__sep {
	display: inline-block;
	margin: 0 8px;
	color: var(--tgp-text-4);
	opacity: 0.6;
}
.tgp-page a.tgp-help-line__link,
.tgp-page button.tgp-help-line__link,
.tgp-help-line__link {
	all: unset;
	box-sizing: border-box;
	display: inline;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--tgp-text-2);
	cursor: pointer;
	border-bottom: 1px dashed transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.tgp-page a.tgp-help-line__link:hover,
.tgp-page button.tgp-help-line__link:hover,
.tgp-help-line__link:hover {
	color: var(--tgp-violet);
	border-bottom-color: rgba(167, 139, 250, 0.5);
}
.tgp-page a.tgp-help-line__link:focus-visible,
.tgp-page button.tgp-help-line__link:focus-visible {
	outline: 2px solid var(--tgp-violet);
	outline-offset: 3px;
	border-radius: 2px;
}
.tgp-page button.tgp-help-line__link--report:hover,
.tgp-help-line__link--report:hover {
	color: var(--tgp-warn);
	border-bottom-color: rgba(255, 107, 107, 0.5);
}

@media (max-width: 640px) {
	.tgp-help-line { font-size: 12.5px; }
	.tgp-help-line__sep { margin: 0 6px; }
}

/* ==========================================================================
   REPORT TRACK MODAL — body-portaled, centered
   ========================================================================== */
.tgp-report-modal,
body .tgp-report-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999998 !important;
	display: none;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	background: rgba(6, 6, 10, 0.82) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	animation: tgp-report-fade 0.2s ease;
}
.tgp-report-modal.is-open,
body .tgp-report-modal.is-open { display: flex !important; }
@keyframes tgp-report-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tgp-report-pop  { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

.tgp-report-modal__panel {
	width: 100%;
	max-width: 480px;
	background-color: #15151b;
	background-image: linear-gradient(180deg, #1a1a22 0%, #111116 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	animation: tgp-report-pop 0.22s ease;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 40px);
}
.tgp-report-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 22px 14px;
}
.tgp-report-modal__head-text { flex: 1 1 0; min-width: 0; }
.tgp-report-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
}
.tgp-report-modal__sub {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--tgp-text-3);
	line-height: 1.5;
}
html body .tgp-report-modal button.tgp-report-modal__close {
	all: unset !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	color: var(--tgp-text-3) !important;
	border: 1px solid var(--tgp-line) !important;
	cursor: pointer !important;
	transition: background 0.15s, color 0.15s, border-color 0.15s !important;
	flex-shrink: 0 !important;
}
html body .tgp-report-modal button.tgp-report-modal__close:hover {
	background: var(--tgp-surface-2) !important;
	color: var(--tgp-text) !important;
	border-color: var(--tgp-line-strong) !important;
}

.tgp-report-modal__body {
	padding: 4px 22px 4px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.tgp-report-modal__label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--tgp-text-3);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 6px 0 8px;
}
.tgp-report-modal__label--top { margin-top: 18px; }

.tgp-report-modal__reasons {
	display: grid;
	gap: 6px;
}
.tgp-report-modal__reason {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--tgp-line);
	border-radius: 10px;
	background: var(--tgp-surface-2);
	cursor: pointer;
	font-size: 13px;
	color: var(--tgp-text-2);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tgp-report-modal__reason:hover {
	background: rgba(167, 139, 250, 0.05);
	border-color: rgba(167, 139, 250, 0.3);
	color: var(--tgp-text);
}
.tgp-report-modal__reason input[type="radio"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--tgp-violet);
}
.tgp-report-modal__reason input[type="radio"]:checked + span {
	color: var(--tgp-text);
	font-weight: 600;
}

html body .tgp-report-modal textarea.tgp-report-modal__textarea {
	all: unset !important;
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	min-height: 96px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--tgp-line) !important;
	border-radius: 10px !important;
	background: var(--tgp-surface-2) !important;
	color: var(--tgp-text) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	resize: vertical !important;
	transition: border-color 0.15s, background 0.15s !important;
}
html body .tgp-report-modal textarea.tgp-report-modal__textarea:focus {
	border-color: rgba(167, 139, 250, 0.55) !important;
	background: rgba(167, 139, 250, 0.04) !important;
	outline: none !important;
}
html body .tgp-report-modal textarea.tgp-report-modal__textarea::placeholder {
	color: var(--tgp-text-4) !important;
}
.tgp-report-modal__hint {
	margin: 10px 0 0;
	font-size: 11.5px;
	color: var(--tgp-text-4);
	line-height: 1.5;
}

.tgp-report-modal__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 18px 22px 22px;
	border-top: 1px solid var(--tgp-line);
	margin-top: 16px;
}
html body .tgp-report-modal button.tgp-report-modal__cancel,
html body .tgp-report-modal button.tgp-report-modal__submit {
	all: unset !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 10px 18px !important;
	min-height: 40px !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
html body .tgp-report-modal button.tgp-report-modal__cancel {
	background: transparent !important;
	color: var(--tgp-text-2) !important;
	border: 1px solid var(--tgp-line) !important;
}
html body .tgp-report-modal button.tgp-report-modal__cancel:hover {
	background: var(--tgp-surface-2) !important;
	color: var(--tgp-text) !important;
	border-color: var(--tgp-line-strong) !important;
}
html body .tgp-report-modal button.tgp-report-modal__submit {
	background: var(--tgp-warn) !important;
	color: #1a0606 !important;
	border: 0 !important;
}
html body .tgp-report-modal button.tgp-report-modal__submit:hover {
	background: #ff8585 !important;
}
html body .tgp-report-modal button.tgp-report-modal__submit:disabled {
	opacity: 0.7 !important;
	cursor: progress !important;
}
.tgp-report-modal__submit-spinner {
	display: none;
	animation: tgp-report-spin 0.9s linear infinite;
}
.tgp-report-modal.is-loading .tgp-report-modal__submit-spinner { display: inline-block; }
.tgp-report-modal.is-loading .tgp-report-modal__submit-label { opacity: 0.7; }
@keyframes tgp-report-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
	.tgp-report-modal__head { padding: 18px 18px 12px; }
	.tgp-report-modal__body { padding: 4px 18px; }
	.tgp-report-modal__foot { padding: 14px 18px 18px; flex-direction: column-reverse; align-items: stretch; }
	html body .tgp-report-modal button.tgp-report-modal__cancel,
	html body .tgp-report-modal button.tgp-report-modal__submit { width: 100% !important; }
}

/* ==========================================================================
   RELATED – hide Sonaar pagination
   ========================================================================== */
.tgp-related {
	display: flex;
	flex-direction: column;
	gap: 56px;
	margin-top: 8px;
}
.tgp-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 16px;
}
.tgp-related__head h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--tgp-text);
	letter-spacing: -0.01em;
}

/* Hide every kind of pagination / page nav inside our related carousels */
.tgp-related .srp_pagination_container,
.tgp-related .pagination,
.tgp-related .navigation,
.tgp-related .sr_it-pagination,
.tgp-related .sr-pagination,
.tgp-related .nav-links,
.tgp-related ul.page-numbers,
.tgp-related [class*="pagination"]:not([class*="container"][class*="hidden"]),
.tgp-related [class*="page-numbers"] {
	display: none !important;
}

.tgp-related__mobile { display: none; }
@media (max-width: 880px) {
	.tgp-related__desktop { display: none !important; }
	.tgp-related__mobile  { display: block; }
}

/* ==========================================================================
   STICKY BOTTOM BUY BAR
   ========================================================================== */
/* .tgp-stickybar removed — Sonaar's own sticky player is used instead */
.tgp-stickybar { display: none !important; }
.tgp-stickybar__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 12px 24px;
	display: grid;
	grid-template-columns: 44px 1fr auto auto;
	gap: 16px;
	align-items: center;
}
.tgp-stickybar__cover {
	width: 44px; height: 44px;
	border-radius: 6px;
	object-fit: cover;
	display: block;
}
.tgp-stickybar__meta { min-width: 0; }
.tgp-stickybar__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--tgp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tgp-stickybar__author {
	font-size: 12px;
	color: var(--tgp-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tgp-stickybar__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--tgp-text);
	white-space: nowrap;
}
.tgp-stickybar__price .woocommerce-Price-amount { color: var(--tgp-text); }
.tgp-stickybar__price del { display: none; }
.tgp-stickybar__price ins { text-decoration: none; background: transparent; }
.tgp-stickybar .tgp-btn { padding: 10px 18px !important; min-height: 40px !important; }

/* ==========================================================================
   TOAST
   ========================================================================== */
.tgp-toast {
	position: fixed;
	bottom: 96px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--tgp-text);
	color: var(--tgp-accent-ink);
	padding: 10px 16px;
	border-radius: var(--tgp-radius);
	font-size: 13px;
	font-weight: 500;
	/* Max-int z-index so toasts always render above every modal we ship
	   (report, share, popup-login). Otherwise validation errors thrown
	   while a modal is open would render behind the modal backdrop. */
	z-index: 2147483647;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.tgp-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
	.tgp-trust-badges { gap: 24px 36px; }
	.tgp-explorer__body { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
	/* Top spacing so the breadcrumb doesn't sit flush against the header. */
	.tgp-page { padding: 36px 18px 0; gap: 24px; }

	.tgp-hero__inner {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 22px 22px;
	}
	.tgp-hero__cover {
		width: 100%;
		max-width: 320px;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.tgp-hero__buy {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	.tgp-hero__price { align-items: flex-start; }

	.tgp-specs__row { grid-template-columns: 140px 1fr; gap: 16px; }
	.tgp-list { grid-template-columns: 1fr; }


	/* how-it-works: switch to vertical timeline on tablet */
	.tgp-how { padding: 24px 22px 26px; }
	.tgp-how__head { margin-bottom: 24px; }
	.tgp-how__timeline {
		grid-template-columns: 52px 1fr;
		gap: 20px 16px;
		padding-left: 4px;
	}
	.tgp-how__line {
		top: 30px;
		bottom: 30px;
		left: 30px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(to bottom,
			#60a5fa 0%,
			var(--tgp-violet) 50%,
			var(--tgp-good) 100%);
	}
	.tgp-how-stop {
		display: contents;
		text-align: left;
	}
	.tgp-how-stop__node {
		grid-column: 1;
		align-self: start;
	}
	.tgp-how-stop__content {
		grid-column: 2;
		align-items: flex-start;
		max-width: none;
		padding-top: 4px;
	}

	.tgp-producer__head {
		grid-template-columns: 56px 1fr;
		gap: 16px 16px;
		padding: 22px 20px 20px;
	}
	.tgp-producer__avatar { width: 56px; height: 56px; }
	.tgp-producer__meta { grid-column: 2; align-self: center; }
	.tgp-producer__actions {
		grid-column: 1 / -1;
		gap: 8px;
		margin-top: 4px;
	}
	.tgp-producer__actions .tgp-btn {
		flex: 1;
		padding: 11px 14px !important;
		min-height: 42px !important;
		font-size: 13px !important;
		justify-content: center !important;
	}
	.tgp-producer__services { padding: 14px 18px 16px; }
	.tgp-producer__service-list { grid-template-columns: 1fr; gap: 8px; }

	.tgp-cta { flex-direction: column; align-items: stretch; padding: 24px; text-align: left; }
	.tgp-cta .tgp-btn { width: 100% !important; }
}

@media (max-width: 640px) {
	.tgp-page { padding: 32px 14px 0; gap: 22px; }
	.tgp-hero__title { font-size: 26px; }
	.tgp-hero__buy { flex-direction: column; align-items: stretch; }
	.tgp-hero__buy .tgp-btn { width: 100% !important; }
	/* On mobile: button label shows only the current price (no "Add to cart"
	   text). The strike-through old price + savings pill stay in the
	   .tgp-hero__price block ABOVE the button — same hierarchy as desktop. */
	.tgp-page .tgp-hero__buy .tgp-btn .tgp-btn__label-text,
	.tgp-page .tgp-hero__buy .tgp-btn .tgp-btn__mobile-saving { display: none !important; }
	/* Hide the duplicate "current price" inside .tgp-hero__price — the button
	   carries it on mobile. Old price + savings stay visible. */
	.tgp-hero__price .tgp-hero__price-current { display: none !important; }
	.tgp-hero__price {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px 10px;
		padding: 0 0 4px;
		text-align: center;
	}
	.tgp-hero__price-old {
		font-size: 14px !important;
		color: var(--tgp-text-3) !important;
		text-decoration: line-through !important;
		opacity: 0.85;
	}
	.tgp-hero__price-saving {
		display: inline-flex !important;
		align-items: center;
		font-size: 11.5px !important;
		font-weight: 600;
		letter-spacing: 0.01em;
		padding: 3px 9px !important;
		border-radius: 999px !important;
		background: rgba(110, 231, 183, 0.16) !important;
		color: var(--tgp-good) !important;
	}
	.tgp-btn__mobile-price {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-weight: 700 !important;
		font-size: 16px !important;
		letter-spacing: -0.01em !important;
		opacity: 1 !important;
		margin: 0 !important;
	}
	.tgp-btn.added .tgp-btn__mobile-price,
	.tgp-btn.loading .tgp-btn__mobile-price { display: none !important; }
	/* Single-line button (just price) — comfortable tap target */
	.tgp-page .tgp-hero__buy .tgp-add-to-cart {
		min-height: 48px !important;
	}
	.tgp-hero__inner { padding: 18px; }
	.tgp-hero__cover { max-width: 100%; }
	.tgp-player-wrap--inhero { padding: 12px 18px; }

	/* Wishlist + share — show overlaid on cover, hide bottom toolbar to avoid duplication */
	.tgp-cover-actions { display: inline-flex !important; }
	.tgp-hero__toolbar { display: none !important; }

	.tgp-how { padding: 20px 18px 22px; }
	.tgp-how__head { margin-bottom: 20px; }
	.tgp-how__title { font-size: 19px; }
	.tgp-how__timeline { grid-template-columns: 44px 1fr; gap: 16px 14px; }
	.tgp-how__line { top: 26px; bottom: 26px; left: 25px; }
	.tgp-how-stop__node { width: 44px; height: 44px; }
	.tgp-how-stop__node svg { width: 18px; height: 18px; }
	.tgp-how-stop__title { font-size: 15px; }
	.tgp-how-stop__desc  { font-size: 12.5px; }

	/* Producer: compact mobile with proper breathing room */
	.tgp-producer__card { border-radius: 14px; }
	.tgp-producer__head {
		grid-template-columns: 52px 1fr;
		gap: 14px 14px;
		padding: 20px 18px;
	}
	.tgp-producer__avatar {
		width: 52px; height: 52px;
		grid-row: 1;
		grid-column: 1;
	}
	.tgp-producer__meta {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}
	.tgp-producer__name {
		font-size: 15px;
		margin-bottom: 6px;
		gap: 5px 8px;
	}
	.tgp-producer__rating {
		font-size: 11.5px !important;
	}
	.tgp-producer__rating strong { font-size: 11.5px; }
	/* Shrink only the inner star icons — NOT the .tgp-producer__rating-stars
	   container, otherwise all 5 stars get squeezed into 11px wide and render
	   as truncated slivers (looks like dashes). */
	.tgp-producer__rating-stars { height: 11px !important; }
	.tgp-producer__rating-stars-bg svg,
	.tgp-producer__rating-stars-fill svg { width: 11px !important; height: 11px !important; }
	.tgp-producer__stats {
		gap: 4px 8px;
		font-size: 12.5px;
	}
	.tgp-producer__stats .tgp-pill { font-size: 10px; }
	.tgp-producer__actions {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--tgp-line);
	}
	.tgp-prev-reviews__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 10px;
	}
	.tgp-prev-reviews__title { font-size: 16.5px; }
	.tgp-prev-reviews__viewport {
		mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	}
	.tgp-prev-reviews__line {
		gap: 8px;
		font-size: 12.5px;
	}
	.tgp-prev-reviews__byline { font-size: 11.5px; }
	.tgp-prev-reviews__quote { max-width: 42ch; }
	.tgp-prev-reviews__track { gap: 18px; }
	.tgp-prev-reviews__row--ltr .tgp-prev-reviews__track { animation-duration: 60s; }
	.tgp-prev-reviews__row--rtl .tgp-prev-reviews__track { animation-duration: 50s; }

	.tgp-producer__actions .tgp-btn {
		width: 100% !important;
		justify-content: center !important;
		min-height: 44px !important;
		font-size: 13px !important;
		padding: 11px 16px !important;
	}

	/* Hire panel — comfortable mobile with full-width CTA */
	.tgp-hire { padding: 20px 18px 20px; gap: 14px; }
	.tgp-hire::before { left: 18px; right: 18px; }
	.tgp-hire__head { gap: 12px; }
	.tgp-hire__heading { gap: 8px; }
	.tgp-hire__badge {
		font-size: 11.5px;
		padding: 5px 11px 5px 9px;
		gap: 7px;
	}
	.tgp-hire__title { font-size: 15px; line-height: 1.4; }
	.tgp-hire__types { gap: 6px; }
	.tgp-hire__types li { font-size: 12px; padding: 6px 12px; }
	.tgp-hire__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding-top: 10px;
	}
	.tgp-hire__from {
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		gap: 8px;
	}
	.tgp-hire__from-label { font-size: 10px; }
	.tgp-hire__from-price { font-size: 16px; }
	.tgp-page .tgp-hire__cta {
		width: 100% !important;
		justify-content: center !important;
		min-height: 44px !important;
		padding: 11px 16px !important;
		font-size: 13.5px !important;
	}

	/* License: single column on mobile */
	.tgp-license__perms { grid-template-columns: 1fr; }
	.tgp-license-perm:nth-child(odd) { border-right: 0; }
	.tgp-license-perm:nth-last-child(-n+2) { border-bottom: 1px solid var(--tgp-line); }
	.tgp-license-perm:last-child { border-bottom: 0; }
	.tgp-license__banner { padding: 16px; }
	.tgp-license__banner-right { display: none; }

	.tgp-trust-badges { gap: 8px; }

	.tgp-tabs__btn { padding: 12px 14px !important; font-size: 13px !important; }

	.tgp-specs__row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
	.tgp-specs__row--sub { padding: 4px 0 4px 14px; }
	.tgp-specs__row--sub:last-child { padding-bottom: 10px; }
	/* Mobile tooltip — JS sets --tgp-tip-x / --tgp-tip-y on the wrap based on
	   the trigger's bounding rect, clamped to keep the tooltip on-screen. We
	   use position: fixed so the values can be in viewport coordinates and
	   the tooltip never gets clipped by an ancestor with overflow: hidden. */
	.tgp-tooltip-wrap::after {
		position: fixed;
		left: var(--tgp-tip-x, 50vw);
		top: var(--tgp-tip-y, 50vh);
		right: auto;
		bottom: auto;
		transform: translateY(-100%) scale(0.96);
		transform-origin: bottom left;
		width: var(--tgp-tip-w, min(280px, calc(100vw - 32px)));
		max-width: var(--tgp-tip-w, min(280px, calc(100vw - 32px)));
		font-size: 12.5px;
		padding: 9px 12px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
		text-align: left;
	}
	.tgp-tooltip-wrap:hover::after,
	.tgp-tooltip-wrap:focus-within::after {
		transform: translateY(-100%) scale(1);
	}

	.tgp-loops__cards { grid-template-columns: 1fr; }

	.tgp-explorer__body { grid-template-columns: 1fr; }
	.tgp-explorer__path { font-size: 11px; }
	.tgp-explorer__chrome-meta { display: none; }

	.tgp-stickybar__inner {
		grid-template-columns: 36px 1fr auto;
		padding: 10px 14px;
		gap: 10px;
	}
	.tgp-stickybar__cover { width: 36px; height: 36px; }
	.tgp-stickybar__price { display: none; }
	.tgp-stickybar .tgp-btn { padding: 9px 14px !important; font-size: 13px !important; min-height: 36px !important; }

	.tgp-toast { bottom: 24px; }
}

/* Very small phones (iPhone SE, Galaxy A12, etc.) */
@media (max-width: 380px) {
	.tgp-page { padding: 28px 12px 0; }
	.tgp-hero__title { font-size: 24px; line-height: 1.18; }
	.tgp-hero__inner { padding: 16px; }
	.tgp-hero__cover { max-width: 240px; }
	.tgp-player-wrap--inhero { padding: 10px 16px; }
	.tgp-tabs__nav { padding: 0 12px; gap: 16px; }
	.tgp-tabs__btn { font-size: 13px !important; padding: 10px 0 !important; }
	.tgp-explorer__chrome { padding: 8px 12px; }
	.tgp-license__note { font-size: 11.5px; padding: 10px 12px; }
}

/* Honour user motion preferences across all motion-using elements */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}