/* ── PC Portables — Frontend CSS v2 ─────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400&display=swap');

:root {
  --pcp-bg:           #f7f7f5;
  --pcp-white:        #ffffff;
  --pcp-dark:         #111110;
  --pcp-mid:          #555550;
  --pcp-light:        #888884;
  --pcp-border:       #e8e8e4;
  --pcp-accent:       #1a56db;
  --pcp-accent-light: #eff4ff;
  --pcp-green:        #0e7c3a;
  --pcp-green-bg:     #ecfdf3;
  --pcp-orange:       #c05621;
  --pcp-badge:        #f0f0ec;
  --pcp-r:            12px;
  --pcp-rsm:          8px;
}
*{box-sizing:border-box;}

/* ── Page wrap ───────────────────────────────────────── */
.pcp-page-wrap,
.pcp-single-wrap,
.pcp-catalogue-wrap {
  font-family:'DM Sans',sans-serif;
  color:var(--pcp-dark);
  font-size:15px;
  line-height:1.5;
  background:var(--pcp-bg);
  padding:24px 0 56px;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.pcp-breadcrumb {
  max-width:1200px; margin:0 auto 20px; padding:0 24px;
  font-size:13px; color:var(--pcp-light);
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
}
.pcp-breadcrumb a { color:var(--pcp-mid); text-decoration:none; }
.pcp-breadcrumb a:hover { color:var(--pcp-accent); }
.pcp-breadcrumb span:last-child { color:var(--pcp-dark); font-weight:500; }

/* ══════════════════════════════════════════════════════
   SINGLE PRODUCT
══════════════════════════════════════════════════════ */
.pcp-single-wrap { max-width:1200px; margin:0 auto; padding:0 24px 56px; }

.pcp-top {
  display:grid; grid-template-columns:1fr 420px; gap:48px;
  background:var(--pcp-white); border-radius:var(--pcp-r);
  border:1px solid var(--pcp-border); padding:40px; margin-bottom:24px;
}

/* Gallery */
.pcp-gallery { display:flex; flex-direction:column; gap:12px; }
.pcp-main-img {
  background:var(--pcp-badge); border-radius:var(--pcp-rsm);
  aspect-ratio:4/3; display:flex; align-items:center;
  justify-content:center; overflow:hidden;
}
.pcp-main-img img { width:100%; height:100%; object-fit:contain; padding:24px; }
.pcp-img-placeholder { width:100%; height:240px; display:flex; align-items:center; justify-content:center; }
.pcp-img-placeholder svg { width:140px; opacity:.12; }
.pcp-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.pcp-thumb {
  width:72px; height:52px; background:var(--pcp-badge);
  border-radius:6px; border:2px solid transparent;
  cursor:pointer; overflow:hidden; transition:border-color .15s;
}
.pcp-thumb img { width:100%; height:100%; object-fit:cover; }
.pcp-thumb.active,.pcp-thumb:hover { border-color:var(--pcp-accent); }

/* Info panel */
.pcp-info { display:flex; flex-direction:column; gap:18px; }

.pcp-badges-row { display:flex; flex-wrap:wrap; gap:8px; }
.pcp-brand-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pcp-badge); border-radius:20px;
  padding:4px 12px; font-size:12px; font-weight:500; color:var(--pcp-mid);
}
.pcp-dot { width:6px; height:6px; border-radius:50%; background:var(--pcp-accent); flex-shrink:0; }
.pcp-cat-tag {
  display:inline-flex; align-items:center;
  background:var(--pcp-accent-light); border:1px solid #c7d7f8;
  color:var(--pcp-accent); border-radius:20px;
  padding:4px 12px; font-size:12px; font-weight:500;
}

.pcp-title { font-size:22px; font-weight:600; line-height:1.35; }

.pcp-ref-row {
  display:flex; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--pcp-light);
  font-family:'DM Mono',monospace;
}
.pcp-ref-row strong { color:var(--pcp-mid); }

.pcp-price-block {
  padding:18px; background:var(--pcp-accent-light);
  border-radius:var(--pcp-rsm); border:1px solid #c7d7f8;
}
.pcp-price { font-size:30px; font-weight:600; color:var(--pcp-accent); letter-spacing:-.5px; }
.pcp-price-old { font-size:15px; color:var(--pcp-light); text-decoration:line-through; margin-top:2px; }
.pcp-price-note { font-size:12px; color:var(--pcp-mid); margin-top:4px; }

.pcp-cta { display:flex; flex-direction:column; gap:10px; }
.pcp-btn-store {
  background:var(--pcp-accent); color:white; border-radius:var(--pcp-rsm);
  padding:13px 20px; font-size:15px; font-weight:500;
  text-decoration:none; display:flex; align-items:center;
  justify-content:center; gap:8px; transition:background .15s;
}
.pcp-btn-store:hover { background:#1648c0; color:white; }
.pcp-btn-store svg { width:18px; height:18px; }
.pcp-store-info {
  background:var(--pcp-green-bg); border:1px solid #a7f0c0;
  border-radius:var(--pcp-rsm); padding:12px 14px;
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:#14532d;
}
.pcp-store-info svg { width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--pcp-green); }

.pcp-repair {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--pcp-border); border-radius:var(--pcp-rsm);
}
.pcp-repair-score {
  width:38px; height:38px; border-radius:50%;
  background:#fff7ed; border:2px solid var(--pcp-orange);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--pcp-orange);
  font-family:'DM Mono',monospace; flex-shrink:0;
}
.pcp-repair-label { font-size:13px; color:var(--pcp-mid); line-height:1.4; }

/* Sections */
.pcp-key-specs,.pcp-description,.pcp-full-specs {
  background:var(--pcp-white); border:1px solid var(--pcp-border);
  border-radius:var(--pcp-r); padding:32px 40px; margin-bottom:24px;
}
.pcp-key-specs h2,.pcp-description h2,.pcp-full-specs h2 {
  font-size:16px; font-weight:600; margin-bottom:20px;
  display:flex; align-items:center; gap:8px;
}
.pcp-key-specs h2 span,.pcp-description h2 span,.pcp-full-specs h2 span {
  width:3px; height:16px; background:var(--pcp-accent);
  border-radius:2px; display:inline-block;
}
.pcp-specs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pcp-spec-card {
  background:var(--pcp-bg); border-radius:var(--pcp-rsm);
  padding:14px; border:1px solid var(--pcp-border);
}
.pcp-spec-icon { font-size:18px; margin-bottom:6px; }
.pcp-spec-label { font-size:11px; color:var(--pcp-light); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.pcp-spec-value { font-size:14px; font-weight:600; }
.pcp-spec-sub { font-size:11px; color:var(--pcp-mid); margin-top:2px; }
.pcp-desc-text { font-size:14px; color:var(--pcp-mid); line-height:1.8; }

.pcp-spec-section { margin-bottom:20px; }
.pcp-spec-section-title {
  font-size:11px; font-weight:600; color:var(--pcp-light);
  text-transform:uppercase; letter-spacing:.8px;
  padding-bottom:8px; border-bottom:1px solid var(--pcp-border);
}
.pcp-spec-row {
  display:grid; grid-template-columns:220px 1fr;
  padding:10px 0; border-bottom:1px solid var(--pcp-border); font-size:14px;
}
.pcp-spec-row:last-child { border-bottom:none; }
.pcp-sk { color:var(--pcp-light); }
.pcp-sv { font-weight:500; }

/* ══════════════════════════════════════════════════════
   CATALOGUE
══════════════════════════════════════════════════════ */
.pcp-catalogue-wrap { max-width:1400px; margin:0 auto; padding:0 24px 56px; }

.pcp-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
}
.pcp-cat-title { font-size:22px; font-weight:600; }
.pcp-result-count { font-size:13px; color:var(--pcp-light); margin-top:2px; }
.pcp-toolbar-right { display:flex; align-items:center; gap:10px; }
.pcp-sort-label { font-size:13px; color:var(--pcp-mid); }
.pcp-sort-select {
  border:1px solid var(--pcp-border); border-radius:6px;
  padding:7px 10px; font-family:'DM Sans',sans-serif;
  font-size:13px; background:var(--pcp-white); cursor:pointer;
}

.pcp-layout { display:grid; grid-template-columns:256px 1fr; gap:24px; align-items:start; }

/* Sidebar */
.pcp-filters {
  background:var(--pcp-white); border:1px solid var(--pcp-border);
  border-radius:var(--pcp-r); padding:18px 16px;
  position:sticky; top:20px; max-height:90vh; overflow-y:auto;
}
.pcp-filters-header {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:600; margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--pcp-border);
}
.pcp-reset-filters {
  background:none; border:none; font-size:12px;
  color:var(--pcp-accent); cursor:pointer; padding:0;
  font-family:'DM Sans',sans-serif;
}
.pcp-reset-filters:hover { text-decoration:underline; }
.pcp-filter-group { margin-bottom:18px; }
.pcp-filter-title {
  font-size:12px; font-weight:600; color:var(--pcp-dark);
  margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px;
}
.pcp-filter-opt {
  display:flex; align-items:center; gap:8px;
  padding:3px 0; font-size:13px; color:var(--pcp-mid); cursor:pointer;
}
.pcp-filter-opt:hover { color:var(--pcp-dark); }
.pcp-filter-opt input { accent-color:var(--pcp-accent); cursor:pointer; }
.pcp-price-range { display:flex; align-items:center; gap:6px; margin-top:8px; }
.pcp-price-range input {
  width:76px; border:1px solid var(--pcp-border); border-radius:6px;
  padding:6px 8px; font-size:13px; font-family:'DM Sans',sans-serif;
}
.pcp-price-range input:focus { outline:none; border-color:var(--pcp-accent); }

/* Cards */
.pcp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pcp-card {
  background:var(--pcp-white); border:1px solid var(--pcp-border);
  border-radius:var(--pcp-r); overflow:hidden; text-decoration:none;
  color:inherit; display:block; transition:box-shadow .15s,border-color .15s;
}
.pcp-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); border-color:#c8c8c4; }
.pcp-card-img {
  background:var(--pcp-badge); aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pcp-card-img img { width:100%; height:100%; object-fit:contain; padding:16px; }
.pcp-card-img svg { width:80px; opacity:.12; }
.pcp-card-body { padding:14px 16px; }
.pcp-card-meta { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.pcp-card-brand {
  font-size:11px; font-weight:600; color:var(--pcp-accent);
  text-transform:uppercase; letter-spacing:.5px;
}
.pcp-card-cat {
  background:var(--pcp-accent-light); color:var(--pcp-accent);
  border-radius:4px; padding:1px 7px; font-size:11px; font-weight:500;
}
.pcp-card-name { font-size:13px; font-weight:500; line-height:1.4; margin-bottom:10px; }
.pcp-card-specs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.pcp-card-specs span {
  background:var(--pcp-badge); border-radius:4px;
  padding:2px 7px; font-size:11px; color:var(--pcp-mid);
}
.pcp-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--pcp-border);
}
.pcp-card-price { font-size:16px; font-weight:600; }
.pcp-card-date { font-size:11px; color:var(--pcp-light); font-family:'DM Mono',monospace; }

/* Loader */
.pcp-loader { text-align:center; padding:28px; color:var(--pcp-light); font-size:13px; }
.pcp-loader-dots { display:inline-flex; gap:4px; margin-bottom:8px; }
.pcp-loader-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--pcp-light); animation:pcpBounce .8s infinite;
}
.pcp-loader-dots span:nth-child(2){animation-delay:.15s;}
.pcp-loader-dots span:nth-child(3){animation-delay:.3s;}
@keyframes pcpBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.pcp-no-results { text-align:center; padding:40px; color:var(--pcp-light); font-size:14px; }

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:1100px){ .pcp-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:900px){
  .pcp-top{grid-template-columns:1fr;}
  .pcp-layout{grid-template-columns:1fr;}
  .pcp-filters{position:static;max-height:none;}
  .pcp-specs-grid{grid-template-columns:repeat(2,1fr);}
  .pcp-spec-row{grid-template-columns:160px 1fr;}
  .pcp-key-specs,.pcp-description,.pcp-full-specs{padding:20px;}
  .pcp-top{padding:20px;}
}
@media(max-width:640px){
  .pcp-grid{grid-template-columns:1fr;}
  .pcp-specs-grid{grid-template-columns:1fr 1fr;}
}