@import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Space+Grotesk:wght@300..700&display=block');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=block');

footer { background-color: var(--color-grey); color: white; }
footer a { font-family: var(--font-label); font-size: 0.85em; }

.has-text-headline { font-family: var(--font-headline)!important; }
.has-text-label { font-family: var(--font-label)!important; }
.color-primary-dark { color: var(--color-primary-dark)!important; }

.subtitle { font-family: var(--font-label); color: var(--color-primary); font-size: 1em; text-transform: uppercase; }
.title { font-family: var(--font-headline); font-size: 3em; }

.background-grid {
	background-image: linear-gradient(#e2e2e3 1px, transparent 1px), linear-gradient(90deg, #e2e2e3 1px, transparent 1px);
	background-size: 80px 80px;
}

.outlined { outline: 1px solid #d1d1d1; }

.vertical-label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: var(--font-label);
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding-top: 1em;
}

/* Image card */
.image-card {
	position: relative;
	overflow: hidden;
	border: 2px solid var(--bulma-on-surface, #1a1c1d);
}

.image-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.9);
	transition: all 0.7s ease;
}

.image-card:hover img {
	filter: grayscale(0) brightness(1);
}

.image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1.5em;
	background: var(--bulma-on-surface, #1a1c1d);
	color: var(--bulma-surface-bright, #f9f9fa);
	max-width: 80%;
}

.image-caption .caption-label {
	font-family: var(--font-label);
	font-size: 0.75em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.5em;
}

.image-caption .caption-text {
	font-size: 0.875em;
	opacity: 0.8;
	line-height: 1.2;
}

/* Overrides */

.notification { transition: all 0.2s ease; }
.notification:hover { transform: translateY(-5px); background-color: var(--color-primary); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

a.navbar-item { background: none; }

/* Form */
.input { padding: 19px; border-radius: 0px!important; border: 0; border-bottom: 1px solid #282828; font-family: var(--font-label); }
label { font-family: var(--font-label); }
input, textarea { font-family: var(--font-label)!important; font-size: 0.85em!important; }

.theme-label {
	font-family: var(--font-label);
	font-size: 0.75em;
	text-transform: uppercase;
	color: var(--bulma-outline, #747a60);
	display: block;
	margin-bottom: 0.5em;
	letter-spacing: 0.05em;
}

.theme-label:focus { color: black!important; }

.theme-input {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--bulma-surface-variant, #e2e2e3) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0.5em 0 !important;
	font-family: var(--bulma-family-primary);
}

.theme-input::placeholder {
	color: var(--bulma-surface-variant, #e2e2e3);
}

.theme-input:focus {
	border-bottom-width: 2px !important;
	border-bottom-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)) !important;
	box-shadow: none !important;
	outline: none;
}

.theme-textarea {
	background: transparent !important;
	border: 1px solid #d1d1d1 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 1em !important;
	font-family: var(--bulma-family-primary);
	font-size: 1em;
	color: black;
	resize: vertical;
}

.theme-textarea::placeholder {
	color: var(--bulma-surface-variant, #e2e2e3);
}

.theme-textarea:focus {
	border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)) !important;
	box-shadow: none !important;
	outline: none;
}

.theme-select {
	background: transparent !important;
	border: 1px solid #d1d1d1 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--font-label);
	font-size: 0.9em!important;
	color: var(--color-grey)!important;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 3em !important;
}

.theme-select:focus {
	border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)) !important;
	box-shadow: none !important;
	outline: none;
}

/* Botones */
.button { border-radius: 0; font-family: var(--font-label); font-size: 0.95em; padding-left: 2em; padding-right: 2em; }
.button.is-large { font-size: 0.9em; padding: 1em 2.5em; }

.button:hover {
    background-color: var(--color-primary);
    color: black;
}

.button.is-text {
    text-decoration: none;
}

.button.is-dark:hover {
    background-color: var(--color-primary);
    color: black;
}

.button.is-primary {
    background-color: var(--color-primary);
    color: black;
}

.button.is-primary:hover {
    background-color: black; 
    color: white;
}

/* Notification */
.notification { border-radius: 0px!important; }

/* Hero */
.hero .title { 
	font-family: var(--font-headline);
	font-size: 5em;
	font-weight: 700;
	color: black;
}

/* Buttons */
.ghost-button { font-family: var(--font-label); text-transform: uppercase; font-size: 0.8em; display: flex; align-items: center; font-weight: 500; transition: 0.5s ease;}
.ghost-button.is-white { color: white; }
.ghost-button.is-white:hover { color: var(--color-primary); }

/* Menú superior */
.navbar-item {
	font-family: var(--font-label);
    font-weight: 500;
	text-transform: uppercase;
	font-optical-sizing: auto;
	font-style:normal;
	font-size: 0.85em;
}

.navbar-item.is-active {
	position: relative;
}

.navbar-item.is-active::before {
	content: '';
	position: absolute;
	top: 0.6rem;
	left: 50%;
	transform: translateX(-50%);
	width: 0.3rem;
	height: 0.3rem;
	background-color: var(--color-primary);
}

/* Banner component - responsive square with background image */
.banner {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}

.banner .banner-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	transition: filter 0.4s ease, transform 0.4s ease;
	z-index: 0;
}

.banner:hover .banner-bg {
	filter: grayscale(0);
	transform: scale(1.1);
}

.banner .banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.banner:hover {
	filter: grayscale(0);
}

.banner .banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1;
}

.banner .banner-content {
	position: relative;
	z-index: 2;
	padding: 0 6em 6em 6em;
	width: 100%;
}

.banner .banner-content .subtitle {
	font-family: var(--font-label);
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	font-size: 1em;
	text-transform: uppercase;
}

.banner .banner-content .title {
	margin: 0 0 30px 0;
	font-family: var(--font-headline);
	font-size: 3em;
	text-transform: uppercase;
	color: white;
}

/* Marketplace categories */
.marketplace-categories {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1em;
	justify-content: flex-end;
	font-family: var(--font-label);
}

.marketplace-categories a { color: black; }
.marketplace-categories a:hover { color: var(--color-primary); }

/* Marketplace card */
.marketplace-card {
	border: 1px solid #d1d1d1;
}

.marketplace-card .card-image-wrap {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
}

.marketplace-card .card-image-bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	filter: grayscale(1);
	transition: filter 0.4s ease, transform 0.4s ease;
}

.marketplace-card:hover .card-image-bg {
	filter: grayscale(0);
	transform: scale(1.05);
}

.marketplace-card .card-stock-tag {
	position: absolute;
	top: 1.5em;
	right: 1.5em;
	background: black;
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	font-family: var(--font-label);
	font-size: 0.7em;
	padding: 0.3em 0.7em;
	text-transform: uppercase;
	line-height: 1.4;
	z-index: 1;
}

.marketplace-card .card-info {
	padding: 1em;
}

.marketplace-card .card-category {
	font-family: var(--font-label);
	font-size: 0.75em;
	text-transform: uppercase;
	color: black;
}

.marketplace-card .card-name {
	font-family: var(--bulma-family-primary);
	font-size: 1.2em;
	color: black;
}

.marketplace-card .card-price {
	display: inline-block;
	background: black;
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	font-family: var(--font-label);
	font-size: 0.85em;
	padding: 0.25em 0.75em;
	line-height: 1.5;
}

/* Blog section */
.blog-section {
	background-color: var(--color-grey);
	width: 100vw;
	margin: 5em 0;
	padding-top: 5em;
	padding-bottom: 7em;
}

.blog-header-title {
	font-family: var(--font-headline);
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	font-size: 3em;
	text-transform: uppercase;
}

.blog-archive-link {
	font-family: var(--font-label);
	color: white;
	text-transform: uppercase;
	font-size: 0.85em;
	transition: color 0.3s ease;
}

.blog-archive-link:hover {
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

/* Blog grid */
.blog-grid {
	min-height: 600px;
}

/* Blog cards */
.blog-card {
	background: #3a3c3c;
	border: 1px solid #5e6262;
	border-left: 5px solid hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.blog-card-featured {
	padding: 3em;
	height: 100%;
}

.blog-card-small {
	padding: 3em;
	flex: 1;
}

.blog-card-small:first-child {
	margin-bottom: 2em;
}

.blog-label {
	font-family: var(--font-label);
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	text-transform: uppercase;
	font-size: 0.9em;
	display: block;
	margin-bottom: 0.5em;
}

.blog-title {
	font-family: var(--font-headline);
	color: white;
	text-transform: uppercase;
}

.blog-card-featured .blog-title {
	font-size: 3em;
	margin-bottom: 0.5em;
	line-height: 1.1;
}

.blog-card-small .blog-title {
	font-size: 1.25em;
	margin-bottom: 0.75em;
}

.blog-excerpt {
	color: #f1f1f1;
	font-size: 1em;
	max-width: 80%;
	margin-bottom: 2em;
}

.blog-link {
	font-family: var(--font-label);
	color: white;
	text-transform: uppercase;
	font-size: 0.75em;
	display: inline-flex;
	align-items: center;
	gap: 1em;
	transition: color 0.3s ease;
}

.blog-link:hover {
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

/* Newsletter */
.home-newsletter-block { padding: 6em; }

/* Register page */

.register-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.register-card {
	background: white;
	border: 1px solid var(--bulma-surface-variant, #e2e2e3);
	padding: 4em;
	position: relative;
	box-shadow: 0 0 20px rgba(204, 255, 0, 0.15);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.register-card:hover {
	border-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

.register-spine {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 8em;
	background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

.register-code {
	font-family: var(--font-label);
	font-size: 0.75em;
	color: var(--color-grey);
	display: block;
	margin-bottom: 0;
	letter-spacing: 0.05em;
}

.register-title {
	font-family: var(--font-headline);
	font-size: 5em;
	font-weight: 700;
	color: black;
	letter-spacing: -0.02em;
}

.register-subtitle {
	font-family: var(--bulma-family-primary);
	max-width: 80%;
	margin-bottom: 1em;
}

.register-checkbox {
	font-family: var(--bulma-family-primary);
	font-size: 0.9em;
	color: var(--bulma-on-surface-variant, #444933);
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.register-checkbox input[type="checkbox"] {
	accent-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	width: 1.25em;
	height: 1.25em;
}

.register-checkbox a {
	color: black;
	font-weight: 500;
}

.register-checkbox a:hover {
	text-decoration: underline;
}

.register-button {
	background: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)) !important;
	color: black !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: var(--font-label) !important;
	font-size: 0.75em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	padding: 1.25em 3em !important;
	transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease !important;
}

.register-button:hover {
	background: black !important;
	color: white !important;
}

.register-button:active {
	transform: scale(0.98);
}

.register-login {
	font-family: var(--font-label);
	font-size: 0.75em;
}

.register-login span { color: var(--bulma-grey); }

.register-login a {
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.register-login a:hover {
	color: black;
}

.register-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
	align-items: center;
	margin-top: 2em;
}

.register-tags .tag-group {
	display: flex;
	gap: 0.5em;
}

.register-tag {
	background: black;
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	font-family: var(--font-label);
	font-size: 0.6em;
	padding: 0.35em 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.4;
}

.register-security {
	display: flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--font-label);
	font-size: 0.6em;
	color: var(--bulma-outline, #747a60);
}

/* Contact form */
.contact-card {
	background: white;
	border: 1px solid #d1d1d1;
	padding: 3em;
	position: relative;
}

.contact-checkbox {
	font-family: var(--bulma-family-primary);
	font-size: 0.9em;
	color: var(--bulma-outline, #747a60);
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
}

.contact-checkbox input[type="checkbox"] {
	accent-color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.15em;
}

.contact-checkbox a {
	color: black;
	font-weight: 600;
	text-decoration: underline;
}

.contact-checkbox a:hover {
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
}

.contact-info-card {
	border-left: 4px solid hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	padding: 0.5em 0 0.5em 2em;
}

.contact-info-card-black {
	border-left: 4px solid black;
	padding: 0.5em 0 0.5em 2em;
}

.contact-highlight-box {
	background: var(--bulma-surface-container-low, #f3f3f4);
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 2em;
}

.contact-tag {
	font-family: var(--font-label);
	font-size: 0.75em;
	color: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	background: rgba(204, 255, 0, 0.15);
	padding: 0.35em 0.75em;
	display: inline-block;
	letter-spacing: 0.05em;
}

.contact-map {
	position: relative;
	width: 100%;
	height: 250px;
	overflow: hidden;
	border: 2px solid black;
}

.contact-map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(1.1) contrast(1.25);
}

.contact-map-overlay {
	position: absolute;
	inset: 0;
	background: rgba(204, 255, 0, 0.08);
}

/* FAQ */
.faq-item {
	border-bottom: 2px solid black;
}

.faq-item button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2em;
	text-align: left;
	font-family: var(--font-headline);
	font-size: 1.25em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.faq-item button:hover {
	background: var(--bulma-surface-container-low, #f3f3f4);
}

.faq-content {
	padding: 0 2em 2em 2em;
}

.faq-content p {
	border-left: 2px solid hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
	padding-left: 1.5em;
	font-family: var(--bulma-family-primary);
	font-size: 1.1em;
	color: var(--bulma-outline, #747a60);
}

.faq-icon {
	transition: transform 0.3s ease;
}


/* Ticker / divider */
.about-ticker {
	width: 100%;
	border-top: 2px solid var(--bulma-on-surface, #1a1c1d);
	border-bottom: 2px solid var(--bulma-on-surface, #1a1c1d);
	padding: 1em 0;
	background: var(--color-primary);
	overflow: hidden;
	white-space: nowrap;
}

.about-ticker-inner {
	display: flex;
	animation: ticker-scroll 20s linear infinite;
}

.about-ticker-text {
	font-family: var(--font-label);
	color: var(--bulma-on-primary-container, #5b7300);
	font-size: 1.25em;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.02em;
	padding: 0 1em;
	flex-shrink: 0;
}

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

/* About page */

/* Tech section (VANGUARD) */
.about-tech-section {
	background: var(--bulma-on-surface, #1a1c1d);
	color: var(--bulma-surface-bright, #f9f9fa);
	padding: 2rem 1.5rem;
	position: relative;
	overflow: hidden;
}

@media (min-width: 768px) {
	.about-tech-section { padding: 8rem 4rem; }
}

.about-tech-section .container {
	position: relative;
	z-index: 10;
}

.about-bg {
	position: absolute;
	right: -5rem;
	top: 25%;
	opacity: 0.1;
	font-family: var(--font-headline);
	font-size: 18.75em;
	color: var(--bulma-surface-bright, #f9f9fa);
	user-select: none;
	pointer-events: none;
	line-height: 1;
}

@media (max-width: 768px) {
	.about-tech-bg { font-size: 8em; right: -2rem; }
}

.about-tech-header-title {
	font-family: var(--font-headline);
	font-size: 5em;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
}

@media (max-width: 768px) {
	.about-tech-header-title { font-size: 3em; }
}

.about-card {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 2em;
	transition: border-color 0.3s ease;
}

.about-card:hover {
	border-top-color: var(--color-primary);
}

/* About CTA section */
.about-section-gap { padding: 2rem 1.5rem; }
@media (min-width: 768px) { .about-section-gap { padding: 8rem 4rem; } }

/* Intersection observer fade-up */
.fade-up {
	opacity: 0;
	translate: 0 1.5em;
	transition: all 0.7s ease;
}

.fade-up.is-visible {
	opacity: 1;
	translate: 0 0;
}

/* Catalog / Marketplace list */
/* Catalog Filters */
.catalog-filter-title {
	font-family: var(--font-label);
	font-size: .75rem;
	margin-bottom: .7rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--bulma-surface-variant, #e2e2e3);
}

.catalog-filter-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	margin-bottom: .7rem;

	font-family: var(--font-label);
	font-size: .75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bulma-on-surface-variant, #444933);
	transition: color 0.2s ease;

}

.catalog-filter-square {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid var(--bulma-outline, #747a60);
	flex-shrink: 0;
	transition: background-color 0.3s ease;
}

.catalog-filter-square.is-active {
	background-color: var(--color-primary);
}

.catalog-filter-item:hover .catalog-filter-square {
	background-color: var(--color-primary);
}

.catalog-filter-item:hover .catalog-filter-label {
	color: var(--bulma-on-surface, #1a1c1d);
}

.catalog-filter-label.is-active {
	color: var(--bulma-on-surface, #1a1c1d);
}

.catalog-filter-tags {
	display: flex;
	gap: .5rem;
}

.catalog-filter-tag { 
	font-family: var(--font-label); 
	font-size: 0.65em; 
	padding: 2px 7px; 
	background: #5e5e5e;
	cursor: pointer;
	transition: all 0.3s ease;
	color: white;
}

.catalog-filter-tag.is-active {
	background-color: black;
	color: var(--color-primary);
}

.catalog-author-item {
	font-family: var(--font-label);
	font-size: .75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bulma-on-surface-variant, #444933);
	transition: color 0.2s ease;
	cursor: pointer;
	margin-bottom: .7rem;
}

.catalog-author-item:hover {
	color: var(--bulma-on-surface, #1a1c1d);
}

.catalog-card-tags {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 2;
}

/* Product card */

.catalog-card a { color: inherit; }

.catalog-card {
	position: relative;
	background: white;
	border: 1px solid var(--bulma-surface-variant, #e2e2e3);
	opacity: 0;
	transform: translateY(2rem);
	transition: all 0.7s ease;
}

.catalog-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.catalog-card:hover {
	transform: translateY(-25px);
	box-shadow: 0 0 25px rgba(204, 255, 0, 0.2);
}

.catalog-card-spine {
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--color-primary);
	z-index: 1;
}

.catalog-card-image-wrap {
	position: relative;
	aspect-ratio: 3/4;
	overflow: hidden;
	background: var(--bulma-surface-container-high, #e8e8e9);
}

.catalog-card-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.9);
	transition: all 0.7s ease;
}

.catalog-card:hover .catalog-card-image-wrap img {
	filter: grayscale(0) brightness(1);
}

.catalog-card-body {
	padding: 1.5rem;
}

.catalog-card-title {
	font-family: var(--font-headline);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.2;
	transition: color 0.3s ease;
}



.catalog-card-price {
	font-family: var(--font-label);
	font-size: 0.75em;
	background: var(--bulma-on-surface, #1a1c1d);
	color: var(--color-primary);
	padding: 0.25em 0.75em;
	line-height: 1.5;
	flex-shrink: 0;
}

.catalog-card-link {
	font-family: var(--font-label);
	font-size: 0.75em;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.3s ease;
}





/* Pagination */
.catalog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 6rem;
}

.catalog-pagination-btn {
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--bulma-surface-variant, #e2e2e3);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	font-family: var(--font-label);
	font-size: 0.75em;
	background: none;
}

.catalog-pagination-btn:hover {
	background: var(--bulma-on-surface, #1a1c1d);
	color: white;
}

.catalog-pagination-btn.is-current {
	background: var(--bulma-on-surface, #1a1c1d);
	color: var(--color-primary);
}

/* Tag override for card badges */
.card-badge-dark {
	background: var(--bulma-on-surface, #1a1c1d) !important;
	color: var(--color-primary) !important;
	font-family: var(--font-label) !important;
	font-size: 0.625em !important;
	padding: 0.35em 0.75em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-radius: 0 !important;
}

.card-badge-secondary {
	background: var(--bulma-secondary, #5e5e5e) !important;
	color: white !important;
	font-family: var(--font-label) !important;
	font-size: 0.625em !important;
	padding: 0.35em 0.75em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-radius: 0 !important;
}