.grip-hero{padding:86px 0 64px;background:radial-gradient(circle at 82% 22%,rgba(155,234,60,.14),transparent 28%),linear-gradient(180deg,#0b0e0b 0%,#090b09 100%)}
.grip-hero h1{max-width:820px}.grip-hero p{max-width:760px;color:var(--muted);font-size:18px}.grip-hero-actions{display:flex;gap:12px;margin-top:28px}.grip-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.grip-filter{display:flex;gap:8px;flex-wrap:wrap}.grip-search{width:min(360px,100%)}.grip-load-state,.grip-empty{border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--muted);background:var(--card)}.grip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grip-card{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--card);display:flex;flex-direction:column}.grip-card.featured{border-color:rgba(155,234,60,.4)}
.grip-image{position:relative;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}
.grip-image [data-grip-media]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.grip-image img{display:block;width:84%;height:88%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:#fff;transform-origin:50% 50%;transform:rotate(var(--grip-rotate,0deg)) scale(var(--grip-scale,1));transition:opacity .18s ease,transform .18s ease}
.grip-image-placeholder{text-align:center;padding:24px;color:#141714}.grip-image-placeholder span,.grip-image-placeholder strong,.grip-image-placeholder small{display:block}.grip-image-placeholder span{color:#568b12;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.grip-image-placeholder strong{font-family:Oswald;font-size:30px;margin-top:6px}.grip-image-placeholder small{color:#646a61;margin-top:10px}.grip-badge{position:absolute;z-index:3;top:14px;right:14px;background:var(--lime);color:#0a0c09;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900}.grip-card-body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}.grip-category{color:var(--gold);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.grip-card h3{margin:0;font-size:27px}.grip-card p{color:var(--muted);font-size:14px;margin:0}.grip-colour-picker{display:flex;gap:7px;flex-wrap:wrap}.grip-colour-swatch{appearance:none;border:1px solid var(--line);background:#111511;color:var(--text);border-radius:999px;padding:7px 10px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s ease,background .15s ease,transform .15s ease}.grip-colour-swatch:hover{border-color:rgba(155,234,60,.55);transform:translateY(-1px)}.grip-colour-swatch.active{border-color:var(--lime);background:rgba(155,234,60,.12)}.swatch-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px rgba(255,255,255,.08)}.grip-meta{display:grid;gap:10px}.grip-meta>div{border-top:1px solid var(--line);padding-top:10px}.grip-meta span,.grip-meta strong{display:block}.grip-meta span{font-size:11px;color:var(--muted)}.grip-meta strong{font-size:13px;margin-top:3px}.grip-card-footer{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:end;gap:12px}.grip-card-footer span,.grip-card-footer strong{display:block}.grip-card-footer span{font-size:11px;color:var(--muted)}.grip-card-footer strong{color:var(--lime)}
@media(max-width:980px){.grip-grid{grid-template-columns:1fr 1fr}.grip-toolbar{align-items:stretch;flex-direction:column}.grip-search{width:100%}.grip-image img{width:82%;height:86%}}
@media(max-width:620px){.grip-grid{grid-template-columns:1fr}.grip-hero-actions{flex-direction:column}.grip-card-footer{align-items:stretch;flex-direction:column}.grip-card-footer .btn{width:100%}.grip-image{aspect-ratio:16/11}.grip-image img{width:80%;height:84%}}
.grip-meta select{width:100%;max-width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#111511;color:var(--text);font:inherit;font-size:13px;cursor:pointer}.grip-meta select:focus-visible,.grip-colour-swatch:focus-visible{outline:2px solid var(--lime);outline-offset:3px}