/* =========================== H E A D E R ===========================  */

body>header dialog {
	--width: 420px;
	top: 0;
	width: var(--width);
	height: 100%;
	left: calc(100% - var(--width));
	margin: 0;
	border: none;
	max-height: 100%;
	padding: 32px;
}
body>header dialog::backdrop {
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
body>header .ma {
	justify-content: space-between;
	height: 120px;
	background: white;
}
body>header .list a {
	font-size: 16px;
	color: var(--disabled);
	text-decoration: none;
	padding: 0 12px;
}
body>header .list a:hover {
	color: var(--text);
}
body>header .list a[aria-current="true"] {
	color: var(--accent);
}
body>header .list a:hover::before, .list a[aria-current="true"]::before {
	content: '';
	width: 20px;
	height: 2px;
	background: var(--text);
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
}
body>header .list a[aria-current="true"]::before {
	background: var(--accent);
}
body>header .bb {
	background: var(--disabled);
	height: 2px;
	width: 24px;
	transition: 0.4s;
}
body>header.index .ma {
	background: transparent;
}
body>header.index [title="Inicio"] path {
	fill: white;
}
body>header.index #carrito path {
	fill: white;
}
body>header.index .list a {
	color: white;
}
body>header.index .list a::before {
	background: white !important;
}
body>header.index .bb {
	background: white;
}
body>header .quantity {
	position: absolute;
	border-radius: 50%;
	background: var(--accent);
	color: white;
	aspect-ratio: 1;
	height: 22px;
	padding-top: 1px;
	top: 0;
	left: 50%;
	justify-content: center;
}
body>header #carrito path {
	fill: var(--disabled);
}
body>header #carrito:hover path {
	fill: var(--text);
}
body>header.index #carrito:hover path {
	fill: white;
}
body>header button {
	z-index: 4;
	padding: 8px 16px;
}
body>header #burgerbtn {
	display: none;
	flex-direction: column;
	gap: 5px;
	position: absolute;
	right: 68px;
	padding: 8px;
}
body>header .active #bb1 { transform: translate(0, 7px) rotate(-45deg) }
body>header .active #bb2 { opacity: 0 }
body>header .active #bb3 {
	transform: translate(0, -7px) rotate(45deg);
}



/* =========================== F O O T E R ===========================  */

body>footer img {
	display: inline;
}
body>footer, body>footer a {
	color: var(--disabled);
	background: #030305;
	font-size: 16px;
}
body>footer .fc {
	gap: 8px;
	text-decoration: none;
}
body>footer a:hover {
	color: white;
}
body>footer a:hover path {
	fill: white;
}
body>footer .ma>div {
	display: flex;
	justify-content: space-between;
}
body>footer h2 {
	font-size: 16px;
	color: white;
	margin-block: 13px;
}
body>footer .ma>p {
	text-align: center;
}


@media (max-width: 900px) {
	body>header .ma {
		height: 90px;
	}
}
@media (max-width: 1000px) {
	body>footer .ma>div {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}	
}
@media (max-width: 700px) {
	body>header #burgerbtn {
		display: flex;
	}
	body>header .list {
		display: none;
	}
	body>header .list.active {
		display: flex;
		background: var(--accent);
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		gap: 20px;
		z-index: 4;
	}
	body>header .list a {
		font-size: 18px;
	}
	body>header .list.active * {
		color: white !important;
	}
	body>header .list.active a::before {
		background: white !important;
	}
	body>header .list.active~#burgerbtn .bb {
		background: white;
	}
	body>header .list.active+.rl>#carrito path {
		fill: white;
	}
	body>header dialog {
		width: 100%;
		left: 0;
		max-width: 100%;
	}
	body>footer section:first-child {
		text-align: center;
	}
	body>footer .ma>div {
		display: grid;
		grid-template-columns: 1fr;
	}	
}