/* ============================================================
   NTS Sprint 3 — Design Fidelity
   Version: 20260623-sprint3
   ============================================================ */

/* ============================================================
   1. HEADER — Remove Flatsome legacy uppercase/heavy visual
   ============================================================ */

/* Override Flatsome inline CSS that forces uppercase on nav */
.nav-uppercase > li > a,
#masthead .header-nav-main.nav-uppercase > li > a {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

#masthead .header-nav-main > li > a,
.header-nav-main > li > a {
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--nts-blue-900) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

#masthead .header-nav-main > li > a:hover,
.header-nav-main > li > a:hover {
	color: var(--nts-gold-ink) !important;
}

/* Gold underline on hover/active */
.header-nav-main.nav-line-bottom > li > a:before,
.header-nav-main.nav-line-grow > li > a:before,
.header-nav-main.nav-line > li > a:before {
	background-color: var(--nts-gold) !important;
	height: 2px !important;
}

/* Cart icon — NTS blue */
.header-main .cart-icon strong {
	background: var(--nts-blue) !important;
	border-color: var(--nts-blue) !important;
}

/* Header clean background */
#masthead, .header-main {
	background: #fff !important;
}

/* ============================================================
   2. HOMEPAGE HERO — Warmer, lighter, product-forward
   ============================================================ */

/* Lighten the hero: less dark, warm gold radial on right */
.nts-home-hero {
	background:
		linear-gradient(110deg,
			rgba(20, 38, 76, .90) 0%,
			rgba(30, 52, 112, .78) 48%,
			rgba(20, 38, 76, .68) 100%) !important;
	min-height: 500px;
	display: flex;
	align-items: center;
}

.nts-home-hero:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 44%;
	height: 100%;
	background: radial-gradient(ellipse at 70% 28%, rgba(207, 186, 141, .14), transparent 58%);
	pointer-events: none;
	z-index: 0;
}

.nts-home-hero__inner {
	padding: 64px 24px 52px;
	align-items: center;
	min-height: 500px;
}

.nts-home-hero h1 {
	font-size: 40px;
	line-height: 1.14;
	font-family: 'Montserrat', sans-serif !important;
}

/* Panel — product category tiles */
.nts-home-hero__panel {
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 20px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(207, 186, 141, .30);
	border-radius: 12px;
}

.nts-home-hero__panel span {
	min-height: 58px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(207, 186, 141, .26);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ============================================================
   3. CATEGORY CARDS — Lighter, premium-cream style
   ============================================================ */

/* All cards: clean reset */
.nts-category-card {
	background: #fff !important;
	border: 1.5px solid var(--nts-line) !important;
	box-shadow: 0 2px 10px rgba(19, 36, 79, .05);
	color: var(--nts-ink) !important;
	min-height: 148px;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Remove dark gradient overlay from ALL cards */
.nts-category-card:before {
	display: none !important;
}

/* Cards WITHOUT image (class: default): white card with gold left accent */
.nts-category-card:not(.nts-category-card--has-img) {
	padding: 22px 20px 18px 24px;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 6px;
}

.nts-category-card:not(.nts-category-card--has-img):before {
	display: block !important;
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: 0 !important;
	width: 4px !important;
	height: 100% !important;
	background: var(--nts-gold) !important;
	opacity: 1 !important;
	border-radius: var(--nts-radius) 0 0 var(--nts-radius) !important;
}

.nts-category-card:not(.nts-category-card--has-img) .nts-category-card__label {
	color: var(--nts-blue) !important;
	position: static !important;
	z-index: 1;
	font-size: 17px;
}

.nts-category-card:not(.nts-category-card--has-img) .nts-category-card__sub {
	color: var(--nts-muted) !important;
	position: static !important;
	z-index: 1;
	font-size: 12px;
	letter-spacing: .04em;
}

/* Cards WITH image: lighter overlay */
.nts-category-card--has-img {
	color: #fff !important;
}

.nts-category-card--has-img:before {
	display: block !important;
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(145deg, rgba(19, 36, 79, .76), rgba(30, 52, 112, .52)) !important;
	opacity: 1 !important;
	border-radius: var(--nts-radius) !important;
}

.nts-category-card--has-img .nts-category-card__label,
.nts-category-card--has-img .nts-category-card__sub {
	position: relative !important;
	z-index: 1;
	color: #fff !important;
}

.nts-category-card--has-img .nts-category-card__sub {
	color: var(--nts-gold) !important;
}

/* Hover state for all cards */
.nts-category-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 14px 36px rgba(19, 36, 79, .13) !important;
	border-color: var(--nts-gold) !important;
}

/* ============================================================
   4. SECTION RHYTHM
   ============================================================ */

/* Trust strip: softer background */
.nts-trust-strip {
	background: var(--nts-soft);
	border-top: none;
}

.nts-trust-strip__inner div {
	background: #fff;
	box-shadow: 0 1px 5px rgba(19, 36, 79, .05);
	border-radius: 8px;
}

/* Section spacing */
.nts-section-wrap {
	padding-top: 48px;
	padding-bottom: 48px;
}

.nts-section-header h2 {
	font-size: 26px;
	font-family: 'Montserrat', sans-serif !important;
	letter-spacing: -.01em;
	text-transform: none !important;
}

/* Factory band: cleaner stat cards */
.nts-factory-band {
	padding: 54px 24px;
}

.nts-factory-band__stat {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(207, 186, 141, .28);
	padding: 24px 20px;
}

.nts-factory-band__stat strong {
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 8px;
}

/* B2B strip: border instead of yellow border */
.nts-b2b-strip {
	border: 1.5px solid var(--nts-line) !important;
	background: var(--nts-cream);
}

.nts-b2b-strip h3 {
	font-family: 'Montserrat', sans-serif !important;
	font-size: 20px;
	letter-spacing: -.01em;
}

/* ============================================================
   5. PRODUCT CARD SYSTEM — NTS Design Language
   ============================================================ */

/* Product loop items: clean NTS card */
.woocommerce ul.products li.product,
ul.products li.product {
	border: 1.5px solid var(--nts-line) !important;
	border-radius: var(--nts-radius) !important;
	background: #fff !important;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	padding: 0 !important;
	box-shadow: none !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(19, 36, 79, .12) !important;
	border-color: var(--nts-gold) !important;
}

/* Inner card: no extra box styling */
.woocommerce ul.products li.product .col-inner,
ul.products li.product .col-inner {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Product image — consistent 4:3 ratio */
.woocommerce ul.products li.product .box-image,
ul.products li.product .box-image {
	margin: 0;
	overflow: hidden;
	border-radius: 0;
}

.woocommerce ul.products li.product .box-image img,
ul.products li.product .box-image img,
.woocommerce ul.products li.product a > img,
ul.products li.product a > img {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: 0 !important;
	display: block !important;
}

/* Remove image-cover padding hack from Flatsome */
.woocommerce ul.products li.product .image-cover,
ul.products li.product .image-cover {
	padding-top: 0 !important;
	height: 200px !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .name.product-title,
.woocommerce ul.products li.product h2.product-title,
.woocommerce ul.products li.product p.product-title {
	color: var(--nts-ink) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	padding: 12px 14px 6px !important;
	margin: 0 !important;
	font-family: 'Be Vietnam Pro', sans-serif !important;
}

/* Price block */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price,
ul.products li.product .price {
	color: var(--nts-blue) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 0 14px 6px !important;
	margin: 0 !important;
	display: block !important;
}

.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
	color: var(--nts-muted) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
	text-decoration: none !important;
}

/* Prefix "Giá: " keep but muted */
.woocommerce ul.products li.product .price .mh-prefix,
ul.products li.product .price .mh-prefix {
	display: none !important;
}

/* Card badges */
.nts-card-badges {
	padding: 0 14px 8px;
}

.nts-card-badges span {
	height: 20px;
	padding: 0 7px;
	border: 1px solid var(--nts-line);
	border-radius: 4px;
	background: var(--nts-soft);
	color: var(--nts-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .03em;
}

/* Add to cart button */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product a.button,
ul.products li.product .button {
	display: block !important;
	width: calc(100% - 28px) !important;
	margin: 0 14px 14px !important;
	padding: 9px 14px !important;
	background: var(--nts-blue) !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-align: center !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: none !important;
	box-sizing: border-box !important;
	transition: background .18s ease !important;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button:hover {
	background: var(--nts-blue-900) !important;
	color: #fff !important;
}

/* Sale badge — refined */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--nts-gold-ink) !important;
	color: #fff !important;
	border-radius: 4px !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	padding: 3px 8px !important;
	min-height: unset !important;
	min-width: unset !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	line-height: 1.4 !important;
}

/* Product grid — homepage 4 col */
.nts-homepage .products.row,
.nts-homepage ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
}

.nts-homepage .products.row li.product,
.nts-homepage ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* ============================================================
   6. ARCHIVE — Remove legacy banner & sidebar
   ============================================================ */

/* Hide legacy mh_banner_blog output (mh-page-title block, page-header-wrapper) */
body.tax-product_cat .mh-page-title,
body.tax-product_cat .page-header-wrapper,
body.tax-product_cat .page-title.featured-title,
body.post-type-archive-product .mh-page-title,
body.post-type-archive-product .page-header-wrapper,
body.post-type-archive-product .page-title.featured-title {
	display: none !important;
}

/* Hide Flatsome built-in category title block */
body.tax-product_cat .shop-page-title,
body.tax-product_cat .category-page-title,
body.post-type-archive-product .shop-page-title {
	display: none !important;
}

/* Hide archive sidebar */
body.tax-product_cat #shop-sidebar,
body.post-type-archive-product #shop-sidebar {
	display: none !important;
}

/* Archive intro: NTS styled */
body.tax-product_cat .nts-archive-intro {
	max-width: var(--nts-container);
	margin: 0 auto;
	padding: 32px 24px 16px;
	text-align: left;
}

body.tax-product_cat .nts-archive-intro h2 {
	color: var(--nts-blue);
	font-size: 24px;
	text-transform: none !important;
	letter-spacing: -.01em;
	font-family: 'Montserrat', sans-serif !important;
	margin-bottom: 8px;
}

body.tax-product_cat .nts-archive-intro p {
	max-width: 660px;
	color: var(--nts-muted);
	font-size: 14px;
}

/* Chips on archive: full-width positioned */
body.tax-product_cat .nts-chips-wrap.is-archive,
body.post-type-archive-product .nts-chips-wrap.is-archive {
	max-width: var(--nts-container);
	margin: 0 auto;
	padding: 0 24px 20px;
}

/* Archive product grid: override Flatsome float columns → CSS grid */
body.tax-product_cat ul.products,
body.tax-product_cat .products.row,
body.post-type-archive-product ul.products,
body.post-type-archive-product .products.row {
	max-width: var(--nts-container);
	margin: 0 auto !important;
	padding: 8px 24px 32px !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	float: none !important;
}

body.tax-product_cat ul.products li.product,
body.tax-product_cat .products.row li.product,
body.post-type-archive-product ul.products li.product {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/* ============================================================
   7. PDP — Remove legacy banner & sidebar, improve layout
   ============================================================ */

/* Hide legacy banners on PDP */
body.single-product .mh-page-title,
body.single-product .page-header-wrapper,
body.single-product .page-title.featured-title {
	display: none !important;
}

/* Hide sidebar on PDP */
body.single-product #shop-sidebar {
	display: none !important;
}

/* PDP title */
body.single-product h1.product_title {
	color: var(--nts-blue) !important;
	font-size: 26px !important;
	line-height: 1.3 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
	font-family: 'Montserrat', sans-serif !important;
	margin-bottom: 10px !important;
}

/* PDP price */
body.single-product p.price,
body.single-product span.price,
body.single-product .price {
	color: var(--nts-blue) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	margin-bottom: 14px;
}

/* PDP add to cart */
body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button {
	background: var(--nts-blue) !important;
	border-radius: 8px !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 14px 28px !important;
	transition: background .2s ease !important;
	border: none !important;
}

body.single-product .single_add_to_cart_button:hover {
	background: var(--nts-blue-900) !important;
}

/* Spec table: boxed NTS style */
.nts-spec-table-wrap {
	margin-top: 24px;
	border: 1px solid var(--nts-line);
	border-radius: var(--nts-radius);
	overflow: hidden;
}

.nts-spec-title {
	background: var(--nts-soft);
	padding: 12px 18px;
	margin: 0;
	border-bottom: 1px solid var(--nts-line);
	font-family: 'Montserrat', sans-serif !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: var(--nts-blue) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.nts-spec-table {
	width: 100%;
	border-collapse: collapse;
}

.nts-spec-table tr:nth-child(even) {
	background: var(--nts-soft);
}

.nts-spec-table th {
	width: 40%;
	padding: 9px 18px;
	color: var(--nts-muted);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid var(--nts-line);
}

.nts-spec-table td {
	padding: 9px 18px;
	color: var(--nts-ink);
	font-size: 13px;
	border-bottom: 1px solid var(--nts-line);
}

/* Product advisor: cream card */
.nts-product-advisor {
	background: var(--nts-cream);
	border: 1px solid var(--nts-line);
	border-radius: var(--nts-radius);
	padding: 22px 24px;
	margin-top: 24px;
}

.nts-product-advisor .nts-eyebrow {
	font-size: 11px;
}

.nts-product-advisor h3 {
	color: var(--nts-blue);
	font-size: 16px;
	line-height: 1.45;
	margin-bottom: 12px;
	font-family: 'Montserrat', sans-serif !important;
	letter-spacing: -.01em;
}

.nts-product-advisor ul {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.nts-product-advisor ul li {
	padding: 5px 0 5px 18px;
	position: relative;
	color: var(--nts-muted);
	font-size: 13px;
	line-height: 1.5;
}

.nts-product-advisor ul li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--nts-ok);
	font-weight: 800;
	font-size: 12px;
}

/* ============================================================
   8. TYPOGRAPHY SYSTEM — Override Flatsome Oswald
   ============================================================ */

body, .site {
	font-family: 'Be Vietnam Pro', sans-serif !important;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
	font-family: 'Montserrat', sans-serif !important;
	text-transform: none !important;
	letter-spacing: -.01em;
}

/* Price fields use Inter */
.price, .woocommerce-Price-amount, .amount {
	font-family: 'Inter', sans-serif;
}

/* ============================================================
   9. RESPONSIVE — Sprint 3
   ============================================================ */

@media only screen and (max-width: 1200px) {
	body.tax-product_cat ul.products,
	body.tax-product_cat .products.row {
		grid-template-columns: repeat(3, 1fr) !important;
	}

	.nts-homepage .products.row,
	.nts-homepage ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media only screen and (max-width: 860px) {
	.nts-home-hero__inner {
		grid-template-columns: 1fr;
		padding: 48px 20px 40px;
		min-height: auto;
	}

	.nts-home-hero__panel {
		display: none !important;
	}

	.nts-home-hero h1 {
		font-size: 30px;
	}

	body.tax-product_cat ul.products,
	body.tax-product_cat .products.row {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 8px 16px 24px !important;
	}

	.nts-homepage .products.row,
	.nts-homepage ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.nts-trust-strip__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 640px) {
	.nts-home-hero h1 {
		font-size: 26px;
	}

	.nts-trust-strip__inner {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	body.tax-product_cat ul.products,
	body.tax-product_cat .products.row {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.nts-homepage .products.row,
	.nts-homepage ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.nts-b2b-strip {
		flex-direction: column !important;
		padding: 24px 20px !important;
	}

	.nts-factory-band__stats {
		grid-template-columns: 1fr !important;
	}
}