html {
	scroll-behavior: smooth;
	box-sizing: border-box;
}

* {
	font-family: 'Poppins', sans-serif;
	/* transition: transform .2s, filter .2s; */
	transition: all .2s;
	margin: 0;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* h keyboard shortcut for chrome devtools */
.__web-inspector-hide-shortcut__ {
	display: none !important;
}

/* =========================== */

html,
body {
	/* min-height: 100vh; */
	min-height: 100%;
	/* disabled so sticky nav does not colapse after height but breaks the login pages 100% */
	/* height: 100%; */
}

@media (max-width: 728px) {
	.stop-scrolling {
		height: 100%;
		overflow: hidden;
	}
}

.ltext {
	color: var(--ltext);
}

.transparent {
	opacity: 0 !important;
}

.visible {
	opacity: 1 !important;
}

html {
	background-color: var(--black);
}

main {
	display: flex;
	justify-content: center;
	background-color: var(--black);
	min-height: 100%;
	padding: 3em 0;
	flex-direction: column;
	align-items: center;
	padding-top: 0;
}

main h1 {
	padding: 2rem;
	color: var(--cream);
	text-transform: uppercase;
	letter-spacing: 7px;
	font-weight: 300;
	text-align: center;
}

.gallery {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	grid-auto-rows: 19em;
	grid-auto-flow: dense;
	width: 90%;
}

.gallery .item {
	position: relative;
}

.gallery .item:not(.basic):hover:after,
.gallery .item.static:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7em 4em 0;
	/* border-color: transparent var(--green) transparent transparent; */
	border-color: transparent var(--black) transparent transparent;
	/* border-color: transparent var(--black-t) transparent transparent; */
	/* border-color: transparent var(--black-t2) transparent transparent; */
	/* border-color: transparent var(--blue) transparent transparent; */
	right: 0;
	top: 0;
	position: absolute;
}

.gallery .item:hover {
	box-shadow: 0 0 0 .3em var(--cream);
	box-shadow: 0 0 0 .6em var(--cream);
}

.gallery .item .fa-regular,
.gallery .item .bx.regular {
	opacity: 1;
}

.gallery .item:hover .fa-regular,
.gallery .item:hover .bx.regular {
	opacity: 1;
}

.gallery .love:hover .fa-solid,
.gallery .bx.solid:hover {
	opacity: 1;
}

.gallery .item h2 {
	color: var(--cream);
	position: relative;
	bottom: 2.2em;
	/* bottom: 3.2em; */
	/* right: 2em; */
	/* margin-right: 2.2em; */
	margin-right: 3.9em;
	margin-left: 0.5em;
	/* font-size: 1.3em; */
	font-size: 0.9em;
	font-weight: 300;
	word-break: break-word;
	display: none;
}

.gallery .item:hover h2 {
	display: block;
}


.love {
	position: absolute;
	top: 0.5rem;
	right: 1rem;
	font-size: 2em;
	z-index: 8;
}

.comments {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 2em;
	/* z-index: 10; */
	color: var(--cream);
	margin-bottom: 0.5rem;
	margin-right: 1rem;
}

.comments .bx {
	z-index: 10;
}

.love i {
	position: absolute;
	top: 0;
	right: 0;
	color: var(--cream);
	opacity: 0;
}

.comments .bx:not(.bx-plus) {
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0;
}

.comments .bx:active {
	color: var(--active-icon);
}

.love i.selected,
.love i.paid,
.love i.delivered {
	opacity: 1 !important;
	z-index: 11;
}

.love i.selected {
	color: var(--red);
}

.love i.paid {
	color: var(--cream);
	font-size: .9em;
}

.love i.delivered {
	color: var(--green);
}

.love:hover {
	cursor: pointer;
}

.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery img:hover {
	filter: brightness(1.2);
}

.gallery .wide {
	grid-column: span 1;
}

.gallery .tall {
	grid-row: span 1;
}


/* @media (min-width:729px) { */
@media (min-width:1049px) {
	.gallery .wide {
		grid-column: span 2;
	}

	.gallery .tall {
		grid-row: span 2;
	}

	.gallery {
		grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
	}

	.gallery .item .fa-regular,
	.gallery .item .bx.regular {
		opacity: 0;
	}

}

@media (min-width:1476px) {
	.gallery {
		grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	}
}

@media (min-width:1974px) {
	.gallery {
		grid-template-columns: repeat(auto-fit, minmax(21em, 1fr));
	}
}

ul button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	transition: all 0.1s;
}

.button,
button:not(ul button) {
	height: fit-content;
	width: fit-content;
	max-width: 80vw;
	background-color: var(--cream);
	border-radius: var(--bradius);
	border: none;
	display: inline-block;
	cursor: pointer;
	color: var(--black);
	/* font-size: clamp(1rem, 3.5vw, 1.3rem); */
	font-size: clamp(1.1rem, 3.5vw, 1.3rem);
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: var(--shadow);
	z-index: 100;
	padding: 0.6em 1.1em;
	font-weight: 600;
}

button:not(ul button):hover {
	background-color: var(--black);
	color: var(--cream);
	/* box-shadow: inset 0px 0px 0px 1px var(--cream) */
}

.button:not(.disabled):active,
button:not(ul button, :disabled):active {
	/* transform: translate(5px, -5px); */
	transform: translateY(1px);
}

nav .admin.button {
	padding: 0 1.5em;
	background-color: #166bff;
	color: var(--cream);
	box-shadow: none;
	font-size: clamp(1rem, 3.5vw, 1.1rem);
	;
}

nav .admin.button:hover {
	background-color: #2d7aff;
}

button.plain {
	box-shadow: none;
	border: 2px solid var(--black);
	color: var(--black);
}

button.plain.solid {
	color: var(--cream);
	background-color: var(--black);
}

button.plain:hover {
	border: 2px solid var(--plain-button-hover);
	color: var(--plain-button-hover);
	background-color: var(--cream);
}

button:disabled:hover {
	background-color: var(--ltext);
	color: var(--ltext);
}

.buy-button i {
	margin-right: 0.3em;
}

.buy-button i.fa-heart {
	color: var(--red);
}

.buy-button i.fa-download {
	/* color: var(--green); */
}

.buy-button {
	position: fixed;
	bottom: min(5em, 1.5em + 8vh);
}

.buy-button .selectedCount,
#delivered {
	font-weight: 600;
}

nav .notification.selectedCount {
	z-index: -1;
}

.notification {
	background-color: var(--red);
	font-size: .6em;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: -0.5em;
	margin-right: -0.9em;
	min-width: 1.4rem;
	height: 1.4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 40px;
	padding: .1em;
}

.modal {
	margin: auto;
	height: 20em;
	width: 45em;
	background-color: rgb(65, 65, 65);
	display: flex;
	justify-content: center;
	align-items: center;
}

form {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 1em;
}

form button {
	margin-top: 1em;
}

input,
textarea {
	background-color: white;
	border: var(--width-input-border) solid var(--co-textfld-border);
	padding: var(--padding-inputs);
	border-radius: var(--radius-inputs);
	font: inherit;
	color: inherit;
	accent-color: var(--blue);
	/* accent-color: var(--co-body-accent); */
	line-height: var(--leading-inputs);
	color: var(--black);
	max-width: 100%;
}

input {
	height: clamp(2.5em, 4.5vw, 3em);
}

textarea {
	height: clamp(10em, 20vw, 13em);
}

input:active,
textarea:active {}

input:focus,
textarea:focus,
input:focus-visible,
textarea:focus-visible {
	outline: none;
	/* outline: 1px solid var(--ltext) */
}

.email-display {
	width: 100%;
	padding: 0.5em;
	color: lightblue;
	font-weight: 600;
	font-size: 1.1em;
}

#login-prompt input,
#login-prompt button {
	box-shadow: 7px 7px 12px #212121;
}

#install-app {
	display: none;
	position: fixed;
	margin: auto auto;
	top: 50vh;
	background-color: var(--red);
	font-size: 1.5em;
}

nav ul {
	display: flex;
	flex-direction: row;
}

nav {
	position: sticky;
	top: 0;
	background-color: var(--lblack3);
	color: var(--cream);
	width: 100%;
	z-index: 99;
	padding: .5em 3em;
	justify-content: space-between;
	align-items: center;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

nav ul {
	padding: 0;
	font-size: 1.7em;
	list-style: none;
	gap: 1em;
	justify-content: flex-end;
}

nav i {
	vertical-align: middle;
}

nav i.large {
	font-size: 1.1em;
}

nav ul li {
	align-items: center;
	/* problemas con los dropdowns */
	display: flex;
	cursor: pointer;
}

nav ul .container,
.stack {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
}

.stack .over {
	position: absolute;
	top: 0;
	left: 0;
}

nav .logo {
	width: fit-content;
	line-height: 0;
}

nav .logo img {
	height: 2.5em;
}

nav .title {
	font-size: var(--title-clamp);
	text-transform: uppercase;
	letter-spacing: 10px;
	/* letter-spacing: 18px; */
	text-align: center;
	font-weight: 300;
	grid-column: span 5;
	padding-left: 1em;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

nav .logo:hover {
	filter: brightness(1.2);
}

nav .user {
	cursor: pointer;
}

nav .username {
	font-size: 1.1rem;
	/* display: none; */
	/* opacity: 0; */
	/* width: 0; */
}

nav .user:hover .username {
	display: initial;
}

/* nav .user .settings {
	height: 15em;
	width: 5em;
	font-size: 1rem;
} */

/* nav .user .settings ul {
	display: flex;
	flex-direction: column;
	font-size: 1.3rem;
} */

/* ------ */

/* .dropbtn {
	background-color: #04AA6D;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
} */

nav .dropdown {
	position: relative;
	display: inline-block;
}

.user-container {
	display: flex;
	align-items: center;
}

.dropdown-content {
	background-color: var(--lblack3);
	background-color: var(--lblack4);
	display: none;
	flex-direction: column;
	position: absolute;
	right: 0;
	transform: translateX(20%);
	min-width: 160px;
	/* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
	box-shadow: 7px 7px 12px #101010;
	z-index: 100;
	/* border: 1px solid var(--border); */
	border-radius: var(--bradius);
	padding: .2em 0;
}

.dropdown-content.active {
	display: flex;
}

.dropdown-content header {
	text-align: center;
	margin-bottom: 0.5em;
	font-size: 1.1rem;
	color: var(--cream);
	padding: 0 2em;
}

.dropdown:not(.contact) .dropdown-content span:not(.link),
.dropdown-content header {
	text-transform: capitalize;
	white-space: nowrap;
}

nav .share .dropdown-content span {
	width: max-content;
}

.red {
	color: var(--red);
}

.dropdown-content a,
.dropdown-content .link,
.dropdown-content button,
.dropdown-content .link-header {
	color: var(--cream);
	text-decoration: none;
	font-size: 1rem;
	padding: .5rem;
	display: flex;
	align-items: center;
	gap: .5em;
	justify-content: start;
}

.dropdown-content .link-display {
	display: flex;
	padding: 0 .5rem;
}

.dropdown-content .link-display .link {
	background-color: var(--input-bg);
	border-radius: var(--radius-inputs) 0 0 var(--radius-inputs);
	cursor: text;
	max-width: 25em;
	overflow: hidden;
	white-space: nowrap;
}

.dropdown-content .link-display button {
	background-color: var(--button-bg);
	border-radius: 0 var(--radius-inputs) var(--radius-inputs) 0;
}

.dropdown.share .deny {
	padding: .4em 0;
}

.dropdown-content a:hover,
.dropdown-content button:hover {
	background-color: var(--lblack);
}

.dropdown-content button:active,
.dropdown-content button.active,
.dropdown-content a:active,
.dropdown-content a.active {
	background-color: var(--cream);
	color: var(--lblack4);
}

nav:not(.mobile) .dropdown:hover .dropdown-content {
	display: flex;
}

.bx-exit-fullscreen {
	display: none;
}

.line {
	height: 1px;
	width: 90%;
	background-color: var(--border);
}

.comments .comment-container {
	/* padding: 0em .5em; */
	display: flex;
	/* flex-direction: column; */
	/* gap: .5rem; */
	position: relative;
	background-color: rebeccapurple;
}

.comments .dropdown-content {
	z-index: 101;
	position: fixed;
	bottom: 0;
	left: 0;
	transform: none;
	/* padding: 1em .5em; */
	/* padding-top: 0; */
	padding: 0;
}

.comments .dropdown-content .bx {
	/* position: relative; */
	position: absolute;
	opacity: 1;
	/* font-size: .7em; */
	width: fit-content;
	align-self: center;
	color: var(--input-bg);
	margin: .5rem;
}

.comments i {
	cursor: pointer;
}

.comments .dropdown-content .bx-plus {
	/* position: absolute; */
	/* right: .5em; */
	/* top: .3em; */
	transform: rotate(45deg);
}

.comments textarea {
	font-size: 1rem;
	/* width: min(80vw, 30rem); */
	width: 100%;
	height: 10rem;
	padding: 1em 2.2em;
	line-height: 1.4;
	letter-spacing: 0.7px;
}

/* TODO mirar responsive de esto */
@media (min-width: 700px) {
	.comments .dropdown-content {
		transform: translateX(.5em);
	}

	.comments textarea {
		height: 5rem;
	}
}

textarea {
	border-radius: var(--bradius-small);
	background-color: var(--cream);
	/* border: 1px solid var(--border); */
	border: none;
}

.comments .controls {
	display: flex;
	width: fit-content;
	position: absolute;
	/* right: .5em; */
	right: 0;
	gap: .5em;
	color: var(--input-bg);
}

.comments header {
	font-size: 1rem;
	position: relative;
	margin: 0;
	padding: .7em 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.comments header span {
	text-transform: uppercase !important;
}

.comments .delete-comment {
	bottom: 0;
	left: 0;
	font-size: .9em;
	margin-left: .3rem !important;
}

.comments .close-comment {
	top: 0;
	right: 0;
	/* font-size: 1.9em; */
}

.comments .dropdown-content .save-comment {
	position: absolute;
	/* bottom: .7rem;
	right: .7rem; */
	bottom: 0;
	right: 0;
	color: var(--input-bg);
}

.comment-container .fa-check {
	font-size: .7em;
	color: var(--green);
}

.comment-container .fa-check:active {
	color: var(--active-icon);
}

nav .bx:active {
	color: var(--active-icon);
}

nav li:has(.selectedCount):active {
	color: white;
}

i.empty {
	width: 1em;
	height: 1em;
}

.dropdown-content .num {
	width: 2em;
}

button.plain.solid:hover {
	background-color: var(--checkout) !important;
	color: var(--cream) !important;
}

button:disabled,
button:disabled * {
	background-color: var(--disabled-bg) !important;
	color: var(--disabled-color) !important;
	/* pointer-events: none; */
	cursor: auto;
}

.disabled {
	pointer-events: none;
}

nav .filenames .bxs-purchase-tag {
	display: none;
}

nav .filenames.active .bxs-purchase-tag {
	display: inline-block;
}

nav .filenames.active .bx-purchase-tag {
	display: none;
}

.gallery h2 {
	display: none;
}

.gallery.filenames h2 {
	display: inline-block;
}

nav:not(.mobile) .logo img:not(.mobile),
nav:not(.mobile) .colors,
nav:not(.mobile) .filter,
nav:not(.mobile) .share,
nav:not(.mobile) .fullscreen,
nav:not(.mobile) .contact,
nav:not(.mobile) .title,
nav:not(.mobile) .admin {
	display: none;
}

nav {
	display: flex;
}

/* @media (max-width: 1030px) {
	.dropdown:has(.mobileActive) .dropdown-content {
		display: flex;
	}
} */

@media (min-width: 365px) {
	button:not(ul button) {
		padding: 0.6em 1.5em;
	}
}

@media (min-width: 550px) {
	nav .title {
		display: inline;
	}
}

@media (min-width: 594px) {
	button:not(ul button) {
		padding: 0.3em 1.5em;
	}
}

@media (min-width: 729px) {
	.buy-button {
		right: 3em
	}

	.comments .dropdown-content {
		transform: translateX(20%);
		position: absolute;
		bottom: auto;
		left: auto;
	}

	.comments textarea {
		height: 8em;
		width: min(10em + 20vw, 30rem);
	}
}

@media (min-width: 1300px) {

	nav:not(.mobile) .colors,
	nav:not(.mobile) .filter,
	nav:not(.mobile) .share,
	nav:not(.mobile) .fullscreen,
	nav:not(.mobile) .contact,
	nav:not(.mobile) .title {
		display: inline-block;
	}

	/* dropdowns break with flex but this is a regular button */
	nav:not(.mobile) .admin {
		display: flex;
	}

	nav:not(.mobile) .shared {
		display: none !important;
	}


	nav:not(.mobile) .menu {
		display: none;
	}

	main h1 {
		display: none;
	}

	.gallery {
		margin-top: 2em;
	}
}

@media (min-width: 1400px) {
	nav:not(.mobile) .logo img:not(.mobile) {
		display: inherit;
	}

	nav:not(.mobile) .logo .mobile {
		display: none;
	}
}

nav .share img {
	transform: rotate(-45deg);
	position: absolute;
	left: 3px;
	height: 0.27em;
	margin-bottom: 4px;
}

nav .share .link-header {
	cursor: auto;
	padding-bottom: 0;
}

nav .share .link-header span {
	text-transform: none !important;
}

.lgrey {
	color: var(--lgrey);
}

.ltext {
	color: var(--ltext);
}

.modalOpen {
	filter: blur(9px);
	pointer-events: none;
}

/* ======== DEV ======== */
/* .gallery .item:nth-of-type(3) .dropdown-content {
	display: flex;
} */

/* .dropdown.share .dropdown-content {
	display: flex !important;
} */

.shared.dropdown {
	display: none;
}

nav:not(.mobile) .shared {
	display: none;
}

#download-button .fa-circle-check,
#download-button .bx-loader-circle {
	display: none;
}

#download-button.downloaded .fa-download,
#download-button.downloaded .bx-loader-circle,
#download-button.downloaded #delivered {
	display: none;
}

#download-button.downloading .fa-download,
#download-button.downloading .fa-circle-check,
#download-button.downloading #delivered {
	display: none;
}

#download-button.downloaded .fa-circle-check {
	display: inline-block;
	color: var(--green);
}

#download-button.downloading .bx-loader-circle {
	display: inline-block;
	/* color: var(--green); */
}

#downloadAll {
	display: none;
}