/* PAGE : VARIABLES >>> */
.pg{
	--pg--contentWidth: 920px;
	--pg--horizontalSpace: calc(
		(
			100vw - var(--pg--contentWidth)
		) / 2
	);
	.zone--banner {      grid-area: banner; }
	.zone--menubar {     grid-area: menubar;}
	.zone--content-info{ grid-area: content-info;}
	.zone--main {        grid-area: main;}
	.zone--footer {      grid-area: footer;}
	--pg--gridAreas:
		"banner"
		"menubar"
		"content-info"
		"main"
		"footer";
	--pg--gridColumns: max-content;
	--pg--gridRows:
		min-content
		min-content
		min-content
		minmax(0, 1fr)
		min-content;
	> .zone--main{
		.zone--main-ordering,
		.zone--main-filters{
			--pg_mainPanel--width:  450px;
			--pg_mainPanel--height: 100vh;
			--ui_panel--zIndex:     12;  
			--ui_foregroud--zIndex: 11;  
		}
	}
	> .zone--banner{
		--banner--gap:             20px;
		--banner--marginTop:       20px;
		--banner_logo--height:     58px;
		--banner_siteName--height: 58px;
		--banner--gridAreas:       "logo name . toolsbar";
		--banner--gridColumns:     max-content max-content 1fr max-content;
		--banner--gridRows:        min-content;
		--banner_toolbar--padding: 0 0 2px 0;
	}
	> .zone--menubar{
		--menubar--backgroundColor: var(--clr-red-1);
		--menubar--fontWeight:      bold;
		--menubar_siteMenu--borderColor: rgba(255, 99, 71, 0.1);
		/**/
		--menubar_siteMenu--gap :   20px;
		--menubar_siteMenu--borderWidth: 0 0 20px 0;
		--menubar_siteMenu_button--fontSize:18px;
		input[type="checkbox"],
		input[type="checkbox"] + label{
			display:none;
		}
	}
	> .zone--footer{
		--footer--fontSize:11px;
		--footer--color:   #aaa;
	}
}

@media only screen and (min-width: 750px) and (max-width: 920px) {
	body{background:lime !important;}
	.pg{
		--pg--contentWidth: 100vw;
		
	}
}
@media only screen and (max-width: 750px) {
/*
	body{background:pink !important;}
*/
	.pg{
		--pg--contentWidth: 100vw;
		> .zone--banner{
			.pe--site_name{
				display:none;
			}
			--banner--gap:             20px;
			--banner--marginTop:       20px;
			--banner_logo--height:     58px;
			--banner_siteName--height: 58px;
			--banner--gridAreas:       "logo name . toolsbar";
			--banner--gridColumns:     max-content max-content 1fr max-content;
			--banner--gridRows:        min-content;
			--banner_toolbar--padding: 0 0 2px 0;
		}
		> .zone--menubar{
			position:relative;
			display:grid; grid-template-areas:"label nav";
			input[type="checkbox"] + label{
				display:inline-block;
				width:45px;
			}
			nav > a.ui_button{
				display:none;
			}
			nav > a.ui_button[data-active="true"]{
				display:block;
			}
			input[type="checkbox"] + label + nav{
				position:absolute;
				z-index:1000;top:0;left:40px;
				display:flex;flex-direction:row;
				background:#fff;
			}
			input[type="checkbox"]:checked + label + nav{
				flex-direction:column;
			}
			
			input[type="checkbox"]:checked + label + nav > a.ui_button{
				display:block;
			}

			
			--menubar_siteMenu--gap :   10px;
			--menubar_siteMenu--borderWidth: 0 0 20px 0;
			--menubar_siteMenu_button--fontSize:15px;
		}
	}
}