/* Grid wrapper for recommendation cards */
/* ensure we can hide/show empty state cleanly */
/* make sure grid is actually a grid */
.picks-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px){ .picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tall 3:4 covers (e.g., 308x450 derived from 920x1344) */
.pick-thumb { position: relative; aspect-ratio: 308 / 450; overflow: hidden; }
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Make the whole card clickable while allowing a separate Buy link */
.stretched-link { position: absolute; inset: 0; z-index: 1; }

/* Meta layout */
.pick-meta { padding: 12px; }
.pick-name { margin: 0 0 6px; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; opacity: .9; }
.pick-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; display: inline-block; }

.pick-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 14px; opacity: .95; }

/* Buttons */
.btn { position: relative; z-index: 2; display: inline-flex; align-items:center; justify-content:center; padding: 8px 10px; border-radius: 10px; font-size: 12px; text-decoration: none; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.btn.buy { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.1)); }
.btn:hover { transform: translateY(-1px); }

/* Empty state */
.pick-empty { padding: 22px; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; text-align: center; opacity: .8; }

/* Optional: subtle scale on hover */
.pick-card { position: relative; overflow: hidden; }
.pick-card:hover .pick-thumb img { transform: scale(1.03); transition: transform .25s ease; }

/* Skeletons */
.pick-card.skeleton { position: relative; overflow: hidden; }
.pick-card.skeleton .pick-thumb {
background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
background-size: 200% 100%;
animation: sk-shimmer 1.2s linear infinite;
}
.sk-line {
height: 12px; margin: 10px 0 0; border-radius: 6px;
background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
background-size: 200% 100%;
animation: sk-shimmer 1.2s linear infinite;
}
.sk-line.w-80 { width: 80%; }
.sk-line.w-50 { width: 50%; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

:root{
--bg: #0f1115;
--bg-2: #12151c;
--panel: #171a22;
--panel-2:#1b1f29;
--text:#e8ecf1;
--muted:#9aa4b2;
--line:#232838;
--accent:#e548ff;   /* user's purple accent */
--accent-2:#ff9332; /* user's orange accent */
--good:#39d98a;
--bad:#ff5d5d;
--shadow: 0 10px 30px rgba(0,0,0,.35);
--radius-xl: 18px;
--radius-lg: 14px;
--radius: 10px;
--gap: 16px;
--gap-lg: 28px;
--card-aspect: 3 / 4; /* portrait ratio */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background: radial-gradient(1200px 600px at 20% -10%, rgba(229,72,255,.08), transparent 60%),
          radial-gradient(1000px 700px at 90% -30%, rgba(255,147,50,.08), transparent 60%),
          var(--bg);
color:var(--text);
font: 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a{color:inherit;text-decoration:none}

/* Layout */
.wrap{
max-width: 1200px;
margin: 0 auto;
padding: 24px clamp(16px, 3vw, 28px) 80px;
}

/* Hero */
.hero{
position:relative;
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 70%),
radial-gradient(800px 300px at 30% 0%, rgba(229,72,255,.18), transparent 60%),
radial-gradient(600px 260px at 95% -10%, rgba(255,147,50,.20), transparent 60%),
var(--panel);
border:1px solid var(--line);
border-radius: var(--radius-xl);
padding: 28px clamp(16px,2.6vw,24px);
box-shadow: var(--shadow);
}
.brand{
display:flex;align-items:center;gap:12px;margin-bottom:12px
}
.logo{
width:38px;height:38px;border-radius:10px;
background:
conic-gradient(from 220deg, var(--accent), var(--accent-2) 40%, var(--accent) 100%);
box-shadow: 0 8px 22px rgba(229,72,255,.25), inset 0 0 30px rgba(255,255,255,.08);
}
.title{
font-size: clamp(20px, 3.3vw, 28px);
font-weight: 700;
letter-spacing:.2px;
}
.subtitle{
color:var(--muted); margin-top:4px; font-size: 13px;
}

/* Search */
.search-lg{
display:grid;
grid-template-columns: 1fr 150px 140px 48px;
gap:10px;
margin-top:18px;
}
@media (max-width: 820px){
.search-lg{ grid-template-columns: 1fr 120px 44px; }
.search-lg .region{ display:none; }
}
@media (max-width: 560px){
.search-lg{ grid-template-columns: 1fr 44px; }
.search-lg .platform, .search-lg .region{ display:none; }
}
.search-input{
width:100%; height:48px; padding:0 14px 0 42px; border-radius:12px;
border:1px solid var(--line); background:linear-gradient(180deg, var(--panel-2), var(--panel));
color:var(--text); outline:none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
background-image:
radial-gradient(circle at 16px 50%, rgba(229,72,255,.45) 0 3px, transparent 3px),
radial-gradient(circle at 16px 50%, rgba(255,147,50,.45) 0 2px, transparent 2px);
background-repeat:no-repeat;
}
.select, .btn{
height:48px; border-radius:12px; border:1px solid var(--line);
background:linear-gradient(180deg, var(--panel-2), var(--panel));
color:var(--text);
padding:0 12px; outline:none;
}
.btn{
display:inline-grid; place-items:center; width:48px; cursor:pointer;
background: linear-gradient(180deg, #2a2f3b, #252a35);
transition: transform .08s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35) }
.btn:active{ transform: translateY(0) }

/* Filters (chips) */
.filters{
display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
.chip{
padding:8px 12px; border:1px solid var(--line); border-radius:999px;
background:linear-gradient(180deg, #1e2330, #1a1f2b); color:var(--text);
font-size:12px; cursor:pointer; user-select:none;
transition: border-color .15s ease, box-shadow .2s ease, background .2s;
}
.chip[role="button"] { cursor: pointer; }
.chip:hover{ border-color:#2b3246 }
.chip.sel{
border-color: color-mix(in srgb, var(--accent) 40%, #2b3246);
box-shadow: 0 4px 16px rgba(229,72,255,.18), inset 0 0 0 999px rgba(229,72,255,.06);
}

#quick-filters .chip[role="button"] { cursor: pointer; }
#quick-filters .chip.sel {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* Results grid */
/* portrait cover: 920x1344 */
.thumb { width:100%; aspect-ratio: 920 / 1344; background:#111; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* (optional) 4-up grid on wide screens */
.grid { display:grid; gap:16px; }
.buy-btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:8px;
padding:10px 14px;
border-radius:10px;
background:#2f82ff;
color:#fff !important;
text-decoration:none;
font-weight:700;
font-size:14px;
transition:background .15s ease, transform .05s ease, opacity .2s ease;
}
.buy-btn:hover { background:#2569cc; transform:translateY(-1px); }
.buy-btn:active { transform:translateY(0); }
.buy-btn[disabled] { opacity:.5; pointer-events:none; }

/* if your existing .card styles assumed <a>, they’ll still work with <div> */
.card.best { outline: 2px solid #2f82ff44; box-shadow: 0 0 0 3px #2f82ff22 inset; }
@media (min-width: 680px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px){ .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Card */
.pick-card{
position:relative; display:block; border-radius: var(--radius-lg);
background:
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
radial-gradient(120% 100% at 50% -20%, rgba(229,72,255,.10), transparent 55%),
var(--panel-2);
border:1px solid var(--line);
overflow:hidden;
transition: transform .15s ease, box-shadow .25s ease, border-color .15s;
}
.pick-card:hover{
transform: translateY(-3px);
border-color: #2d3550;
box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(229,72,255,.06) inset;
}
.pick-thumb{
width:100%; aspect-ratio: var(--card-aspect);
object-fit: cover; display:block; background:#0b0e13;
}
.pick-meta{
padding:12px; display:flex; flex-direction:column; gap:6px;
background: linear-gradient(180deg, rgba(10,12,18,0), rgba(10,12,18,.55));
}
.pick-name{
font-weight:600; font-size: 13.5px; letter-spacing:.2px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pick-sub{
color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; min-height: 18px;
}
.pick-dot{
width:4px;height:4px;border-radius:50%;background:#4c5770;display:inline-block
}
.pick-badge{
padding:6px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.2px;
background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #6c2a75));
color:white; box-shadow: 0 6px 18px rgba(229,72,255,.35);
}
.pick-card.best{ outline: 1px solid color-mix(in srgb, var(--accent) 50%, #2b3246) }
.price{
color: var(--good); font-weight:600;
}

/* Skeletons */
.skeleton{
position:relative; overflow:hidden; background: #151923; border:1px solid #22283a;
border-radius: var(--radius-lg);
}
.skeleton .pick-thumb{ background:#0e121b }
.skeleton .pick-meta{ padding:12px }
.skeleton .pick-name, .skeleton .pick-sub{
height:14px; border-radius:6px; background:#1b2232;
}
.skeleton::after{
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
transform: translateX(-100%); animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Pager */
.pager{
display:flex; align-items:center; justify-content:center; gap:8px;
margin-top:22px; flex-wrap:wrap;
}
.page-btn{
min-width:36px; height:36px; padding:0 10px; border-radius:10px;
border:1px solid var(--line);
background: linear-gradient(180deg, #222736, #1d2230);
color:var(--text); font-size:13px; cursor:pointer;
transition: border-color .15s, transform .1s, box-shadow .2s;
}
.page-btn:hover{ border-color:#2d3550 }
.page-btn:active{ transform: translateY(1px) }
.page-btn[disabled]{ opacity:.5; cursor:not-allowed }
.page-btn.active{
border-color: color-mix(in srgb, var(--accent) 50%, #2b3246);
box-shadow: 0 8px 24px rgba(229,72,255,.20), inset 0 0 0 999px rgba(229,72,255,.06);
}

.pick-card.skeleton { position: relative; overflow: hidden; }
.pick-card.skeleton .pick-thumb { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }
.sk-line { height: 12px; margin: 10px 0 0; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06)); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }
.sk-line.w-80 { width: 80%; }
.sk-line.w-50 { width: 50%; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Small helpers */
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.muted{ color:var(--muted) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.spacer{ height:6px }

/* Grid wrapper for recommendation cards */
.picks-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .picks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px){ .picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* Ensure consistent aspect for tall 3:4 covers (e.g., 308x450 derived from 920x1344) */
.pick-thumb { position: relative; overflow: hidden; }
.pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* Make the whole card clickable while allowing a separate Buy link */
.stretched-link { position:absolute; inset:0; z-index: 1; }


/* Meta layout */
.pick-meta { padding: 12px; }
.pick-name { margin: 0 0 6px; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; opacity: .9; }
.pick-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; display: inline-block; }


.pick-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 14px; opacity: .95; }


/* Buttons (lightweight so they blend with your theme) */
.btn { position: relative; z-index: 2; display: inline-flex; align-items:center; justify-content:center; padding: 8px 10px; border-radius: 10px; font-size: 12px; text-decoration: none; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.btn.buy { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.1)); }
.btn:hover { transform: translateY(-1px); }


/* Badge position within the thumbnail */
.pick-badge { position: absolute;left: auto;bottom: 8px;top: auto;right: 8px;z-index: 2; }


/* Empty state */
.pick-empty { padding: 22px; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; text-align: center; opacity: .8; }


/* Optional: subtle scale on hover, respects your existing .pick-card hover styling */
.pick-card { position: relative; overflow: hidden; }
.pick-card:hover .pick-thumb img { transform: scale(1.03); transition: transform .25s ease; }

.hidden { display: none !important; }

.pick-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

@media (max-width: 520px) {
  .pick-cta { grid-template-columns: 1fr; }
}

.pick-price {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.price-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .4px;
  font-weight: 700;
  background: linear-gradient(180deg, #2dd4bf, #14b8a6);
  color: #051311;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.2);
}
.price-badge.alt { background: linear-gradient(180deg, #94a3b8, #64748b); color: #0b0f14; }

.price-amount { font-size: 18px; line-height: 1; }
.price-amount strong { font-size: 20px; font-weight: 800; }
.price-amount .currency { opacity: .9; font-size: 14px; margin-left: 2px; }

/* CTA button: make it pop */
.btn.buy.cta {
  --cta1: #ff8a00; /* warm gradient (G2A-ish, but neutral) */
  --cta2: #ff5a00;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, var(--cta1), var(--cta2));
  color: #0b0f14;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(255,90,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  z-index: 2;
}
.btn.buy.cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn.buy.cta:active { transform: translateY(0); filter: brightness(.95); }
.btn.buy.cta:focus-visible {
  outline: 2px solid rgba(255,138,0,.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255,138,0,.25);
}
.btn.buy.cta[disabled] {
  background: linear-gradient(180deg, #9ca3af, #6b7280);
  color: #111827;
  box-shadow: none;
  cursor: not-allowed;
}

/* Make name tighter to free space for price/CTA */
.pick-name { margin: 0 0 4px; }