/**
 * Product page — 11467-style SEO layout.
 * 1. Full-width title
 * 2. Image left | summary table right
 * 3. Detailed introduction below
 */

body.usfp-listing-view {
	--usfp-listing-accent: #b71c1c;
	--usfp-listing-accent-dark: #8b0000;
	--usfp-listing-border: #e0e0e0;
	--usfp-listing-bg: #f5f5f5;
}

body.usfp-listing-view .site-content {
	background: var(--usfp-listing-bg);
}

body.usfp-listing-view .hp-page__sidebar {
	display: none !important;
}

body.usfp-listing-view .hp-page__topbar,
body.usfp-listing-view .hp-listing__details--primary {
	display: none !important;
}

body.usfp-listing-view .hp-page__content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	padding: 0;
}

/* Breadcrumb */
body.usfp-listing-view .hp-menu--breadcrumb {
	margin: 0 0 0.65rem;
	padding: 0;
	font-size: 0.78rem;
}

body.usfp-listing-view .hp-menu--breadcrumb a {
	color: #666;
	text-decoration: none;
}

body.usfp-listing-view .hp-menu--breadcrumb a:hover {
	color: var(--usfp-listing-accent);
}

/* SEO title — full width */
body.usfp-listing-view .usfp-listing-seo-title,
body.usfp-listing-view h1.hp-listing__title.usfp-listing-seo-title {
	margin: 0 0 0.85rem;
	padding: 0.65rem 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--usfp-listing-accent);
	border-bottom: 1px solid var(--usfp-listing-border);
}

body.usfp-listing-view .usfp-listing-seo-title .hp-listing__verified-badge,
body.usfp-listing-view h1.usfp-listing-seo-title .hp-listing__verified-badge {
	display: inline-block;
	margin-left: 0.5rem;
	vertical-align: middle;
	font-size: 0.65rem;
}

/* Main grid — 11467: title full width, then image | specs, then detail */
body.usfp-listing-view .hp-page__content {
	display: grid;
	grid-template-columns: minmax(200px, 36%) minmax(0, 1fr);
	grid-template-areas:
		"breadcrumb breadcrumb"
		"title title"
		"gallery specs"
		"detail detail"
		"factory factory"
		"products products"
		"related related";
	gap: 0 1.25rem;
	align-items: start;
}

body.usfp-listing-view .hp-page__content > .hp-menu--breadcrumb,
body.usfp-listing-view .hp-page__content > nav.hp-menu--breadcrumb {
	grid-area: breadcrumb;
}

body.usfp-listing-view .hp-page__content > h1,
body.usfp-listing-view .hp-page__content > .hp-listing__title {
	grid-area: title;
}

/* Gallery — left column */
body.usfp-listing-view .hp-page__content > .hp-listing__images {
	grid-area: gallery;
	max-width: 100%;
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--usfp-listing-border);
	padding: 8px;
}

body.usfp-listing-view .hp-listing__images > img,
body.usfp-listing-view .usfp-listing-gallery > img {
	display: block;
	width: 100%;
	max-height: 320px;
	object-fit: contain;
	background: #fafafa;
}

body.usfp-listing-view .hp-listing__images-slider {
	max-width: 100%;
}

body.usfp-listing-view .hp-listing__images-slider .slick-slide {
	aspect-ratio: 4 / 3 !important;
	max-height: 320px !important;
}

body.usfp-listing-view .hp-listing__images-slider img,
body.usfp-listing-view .hp-listing__images-slider video {
	object-fit: contain !important;
	max-height: 320px;
}

body.usfp-listing-view .hp-listing__images-carousel {
	margin-top: 8px;
}

body.usfp-listing-view .hp-listing__images-carousel .slick-slide img {
	max-height: 52px;
	object-fit: cover;
}

/* Summary table — right column */
body.usfp-listing-view .hp-page__content > .usfp-listing-spec {
	grid-area: specs;
	background: #fff;
	border: 1px solid var(--usfp-listing-border);
	padding: 0;
}

.usfp-listing-spec__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
}

.usfp-listing-spec__table th {
	width: 32%;
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	color: #666;
	text-align: right;
	vertical-align: top;
	background: #fafafa;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
}

.usfp-listing-spec__table td {
	padding: 0.5rem 0.75rem;
	color: #222;
	border-bottom: 1px solid #eee;
	vertical-align: top;
	word-break: break-word;
}

.usfp-listing-spec__table tr:last-child th,
.usfp-listing-spec__table tr:last-child td {
	border-bottom: none;
}

.usfp-listing-spec__table a {
	color: var(--usfp-listing-accent);
	text-decoration: none;
}

.usfp-listing-spec__table a:hover {
	text-decoration: underline;
}

.usfp-listing-spec__hot,
.usfp-listing-spec__hot a {
	color: var(--usfp-listing-accent);
	font-weight: 700;
}

.usfp-listing-spec__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.85rem 0.75rem;
	border-top: 1px solid #eee;
	background: #fafafa;
}

.usfp-listing-spec__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	font-size: 0.84rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
	border: 1px solid #ccc;
	color: #333;
	background: #fff;
}

.usfp-listing-spec__btn--primary {
	color: #fff;
	background: var(--usfp-listing-accent);
	border-color: var(--usfp-listing-accent);
}

.usfp-listing-spec__btn--primary:hover {
	background: var(--usfp-listing-accent-dark);
	border-color: var(--usfp-listing-accent-dark);
	color: #fff;
}

.usfp-listing-spec__btn--outline {
	color: var(--usfp-listing-accent);
	border-color: var(--usfp-listing-accent);
}

.usfp-listing-spec__btn:hover {
	opacity: 0.92;
}

/* Detailed introduction — full width */
body.usfp-listing-view .hp-page__content > .usfp-listing-detail {
	grid-area: detail;
	margin: 1rem 0;
	background: #fff;
	border: 1px solid var(--usfp-listing-border);
	padding: 1rem 1.15rem;
}

.usfp-listing-detail__heading {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.85rem;
	padding-bottom: 0.55rem;
	font-size: 1rem;
	font-weight: 700;
	color: #222;
	border-bottom: 2px solid var(--usfp-listing-accent);
}

.usfp-listing-detail__icon {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--usfp-listing-accent);
	flex-shrink: 0;
}

.usfp-listing-detail__grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
	margin-bottom: 1rem;
}

.usfp-listing-detail__grid th,
.usfp-listing-detail__grid td {
	padding: 0.45rem 0.65rem;
	border: 1px solid #ececec;
	vertical-align: top;
}

.usfp-listing-detail__grid th {
	width: 12%;
	font-weight: 600;
	color: #666;
	background: #fafafa;
	text-align: right;
	white-space: nowrap;
}

.usfp-listing-detail__grid td {
	width: 38%;
	color: #222;
	background: #fff;
}

.usfp-listing-detail__body {
	font-size: 0.9rem;
	line-height: 1.75;
	color: #333;
}

.usfp-listing-detail__body p:first-child {
	margin-top: 0;
}

.usfp-listing-detail__body h2,
.usfp-listing-detail__body h3 {
	margin: 1.25rem 0 0.5rem;
	font-size: 1rem;
	color: #222;
}

.usfp-listing-detail__empty {
	margin: 0;
	color: #888;
	font-size: 0.875rem;
}

/* Below sections */
body.usfp-listing-view .hp-page__content > .usfp-listing-factory {
	grid-area: factory;
}

body.usfp-listing-view .hp-page__content > .usfp-vendor-products {
	grid-area: products;
}

body.usfp-listing-view .hp-page__content > .usfp-vendor-related {
	grid-area: related;
}

@media (max-width: 991px) {
	body.usfp-listing-view .hp-page__content {
		grid-template-columns: minmax(180px, 42%) minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	body.usfp-listing-view .hp-page__content {
		grid-template-columns: 1fr;
		grid-template-areas:
			"breadcrumb"
			"title"
			"gallery"
			"specs"
			"detail"
			"factory"
			"products"
			"related";
	}

	body.usfp-listing-view .usfp-listing-detail__grid th,
	body.usfp-listing-view .usfp-listing-detail__grid td {
		display: block;
		width: 100%;
		text-align: left;
	}

	body.usfp-listing-view .usfp-listing-detail__grid tr {
		display: block;
		margin-bottom: 0.5rem;
	}
}