/* Products + portfolio catalogues. Same dark theme as the product pages. */
body.page-products,
body.page-portfolio{background:#000}

.pc[data-pc=products],
.pc[data-pc=portfolio]{
  --ink:#e7edf5;--ink2:#c3c9d1;--mute:#9aa6b4;--line:rgba(219,229,242,.16);--mist:#000;--paper:#000;--blue:#52a8ff;
  background:#000;color:#e7edf5;
}
.pc[data-pc=products] h1,
.pc[data-pc=products] h2,
.pc[data-pc=products] h3,
.pc[data-pc=products] .pc-card__a b,
.pc[data-pc=products] .pc-path b,
.pc[data-pc=portfolio] h1,
.pc[data-pc=portfolio] h2,
.pc[data-pc=portfolio] h3,
.pc[data-pc=portfolio] .pc-card__a b,
.pc[data-pc=portfolio] .pc-path b{color:#fff}
.pc[data-pc=products] .we2-lead,
.pc[data-pc=products] .we2-sub,
.pc[data-pc=products] .we2-head__p,
.pc[data-pc=products] .pc-card__s,
.pc[data-pc=products] .pc-path span,
.pc[data-pc=products] .pc-find__res p,
.pc[data-pc=products] .ec-final p,
.pc[data-pc=portfolio] .we2-lead,
.pc[data-pc=portfolio] .we2-sub,
.pc[data-pc=portfolio] .we2-head__p,
.pc[data-pc=portfolio] .pc-card__s,
.pc[data-pc=portfolio] .pc-path span,
.pc[data-pc=portfolio] .pc-find__res p,
.pc[data-pc=portfolio] .ec-final p{color:#c3c9d1;font-size:16px;line-height:1.5}
.pc[data-pc=products] .we2-eyebrow,
.pc[data-pc=products] .pc-card__k,
.pc[data-pc=products] .pc-find__k,
.pc[data-pc=portfolio] .we2-eyebrow,
.pc[data-pc=portfolio] .pc-card__k,
.pc[data-pc=portfolio] .pc-find__k{color:#52a8ff}
.pc[data-pc=products] .ec-hero,
.pc[data-pc=products] .we2-sec,
.pc[data-pc=products] .we2-sec--mist,
.pc[data-pc=products] .ec-final,
.pc[data-pc=portfolio] .ec-hero,
.pc[data-pc=portfolio] .we2-sec,
.pc[data-pc=portfolio] .we2-sec--mist,
.pc[data-pc=portfolio] .ec-final{background:#000;border-color:rgba(219,229,242,.16)}
/* Kill ecommerce full-viewport section stretching (causes huge blanks). */
.pc[data-pc=products] .we2-sec,
.pc[data-pc=products] .we2-sec--mist,
.pc[data-pc=products] .ec-final,
.pc[data-pc=portfolio] .we2-sec,
.pc[data-pc=portfolio] .we2-sec--mist,
.pc[data-pc=portfolio] .ec-final{
  min-height:0 !important;
  display:block;
  align-content:start;
}
.pc[data-pc=products] #catalogue,
.pc[data-pc=portfolio] #work{min-height:0}
.pc[data-pc=portfolio] #work{
  padding-block:clamp(28px,4vh,40px);
}
.pc[data-pc=portfolio] .we2-sec:not(.we2-sec--mist),
.pc[data-pc=portfolio] .ec-final{
  padding-block:clamp(24px,3.2vh,36px);
}
.pc[data-pc=products] .we2-btn--primary,
.pc[data-pc=portfolio] .we2-btn--primary{background:#fff;border-color:#fff;color:#121212}
.pc[data-pc=products] .we2-btn--primary:hover,
.pc[data-pc=portfolio] .we2-btn--primary:hover{background:#ededed;color:#121212}
.pc[data-pc=products] .we2-btn--ghost,
.pc[data-pc=products] .we2-btn--ghost-l,
.pc[data-pc=portfolio] .we2-btn--ghost,
.pc[data-pc=portfolio] .we2-btn--ghost-l{border-color:rgba(219,229,242,.16);color:#ededed;background:transparent}
.pc[data-pc=products] .we2-btn--ghost:hover,
.pc[data-pc=products] .we2-btn--ghost-l:hover,
.pc[data-pc=portfolio] .we2-btn--ghost:hover,
.pc[data-pc=portfolio] .we2-btn--ghost-l:hover{background:#ededed;border-color:#ededed;color:#121212}
.pc[data-pc=products] .ec-demo,
.pc[data-pc=portfolio] .ec-demo{background:#05080d;border:1px solid rgba(219,229,242,.16);box-shadow:none}
.pc[data-pc=products] .ec-demo__bar,
.pc[data-pc=portfolio] .ec-demo__bar{background:#101826;border-bottom:1px solid rgba(219,229,242,.16)}
.pc[data-pc=products] .ec-demo__bar>i,
.pc[data-pc=portfolio] .ec-demo__bar>i{background:#3a4a62}
.pc[data-pc=products] .ec-demo__url,
.pc[data-pc=products] .pc-find__res,
.pc[data-pc=portfolio] .ec-demo__url,
.pc[data-pc=portfolio] .pc-find__res{background:#070b12;color:#9aa6b4;border:1px solid rgba(219,229,242,.16)}
.pc[data-pc=products] .pc-find__body,
.pc[data-pc=products] .ec-demo__note,
.pc[data-pc=portfolio] .pc-find__body,
.pc[data-pc=portfolio] .ec-demo__note{background:#05080d;color:#c3c9d1}
.pc[data-pc=products] .ec-demo__note,
.pc[data-pc=portfolio] .ec-demo__note{border-top:1px solid rgba(219,229,242,.16);color:#9aa6b4}
.pc[data-pc=products] .pc-find__opts button,
.pc[data-pc=products] .pc-chips button,
.pc[data-pc=portfolio] .pc-find__opts button,
.pc[data-pc=portfolio] .pc-chips button{
  min-height:44px;padding:0 14px;border:1px solid rgba(219,229,242,.16);background:transparent;color:#ededed;
  transition:background .2s,color .2s,border-color .2s;
}
.pc[data-pc=products] .pc-find__opts button[aria-selected=true],
.pc[data-pc=products] .pc-chips button[aria-pressed=true],
.pc[data-pc=portfolio] .pc-find__opts button[aria-selected=true],
.pc[data-pc=portfolio] .pc-chips button[aria-pressed=true]{background:#fff;border-color:#fff;color:#121212}
.pc[data-pc=products] .pc-find__opts button:hover,
.pc[data-pc=products] .pc-chips button:hover,
.pc[data-pc=portfolio] .pc-find__opts button:hover,
.pc[data-pc=portfolio] .pc-chips button:hover{background:#ededed;border-color:#ededed;color:#121212}
.pc[data-pc=products] .pc-search input,
.pc[data-pc=portfolio] .pc-search input{
  min-height:44px;background:#070b12;color:#e7edf5;border:1px solid #3a4a62;
}
.pc[data-pc=products] .pc-search input:focus,
.pc[data-pc=portfolio] .pc-search input:focus{border-color:#52a8ff;box-shadow:0 0 0 2px rgba(82,168,255,.35)}
.pc[data-pc=products] .pc-count,
.pc[data-pc=portfolio] .pc-count{color:#9aa6b4;font-size:16px}
.pc[data-pc=products] .pc-card__a,
.pc[data-pc=portfolio] .pc-card__a{
  background:#05080d;border:1px solid rgba(219,229,242,.16);color:#e7edf5;
  box-shadow:none;transform:none;transition:border-color .2s;
}
.pc[data-pc=products] .pc-card__a:hover,
.pc[data-pc=portfolio] .pc-card__a:hover{border-color:#fff;box-shadow:none;transform:none}
.pc[data-pc=products] .pc-card__img,
.pc[data-pc=portfolio] .pc-card__img{background:#0c121c;border-bottom:0}
.pc[data-pc=products] .pc-card__a:hover img,
.pc[data-pc=portfolio] .pc-card__a:hover img{transform:none}
.pc[data-pc=products] .pc-card__a i,
.pc[data-pc=products] .pc-path i,
.pc[data-pc=products] .pc-find__also a,
.pc[data-pc=portfolio] .pc-card__a i,
.pc[data-pc=portfolio] .pc-path i,
.pc[data-pc=portfolio] .pc-find__also a{color:#52a8ff}
.pc[data-pc=products] .pc-path,
.pc[data-pc=portfolio] .pc-path{background:#05080d;border:1px solid rgba(219,229,242,.16);color:#e7edf5;box-shadow:none;transform:none}
.pc[data-pc=products] .pc-path:hover,
.pc[data-pc=portfolio] .pc-path:hover{border-color:#fff;box-shadow:none;transform:none}
.pc[data-pc=products] .pc-empty,
.pc[data-pc=portfolio] .pc-empty{border:1px solid rgba(219,229,242,.16);background:#05080d}
.pc[data-pc=products] .ec-trio,
.pc[data-pc=portfolio] .ec-trio{border-top-color:rgba(219,229,242,.16)}
.pc[data-pc=products] .ec-trio li,
.pc[data-pc=portfolio] .ec-trio li{color:#9aa6b4;font-size:16px}
.pc[data-pc=products] .ec-trio b,
.pc[data-pc=portfolio] .ec-trio b{color:#e7edf5}

.pc[data-pc=portfolio] .pc-card__img--site{position:relative;overflow:hidden}
.pc[data-pc=portfolio] .pc-card__frame{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  transform:scale(var(--fit,0.2));transform-origin:top left;width:1440px;height:900px;
}
.pc[data-pc=portfolio] .pc-card__frame iframe{
  width:1440px;height:900px;border:0;display:block;background:#0c121c;
}

/* Mobile: swipeable filters + stacked search bar (products + portfolio). */
@media (max-width:1000px){
  .pc[data-pc=products] .pc-bar,
  .pc[data-pc=portfolio] .pc-bar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .pc[data-pc=products] .pc-search,
  .pc[data-pc=portfolio] .pc-search{
    flex:1 1 auto;
    width:100%;
    max-width:none;
  }
  .pc[data-pc=products] .pc-chips,
  .pc[data-pc=portfolio] .pc-chips,
  .pc[data-pc=products] .pc-find__opts,
  .pc[data-pc=portfolio] .pc-find__opts{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    max-width:100%;
    gap:8px;
    padding-bottom:8px;
    scrollbar-width:thin;
  }
  .pc[data-pc=products] .pc-chips::-webkit-scrollbar,
  .pc[data-pc=portfolio] .pc-chips::-webkit-scrollbar,
  .pc[data-pc=products] .pc-find__opts::-webkit-scrollbar,
  .pc[data-pc=portfolio] .pc-find__opts::-webkit-scrollbar{height:4px}
  .pc[data-pc=products] .pc-chips::-webkit-scrollbar-thumb,
  .pc[data-pc=portfolio] .pc-chips::-webkit-scrollbar-thumb,
  .pc[data-pc=products] .pc-find__opts::-webkit-scrollbar-thumb,
  .pc[data-pc=portfolio] .pc-find__opts::-webkit-scrollbar-thumb{background:#3a4a62;border-radius:4px}
  .pc[data-pc=products] .pc-chips button,
  .pc[data-pc=portfolio] .pc-chips button,
  .pc[data-pc=products] .pc-find__opts button,
  .pc[data-pc=portfolio] .pc-find__opts button{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

@media (max-width:640px){
  .pc[data-pc=portfolio] .ec-hero{
    padding-block:clamp(24px,5vw,40px) clamp(28px,5vw,48px);
  }
  .pc[data-pc=portfolio] .ec-hero h1{
    font-size:clamp(28px,8vw,40px);
    margin-bottom:14px;
  }
  .pc[data-pc=portfolio] .we2-lead,
  .pc[data-pc=portfolio] .we2-sub{
    font-size:15px;
  }
  .pc[data-pc=portfolio] .ec-trio{
    margin-top:20px;
  }
  .pc[data-pc=portfolio] .pc-find__body{
    min-height:0;
    padding:14px;
  }
  .pc[data-pc=portfolio] .pc-card__a b{
    font-size:17px;
  }
  .pc[data-pc=portfolio] .pc-card__s{
    font-size:13.5px;
  }
  .pc[data-pc=portfolio] .pc-card__img{
    aspect-ratio:16/10;
  }
  .pc[data-pc=portfolio] .pc-paths{
    gap:12px;
  }
  .pc[data-pc=portfolio] .pc-path{
    padding:18px;
  }
  .pc[data-pc=portfolio] .ec-final__row .we2-actions{
    width:100%;
  }
  .pc[data-pc=portfolio] .ec-final__row .we2-btn{
    flex:1 1 100%;
    justify-content:center;
  }
}