/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

.nav-shell {
	border-bottom: 1px solid var(--input, var(--border));
	background: var(--background);
}

.footer-shell {
	border-top: 1px solid var(--input, var(--border));
	border-bottom: 0;
	border-radius: 0;
}

.nav-divider {
	border-color: var(--input, var(--border));
}

.nav-muted {
	color: var(--muted-foreground);
}

.nav-search-icon {
	color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.nav-search-input {
	border: 1px solid var(--input, var(--border));
	background: color-mix(in srgb, var(--card) 90%, transparent);
	color: var(--foreground);
}

.nav-search-input::placeholder {
	color: color-mix(in srgb, var(--foreground) 40%, transparent);
}

.nav-search-input:focus {
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.nav-control {
	border-color: var(--input, var(--border));
	background: var(--card);
	color: color-mix(in srgb, var(--foreground) 80%, transparent);
}

.nav-control:hover {
	border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
	background: color-mix(in srgb, var(--foreground) 6%, var(--card));
}

.nav-control-active {
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 15%, transparent);
	color: var(--accent);
}

.nav-link {
	border-color: var(--input, var(--border));
	background: color-mix(in srgb, var(--card) 90%, transparent);
	color: color-mix(in srgb, var(--foreground) 75%, transparent);
}

.nav-link:hover {
	border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
	background: color-mix(in srgb, var(--foreground) 6%, var(--card));
}

.nav-link-active {
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
	background: color-mix(in srgb, var(--accent) 15%, transparent);
	color: var(--accent);
}

.rating-star-active {
	color: var(--accent);
}

.rating-star-inactive {
	color: color-mix(in srgb, var(--foreground) 25%, transparent);
}

.rating-value {
	color: color-mix(in srgb, var(--foreground) 90%, transparent);
}

.nav-cart-badge {
	background: var(--accent);
	color: var(--foreground);
}

.brand-wordmark {
	color: var(--foreground);
	letter-spacing: var(--brand-wordmark-tracking);
}

.brand-wordmark span + span {
	margin-left: var(--brand-wordmark-gap);
}

.brand-wordmark-accent {
	color: var(--accent);
	text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.price-product {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--accent);
	text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.price-card {
	font-family: var(--font-display);
	font-weight: 600;
	color: color-mix(in srgb, var(--foreground) 84%, var(--accent));
}

.section-title-accent {
	border-left-color: var(--accent);
}

.semantic-accent {
	color: var(--accent);
}

.semantic-accent-border {
	border-color: var(--accent) !important;
}

.semantic-surface-raised {
	background: color-mix(in srgb, var(--foreground) 4%, var(--card));
}

.semantic-field {
	border-color: var(--input, var(--border));
	background: color-mix(in srgb, var(--foreground) 4%, var(--card));
	color: var(--foreground);
}

.semantic-field::placeholder {
	color: color-mix(in srgb, var(--foreground) 42%, transparent);
}

.semantic-field:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--ring);
	outline: none;
}

.semantic-filter-link:hover {
	background: color-mix(in srgb, var(--foreground) 6%, var(--card));
}

.semantic-filter-link-active {
	border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
	background: color-mix(in srgb, var(--accent) 14%, var(--card));
	color: var(--accent);
}

.semantic-accent-surface {
	background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.semantic-accent-surface-hover:hover,
.group:hover .group-hover-semantic-card {
	background: color-mix(in srgb, var(--foreground) 6%, var(--card));
}

.semantic-accent-focus:focus-within {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 2px var(--ring);
}

.semantic-accent-icon-button:hover:enabled {
	background: var(--accent);
	color: var(--accent-foreground);
}

.semantic-accent-button {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-foreground);
}

.semantic-accent-button:hover:enabled {
	background: color-mix(in srgb, var(--accent) 82%, black);
}

.semantic-accent-button-outline {
	border-color: var(--accent);
	color: var(--accent);
}

.semantic-accent-button-outline:hover:enabled {
	background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.group-discount-badge {
	display: inline-flex;
	align-items: center;
	background: color-mix(in srgb, var(--accent), black 10%);
	color: var(--accent-foreground);
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.42rem 0.82rem;
	border-radius: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.product-duration-badge {
	display: inline-flex;
	align-items: center;
	background: color-mix(in srgb, var(--accent) 22%, var(--card));
	color: var(--foreground);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.3rem 0.5rem;
	border-radius: 0.5rem;
	border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
	letter-spacing: 0;
	text-transform: uppercase;
}