/* ==========================================================================
   drope — street-art / futuristic visual layer
   Grain, halftone, spray-stamp and marker-underline motifs.
   Purely decorative — all aria-hidden, none carry meaning through colour alone.
   ========================================================================== */

/* Noise grain (SVG feTurbulence, inlined as data-uri — no extra request) */
.drope-grain { position: relative; }
.drope-grain::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 120px 120px;
}

/* Halftone dot field — print/street culture nod */
.drope-halftone { position: relative; }
.drope-halftone::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.12;
	background-image: radial-gradient(currentColor 1px, transparent 1.4px);
	background-size: 10px 10px;
}

/* Corner-bracket stencil frame (HUD / viewfinder feel) */
.drope-bracket-frame { position: relative; }
.drope-bracket-frame::before,
.drope-bracket-frame::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border-color: var(--wp--preset--color--lime);
	pointer-events: none;
}
.drope-bracket-frame::before { inset-block-start: 10px; inset-inline-start: 10px; border-block-start: 2px solid; border-inline-start: 2px solid; }
.drope-bracket-frame::after { inset-block-end: 10px; inset-inline-end: 10px; border-block-end: 2px solid; border-inline-end: 2px solid; }

/* Spray-splash accent behind headlines */
.drope-splash { position: absolute; z-index: -1; pointer-events: none; filter: blur(0.5px); }
.drope-splash svg { display: block; width: 100%; height: 100%; }

/* Marker-style rough underline beneath accent words */
.drope-marker-underline { position: relative; display: inline-block; }
.drope-marker-underline svg { position: absolute; inset-inline-start: -2%; inset-block-end: -0.18em; width: 104%; height: 0.3em; }

/* Rotating stamp badge — "certified drop" sticker */
.drope-stamp { position: absolute; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; width: 96px; height: 96px; flex-shrink: 0; }
.drope-hero__frame, .drope-story__frame { position: relative; }
.drope-stamp svg { width: 100%; height: 100%; animation: drope-stamp-spin 18s linear infinite; }
.drope-stamp .drope-stamp__center { animation: none; }
@keyframes drope-stamp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .drope-stamp svg { animation: none; } }

/* Category chip nav — department entry points, mobile-first */
.drope-chip-nav { display: flex; gap: 0.5rem; overflow-x: auto; padding-block: 0.25rem 0.75rem; scrollbar-width: none; }
.drope-chip-nav::-webkit-scrollbar { display: none; }
.drope-chip-nav a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
}
.drope-chip-nav a:hover,
.drope-chip-nav a:focus-visible { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--graphite); border-color: var(--wp--preset--color--lime); }

/* Department section */
.drope-department { padding-block: var(--wp--custom--spacing--section, clamp(3rem, 2rem + 4vw, 7rem)); }
.drope-department__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Mobile-first product-card touch upgrades ---------- */
@media (hover: none) {
	.drope-card-wishlist { opacity: 1; width: 40px; height: 40px; }
}
.drope-card-wishlist { min-width: 44px; min-height: 44px; }