/* ----- ----- ----- */
@import url('/.library/css/default.css');
@import url('/.library/css/banners.css');
@import url('/.library/css/components.css');
/* ----- ----- ----- */
body {
	height: auto;
	overflow-y: auto;
}
/* ----- ----- ----- */
header container {
	/*padding-bottom: 0;*/
}
header section div span {
	position: absolute;
	top: -0.3125rem;
	right: -0.5625rem;

	width: 16px;
	height: 16px;
	border: 2px solid rgb(0, 0, 0);
	border-radius: 50%;

	line-height: 2;
}
header section div#favs span {
	background: var(--g-rose);
}
header section div#cart span {
	background: var(--g-green);
}
header ul {
	/*
	display: flex;

	padding: 16px;

	overflow-x: auto;
	*/
	display: none;
}
header ul li {
	position: relative;

	margin: 0 4px;
	padding: 4px 8px;

	border-radius: 100px;

	background: rgb(32, 32, 32);
	color: var(--silver);
	box-shadow: 0 0 3px rgb(80, 80, 80);

	text-wrap: nowrap;
}
header ul li.selected {
	background: var(--g-rose);
	color: rgb(255, 255, 255);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	box-shadow: none;
	font-weight: 700;
}
header ul li.box-shadow.selected:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--g-rose);
filter: blur(8px);
}
header ul li.box-shadow.selected:before {
	border-radius: 100px;

	filter: blur(3px);

	z-index: -1;
}
/* ----- ----- ----- */
main {
	/*margin-top: 104px;*/
	margin-top: 64px;
}
main > section#products, main > section#favorites, main > section#banner {
	padding: 16px 5vw;
}
main > section > p {
	margin-left: calc(min(2.4vh, 4.2vw) + 4px);
}
main > section > section {
	width: 90vw;
	height: auto;
}
main > section > section > article {
	margin-top: 16px;
	padding: min(6vw, 24px) min(4vw, 16px);

	width: min(34vw, 136px);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 16px;

	background: var(--g-blue);
}
main > section > section > article.box-shadow:before {
	border-radius: 16px;
}
body#christmas main > section > section > article.box-shadow {
	background: var(--christmas);
}
body#christmas main > section > section > article.box-shadow:before {
	background: var(--christmas);
}

main > section > section > article:after {
	content: "";

	position: absolute;
	top: 2px;
	left: 2px;

	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: 16px;

	background: rgb(255, 255, 255);

background-image: url(./pic-01.png);
background-size: cover;
}

main > section > section > article > section.background {
	position: absolute;
	top: 2px;
	left: 2px;

	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: 16px;

	background: rgb(255, 255, 255);

	overflow: hidden;
}
main > section > section > article > section > img {
	position: absolute;
	top: 0;
	left: 0;

	opacity: 0;
	visibility: hidden;

	transition: opacity 2s;
}
main > section > section > article > section.bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	padding: 5%;

	border-radius: 0 0 16px 16px;

	background: linear-gradient(135deg, rgba(0, 216, 255, .8), rgba(255, 8, 248, .8));
	backdrop-filter: blur(2px);
}
main > section > section > article > section.left {
	position: absolute;
	top: 8%;
	left: 8%;

	width: min(5vw, 20px);
	height: auto;
}
main > section > section > article > section.left > div {
	width: 100%;
	height: min(5vw, 20px);
	border-radius: 1px;
}
main > section > section > article > section.left > div:nth-child(1) {
	background: linear-gradient(135deg, #00c6ff 0%, #0072ff 94%);
	box-shadow: 0 2px 4px -2px var(--blue);
}
main > section > section > article > section.left > div:nth-child(2) {
	background: linear-gradient(135deg, rgb(255, 23, 100) 0%, rgb(237, 52, 149) 94%);
	box-shadow: 0 2px 4px -2px var(--pink);
}
main > section > section > article > section.left > div:nth-child(3) {
	background: linear-gradient(135deg, #19e6d3 0%, #19be6b 94%);
	box-shadow: 0 2px 4px -2px var(--green);
}
main > section > section > article > section.left > div:nth-child(4) {
	background: linear-gradient(135deg, rgb(32, 40, 48), rgb(16, 16, 16));
	box-shadow: 0 2px 4px -2px rgb(16, 16, 16);
}
main > section > section > article > section.right {
	position: absolute;
	top: 8%;
	right: 8%;

	width: min(5vw, 20px);
	height: auto;
}
main > section > section > article > section.right > div.like {
	width: 100%;
	height: min(5vw, 20px);

	border-radius: 50%;
	background: rgb(184, 184, 184);
}
main > section > section > article > section.right > div.like.liked {
	background: rgb(250, 80, 104);
}



main #cover {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
background: rgba(0, 0, 0, .8);
z-index: 2;
}
main #favorites {
position: fixed;
bottom: 0;
z-index: 2;
width: 90vw;
border-radius: 16px 16px 0 0;
background: rgb(16, 16, 16);
transform: translateY(200%);
transition: transform .5s;
}
main #favorites.show {
transform: translateY(8px);
transition: transform .5s
}
section#favorites:before {
content: "";
position: absolute;
top: -4px;
left: 0;
width: 100vw;
height: 100%;
z-index: -1;
border-radius: 16px 16px 0 0;
background: var(--rainbow);
}
section#favorites:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
z-index: -1;
border-radius: 16px 16px 0 0;
background: white;
background: rgb(16, 16, 16);
}
main > section#products > section, main > section#favorites > section {
column-gap: 16px;
}
main > section#favorites > section > article > section.background {
background: rgba(0, 0, 0, .4);
}
main > section#favorites > section {
position: absolute;
top: auto;
left: 0;
padding: 0 5vw 40px;
max-height: calc(100% - 5vh - 48px);
overflow: auto;
box-shadow: inset 0 2px 4px -2px black;
margin-top: 8px;
}
main > section#favorites .close {
position: absolute;
top: 16px;
right: 5vw;
}
/* ----- ----- ----- */
footer div.icon {
	width: min(2.4vh, 4.3vw);
	height: min(2.4vh, 4.3vw);
}
footer div.relative svg:nth-child(2) {
	position: absolute;
	/*
	top: -25%;
	right: -55%;
	*/
	top: -0.3rem;
    right: -0.5rem;

	border-radius: 50%;
	border: 2px solid rgb(20, 20, 20);
}
footer section.payments {
	max-width: 300px;
}
footer div.payment {
	margin-bottom: 8px;
	padding: 0 8px;

	width: 64px;
	height: 40px;
	border-radius: 3px;

	box-shadow: 0 2px 4px rgb(8, 8, 8);
}
footer div.payment.box-shadow:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--g-purple);
	filter: blur(8px);

	border-radius: 3px;

	filter: none;
}
footer div.payment.box-shadow:after {
	content: "";

	position: absolute;
	top: 2px;
	left: 2px;

	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: 3px;

	background: rgb(20, 20, 20);
}
footer div.payment .recommended {
	position: absolute;
	top: -4px;
	z-index: 1;

	padding: 2px 4px;

	border-radius: 2px;

	background: var(--g-purple);
	text-shadow: 0 1px 1px rgb(0, 0, 0);

	font-size: 6px;
	font-weight: 700;
}

footer div.payment .recommended:before {
	z-index: -1;

	border-radius: 3px;
}
footer div.payment img {
	z-index: 1;

	width: 100%;
	height: auto;
}
footer div.payment svg {
	z-index: 1;
}
footer section#info {
	padding: 20px;

	background: rgb(16, 16, 16);
	color: rgb(104, 104, 104);
	box-shadow: inset 0 8px 8px -8px rgb(8, 8, 8);

	text-align: center;
}
footer span#company {
	background:var(--g-pink);
}
footer span#cnpj {
	color: rgb(224, 224, 224);
}
img.mercadolivre {
	content: url('/.library/img/companies/dark/mercadolivre.webp');
}
/* ----- ----- ----- */
/*
body > article {
	padding: 0 5vw;
}
*/
/* ----- ----- ----- */