/* Product overview page. */

body.page-product main.product-page{
	width:auto;
	max-width:none;
	margin:0;
	padding:0;
	overflow-x:clip;
}

body.page-product .product-page *,
body.page-product .product-page *::before,
body.page-product .product-page *::after{box-sizing:border-box}

body.page-product .product-page p{margin:0 0 1em}
body.page-product .product-page h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
body.page-product .product-page h3{font-size:1.1rem;margin-bottom:10px}
body.page-product .product-page :focus-visible{outline:3px solid var(--zg-focus);outline-offset:3px}

/* Hero */

body.page-product .product-hero{
	padding-block:clamp(52px,6.5vw,92px);
	background:
		linear-gradient(90deg,transparent 0 49.9%,rgba(23,35,42,.04) 50%,transparent 50.1%),
		var(--zg-warm-white);
	background-size:96px 96px;
}

body.page-product .product-hero__grid{
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	gap:clamp(36px,5.5vw,84px);
	align-items:center;
}

body.page-product .product-hero h1{margin-bottom:22px;font-size:clamp(2.2rem,4.4vw,3.5rem);font-weight:650;line-height:1.06}
body.page-product .product-hero__lead{max-width:56ch;color:var(--zg-muted);font-size:clamp(1.02rem,1.2vw,1.16rem)}
body.page-product .product-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}

body.page-product .product-eyebrow{
	display:flex;
	gap:12px;
	align-items:center;
	margin-bottom:20px;
	color:var(--zg-teal);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.13em;
	text-transform:uppercase;
}

body.page-product .product-eyebrow > span{width:30px;height:2px;background:var(--zg-amber)}

body.page-product .product-media{
	position:relative;
	display:flex;
	aspect-ratio:4/3;
	align-items:flex-end;
	padding:20px;
	overflow:hidden;
	border:1px solid #cbd2d4;
	border-radius:var(--zg-radius-card);
	background:
		linear-gradient(135deg,transparent 49.85%,rgba(23,35,42,.12) 50%,transparent 50.15%),
		linear-gradient(45deg,transparent 49.85%,rgba(23,35,42,.1) 50%,transparent 50.15%),
		linear-gradient(135deg,#e8ebeb 0%,#cdd3d5 52%,#e0e4e5 100%);
	box-shadow:var(--zg-shadow);
}

body.page-product .product-media__marks span{
	position:absolute;
	width:24px;
	height:24px;
	border-color:rgba(23,35,42,.5);
	border-style:solid;
}

body.page-product .product-media__marks span:nth-child(1){top:24px;left:24px;border-width:2px 0 0 2px}
body.page-product .product-media__marks span:nth-child(2){top:24px;right:24px;border-width:2px 2px 0 0}
body.page-product .product-media__marks span:nth-child(3){right:24px;bottom:24px;border-width:0 2px 2px 0}
body.page-product .product-media__marks span:nth-child(4){bottom:24px;left:24px;border-width:0 0 2px 2px}

body.page-product .product-media__caption{
	position:relative;
	z-index:1;
	display:inline-flex;
	flex-direction:column;
	gap:3px;
	max-width:100%;
	padding:12px 15px;
	border:1px solid rgba(255,255,255,.44);
	border-radius:6px;
	background:rgba(23,35,42,.86);
	color:#fff;
}

body.page-product .product-media__caption strong{font-size:.84rem}
body.page-product .product-media__caption span{color:#c8d0d3;font-size:.72rem}

/* Sections */

body.page-product .product-section{padding-block:clamp(56px,7vw,100px)}
body.page-product .product-section--mist{background:var(--zg-mist)}

body.page-product .product-head{max-width:760px;margin-bottom:40px}
body.page-product .product-head > p:last-child{color:var(--zg-muted)}

body.page-product .product-head--split{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
	gap:clamp(30px,5.5vw,84px);
	max-width:none;
	align-items:end;
}

body.page-product .product-head__copy{color:var(--zg-muted);max-width:60ch}

body.page-product .product-note{margin-top:28px;color:var(--zg-muted);font-size:.84rem;line-height:1.65;max-width:88ch}

/* Category cards */

body.page-product .product-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:22px;
}

body.page-product .product-card{
	display:flex;
	flex-direction:column;
	padding:22px;
	border:1px solid var(--zg-border);
	border-radius:var(--zg-radius-card);
	background:#fff;
	box-shadow:var(--zg-shadow-soft);
}

body.page-product .product-card__media{
	position:relative;
	display:flex;
	aspect-ratio:1/1;
	align-items:flex-end;
	margin-bottom:20px;
	padding:14px;
	overflow:hidden;
	border:1px solid #cbd2d4;
	border-radius:8px;
	background:
		linear-gradient(135deg,transparent 49.85%,rgba(23,35,42,.1) 50%,transparent 50.15%),
		linear-gradient(135deg,#e9ecec 0%,#d2d8d9 55%,#e3e7e8 100%);
}

/* Photograph variant. Square cards suit the portrait interior photography supplied. */
body.page-product .product-media--photo,
body.page-product .product-card__media--photo{background:#dfe3e4;padding:0}

body.page-product .product-media__img,
body.page-product .product-card__img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

body.page-product .product-card__hint{
	padding:7px 10px;
	border-radius:5px;
	background:rgba(23,35,42,.84);
	color:#fff;
	font-size:.68rem;
	letter-spacing:.03em;
}

body.page-product .product-card p{color:var(--zg-muted);font-size:.93rem;line-height:1.65}

body.page-product .product-card__tags{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	margin:auto 0 0;
	padding:16px 0 0;
	border-top:1px solid var(--zg-border);
	list-style:none;
}

body.page-product .product-card__tags li{
	padding:5px 9px;
	border:1px solid var(--zg-border);
	border-radius:var(--zg-radius-tag);
	background:var(--zg-mist);
	color:var(--zg-copy);
	font-size:.76rem;
}

/* System logic */

body.page-product .product-system{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px;
}

body.page-product .product-system__item{
	padding:26px;
	border:1px solid var(--zg-border);
	border-radius:var(--zg-radius-card);
	background:#fff;
}

body.page-product .product-system__index{
	display:block;
	margin-bottom:18px;
	color:var(--zg-amber);
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.08em;
}

body.page-product .product-system__item p{margin:0;color:var(--zg-muted);font-size:.9rem;line-height:1.65}

/* Routes */

body.page-product .product-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

body.page-product .product-route{
	padding:28px;
	border:1px solid var(--zg-border);
	border-top:4px solid var(--zg-teal);
	border-radius:var(--zg-radius-card);
	background:#fff;
}

body.page-product .product-route__index{
	display:block;
	margin-bottom:18px;
	color:var(--zg-amber);
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.08em;
}

body.page-product .product-route p{margin:0;color:var(--zg-muted);font-size:.92rem;line-height:1.65}

/* CTA */

body.page-product .product-cta{padding-block:clamp(56px,6.5vw,92px);background:var(--zg-graphite)}
body.page-product .product-cta__inner{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:44px;align-items:end}
body.page-product .product-cta h2{color:#fff;margin-bottom:14px}
body.page-product .product-cta p:not(.zg-kicker){max-width:62ch;color:#b9c3c6}
body.page-product .product-cta__actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* Responsive */

@media (max-width:1080px){
	body.page-product .product-grid,
	body.page-product .product-system,
	body.page-product .product-routes{grid-template-columns:repeat(2,minmax(0,1fr))}
	body.page-product .product-cta__inner{grid-template-columns:1fr}
}

@media (max-width:900px){
	body.page-product .product-hero__grid,
	body.page-product .product-head--split{grid-template-columns:1fr}
	body.page-product .product-media{aspect-ratio:16/9}
	body.page-product .product-media--photo{aspect-ratio:4/3}
}

@media (max-width:640px){
	body.page-product .product-grid,
	body.page-product .product-system,
	body.page-product .product-routes{grid-template-columns:1fr}
	body.page-product .product-actions .zg-btn,
	body.page-product .product-cta__actions .zg-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
	body.page-product .zg-btn{transition:none}
}