/* SS Computers homepage brand-logo strip. Scope rules to this strip only. */
.ss-brand-logos{background:#fff;border-top:1px solid #e7edf7;border-bottom:1px solid #e7edf7}
.ss-brand-logos .brand-strip-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:15px 18px;min-width:0}
.ss-brand-logos .brand-strip-title{flex:0 0 auto;white-space:nowrap;font-size:20px;font-weight:800;color:#1769bb;letter-spacing:.015em}
.ss-brand-viewport{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.ss-brand-moving{display:flex;width:max-content;animation:ss-brand-travel 45s linear infinite;will-change:transform}
.ss-brand-set{display:flex;align-items:center;gap:14px;padding-right:14px;flex-shrink:0}
.ss-brand-logo{height:58px;width:126px;flex:0 0 126px;border:1px solid #e1eaf5;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 3px 12px rgba(18,59,105,.05);transition:border-color .2s,box-shadow .2s,transform .2s}
.ss-brand-logo img{position:relative;z-index:1;width:94px;height:31px;object-fit:contain;filter:invert(18%) sepia(50%) saturate(876%) hue-rotate(178deg) brightness(92%)}
.ss-brand-fallback{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:6px;color:#23456c;font-size:16px;font-weight:850;letter-spacing:-.02em}
.ss-brand-logo img:not([style*="display: none"]) + .ss-brand-fallback{visibility:hidden}
.ss-brand-logo:hover{border-color:#a8c9f4;box-shadow:0 7px 18px rgba(19,101,183,.13);transform:translateY(-2px)}
.ss-brand-viewport:hover .ss-brand-moving,.ss-brand-viewport:focus-within .ss-brand-moving{animation-play-state:paused}
@keyframes ss-brand-travel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:650px){.ss-brand-logos .brand-strip-inner{display:block;padding:13px 12px}.ss-brand-logos .brand-strip-title{margin-bottom:10px;font-size:18px}.ss-brand-logo{height:52px;width:110px;flex-basis:110px}.ss-brand-logo img{width:86px;height:29px}.ss-brand-moving{animation-duration:40s}}
@media(prefers-reduced-motion:reduce){.ss-brand-moving{animation:none!important}.ss-brand-viewport{overflow-x:auto;mask-image:none;-webkit-mask-image:none}}

/* 2026-10-16: balanced artwork and colorful brand cards */
.ss-brand-logos .ss-brand-logo{--brand-color:#1769bb;--brand-rgb:23,105,187;
  height:64px;width:136px;flex-basis:136px;
  border:1px solid rgba(var(--brand-rgb),.25);
  background:linear-gradient(145deg,#fff 50%,rgba(var(--brand-rgb),.075));
  box-shadow:0 4px 14px rgba(var(--brand-rgb),.09);
}
.ss-brand-logos .ss-brand-logo img{
  display:block;width:100px;height:42px;max-width:calc(100% - 16px);
  object-fit:contain;filter:none;
  /* SVG artworks have different proportions, tuned individually below */
}
.ss-brand-logos .ss-brand-logo[title="ASUS"]{--brand-color:#1266c3;--brand-rgb:18,102,195}
.ss-brand-logos .ss-brand-logo[title="Lenovo"]{--brand-color:#e2231a;--brand-rgb:226,35,26}
.ss-brand-logos .ss-brand-logo[title="Dell"]{--brand-color:#007db8;--brand-rgb:0,125,184}
.ss-brand-logos .ss-brand-logo[title="HP"]{--brand-color:#0085ca;--brand-rgb:0,133,202}
.ss-brand-logos .ss-brand-logo[title="Acer"]{--brand-color:#6aa924;--brand-rgb:106,169,36}
.ss-brand-logos .ss-brand-logo[title="Apple"]{--brand-color:#626b76;--brand-rgb:98,107,118}
.ss-brand-logos .ss-brand-logo[title="Samsung"]{--brand-color:#1428a0;--brand-rgb:20,40,160}
.ss-brand-logos .ss-brand-logo[title="Canon"]{--brand-color:#d4212b;--brand-rgb:212,33,43}
.ss-brand-logos .ss-brand-logo[title="Epson"]{--brand-color:#124aa4;--brand-rgb:18,74,164}
.ss-brand-logos .ss-brand-logo[title="Brother"]{--brand-color:#166fb1;--brand-rgb:22,111,177}
.ss-brand-logos .ss-brand-logo[title="Intel"]{--brand-color:#0071c5;--brand-rgb:0,113,197}
.ss-brand-logos .ss-brand-logo[title="AMD"]{--brand-color:#bd292d;--brand-rgb:189,41,45}
/* Compensate for inherent whitespace and wide/narrow shapes in logo SVGs. */
.ss-brand-logos .ss-brand-logo[title="ASUS"] img{width:105px;height:44px}
.ss-brand-logos .ss-brand-logo[title="Lenovo"] img{width:122px;height:48px;transform:scale(1.12)}
.ss-brand-logos .ss-brand-logo[title="Dell"] img{width:77px;height:46px}
.ss-brand-logos .ss-brand-logo[title="HP"] img{width:56px;height:47px}
.ss-brand-logos .ss-brand-logo[title="Acer"] img{width:104px;height:39px}
.ss-brand-logos .ss-brand-logo[title="Apple"] img{width:47px;height:48px}
.ss-brand-logos .ss-brand-logo[title="Samsung"] img{width:122px;height:48px;transform:scale(1.15)}
.ss-brand-logos .ss-brand-logo[title="Canon"] img{width:111px;height:39px}
.ss-brand-logos .ss-brand-logo[title="Epson"] img{width:109px;height:39px}
.ss-brand-logos .ss-brand-logo[title="Brother"] img{width:109px;height:41px}
.ss-brand-logos .ss-brand-logo[title="Intel"] img{width:87px;height:44px}
.ss-brand-logos .ss-brand-logo[title="AMD"] img{width:106px;height:43px}
.ss-brand-logos .ss-brand-fallback{color:var(--brand-color);font-size:18px}
.ss-brand-logos .ss-brand-logo:hover{
  border-color:var(--brand-color);
  box-shadow:0 9px 22px rgba(var(--brand-rgb),.17);
}
@media(max-width:650px){
  .ss-brand-logos .ss-brand-logo{width:120px;flex-basis:120px;height:58px}
  .ss-brand-logos .ss-brand-logo img{max-width:calc(100% - 12px);max-height:44px}
}