/* ──────────────────────────────────────────────────
   detail.css — store_packet_page (Frame797) layout
   1576×~2550, flat material-style: nav-bg plates,
   12px radius, no outlines/shadows.
   ────────────────────────────────────────────────── */

.detail-view{
  max-width:1576px;
  margin:0 auto;
  padding:16px 24px 64px;
  display:flex; flex-direction:column;
  gap:12px;
}
.detail-empty-note{font-size:13px;color:var(--muted)}

/* ── header row ── */
.detail-header{
  display:flex; align-items:center;
  gap:26px;
  height:64px;
}
.detail-back{
  width:42px; height:64px;
  background:var(--nav);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#fff;
  transition:background .15s;
}
.detail-back:hover{ background:var(--plate); }
.detail-back svg{ width:14px; height:22px; }

.detail-header-bar{
  flex:1;
  height:64px;
  background:var(--nav);
  border-radius:12px;
  padding:6px 12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.detail-header-name{
  font-size:32px; font-weight:500; color:#fff;
  line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.detail-header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.detail-action-btn{
  height:52px;
  padding:12px 16px;
  border-radius:6px;
  background:var(--plate);
  color:#fff;
  font-size:24px; font-weight:500;
  line-height:1;
  white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.detail-action-btn:hover{ background:var(--plate-2); }
.detail-action-btn.muted{
  background:transparent;
  color:var(--muted2);
}
.detail-action-btn.muted:hover{ color:#fff; background:var(--plate); }
.detail-action-btn.wishlist{
  width:44px;height:44px;padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
.detail-action-btn.wishlist:hover{ background:rgba(255,255,255,.06);color:var(--text);border-color:rgba(255,255,255,.22); }
.detail-action-btn.wishlist.active{ color:var(--red);border-color:rgba(205,41,41,.45); }
.detail-action-btn.wishlist.active .heart-icon{ fill:currentColor; }
.detail-action-btn.wishlist svg{ width:20px; height:20px; }

/* ── main row (mini-info + carousel) ── */
.detail-row{
  display:grid;
  grid-template-columns:448px 1fr;
  gap:18px;
  align-items:stretch;
  min-height:733px;
}

.detail-left{
  background:var(--nav);
  border-radius:12px;
  padding:16px;
  display:flex; flex-direction:column;
  gap:12px;
}
.detail-cover-img{
  width:100%; aspect-ratio:1.78;
  border-radius:3px;
  background:linear-gradient(135deg,var(--plate),var(--plate-2));
  display:flex; align-items:center; justify-content:center;
  font-size:4rem;
}
.detail-short-desc{
  font-size:14px; color:#fff;
  line-height:1.2;
  max-width:60ch;
  text-wrap:pretty;
}

.detail-reviews{ display:flex; flex-direction:column; gap:6px; }
.detail-reviews-title{
  font-size:14px; color:#fff;
}
.detail-review-row{
  display:flex; align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  font-size:14px; color:#fff;
}
.detail-review-row .review-bar-wrap{ width:138px; height:23px; }
.detail-review-row .review-count{ font-size:14px; color:var(--muted2); }

/* meta rows: divider hairline, label left / value right */
.detail-meta-list{ display:flex; flex-direction:column; }
.detail-meta-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0;
  font-size:14px; color:#fff;
  border-bottom:1px solid var(--hairline);
}
.detail-meta-row:last-child{ border-bottom:none; }
.detail-meta-row .detail-meta-label{ color:#fff; }
.detail-meta-row .detail-meta-value{ color:#fff; text-align:right; }
.detail-meta-row .detail-meta-value a{ color:var(--text);text-decoration:underline;text-decoration-color:var(--muted2); }
.detail-meta-row .detail-meta-value a:hover{ text-decoration-color:var(--accent-soft); }
.detail-meta-row .detail-meta-value .os-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px;
  background:var(--plate);
  border-radius:2px;
  font-size:14px; color:#fff;
}
.detail-meta-row .detail-meta-value .os-pill .os-icon{
  width:14px; height:14px;
  color:var(--accent2);
}
.detail-meta-row .detail-meta-value .os-pill .os-icon svg{ width:14px; height:14px; }

.detail-tags-section{ display:flex; flex-direction:column; gap:16px; margin-top:6px; }
.detail-tags-label{ font-size:14px; color:#fff; }
.detail-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.detail-tag{
  display:inline-flex; align-items:center;
  height:30px;
  padding:6px 14px;
  background:var(--plate);
  border-radius:3px;
  font-size:13px; color:#fff;
  cursor:pointer;
  transition:background .15s;
}
.detail-tag:hover{ background:var(--plate-2); }
.detail-tag-add{
  width:30px; height:30px;
  padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}

/* ── carousel (right plate) ── */
.detail-carousel{
  background:var(--nav);
  border-radius:12px;
  padding:16px;
  display:flex; flex-direction:column;
  gap:20px;
}
.carousel-main{
  width:100%; aspect-ratio:1.99;
  border-radius:3px;
  background:linear-gradient(135deg,var(--plate),var(--plate-2));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.carousel-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:5rem;
}
.carousel-nav{
  display:flex; align-items:center;
  gap:16px;
}
.carousel-prev,
.carousel-next{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:22px;
  flex-shrink:0;
  background:none;
  transition:opacity .15s;
}
.carousel-prev:hover, .carousel-next:hover{ opacity:.7; }
.carousel-thumbs{
  display:flex; gap:7px;
  overflow-x:auto;
  flex:1;
  align-items:center;
}
.carousel-thumb{
  height:111px; aspect-ratio:1.79;
  border-radius:3px;
  flex-shrink:0;
  cursor:pointer;
  border:3px solid transparent;
  transition:border-color .15s, opacity .15s;
  background:linear-gradient(135deg,var(--plate),var(--plate-2));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  opacity:.7;
}
.carousel-thumb:hover{ opacity:1; }
.carousel-thumb.active{ border-color:var(--accent2); opacity:1; }

.carousel-dots{
  display:flex; gap:10px;
  justify-content:center; align-items:center;
}
.carousel-dot{
  width:35px; height:8px;
  border-radius:40px;
  background:var(--plate-2);
  transition:background .15s;
}
.carousel-dot.active{
  background:var(--accent2);
  width:23px;
}

/* ── install cmd + buy row (side-by-side) ── */
.detail-cmd-buy{
  display:grid;
  grid-template-columns:565px 1fr;
  gap:12px;
}
.detail-install-cmd{
  height:56px;
  background:var(--nav);
  border-radius:12px;
  padding:14px 16px;
  display:flex; align-items:center;
  gap:24px;
}
.detail-install-cmd-inner{
  flex:1;
  height:36px;
  background:var(--bg);
  border-radius:2px;
  padding:4px 6px;
  display:flex; align-items:center;
  overflow:hidden;
}
.detail-install-cmd code{
  color:var(--text);
  font-family:var(--font);
  font-size:24px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.detail-copy-btn{
  width:24px; height:24px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:opacity .15s;
}
.detail-copy-btn:hover{ opacity:.7; }
.detail-copy-btn img{ width:17px; height:20px; filter:brightness(0) invert(1); }

.detail-buy{
  height:56px;
  background:var(--nav);
  border-radius:12px;
  padding:7px 12px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.detail-buy-name { font-size:24px; font-weight:500; color:#fff; }
.detail-buy-right{ display:flex; align-items:center; gap:16px; }
.detail-buy-price{ font-size:18px; color:#fff; }
.detail-buy .add-cart-btn{
  width:116px; height:42px;
  background:var(--plate-2);
  border-radius:36px;
  font-size:16px; font-weight:500;
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.detail-buy .add-cart-btn:hover{ background:var(--plate-3); }

/* ── info grid: Features / Links / Languages / Achievements ── */
.detail-info-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.detail-info-card{
  background:var(--nav);
  border-radius:12px;
  padding:16px;
  min-height:331px;
  display:flex; flex-direction:column;
  gap:12px;
}
.detail-info-card h4{
  font-size:18px; font-weight:500; color:#fff;
  line-height:1;
}
.info-rows{ display:flex; flex-direction:column; gap:4px; }
.info-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  background:var(--plate);
  border-radius:2px;
  font-size:14px;
  color:var(--text);
}
.info-row .info-row-icon{
  width:18px; height:18px;
  flex-shrink:0;
  color:var(--muted);
}
.info-row.muted   { color:#fff; }

/* languages table */
.detail-lang-head{
  display:grid;
  grid-template-columns:1fr 70px 70px 70px;
  font-size:12px; color:var(--muted);
  text-align:center;
}
.detail-lang-head > :first-child { text-align:left; }
.detail-lang-row{
  display:grid;
  grid-template-columns:1fr 70px 70px 70px;
  align-items:center;
  padding:6px 0;
  font-size:14px; color:#fff;
  text-align:center;
  border-bottom:1px solid var(--hairline);
}
.detail-lang-row:last-child{ border-bottom:none; }
.detail-lang-row > :first-child { text-align:left; }
.detail-lang-check{ color:var(--green); }

.detail-lang-more{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

/* achievements grid */
.detail-achievements{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
}
.achv{
  aspect-ratio:1;
  background:linear-gradient(135deg,var(--plate),var(--plate-2));
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:var(--yellow);
}
.achv-more{
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:500; color:#fff;
  background:var(--plate);
  border-radius:2px;
}

/* ── DLCs ── */
.detail-dlcs{
  background:var(--nav);
  border-radius:12px;
  padding:12px;
  display:flex; flex-direction:column;
  gap:25px;
}
.detail-dlcs-title{
  padding:0 6px;
  font-size:18px; font-weight:500; color:#fff;
  line-height:1;
}
.dlc-row{
  display:flex; align-items:center; justify-content:space-between;
  height:58px;
  background:var(--plate);
  border-radius:6px;
  padding:8px 13px;
  gap:12px;
}
.dlc-row-name{
  font-size:20px; font-weight:500; color:#fff;
}
.dlc-row-cta{ display:flex; align-items:center; gap:12px; }
.dlc-discount{
  display:inline-flex; align-items:center; justify-content:center;
  width:81px; height:42px;
  padding:8px 12px;
  background:var(--accent); color:#fff;
  border-radius:2px;
  font-size:24px; font-weight:500;
}
.dlc-prices{
  display:flex; flex-direction:column;
  justify-content:space-between;
  height:42px;
  align-items:center;
}
.dlc-was{
  font-size:18px; font-weight:500;
  color:var(--muted2);
  text-decoration:line-through;
}
.dlc-now{
  font-size:18px; font-weight:500;
  color:var(--text);
}

/* ── system requirements + about ── */
.detail-sys-about{
  display:grid;
  grid-template-columns:556px 1fr;
  gap:12px;
  align-items:start;
}
.detail-sysreq{
  background:var(--nav);
  border-radius:12px;
  padding:12px;
  display:flex; flex-direction:column;
  gap:24px;
}
.sysreq-title{ font-size:18px; font-weight:500; color:#fff; }

.sysreq-tabs{
  display:flex; flex-wrap:wrap;
  gap:16px;
  justify-content:center; align-items:center;
}
.sysreq-tab{
  height:43px;
  padding:7px 20px;
  background:var(--plate);
  border-radius:4px;
  font-size:16px; color:#fff;
  display:inline-flex; align-items:center; gap:10px;
  transition:background .15s;
}
.sysreq-tab:hover { background:var(--plate-2); }
.sysreq-tab.active{
  background:var(--accent); color:#fff;
  border-radius:42px;
}
.sysreq-tab svg{ width:20px; height:20px; fill:#fff; }
.sysreq-distro-row{
  height:43px;
  padding:7px 20px;
  background:var(--plate);
  border-radius:4px;
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
}
.sysreq-distro-row-label{
  font-size:16px; color:#fff;
}
.sysreq-distro-row-icons{
  display:flex; gap:10px;
  font-family:var(--font-mono);
  color:#fff;
}
.sysreq-distro-row-icons span{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; }

.sysreq-android{
  height:43px;
  padding:7px 20px;
  background:var(--plate);
  border-radius:4px;
  display:inline-flex; align-items:center; gap:10px;
  font-size:16px; color:#fff;
}
.sysreq-android img{ width:20px; height:20px; }

.sysreq-blocks{
  display:flex; flex-direction:column;
  gap:18px;
}
.sysreq-block-title{ font-size:16px; color:var(--accent-soft); font-weight:500; }
.sysreq-block-list{
  display:flex; flex-direction:column;
  gap:8px;
  font-size:16px; color:#fff;
}
.sysreq-block-bullet{
  padding-left:14px;
  position:relative;
}
.sysreq-block-bullet::before{
  content:""; position:absolute; left:4px; top:.5em;
  width:4px; height:4px; border-radius:50%;
  background:#fff;
}
.sysreq-block-row{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:8px;
}
.sysreq-key{ color:var(--muted); font-weight:500; padding-left:14px; position:relative; }
.sysreq-key::before{
  content:""; position:absolute; left:4px; top:.5em;
  width:4px; height:4px; border-radius:50%;
  background:var(--muted);
}
.sysreq-val{ color:#fff; }

/* ── about ── */
.detail-about{
  background:var(--nav);
  border-radius:12px;
  padding:16px;
  display:flex; flex-direction:column; gap:18px;
}
.detail-about-title{ font-size:18px; font-weight:500; color:#fff; }
.detail-about-img{
  width:100%; aspect-ratio:1.62;
  border-radius:3px;
  background:linear-gradient(135deg,var(--plate),var(--plate-2));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
}
.detail-about-lead{
  font-size:16px; color:#fff;
  line-height:1.4;
}
.detail-about-section{
  display:flex; flex-direction:column; gap:10px;
}
.detail-about-section h3{
  font-size:18px; color:var(--accent-soft); font-weight:500;
}
.detail-about-section p{
  font-size:16px; color:#fff;
  line-height:1.4;
  max-width:80ch;
  text-wrap:pretty;
}

@media(max-width:1100px){
  .detail-row,
  .detail-cmd-buy,
  .detail-sys-about{ grid-template-columns:1fr; }
  .detail-info-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:700px){
  .detail-info-grid{ grid-template-columns:1fr; }
}