/* ===========================================================
   ElitePC — PC Builder + Catalog (builder.html) · DARK
   Carried over from elite-pc.com, restyled to the new theme.
   Reuses tokens + fonts from styles.css.
   =========================================================== */

.bld-hero{ padding-top:clamp(120px,16vh,180px); padding-bottom:clamp(18px,3vw,34px); }
.bld-hero .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.bld-hero .eyebrow::before{ content:""; width:26px; height:1px; background:var(--teal); }
.bld-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(42px,7.5vw,92px); line-height:.96; letter-spacing:-.01em; margin:0; }
.bld-hero h1 em{ font-style:italic; color:var(--teal); }
.bld-hero .lede{ margin-top:20px; max-width:54ch; color:var(--ink-soft); font-size:clamp(15px,1.6vw,18px); line-height:1.6; }

/* ---------- builder grid ---------- */
.bld-main{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(20px,2.6vw,38px); align-items:start; padding-bottom:clamp(50px,7vw,90px); }

.bld-card{ background:var(--glass); border:1px solid var(--line); border-radius:14px; backdrop-filter:blur(8px); }
.bld-card-h{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line); }
.bld-card-h h2{ font-family:var(--serif); font-weight:500; font-size:22px; margin:0; }
.bld-card-h .hint{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

/* part rows */
.part-list{ padding:6px 0; }
.part-row{ display:grid; grid-template-columns:46px 1fr auto; align-items:center; gap:14px; padding:13px 22px; border-bottom:1px solid var(--line-soft); transition:background .18s var(--ease); }
.part-row:last-child{ border-bottom:0; }
.part-row:hover{ background:rgba(255,255,255,.018); }
.part-ico{ width:46px; height:46px; border-radius:11px; border:1px solid var(--line); background:var(--bg-card);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--teal); }
.part-mid{ min-width:0; }
.part-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.part-sel{ width:100%; height:46px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.3);
  color:var(--ink); padding:0 12px; font-family:var(--sans); font-size:14px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); cursor:pointer; }
.part-sel:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-wash); }
.part-sel.set{ border-color:var(--teal-line); }
.part-price{ font-family:var(--mono); font-size:14px; color:var(--ink-faint); white-space:nowrap; min-width:64px; text-align:right; }
.part-price.set{ color:var(--teal); }

/* ---------- summary ---------- */
.bld-side{ position:sticky; top:84px; display:flex; flex-direction:column; gap:18px; }
.bc-rows{ padding:8px 0; max-height:230px; overflow:auto; }
.bc-row{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline; padding:9px 22px; font-size:13px; }
.bc-row .rl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.bc-row .rn{ color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-row .rv{ font-family:var(--mono); color:var(--ink); white-space:nowrap; }
.bc-empty{ color:var(--ink-faint); font-size:13px; padding:18px 22px; text-align:center; }
.bc-total{ display:flex; align-items:baseline; justify-content:space-between; padding:18px 22px; border-top:1px solid var(--line); }
.bc-total .t-l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.bc-total .t-v{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--teal); }
.bld-cta{ width:100%; height:52px; border:0; border-radius:11px; background:var(--teal); color:#04282b; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 14px 36px -16px var(--teal-glow); transition:all .2s var(--ease); margin:0 0 18px; }
.bld-cta:hover{ background:var(--teal-bright); box-shadow:0 18px 44px -14px var(--teal-glow); }
.bld-cta svg{ width:18px; height:18px; }
.bld-foot-note{ padding:0 22px 18px; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); line-height:1.5; text-align:center; }

/* ---------- FPS estimator ---------- */
.fps-tabs{ display:flex; gap:6px; padding:16px 22px 4px; }
.fps-tab{ flex:1; height:34px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; transition:all .18s var(--ease); }
.fps-tab:hover{ border-color:var(--teal-line); color:var(--ink); }
.fps-tab.active{ background:var(--teal); color:#04282b; border-color:var(--teal); font-weight:600; }
.fps-content{ padding:8px 22px 18px; }
.fps-res-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:6px 0 10px; }
.fps-empty{ color:var(--ink-faint); font-size:13px; padding:20px 0; text-align:center; }
.fps-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.fps-row:last-child{ border-bottom:0; }
.fps-game{ font-size:13.5px; color:var(--ink-soft); }
.fps-val{ font-family:var(--mono); font-size:18px; font-weight:600; }
.fps-val.hi{ color:#33C277; } .fps-val.md{ color:#E8C84B; } .fps-val.lo{ color:#E8853A; }
.fps-unit{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-left:5px; }

/* ---------- catalog ---------- */
.bld-cat{ padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px); border-top:1px solid var(--line); }
.bld-cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.bld-cat-head h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,46px); margin:0; line-height:1; }
.bld-cat-head p{ color:var(--ink-soft); margin:8px 0 0; font-size:14px; }
.cat-tools{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.cat-search{ position:relative; flex:1; min-width:220px; height:44px; }
.cat-search input{ width:100%; height:100%; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.25);
  padding:0 14px 0 40px; color:var(--ink); font-size:14px; font-family:var(--sans); }
.cat-search input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-wash); }
.cat-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-faint); }
.cat-sort{ height:44px; flex:0 0 auto; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.25);
  color:var(--ink); padding:0 36px 0 14px; font-family:var(--sans); font-size:14px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a8a8c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; }
.cat-sort:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-wash); }
.cat-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }

/* sub-bar: result count + out-of-stock toggle */
.cat-subbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.cat-oos{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; min-height:44px; padding:6px 0; }
.cat-oos input{ position:absolute; opacity:0; width:0; height:0; }
.cat-oos-track{ position:relative; width:40px; height:23px; border-radius:999px; background:rgba(255,255,255,.1);
  border:1px solid var(--line); transition:background .2s var(--ease), border-color .2s var(--ease); flex:0 0 auto; }
.cat-oos-knob{ position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--ink-soft);
  transition:transform .2s var(--ease), background .2s var(--ease); }
.cat-oos input:checked + .cat-oos-track{ background:var(--teal); border-color:var(--teal); }
.cat-oos input:checked + .cat-oos-track .cat-oos-knob{ transform:translateX(17px); background:#04282b; }
.cat-oos input:focus-visible + .cat-oos-track{ box-shadow:0 0 0 3px var(--teal-wash); }
.cat-oos-lbl{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.cat-chip{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--glass); color:var(--ink-soft); transition:all .18s var(--ease); }
.cat-chip:hover{ border-color:var(--teal-line); color:var(--ink); }
.cat-chip.active{ background:var(--teal); color:#04282b; border-color:var(--teal); font-weight:600; }

/* catalog as a tidy list (filters live as you type) */
.cat-list{ border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--bg-card); }
.cat-row{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line-soft); align-items:center; transition:background .15s var(--ease); }
.cat-row:last-child{ border-bottom:0; }
.cat-row:hover{ background:var(--glass); }
.cr-main{ min-width:0; }
.cr-desc{ font-family:var(--sans); font-size:15.5px; font-weight:500; color:var(--ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-meta{ display:flex; align-items:center; gap:9px; margin-top:4px; min-width:0; }
.cr-cat{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); border:1px solid var(--teal-line); border-radius:999px; padding:3px 8px; flex:0 0 auto; }
.cr-name{ font-family:var(--sans); font-size:11.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.01em; }
.cr-right{ text-align:right; flex:0 0 auto; white-space:nowrap; }
.cr-price{ font-family:var(--mono); font-size:15px; color:var(--teal); }
.cr-price .pre{ color:var(--ink-faint); font-size:9.5px; margin-right:4px; letter-spacing:.06em; }
.cr-stock{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
.cr-stock.low{ color:#E8C84B; } .cr-stock.out{ color:#F4868B; }
.cat-count{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.cat-more{ text-align:center; margin-top:22px; }

@media (max-width:920px){
  .bld-main{ grid-template-columns:1fr; }
  .bld-side{ position:static; }
}
@media (max-width:520px){
  .part-row{ grid-template-columns:38px 1fr auto; gap:10px 12px; padding:12px 16px; }
  .part-ico{ width:38px; height:38px; }
  .part-price{ font-size:13px; min-width:0; }
  .bld-card-h{ padding:15px 16px; }
  .part-list .part-row{ padding-left:16px; padding-right:16px; }
  /* swipeable category filter on phones */
  .cat-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:-2px; padding:2px 2px 6px; }
  .cat-chips::-webkit-scrollbar{ display:none; }
  .cat-chip{ flex:0 0 auto; }
  .cat-sort{ flex:1 1 100%; width:100%; }
  .cat-row{ padding:13px 14px; gap:12px; }
  .cr-desc{ font-size:15px; }
  .cr-name{ font-size:11px; }
  .cr-price{ font-size:14px; }
  .bld-hero{ padding-top:96px; }
}

/* 16px inputs prevent iOS auto-zoom on focus (native feel) */
.part-sel, .cat-search input, .cat-sort{ font-size:16px; }