/*
 * toothview.css
 * Standalone recreation of Figma node 236:6052 ("ToothView").
 * Styles ONLY this page's main content via .tv-* classes. The shared
 * header/footer chrome keeps its own storefront styling (footer layout is
 * nudged at the bottom of this file, scoped to body.tv-page). Mirrors the
 * homepage hero (new/homepage.css) for the badge/circle/blob system and the
 * 4K / footer treatment.
 *
 * Figma tokens:
 *   Blue_Main #2DA7FA · Blue_Subtle #EDF7FF · Text #333536 · Muted #737A82
 *   BG/Default #F6F6F6
 *   Title/Display 36/44 · Body/Lead 16/22 · Body/Body-B 14 (badge)
 */

.tv-main {
	--tv-blue: #2da7fa;
	--tv-blue-subtle: #edf7ff;
	--tv-text: #333536;
	--tv-muted: #737a82;
	--tv-shell: min(1320px, 100% - 80px);
	color: var(--tv-text);
	font-family: "Montserrat", sans-serif;
}

.tv-main *,
.tv-main *::before,
.tv-main *::after {
	box-sizing: border-box;
}

.tv-shell {
	width: var(--tv-shell);
	margin-inline: auto;
}

/* Hero copy pins to a 15.625% gutter per side (Figma node 236:6308 copy x=299
 * on the 1920 design); %-based so it also holds at 4K. Applied from 991px up;
 * below that the hero stacks and uses the base shell. */
@media (min-width: 991px) {
	.tv-section--hero .tv-shell {
		width: 68.75%; /* 100% − 2 × 15.625% */
		max-width: none;
	}
}

/* ---- Sections ---- */
.tv-section {
	padding: 80px 0;
}

.tv-section--hero {
	background: #f6f6f6;
	padding: 64px 0 80px;
}

/* ---- Hero ---- */
/* Two-column grid (copy 580px / media fills the rest) — grid keeps the columns
 * side-by-side and shrinks them instead of wrapping the media below the copy at
 * narrower desktop widths. Mirrors the homepage / accessory hero. */
.tv-hero {
	display: grid;
	/* Figma columns: copy 580px / media 696px. Both tracks shrink together at
	 * narrower desktop widths (rather than the copy hogging 580 and starving the
	 * media), and reach the exact Figma sizes around the 1920 design width. */
	grid-template-columns: minmax(0, 580px) minmax(0, 696px);
	justify-content: space-between;
	gap: 48px;
	align-items: center;
}

.tv-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px; /* Figma frame 236:6309 */
	max-width: 580px; /* Figma copy column = 580px */
}

/* Badge + title sit closer together (Figma frame 236:6310 gap = 24px) */
.tv-hero__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.tv-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	height: 32px;
	padding: 10px 12px;
	background: #ffffff;
	border-radius: 40px;
	box-shadow: 0 8px 24px rgba(39, 55, 75, 0.08);
	font-size: 14px;
	font-weight: 600;
	color: var(--tv-text);
}

.tv-hero__badge img {
	width: 14px;
	height: 15px;
	flex: none;
}

.tv-hero__title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	color: var(--tv-text);
}

.tv-accent {
	color: var(--tv-blue);
}

.tv-hero__desc {
	margin: 0;
	max-width: 580px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--tv-muted);
}

/* Store badges (Figma frame 236:6328, gap 24) */
.tv-stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.tv-stores a {
	display: inline-flex;
	line-height: 0;
}

.tv-stores img {
	display: block;
	height: 40px;
	width: auto;
}

/* ---- Hero media: organic photo cutout + blue blob (Figma mask group
 * 236:6224 + blob vector 236:6227). The cutout is built live in the page: an
 * inline SVG clips the raw photo to the Figma organic shape (no pre-baked
 * PNG). The SVG viewBox is the mask group's 684.405×688.76 box, so all blob
 * offsets below are simple percentages of that same box. ---- */
.tv-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 480px;
}

.tv-hero__circle-wrap {
	position: relative;
	width: 100%;
	max-width: 684px; /* Figma mask group = 684px wide */
}

.tv-hero__cutout {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

/* Blob sits at the lower-right of the photo cutout. Horizontal position keeps
 * the Figma node 236:6227 x (551/684.405 = 80.51%) and width
 * (176.448/684.405 = 25.78%); the vertical position is dropped so the blob
 * reads as bottom-right of the visible photo. The cutout box keeps its aspect
 * at every width, so the same percentages hold across breakpoints. */
.tv-hero__blob {
	position: absolute;
	z-index: 2;
	left: 80.51%;
	top: 62%;
	width: 25.78%;
	height: auto;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 990px) {
	.tv-section {
		padding: 64px 0;
	}

	.tv-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Figma mobile centres the copy column */
	.tv-hero__copy {
		width: 100%;
		max-width: none;
		align-items: center;
		text-align: center;
	}

	.tv-hero__head {
		align-items: center;
	}

	.tv-hero__title {
		text-align: center;
	}

	.tv-hero__desc {
		margin-inline: auto;
	}

	.tv-stores {
		justify-content: center;
	}

	.tv-hero__media {
		width: 100%;
		justify-content: center;
		min-height: 0;
	}

	.tv-hero__circle-wrap {
		width: 72%;
		max-width: 440px;
	}
}

@media (max-width: 680px) {
	.tv-section {
		padding: 48px 0;
	}

	.tv-section--hero {
		padding: 40px 0 48px;
	}

	.tv-hero__circle-wrap {
		width: 84%;
		max-width: 380px;
	}
}

/* Below 450 → narrow the shell to a 16px-per-side gutter (convention, same as
 * modupro/onescreen/accessories). This page has no product grids to collapse —
 * it's a single stacked hero — so only the gutter needs the phone treatment.
 * Min target width 325px (verified: 0 horizontal overflow). */
@media (max-width: 449px) {
	.tv-main {
		--tv-shell: min(1320px, 100% - 32px);
	}
}

/* Extra-small phones: tighten the store-badge gap so the two badges still fit
 * on one row (matches the homepage's <=380 handling). */
@media (max-width: 380px) {
	.tv-stores {
		gap: 16px;
	}
}

/* ============================================================
 * 4K / ultra-wide — scale the desktop layout up ~2.2x to match the shared
 * header (homePage_design.css widens --shop-shell at this same breakpoint).
 * Mirrors new/homepage.css. The hero gutter stays %-based (68.75%) so it
 * auto-scales; only type/spacing/caps need explicit scaling here.
 * ============================================================ */
@media (min-width: 3000px) {
	.tv-section {
		padding: 176px 0;
	}

	.tv-section--hero {
		padding: 124px 0 176px;
	}

	.tv-hero {
		grid-template-columns: minmax(0, 1160px) minmax(0, 1392px); /* 580/696 × 2 */
		gap: 96px;
	}

	.tv-hero__copy {
		max-width: 1160px; /* 580 × 2 */
		gap: 70px;
	}

	.tv-hero__circle-wrap {
		max-width: 1368px; /* 684 × 2 */
	}

	.tv-hero__head {
		gap: 53px;
	}

	.tv-hero__badge {
		height: auto;
		padding: 18px 31px;
		border-radius: 80px;
		font-size: 30px;
	}

	.tv-hero__badge img {
		width: 31px;
		height: 33px;
	}

	.tv-hero__title {
		font-size: 78px;
		line-height: 96px;
	}

	.tv-hero__desc {
		max-width: 1160px;
		font-size: 34px;
		line-height: 48px;
	}

	.tv-stores {
		gap: 53px;
	}

	.tv-stores img {
		height: 88px;
	}

	.tv-hero__media {
		min-height: 1000px;
	}

	.tv-hero__circle-wrap {
		max-width: 1400px;
	}
}

/* ============================================================
 * Shared footer — match new/homepage.php's footer treatment, scoped to
 * body.tv-page so only this page is affected.
 * ============================================================ */
@media (min-width: 991px) {
	body.tv-page .shop-footer__grid {
		grid-template-columns: 1fr repeat(4, minmax(0, max-content));
		gap: 100px;
		align-items: start;
	}

	body.tv-page .shop-footer__brand {
		max-width: 370px;
	}
}

@media (max-width: 680px) {
	body.tv-page .shop-footer__main {
		padding: 48px 0;
	}

	body.tv-page .shop-footer__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 16px;
		align-items: start;
	}

	body.tv-page .shop-footer__brand {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	body.tv-page .shop-footer__column h3 {
		font-size: 16px;
	}

	body.tv-page .shop-footer__column a,
	body.tv-page .shop-footer__brand p {
		font-size: 15px;
		line-height: 1.9;
	}

	body.tv-page .shop-footer__bar-inner {
		gap: 12px;
	}

	body.tv-page .shop-footer__policies {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 14px;
	}

	body.tv-page .shop-footer__policies a {
		font-size: 10px;
		white-space: nowrap;
	}

	body.tv-page .shop-footer__youtube img {
		height: 22px;
	}
}

@media (max-width: 380px) {
	body.tv-page .shop-footer__bar-inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	body.tv-page .shop-footer__policies {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
}

/* 4K shared header + footer (mirrors new/homepage.css / new/accessory.css). */
@media (min-width: 3000px) {
	body.tv-page {
		--shop-header-height: 210px;
	}

	body.tv-page .shop-header__brand img {
		width: 388px;
	}

	body.tv-page .shop-nav__link {
		gap: 18px;
		padding: 20px 26px;
		font-size: 33px;
	}

	body.tv-page .shop-nav__caret {
		font-size: 31px;
	}

	body.tv-page .shop-header__actions {
		gap: 31px;
	}

	body.tv-page .shop-header__actions a,
	body.tv-page .shop-header__icon-btn,
	body.tv-page .shop-header__search-trigger {
		width: 88px;
		height: 88px;
		font-size: 44px;
	}

	body.tv-page .shop-desktop-search {
		width: 88px;
		height: 106px;
	}

	body.tv-page .shop-desktop-search input {
		font-size: 40px;
	}

	body.tv-page .shop-footer__main {
		padding: 158px 0;
	}

	body.tv-page .shop-footer__grid {
		gap: 220px;
	}

	body.tv-page .shop-footer__brand {
		max-width: 810px;
	}

	body.tv-page .shop-footer__brand img {
		width: 360px;
		margin-bottom: 35px;
	}

	body.tv-page .shop-footer__brand p,
	body.tv-page .shop-footer__column a {
		font-size: 35px;
	}

	body.tv-page .shop-footer__column h3 {
		margin-bottom: 26px;
		font-size: 40px;
	}

	body.tv-page .shop-footer__bar-inner {
		gap: 53px;
		padding: 62px 0;
	}

	body.tv-page .shop-footer__policies {
		gap: 106px;
	}

	body.tv-page .shop-footer__policies a {
		font-size: 35px;
	}

	body.tv-page .shop-footer__youtube img {
		height: 62px;
	}
}