@property --test{
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
:root{
	--test:100dvh;
	--dvh: 100dvh;
    --sy: 0;
    --page: calc( var(--sy) / var(--dvh) );
    font-family: 'MuseoModerno', 'Italiana', Serif;
    font-size: min(calc(100dvw/110),calc(100dvh / 60));
    font-weight:300;
    --dominant-color: #fff;
    --dominant-contrast: black;
	--dominant-color-dark:hsl(from var(--dominant-color) h 50% 30%);
    --main-background: #181818;
    --toast-message-bk: #181818;
    --toast-message-fg: #ffffff;
    --primary-tint: color-mix( in srgb, var(--dominant-color) 75%, white);
    --primary-shade:#434343;
    --dialog-border-color-tint-1: silver !important;
    --logo-tint: var(--primary-tint);
    --logo-shade:var(--primary-shade);
}

.logo-tint{
	fill:var(--logo-tint);
}

[hidden]{
	visibility:hidden;
}
html, body{
	margin:0;
	padding:0;
	overflow:hidden;
	height:100dvh;
	width :100dvw;
}

body{
	overflow: hidden;
	position:absolute;
	-height: 100dvh;
	-width: 100dvw;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	touch-action: none;
	pointer-events: all;
}

a{
	cursor:pointer;
	font:inherit;
	color:inherit;
	text-decoration:none;
}
a:focus{
    outline:none;
}

.showroom button, .showroom dialog footer button, .showroom a.button{
    font-family:lato;
    font-weight:300;
    cursor:pointer;
    padding: 0.625rem 1.25rem;
    border: 0.1rem solid var(--dominant-contrast);
    border-radius: 0.25rem;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1rem;
	-webkit-user-select: none; /* Safari */
	user-select:none;
	text-align:center;
}

.showroom button[disabled]:not(.cancel), .showroom a.button[disabled]{
	background: gray !important;
}

.showroom button:not(.cancel), .showroom a.button{
    background-color: var(--dominant-color);
    color: var(--dominant-contrast);
    border-color: transparent;
    background-color: var(--main-background);
    color: white;
    background: black;
}

.showroom button:not(.cancel):not([disabled]):hover , .showroom a.button:hover{
    background-color: #ffffff;
    color: black;
	border-color: var(--dominant-color);
}
.showroom button:focus, .modal-dialog > :not(header) button[type]:focus{
	border-color: var(--dominant-color-dark);
	border-width:1px;
}

.showroom button.cancel:hover{
	border-color:black;
}
.showroom button[data-icon]{
	border-color:black;
	background:white;
	color:black;
}
.showroom button[data-icon]:hover {
    background-color: black;
    color: white;
    border-color: var(--dominant-color);
}
.showroom button[data-icon].selected::before{
	font-variation-settings: 'FILL' 1;
}

figure{
	padding:0;
	margin: 0;
}
.content{
	height: 100dvh;
	box-sizing:border-box;
	text-align: left;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	font-family: 'Lato', sans-serif;
	width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

.content > *{
    flex-grow:1;
    display : flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content > :where(.left,.right){
	height:33dvh;
}

.content > .middle{
	/* height: 66.6dvh; */
	display : flex;
	align-items: center;
	align-self: flex-start;
	flex-basis: 33dvw;
	flex-grow: 0;
	justify-content: flex-end;
	padding-block-end: 3rem;
	/* margin-bottom: 9rem; */
	margin-top: 33.3dvh;
}
.content:nth-child(3) > .middle{
	display: flex;
	justify-content: center;
}

header.row aside h1, .content div > h1{
	text-align:center;
	font-size: 2rem;
	font-weight:400;
	font-family: 'MuseoModerno';
	position:relative;
	letter-spacing:0.3rem;
	text-transform: lowercase;
}

h1 {}
header.row aside h1{
	background: black;
	/* visibility: hidden; */
	display: none;
}
header.row aside p, .content p{
	text-align:center;
	font-size:1.2rem;
	font-weight: 300;
	font-family: lato;
	max-width: 80ch;
}
header.row aside h2, .content div > h2{
	font-family: 'Lato';
	font-weight: 300;
}

.gallery{
	overflow:hidden;
	position: fixed;
	top:0;
	left:0;
	z-index: 0;
	pointer-events:none;
	width: 100%;/*calc(100dvw - 1rem);*/
}
body.details-on-display .gallery{
	width:100dvw;
}
.row {
	--rel-h: calc( var(--index) + 2 - var(--page) );
	font-size: calc( var(--rel-h) * 33.3dvh );
	height :1em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	background: transparent;
	position: relative;
	align-items: center;
	z-index: 10;
}
.gallery > header ~ .row{
	content-visibility: auto;
	contain-intrinsic-size: auto 1em;
	overflow: hidden; 	
}


.row :where(.left,.right){
	width:100%;
	height: 100%;
	overflow: visible;
	display: flex;
	flex-direction: column;
	justify-content: center;
	--spacing: calc( (var(--dvw)/(7 * 0.666 * var(--dvh) )) * 1em );
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
}

.row :where(.left,.right) *{
	pointer-events:all;
}
.row section > figure{
	margin:0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	--preview-width : 512;
	--preview-height: 512;
	height: calc(100% - 2rem);
	margin-top: 4rem;
	cursor:pointer;
	background:transparent;
	pointer-events: visible;
}

.row :where(.left,.right) figure canvas{
	height: 100% !important;
	width : auto !important;
	background: transparent;
	touch-action: none;
	/*filter: brightness(1.15) saturate(1.35);*/
}

.row section > figure figcaption{
	font-size: 1rem;
	order: -1;
	/* color: white; */
	opacity: calc( clamp(0,1,var(--rel-h)));
	position: relative;
	max-height: 3em;
}
.row figcaption h1{
	margin:0;
	font-family: 'MuseoModerno';
	font-weight: 300;
	font-size:160%;
}
.row figcaption h1 small{
	font-size:60%;
}
.row figcaption h2{
	position:absolute;
	right:0;
	margin:0;
	font-family:lato;
	font-size:110%;
	font-weight:300;
}
div:has(>blockquote){
	max-width: 50ch;
	background: #f8f8f8E0;
	padding:0.5ch;
	border-radius:0.5ch;
}
blockquote{
	font-style: italic;
	display: inline;
	margin: 0;
	line-height: 1.4em;
}
blockquote::before {
    content: '\0201C';
}
blockquote::after {
    content: '\0201D';
}	
blockquote + small{
	display:inline;
	margin-left:1ch;
}

.row .left{
	align-items: flex-end;	
}
.row .right{
	align-items: flex-start;
}
.row .left figure{
	margin-right: var(--spacing);
}
.row .right figure{
	margin-left : var(--spacing);
	overflow: visible;
}


.row:first-child{
	visibility:hidden;
}


.content.last{
	--rel-h : calc(var(--index) + 2 - var(--page));
	-z-index : 0;
	-position: relative;
}
.content.last div.left{
	flex-grow:10;
}
.content.last div.middle{
	display: flex;
	align-items: flex-end;
	flex-basis: 15dvw;
	flex-shrink: 0;
}
.content.last div.middle *{
	text-align:right;
}

.content.last div.right{
	z-index: 1;
	position:relative;
	height: 100dvh;
	/* top   : calc( 100dvh - var(--rel-h) * 100dvh ); */
	opacity  :  var(--rel-h);
	margin-top: 1rem;
	display: flex;
	align-items: flex-start;
	flex-basis: 35dvw;
	padding-left: 2rem;
	overflow: hidden;
	justify-content: center;
}
.content.last div.right:has(iframe){
	opacity:1;
}
.content.last div.right figure{
	position:relative;
}
.content.last div.right img{
	max-height: 80dvh;
}
.content.last div.right img + figcaption{
	position:absolute;
	width:100%;
	text-align:center;
	top:50%;
}

header.row{
	z-index: 100;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
}

header.row > h1{
	font-family: 'MuseoModerno';
	font-family: 'MuseoModerno';
	font-size: calc( var(--rel-h) * 20dvh );
	font-weight:100;
	position: absolute;
	bottom: 0.2em;
	margin: 0;
	line-height: 1em;
	/* background: #404040; */
	/* color: black; */
	z-index: 2;
	letter-spacing: 0.1ch;
	transform: translateX(0.1em);
}

article > header nav{
	position: absolute;
	bottom: calc( (1 - clamp(0, 1, var(--rel-h))) * -2.3rem );
	background: black;/* var(--primary-tint);*/
	width:100%;
	pointer-events:all;
	height: 2.3rem;
	z-index: 2;
	/* border-bottom: 6px solid black; */
	box-sizing: border-box;
	/* text-align: center; */
	display: flex;
	justify-content: space-between;
	container-type: size;
}

:root.main-content-in-view article > header nav{

}
:root.main-content-in-view article > header nav::after{
	display:block;
	position:absolute;
	top:0;
	content:'';
	border:1px solid var(--primary-tint);
	width:var(--gp);
	transition:width 0.3s;
}

article.gallery > header > nav > a{
	visibility:hidden;
}
article > header menu{
	font-family: lato;
	font-weight: 300;
	font-size:1rem;
	line-height: 2rem;
	display: flex;
	margin: 0;
	color: white;
	list-style-type:none;
	padding:0;
}
article > header menu a{
	color: inherit;
	text-decoration:none;
}
article > header nav > menu > li::before{
	content:'|';
	margin:0 1ch;
}
article > header menu li:first-of-type::before{
	content:'';
}
article > header menu  a{
	outline:none;
}
article > header menu  a{
	display:inline-block;
	box-sizing:border-box;
	border:1px solid transparent;
	/* overflow: hidden; */
}
article > header menu  a:hover{
	border-bottom:1px solid var(--primary-tint);
}
article > header menu  a:target, body:has(dialog.basket[open]) article > header menu a#favorites{
	color: var(--primary-tint);
}
body:has(dialog.basket[open]) article > header menu a:not(#favorites){
	color:inherit;
}

article > header menu li:has(menu){
	/* position: relative; */
}
article > header menu a#favorites{
	/* display:inline-flex; 
	flex-direction: row;
	align-items: center;*/
}
article > header menu a#favorites:after{
	/* content:'\025BE'; */
}
article > header menu a[data-icon]:before{
	line-height:1em;
	padding:0;
	width:auto;
	order: 2;
	padding-left: 0.4ch;
}

article > header menu menu{
	display:flex;
	flex-direction: row;
	position: absolute;
	z-index: 5;
	visibility: hidden;
	padding: 2rem;
	flex-wrap: wrap;
	grid-gap: 3rem;
	/* border:1px solid white; */
	border-top:none;
	left: 0;
	right: 0;
	width: auto;
	justify-content: center;
	background: var(--main-background);
	border-bottom: 1px solid var(--dominant-color);
	/* height: 66dvh; */
	/* border: 2px solid red; */
	/* background: green; */
}

header.row aside{
	content:'';
	display:block;
	background:var(--primary-tint);
	width:100%;
	height:2em;
	position:absolute;
	top:100%;
	z-index:1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: white;
	align-items: center;
	background-image: url(img/main.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: black;
	background-size: contain;
}

header.row aside p{
	max-width: 80ch;
	background: black;
	margin-bottom: 1em;
}

footer.content .middle{
	background-color: var(--primary-tint);
	color: white;
	flex-grow: 20;
	background-color: var(--main-background);
}




/*
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&
	icon_names=add,animated_images,animation,arrow_back,arrow_forward,bolt,check,close,colors,contrast,delete,early_on,edit,
	favorite,fullscreen,fullscreen_exit,more_vert,music_note,refresh,settings,toggle_off,toggle_on,tune,wb_sunny
*/
/*
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/lib/res/icons.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100;
	src: url(/lib/res/icons100.woff2) format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 200;
	src: url(/lib/res/icons200.woff2) format('woff2');
}
*/

/*
	https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..40,100..400,0..1,0..200&icon_names=add,add_photo_alternate,animated_images,animation,arrow_back,arrow_forward,bolt,check,close,colors,contrast,delete,download,early_on,edit,favorite,fullscreen,fullscreen_exit,mail,more_vert,music_note,refresh,restart_alt,schedule,settings,shopping_cart,square_foot,toggle_off,toggle_on,tune,wb_sunny
	remember to change query vX so that we force the browsers to get the updated font when we actually add new symbols
		remember to update the url in the server-side link rel preload of the font
*/
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 400;
  src: url(/web/res/material_symbols.woff2?v=5) format('woff2');
}


.material-symbols-outlined, *[data-icon]::before{
  font-family: 'Material Symbols Outlined';
  font-weight: 200;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

*[data-icon]::before{
	content: attr( data-icon );
	/* font-size: 1.6rem; */
	line-height: 3rem;
	width  :3rem;
	display:inline-block;
	text-align: center;
}

.content  ul{
	display:flex;
	list-style-type:none;
	padding:0;
	/* background: transparent; */
	/* width: fit-content; */
}
.content ul li.widget {
    --s: 0.7rem;
    --c: 2rem;
    border-radius:1rem;
    aspect-ratio:1/1;
    width : 6rem;
    height: 6rem;
    /* display: inline-block; */
    margin:0 1rem;
    --main-background: #000;
    background: var(--main-background);
    --alpha: 0.4;
    font-family: system-ui;
    box-sizing: border-box;
    -webkit-user-select: none;
	user-select: none;
    touch-action: none;
}
.content ul li.widget:where(.kelvin,.color) > div::before{
	color: white;
	font-size: 0.8em;
}
body:has(.content ul li.widget.dragging:where(.kelvin,.color)){
	cursor: ew-resize;	
}

:root[data-active-preset-class='solidWhite'] .content .widget.kelvin > div{
    box-shadow: 0 0 5vmin 0.2vmin var(--color);
}
:root[data-active-preset-class='solidWhite'] .content .widget.kelvin > div::before{
	color: var(--color);
	color: white;
}

:root[data-active-preset-class='solidColor'] .content .widget.color > div{
    box-shadow: 0 0 5vmin 0.2vmin var(--dominant-color);
}
:root[data-active-preset-class='solidColor'] .content .widget.color > div::before{
	/* color: var(--dominant-color); */
	/*color: white;*/
}

:root[data-active-preset-class='solidColor'] .content .widget.spatial-animation li.selected{
    box-shadow: 0px 0px 5vmin 0.2vmin var(--dominant-color);
}

:root:not([data-active-preset-class='solidColor']) .content .widget.spatial-animation{
    --dominant-color:white;
}
.content ul li.widget:where(.kelvin,.color) {
	cursor:pointer;
}
.content ul li.widget:where(.kelvin,.color) > div::before{
	margin-top: -0.4em;
}
.content ul li.widget:where(.kelvin,.color) > svg{
	--w   : calc(30*var(--c));
	width : var(--w);
	height: var(--w);
	left: 50%;
	top : calc( 50% - calc(0.5*var(--w)));
	left: calc( 50% - calc(0.5*var(--w)));
	top: 50%;
	transform-origin: center;
	transform: rotate(89.75deg);
	opacity: var(--alpha);
	opacity: 0.9;
}	
.content ul li.widget:where(.kelvin,.color).dragging > div{
	z-index:3;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 1px solid white;
	box-sizing: border-box;
	background-color: var(--color);
	color:white;
}

.content ul li.widget:where(.kelvin) > svg{
	transform: rotate( calc(var(--angle) - 0deg));
}

.content ul li.widget:where(.kelvin,.color) > svg *{	
	vector-effect: non-scaling-stroke;
	stroke-width: calc(3*var(--c));
}

.content ul li.widget.spatial-animation li{
	padding:0;
}

.content ul li.widget.spatial-animation{
    aspect-ratio:4/1;
    width:auto;
    height:6rem;
    background:none;
}
.content ul li.widget.spatial-animation > figure{
    display:none;
}
.content ul li.widget.spatial-animation > menu{
    visibility:visible;
    margin:0;
    padding:0;
    position:relative;
    top : auto;
    left: auto;
    list-style-type:none;
    border-radius:1rem;
    overflow:hidden;
    z-index: 0;
    grid-column-gap:1rem;
    height: 6rem;
    display: flex;
    overflow: visible;
    justify-content: center;
}
.content ul li.widget.spatial-animation > menu li{
	border-radius:inherit;
	box-sizing:border-box;
	padding:1rem;
	aspect-ratio:1;
	flex-grow:0;
	flex-shrink:2;
	flex-basis: 5rem;
}
.content ul li.widget.spatial-animation > menu :where(li[data-type='0'],li[data-type='2'],li[data-type='3']){
	display:none;
}

.content ul li.widget.schedule {
	width: 11rem;
	height: 6rem;
	color: white;
	padding: 0 1rem;
	box-sizing: border-box;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.content ul li.widget.schedule.turn-on{
}

.content ul li.widget.schedule *{
	margin:0;
}
.content ul li.widget.schedule :where(h2,h3){
	font-weight: 400;
	font-size  :0.85rem;
	line-height: 1.5rem;
	text-align: center;
}

.content ul li.widget.schedule main h1{
	font-weight:500;
	filter: drop-shadow(2px 2px 4px var(--dominant-color));
}

.content ul li.widget.special{
	color:white;
	overflow:visible;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	text-align: center;
	cursor: pointer;
}

.content ul li.widget.special:has(.switch){
	width:7rem;
}
figure.clock {
    width: 8rem;
    height: 8rem;
    padding: 0;
    margin: 0;
    position: relative;
    box-sizing:border-box;
    border-radius: 50%;
    color: white;
}
figure.clock figcaption{
	position:absolute;
	bottom:-1rem;
	color:black;
}
.clock :where(ol,ul){
    padding:0;
    margin: 0;
    position: absolute;
	width:100%;
	height:100%;
	box-sizing:border-box;
}
.clock .markers{
    list-style-type:none;
    text-align: center;
}
.clock .markers li{
	position:absolute;
	left: 50%;
	top: 0;
	transform: rotate( calc( var(--i) * 30deg) ) translateX(-50%);
	transform-origin: 0rem 4rem;
	border: 1px solid;
	border-radius:100%;
	height: 0.4rem;
	background: currentColor;
	box-shadow: 0 0 6px 3px var(--primary-shade);
}
.clock .markers li:nth-of-type(3n+1){
	-height:0.6rem;
}
.clock .pointers{
	list-style-type:none;
}

.clock .pointers li{
	position:absolute;
	left: 50%;
	top: 0;
	transform:  rotate( var(--a) ) translateX(-50%) translateY(calc(4rem - 100%));
	transform-origin: 0rem 4rem;
	border: 1px solid;
	height: 3rem;
	background: currentColor;
	box-shadow: 0 0 7px 3px var(--primary-shade);	
}

.clock .pointers li.hours{
	--a: calc( var(--t) * 30deg);
	height:2.4rem;
	animation-duration: calc(12 * 60 * 60s);
	animation-timing-function: linear;	
}
.clock .pointers li.minutes{
	--a: calc( var(--t) * 1turn );
	height:3rem;
	animation-duration: calc(60 * 60s);	
	animation-timing-function: linear;	
}
.clock .pointers li.seconds{
	--a: calc( var(--t) * 60turn );
	height:3.5rem;
	animation-duration: 60s;
	animation-timing-function: steps(60);
}

.animated.clock .pointers li{
	animation-name: clock-ani;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.clock:not(.animated) li.seconds{
	display:none;
}

@keyframes clock-ani{
	0%{
		transform:  rotate( calc( var(--a) + 0deg ) ) translateX(-50%) translateY(calc(4rem - 100%));
	}
	100%{
		transform:  rotate( calc( var(--a) + 360deg ) ) translateX(-50%) translateY(calc(4rem - 100%));
	}
}



.content ul.scheduled-presets {
    display: block;
    height : 6rem; 
    width  : 13rem;
    overflow:hidden;
    position:relative;
}
.content ul.scheduled-presets li{
    position:absolute;
    transition:1s;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
	animation-play-state: running;
}

.content ul.scheduled-presets.turn-on li.turn-off{
    animation-name:disappear-to-top;
}
.content ul.scheduled-presets.turn-on li.turn-on{
    animation-name:appear-from-bottom;
}
.content ul.scheduled-presets.turn-off li.turn-off{
    animation-name:appear-from-bottom;
}
.content ul.scheduled-presets.turn-off li.turn-on{
    animation-name:disappear-to-top;
}
@keyframes appear-from-bottom{
	from{
		/*top:120%;*/
		transform:translateY(120%);
	}
	to{
		/*top:0%;*/
		transform:translateY(0%);
	}
}
@keyframes disappear-to-top{
	from{
		/*top:0%;*/
		transform:translateY(0%);
	}
	to{
		/*top:-120%;*/
		transform:translateY(-120%);
	}
}

.content#c_contact .middle, .content#c_faq .middle{
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
}
.content#c_contact .middle{
	min-height: 100dvh;
    height: auto;
    position:relative;
    color: var(--dominant-contrast);
    color: white;
}

.content#c_contact .left{
	display:none;
}
.content#c_faq{
	display: flex;
}

.content#c_faq .middle{
    background: var(--main-background);
    color: white;
    height: 100dvh;
    align-self: flex-start;
    flex-basis: 100dvh;
    display: flex;
    margin: 0;
}

.content#c_faq .middle::before {
    content: 'illúmea';
    -position: relative;
	font-family: 'MuseoModerno';
	font-size  :  20dvh ;
	font-weight:  100;
	margin: 0;
    -margin-top:-20dvh;
	line-height: 1em;
    text-align:center;
    color:black;
    display:block;   
	background:white;
	width:100%;
	display:none;
}
.content#c_faq .middle h1 + div{
	display: grid;
	grid-template-columns: repeat(auto-fill,64ch);
	grid-auto-rows: max-content;
	grid-gap:1rem;
	width: 100%;
	text-align:left;
	font-family:lato;
	justify-content: space-evenly;
}
.content#c_faq .middle dt{
	font-weight:bold;
}
.content#c_faq .middle dd{
	margin:0;
}

.content#c_faq {
	min-height: 100dvh;
	height: auto;
	background: var(--main-background);
}
.content#c_faq .middle{
	height: fit-content;
}

body.details-on-display {
	overflow:hidden;
}
body.details-on-display .content{
	visibility:hidden;
}

article.details, article.gallery{
	animation-name:var(--aname);
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-play-state: running;
	will-change: transform;
	min-height: 100dvh;
}

article.details {
    position: fixed;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    background: white;
    overflow: auto;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    scroll-behavior: smooth;
    scroll-snap-type: block mandatory;
    justify-content: flex-end;
}

@media (orientation: portrait){
	:root{
		font-size:calc(100dvh / 80);
	}
	header.row > h1{
		font-size:calc(100dvw / 5);
	}
	.row:first-of-type, header.row {
		font-size: calc( var(--rel-h) * 33dvh );
	}
	article > header menu{
		font-size: min(2rem, calc(100dvw / 58));
	}
	.row,.gap{
		--rel-h: calc( var(--index) + 2 - var(--page) );
		font-size: calc( var(--rel-h) * 20dvh );
		height: 1em;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		background: transparent;
		position: relative;
		z-index: 10;
		align-items: center;
		justify-content: flex-start;
		-border:1px solid red;
		-box-sizing:border-box;
	}	
	.gap{
		font-size: calc( var(--rel-h) * 40dvh );
	}
	.row .right{
		align-items:center;
		display: flex;
		flex-direction: column;
		align-content: center;
		flex-basis: 100%;
		height: 33%;
		justify-content: flex-end;
	}
	.row .left{
		display: none;
	}
	.row .left > figure, .row .right > figure{
		margin-left: 0;
		margin-right:0;
		margin-top: 0;
	}
	.content{
		flex-direction:column;
	}
	.content > .left{
		flex-basis:25%;
	}
	.content > .right{
		flex-basis:50%;
	}
	
	.content > .middle{
		margin: 0;
		flex-basis: 25%;!;!i;!;
		flex-direction: row;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		grid-column-gap: 1em;
		padding: 0 1em;
		align-content: center;
	}
	.content > .middle :where(h1,h2,p){
		flex-basis:100%;
		text-align: center;
	}
	.content.last div.left{
		flex-grow: 0;
	}
	.content.last div.right {
	    background: white;
	    margin: 0;
	    align-items: center;
	}	
	.content.last div.right img {
		height:100%;		
	}

	.content#c_contact{
		height:auto;
	}
	.content#c_contact .left{
		display:block;
	}
	
	.content#c_contact .middle{
	    position: relative;
	    margin-block-start: 2rem;
	}

}




.gallery > header > h1 img{
    display:block;
    position:absolute;
    width: 0.51em;
    transform-origin: bottom left;
    transform: rotate(-90deg);
    bottom: 0.15em;
    left: 0.05em;
}

@media (max-aspect-ratio: 3/2) {
	:root{
		font-size:calc(100dvh / 70);
	}
	header.row > h1{
		font-size:calc(100dvw / 5);
	}
}


.row > figure  {
    height: 100%;
    width:100%;
    overflow:hidden;
}

.row > figure  > img{
    object-fit: cover;
    height:100%;
    width:100%;
    position:absolute;
}

dialog.photo-toast {
    display: flex;
    align-items: center;
    gap:1em;
}
dialog.photo-toast img{
    height:6em;
	width:6em;
	object-fit:cover;
}

.gallery.loading{
	--page:0;
}
.gallery > header.row.animated > h1::before{
    display:block;
    position:absolute;
    height: 100%;
    left: -5%;
    width:20%;
    background: white;
    content:'';
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,100%) 50%, 
        rgba(255,255,255,0) 100%
    );
    animation-name:page-loading-animation;
    animation-duration: 2.5s;
    animation-play-state: running;
    animation-iteration-count: 5;
}
@keyframes page-loading-animation{
    from{
        left:-10%;
    }
    to{
        left:90%;
    }
}

#copyrightNotice {
	background:black;
	color:white;
	display: flex;
	justify-content: space-between;
	padding-top:5pt;
	height: auto;
	overflow: hidden;
	font-size: 90%;
	position:fixed;
	flex-direction: row;
	flex-wrap: nowrap;
	bottom:0;
	left  :0;
	right :0;
	overflow:clip;
	/*bottom: calc( clamp(1.1lh, calc( 100dvh - 1px*var(--sy)) , 2lh)*-1);*/
}

#copyrightNotice > nav{
	display:flex;
	justify-content: center;
}
#copyrightNotice > nav a:not(:last-child)::after{
	content:'|';
	margin-inline:1ch;
}
#copyrightNotice > nav a{
	display:inline-flex;
	justify-content: center;
	flex-direction: row;
	text-align: center;
	align-items: center;
}
#copyrightNotice > a:last-of-type{/*ambianti*/
	text-align:left;
}
#copyrightNotice > a:last-of-type{/*jsl3*/
	text-align:right;
}

#copyrightNotice > *{
	color:inherit;
	position:relative;
	z-index:101;
}
#copyrightNotice.hidden{
	transition: transform 0.3s;
	transform : translateY( calc(100% - 5px) );
	background-color:#111;
}
#copyrightNotice.hidden:hover{
	transform: translateY(0);
}@media screen{/*faster*/
	/* latin-ext */
	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url(/web/fonts/zrfi0HnU0_7wWdMrFcWqSEXlVQnrsAI.woff2) format('woff2');
	  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	/* latin */
	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 100 900;
	  font-display: swap;
	  src: url(/web/fonts/zrfi0HnU0_7wWdMrFcWqSEXlWwnr.woff2) format('woff2');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
}
@media print{/*chrome print to pdf doesn't embed properly variable fonts*/

	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 100;
	  /*font-display: swap;*/
	  src: url(/web/fonts/MuseoModerno-Thin.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 200;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-ExtraLight.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 300;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-Light.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 400;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-Regular.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 500;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-Medium.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 500;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-Medium.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 600;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-SemiBold.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 700;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-Bold.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 800;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-ExtraBold.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
	  font-family: 'MuseoModerno';
	  font-style: normal;
	  font-weight: 900;
	  font-display: swap;
	  src: url(/web/fonts/MuseoModerno-Black.ttf) format('truetype');
	  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

}

/*Lato*/
/*
	["Thin", 100],
	["Light", 300],
	["Regular", 400],
	["Bold", 700],
	["Black", 900],
	["Thin", 100, true],
	["Light", 300, true],
	["Regular", 400, true],
	["Bold", 700, true],
	["Black", 900, true],
*/

/*Lato Thin normal*/
@font-face{
	font-family: 'Lato';
	font-style : normal;
	font-weight: 100;
	font-display: swap;
	src: url(/web/fonts/Lato-Thin.ttf);
}

/*Lato Light normal*/
@font-face{
	font-family: 'Lato';
	font-style : normal;
	font-weight: 300;
	font-display: swap;
	src: url(/web/fonts/Lato-Light.ttf);
}

/*Lato Regular normal*/
@font-face{
	font-family: 'Lato';
	font-style : normal;
	font-weight: 400;
	font-display: swap;
	src: url(/web/fonts/Lato-Regular.ttf);
}

/*Lato Bold normal*/
@font-face{
	font-family: 'Lato';
	font-style : normal;
	font-weight: 700;
	font-display: swap;
	src: url(/web/fonts/Lato-Bold.ttf);
}

/*Lato Black normal*/
@font-face{
	font-family: 'Lato';
	font-style : normal;
	font-weight: 900;
	font-display: swap;
	src: url(/web/fonts/Lato-Black.ttf);
}

/*Lato Thin italic*/
@font-face{
	font-family: 'Lato';
	font-style : italic;
	font-weight: 100;
	font-display: swap;
	src: url(/web/fonts/Lato-ThinItalic.ttf);
}

/*Lato Light italic*/
@font-face{
	font-family: 'Lato';
	font-style : italic;
	font-weight: 300;
	font-display: swap;
	src: url(/web/fonts/Lato-LightItalic.ttf);
}

/*Lato Regular italic*/
@font-face{
	font-family: 'Lato';
	font-style : italic;
	font-weight: 400;
	font-display: swap;
	src: url(/web/fonts/Lato-RegularItalic.ttf);
}

/*Lato Bold italic*/
@font-face{
	font-family: 'Lato';
	font-style : italic;
	font-weight: 700;
	font-display: swap;
	src: url(/web/fonts/Lato-BoldItalic.ttf);
}

/*Lato Black italic*/
@font-face{
	font-family: 'Lato';
	font-style : italic;
	font-weight: 900;
	font-display: swap;
	src: url(/web/fonts/Lato-BlackItalic.ttf);
}


/*Figtree*/
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: 2em;
	line-height: 100cqh;
}
article.details > main{
	flex-basis: min-content;
	flex-grow: 1;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
article.details > main :where(section.description, section.features) *[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;
	position:relative;
}
article.details aside.photos .try-button{
	position: absolute;
	left:1em;
	top :1em;
	padding:1em;
	border:1px solid #444444;
}


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;
	font-family:MuseoModerno;
	font-weight:100;
	text-transform:lowercase;
	/*color:var(--dominant-color-dark);*/
}

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 :where(p,div) {
	font-family:lato;
	margin-bottom: 1em;
}
article.details q {
	font-style:italic;	
}
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: 30%;
	flex-shrink: 2;
	position:relative;
}
article.details > main > section.features > figure img{
	max-height: calc(100dvh  - 9rem);
	max-width: calc(100dvw - 9rem);
	object-fit: contain;
}
iframe.demo-app{
	aspect-ratio: min( calc(var(--dvw)/var(--dvh)) , calc(9/19) );
	height:100%;
	max-height: calc(100dvh  - 13rem);
	max-width: calc(100dvw - 3rem);
	border-radius:1.5em;
}

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{
	position:absolute;
	z-index:1;
	color:white;
	top:50%;
}
article.details > main > section.features > figure figcaption button{
	padding:1em;
}

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 h3{
	font-weight:300;
}
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{
		transform:translateX(-100dvw);
	}
	to{
		transform:translateX(0%);
	}
}
@keyframes disappear-to-right{
	from{
		transform:translateX(0%);
	}
	to{
		transform:translateX(100dvw);
	}
}


@keyframes appear-from-right{
	from{
		transform:translateX(100dvw);
	}
	to{
		transform:translateX(0%);
	}
}
@keyframes disappear-to-left{
	from{
		transform:translateX(0%);
	}
	to{
		transform:translateX(-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 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) {
	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;
	}	
	
	:where(article.details,article.gallery)  :is(p,dl,figcaption,button,a){
		font-size: calc(100dvw / 35);
	}
	article.details p {
		font-family:lato;
		margin-bottom: 0;
	}	
	article.details aside.photos .try-button{
		top:2em;
	}
}

@media (max-aspect-ratio: 3/5){
	.details-on-display article.details nav.side-nav, article.details nav.side-nav{
		font-size: calc(100dvw/35);
	}
	:where(article.details,article.gallery)  :is(p,dl,figcaption,button,a){
		font-size: calc(100dvw / 30);
	}	
	article.details aside.photos .try-button{
		top:3em;
	}	
}

article.details figure:fullscreen :where(img,video) {
    object-fit: contain!important;
}
dialog.payment.try-on form{
	max-width:initial;
	/* width: min-content; */
	width: min-content;
}
dialog.payment.try-on section{
	/* flex-basis: 100%; */
} 
dialog.payment.try-on section :where(h1,h2,h3,legend){
	font-family:MuseoModerno;
	font-weight:200;
	margin:0;
	border:none;
	text-align:revert;
}
dialog.payment.try-on section h1{
	font-size  :1.2em;
	font-weight:200;
	color:var(--dominant-color-dark);
}
dialog.payment.try-on section h1[data-icon]:before{
	font-size:1.5em;
	width: fit-content;
}

dialog.payment.try-on section figure{
	background:#f4f4f4;
	padding:0.5ch;
	align-items: center;
	position:relative;
	margin-bottom: 2em;/*because jpeg,png or webp appear under it*/
}
dialog.payment.try-on section figure figcaption{
	bottom:0;
	display:flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	grid-gap:1ch;
	width: 100%;
	position: absolute;
}
dialog.payment.try-on section figure figcaption .under-parent{
	position:absolute;
	bottom:-1em;
	/* left  :0; */
	align-self: flex-start;
}
dialog.payment.try-on section figure figcaption button{
	align-self: flex-end;
	margin: 1em;
	flex-basis:min-content;
	background-color:black;
	color:white;
}
dialog.payment.try-on section figure figcaption button::before{
	line-height:initial;
	font-size:1.5em;
	width:initial;
}
dialog.payment.try-on section figure figcaption em{
	font-weight:bold;
}
dialog.payment.try-on footer{
	display: flex;
	align-items: center;
}
dialog.payment.try-on footer label{
	display: inline-block;
	flex-basis: min-content;
}
dialog.payment.try-on form footer label.footer-label-2,
dialog.payment.try-on form.busy footer label.footer-label-1{
	display: none;
}

dialog.payment.try-on form footer label.footer-label-1,
dialog.payment.try-on form.busy footer label.footer-label-2{
	display: inline-block;
}

.pill{
	border:1px solid;
	border-radius:2ch;
	padding:0.5ch;
}


dialog.payment.try-on section figure picture{
	display:block;
	position:relative;
	padding:0;
	border:none;
	margin: 0;
	min-width:25rem;
	aspect-ratio:4/3;/*same as most phones*/
	overflow:hidden;
	container-type:size;
}
dialog.payment.try-on section figure picture img{
	display:block;
	object-fit:contain;
	position:relative;
	max-height:100cqw;/*thus portrait photos will be displayed as square cropped*/
	max-width :100%;
	min-height:100%;
	width:100%;
}

dialog.payment.try-on section figure picture img.result{
	position:absolute;
	top:0;
	display: none;
}

@keyframes try-on-progress {
	0% { 
		left:0;
		right:100%;
		border-left:none;
		border-right:1px solid white;
	}
	50% {
		left:0;
		right:0; 
		border-right:none;
		border-left:1px solid white;
	}
	100% { 
		left:100%; 
		right:0
	}
}

dialog.payment.try-on fieldset{
	margin:1em 0 0 0;
	width: auto;
}
dialog.payment.try-on legend{
	font-size:1rem;
	font-weight:bolder;
}
dialog.payment.try-on label{
	display: block;
}
dialog.payment.try-on .info-icon{
	color:var(--dominant-color-dark);
	font-size: 1lh;
	line-height:1em;
	margin-right: 1ch;
	font-family: 'MuseoModerno';
	font-weight: lighter;
}
dialog.payment.try-on .pill-hint{
	background-color:#f4f4f4;
	color:#222222;
	padding:1ch;
	border-radius:1ch;
}
dialog.payment.try-on fieldset legend + p{
	margin:0;
}
dialog.payment.try-on .tab-picker-container {
    padding:0;
    display:grid;
	grid-template:"a b" "c c"; 
	width:100%;	
}
dialog.payment.try-on .tab-picker-container label{
	text-align: center;
	overflow:visible;
	border:0.6em solid #f4f4f4;
	background:#f4f4f4;
}
dialog.payment.try-on .tab-picker-container label:nth-of-type(1){
	grid-area:a;
	border-radius:1.2em 0 0 1.2em;
}
dialog.payment.try-on .tab-picker-container label:nth-of-type(2){
	grid-area:b;
	border-radius:0 1.2em 1.2em 0;	
}
dialog.payment.try-on .tab-picker-container label > div{
	display:block;
	width:100%;	
	line-height:3.5em;
	position:relative;
}
dialog.payment.try-on .tab-picker-container label:has(input:checked) > div{
	font-weight:bolder;	
	z-index:1;
	position:relative;
	@starting-style{
		font-weight:inherit;
	};
	transition:font-weight 1s;
}
dialog.payment.try-on .tab-picker-container label:has(input:checked) > div::before{
	display:block;
	content:'';
	width :100%;
	height:100%;
	position:absolute;
	border-radius:0.8rem;
	background: white;
	z-index:-1;
}
dialog.payment.try-on .tab-picker-container label:nth-of-type(1):has(input:checked) > div::before{
	transition:right 1s;
	right: 0em;
	@starting-style{
		right:-100%;
	}
}

dialog.payment.try-on .tab-picker-container label:nth-of-type(2):has(input:checked) > div::before{
	transition:left 1s;
	left:0;
	@starting-style{
		left:-100%;
	}
}
dialog.payment.try-on .tab-picker-container label + .pill-hint{
	all:revert;
	grid-area:c;	
	background:white;
	display:none;
	padding-left:1em;
	min-height:4em;
}

dialog.payment.try-on .tab-picker-container label > input{
	display:none;
}

dialog.payment.try-on label:has(input[name='hknown']:checked) + .pill-hint{
	display:block;
}
dialog.payment.try-on  picture{
	position:relative;
}
dialog.payment.try-on  picture.output img{
	object-fit:contain;
}
dialog.payment.try-on form.busy picture{
	overflow:hidden;
	/* position: relative; */
}
dialog.payment.try-on form.busy picture::before{
	position:absolute;
	top:0;
	bottom:0;
	background:rgba(0,0,0,0.5);
	content:'';
	display:block;
	animation-name:try-on-progress;
	animation-duration:2.5s;
	animation-iteration-count:infinite;
	z-index: 1;
}
dialog.payment.try-on form.busy picture.output::after{
	content:'loading visualization';
	background:rgb(0,0,0,0.4);
	position:absolute;
	top:50%;
	left:50%;
	color:white;
	font-family:'museoModerno';
	font-size: 1.2em;
	text-align:center;
	transform:translate(-50%,-50%);
}
dialog.payment.try-on picture img:last-of-type{
	position:absolute;
	top:0;
}

dialog.payment.try-on section figure + div p:nth-child(1){
	
}

dialog.payment.try-on form.busy picture.output img:last-of-type{
	visibility:hidden;
}

dialog.payment.try-on.completed picture.output{
	all:revert;
	-position: relative;
}
dialog.payment.try-on.completed picture.output img{
	max-width:min(100ch, 80vw);
	max-height:70vh;
	width:auto;
	height:auto;
}

dialog.payment.try-on.completed section figure figcaption{
	all: revert;
	position:absolute;
	bottom: 6em;
	right: 2em;
	width :auto;
}

dialog.payment.try-on.completed section figure figcaption .fullscreen-icon{
	font-size:2rem;
	border-radius:1em;
	background-color:rgb(255,255,255,0.8);
	color:rgb(0,0,0,0.8);
	width:4rem;
	height:4rem;
	text-align:center;
	line-height:4rem;
	margin:0;
	padding:0;
	position:absolute;
	right:0;
}
dialog.payment.try-on.completed section figure figcaption .fullscreen-icon::before{
	line-height:inherit;
	font-size:inherit;
	width:auto;
	margin:0;
}
dialog.payment.try-on a.button{
	text-decoration:none;
}
dialog.payment.try-on.completed footer *[data-icon]::before{
	line-height:inherit;
	font-size:1.5em;
	width:auto;
}

article.details :where(q,em){
	font-weight:300;
}.content#c_contact .columns {
    display: flex;
    grid-column-gap: 5rem;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 2rem;
    margin-top: -2rem;
}
.content#c_contact .column {
    flex: 1;
    padding: 1rem;
    box-sizing: border-box;
    margin-top: -1rem;
}
content#c_contact, content#c_contact {
    color: var(--dominant-contrast);
    background-color:var(--dominant-color);
}

textarea {
    resize: none;
}

.content#c_contact h2 {
    font-size: 2rem; 
}

.content#c_contact .column.inquiry,
.content#c_contact .column.customer-service,
.content#c_contact .column.sales-general {
    flex: 2;
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.content#c_contact h1 {
    font-size: 3rem; 
    margin-bottom: 2rem;
}

.content#c_contact a{
	display:inline-block;
	border-bottom:1px solid;
}
.content#c_contact a:hover{
	color:var(--dominant-color);
}
.content#c_contact form{
	flex-basis:100%;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}
.content#c_contact form > div{
	display:flex;
	gap:1.4em;
}
.content#c_contact input,
.content#c_contact select,
.content#c_contact textarea{
    flex-basis:100%;
    border: 0.1rem solid var(--dominant-contrast);
    color:black;
    background-color: white;
    font-size: 1rem;
    border-radius: 0.5rem;
    font-family: 'Lato', sans-serif;
    padding: 0.6rem;
}
.content#c_contact form button{
	/* flex-grow:0; */
	/* display: inline-block; */
	/* flex-basis: min-content; */
}

.content#c_contact select:focus {
    color: black; 
}

/* Social Icons */
.content#c_contact ul {
    list-style: none;
    padding: 0;
}

.content#c_contact li {
    margin-bottom: 0.625rem;
}

.content#c_contact .icon {
    font-size: 1rem;
    text-decoration: none;
}
.content#c_contact .social-icons ul {
	margin-top:-0.5em;	
    font-size: 0.875rem;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    grid-column-gap: 2em;
    justify-content: left;
}
input::placeholder, textarea::placeholder {
}

@media (max-width: 768px) {
    .content#c_contact .columns {
        flex-direction: column;
    }

    .content#c_contact .column {
        flex: none;
        width: 100%;
        margin-bottom: 1rem;
    }

    .content#c_contact .column.social-icons {
        align-items: center;
    }
}
@media (orientation: portrait){
	.content#c_contact .column.inquiry,
	.content#c_contact .column.customer-service,
	.content#c_contact .column.sales-general {
		font-size: calc(100dvw/30);  
	}
}#c_faq .middle > h1 {
    font-family: 'MuseoModerno', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: left;
    margin-top: 7rem;
}

#c_faq .category {
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
    width: 100%;
}

#c_faq .category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'MuseoModerno', serif;
    font-size: 1.5rem;
}

#c_faq .category-title {
    margin-left: 0; 
}

#c_faq .category-toggle {
    margin-right: 0; 
    font-size: 1.5rem;
}

#c_faq .questions {
    margin-top: 1rem;
    padding-left: 2rem; /
    display: block; 
}

#c_faq .question {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Lato', sans-serif; 
}
#c_faq  p{
	margin:0;
	font:inherit;
	text-align:inherit;
	max-width:inherit;
}
#c_faq  a{
	display:inline-block;
	border-bottom:1px solid;
	cursor:pointer;
}
#c_faq a:hover{
	color:var(--dominant-color);
}






/* payment */
dialog.payment {
    --dialog-border-color: black;
    --dialog-header-color: white;
    padding: 0;
    top: 0;
	left: 0;
}

dialog.modal-dialog-container.payment form{
    background:white;
    max-width: min(120ch, calc(100dvw - 1ch));
    max-height: calc((100dvh - 6px) - 3em);
}

dialog.payment form main{
    display: flex;
    flex-direction: row;
    grid-gap: 1em;
	padding : 1em;
}
dialog.payment form main > h1{
	flex-basis:100%;
	font-weight: 300;
}
dialog.payment form main > aside{
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	/* flex-shrink: 3; */
	flex-basis: max-content;
	flex-grow: 1;
}
dialog.payment form main > aside::before{
	flex-basis:100%;
	flex-shrink:1;
	/* content:''; */
	/* order  :1; */
}	
dialog.payment form main > aside label{
	
}
dialog.payment p a{
	display: inline-block!important;
	font-weight: bolder;
}
dialog.payment form main > aside > fieldset{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-basis: max-content;
}
dialog.payment form main > aside > fieldset hr{
	border:none;
	border-top:1px solid;
	margin:0;
}
dialog.payment form main > aside > fieldset label{
	margin:0;
	flex-basis: fit-content;
	/* white-space: nowrap; */
	/* vertical-align:middle; */
	display: flex;
	flex-direction: row;
}
dialog.payment form main > aside > fieldset label span{display: block;white-space: nowrap;}
dialog.payment form main > aside > fieldset label img{
	/* height:1lh; */
}
dialog.payment form main > aside label::after{
	display:none;
}
dialog.payment form main > aside label > :last-child{
	flex-grow: 0;
	flex-basis: max-content;
}

dialog.payment form main > aside figure{
	width:40ch;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
dialog.payment form main > aside figure canvas{
	width:100%;
	margin-bottom:-5rem;
}
dialog.payment form main > aside figure figcaption{
	margin-bottom:1rem;
	font-family:lato;
	font-weight:400;
}
dialog.payment form main > section:has(input){
	/* flex-basis:80ch; */
	flex-basis: fit-content;
	flex-shrink: 2;
}
dialog.payment form header{
	font-family:lato;
	padding:0.3rem 0.6rem;
	display: flex;
	flex-direction: column;
	padding:0;
	background: black;);
	padding-bottom: 1ch;
	color: white;
}
dialog.payment form header h1{
	font-family:'Lato';
	font-weight:200;
	font-size:2.4rem;
	text-align:center;
	margin:0;
}
dialog.payment form header nav{
	display: flex;
	justify-content: center;
}
dialog.payment form header nav a:not(:first-of-type)::before{
	content:'|';
	margin-inline:1rem;
}
dialog.payment form header button{
	display:none;
}
dialog.payment form header  *[data-icon]::before{
	line-height:2rem;
}
dialog.payment form fieldset{
    border:none;
    padding:0;
    margin-bottom: 2em;
    display:flex;
    grid-gap: 1.3rem;
    align-content: flex-start;
    flex-wrap: wrap;
}

dialog.payment form fieldset legend{
    font-size: 1.4rem;
    line-height:1em;
    margin-bottom: 0.5rem;
}
dialog.payment form :where(input,select){
    flex-grow:1;
    padding:0.6rem;
    font-size: 1rem;
    flex-basis: min-content;
}
dialog.payment form input::placeholder{
	color:#555;
}
dialog.payment form select:not(:active):invalid{
	color: #555;
}
dialog.payment form input:where([name='billing-address'],[name='shipping-name'],[name='shipping-address']){
    display:block;
    flex-basis:100%;
}

dialog.payment form label{
    display:block;
    font-family:lato;
    flex-basis:100%;
    display: flex;
    gap:1em;
}
dialog.payment form label > span{
	flex-basis:fit-content;
	flex-grow  :1;
	flex-shrink:0;
}
dialog.payment form label > input{
	flex-grow :0;
	flex-basis:1em;
}
dialog.payment form label::after{
	content:'';
	flex-basis :100%;
	flex-shrink:2;
}
dialog.payment form aside legend + p{
    margin: 0;
    flex-basis: max-content;
    width: fit-content;
    max-width: 15em;	
}
dialog.payment form footer{
	column-gap:1em;
}
dialog.payment form footer a{
	text-decoration:underline;
}
dialog.payment form footer button{
    margin: 1ch 0;
}
dialog.payment form footer label{
	display: inline-flex;
	flex-grow:2;
	flex-shrink:1;
	flex-direction: row;
	flex-wrap:wrap;
	align-items: center;
	/* max-width: 60%; */
	gap: 0;
}
dialog.payment form footer label::after{
	display:none;
}

dialog.payment form footer button[disabled]{
	background-color:gray;
	color:silver;
}

dialog.payment.notification form main{
	display:flex;
	flex-direction: column;
}
dialog.payment.notification form main p{
	max-width:60ch;
	margin:0;
}


dialog.payment.notification form {
	max-width:calc(100dvw - 2em);
}.basket{
	background:transparent;
	max-width: 100dvw;
	width: calc(100dvw - 1em);
	padding: 0;
	margin: 0;
	border: none;
	margin-top: 0;
	background: var(--main-background);
	border-bottom: 1px solid white;
	color: white;
}
.basket > article > header > nav{
	position:static;
} 
.basket > article > header h2{
	font-family: 'MuseoModerno';
	font-weight: 300;
	margin-left: 1em;
}
.basket::backdrop{
	backdrop-filter:blur(4px);
}
.basket figure figcaption{
	font-size: 1rem;
	order: -1;
	opacity: calc( clamp(0,1,var(--rel-h)));
}
.basket figure figcaption h1{
	margin:0;
	font-family: 'MuseoModerno';
	font-weight: 300;
	font-size:140%;
}
.basket figure figcaption h1 small{
	font-size:60%;
}
.basket figure figcaption h2{
	position:absolute;
	right:0;
	margin:0;
	font-family:lato;
	font-size:110%;
	font-weight:300;
}
.basket figure figcaption dd{
	display:flex;
	/* margin:0; */
	flex-direction: row;
	justify-content: space-between;
}
.basket figure figcaption dd .em{
	font-weight:bold;
}


.basket menu.cart-items{
	display:flex;
	flex-direction: row;
	padding: 2rem;
	flex-wrap: wrap;
	grid-gap: 3rem;
	border-top:none;
	left: 0;
	right: 0;
	justify-content: center;
}

.basket menu.cart-items  li > a::before{
	content:'';
	margin:0;
}
.basket menu.cart-items  li{
	flex-basis: min-content;
	position: relative;
	color: white;
	display:flex;
}
.basket menu.cart-items  li button[data-icon='close']{
	position:absolute;
	top: 2pt;
	right: 2pt;
	padding:1ch;
	background: black;
	color: white;
	opacity: 0.6;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
}
.basket menu.cart-items  li button[data-icon='close']::before{
	line-height:1em;
	width: auto;
}
.basket menu.cart-items  li:last-of-type{
	flex-basis: 100dvw;
	position: relative;
	color: white;
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
}
.basket menu.cart-items  li.checkout button{
	flex-basis: max-content;
	flex-grow:0;
	width: fit-content;
	/* background:black; */
}
.basket menu.cart-items  li figure img{
	flex-shrink:2;
	width: 20rem;
	border: 1px solid;
	border-radius: 0.5rem;
	aspect-ratio: 3/2
}