/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */
/* Puteron product archive tabs. */
.product-tabs .swiper-slide > button {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: var(--radius-2);
	color: var(--color-contrast);
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: var(--font-small);
	font-weight: var(--font-weight-medium);
	padding: var(--spacing-3) var(--spacing-6);
	transition: background-color 0.15s, color 0.15s, transform 0.2s;
}

.product-tabs .swiper-slide > button:hover {
	background-color: var(--color-background-200);
	transform: translateY(-1px);
}

.product-tabs .swiper-slide > button:focus-visible,
.product-tabs .swiper-slide > button.current {
	background-color: var(--color-background-200);
	color: var(--color-contrast);
}

.page-product .posts-list > li[hidden] {
	display: none;
}

.product-filter-empty {
	color: var(--color-secondary);
	margin: var(--layout--gap) 0;
	text-align: center;
}