/* Industrial Tape Product Detail — editorial engineering / procurement layout. */

.itc-main {
	background: var(--itc-surface);
	color: var(--itc-text);
	font-family: inherit;
	line-height: 1.6;
}

.itc-container { max-width: var(--itc-container); margin-inline: auto; padding-inline: var(--itc-space-6); }

/* ---------- S1 Breadcrumb ---------- */
.itc-breadcrumb {
	font-size: 13px;
	color: var(--itc-muted);
	padding: 28px 0 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.itc-breadcrumb a { color: var(--itc-muted); text-decoration: none; }
.itc-breadcrumb a:hover { color: var(--itc-primary); }
.itc-breadcrumb .sep { color: #c2ccd6; }
.itc-breadcrumb .current { color: var(--itc-text); font-weight: 600; }

/* ---------- S1 Hero (asymmetric) ---------- */
.itc-hero { align-items: center; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(var(--itc-space-10), 5vw, var(--itc-space-22)); padding: var(--itc-space-6) 0 var(--itc-space-22); }
/* DOM order is media then info; on desktop put info left, media right. */
.itc-hero__info  { order: 1; min-width: 0; padding-block: var(--itc-space-6); }
.itc-hero__media { order: 2; min-width: 0; }

.itc-hero-figure {
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--itc-border) 70%, transparent);
	border-radius: var(--itc-radius-lg);
	background: color-mix(in srgb, var(--itc-surface-subtle) 58%, transparent);
	min-height: 510px;
	padding: clamp(var(--itc-space-6), 3.2vw, var(--itc-space-12));
	display: flex;
	align-items: center;
	justify-content: center;
}
.itc-hero-figure img {
	max-height: 570px;
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;       /* never crop the main image */
}
.itc-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--itc-space-3); margin-top: var(--itc-space-4); }
.itc-thumb {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	line-height: 0;
	margin: 0;
	border: 1px solid var(--itc-border);
	border-radius: var(--itc-radius-md);
	background: var(--itc-surface);
	padding: 0;
	cursor: pointer;
	width: 72px;
	height: 72px;
	overflow: hidden;
	opacity: 0.75;
	transition: border-color var(--itc-transition), opacity var(--itc-transition);
}
.itc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itc-thumb.is-active, .itc-thumb:hover { border-color: var(--itc-primary); opacity: 1; }

.itc-noimg {
	border: 1px dashed var(--itc-border);
	border-radius: var(--itc-radius-lg);
	background: var(--itc-surface-subtle);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--itc-muted);
	font-size: 14px;
}
.itc-noimg--sm { aspect-ratio: 4 / 3; font-size: 12px; }

/* ---------- Hero info ---------- */
.itc-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--itc-accent);
	text-transform: uppercase;
	margin-bottom: var(--itc-space-4);
}
.itc-title {
	font-size: clamp(2.45rem, 3.4vw, 4.4rem);
	line-height: .99;
	font-weight: 760;
	letter-spacing: -.055em;
	color: var(--itc-primary);
	margin: 0 0 var(--itc-space-5);
}
.itc-code { font-size: 12px; color: var(--itc-muted); letter-spacing: .04em; margin-bottom: var(--itc-space-5); text-transform: uppercase; }
.itc-short {
	font-size: clamp(1rem, .95rem + .22vw, 1.125rem);
	color: var(--itc-text);
	margin: 0 0 var(--itc-space-5);
	max-width: 44ch;
}
.itc-keyfacts {
	border-left: 2px solid var(--itc-accent);
	font-size: 14px;
	font-weight: 700;
	color: var(--itc-primary);
	margin: 0 0 var(--itc-space-8);
	padding-left: var(--itc-space-4);
	letter-spacing: .01em;
}

/* ---------- CTA ---------- */
.itc-cta-row { display: flex; gap: var(--itc-space-3); flex-wrap: wrap; }
.itc-cta-row--center { justify-content: center; }
.itc-btn {
	display: inline-flex;
	text-decoration: none;
}
.itc-btn--primary {
	background: var(--itc-primary);
	color: #fff;
}
.itc-btn--primary:hover { background: var(--itc-accent); }
.itc-btn--ghost {
	background: transparent;
	color: var(--itc-primary);
	border: 1.5px solid var(--itc-primary);
}
.itc-btn--ghost:hover { background: var(--itc-primary); color: #fff; }

/* ---------- Generic section + visual rhythm (NOT uniform 64px) ---------- */
.itc-section { padding-block: var(--itc-space-18); }
.itc-section--sm { padding-block: var(--itc-space-16); }
.itc-section--lg { padding-block: var(--itc-space-22); }
.itc-h2 {
	font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem);
	font-weight: 750;
	letter-spacing: -.035em;
	line-height: 1.12;
	color: var(--itc-primary);
	margin: 0 0 var(--itc-space-8);
}
.itc-h2::before { display: none; }
.itc-h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-top: var(--itc-space-4);
	background: var(--itc-accent);
}

/* ---------- S2 Available Specifications (Key/Value, no cards) ---------- */
.itc-availspec { border-top: 1px solid var(--itc-border); }
.itc-kv { border-bottom: 1px solid var(--itc-border); border-top: 1px solid var(--itc-border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.itc-kv__row {
	display: grid;
	gap: var(--itc-space-2);
	min-height: 112px;
	padding: var(--itc-space-5) var(--itc-space-6);
	border-bottom: 1px solid var(--itc-border);
}
.itc-kv__row:nth-child(odd) { border-right: 1px solid var(--itc-border); }
.itc-kv__row:nth-last-child(-n + 2) { border-bottom: 0; }
.itc-kv:has(.itc-kv__row:only-child) { grid-template-columns: minmax(0, 420px); }
.itc-kv:has(.itc-kv__row:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itc-kv:has(.itc-kv__row:nth-child(3):last-child) .itc-kv__row { border-bottom: 0; }
.itc-kv__label {
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--itc-muted);
	margin: 0;
}
.itc-kv__value {
	font-size: clamp(1.05rem, 1rem + .25vw, 1.25rem);
	font-weight: 700;
	color: var(--itc-primary);
	margin: 0;
	white-space: pre-line;
	line-height: 1.35;
}

/* ---------- S3 Key Advantages (divided 2-col list, no boxes) ---------- */
.itc-adv-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--itc-space-16);
	max-width: 980px;
}
.itc-adv-item {
	padding: var(--itc-space-5) 0 var(--itc-space-6);
	border-top: 1px solid var(--itc-border);
}
.itc-adv-item__t {
	font-size: 1rem;
	font-weight: 750;
	color: var(--itc-primary);
	margin: 0 0 var(--itc-space-2);
}
.itc-adv-item__d {
	font-size: 14px;
	color: var(--itc-muted);
	margin: 0;
	line-height: 1.6;
}

/* ---------- S5 Overview prose ---------- */
.itc-prose {
	font-size: 16px;
	line-height: 1.7;
	color: var(--itc-text);
	max-width: 72ch;
}
.itc-prose p { margin: 0 0 16px; }
.itc-prose img { max-width: 100%; height: auto; border-radius: var(--itc-radius-lg); }

/* ---------- S6 Technical Specifications table ---------- */
.itc-tech-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 900px;
}
.itc-tech-table th, .itc-tech-table td {
	text-align: left;
	padding: var(--itc-space-5) var(--itc-space-6);
	border-bottom: 1px solid var(--itc-border);
	font-size: 16px;
	vertical-align: top;
}
.itc-tech-table th {
	color: var(--itc-muted);
	font-weight: 700;
	width: 40%;
}
.itc-tech-table td { color: var(--itc-text); font-weight: 700; }
.itc-tech-table tr:hover td, .itc-tech-table tr:hover th { background: var(--itc-surface-subtle); }

/* ---------- S7 Processing & Customization (capability list) ---------- */
.itc-caps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 var(--itc-space-10);
	max-width: 840px;
}
.itc-caps__item {
	display: flex;
	align-items: center;
	gap: var(--itc-space-3);
	padding: var(--itc-space-4) 0;
	border-bottom: 1px solid var(--itc-border);
	font-size: 16px;
	font-weight: 600;
	color: var(--itc-primary);
}
.itc-caps__mark { color: var(--itc-accent); font-weight: 700; }

/* ---------- S8 Taxonomy chips ---------- */
.itc-tax { max-width: 920px; }
.itc-tax__group { margin-bottom: 26px; }
.itc-tax__group:last-child { margin-bottom: 0; }
.itc-tax__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--itc-muted);
	margin-bottom: 12px;
}
.itc-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.itc-chip {
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--itc-surface-subtle);
	color: var(--itc-primary);
	border: 1px solid var(--itc-border);
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.itc-chip:hover { border-color: var(--itc-accent); color: var(--itc-accent); }

/* ---------- S9 Technical Data Sheet (download bar) ---------- */
.itc-doc {
	display: grid;
	align-items: center;
	grid-template-columns: auto 1fr auto;
	gap: var(--itc-space-3);
	border-bottom: 1px solid var(--itc-border);
	border-top: 1px solid var(--itc-border);
	max-width: 840px;
	padding: var(--itc-space-5) 0;
	text-decoration: none;
	color: var(--itc-primary);
	transition: border-color var(--itc-transition), color var(--itc-transition);
}
.itc-doc:hover { border-color: var(--itc-primary); color: var(--itc-accent); }
.itc-doc__ico { font-size: 22px; }
.itc-doc__t { font-weight: 700; }
.itc-doc__dl { color: inherit; font-weight: 700; }

/* ---------- S4 Applications (full-width, original-ratio scene image) ---------- */
.itc-scenes-sec { background: var(--itc-surface-subtle); }
.itc-scenes { display: grid; gap: var(--itc-space-10); margin-top: var(--itc-space-8); }
.itc-scenes-image {
	display: block;
	width: 100%;
	max-width: 960px;          /* vertical 1856x2304 long image capped here */
	height: auto;
	margin-inline: auto;       /* original ratio preserved, no crop, no cover */
}

/* ---------- S10 Related Products (the only true cards) ---------- */
.itc-rel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}
.itc-rel-grid:has(.itc-rel-card:only-child) { grid-template-columns: minmax(0, 340px); max-width: 340px; }
.itc-rel-grid:has(.itc-rel-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 340px)); max-width: 700px; }
.itc-rel-card {
	background: var(--itc-surface);
	border: 1px solid var(--itc-border);
	border-radius: var(--itc-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--itc-text);
	transition: border-color var(--itc-transition), transform var(--itc-transition);
	display: flex;
	flex-direction: column;
}
.itc-rel-card:hover { border-color: var(--itc-primary); transform: translateY(-3px); }
.itc-rel-card__img {
	background: var(--itc-surface-subtle);
	aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.itc-rel-card__img img { width: 100%; height: 100%; object-fit: contain; }
.itc-rel-card__cat {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--itc-accent); padding: 16px 18px 0;
}
.itc-rel-card__name { font-size: 17px; font-weight: 700; color: var(--itc-primary); margin: 6px 18px 0; }
.itc-rel-card__desc { font-size: 14px; color: var(--itc-muted); margin: 8px 18px 0; flex: 1; }
.itc-rel-card__link { font-size: 14px; font-weight: 700; color: var(--itc-primary); padding: 14px 18px 18px; }

/* ---------- S11 Final CTA (full-width light bg, centered) ---------- */
.itc-final-cta { background: var(--itc-surface-subtle); border-top: 1px solid var(--itc-border); }
.itc-final-cta__inner { max-width: 700px; margin: 0 auto; text-align: center; }
.itc-final-cta__t { font-size: clamp(2rem, 1.5rem + 1vw, 2.6rem); font-weight: 760; letter-spacing: -.04em; color: var(--itc-primary); margin: 0 0 var(--itc-space-4); }
.itc-final-cta__d { font-size: 17px; color: var(--itc-muted); margin: 0 auto var(--itc-space-8); max-width: 58ch; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
	.itc-hero { grid-template-columns: 1fr; gap: 32px; }
	/* image on top, info below */
	.itc-hero__media { order: 1; }
	.itc-hero__info  { order: 2; }
	.itc-hero-figure { min-height: 0; }
	.itc-title { font-size: 33px; }
	.itc-section { padding: 60px 0; }
	.itc-section--sm { padding: 48px 0; }
	.itc-section--lg { padding: 72px 0; }
	.itc-adv-list { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.itc-container { padding-inline: var(--itc-space-4); }
	.itc-hero { padding: 16px 0 48px; gap: 24px; }
	.itc-title { font-size: 27px; }
	.itc-short { font-size: 16px; }
	.itc-h2 { font-size: 22px; }
	.itc-kv { grid-template-columns: 1fr; }
	.itc-kv:has(.itc-kv__row:nth-child(3):last-child) { grid-template-columns: 1fr; }
	.itc-kv__row { border-right: 0 !important; min-height: 0; padding: var(--itc-space-4) 0; }
	.itc-kv__row:nth-last-child(-n + 2) { border-bottom: 1px solid var(--itc-border); }
	.itc-kv__row:last-child { border-bottom: 0; }
	.itc-kv__label { font-size: 12px; }
	.itc-cta-row .itc-btn { flex: 0 0 100%; min-width: 0; }
	.itc-final-cta__t { font-size: 25px; }
	.itc-tech-table th, .itc-tech-table td { font-size: 14px; padding: var(--itc-space-3) var(--itc-space-2); }
	.itc-rel-grid:has(.itc-rel-card:only-child), .itc-rel-grid:has(.itc-rel-card:nth-child(2):last-child) { grid-template-columns: 1fr; max-width: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}