/* ============================================================
   STORE — /apps and /apps/<slug>
   Layered on top of style.css (tokens, topnav, pills, dir-chips,
   report modal all come from there). Cards here are always visible —
   unlike .app-card they never wait on a reveal observer, because these
   pages are the destination, not a scroll-past section.
   ============================================================ */

.store-shell{ max-width:1080px; margin:0 auto; padding:64px clamp(20px, 5vw, 40px) 40px; }

/* ---- store head ------------------------------------------------- */
.store-hero{ text-align:center; margin:0 auto 34px; max-width:680px; }
.store-hero .eyebrow{ justify-content:center; }
.store-hero h1{
  font-family:var(--display); font-weight:800; margin:0 0 12px;
  font-size:clamp(36px, 5vw, 56px); text-wrap:balance;
}
.store-hero p{ color:var(--text-dim); font-size:15.5px; line-height:1.65; margin:0; }

/* The media variant widens the hero to the shell's full width and sits
   the cover's ambient clip/still behind it — the .section-media scrim
   (in style.css) keeps the text legible over even a busy frame. */
.store-hero--media{
  position:relative; overflow:hidden; max-width:none;
  border-radius:1.5rem; padding:clamp(48px, 8vw, 90px) 24px;
  border:1px solid var(--panel-border);
}
.store-hero--media .store-hero-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }
.store-hero--media .section-media video{ display:none; }
.store-hero--media .section-media video.is-on{ display:block; }

/* The filter bar reuses the homepage's .dir-bar pattern; on /apps it
   sits inside the shell and sticks under the nav while the grid
   scrolls, because the catalogue is long enough to lose your place in. */
.store-shell .dir-bar{
  position:sticky; top:70px; z-index:20; margin:0 0 22px;
  padding:12px 0;
  background:rgba(8,9,11,0.86); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ---- store grid ------------------------------------------------- */
.store-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.store-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  color:inherit; text-decoration:none;
  background:linear-gradient(155deg, rgba(255,255,255,0.09), rgba(0,26,77,0.16) 60%);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--panel-border); border-radius:1.1rem;
  box-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 40px rgba(0,0,0,0.45);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.store-card::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
             color-mix(in srgb, var(--accent, var(--orange)) 20%, transparent), transparent 72%);
  opacity:0; transition:opacity .3s ease;
}
.store-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent, var(--orange)) 40%, var(--border-strong));
  box-shadow:0 1px 0 rgba(255,255,255,0.09) inset, 0 20px 50px rgba(0,0,0,0.55),
             0 0 34px color-mix(in srgb, var(--accent, var(--orange)) 16%, transparent);
}
.store-card:hover::before{ opacity:1; }
.store-card:focus-visible{ outline:2px solid var(--brand-blue-line); outline-offset:2px; }
.store-card[hidden]{ display:none !important; }
.store-card .app-preview{ height:132px; }
.store-card:hover .app-preview{ transform:scale(1.04); }
/* Category-banner stand-in for apps with no real screenshot yet: dimmed
   slightly so it reads as a backdrop, not a capture. */
.store-card .app-preview--cat{ opacity:.75; }

.store-card-body{ display:flex; align-items:flex-start; gap:14px; padding:18px 18px 14px; flex:1; }
.store-card-body .app-icon{ width:48px; height:48px; }
.store-card-info{ flex:1; min-width:0; }
.store-card-info h3{
  font-family:var(--body); font-size:15.5px; font-weight:700; margin:0 0 5px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.store-card-info p{ font-size:13px; color:var(--text-dim); line-height:1.55; margin:0; }
.store-card-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 18px 16px;
}
.store-card-cat{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent, var(--text-faint));
}
.store-card-cta{ font-size:12.5px; font-weight:600; color:var(--text-dim); transition:color .2s ease; }
.store-card:hover .store-card-cta{ color:var(--text); }

.store-empty{ padding:40px 0 20px; text-align:center; color:var(--text-dim); font-size:14px; }

/* ---- app detail page -------------------------------------------- */
.appd-back{
  display:inline-block; margin-bottom:26px; color:var(--text-dim);
  font-size:13.5px; text-decoration:none;
}
.appd-back:hover{ color:var(--text); }

.appd-head{ display:flex; align-items:flex-start; gap:20px; margin-bottom:26px; }
.appd-icon{
  width:76px; height:76px; border-radius:20px; object-fit:cover; flex-shrink:0;
  box-shadow:0 12px 34px rgba(0,0,0,0.5), 0 0 30px color-mix(in srgb, var(--accent, var(--orange)) 30%, transparent);
}
.appd-title{ flex:1; min-width:0; }
.appd-title h1{
  font-family:var(--display); font-weight:800; margin:2px 0 8px;
  font-size:clamp(30px, 4vw, 44px); text-wrap:balance;
}
.appd-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.pill.age{ background:rgba(255,155,154,0.12); border-color:rgba(255,155,154,0.4); color:#FF9B9A; }
.appd-tagline{ font-size:16px; color:var(--text-dim); line-height:1.6; margin:0; max-width:60ch; }

.appd-shot{
  display:block; width:100%; max-height:440px; object-fit:cover; object-position:top;
  border:1px solid var(--border-strong); border-radius:1.2rem;
  box-shadow:0 24px 70px rgba(0,0,0,0.55); margin-bottom:30px;
}
.appd-shot--video{ background:#000; }
.appd-shot--cat{ opacity:.75; }

.appd-main{ display:grid; grid-template-columns:1.7fr 1fr; gap:22px; align-items:start; }
.appd-desc p{ font-size:15px; line-height:1.7; color:var(--text-dim); margin:0 0 14px; }
.appd-note{ font-size:12.5px; color:var(--text-faint); margin:4px 0 0; }

.appd-features{ margin-top:8px; }
.appd-features h2{ font-family:var(--display); font-size:20px; font-weight:800; margin:0 0 12px; }
.appd-features ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.appd-features li{
  position:relative; padding-left:22px;
  font-size:14px; line-height:1.55; color:var(--text-dim);
}
.appd-features li::before{
  content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%;
  background:var(--accent, var(--orange)); box-shadow:0 0 10px var(--accent, var(--orange));
}

.appd-info{
  padding:20px 22px; border-radius:1.1rem;
  background:linear-gradient(155deg, rgba(255,255,255,0.08), rgba(0,26,77,0.18));
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--panel-border);
}
.appd-info-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; font-size:13px;
  border-bottom:1px solid var(--border);
}
.appd-info-row:last-of-type{ border-bottom:0; }
.appd-info-row span:first-child{ color:var(--text-faint); font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding-top:2px; }
.appd-info-row span:last-child{ color:var(--text); text-align:right; }
.appd-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px; padding:13px 18px; border-radius:12px;
  font-weight:700; font-size:14.5px; text-decoration:none;
  color:#0b0c0f; background:var(--accent, var(--orange));
  transition:transform .2s ease, box-shadow .2s ease;
}
.appd-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 30px color-mix(in srgb, var(--accent, var(--orange)) 40%, transparent);
}
.appd-cta:focus-visible{ outline:2px solid var(--brand-blue-line); outline-offset:2px; }

/* "More in this category" strip — smaller sibling cards that keep the
   visitor inside the store instead of bouncing back to the listing. */
.appd-related{ margin-top:44px; }
.appd-related h2{ font-family:var(--display); font-size:22px; font-weight:800; margin:0 0 14px; }
.mini-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.mini-card{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  color:inherit; text-decoration:none; border-radius:0.9rem;
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  transition:border-color .2s ease, background .2s ease;
}
.mini-card:hover{ border-color:color-mix(in srgb, var(--accent, var(--orange)) 45%, var(--border-strong)); background:rgba(255,255,255,0.08); }
.mini-card img{ width:38px; height:38px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.mini-card b{ display:block; font-size:13.5px; }
.mini-card span{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; }

@media (max-width:720px){
  .store-shell{ padding-top:44px; }
  .appd-head{ gap:14px; }
  .appd-icon{ width:60px; height:60px; border-radius:16px; }
  .appd-main{ grid-template-columns:1fr; }
  .appd-info{ order:-1; }
}