/* ==========================================================================
   Stran izdelka
   --------------------------------------------------------------------------
   Jezik podstrani skupin: svetel preliv v vrhu, oznake v IBM Plex Mono,
   naslovi 800, robovi 4 px, gumbi kot tableta. Pravila so pisana s
   predpono body.ttm-empor, ker slog strani (body.ttm-empor img/a, 0,1,2)
   premaga en sam razred — glej spomin empor-css-pasti.
   ========================================================================== */

body.ttm-empor .ttm-izd {
	--izd-mornar: #0F294F;
	--izd-modra: #2461A6;
	--izd-besedilo: #3D5673;
	--izd-oznaka: #5B7A99;
	--izd-crta: #E2E8F0;
	--izd-svetlo: #F4F7FA;
}

body.ttm-empor .ttm-izd-okvir {
	max-width: 1400px;
	margin: 0 auto;
}

body.ttm-empor .ttm-izd-oznaka,
body.ttm-empor .ttm-izd-znamka span,
body.ttm-empor .ttm-izd-sifra span {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--izd-oznaka);
}

body.ttm-empor .ttm-izd-oznaka {
	display: block;
	margin-bottom: clamp(16px, 2vw, 24px);
}

/* ---- vrh -------------------------------------------------------------------- */

body.ttm-empor .ttm-izd-vrh {
	padding: clamp(130px, 17vh, 210px) clamp(20px, 3.4vw, 56px) clamp(40px, 5vw, 72px);
	background: linear-gradient(158deg, rgb(247, 250, 253), rgb(231, 239, 248));
}

body.ttm-empor .ttm-izd-drobtine {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-bottom: clamp(24px, 3vw, 40px);
	font-size: 14px;
	color: var(--izd-oznaka);
}

body.ttm-empor .ttm-izd-drobtine a {
	color: var(--izd-modra);
	text-decoration: none;
}

body.ttm-empor .ttm-izd-drobtine a:hover {
	color: var(--izd-mornar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.ttm-empor .ttm-izd-glavno {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}

/* Od 700 px slika in podatki drug ob drugem — na tablici je bila slika sicer cel zaslon pred naslovom. */
@media (min-width: 700px) {
	body.ttm-empor .ttm-izd-glavno {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

/* Fotografija na belem ozadju se z multiply zlije s prelivom — kot na podstraneh skupin. */
body.ttm-empor .ttm-izd-slika {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
}

body.ttm-empor .ttm-izd-slika img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

body.ttm-empor .ttm-izd-slika--brez {
	flex-direction: column;
	gap: 18px;
	border: 1px dashed #C4D8EC;
	background: rgba(255, 255, 255, .5);
}

/* Logotip namesto fotografije: majhen in v sivini — da je jasno, da slike še ni,
   in da 14.000 golih izdelkov ne izgleda kot oglas za znamko. */
body.ttm-empor .ttm-izd-slika--brez img.ttm-izd-logo-velik {
	width: auto;
	height: auto;
	max-width: 38%;
	max-height: 56px;
	mix-blend-mode: normal;
	filter: grayscale(1);
	opacity: .45;
}

body.ttm-empor .ttm-izd-slika--brez span {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--izd-oznaka);
}

/* Opomba pod fotografijo: slike so pogosto slike serije, ne točnega modela. */
body.ttm-empor .ttm-izd-opomba-slike {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--izd-oznaka);
}

body.ttm-empor .ttm-izd-slicice {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

body.ttm-empor .ttm-izd-slicice button {
	width: 72px;
	height: 72px;
	padding: 4px;
	border: 1px solid var(--izd-crta);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

body.ttm-empor .ttm-izd-slicice button:hover {
	border-color: #C4D8EC;
}

/* Izbrana sličica: debelejši rob navznoter, da se sosednje ne premaknejo. */
body.ttm-empor .ttm-izd-slicice button[aria-current="true"] {
	border-color: var(--izd-modra);
	box-shadow: inset 0 0 0 1px var(--izd-modra);
}

body.ttm-empor .ttm-izd-slicice button:focus-visible {
	outline: 2px solid var(--izd-modra);
	outline-offset: 2px;
}

body.ttm-empor .ttm-izd-slicice img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.ttm-empor .ttm-izd-znamka {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
}

body.ttm-empor .ttm-izd-znamka img {
	width: auto;
	height: 30px;
}

body.ttm-empor .ttm-izd-podatki h1 {
	margin: 0;
	font-size: clamp(32px, 4.2vw, 58px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.04em;
	color: var(--izd-mornar);
	text-wrap: balance;
}

/* Naziv iz Pantheona (same velike črke) — manjši in brez stiskanja črk. */
body.ttm-empor .ttm-izd-podatki h1.ttm-izd-h1--pantheon {
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1.15;
	letter-spacing: -.005em;
}

/* Vidno samo bralnikom zaslona — ime znamke, ko je ob njem logotip. */
body.ttm-empor .ttm-izd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.ttm-empor .ttm-izd-sifra {
	margin: 18px 0 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 15px;
	letter-spacing: .04em;
	color: var(--izd-mornar);
}

body.ttm-empor .ttm-izd-sifra span {
	margin-right: 8px;
}

body.ttm-empor .ttm-izd-kljucni {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

body.ttm-empor .ttm-izd-kljucni li {
	padding: 7px 12px;
	border: 1px solid #C4D8EC;
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--izd-mornar);
}

body.ttm-empor .ttm-izd-akcije {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(26px, 3vw, 38px);
}

body.ttm-empor .ttm-izd-gumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 22px;
	border: 1px solid var(--izd-modra);
	border-radius: 999px;
	background: var(--izd-modra);
	font: 600 15px/1.2 "Archivo", system-ui, sans-serif;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}

body.ttm-empor .ttm-izd-gumb:hover {
	border-color: var(--izd-mornar);
	background: var(--izd-mornar);
	color: #fff;
}

/* Stanje, ko je izdelek že na seznamu — skripta doda razred. */
body.ttm-empor .ttm-izd-gumb.je-na-seznamu {
	border-color: #1F7A3A;
	background: #1F7A3A;
}

body.ttm-empor .ttm-izd-gumb--drugi {
	border-color: #C4D8EC;
	background: #fff;
	color: var(--izd-mornar);
}

body.ttm-empor .ttm-izd-gumb--drugi:hover {
	border-color: var(--izd-modra);
	background: #fff;
	color: var(--izd-modra);
}

body.ttm-empor .ttm-izd-gumb:focus-visible {
	outline: 2px solid var(--izd-modra);
	outline-offset: 3px;
}

body.ttm-empor .ttm-izd-namig {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--izd-oznaka);
}

/* ---- razdelki ------------------------------------------------------------------ */

body.ttm-empor .ttm-izd-razdelek {
	padding: clamp(48px, 6vw, 96px) clamp(20px, 3.4vw, 56px);
}

body.ttm-empor .ttm-izd-razdelek--siv {
	background: var(--izd-svetlo);
}

body.ttm-empor .ttm-izd-dva {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(36px, 5vw, 88px);
	align-items: start;
}

@media (min-width: 900px) {
	body.ttm-empor .ttm-izd-dva {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

body.ttm-empor .ttm-izd-opis p {
	margin: 0 0 16px;
	max-width: 62ch;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.7;
	color: var(--izd-besedilo);
}

body.ttm-empor .ttm-izd-tabela table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.45;
}

body.ttm-empor .ttm-izd-tabela th,
body.ttm-empor .ttm-izd-tabela td {
	/* Zamik levo in desno: vrstice so izmenično obarvane, besedilo ne sme
	   stati na robu pasu (Miha, 26. 9.). */
	padding: 10px 14px;
	border-top: 1px solid var(--izd-crta);
	text-align: left;
	vertical-align: top;
}

body.ttm-empor .ttm-izd-tabela tr:last-child th,
body.ttm-empor .ttm-izd-tabela tr:last-child td {
	border-bottom: 1px solid var(--izd-crta);
}

body.ttm-empor .ttm-izd-tabela th {
	width: 48%;
	font-weight: 500;
	color: var(--izd-oznaka);
}

body.ttm-empor .ttm-izd-tabela td {
	font-weight: 600;
	color: var(--izd-mornar);
}

body.ttm-empor .ttm-izd-surovo {
	margin: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: 14px;
	color: var(--izd-mornar);
}

/* ---- dokumenti ------------------------------------------------------------------ */

body.ttm-empor .ttm-izd-dokumenti {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ttm-empor .ttm-izd-dokumenti a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--izd-crta);
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--izd-mornar);
	text-decoration: none;
	transition: border-color .2s;
}

body.ttm-empor .ttm-izd-dokumenti a:hover {
	border-color: var(--izd-modra);
}

body.ttm-empor .ttm-izd-dokumenti em {
	display: block;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	color: var(--izd-oznaka);
}

body.ttm-empor .ttm-izd-dok-tip {
	flex: none;
	padding: 5px 8px;
	border-radius: 4px;
	background: var(--izd-modra);
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px;
	letter-spacing: .1em;
	color: #fff;
}

body.ttm-empor .ttm-izd-vec {
	margin: 18px 0 0;
	font-size: 14px;
}

body.ttm-empor .ttm-izd-vec a {
	font-weight: 600;
	color: var(--izd-modra);
}

/* ---- povezani ------------------------------------------------------------------ */

body.ttm-empor .ttm-izd-povezani {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.ttm-empor .ttm-izd-povezani a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--izd-crta);
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
	transition: border-color .2s;
}

body.ttm-empor .ttm-izd-povezani a:hover {
	border-color: var(--izd-modra);
}

body.ttm-empor .ttm-izd-pov-slika {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 16px;
	background: linear-gradient(158deg, rgb(247, 250, 253), rgb(231, 239, 248));
	border-bottom: 1px solid var(--izd-crta);
}

body.ttm-empor .ttm-izd-pov-slika img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 118px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

body.ttm-empor .ttm-izd-pov-slika img.ttm-izd-pov-logo {
	max-width: 50%;
	max-height: 32px;
	filter: grayscale(1);
	opacity: .4;
}

body.ttm-empor .ttm-izd-pov-naziv {
	padding: 16px 18px 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--izd-mornar);
}

body.ttm-empor .ttm-izd-pov-sifra {
	margin-top: auto;
	padding: 0 18px 16px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	color: var(--izd-oznaka);
}

@media (max-width: 560px) {
	body.ttm-empor .ttm-izd-pov-slika {
		height: 104px;
	}

	body.ttm-empor .ttm-izd-pov-slika img {
		max-height: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ttm-empor .ttm-izd * {
		transition: none !important;
	}
}