html { overflow-x: hidden; }
body { background: #000; color: #eee; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; position: relative; overflow-x: hidden; }
/* Do not constrain generic .container (used by start.html). Only pad it. */
.container { padding: 1rem 0 3rem; }
/* Shop page sizing only */
.shop-container { width: min(1372px, 92vw); margin-left: auto; margin-right: auto; }
/* Override global .container flex so shop stacks consistently at all widths */
.shop-container { display: block; }
/* Freeze layout appearance beyond 1372px so it does not keep adapting with viewport */
@media (min-width: 1373px) {
	.shop-container { max-width:1372px; }
	/* Keep vertical flow; prevent accidental row flex inheritance */
	.shop-container { display:block; }
}
.nav-menu ul { display:flex; gap:1rem; list-style:none; padding:0; margin:0 0 1rem; }
.nav-menu a { color:#9fe870; text-decoration:none; }
/* Force nav-menu always visible on shop page */
.shop-container .nav-menu { display:block; }
@media (min-width: 1373px) { .shop-container .nav-menu { display:block; } }

/* Brand hero */
.brand-hero { position: relative; overflow:hidden; border:1px solid #111; border-radius:12px; background: radial-gradient(1200px 600px at 10% 0%, rgba(159,232,112,0.07), rgba(0,0,0,0)) , linear-gradient(180deg, rgba(20,20,20,0.9), rgba(0,0,0,0.9)); margin:1.5rem; }
.brand-hero::before { /* TV scanline overlay */
	content: "";
	position:absolute; inset: -2px; pointer-events:none; z-index:1;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255,255,255,0.07) 0px,
		rgba(255,255,255,0.07) 2px,
		rgba(0,0,0,0) 2px,
		rgba(0,0,0,0) 8px
	);
	mix-blend-mode: overlay;
	opacity: .24;
	animation: tv-scan 17s linear infinite, tv-flicker 6.4s ease-in-out infinite;
}
.brand-hero::after { /* static grainy noise overlay */
	content: "";
	position:absolute; inset:-2px; pointer-events:none; z-index:1;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>");
	background-size: 300px 300px;
	background-repeat: repeat;
	mix-blend-mode: overlay;
	opacity:.08;
	animation: noise-shift 6s steps(12) infinite;
}
.brand-hero > * { position: relative; z-index: 2; }
.brand-mark { display:grid; place-items:center; padding: 2.25rem 1rem; text-align:center; }
.brand-logo { width:120px; height:auto; filter: drop-shadow(0 6px 16px rgba(159,232,112,0.2)); margin-bottom:0.5rem; }
.brand-title {
     margin:0.25rem 0 0; 
     font-family: 'Simplipixa', sans-serif; /* Fallback to sans-serif if the font fails to load */
     /*font-size: clamp(1.6rem, 3.5vw, 2.25rem); 
     letter-spacing:0.12em; */
     padding: 2px;
    }
.brand-tagline { color:#cde9a5; opacity:0.85; margin:0.35rem 0 0.9rem; letter-spacing:0.08em; }
.brand-actions { display:flex; gap:0.6rem; justify-content:center; }
.btn { display:inline-block; padding:0.45rem 0.8rem; border-radius:8px; border:1px solid #333; color:#111; background:#9fe870; text-decoration:none; font-weight:700; }
.btn:hover { filter:brightness(1.05); }
.btn.secondary { background:#1a1a1a; color:#9fe870; padding:0.7rem 1.1rem; font-size:2rem; }

.shop h1 { 
    font-family: 'Simplipixa', sans-serif; /* Fallback to sans-serif if the font fails to load */
    font-size: xx-large;
    margin: 0 0 1rem; }
.catalog-nav { position:sticky; top:0; z-index:20; backdrop-filter: blur(6px); background: rgba(0,0,0,0.6); border-bottom:1px solid #151515; display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin: 0 0 1rem; padding:.5rem .75rem; flex-wrap:wrap; }
.catalog-nav .tabs { display:flex; gap:.4rem; flex-wrap:wrap; }
.catalog-nav .tab { appearance:none; border:1px solid #333; background:#141414; color:#ddd; padding:.45rem .75rem; border-radius:8px; cursor:pointer; font-weight:600; letter-spacing:.02em; }
.catalog-nav .tab .badge { background:#222; color:#9fe870; padding: 0 .35rem; border-radius: 6px; margin-left:.35rem; font-weight:700; }
.catalog-nav .tab.active { background:#0f0f0f; border-color:#3a3a3a; color:#cde9a5; }
.catalog-nav .nav-actions { margin-left:auto; }
.catalog-nav .btn.secondary { padding:.45rem .75rem; font-size:.95rem; }
.catalog-nav select { background:#141414; color:#ddd; border:1px solid #333; border-radius:8px; padding:.45rem .6rem; margin-right:.5rem; }

.catalog-section .grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 560px) {
	.catalog-section .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.catalog-section .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.catalog-section .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.row { margin-bottom: 2rem; }
.row-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin:0 0 0.5rem; }
.row-head h2 { margin: 0; font-size:1.2rem; color:#cde9a5; }
.row-controls { display:flex; gap:0.35rem; }
.row-controls button { background:#181818; color:#ddd; border:1px solid #333; border-radius:8px; width:34px; height:34px; line-height:1; cursor:pointer; }
.row-controls button:hover { filter:brightness(1.15); }
.card { background: #111; border: 1px solid #222; border-radius: 10px; overflow:hidden; display:flex; flex-direction:column; }
.media { background:#333; width: 100%; height: auto; display:block; overflow:hidden; }
.media.ratio { position: relative; padding-top: 66%; }
.media.ratio img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(0.85); display:block; transform: translateZ(0); }
.media .hover-audio { display:none; }
.preview-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)); opacity:0; transition: opacity 140ms ease; z-index:2; }
.preview-layer, .preview-btn { pointer-events:auto; }
.media:hover .preview-layer, .media:focus-within .preview-layer, .card.playing .preview-layer { opacity: 1; }
.preview-btn { appearance:none; border:none; background: rgba(0,0,0,0.6); color:#fff; width:56px; height:56px; border-radius: 50%; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.4); }
.preview-btn:hover { background: rgba(0,0,0,0.75); }
.preview-btn .icon { font-size: 22px; line-height:1; }
.meta { padding: 0.75rem 1rem 1rem; display:flex; flex-direction:column; gap: 0.5rem; min-width:0; }
/* Tame title/description to avoid variable heights */
.meta h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.meta p { margin: 0; color:#cfcfcf; display:-webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }
.price { font-weight: 700; color:#cde9a5; }
.buy {
	margin-top: auto;
	display: flex;
	justify-content:  flex-end;
	align-items: flex-end;
	min-height: 48px;
}
.cart-toggle {
	margin-left: auto;
	margin-bottom: 0;
	background: #9fe870;
	color: #111;
	border-radius: 8px;
	border: 1px solid #333;
	padding: 0.5rem 1.1rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: background 0.18s, color 0.18s;
}
.cart-toggle:hover {
	background: #b6f7a2;
	color: #222;
}
.btn-info { background:#1a1a1a; color:#ddd; border:1px solid #333; border-radius:8px; padding:.45rem .8rem; margin-right:.5rem; cursor:pointer; }

/* Modal */
.modal.hidden { display:none; }
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter: blur(6px); }
.modal-dialog { position:relative; background:#0f0f0f; border:1px solid #222; border-radius:12px; width:min(900px, 92vw); max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
.modal-close { position:absolute; top:8px; right:8px; appearance:none; border:none; background:#191919; color:#ddd; width:32px; height:32px; border-radius:8px; cursor:pointer; }
.modal-body { display:grid; grid-template-columns: 1fr; gap:1rem; padding:1rem; }
@media (min-width: 720px) { .modal-body { grid-template-columns: 1fr 1.2fr; } }
.modal-media { position:relative; padding-top:66%; background:#222; border-radius:8px; overflow:hidden; }
.modal-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.modal-meta h3 { margin:.1rem 0 .4rem; }
.modal-meta .modal-desc { color:#ccc; }
.modal-meta .modal-price { color:#cde9a5; font-weight:700; margin:.25rem 0 .5rem; }

/* Sticky disabling scroll when modal open */
body.modal-open { overflow: hidden; }

/* Accessibility utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0; }
.preview-audio { display:none; }

/* Toasts */
.toast-container { position: fixed; right: 16px; top: 16px; display: grid; gap: 10px; z-index: 60; }
.toast { width: min(420px, 92vw); background:#0f0f0f; border:1px solid #222; color:#eee; border-radius:12px; padding:0.8rem; box-shadow:0 10px 30px rgba(0,0,0,0.5); opacity:0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity:1; transform: translateY(0); }
.toast.fade-out { opacity:0 !important; transform: translateY(-6px) !important; }
.toast-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.35rem; }
.toast-head h4 { margin:0; font-size:1rem; color:#cde9a5; }
.toast-close { appearance:none; border:none; background:#191919; color:#ddd; width:28px; height:28px; border-radius:6px; cursor:pointer; }
.toast-close:hover { filter: brightness(1.1); }
.bar-wrap { height: 12px; background:#1a1a1a; border:1px solid #333; border-radius:6px; overflow:hidden; }
.bar { height:100%; width:0%; background:linear-gradient(90deg, #3b82f6, #22c55e); transition:width .25s ease; }
.stripe { height:10px; background:#1a1a1a; border:1px solid #333; border-radius:6px; overflow:hidden; margin-top:.25rem; }
.stripe .inner { height:100%; width:100%; background:repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 10px, rgba(255,255,255,.05) 10px 20px); animation: progStripe 1s linear infinite; }
@keyframes progStripe { from { background-position: 0 0; } to { background-position: 40px 0; } }

/* Toast notifications (bottom-right) */
.toast-container { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: 0.5rem; z-index: 60; pointer-events: none; }
.toast { pointer-events: auto; background:#0f0f0f; border:1px solid #222; border-radius: 10px; padding: 0.75rem 0.85rem; width: min(420px, 92vw); box-shadow: 0 10px 30px rgba(0,0,0,0.4); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.fade-out { opacity: 0; transform: translateY(8px); }
.toast .toast-head { display:flex; align-items:center; justify-content: space-between; gap:0.5rem; margin-bottom: 0.35rem; }
.toast .toast-head h4 { margin:0; font-size: 0.95rem; }
.toast .toast-close { appearance:none; background:transparent; border:none; color:#aaa; cursor:pointer; font-size: 1.1rem; line-height:1; }
.toast .bar-wrap { height:12px; background:#1a1a1a; border:1px solid #333; border-radius:6px; overflow:hidden; }
.toast .bar { height:100%; width:0%; background:linear-gradient(90deg, #3b82f6, #22c55e); transition:width .25s ease; }
.toast .stripe { height:10px; background:#1a1a1a; border:1px solid #333; border-radius:6px; overflow:hidden; }
.toast .stripe .inner { height:100%; width:100%; background:repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0 10px, rgba(255,255,255,.05) 10px 20px); animation: progStripe 1s linear infinite; }
@keyframes progStripe{from{background-position:0 0;}to{background-position:40px 0;}}

/* TV scanline animations */
@keyframes tv-scan {
	0% { background-position-y: 0; }
	100% { background-position-y: 123px; }
}
@keyframes tv-flicker {
	0%, 100% { opacity: .20; }
	50% { opacity: .26; }
}
@keyframes noise-shift {
	0% { background-position: 0 0; }
	100% { background-position: 180px 140px; }
}

/* Accessibility: disable motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.brand-hero::before,
	.brand-hero::after { animation: none !important; opacity: 0.12; }
}

/* Global page background effects (scanlines + grain) */
body::before { /* page-wide scanlines */
	content: ""; position: fixed; left:0; top:0; right:0; bottom:0; pointer-events:none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255,255,255,0.11) 0px,
		rgba(255,255,255,0.11) 2px,
		rgba(0,0,0,0) 2px,
		rgba(0,0,0,0) 8px
	);
		mix-blend-mode: normal; opacity:.25; z-index: 0;
	animation: tv-scan-page 20s linear infinite, tv-flicker 13s ease-in-out infinite;
	will-change: background-position, opacity;
}
body::after { /* page-wide grain */
	content: ""; position: fixed; left:0; top:0; right:0; bottom:0; pointer-events:none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.8'/></svg>");
	background-size: 300px 300px; background-repeat: repeat;
		mix-blend-mode: normal; opacity:.10; z-index: 0;
	animation: noise-shift-page 100s steps(10) infinite;
	will-change: background-position;
}

/* High-DPI: make lines/grain coarser so they show up at native zoom */
@media (min-resolution: 2dppx) {
	body::before {
		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,0.12) 0px,
			rgba(255,255,255,0.12) 3px,
			rgba(0,0,0,0) 3px,
			rgba(0,0,0,0) 10px
		);
	}
	body::after { background-size: 360px 360px; }
	.brand-hero::before {
		background: repeating-linear-gradient(
			to bottom,
			rgba(255,255,255,0.08) 0px,
			rgba(255,255,255,0.08) 3px,
			rgba(0,0,0,0) 3px,
			rgba(0,0,0,0) 10px
		);
	}
	.brand-hero::after { background-size: 360px 360px; }
}

@keyframes tv-scan-page {
	0% { background-position-y: 0; }
	100% { background-position-y: 127px; }
}
@keyframes noise-shift-page {
	0% { background-position: 0 0; }
	100% { background-position: 190px 150px; }
}

@media (prefers-reduced-motion: reduce) {
	body::before, body::after { animation: none !important; }
}