/* PC Trending page stylesheet: consulting.css */
/* =========================================================
   AI Consulting quick preset + selection summary fix - 2026-08-19
   - restores the missing component styles used by AIConsulting.php
   - keeps the preset controls readable on desktop/mobile
   ========================================================= */
.PcAiQuickPreset{
  padding:14px;
  border:1px solid #e6ebf2;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfcfe 0%,#f8faff 100%);
}

.PcAiQuickPresetHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}

.PcAiQuickPresetHead > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#354258;
  font-size:11px;
  font-weight:800;
}

.PcAiQuickPresetHead > span i{
  color:var(--tool-blue);
}

.PcAiQuickPresetHead > small{
  color:#98a2b1;
  font-size:9.5px;
  line-height:1.4;
  text-align:right;
}

.PcAiQuickPresetList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.PcAiPresetBtn{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:54px;
  margin:0;
  padding:9px 10px;
  border:1px solid #dfe6ef;
  border-radius:13px;
  background:#fff;
  color:#536176;
  font:inherit;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}

.PcAiPresetBtn > i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#f1f5fb;
  color:#72839b;
  font-size:14px;
  transition:background .16s ease,color .16s ease;
}

.PcAiPresetBtn > span{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.25;
}

.PcAiPresetBtn strong{
  overflow:hidden;
  color:#334056;
  font-size:10.5px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.PcAiPresetBtn small{
  overflow:hidden;
  margin-top:3px;
  color:#929dac;
  font-size:9px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.PcAiPresetBtn:hover{
  transform:translateY(-1px);
  border-color:#bed3f5;
  background:#fbfdff;
  box-shadow:0 6px 16px rgba(35,60,96,.06);
}

.PcAiPresetBtn:hover > i{
  background:#eaf2ff;
  color:var(--tool-blue);
}

.PcAiPresetBtn.active{
  border-color:#9fc1f7;
  background:#f2f7ff;
  box-shadow:0 0 0 2px rgba(20,109,245,.06);
}

.PcAiPresetBtn.active > i{
  background:#deebff;
  color:var(--tool-blue);
}

.PcAiPresetBtn.active strong{
  color:#0d5bd7;
}

.PcAiPresetBtn:focus-visible{
  outline:0;
  border-color:#6da4f7;
  box-shadow:0 0 0 3px rgba(20,109,245,.12);
}

.PcAiSelectionSummary{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:12px 13px;
  border:1px solid #e7ebf1;
  border-radius:13px;
  background:#fafbfd;
}

.PcAiSelectionSummaryIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:10px;
  background:#eef4fd;
  color:#6683aa;
  font-size:13px;
}

.PcAiSelectionSummary > div:last-child{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.PcAiSelectionSummary small{
  margin-bottom:2px;
  color:#929dac;
  font-size:9px;
  font-weight:700;
}

.PcAiSelectionSummary strong{
  color:#3c495d;
  font-size:10.5px;
  font-weight:800;
  line-height:1.5;
  overflow-wrap:anywhere;
}

@media (max-width:991.98px){
  .PcAiQuickPresetList{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .PcAiPresetBtn{
    grid-template-columns:30px minmax(0,1fr);
    gap:7px;
    min-height:52px;
    padding:8px;
  }

  .PcAiPresetBtn > i{
    width:30px;
    height:30px;
  }
}

@media (max-width:767.98px){
  .PcAiQuickPreset{
    padding:12px;
    border-radius:14px;
  }

  .PcAiQuickPresetHead{
    align-items:flex-start;
    margin-bottom:10px;
  }

  .PcAiQuickPresetHead > small{
    max-width:150px;
  }

  .PcAiQuickPresetList{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .PcAiPresetBtn{
    grid-template-columns:32px minmax(0,1fr);
    min-height:52px;
    padding:8px 9px;
  }

  .PcAiPresetBtn > i{
    width:32px;
    height:32px;
  }
}

@media (max-width:420px){
  .PcAiQuickPresetHead{
    display:block;
  }

  .PcAiQuickPresetHead > small{
    display:block;
    max-width:none;
    margin-top:4px;
    text-align:left;
  }

  .PcAiPresetBtn strong{
    font-size:10px;
  }

  .PcAiPresetBtn small{
    font-size:8.5px;
  }
}


/* =========================================================
   AI Consulting result / loading presentation - 2026-08-19
   - styles the server-rendered PcAiResult markup
   - keeps product images contained and result rows readable
   ========================================================= */
.ResultTark.has-result{
  min-height:0;
  text-align:left;
}

.ResultTark.is-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  border:1px dashed #dbe4f0;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfcfe 0%,#f7faff 100%);
}

.PcAiGenerating{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:500px;
  padding:48px 28px;
  text-align:center;
}

.PcAiGeneratingOrb{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  margin-bottom:20px;
  border:1px solid #d7e5fb;
  border-radius:24px;
  background:#fff;
  color:#146df5;
  font-size:28px;
  box-shadow:0 14px 34px rgba(42,88,156,.10);
}

.PcAiGeneratingOrb span{
  position:absolute;
  inset:-7px;
  border:1px solid rgba(20,109,245,.18);
  border-radius:29px;
  animation:PcAiPulse 1.45s ease-in-out infinite;
}

.PcAiGeneratingEyebrow{
  margin-bottom:8px;
  color:#146df5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
}

.PcAiGenerating > strong{
  color:#27354a;
  font-size:16px;
  font-weight:850;
  line-height:1.5;
}

.PcAiGenerating > p{
  max-width:410px;
  margin:8px 0 0;
  color:#8490a1;
  font-size:11px;
  line-height:1.7;
}

.PcAiGeneratingSteps{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}

.PcAiGeneratingSteps span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 9px;
  border:1px solid #e5eaf1;
  border-radius:999px;
  background:#fff;
  color:#98a2b1;
  font-size:9px;
  font-weight:800;
}

.PcAiGeneratingSteps span.active{
  border-color:#c9dcfa;
  background:#eef5ff;
  color:#146df5;
}

@keyframes PcAiPulse{
  0%,100%{opacity:.35;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}

.PcAiResult{
  width:100%;
  color:#344156;
}

.PcAiResultHero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:18px;
  padding:22px;
  border:1px solid #dfe8f5;
  border-radius:19px;
  background:radial-gradient(circle at 92% 12%,rgba(20,109,245,.11),transparent 28%),linear-gradient(135deg,#fff 0%,#f8fbff 100%);
}

.PcAiResultHeroCopy{
  min-width:0;
}

.PcAiResultEyebrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
  color:#146df5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.PcAiResultHero h3{
  margin:0;
  color:#1f2c40;
  font-size:22px;
  font-weight:850;
  line-height:1.35;
  letter-spacing:-.025em;
}

.PcAiResultConditions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
}

.PcAiResultConditions span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid #e2e9f2;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#68768a;
  font-size:9px;
  font-weight:750;
}

.PcAiResultConditions i{
  color:#7597c9;
}

.PcAiResultTotal{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  min-width:190px;
  padding:15px 17px;
  border:1px solid #dfe7f2;
  border-radius:16px;
  background:rgba(255,255,255,.90);
  text-align:right;
}

.PcAiResultTotal > small{
  color:#8d98a8;
  font-size:9px;
  font-weight:750;
}

.PcAiResultTotal > strong{
  margin-top:3px;
  color:#1462d8;
  font-size:24px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.025em;
}

.PcAiResultTotal > strong em{
  margin-left:2px;
  color:#718096;
  font-size:10px;
  font-style:normal;
  font-weight:800;
}

.PcAiBudgetDelta,
.PcAiVerified{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:7px;
  padding:5px 7px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:800;
}

.PcAiBudgetDelta.is-under{
  background:#edf9f4;
  color:#188267;
}

.PcAiBudgetDelta.is-over{
  background:#fff1f1;
  color:#c85d5d;
}

.PcAiBudgetDelta.is-neutral{
  background:#f2f5f9;
  color:#68768a;
}

.PcAiVerified{
  background:#edf4ff;
  color:#537fbf;
}

.PcAiResultSummary{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  margin-top:15px;
  padding:15px 16px;
  border:1px solid #e6ebf2;
  border-radius:15px;
  background:#fafbfd;
}

.PcAiResultSummary > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#fff6dd;
  color:#bd8a22;
  font-size:16px;
}

.PcAiResultSummary strong{
  display:block;
  margin-bottom:4px;
  color:#344156;
  font-size:10.5px;
  font-weight:850;
}

.PcAiResultSummary p{
  margin:0;
  color:#697689;
  font-size:10.5px;
  line-height:1.7;
}

.PcAiResultSectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:24px 0 11px;
}

.PcAiResultSectionHead span{
  display:block;
  margin-bottom:3px;
  color:#8794a6;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
}

.PcAiResultSectionHead h4{
  margin:0;
  color:#28364b;
  font-size:15px;
  font-weight:850;
}

.PcAiResultSectionHead > small{
  color:#98a2b1;
  font-size:8.5px;
  text-align:right;
}

.PcAiPartList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.PcAiPartRow{
  display:grid;
  grid-template-columns:28px 68px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:11px 12px;
  border:1px solid #e5eaf1;
  border-radius:15px;
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.PcAiPartRow:hover{
  transform:translateY(-1px);
  border-color:#cfdcf0;
  box-shadow:0 8px 22px rgba(31,50,80,.055);
}

.PcAiPartIndex{
  color:#a0a9b7;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
}

.PcAiPartIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  border:1px solid #edf0f4;
  border-radius:12px;
  background:linear-gradient(180deg,#fbfcfd,#f7f9fb);
  color:#8ba0bd;
  font-size:20px;
  overflow:hidden;
}

.PcAiPartThumb{
  position:relative;
}

.PcAiPartThumb > i{
  position:absolute;
  z-index:0;
  opacity:.28;
}

.PcAiPartThumb img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  padding:6px;
  object-fit:contain;
  background:#fff;
}

.PcAiPartMain{
  min-width:0;
}

.PcAiPartType{
  margin-bottom:4px;
  color:#8c98a8;
  font-size:8.5px;
  font-weight:800;
}

.PcAiPartName{
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  color:#285faa;
  font-size:10.5px;
  font-weight:850;
  line-height:1.45;
  text-decoration:none;
}

.PcAiPartName:hover{
  color:#0e62df;
  text-decoration:underline;
  text-underline-offset:2px;
}

.PcAiPartName i{
  flex:0 0 auto;
  font-size:9px;
}

.PcAiPartMain p{
  margin:5px 0 0;
  color:#7b8797;
  font-size:9px;
  line-height:1.55;
}

.PcAiPartMeta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  min-width:92px;
  text-align:right;
}

.PcAiTrendBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border-radius:999px;
  background:#eef8f4;
  color:#27816b;
  font-size:7.5px;
  font-weight:800;
  white-space:nowrap;
}

.PcAiPartMeta > strong{
  color:#26374e;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.PcAiPartMeta > strong em{
  margin-left:2px;
  color:#8793a4;
  font-size:8px;
  font-style:normal;
  font-weight:750;
}

.PcAiResultNotice{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:11px;
  margin-top:15px;
  padding:14px 15px;
  border:1px solid #eee3c8;
  border-radius:14px;
  background:#fffaf0;
}

.PcAiResultNoticeIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#fff1cc;
  color:#ad7b18;
}

.PcAiResultNotice strong{
  color:#574a2f;
  font-size:10px;
  font-weight:850;
}

.PcAiResultNotice p{
  margin:4px 0 0;
  color:#766a50;
  font-size:9.5px;
  line-height:1.65;
}

.PcAiResultFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  padding:14px 15px;
  border:1px solid #e5eaf1;
  border-radius:14px;
  background:#fafbfd;
}

.PcAiResultFooter > div{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.PcAiResultFooter > div > i{
  color:#6e8eb9;
  font-size:17px;
}

.PcAiResultFooter > div span{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.PcAiResultFooter strong{
  color:#415069;
  font-size:9.5px;
  font-weight:850;
}

.PcAiResultFooter small{
  margin-top:2px;
  color:#929cab;
  font-size:8px;
}

.PcAiCompatLink{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:8px 10px;
  border:1px solid #d7e3f5;
  border-radius:10px;
  background:#fff;
  color:#416da9;
  font-size:9px;
  font-weight:850;
  text-decoration:none;
}

.PcAiCompatLink:hover{
  border-color:#bdd2f2;
  background:#f8fbff;
  color:#146df5;
}

.PcAiResultDisclaimer{
  margin:9px 2px 0;
  color:#a0a9b6;
  font-size:8px;
  line-height:1.6;
}

.ResultTark.has-error{
  min-height:0;
}

.ResultTark.has-error .alert{
  margin:0;
  border-radius:14px;
  font-size:11px;
  line-height:1.6;
}

@media (max-width:1199.98px){
  .PcAiResultHero{
    grid-template-columns:1fr;
  }

  .PcAiResultTotal{
    align-items:flex-start;
    min-width:0;
    text-align:left;
  }

  .PcAiPartRow{
    grid-template-columns:24px 60px minmax(0,1fr);
  }

  .PcAiPartIcon{
    width:60px;
    height:60px;
  }

  .PcAiPartMeta{
    grid-column:3;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    min-width:0;
    width:100%;
    padding-top:4px;
    text-align:left;
  }
}

@media (max-width:767.98px){
  .ResultTark.is-loading{
    min-height:320px;
  }

  .PcAiGenerating{
    padding:36px 18px;
  }

  .PcAiResultHero{
    padding:17px;
    border-radius:16px;
  }

  .PcAiResultHero h3{
    font-size:19px;
  }

  .PcAiResultConditions{
    gap:5px;
  }

  .PcAiResultConditions span{
    font-size:8.5px;
  }

  .PcAiResultTotal > strong{
    font-size:21px;
  }

  .PcAiResultSectionHead{
    align-items:flex-start;
  }

  .PcAiResultSectionHead > small{
    display:none;
  }

  .PcAiPartRow{
    grid-template-columns:20px 54px minmax(0,1fr);
    gap:9px;
    padding:10px;
    border-radius:13px;
  }

  .PcAiPartIcon{
    width:54px;
    height:54px;
    border-radius:10px;
  }

  .PcAiPartName{
    font-size:10px;
  }

  .PcAiPartMain p{
    font-size:8.5px;
  }

  .PcAiPartMeta{
    gap:6px;
    flex-wrap:wrap;
  }

  .PcAiResultFooter{
    align-items:flex-start;
    flex-direction:column;
  }

  .PcAiCompatLink{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:420px){
  .PcAiResultSummary{
    grid-template-columns:32px minmax(0,1fr);
    padding:13px;
  }

  .PcAiResultSummary > span{
    width:32px;
    height:32px;
  }

  .PcAiPartIndex{
    display:none;
  }

  .PcAiPartRow{
    grid-template-columns:50px minmax(0,1fr);
  }

  .PcAiPartIcon{
    width:50px;
    height:50px;
  }

  .PcAiPartMeta{
    grid-column:2;
  }
}

/* =========================================================
   AI Compatibility - premium part picker / selected cards
   2026-08-19
   ========================================================= */
.PcCompatOffcanvas{
  --picker-ink:#1f2b3d;
  --picker-muted:#7f8b9c;
  --picker-line:#e5eaf1;
  --picker-soft:#f7f9fc;
  --picker-blue:#146df5;
  --picker-blue-soft:#edf5ff;
  width:min(780px,94vw)!important;
  border:0!important;
  background:#f7f9fc;
  box-shadow:26px 0 70px rgba(22,38,62,.18)!important;
}

.PcCompatOffcanvas .offcanvas-body{
  min-height:0;
  background:#f7f9fc;
}

.PcCompatOffcanvasHead{
  min-height:88px;
  padding:17px 20px 16px!important;
  border-bottom:1px solid var(--picker-line)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 5px 18px rgba(26,42,67,.035);
}

.PcCompatPickerTitle{
  min-width:0;
}

.PcCompatPickerTitle .PcToolStep{
  color:#7f8fa5;
}

.PcCompatPickerTitle h5{
  margin:2px 0 2px!important;
  color:var(--picker-ink)!important;
  font-size:19px!important;
  font-weight:850!important;
  letter-spacing:-.025em;
}

.PcCompatPickerTitle small{
  display:block;
  color:#9aa4b2;
  font-size:10px;
  line-height:1.45;
}

.PcCompatPickerCategory{
  color:#53647b;
  font-weight:800;
}

.PcCompatCount{
  display:grid!important;
  grid-template-columns:auto auto auto;
  align-items:baseline;
  gap:3px;
  margin-left:auto!important;
  padding:7px 10px!important;
  border:1px solid #e5eaf1;
  border-radius:11px!important;
  background:#f8fafc!important;
  color:#8a95a4!important;
  white-space:nowrap;
  box-shadow:none;
}

.PcCompatCount span{
  margin-right:3px;
  font-size:9px;
  font-weight:700;
}

.PcCompatCount strong{
  color:#26364d;
  font-size:13px;
  font-weight:900;
}

.PcCompatCount em{
  color:#929cab;
  font-size:9px;
  font-style:normal;
  font-weight:700;
}

.PcCompatClose{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #e3e8ef;
  border-radius:11px;
  background:#fff;
  color:#7c899b;
  font-size:14px;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}

.PcCompatClose:hover{
  transform:translateY(-1px);
  border-color:#cfd8e5;
  background:#f8fafc;
  color:#26364c;
}

.PcCompatSearch{
  padding:15px 18px 12px!important;
  border-bottom:1px solid #e6ebf2!important;
  background:rgba(248,250,253,.96)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.PcCompatSearchBox{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 34px auto;
  align-items:center;
  min-height:48px;
  overflow:hidden;
  border:1px solid #dce4ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 16px rgba(31,48,73,.035);
  transition:border-color .16s ease,box-shadow .16s ease;
}

.PcCompatSearchBox:focus-within{
  border-color:#a9c9f8;
  box-shadow:0 0 0 3px rgba(20,109,245,.07),0 7px 18px rgba(31,48,73,.045);
}

.PcCompatSearchIcon{
  justify-self:center;
  color:#8b98aa;
  font-size:14px;
}

.PcCompatSearch .keyword{
  min-width:0;
  min-height:46px!important;
  padding:0 8px 0 0!important;
  border:0!important;
  background:transparent!important;
  color:#28364b;
  font-size:12px!important;
  box-shadow:none!important;
}

.PcCompatSearch .keyword::placeholder{
  color:#abb4c1;
}

.PcCompatSearchReset,
.PcCompatSearchSubmit{
  border:0;
  font:inherit;
}

.PcCompatSearchReset{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border-radius:9px;
  background:transparent;
  color:#a0aab7;
  font-size:12px;
  opacity:.45;
  pointer-events:none;
  transition:.15s ease;
}

.PcCompatSearchBox.has-value .PcCompatSearchReset{
  opacity:1;
  pointer-events:auto;
}

.PcCompatSearchReset:hover{
  background:#f2f5f9;
  color:#62728a;
}

.PcCompatSearchSubmit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  align-self:stretch;
  min-width:78px;
  margin:4px;
  padding:0 13px;
  border-radius:10px;
  background:#1a6fea;
  color:#fff;
  font-size:10px;
  font-weight:850;
  transition:background .16s ease,transform .16s ease;
}

.PcCompatSearchSubmit:hover{
  background:#0d61d8;
}

.PcCompatSearchSubmit i{
  font-size:10px;
}

.PcCompatPickerHint{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:8px;
  padding:0 2px;
  color:#8c97a6;
  font-size:9.5px;
  line-height:1.5;
}

.PcCompatPickerHint i{
  margin-top:1px;
  color:#8fa6c7;
}

.PcCompatPickerHint strong{
  color:#63758d;
}

.PcCompatPickerList{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px 22px;
}

.PcCompatPickerItem{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  min-width:0;
  overflow:hidden;
  border:1px solid #e2e8ef;
  border-radius:17px;
  background:#fff;
  box-shadow:0 5px 18px rgba(28,44,68,.035);
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease;
}

.PcCompatPickerItem:hover{
  transform:translateY(-1px);
  border-color:#cbd8e9;
  box-shadow:0 10px 26px rgba(28,44,68,.065);
}

.PcCompatPickerItem.is-selected{
  border-color:#c8dbf8;
  background:linear-gradient(135deg,#fff 0%,#fbfdff 100%);
}

.PcCompatPickerMedia{
  min-width:0;
  padding:13px;
  border-right:1px solid #edf0f4;
  background:linear-gradient(180deg,#fbfcfe,#f7f9fc);
}

.PcCompatPickerImageBtn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:106px;
  padding:8px;
  overflow:hidden;
  border:0;
  border-radius:13px;
  background:#fff;
  cursor:pointer;
}

.PcCompatPickerImageBtn img{
  display:block;
  max-width:100%;
  max-height:104px;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .2s ease;
}

.PcCompatPickerImageBtn:hover img{
  transform:scale(1.035);
}

.PcCompatPickerZoom{
  position:absolute;
  right:6px;
  bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  border:1px solid #e4e9f0;
  border-radius:8px;
  background:rgba(255,255,255,.94);
  color:#8492a5;
  font-size:9px;
  box-shadow:0 3px 10px rgba(30,46,68,.05);
}

.PcCompatPickerContent{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:14px 15px 13px;
}

.PcCompatPickerTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:22px;
  margin-bottom:4px;
}

.PcCompatPickerType,
.PcCompatPickerSelectedBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  padding:4px 7px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:850;
  line-height:1;
}

.PcCompatPickerType{
  background:#f2f5f9;
  color:#77869a;
}

.PcCompatPickerSelectedBadge{
  background:#eaf6f1;
  color:#138161;
}

.PcCompatPickerContent h3{
  margin:2px 0 6px;
  color:#26354a;
  font-size:13px;
  font-weight:850;
  line-height:1.45;
  letter-spacing:-.018em;
}

.PcCompatPickerSpec{
  display:-webkit-box;
  min-height:32px;
  margin:0;
  overflow:hidden;
  color:#7a8798!important;
  font-size:10px!important;
  line-height:1.55;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.PcCompatPickerBottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:10px;
}

.PcCompatPickerPrice{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.PcCompatPickerPrice small{
  margin-bottom:2px;
  color:#a0a9b5;
  font-size:8.5px;
  font-weight:700;
}

.PcCompatPickerPrice strong{
  color:#e05555;
  font-size:13px;
  font-weight:900;
  line-height:1.25;
}

.PcCompatPickerPrice strong.is-empty{
  color:#9aa4b1;
  font-size:10px;
}

.PcCompatPickerActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.PcCompatPickerDetailBtn,
.PcCompatPickerSelectBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font:inherit;
  font-size:9.5px;
  font-weight:850;
  transition:.16s ease;
}

.PcCompatPickerDetailBtn{
  border:1px solid #e0e6ee;
  background:#fff;
  color:#6f7d90;
}

.PcCompatPickerDetailBtn:hover{
  border-color:#cbd7e6;
  background:#f8fafc;
  color:#40516a;
}

.PcCompatPickerSelectBtn{
  min-width:84px;
  border:1px solid #176ee8;
  background:#176ee8;
  color:#fff;
  box-shadow:0 6px 14px rgba(20,109,245,.13);
}

.PcCompatPickerSelectBtn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:#0c60d4;
  background:#0c60d4;
}

.PcCompatPickerSelectBtn:disabled{
  border-color:#dce5ef;
  background:#eff4f8;
  color:#7f92a7;
  box-shadow:none;
  cursor:default;
}

.PcCompatPickerLoading,
.PcCompatPickerEmpty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:250px;
  padding:30px 20px;
  text-align:center;
}

.PcCompatPickerSpinner{
  width:28px;
  height:28px;
  margin-bottom:13px;
  border:3px solid #dbe7f7;
  border-top-color:#3779da;
  border-radius:50%;
  animation:pcCompatSpin .7s linear infinite;
}

@keyframes pcCompatSpin{to{transform:rotate(360deg)}}

.PcCompatPickerLoading strong,
.PcCompatPickerEmpty strong{
  color:#3d4b60;
  font-size:12px;
  font-weight:850;
}

.PcCompatPickerLoading small,
.PcCompatPickerEmpty small{
  margin-top:5px;
  color:#939eac;
  font-size:10px;
  line-height:1.55;
}

.PcCompatPickerEmptyIcon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin-bottom:12px;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:#fff;
  color:#8595aa;
  font-size:18px;
  box-shadow:0 6px 18px rgba(30,45,68,.045);
}

.PcCompatPickerEmpty.is-error .PcCompatPickerEmptyIcon{
  background:#fff8f8;
  color:#d86464;
}

.PcCompatPickerEnd{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 0 2px;
  color:#a0a9b5;
  font-size:9px;
  font-weight:700;
}

.PcCompatPickerEnd i{
  color:#7f9ec8;
}

/* selected product card shown under each category */
.PcCompatSelected:not(:empty){
  padding:0 11px 11px!important;
}

.PcCompatChosenItem{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #dfe7f1;
  border-radius:14px;
  background:#f9fbfd;
}

.PcCompatChosenMedia{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  padding:10px;
  border-right:1px solid #e7ecf2;
  background:#fff;
}

.PcCompatChosenMedia img{
  display:block;
  max-width:100%;
  max-height:72px;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.PcCompatChosenBody{
  min-width:0;
  padding:10px 11px;
}

.PcCompatChosenHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:24px;
  margin-bottom:2px;
}

.PcCompatChosenLabel{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#14815f;
  font-size:8.5px;
  font-weight:850;
}

.PcCompatChosenRemove{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#9ba5b2;
  font-size:10px;
  transition:.15s ease;
}

.PcCompatChosenRemove:hover{
  background:#fff0f0;
  color:#cf5151;
}

.PcCompatChosenName{
  display:block;
  margin:0 0 4px;
  color:#334157;
  font-size:11px;
  font-weight:850;
  line-height:1.45;
}

.PcCompatChosenSpec{
  margin:0!important;
  color:#7b8797!important;
  font-size:9.5px!important;
  line-height:1.5;
}

.PcCompatChosenSpec .ToggleStuffPerfor.short{
  display:-webkit-box;
  max-height:none!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.PcCompatChosenMore{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:4px;
  padding:0;
  border:0;
  background:transparent;
  color:#6f83a0;
  font:inherit;
  font-size:8.5px;
  font-weight:800;
}

.PcCompatChosenMore:hover{
  color:#176ee8;
}

.PcCompatChosenPrice{
  margin-top:6px!important;
  color:#d95757!important;
  font-size:10.5px!important;
  font-weight:850;
}

@media (max-width:767.98px){
  .PcCompatOffcanvas{
    width:100vw!important;
  }

  .PcCompatOffcanvasHead{
    min-height:78px;
    padding:13px 14px!important;
  }

  .PcCompatPickerTitle h5{
    font-size:17px!important;
  }

  .PcCompatPickerTitle small{
    display:none;
  }

  .PcCompatCount span{
    display:none;
  }

  .PcCompatSearch{
    padding:11px 12px 9px!important;
  }

  .PcCompatSearchSubmit{
    min-width:66px;
    padding:0 10px;
  }

  .PcCompatPickerHint{
    display:none;
  }

  .PcCompatPickerList{
    gap:8px;
    padding:10px 11px 18px;
  }

  .PcCompatPickerItem{
    grid-template-columns:104px minmax(0,1fr);
    border-radius:15px;
  }

  .PcCompatPickerMedia{
    padding:9px;
  }

  .PcCompatPickerImageBtn{
    min-height:102px;
    padding:6px;
  }

  .PcCompatPickerImageBtn img{
    max-height:88px;
  }

  .PcCompatPickerContent{
    padding:11px 10px;
  }

  .PcCompatPickerContent h3{
    margin-bottom:5px;
    font-size:11px;
  }

  .PcCompatPickerSpec{
    min-height:29px;
    font-size:9px!important;
  }

  .PcCompatPickerBottom{
    align-items:center;
    gap:8px;
    padding-top:7px;
  }

  .PcCompatPickerPrice small{
    display:none;
  }

  .PcCompatPickerPrice strong{
    font-size:11px;
  }

  .PcCompatPickerDetailBtn{
    width:32px;
    min-width:32px;
    padding:0;
  }

  .PcCompatPickerDetailBtn span{
    display:none;
  }

  .PcCompatPickerSelectBtn{
    min-width:70px;
    min-height:32px;
    padding:0 8px;
    font-size:9px;
  }
}

@media (max-width:430px){
  .PcCompatOffcanvasHead{
    gap:8px!important;
  }

  .PcCompatCount{
    padding:6px 8px!important;
  }

  .PcCompatClose{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .PcCompatSearchBox{
    grid-template-columns:34px minmax(0,1fr) 30px 58px;
  }

  .PcCompatSearchSubmit{
    min-width:50px;
    padding:0 8px;
  }

  .PcCompatSearchSubmit span{
    display:none;
  }

  .PcCompatPickerItem{
    grid-template-columns:88px minmax(0,1fr);
  }

  .PcCompatPickerImageBtn{
    min-height:96px;
  }

  .PcCompatPickerImageBtn img{
    max-height:78px;
  }

  .PcCompatPickerType{
    max-width:90px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .PcCompatPickerSelectedBadge{
    font-size:8px;
  }

  .PcCompatPickerContent h3{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .PcCompatPickerSpec{
    -webkit-line-clamp:1;
    min-height:15px;
  }

  .PcCompatPickerBottom{
    flex-wrap:wrap;
  }

  .PcCompatPickerActions{
    margin-left:auto;
  }

  .PcCompatChosenItem{
    grid-template-columns:72px minmax(0,1fr);
  }

  .PcCompatChosenMedia{
    min-height:80px;
    padding:8px;
  }

  .PcCompatChosenMedia img{
    max-height:60px;
  }
}