/* =========================================================
   REUSABLE SURFACE TEXTURES
   Subtle, performance-friendly effects layered on top of
   solid brand colors. Keep opacity low so product info and
   purchasing UI stay easy to read.
   ========================================================= */

.chud-texture-grain {
	position: relative;
}

.chud-texture-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: multiply;
	background-image: radial-gradient(rgba(0, 0, 0, 0.8) 1px, transparent 1px);
	background-size: 3px 3px;
}

.chud-texture-halftone {
	position: relative;
}

.chud-texture-halftone::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.08;
	background-image: radial-gradient(var(--chud-ink) 35%, transparent 36%);
	background-size: 8px 8px;
}

.chud-border-rough {
	border: var(--chud-border-width) solid var(--chud-border-color);
	clip-path: polygon(
		0% 1%, 2% 0%, 98% 0%, 100% 2%,
		100% 98%, 98% 100%, 2% 100%, 0% 99%
	);
}

.chud-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 0.7em;
	font-family: var(--chud-font-mono);
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	border: 1px solid var(--chud-border-color);
	background: var(--chud-bg);
	transform: rotate(-2deg);
}

.chud-badge--accent {
	background: var(--chud-accent);
	color: var(--chud-accent-ink);
	border-color: var(--chud-accent);
}

.chud-badge--new,
.chud-badge--pick {
	background: var(--chud-ink);
	color: var(--chud-bg);
	border-color: var(--chud-ink);
}

.chud-badge--limited {
	background: var(--chud-accent);
	color: var(--chud-accent-ink);
	border-color: var(--chud-accent);
}

.chud-badge--sold-out {
	background: var(--chud-bg);
	color: var(--chud-ink-soft);
	text-decoration: line-through;
}

.chud-product-card__image .chud-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2;
}

.chud-registration-marks {
	position: relative;
}

.chud-registration-marks::before,
.chud-registration-marks::after {
	content: "+";
	position: absolute;
	font-family: var(--chud-font-mono);
	color: var(--chud-ink-soft);
	opacity: 0.5;
	font-size: 1rem;
}

.chud-registration-marks::before {
	top: 0.5rem;
	left: 0.5rem;
}

.chud-registration-marks::after {
	bottom: 0.5rem;
	right: 0.5rem;
}

.rotate-subtle {
	transform: rotate(-1.5deg);
	transition: transform 0.15s ease;
}

.rotate-subtle:hover,
.rotate-subtle:focus-visible {
	transform: rotate(0deg);
}