/*==================================================
TrueVitaHub Directory
Part 1.1
Foundation + Variables + Reset + Container
==================================================*/

/*======================================
Design System
======================================*/

:root{

	--tvh-primary:#2952E3;
	--tvh-primary-hover:#1f43c7;

	--tvh-success:#16a34a;
	--tvh-warning:#f59e0b;
	--tvh-danger:#dc2626;

	--tvh-bg:#f8fafc;
	--tvh-surface:#ffffff;

	--tvh-text:#101828;
	--tvh-text-light:#667085;

	--tvh-border:#e4e7ec;

	--tvh-shadow-sm:0 2px 8px rgba(16,24,40,.04);
	--tvh-shadow-md:0 12px 30px rgba(16,24,40,.08);
	--tvh-shadow-lg:0 22px 60px rgba(16,24,40,.12);

	--tvh-radius-sm:10px;
	--tvh-radius:16px;
	--tvh-radius-lg:22px;

	--tvh-transition:.25s ease;

	--tvh-container:1440px;

}

/*======================================
Reset
======================================*/

.tvh-directory *,
.tvh-directory *::before,
.tvh-directory *::after{

	box-sizing:border-box;

}

.tvh-directory img{

	max-width:100%;
	height:auto;
	display:block;

}

.tvh-directory a{

	color:inherit;
	text-decoration:none;
	transition:var(--tvh-transition);

}

.tvh-directory button,
.tvh-directory input,
.tvh-directory select,
.tvh-directory textarea{

	font:inherit;

}

.tvh-directory ul{

	margin:0;
	padding:0;
	list-style:none;

}

.tvh-directory h1,
.tvh-directory h2,
.tvh-directory h3,
.tvh-directory h4,
.tvh-directory h5,
.tvh-directory h6,
.tvh-directory p{

	margin:0;

}

/*======================================
Directory Wrapper
======================================*/

.tvh-directory{

	position:relative;

	background:var(--tvh-bg);

	padding:60px 0 100px;

	min-height:100vh;

	overflow:hidden;

}

/*======================================
Container
======================================*/

.tvh-container{

	width:100%;

	max-width:var(--tvh-container);

	margin-inline:auto;

	padding-inline:24px;

}

/*======================================
Common Cards
======================================*/

.tvh-surface{

	background:var(--tvh-surface);

	border:1px solid var(--tvh-border);

	border-radius:var(--tvh-radius);

	box-shadow:var(--tvh-shadow-sm);

}

/*======================================
Common Headings
======================================*/

.tvh-section-title{

	font-size:32px;

	font-weight:800;

	line-height:1.2;

	color:var(--tvh-text);

	margin-bottom:18px;

}

.tvh-section-description{

	font-size:16px;

	line-height:1.8;

	color:var(--tvh-text-light);

	max-width:760px;

}

/*======================================
Buttons Base
======================================*/

.tvh-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:10px;

	min-height:48px;

	padding:0 22px;

	border:none;

	border-radius:12px;

	cursor:pointer;

	font-weight:600;

	transition:var(--tvh-transition);

}

.tvh-btn-primary{

	background:var(--tvh-primary);

	color:#fff;

}

.tvh-btn-primary:hover{

	background:var(--tvh-primary-hover);

}

.tvh-btn-outline{

	background:#fff;

	border:1px solid var(--tvh-border);

	color:var(--tvh-text);

}

.tvh-btn-outline:hover{

	border-color:var(--tvh-primary);

	color:var(--tvh-primary);

}

/*======================================
Responsive Container
======================================*/

@media (max-width:1200px){

	.tvh-container{

		padding-inline:20px;

	}

}

@media (max-width:768px){

	.tvh-directory{

		padding:40px 0 70px;

	}

	.tvh-container{

		padding-inline:16px;

	}

	.tvh-section-title{

		font-size:28px;

	}

}

/*==================================================
Part 1.2
Layout + Sidebar
==================================================*/

/*======================================
Main Layout
======================================*/

.tvh-directory-layout{

	display:grid;

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

	gap:40px;

	align-items:start;

	margin-top:50px;

	width:100%;

}

/*======================================
Sidebar
======================================*/

.tvh-directory-sidebar{

	position:sticky;

	top:100px;

	align-self:start;

	width:100%;

	min-width:0;

	background:#ffffff;

	border:1px solid var(--tvh-border);

	border-radius:20px;

	padding:26px;

	box-shadow:var(--tvh-shadow-sm);

	overflow:hidden;

}

/*======================================
Content
======================================*/

.tvh-directory-content{

	width:100%;

	min-width:0;

	display:flex;

	flex-direction:column;

}

/*======================================
Sidebar Sections
======================================*/

.tvh-filter-group{

	padding-bottom:24px;

	margin-bottom:24px;

	border-bottom:1px solid var(--tvh-border);

}

.tvh-filter-group:last-child{

	margin-bottom:0;

	padding-bottom:0;

	border-bottom:none;

}

/*======================================
Sidebar Titles
======================================*/

.tvh-filter-title{

	display:flex;

	align-items:center;

	justify-content:space-between;

	font-size:17px;

	font-weight:700;

	color:var(--tvh-text);

	margin-bottom:18px;

}

/*======================================
Filter List
======================================*/

.tvh-filter-list{

	display:flex;

	flex-direction:column;

	gap:14px;

}

/*======================================
Checkbox
======================================*/

.tvh-filter-list label{

	display:flex;

	align-items:center;

	gap:12px;

	cursor:pointer;

	font-size:15px;

	color:var(--tvh-text-light);

	transition:.2s;

}

.tvh-filter-list label:hover{

	color:var(--tvh-primary);

}

.tvh-filter-list input[type="checkbox"]{

	width:18px;

	height:18px;

	accent-color:var(--tvh-primary);

	cursor:pointer;

}

/*======================================
Search Inside Sidebar
======================================*/

.tvh-sidebar-search{

	margin-bottom:25px;

}

.tvh-sidebar-search input{

	width:100%;

	height:46px;

	border:1px solid var(--tvh-border);

	border-radius:12px;

	padding:0 14px;

	background:#fff;

	outline:none;

	transition:.25s;

}

.tvh-sidebar-search input:focus{

	border-color:var(--tvh-primary);

	box-shadow:0 0 0 4px rgba(41,82,227,.08);

}

/*======================================
Reset Button
======================================*/

#tvh-reset-filters{

	width:100%;

	margin-top:28px;

}

/*======================================
Loading
======================================*/

.tvh-directory-sidebar.loading{

	opacity:.55;

	pointer-events:none;

}

/*======================================
Desktop Large
======================================*/

@media (max-width:1300px){

	.tvh-directory-layout{

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

		gap:32px;

	}

}

/*======================================
Tablet
======================================*/

@media (max-width:1024px){

	.tvh-directory-layout{

		grid-template-columns:1fr;

	}

	.tvh-directory-sidebar{

		position:relative;

		top:auto;

		order:2;

		margin-top:35px;

	}

	.tvh-directory-content{

		order:1;

	}

}

/*======================================
Mobile
======================================*/

@media (max-width:767px){

	.tvh-directory-layout{

		gap:25px;

		margin-top:35px;

	}

	.tvh-directory-sidebar{

		padding:20px;

		border-radius:16px;

	}

	.tvh-filter-title{

		font-size:16px;

	}

	.tvh-filter-list{

		gap:12px;

	}

}

/*==================================================
Part 1.3
Filter UI + Search Box + Toolbar
==================================================*/

/*======================================
Toolbar
======================================*/

.tvh-directory-toolbar{

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:20px;

	margin-bottom:32px;

	padding:20px 24px;

	background:#fff;

	border:1px solid var(--tvh-border);

	border-radius:18px;

	box-shadow:var(--tvh-shadow-sm);

	flex-wrap:wrap;

}

/*======================================
Results
======================================*/

.tvh-toolbar-results{

	display:flex;

	align-items:center;

	gap:10px;

	font-size:15px;

	color:var(--tvh-text-light);

}

.tvh-toolbar-results strong{

	font-size:18px;

	font-weight:700;

	color:var(--tvh-text);

}

/*======================================
Toolbar Actions
======================================*/

.tvh-toolbar-actions{

	display:flex;

	align-items:center;

	gap:14px;

	flex-wrap:wrap;

}

/*======================================
Search
======================================*/

.tvh-directory-search{

	width:100%;

	margin-bottom:28px;

}

.tvh-directory-search-box{

	display:flex;

	align-items:center;

	background:#fff;

	border:1px solid var(--tvh-border);

	border-radius:16px;

	overflow:hidden;

	box-shadow:var(--tvh-shadow-sm);

	transition:.25s;

}

.tvh-directory-search-box:focus-within{

	border-color:var(--tvh-primary);

	box-shadow:0 0 0 4px rgba(41,82,227,.08);

}

.tvh-directory-search-box input{

	flex:1;

	border:none;

	outline:none;

	padding:18px 22px;

	font-size:16px;

	background:transparent;

	color:var(--tvh-text);

}

.tvh-directory-search-box input::placeholder{

	color:#98a2b3;

}

.tvh-directory-search-box button{

	border:none;

	background:var(--tvh-primary);

	color:#fff;

	font-weight:700;

	padding:0 28px;

	height:58px;

	cursor:pointer;

	transition:.25s;

}

.tvh-directory-search-box button:hover{

	background:var(--tvh-primary-hover);

}

/*======================================
Select
======================================*/

.tvh-directory-toolbar select{

	height:46px;

	padding:0 16px;

	border:1px solid var(--tvh-border);

	border-radius:12px;

	background:#fff;

	font-size:14px;

	cursor:pointer;

	outline:none;

	transition:.25s;

}

.tvh-directory-toolbar select:focus{

	border-color:var(--tvh-primary);

}

/*======================================
Sidebar Filter Card
======================================*/

.tvh-filters{

	display:flex;

	flex-direction:column;

	gap:28px;

}

.tvh-filters h3{

	font-size:17px;

	font-weight:700;

	color:var(--tvh-text);

	margin-bottom:16px;

}

.tvh-filters ul{

	display:flex;

	flex-direction:column;

	gap:14px;

}

.tvh-filters li{

	list-style:none;

}

.tvh-filters label{

	display:flex;

	align-items:center;

	gap:12px;

	cursor:pointer;

	color:var(--tvh-text-light);

	font-size:15px;

	transition:.2s;

}

.tvh-filters label:hover{

	color:var(--tvh-primary);

}

.tvh-filters input[type="checkbox"]{

	width:18px;

	height:18px;

	accent-color:var(--tvh-primary);

}

.tvh-filters hr{

	border:none;

	border-top:1px solid var(--tvh-border);

	margin:0;

}

/*======================================
Reset Button
======================================*/

#tvh-reset-filters{

	margin-top:8px;

	width:100%;

}

/*======================================
Loading
======================================*/

.tvh-tool-grid.is-loading{

	opacity:.45;

	pointer-events:none;

	transition:.2s;

}

/*======================================
Responsive
======================================*/

@media (max-width:991px){

	.tvh-directory-toolbar{

		flex-direction:column;

		align-items:stretch;

	}

	.tvh-toolbar-actions{

		width:100%;

		justify-content:space-between;

	}

}

@media (max-width:767px){

	.tvh-directory-search-box{

		flex-direction:column;

	}

	.tvh-directory-search-box button{

		width:100%;

		height:52px;

		border-radius:0;

	}

	.tvh-directory-search-box input{

		width:100%;

	}

	.tvh-toolbar-actions{

		flex-direction:column;

		align-items:stretch;

	}

	.tvh-directory-toolbar select{

		width:100%;

	}

}

/*==================================================
Part 2.1
Premium Tool Card
Container + Header + Logo
==================================================*/

/*======================================
Card
======================================*/

.tvh-tool-card{

	position:relative;

	display:flex;

	flex-direction:column;

	height:100%;

	background:#ffffff;

	border:1px solid #e4e7ec;

	border-radius:22px;

	padding:24px;

	overflow:hidden;

	transition:all .30s ease;

	box-shadow:0 8px 30px rgba(16,24,40,.05);

}

.tvh-tool-card:hover{

	transform:translateY(-6px);

	border-color:#2952E3;

	box-shadow:0 24px 60px rgba(16,24,40,.12);

}

/*======================================
Card Header
======================================*/

.tvh-tool-card__top{

	display:flex;

	align-items:flex-start;

	gap:18px;

	margin-bottom:20px;

}

/*======================================
Logo
======================================*/

.tvh-tool-card__logo{

	flex:0 0 72px;

	width:72px;

	height:72px;

	border-radius:18px;

	background:#f8fafc;

	border:1px solid #eef2f7;

	display:flex;

	align-items:center;

	justify-content:center;

	overflow:hidden;

}

.tvh-tool-card__logo img{

	width:56px;

	height:56px;

	object-fit:contain;

	display:block;

}

/*======================================
Fallback Logo
======================================*/

.tvh-tool-card__placeholder{

	width:56px;

	height:56px;

	border-radius:14px;

	background:linear-gradient(
		135deg,
		#2952E3,
		#4F7CFF
	);

	color:#ffffff;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:22px;

	font-weight:700;

	text-transform:uppercase;

}

/*======================================
Meta
======================================*/

.tvh-tool-card__meta{

	flex:1;

	min-width:0;

	display:flex;

	flex-direction:column;

	justify-content:center;

}

/*======================================
Title
======================================*/

.tvh-tool-card__title{

	margin:0;

	font-size:22px;

	font-weight:700;

	line-height:1.35;

	color:#101828;

}

.tvh-tool-card__title a{

	color:#101828;

	text-decoration:none;

	transition:.25s;

}

.tvh-tool-card__title a:hover{

	color:#2952E3;

}

/*======================================
Company
======================================*/

.tvh-tool-card__company{

	margin-top:8px;

	font-size:14px;

	font-weight:500;

	color:#667085;

	display:flex;

	align-items:center;

	gap:8px;

}

.tvh-tool-card__company svg{

	width:16px;

	height:16px;

	color:#98A2B3;

}

/*==================================================
Part 2.2
Title + Company + Description
==================================================*/

/*======================================
Title Area
======================================*/

.tvh-tool-card__meta{

	display:flex;

	flex-direction:column;

	justify-content:center;

	flex:1;

	min-width:0;

}

.tvh-tool-card__title{

	margin:0;

	font-size:22px;

	font-weight:700;

	line-height:1.35;

	color:#101828;

	letter-spacing:-0.02em;

}

.tvh-tool-card__title a{

	color:#101828;

	text-decoration:none;

	transition:.25s;

}

.tvh-tool-card__title a:hover{

	color:#2952E3;

}

/*======================================
Company
======================================*/

.tvh-tool-card__company{

	display:flex;

	align-items:center;

	gap:8px;

	margin-top:8px;

	font-size:14px;

	font-weight:500;

	color:#667085;

	line-height:1.5;

}

.tvh-tool-card__company svg{

	width:16px;

	height:16px;

	color:#98A2B3;

	flex-shrink:0;

}

.tvh-tool-card__company a{

	color:#667085;

	text-decoration:none;

	transition:.25s;

}

.tvh-tool-card__company a:hover{

	color:#2952E3;

}

/*======================================
Description
======================================*/

.tvh-tool-card__description{

	margin-top:18px;

	font-size:15px;

	line-height:1.8;

	color:#667085;

	display:-webkit-box;

	-webkit-line-clamp:3;

	-webkit-box-orient:vertical;

	overflow:hidden;

	min-height:82px;

	word-break:break-word;

}

/*======================================
Description Hover
======================================*/

.tvh-tool-card:hover
.tvh-tool-card__description{

	color:#475467;

}

/*======================================
Spacing
======================================*/

.tvh-tool-card__content{

	display:flex;

	flex-direction:column;

	flex:1;

}

/*======================================
Empty Description
======================================*/

.tvh-tool-card__description:empty{

	display:none;

}

/*======================================
Responsive
======================================*/

@media (max-width:768px){

	.tvh-tool-card__title{

		font-size:20px;

	}

	.tvh-tool-card__description{

		font-size:14px;

		min-height:auto;

		-webkit-line-clamp:4;

	}

}

/*==================================================
Part 2.3
Badges + Rating + Pricing
==================================================*/

/*======================================
Badges Wrapper
======================================*/

.tvh-tool-card__badges{

	display:flex;

	flex-wrap:wrap;

	gap:10px;

	margin:18px 0 22px;

}

/*======================================
Base Badge
======================================*/

.tvh-badge{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:7px 14px;

	border-radius:999px;

	font-size:12px;

	font-weight:600;

	line-height:1;

	white-space:nowrap;

	border:1px solid transparent;

	transition:.25s;

}

/*======================================
Category Badge
======================================*/

.tvh-badge-category{

	background:#eef4ff;

	color:#2952E3;

	border-color:#d7e4ff;

}

.tvh-badge-category:hover{

	background:#2952E3;

	color:#fff;

}

/*======================================
Pricing Badge
======================================*/

.tvh-badge-free{

	background:#ecfdf3;

	color:#027A48;

	border-color:#ABEFC6;

}

.tvh-badge-paid{

	background:#FFF7ED;

	color:#C2410C;

	border-color:#FED7AA;

}

.tvh-badge-freemium{

	background:#F5F3FF;

	color:#6D28D9;

	border-color:#DDD6FE;

}

/*======================================
Featured
======================================*/

.tvh-badge-featured{

	background:#FFF7E6;

	color:#B54708;

	border-color:#FEDF89;

}

/*======================================
Recommended
======================================*/

.tvh-badge-recommended{

	background:#ECFDF3;

	color:#027A48;

	border-color:#ABEFC6;

}

/*======================================
New
======================================*/

.tvh-badge-new{

	background:#EEF2FF;

	color:#4338CA;

	border-color:#C7D2FE;

}

/*======================================
Rating Area
======================================*/

.tvh-tool-card__rating{

	display:flex;

	align-items:center;

	justify-content:space-between;

	margin-top:auto;

	padding-top:20px;

	border-top:1px solid #EAECF0;

}

/*======================================
Stars
======================================*/

.tvh-stars{

	display:flex;

	align-items:center;

	gap:2px;

	font-size:16px;

	color:#F59E0B;

	line-height:1;

}

.tvh-stars svg{

	width:16px;

	height:16px;

	fill:currentColor;

}

/*======================================
Rating Number
======================================*/

.tvh-rating-number{

	margin-left:8px;

	font-size:14px;

	font-weight:700;

	color:#344054;

}

/*======================================
Review Count
======================================*/

.tvh-review-count{

	margin-left:6px;

	font-size:13px;

	color:#98A2B3;

}

/*======================================
Pricing Label
======================================*/

.tvh-pricing{

	display:inline-flex;

	align-items:center;

	padding:8px 14px;

	border-radius:999px;

	font-size:13px;

	font-weight:700;

	background:#F9FAFB;

	color:#344054;

	border:1px solid #EAECF0;

}

/*======================================
Hover
======================================*/

.tvh-tool-card:hover .tvh-pricing{

	border-color:#2952E3;

	color:#2952E3;

}

.tvh-tool-card:hover .tvh-badge{

	transform:translateY(-2px);

}

/*======================================
Responsive
======================================*/

@media (max-width:768px){

	.tvh-tool-card__badges{

		gap:8px;

	}

	.tvh-badge{

		font-size:11px;

		padding:6px 12px;

	}

	.tvh-tool-card__rating{

		flex-direction:column;

		align-items:flex-start;

		gap:12px;

	}

}

/*==================================================
Part 2.4
Footer + Buttons + Premium Hover + Equal Height
==================================================*/

/*======================================
Card Body
======================================*/

.tvh-tool-card{

	display:flex;
	flex-direction:column;
	height:100%;
	position:relative;

}

/*======================================
Content
======================================*/

.tvh-tool-card__content{

	display:flex;
	flex-direction:column;
	flex:1;

}

/*======================================
Footer
======================================*/

.tvh-tool-card__footer{

	margin-top:auto;

	padding-top:22px;

	border-top:1px solid #EAECF0;

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:14px;

}

/*======================================
Buttons Wrapper
======================================*/

.tvh-tool-card__actions{

	display:flex;

	gap:12px;

	flex:1;

}

/*======================================
Universal Button
======================================*/

.tvh-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:8px;

	flex:1;

	height:46px;

	padding:0 18px;

	border-radius:12px;

	font-size:14px;

	font-weight:600;

	text-decoration:none;

	cursor:pointer;

	transition:.25s;

}

/*======================================
Primary Button
======================================*/

.tvh-btn-primary{

	background:#2952E3;

	color:#ffffff;

	border:1px solid #2952E3;

}

.tvh-btn-primary:hover{

	background:#1E40AF;

	border-color:#1E40AF;

	color:#ffffff;

	transform:translateY(-2px);

}

/*======================================
Outline Button
======================================*/

.tvh-btn-secondary{

	background:#ffffff;

	color:#2952E3;

	border:1px solid #D0D5DD;

}

.tvh-btn-secondary:hover{

	background:#2952E3;

	border-color:#2952E3;

	color:#ffffff;

	transform:translateY(-2px);

}

/*======================================
Save Button
======================================*/

.tvh-btn-save{

	width:46px;

	height:46px;

	padding:0;

	flex:0 0 46px;

	border-radius:12px;

	background:#ffffff;

	border:1px solid #D0D5DD;

	color:#667085;

}

.tvh-btn-save:hover{

	background:#FFF1F3;

	border-color:#FDA4AF;

	color:#E11D48;

}

/*======================================
Icons
======================================*/

.tvh-btn svg{

	width:18px;

	height:18px;

	flex-shrink:0;

}

/*======================================
Hover Overlay
======================================*/

.tvh-tool-card::before{

	content:"";

	position:absolute;

	inset:0;

	background:linear-gradient(
		180deg,
		rgba(41,82,227,.02),
		transparent 40%
	);

	opacity:0;

	transition:.35s;

	pointer-events:none;

}

.tvh-tool-card:hover::before{

	opacity:1;

}

/*======================================
Hover Effects
======================================*/

.tvh-tool-card:hover{

	transform:translateY(-6px);

	box-shadow:0 28px 60px rgba(16,24,40,.12);

}

.tvh-tool-card:hover
.tvh-tool-card__logo{

	transform:scale(1.04);

	transition:.3s;

}

/*======================================
Equal Height Grid
======================================*/

.tvh-tool-grid{

	align-items:stretch;

}

.tvh-tool-grid>.tvh-tool-card{

	height:100%;

}

/*======================================
Focus
======================================*/

.tvh-btn:focus{

	outline:none;

	box-shadow:
		0 0 0 4px rgba(41,82,227,.18);

}

/*======================================
Responsive
======================================*/

@media (max-width:768px){

	.tvh-tool-card__footer{

		flex-direction:column;

		align-items:stretch;

	}

	.tvh-tool-card__actions{

		width:100%;

	}

	.tvh-btn{

		width:100%;

	}

	.tvh-btn-save{

		width:100%;

		flex:unset;

	}

}

/*==================================================
Part 2.5
Responsive Card Polish
==================================================*/

/*======================================
Card Image Animation
======================================*/

.tvh-tool-card__logo{

	transition:
		transform .30s ease,
		box-shadow .30s ease,
		background .30s ease;

}

.tvh-tool-card:hover .tvh-tool-card__logo{

	transform:scale(1.06);

	box-shadow:0 12px 30px rgba(41,82,227,.15);

}

/*======================================
Title Animation
======================================*/

.tvh-tool-card__title{

	transition:color .25s ease;

}

.tvh-tool-card:hover .tvh-tool-card__title{

	color:var(--tvh-primary);

}

/*======================================
Description
======================================*/

.tvh-tool-card__description{

	transition:color .25s ease;

}

.tvh-tool-card:hover .tvh-tool-card__description{

	color:#475467;

}

/*======================================
Badges Animation
======================================*/

.tvh-tool-card__badges .tvh-badge{

	transition:
		transform .25s ease,
		background .25s ease,
		color .25s ease;

}

.tvh-tool-card:hover
.tvh-tool-card__badges
.tvh-badge{

	transform:translateY(-2px);

}

/*======================================
Buttons
======================================*/

.tvh-tool-card__actions{

	align-items:stretch;

}

.tvh-tool-card__actions .tvh-btn{

	min-width:0;

	white-space:nowrap;

}

/*======================================
Grid Stretch
======================================*/

.tvh-tool-grid{

	align-items:stretch;

}

.tvh-tool-grid>.tvh-tool-card{

	height:100%;

}

/*======================================
Prevent Overflow
======================================*/

.tvh-tool-card{

	word-break:break-word;

	overflow:hidden;

}

.tvh-tool-card__title,
.tvh-tool-card__description,
.tvh-tool-card__company{

	min-width:0;

}

/*======================================
Tablet
======================================*/

@media (max-width:1024px){

	.tvh-tool-grid{

		grid-template-columns:
		repeat(
			auto-fill,
			minmax(300px,1fr)
		);

		gap:24px;

	}

	.tvh-tool-card{

		padding:22px;

	}

}

/*======================================
Mobile
======================================*/

@media (max-width:768px){

	.tvh-tool-grid{

		grid-template-columns:1fr;

		gap:20px;

	}

	.tvh-tool-card{

		padding:20px;

		border-radius:18px;

	}

	.tvh-tool-card__top{

		gap:14px;

	}

	.tvh-tool-card__logo{

		width:60px;

		height:60px;

		flex:0 0 60px;

	}

	.tvh-tool-card__logo img{

		width:48px;

		height:48px;

	}

	.tvh-tool-card__title{

		font-size:20px;

	}

	.tvh-tool-card__company{

		font-size:13px;

	}

	.tvh-tool-card__description{

		font-size:14px;

		line-height:1.7;

	}

	.tvh-tool-card__badges{

		gap:8px;

	}

	.tvh-tool-card__footer{

		flex-direction:column;

		align-items:stretch;

		gap:14px;

	}

	.tvh-tool-card__actions{

		width:100%;

		flex-direction:column;

	}

	.tvh-btn{

		width:100%;

	}

}

/*======================================
Small Mobile
======================================*/

@media (max-width:480px){

	.tvh-tool-card{

		padding:18px;

	}

	.tvh-tool-card__title{

		font-size:18px;

	}

	.tvh-tool-card__description{

		-webkit-line-clamp:4;

	}

}

/*======================================
Accessibility
======================================*/

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

	.tvh-tool-card,
	.tvh-tool-card *,
	.tvh-btn{

		transition:none !important;

		animation:none !important;

	}

}

/*==================================================
Part 3.1
Premium Grid + List View
==================================================*/

/*======================================
Directory Content
======================================*/

.tvh-directory-content{

	display:flex;

	flex-direction:column;

	width:100%;

	min-width:0;

}

/*======================================
Tool Grid
======================================*/

.tvh-tool-grid{

	display:grid;

	grid-template-columns:
		repeat(
			auto-fill,
			minmax(340px,1fr)
		);

	gap:30px;

	align-items:stretch;

	width:100%;

}

/*======================================
Equal Height
======================================*/

.tvh-tool-grid>.tvh-tool-card{

	height:100%;

}

/*======================================
Grid Animation
======================================*/

.tvh-tool-card{

	animation:tvhFade .35s ease;

}

@keyframes tvhFade{

	from{

		opacity:0;

		transform:translateY(12px);

	}

	to{

		opacity:1;

		transform:none;

	}

}

/*======================================
Grid View
======================================*/

.tvh-tool-grid.grid-view{

	grid-template-columns:
		repeat(
			auto-fill,
			minmax(340px,1fr)
		);

}

/*======================================
List View
======================================*/

.tvh-tool-grid.list-view{

	display:flex;

	flex-direction:column;

	gap:22px;

}

.tvh-tool-grid.list-view
.tvh-tool-card{

	display:grid;

	grid-template-columns:

		90px

		1fr

		280px;

	align-items:center;

	gap:28px;

	padding:24px;

}

.tvh-tool-grid.list-view
.tvh-tool-card__top{

	display:contents;

}

.tvh-tool-grid.list-view
.tvh-tool-card__logo{

	grid-column:1;

}

.tvh-tool-grid.list-view
.tvh-tool-card__meta{

	grid-column:2;

}

.tvh-tool-grid.list-view
.tvh-tool-card__rating{

	grid-column:3;

	justify-content:flex-end;

	border:none;

	padding:0;

	margin:0;

}

.tvh-tool-grid.list-view
.tvh-tool-card__content{

	grid-column:2;

	margin-top:18px;

}

.tvh-tool-grid.list-view
.tvh-tool-card__footer{

	grid-column:3;

	margin-top:auto;

	border:none;

	padding:0;

}

/*======================================
View Toggle
======================================*/

.tvh-view-toggle{

	display:flex;

	align-items:center;

	gap:10px;

}

.tvh-view-toggle button{

	width:42px;

	height:42px;

	display:flex;

	align-items:center;

	justify-content:center;

	border:1px solid var(--tvh-border);

	background:#fff;

	border-radius:10px;

	cursor:pointer;

	transition:.25s;

}

.tvh-view-toggle button:hover{

	background:var(--tvh-primary);

	color:#fff;

	border-color:var(--tvh-primary);

}

.tvh-view-toggle button.active{

	background:var(--tvh-primary);

	color:#fff;

	border-color:var(--tvh-primary);

}

/*======================================
Loading State
======================================*/

.tvh-tool-grid.is-loading{

	opacity:.45;

	pointer-events:none;

	filter:blur(1px);

}

/*======================================
Tablet
======================================*/

@media(max-width:1200px){

	.tvh-tool-grid{

		grid-template-columns:
			repeat(
				auto-fill,
				minmax(300px,1fr)
			);

	}

}

/*======================================
Mobile
======================================*/

@media(max-width:768px){

	.tvh-tool-grid{

		grid-template-columns:1fr;

		gap:20px;

	}

	.tvh-tool-grid.list-view
	.tvh-tool-card{

		display:flex;

		flex-direction:column;

		align-items:flex-start;

	}

	.tvh-tool-grid.list-view
	.tvh-tool-card__rating,

	.tvh-tool-grid.list-view
	.tvh-tool-card__footer{

		width:100%;

		justify-content:flex-start;

		margin-top:20px;

	}

	.tvh-view-toggle{

		display:none;

	}

}

/*==================================================
Part 3.2
Premium Pagination
Desktop + Mobile
==================================================*/

/*======================================
Pagination Wrapper
======================================*/

.tvh-pagination{

	display:flex;

	justify-content:center;

	align-items:center;

	margin:70px 0 20px;

	width:100%;

}

/*======================================
Pagination List
======================================*/

.tvh-pagination ul{

	display:flex;

	align-items:center;

	justify-content:center;

	flex-wrap:wrap;

	gap:12px;

	margin:0;

	padding:0;

	list-style:none;

}

/*======================================
Items
======================================*/

.tvh-pagination li{

	margin:0;

	padding:0;

}

/*======================================
Links
======================================*/

.tvh-pagination a,

.tvh-pagination span{

	display:flex;

	align-items:center;

	justify-content:center;

	width:48px;

	height:48px;

	border-radius:14px;

	background:#ffffff;

	border:1px solid #E4E7EC;

	color:#344054;

	font-size:15px;

	font-weight:600;

	text-decoration:none;

	transition:.25s;

	box-shadow:0 2px 8px rgba(16,24,40,.04);

}

/*======================================
Hover
======================================*/

.tvh-pagination a:hover{

	background:#2952E3;

	color:#ffffff;

	border-color:#2952E3;

	transform:translateY(-2px);

	box-shadow:0 12px 30px rgba(41,82,227,.22);

}

/*======================================
Current
======================================*/

.tvh-pagination .current{

	background:#2952E3;

	color:#ffffff;

	border-color:#2952E3;

	box-shadow:0 12px 30px rgba(41,82,227,.22);

}

/*======================================
Prev / Next
======================================*/

.tvh-pagination .prev,

.tvh-pagination .next{

	width:auto;

	min-width:54px;

	padding:0 20px;

	font-weight:700;

}

/*======================================
Disabled
======================================*/

.tvh-pagination .disabled,

.tvh-pagination span.dots{

	opacity:.45;

	cursor:default;

	pointer-events:none;

}

/*======================================
AJAX Loading
======================================*/

.tvh-pagination.loading{

	opacity:.45;

	pointer-events:none;

}

/*======================================
Tablet
======================================*/

@media (max-width:768px){

	.tvh-pagination{

		margin-top:50px;

	}

	.tvh-pagination ul{

		gap:8px;

	}

	.tvh-pagination a,

	.tvh-pagination span{

		width:42px;

		height:42px;

		font-size:14px;

		border-radius:12px;

	}

	.tvh-pagination .prev,

	.tvh-pagination .next{

		padding:0 16px;

	}

}

/*======================================
Small Mobile
======================================*/

@media (max-width:480px){

	.tvh-pagination ul{

		gap:6px;

	}

	.tvh-pagination a,

	.tvh-pagination span{

		width:38px;

		height:38px;

		font-size:13px;

	}

	.tvh-pagination .prev,

	.tvh-pagination .next{

		min-width:auto;

		padding:0 12px;

		font-size:13px;

	}

}

/*==================================================
Part 3.3
Empty State + No Results + Loading Skeleton
==================================================*/

/*======================================
Empty State Wrapper
======================================*/

.tvh-empty{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	text-align:center;

	background:#ffffff;

	border:1px solid #E4E7EC;

	border-radius:24px;

	padding:80px 40px;

	box-shadow:0 12px 35px rgba(16,24,40,.05);

}

/*======================================
Icon
======================================*/

.tvh-empty-icon{

	width:96px;

	height:96px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:#EEF4FF;

	color:#2952E3;

	font-size:42px;

	margin-bottom:28px;

}

/*======================================
Heading
======================================*/

.tvh-empty h2{

	margin:0 0 18px;

	font-size:34px;

	font-weight:800;

	line-height:1.2;

	color:#101828;

}

/*======================================
Description
======================================*/

.tvh-empty p{

	max-width:620px;

	margin:0 auto 35px;

	font-size:17px;

	line-height:1.8;

	color:#667085;

}

/*======================================
Actions
======================================*/

.tvh-empty-actions{

	display:flex;

	gap:16px;

	flex-wrap:wrap;

	justify-content:center;

}

.tvh-empty-actions .tvh-btn{

	min-width:180px;

}

/*======================================
No Results
======================================*/

.tvh-no-results{

	display:flex;

	flex-direction:column;

	align-items:center;

	justify-content:center;

	text-align:center;

	padding:70px 30px;

	border:2px dashed #D0D5DD;

	border-radius:20px;

	background:#FCFCFD;

}

.tvh-no-results h3{

	margin:0 0 14px;

	font-size:28px;

	font-weight:700;

	color:#101828;

}

.tvh-no-results p{

	margin:0;

	max-width:520px;

	font-size:16px;

	line-height:1.8;

	color:#667085;

}

/*======================================
Skeleton Grid
======================================*/

.tvh-skeleton-grid{

	display:grid;

	grid-template-columns:repeat(auto-fill,minmax(340px,1fr));

	gap:30px;

}

/*======================================
Skeleton Card
======================================*/

.tvh-skeleton{

	background:#ffffff;

	border:1px solid #E4E7EC;

	border-radius:22px;

	padding:24px;

	overflow:hidden;

	position:relative;

}

/*======================================
Skeleton Animation
======================================*/

.tvh-skeleton::after{

	content:"";

	position:absolute;

	inset:0;

	background:linear-gradient(

		90deg,

		transparent,

		rgba(255,255,255,.65),

		transparent

	);

	transform:translateX(-100%);

	animation:tvhSkeleton 1.4s infinite;

}

@keyframes tvhSkeleton{

	to{

		transform:translateX(100%);

	}

}

/*======================================
Skeleton Blocks
======================================*/

.tvh-skeleton-line{

	height:14px;

	border-radius:999px;

	background:#EEF2F6;

	margin-bottom:14px;

}

.tvh-skeleton-line.large{

	height:20px;

	width:70%;

}

.tvh-skeleton-line.medium{

	width:55%;

}

.tvh-skeleton-line.small{

	width:35%;

}

/*======================================
Skeleton Logo
======================================*/

.tvh-skeleton-logo{

	width:72px;

	height:72px;

	border-radius:18px;

	background:#EEF2F6;

	margin-bottom:22px;

}

/*======================================
Loading Overlay
======================================*/

.tvh-tool-grid.is-loading{

	position:relative;

	opacity:.55;

	pointer-events:none;

	filter:blur(.5px);

	transition:.25s;

}

.tvh-tool-grid.is-loading::before{

	content:"";

	position:absolute;

	inset:0;

	background:rgba(255,255,255,.45);

	backdrop-filter:blur(2px);

	z-index:10;

}

/*======================================
Tablet
======================================*/

@media(max-width:768px){

	.tvh-empty{

		padding:60px 25px;

	}

	.tvh-empty h2{

		font-size:28px;

	}

	.tvh-empty p{

		font-size:16px;

	}

	.tvh-empty-actions{

		flex-direction:column;

		width:100%;

	}

	.tvh-empty-actions .tvh-btn{

		width:100%;

	}

	.tvh-skeleton-grid{

		grid-template-columns:1fr;

	}

}

/*======================================
Accessibility
======================================*/

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

	.tvh-skeleton::after{

		animation:none;

	}

}

/*==================================================
Part 4.1
Utilities + Production Helpers
==================================================*/

/*======================================
Visibility
======================================*/

.tvh-hidden{
	display:none !important;
}

.tvh-visible{
	display:block !important;
}

.tvh-flex{
	display:flex;
}

.tvh-inline-flex{
	display:inline-flex;
}

.tvh-grid{
	display:grid;
}

.tvh-center{
	display:flex;
	align-items:center;
	justify-content:center;
}

/*======================================
Spacing
======================================*/

.tvh-mt-0{margin-top:0!important;}
.tvh-mt-10{margin-top:10px!important;}
.tvh-mt-20{margin-top:20px!important;}
.tvh-mt-30{margin-top:30px!important;}
.tvh-mt-40{margin-top:40px!important;}
.tvh-mt-50{margin-top:50px!important;}

.tvh-mb-0{margin-bottom:0!important;}
.tvh-mb-10{margin-bottom:10px!important;}
.tvh-mb-20{margin-bottom:20px!important;}
.tvh-mb-30{margin-bottom:30px!important;}
.tvh-mb-40{margin-bottom:40px!important;}
.tvh-mb-50{margin-bottom:50px!important;}

.tvh-p-0{padding:0!important;}
.tvh-p-10{padding:10px!important;}
.tvh-p-20{padding:20px!important;}
.tvh-p-30{padding:30px!important;}

/*======================================
Width
======================================*/

.tvh-w-100{
	width:100%;
}

.tvh-max-100{
	max-width:100%;
}

.tvh-overflow-hidden{
	overflow:hidden;
}

/*======================================
Border Radius
======================================*/

.tvh-radius-sm{
	border-radius:10px;
}

.tvh-radius{
	border-radius:16px;
}

.tvh-radius-lg{
	border-radius:22px;
}

/*======================================
Shadow
======================================*/

.tvh-shadow-sm{
	box-shadow:0 4px 12px rgba(16,24,40,.06);
}

.tvh-shadow{
	box-shadow:0 12px 30px rgba(16,24,40,.08);
}

.tvh-shadow-lg{
	box-shadow:0 24px 60px rgba(16,24,40,.14);
}

/*======================================
Transition
======================================*/

.tvh-transition{

	transition:

	background .25s,

	border-color .25s,

	color .25s,

	transform .25s,

	box-shadow .25s;

}

/*======================================
Hover Lift
======================================*/

.tvh-hover-lift:hover{

	transform:translateY(-4px);

	box-shadow:0 20px 50px rgba(16,24,40,.12);

}

/*======================================
Focus
======================================*/

.tvh-focus:focus{

	outline:none;

	box-shadow:0 0 0 4px rgba(41,82,227,.15);

}

/*======================================
Loading
======================================*/

.tvh-loading{

	pointer-events:none;

	opacity:.55;

	filter:blur(.5px);

}

/*======================================
Text
======================================*/

.tvh-text-center{

	text-align:center;

}

.tvh-text-left{

	text-align:left;

}

.tvh-text-right{

	text-align:right;

}

.tvh-text-primary{

	color:var(--tvh-primary);

}

.tvh-text-muted{

	color:var(--tvh-text-light);

}

.tvh-fw-600{

	font-weight:600;

}

.tvh-fw-700{

	font-weight:700;

}

.tvh-fw-800{

	font-weight:800;

}

/*======================================
Divider
======================================*/

.tvh-divider{

	width:100%;

	height:1px;

	background:var(--tvh-border);

	margin:35px 0;

}

/*======================================
Animation
======================================*/

.tvh-fade{

	animation:tvhFadeIn .35s ease;

}

@keyframes tvhFadeIn{

	from{

		opacity:0;

		transform:translateY(12px);

	}

	to{

		opacity:1;

		transform:none;

	}

}

/*======================================
Reduced Motion
======================================*/

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

	*{

		animation:none!important;

		transition:none!important;

		scroll-behavior:auto!important;

	}

}

/*==================================================
Part 4.2
Production Responsive Engine
Desktop → Tablet → Mobile
==================================================*/

/*======================================
Ultra Wide (1600px+)
======================================*/

@media (min-width:1600px){

	.tvh-container{

		max-width:1550px;

	}

	.tvh-tool-grid{

		grid-template-columns:
			repeat(
				auto-fill,
				minmax(360px,1fr)
			);

	}

}

/*======================================
Large Desktop
======================================*/

@media (max-width:1400px){

	.tvh-container{

		max-width:1280px;

	}

	.tvh-directory-layout{

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

		gap:32px;

	}

}

/*======================================
Laptop
======================================*/

@media (max-width:1200px){

	.tvh-directory-layout{

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

		gap:28px;

	}

	.tvh-tool-grid{

		grid-template-columns:
			repeat(
				auto-fill,
				minmax(300px,1fr)
			);

		gap:24px;

	}

	.tvh-tool-card{

		padding:22px;

	}

}

/*======================================
Tablet Landscape
======================================*/

@media (max-width:1024px){

	.tvh-directory-layout{

		grid-template-columns:1fr;

	}

	.tvh-directory-sidebar{

		position:relative;

		top:auto;

		order:2;

		margin-top:32px;

	}

	.tvh-directory-content{

		order:1;

	}

	.tvh-directory-toolbar{

		flex-direction:column;

		align-items:stretch;

	}

	.tvh-toolbar-actions{

		width:100%;

		justify-content:space-between;

	}

}

/*======================================
Tablet Portrait
======================================*/

@media (max-width:768px){

	.tvh-container{

		padding-inline:16px;

	}

	.tvh-directory{

		padding:40px 0 70px;

	}

	.tvh-directory-heading h1{

		font-size:34px;

	}

	.tvh-directory-heading p{

		font-size:16px;

	}

	.tvh-directory-stats{

		grid-template-columns:1fr 1fr;

		gap:16px;

	}

	.tvh-tool-grid{

		grid-template-columns:1fr;

		gap:20px;

	}

	.tvh-directory-search-box{

		flex-direction:column;

	}

	.tvh-directory-search-box input{

		width:100%;

	}

	.tvh-directory-search-box button{

		width:100%;

		height:52px;

	}

}

/*======================================
Mobile
======================================*/

@media (max-width:576px){

	.tvh-directory-heading h1{

		font-size:30px;

	}

	.tvh-directory-heading p{

		font-size:15px;

		line-height:1.7;

	}

	.tvh-directory-stats{

		grid-template-columns:1fr;

	}

	.tvh-stat{

		padding:20px;

	}

	.tvh-stat strong{

		font-size:24px;

	}

	.tvh-directory-toolbar{

		padding:18px;

	}

	.tvh-toolbar-actions{

		flex-direction:column;

		gap:12px;

	}

	.tvh-toolbar-actions>*{

		width:100%;

	}

	.tvh-directory-toolbar select{

		width:100%;

	}

	.tvh-tool-card{

		padding:18px;

		border-radius:18px;

	}

	.tvh-tool-card__top{

		gap:14px;

	}

	.tvh-tool-card__logo{

		width:60px;

		height:60px;

		flex:0 0 60px;

	}

	.tvh-tool-card__logo img{

		width:46px;

		height:46px;

	}

	.tvh-tool-card__title{

		font-size:19px;

	}

	.tvh-tool-card__description{

		font-size:14px;

	}

	.tvh-tool-card__footer{

		flex-direction:column;

		align-items:stretch;

		gap:14px;

	}

	.tvh-tool-card__actions{

		flex-direction:column;

		width:100%;

	}

	.tvh-btn{

		width:100%;

	}

}

/*======================================
Small Mobile
======================================*/

@media (max-width:400px){

	.tvh-directory-heading h1{

		font-size:26px;

	}

	.tvh-tool-card{

		padding:16px;

	}

	.tvh-tool-card__title{

		font-size:18px;

	}

	.tvh-badge{

		font-size:11px;

		padding:5px 10px;

	}

	.tvh-pagination a,

	.tvh-pagination span{

		width:36px;

		height:36px;

		font-size:12px;

	}

}

/*==================================================
Part 4.3
Final Production Polish
Performance + Accessibility + Browser Support
==================================================*/

/*======================================
Global Selection
======================================*/

::selection{

	background:rgba(41,82,227,.15);

	color:#101828;

}

::-moz-selection{

	background:rgba(41,82,227,.15);

	color:#101828;

}

/*======================================
Smooth Scroll
======================================*/

html{

	scroll-behavior:smooth;

}

/*======================================
Images
======================================*/

.tvh-directory img{

	max-width:100%;

	height:auto;

	display:block;

}

/*======================================
SVG
======================================*/

.tvh-directory svg{

	display:block;

	flex-shrink:0;

}

/*======================================
Link Transition
======================================*/

.tvh-directory a{

	transition:

	color .25s ease,

	background .25s ease,

	border-color .25s ease,

	transform .25s ease,

	box-shadow .25s ease;

}

/*======================================
Form Controls
======================================*/

.tvh-directory input,
.tvh-directory select,
.tvh-directory textarea,
.tvh-directory button{

	font:inherit;

	-webkit-appearance:none;

	appearance:none;

}

/*======================================
Focus Visible
======================================*/

.tvh-directory a:focus-visible,
.tvh-directory button:focus-visible,
.tvh-directory input:focus-visible,
.tvh-directory select:focus-visible{

	outline:none;

	box-shadow:0 0 0 4px rgba(41,82,227,.18);

	border-radius:10px;

}

/*======================================
Performance
======================================*/

.tvh-tool-card{

	will-change:transform;

	backface-visibility:hidden;

	transform:translateZ(0);

}

.tvh-tool-grid{

	contain:layout style;

}

/*======================================
Scrollbar
======================================*/

.tvh-directory ::-webkit-scrollbar{

	width:10px;

	height:10px;

}

.tvh-directory ::-webkit-scrollbar-track{

	background:#f4f4f5;

}

.tvh-directory ::-webkit-scrollbar-thumb{

	background:#cbd5e1;

	border-radius:999px;

}

.tvh-directory ::-webkit-scrollbar-thumb:hover{

	background:#94a3b8;

}

/*======================================
Dark Mode Ready
======================================*/

[data-theme="dark"] .tvh-directory{

	background:#0f172a;

}

[data-theme="dark"] .tvh-tool-card{

	background:#111827;

	border-color:#1f2937;

}

[data-theme="dark"] .tvh-tool-card__title{

	color:#f8fafc;

}

[data-theme="dark"] .tvh-tool-card__description{

	color:#cbd5e1;

}

[data-theme="dark"] .tvh-directory-sidebar{

	background:#111827;

	border-color:#1f2937;

}

/*======================================
Print
======================================*/

@media print{

	.tvh-directory-search,
	.tvh-directory-toolbar,
	.tvh-directory-sidebar,
	.tvh-pagination{

		display:none !important;

	}

	.tvh-directory{

		background:#fff;

		padding:0;

	}

	.tvh-tool-grid{

		display:block;

	}

	.tvh-tool-card{

		page-break-inside:avoid;

		margin-bottom:20px;

		box-shadow:none;

		border:1px solid #ddd;

	}

}

/*======================================
Reduced Motion
======================================*/

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

	html{

		scroll-behavior:auto;

	}

	.tvh-directory *,
	.tvh-directory *::before,
	.tvh-directory *::after{

		animation:none !important;

		transition:none !important;

	}

}

/*======================================
High Contrast
======================================*/

@media (prefers-contrast:more){

	.tvh-tool-card{

		border-width:2px;

	}

	.tvh-btn{

		border-width:2px;

	}

}

/*======================================
Safe Area
======================================*/

@supports (padding:max(0px)){

	.tvh-directory{

		padding-left:max(0px, env(safe-area-inset-left));

		padding-right:max(0px, env(safe-area-inset-right));

	}

}

/*======================================
End of Directory CSS
TrueVitaHub v2 Production
==================================================*/


/*==================================================
Part 4.4
Production Cleanup
Utilities + Browser Fixes + Final Polish
==================================================*/

/*======================================
Universal Box Model
======================================*/

.tvh-directory *,
.tvh-directory *::before,
.tvh-directory *::after{

	box-sizing:border-box;

}

/*======================================
Prevent Layout Shift
======================================*/

.tvh-tool-card,
.tvh-stat,
.tvh-directory-sidebar,
.tvh-directory-toolbar{

	contain:layout paint;

}

/*======================================
Image Rendering
======================================*/

.tvh-tool-card img{

	display:block;

	width:100%;

	height:auto;

	image-rendering:auto;

	object-fit:cover;

}

/*======================================
Text Overflow
======================================*/

.tvh-tool-card__title,
.tvh-tool-card__description,
.tvh-tool-card__company{

	word-break:break-word;

	overflow-wrap:anywhere;

}

/*======================================
Button Improvements
======================================*/

.tvh-btn{

	user-select:none;

	-webkit-user-select:none;

	touch-action:manipulation;

}

.tvh-btn:active{

	transform:scale(.98);

}

/*======================================
Form Controls
======================================*/

.tvh-directory input,
.tvh-directory select,
.tvh-directory textarea{

	background:#fff;

	border:1px solid var(--tvh-border);

	color:var(--tvh-text);

}

/*======================================
Anchor Improvements
======================================*/

.tvh-directory a{

	text-decoration:none;

}

.tvh-directory a:hover{

	text-decoration:none;

}

/*======================================
SVG Icons
======================================*/

.tvh-directory svg{

	width:1em;

	height:1em;

	fill:currentColor;

}

/*======================================
Badges
======================================*/

.tvh-badge{

	white-space:nowrap;

}

/*======================================
Logo Placeholder
======================================*/

.tvh-tool-card__placeholder{

	user-select:none;

}

/*======================================
Scrollbar Firefox
======================================*/

.tvh-directory{

	scrollbar-width:thin;

	scrollbar-color:#CBD5E1 transparent;

}

/*======================================
Loading Spinner
======================================*/

.tvh-spinner{

	width:34px;

	height:34px;

	border-radius:50%;

	border:3px solid #E5E7EB;

	border-top-color:var(--tvh-primary);

	animation:tvhSpin .8s linear infinite;

}

@keyframes tvhSpin{

	to{

		transform:rotate(360deg);

	}

}

/*======================================
Fade Helpers
======================================*/

.tvh-fade-in{

	animation:tvhFadeIn .35s ease;

}

.tvh-slide-up{

	animation:tvhSlideUp .35s ease;

}

@keyframes tvhSlideUp{

	from{

		opacity:0;

		transform:translateY(20px);

	}

	to{

		opacity:1;

		transform:none;

	}

}

/*======================================
Selection
======================================*/

.tvh-directory *::selection{

	background:#2952E3;

	color:#fff;

}

/*======================================
Reduced Motion
======================================*/

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

	.tvh-spinner{

		animation:none;

	}

}

/*======================================
End Marker
======================================*/

/*

TrueVitaHub
AI Directory
Version 2.0

Foundation ✔
Hero ✔
Toolbar ✔
Sidebar ✔
Filters ✔
Cards ✔
Grid ✔
List View ✔
Pagination ✔
Empty State ✔
Skeleton ✔
Utilities ✔
Responsive ✔
Accessibility ✔
Performance ✔

END OF FILE

*/