@import url("normalize.css");
@import url("typography.css");
@import url("layout.css");
@import url("theme.css");

.search-suggestion-icon {
	max-height: 18px;
}

/* QUANTIFIABLE */
.quantifiable {
	font-family: "TX-02";
}

.fixed-mid-right {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1050; /* Above most elements, below modals */
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}

.cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--primary);
	color: white;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	padding: 0;
	margin-left: 5px;
	vertical-align: middle;
}

/* Optional: Animation for updates */
.htmx-settling .cart-badge {
	transform: scale(1.1);
	transition: transform 0.2s ease-in-out;
}

#cart-nook-tag {
	writing-mode: horizontal-tb;
}

#cart-nook {
	position: fixed;
	top: 80%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1050;
	width: 4rem;
	height: 6rem;
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background-color: #c13909;
	color: white;
}

.dynamic-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 100px;
	gap: 1rem;
	grid-auto-flow: dense;
}
.dynamic-grid .tall {
	grid-row: span 2;
}
.dynamic-grid .wide {
	grid-column: span 2;
}
.dynamic-grid .big {
	grid-column: span 2;
	grid-row: span 2;
}

:root {
	--ticker-height: 40px;
	--ticker-speed: 20s;
	--scroll-color: rgba(193, 57, 9, 0.5);
}

.ticker-tape {
	overflow: hidden;
	width: 100%;
	height: var(--ticker-height);
	margin-bottom: 1rem;

	/* fade left + right edges */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		black 10%,
		black 90%,
		transparent
	);
}

.ticker {
	display: inline-flex;
	white-space: nowrap;
	animation: ticker var(--ticker-speed) linear infinite;
}

.ticker__item {
	display: inline-block;
	padding: 0 2rem;
	margin: 0 1rem;
	line-height: var(--ticker-height);
}

@keyframes ticker {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.items-scroller {
	display: flex;
	overflow-x: auto;
	align-items: flex-start;
	scroll-behavior: smooth;

	/* fade only right edge */
	-webkit-mask-image: linear-gradient(
		to right,
		black,
		black 98%,
		transparent 100%
	);
	mask-image: linear-gradient(to right, black, black 98%, transparent 100%);
}

.item-scale {
	transform-origin: top left;
	transform: scale(0.92);
}

.items-scroller::-webkit-scrollbar {
	height: 8px;
}

.items-scroller::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0);
	border-radius: 4px;
}

.items-scroller::-webkit-scrollbar-thumb {
	background-color: var(--scroll-color);
	border-radius: 4px;
}

.items-scroller::-webkit-scrollbar-thumb:hover {
	background-color: var(--scroll-color);
}

.items-scroller {
	scrollbar-width: thin;
	scrollbar-color: var(--scroll-color) rgba(0, 0, 0, 0);
}