/* ==========================================================================
   Smart-TV mode (html.is-tv) and showroom display template (.mz-tv-display)
   10-foot UI: big type, strong focus ring for remote D-pad, overscan-safe margins,
   no hover-dependent UI, reduced blur (TV GPUs are weak).
   ========================================================================== */

html.is-tv { font-size: clamp(18px, 1.15vw, 44px); }
html.is-tv body { cursor: default; }
html.is-tv .mz-container { padding-inline: max(var(--mz-gutter), 5vw); } /* 5% overscan safe area */
html.is-tv .mz-header, html.is-tv .mz-bottom-nav, html.is-tv .mz-drawer__panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mz-dark); }
html.is-tv .mz-bottom-nav { display: none; }
html.is-tv body.has-bottom-nav { padding-bottom: 0; }
html.is-tv .mz-nav { display: block; }
html.is-tv .mz-header__burger { display: none; }

html.is-tv a:focus, html.is-tv button:focus, html.is-tv input:focus, html.is-tv select:focus, html.is-tv [tabindex]:focus,
html.is-tv .mz-tv-focus {
	outline: 4px solid var(--mz-primary-2) !important;
	outline-offset: 4px;
	box-shadow: 0 0 0 10px color-mix(in srgb, var(--mz-primary) 35%, transparent) !important;
	transform: scale(1.03);
	transition: transform .15s;
	position: relative; z-index: 2;
}
html.is-tv .mz-card:hover, html.is-tv ul.products li.product:hover { transform: none; }
html.is-tv .mz-btn { min-height: 3.2rem; }

/* ---------- Showroom display template ---------- */
.mz-tv-display { margin: 0; padding: 0 !important; background: #040d1a; color: #f2f5fa; overflow: hidden; }
.mz-tv {
	display: grid; grid-template-rows: auto 1fr auto;
	width: 100vw; height: 100vh; height: 100dvh;
	padding: 3vh 5vw; gap: 2.5vh;
	background:
		radial-gradient(60vw 60vh at 85% 10%, color-mix(in srgb, var(--mz-primary) 22%, transparent), transparent 70%),
		radial-gradient(50vw 50vh at 0% 100%, rgba(255, 255, 255, .05), transparent 70%),
		#040d1a;
}
.mz-tv__top { display: flex; align-items: center; gap: 3vw; }
.mz-tv__brand .mz-logo img { height: 8vh; max-width: 30vw; }
.mz-tv__brand .mz-logo-text__name { font-size: 2.2vw; }
.mz-tv__brand .mz-logo-text__tag { font-size: 1vw; }
.mz-tv__rates { display: flex; gap: 1.5vw; margin-inline-start: auto; }
.mz-tv__rate { display: grid; padding: 1vh 1.6vw; border-radius: 1.2vw; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); line-height: 1.3; }
.mz-tv__rate span { font-size: .9vw; opacity: .7; }
.mz-tv__rate strong { font-size: 2vw; color: var(--mz-primary-2); }
.mz-tv__rate small { font-size: .8vw; opacity: .6; }
.mz-tv__clock { font-size: 3vw; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; }

.mz-tv__stage { position: relative; min-height: 0; }
.mz-tv__slide {
	position: absolute; inset: 0;
	display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 4vw;
	opacity: 0; transform: scale(.98); transition: opacity 1s ease, transform 1.2s ease;
	pointer-events: none;
}
.mz-tv__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.mz-tv__media { height: 100%; display: grid; place-items: center; }
.mz-tv__media img { max-height: 62vh; width: auto; object-fit: contain; filter: drop-shadow(0 4vh 6vh rgba(0, 0, 0, .55)); }
.mz-tv__kicker { color: var(--mz-primary); font-weight: 700; font-size: 1.2vw; margin: 0 0 1vh; letter-spacing: .02em; }
.mz-tv__name { font-size: 4vw; line-height: 1.15; margin: 0 0 2vh; }
.mz-tv__desc { font-size: 1.25vw; opacity: .85; line-height: 1.9; max-height: 30vh; overflow: hidden; }
.mz-tv__desc ul { padding-inline-start: 1.2em; margin: 0; }
.mz-tv__price { margin-top: 3vh; font-size: 3vw; font-weight: 900; color: var(--mz-primary-2); }
.mz-tv__price .mz-price-toman { font-size: 1.5vw; color: #f5f2ea; opacity: .8; margin-top: .5vh; }
.mz-tv__price del { opacity: .5; font-size: .6em; }
.mz-tv__slide--content { display: block; overflow: hidden; font-size: 1.4vw; }

.mz-tv__progress { position: absolute; inset-inline: 0; bottom: -1.2vh; height: 4px; background: rgba(255, 255, 255, .08); border-radius: 4px; overflow: hidden; }
.mz-tv__progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mz-primary), var(--mz-primary-2)); }

.mz-tv__bottom { display: flex; align-items: center; gap: 2vw; padding-top: 2vh; border-top: 1px solid rgba(255, 255, 255, .08); }
.mz-tv__contact { display: flex; gap: 1.5vw; align-items: baseline; font-size: 1.2vw; white-space: nowrap; }
.mz-tv__contact strong { color: var(--mz-primary-2); font-size: 1.5vw; letter-spacing: .05em; }
.mz-tv__ticker { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mz-tv__ticker-track { display: inline-flex; gap: 4vw; white-space: nowrap; font-size: 1.15vw; animation: mz-ticker 60s linear infinite; }
.mz-tv__ticker-track span::before { content: "◆"; color: var(--mz-primary); margin-inline-end: 1vw; font-size: .7em; }
@keyframes mz-ticker { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mz-tv__qr { display: grid; justify-items: center; gap: .5vh; font-size: .8vw; }
.mz-tv__qr img { width: 8vh; height: 8vh; border-radius: .6vw; background: #fff; padding: .4vh; }

/* Portrait screens (vertical signage) */
@media (orientation: portrait) {
	.mz-tv__slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; text-align: center; }
	.mz-tv__media img { max-height: 40vh; }
	.mz-tv__name { font-size: 7vw; }
	.mz-tv__desc { font-size: 2.6vw; }
	.mz-tv__price { font-size: 6vw; }
	.mz-tv__rate strong { font-size: 4vw; }
	.mz-tv__rate span, .mz-tv__rate small { font-size: 2vw; }
	.mz-tv__clock { font-size: 5vw; }
	.mz-tv__contact, .mz-tv__ticker-track { font-size: 2.4vw; }
}