.counter {
     font-size: 10px; 
     color: #c0c0c0; 
     position: absolute; 
     right: 0; transform: translate(50%, -50%); 
     background-color: #121212; 
     padding: 2px; 
     border-radius: 5px;
}


/* Styles for the filled and unfilled heart */
.heart.filled path {
    fill: #fc4600;
}
.heart path {
    fill: #c0c0c0;
    stroke: 0;
    stroke-width: 2;
}
/* Hover effect */
.heart-toggle:hover .heart path {
    fill: #fc4600; /* Change fill color on hover */
}
/* Cursor pointer */
.heart-toggle {
    cursor: pointer;
}

/*! CSS Used from: https://crwndradio.com/css/bootstrap-reboot.min.css */
*,
::after,
::before {
	box-sizing: border-box;
}

a {
	color: #007bff;
	text-decoration: none;
	background-color: transparent;
}

a:hover {
	color: #0056b3;
	text-decoration: underline;
}

svg {
	overflow: hidden;
	vertical-align: middle;
}

/*! CSS Used from: https://crwndradio.com/css/bootstrap-grid.min.css */
*,
::after,
::before {
	box-sizing: inherit;
}

/*! CSS Used from: https://crwndradio.com/css/main.css */
a {
	transition: 0.5s ease;
	transition-property: color, background-color, border-color, box-shadow;
}

a:hover,
a:active,
a:focus {
	outline: none;
	text-decoration: none;
}

::selection {
	background: #c0c0c0;
	color: #222227;
	text-shadow: none;
}

:focus {
	outline: -webkit-focus-ring-color auto 0px;
}

:focus-visible {
	outline: 0px dotted;
}

.single-item__add {
	margin-left: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background-color: #181818;
}

.single-item__add svg {
	width: 18px;
	height: auto;
	fill: #c0c0c0;
	display: grid;
	align-items: center;
}

.single-item__add:hover {
	background-color: #181818;
}

html ::-webkit-scrollbar {
	width: 4px;
	background: none;
}

html ::-webkit-scrollbar-track {
	background-color: transparent;
}

html ::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	border-radius: 3px;
}

/*! CSS Used from: Embedded */
*,
:after,
:before {
	box-sizing: border-box;
	border: 0 solid #e5e7eb;
}

:after,
:before {
	--tw-content: "";
}

:disabled {
	cursor: default;
}

/*! CSS Used from: Embedded */
[tooltip] {
	position: relative;
}

[tooltip]::before,
[tooltip]::after {
	text-transform: none;
	font-size: .9em;
	line-height: 1;
	user-select: none;
	pointer-events: none;
	position: absolute;
	display: none;
	opacity: 0;
}

[tooltip]::before {
	content: '';
	border: 5px solid transparent;
	z-index: 1001;
}

[tooltip]::after {
	content: attr(tooltip);
	font-family: Helvetica, sans-serif;
	text-align: center;
	min-width: 3em;
	max-width: 21em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 1ch 1.5ch;
	border-radius: .3ch;
	box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
	background: #333;
	color: #fff;
	z-index: 1000;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
	display: block;
}

[tooltip]:not([flow])::before {
	bottom: 100%;
	border-bottom-width: 0;
	border-top-color: #333;
}

[tooltip]:not([flow])::after {
	bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after {
	left: 50%;
	transform: translate(-50%, -.5em);
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after {
	animation: tooltips-vert 300ms ease-out forwards;
}

/*! CSS Used from: Embedded */
.heart path {
	fill: #c0c0c0;
	stroke: 0;
	stroke-width: 2;
}

.heart-toggle:hover .heart path {
	fill: #fc4600;
}

.heart-toggle {
	cursor: pointer;
}

/*! CSS Used keyframes */
@keyframes tooltips-vert {
	to {
		opacity: .9;
		transform: translate(-50%, 0);
	}
}