article.details *{
	margin:0;
	padding:0;
}

article.details > *{
	margin-top:1em;
	flex-basis:100%;
}

article.details > header{
	height: fit-content;
	padding:0;
	color:white;
	background:var(--main-background);
	margin:0;
	position: sticky;
	top: 0;
	font-family: lato;
	height:2rem;
	line-height:2rem;
	z-index: 5;
	left: 0;
	right: 0;
}
article.details > header *[data-icon]::before{
	line-height:1em;
}
article.details > main{
	flex-basis: min-content;
	flex-grow: 1;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
article.details > main > section *[data-icon]::before{
	line-height:1.2em;
	width: 100%;
	height: 100%;
	font-weight: 100;
}
article.details *[data-icon='contrast']::before{
	transform:rotate(45deg);
	transform-origin:center center;
}
article.details > main > :where(section,aside){
	margin: 1rem;
	scroll-snap-stop: normal;
	scroll-snap-align: start;
	scroll-margin-block-start: 3rem;
	/* flex-basis: 90rem; */
	flex-grow: 1;
}

article.details > main > section.intro{
	display:flex;
	grid-column-gap: 2em;
	flex-wrap: wrap;
}

article.details aside.photos{
	display: flex;
	flex-direction: column;
	height: calc(100dvh - 5rem);
	grid-row-gap:1em;
	aspect-ratio: 1/1;
}
article.details > main > section:last-of-type{
	min-height:100dvh
}
article.details aside.photos figure{
	flex-grow: 1;
	flex-shrink: 2;
	flex-basis: fit-content;
	position: relative;
}
article.details aside.photos figure > .img-container{
	width:100%;
	height:100%;
	position:relative;
	display: block;
}
article.details aside.photos figure > figcaption{
	text-align:center;
	position: absolute;
	bottom: 0;
	right: 0;
	background: #222;/*var(--primary-shade);*/
	color:white;
	opacity: 0.7;
	padding: 1ch;
}
article.details aside.photos figure :where(img,video){
	width: 100%;
	object-fit: contain;
	height: 100%;
	position:absolute;
}
article.details aside.photos figure img.ddd-model{
	/*filter: brightness(1.15) saturate(1.35);*/
}

article.details aside.photos menu{
	flex-basis: min-content;
	flex-grow: 0;
	flex-shrink: 1;
	list-style-type: none;
	display: flex;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	grid-column-gap:1rem;
}
article.details aside.photos menu li{
	aspect-ratio: 1/1;
	flex-basis: 6em;
	flex-shrink: 1;
}
article.details aside.photos menu :where(img,video){
	width :100%;
	aspect-ratio:1/1;
	object-fit:cover;
	cursor:pointer;
}

article.details > main > section h1{
	margin-bottom: 0.4em;
	border-bottom:1px solid;
	font-size:2em;
	font-weight:300;
	letter-spacing: 0.3rem;
	flex-basis: 100%;
	column-span: all;
}

article.details > main > section h1 sub{
	font-size:50%;
	letter-spacing: normal;
	font-weight: bolder;	
}

article.details > main > section h1:not(:first-child){
	margin-top:2rem;
}
article.details > main > section h2{
	text-align: right;
	margin-bottom:1rem;
	font-family:lato;
	font-weight:300;
}


article.details section.description{
	flex-basis: min-content;
	display: flex;
	flex-direction: column;
	/* max-width: 140ch; */
	/* min-width: 50ch; */
	flex-grow: 1;
}
article.details section.description h1{
	flex-basis:auto;
}
		
article.details > main > section.specs{
	fallback:1;	
}
	
article.details figure.model-3d{
	max-width:20dvw;
	align-self: center;
	margin: 1rem;
	position: relative;
	/* min-height: 20rem; */
}
article.details figure.model-3d :where(img,canvas){
	width:100% !important;
	aspect-ratio:1 !important;
	object-fit:cover;
}

article.details > main > section menu {
	font-family:lato;
	list-style-type:none;
	display:flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 0;
	grid-gap:1em;
}
article.details > main > section menu button{
	margin:0;
	padding:1ch;
	flex-basis:max-content;
	flex-grow:0;
	width:max-content;
	align-self:flex-end;
	
}
article.details > main > section menu button:not([data-icon]){
	min-width:10em;
}


article.details > main > section menu + a{
	display:inline-block;
	text-align:right;
	margin-top:1em;
	text-decoration:underline;
}
article.details > main > section menu + a:hover{
	text-decoration-color: var(--dominant-color);	
}
	
article.details p {
	font-family:lato;
	margin-bottom: 1em;
}
article.details q {
	font-style:italic;
	font-family: 'Lato';
	/* font-size:1.2em; */
	/* font-weight:500; */
}
article.details dl {
	display:grid;
	grid-template-columns: max-content auto;
	grid-gap: 2em;
}
article.details dt {
	font-family:lato;
}
article.details dd {
	font-family:lato;
	text-align: right;
}

article.details > main > section.features{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	grid-column-gap: 2rem;
	justify-content: flex-start;
	align-content: flex-start;
}
article.details > main > section.features > p{
	-flex-basis:calc(50% - 4rem);
	flex-shrink:2;
	max-width: 80ch;
}
article.details > main > section.features > ul{
	display:flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	flex-basis: 50%;
	flex-shrink: 1;
	grid-column-gap: 2rem;
	flex-grow: 2;
	align-items: flex-start;
}
article.details > main > section.features > ul > li{
	display:flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 20%;
	flex-grow  : 1;
	flex-shrink: 1;
	/* max-width: 12em; */
	/* min-width: 15em; */
}
article.details > main > section.features > ul > li h2{
	text-align:center;
}
article.details > main > section.features > ul > li:first-of-type{
	flex-basis:100%;
	flex-shrink:0;	
}
article.details > main > section.features > ul > li p{
	max-width:10em;
	text-align:center;
}
article.details > main > section.features > ul > li:first-of-type p{
	max-width:100%;
	text-align:justify;
}
article.details > main > section.features > ul > li figure{
	order:-1;
	font-size  :6rem;
	line-height:1.4em;
	height:1lh;
	aspect-ratio:1/1;
	/* font-weight: 500; */
	text-align: center;
}
article.details > main > section.features > figure{
	display:flex;
	/* grid-column-gap:2em; */
	justify-content: center;
	align-items: flex-start;
	/* margin-top: 3em; */
	flex-basis: 15rem;
	flex-shrink: 2;
}
article.details > main > section.features > figure img{
	max-height: calc(100dvh  - 9rem);
	max-width: calc(100dvw - 9rem);
	object-fit: contain;
}
article.details > main > section.features ul li img{
	/* width  :calc(100% - 2ch); */
	aspect-ratio: 1/1;
	object-fit:contain;
	/* margin :1ch; */
	/* color: white; */
	/* width: 6rem; */
	height: 1em;
	/* font-size: 6rem; */
}
article.details > main > section.features > figure figcaption{
	flex-basis: 50ch;
	/* margin-top:4em; */
	flex-grow: 0;
}

article.details > main > section.app{
	/* display: flex; */
	flex-direction: row;
	flex-wrap: wrap;
	/* column-count: 2; */
	column-width: 65ch;
}
article.details > main > section.app figure{
	width:100%;
	display:flex;
	justify-content: flex-end;
}
article.details > main > section.app figure img{
	max-height:80dvh
}
article.details > main > section.app p{

}
article.details > main > section.app ul{
	list-style-type:none;
	padding:0;
	display:flex;
	grid-gap:2em;
}
article.details > main > section.app ul li{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-basis: 11rem;
	flex-grow: 2;
}
article.details > main > section.app ul li *{
	text-align:center;
}
article.details > main > section.app ul li::before{
	font-size:8ch;
	flex-basis: min-content;
}

article.details > main > section.installation{
	flex-direction: row;
	align-content: flex-start;
	flex-wrap: wrap;
	display: flex;
	grid-gap:2rem;
}
article.details > main > section.installation > *{
	flex-basis: 50ch;
	flex-grow: 2;
}
article.details > main > section.installation > h1{
	flex-basis:100%;
	flex-shrink: 0;		
}

article.details > main > section.installation > p{
	flex-basis: 33%;
	flex-shrink:  1;
}
article.details > main > section.installation ol{
	padding-inline-start: 2rem;
	counter-reset: step-number;
	display: flex;
	flex-direction: column;
}
article.details > main > section.installation ol li{
	counter-increment: step-number;
	list-style:decimal-leading-zero;
	vertical-align:text-top;
	font-family: 'Lato';
	margin-top: 1rem;
	list-style-type: none;
	display: flex;
	align-items: flex-end;
	cursor:pointer;
}
article.details > main > section.installation ol li::before{
	font-size: 3.6em;
	content:'0' counter(step-number) '.';
	line-height: 1em;
}
article.details > main > section.installation ol li:hover{
	background-color:var(--primary-shade);
	color:white;
	opacity:0.5;
}
article.details > main > section.installation ol li.active{
	background-color:var(--primary-shade);
	color:white;
}
article.details > main > section.installation ol li p{
	position: relative;
	margin: 0rem;
	margin-bottom: 0.3em;
	margin-left: 1em;
}
article.details > main > section.installation aside{
	flex-basis :max-content
	flex-shrink: 0;
	flex-grow  : 1;
	position:relative;
	display:flex;
	align-content: center;
	justify-content: center;
	align-items: center;
}
article.details > main > section.installation aside :where(video,button){
	width:100%;
	background: #5bb2ff;
	aspect-ratio: 3/2;
	max-height: 80dvh;
	pointer-events: none;
	object-fit: cover;
	height: 100%;
}
article.details > main > section.installation aside video+button{
	content:'\025B9';
	position:absolute;
	font-size:20rem;
	font-weight:100;
	line-height:1em;
	padding:0;
	margin:0;
	border: none;
	background: white;
	opacity: 0.6;
	pointer-events: all;
	cursor: pointer;
}	

article.details > main > section.similar ul{
	display:flex;
	list-style-type:none;
	padding:0;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
article.details > main > section.similar ul li{
	display:flex;
	flex-direction: column;
	align-content: center;
	text-align: center;
	flex-basis: min-content;
	flex-basis: 25%;

	align-items: center;
}
article.details > main > section.similar ul li figure{
	cursor:pointer;
}

article.details > main > section.similar ul li figure small{
	font-family:lato;
	font-size:1em;
} 

article.details blockquote{
	display:inline;
}

article.details blockquote::before {
    content: '\0201C';
    font-size:200%;
    line-height:0.5em;    
}

article.details blockquote::after {
    content: '\0201D';
    font-size:200%;
    line-height:0.5em;
}	

@keyframes appear-from-left{
	from{
		left:-100dvw;
	}
	to{
		left:0%;
	}
}
@keyframes disappear-to-right{
	from{
		left:0%;
	}
	to{
		left:100dvw;
	}
}


@keyframes appear-from-right{
	from{
		left:100dvw;
	}
	to{
		left:0%;
	}
}
@keyframes disappear-to-left{
	from{
		left:0%;
	}
	to{
		left:-100dvw;
	}
}

article.details  nav.side-nav{display: none;}
article.details  nav.side-nav ul{
	list-style-type:none;
	padding:0;
	position: sticky;
	top: 4em;
}
article.details  nav.side-nav ul li{
	margin: 0;
	background: white;
	padding: 1rem;
}	

.details-on-display	article.details  nav.side-nav{
	display:block;
	flex-basis: max-content;
	flex-grow: 0;
	position: relative;
}
.details-on-display	article.details  nav.side-nav li:first-of-type{
	display:none;
}
.details-on-display	article.details  nav.side-nav a{
	display:inline-block;
	box-sizing:border-box;
	border:1px solid transparent;
}
.details-on-display	article.details  nav.side-nav a:hover{
	border-bottom:1px solid var(--primary-tint);
}


@media (width <= 100rem){
	.details-on-display article.details nav.side-nav, article.details nav.side-nav{
		left: 0;
		position: sticky;
		right: 0;
		padding: 0;
		background: white;
		top: 2em;
		z-index: 1;
		margin-bottom: -100%;
		height: min-content;
	}
	article.details  nav.side-nav ul{
		display:flex;
		justify-content: flex-end;
	}
	article.details > main{
		flex-basis:100%;
		overflow: auto;
	}
	article.details > main :where(section,aside){
		scroll-margin-block-start: 6rem;
	}
	article.details section.description{
		scroll-margin-block-start: 6rem;
		margin-top:4rem;
	}

}




@media (orientation: portrait){
	.details-on-display article.details nav.side-nav, article.details nav.side-nav{
		font-size: calc(100dvw/35);
	}
	
	article.details > main :where(section,aside){
		scroll-margin-block-start: 6rem;
		margin: 3rem 1ch;
	}
	article.details .description{
		scroll-margin-block-start: 6rem;		
	}	
	article.details aside.photos{
		height: auto;
		width: calc(100dvw - 4ch);
		/* order: 1; */
		margin: auto;
	}
	article.details aside.photos figure{
		aspect-ratio:1/1;
		/* border:1px solid red; */
	}
	article.details > main > section.features > ul > li{
		flex-basis: min-content;
		min-width: 14em;
	}
	article.details > main > section.features > ul > li p{
		max-width:fit-content;
	}
	article.details > main > section.features > figure{
	    overflow: clip;
	    flex-basis: 100%;
	}
	article.details section.description{
		flex-basis: calc(100% - 2em);
		flex-shrink: 0;
		margin-top: 0;
		order:0;
	}	
	
	article.details :is(p,dl,figcaption,button,a){
		font-size: calc(100dvw / 30);
	}
	article.details p {
		font-family:lato;
		margin-bottom: 0;
	}	
}

article.details figure:fullscreen :where(img,video) {
    object-fit: contain!important;
}