/* 88HARDWARE search + listing PC v1 (2026-10-26). PC only: >=1200px with a mouse. House style = homepage r15.6 tokens at the r16 90% scale.
   Built from src/sl.src.css by tools/build.py (#h88sl#h88sl = #h88sl#h88sl). Below 1200px nothing here applies and the existing layout stays. */
@font-face{font-family:"H88R15 Inter";src:url(../88hardware-home-pc-r15/fonts/inter-r15.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"H88R15 Archivo";src:url(../88hardware-home-pc-r15/fonts/archivo-sx-r15.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
#h88sl{display:none}
@keyframes h88sl-hold{from{visibility:hidden;max-height:0;overflow:hidden;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}}
@keyframes h88sl-gone{to{visibility:hidden;max-height:0;overflow:hidden;padding:0;margin:0}}
@keyframes h88sl-sh{to{background-position:-200% 0}}
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
/* main: neutralise listing-pc-v2's grid on this main only while the redesign is on */
body main#main-content.h88sl-on:not(.h88sl-off){display:block!important;grid-template-columns:none!important;gap:0!important;padding-top:0!important;padding-bottom:0!important}
main#main-content.h88sl-on:not(.h88sl-off)>#h88sl{display:block}
main#main-content.h88sl-on.h88sl-ready>:not(#h88sl){display:none!important}
/* waiting for the script: hide the old list for up to 6s, then give it back if the script never answered */
main#main-content.h88sl-on:not(.h88sl-ready):not(.h88sl-off)>:not(#h88sl){animation:h88sl-hold 0s 6s backwards}
main#main-content.h88sl-on:not(.h88sl-ready):not(.h88sl-off)>#h88sl{animation:h88sl-gone 0s 6s forwards}
main#main-content.h88sl-off>#h88sl{display:none!important}

#h88sl#h88sl{all:revert;display:block;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:start;text-indent:0;white-space:normal}
#h88sl#h88sl :where(:not(svg,svg *,img)){all:revert}
#h88sl#h88sl :where(img){max-width:none;border:0;box-shadow:none;margin:0;padding:0}
#h88sl#h88sl{
  --red:#D7000F;--red-2:#B4000C;--red-tint:#FFF0F1;
  --ink:#16191E;--ink-2:#3A414C;--mute:#5C6470;--strike:#6E7682;
  --line:#E6E8EC;--line-2:#D6DAE0;--ground:#F3F4F6;--plate:#F4F5F7;
  --yellow:#FFC72C;--yellow-2:#FFB800;--yellow-tint:#FFF5D6;--yellow-ink:#2B1D00;
  --display:"H88R15 Archivo","H88R15 Inter","Arial Narrow",Arial,sans-serif;
  --text:"H88R15 Inter",Inter,Arial,sans-serif;
  --r:14.5px;--r-m:11px;--r-s:7px;
  --sh:0 1px 2px rgba(22,25,30,.05),0 7px 21.5px -16px rgba(22,25,30,.25);
  --ease:cubic-bezier(.2,.7,.2,1);
  --fw:207px;
  padding:9px 0 27px;color:var(--ink);font:12.5px/1.5 var(--text);-webkit-font-smoothing:antialiased;color-scheme:light}
#h88sl#h88sl,#h88sl#h88sl *{box-sizing:border-box}
#h88sl#h88sl a{color:inherit;text-decoration:none}
#h88sl#h88sl button,#h88sl#h88sl input,#h88sl#h88sl select{font:inherit;color:inherit}
#h88sl#h88sl button{cursor:pointer;border:0;background:none;padding:0}
#h88sl#h88sl :where(h1,h2,h3,h4,p,ul,ol,figure){margin:0}
#h88sl#h88sl :where(ul,ol){list-style:none;padding:0}
#h88sl#h88sl [hidden]{display:none!important}
#h88sl#h88sl :focus-visible{outline:2.5px solid #E0A300;outline-offset:2px}
#h88sl#h88sl .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#h88sl#h88sl .sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
#h88sl#h88sl .card{background:#fff;border-radius:var(--r);box-shadow:var(--sh)}

/* skeleton while the Store API answers */
#h88sl#h88sl .sl-skel{display:grid;grid-template-columns:var(--fw) repeat(5,minmax(0,1fr));gap:14.5px 1px;padding-top:44px}
#h88sl#h88sl .sl-skel i{display:block;height:250px;border-radius:7px;background:linear-gradient(90deg,#ECEEF1 25%,#F6F7F9 50%,#ECEEF1 75%) 0 0/200% 100%;animation:h88sl-sh 1.2s linear infinite}
#h88sl#h88sl .sl-skel i:nth-child(6n+1){height:420px;grid-row:span 2}
/* notfound-v4: a 0-product page (no ul.products in the server HTML) gets a skeleton with the exact box
   of the department grid (crumb 42.5 + head 72.5 + 15 + grid 403 = 533px; category head 168.8), full-width
   and left-anchored, so the swap moves nothing (CLS from #h88sl = 0) */
main#main-content:not(:has(ul.products))>#h88sl#h88sl .sl-skel{display:block;padding:0}
main#main-content:not(:has(ul.products))>#h88sl#h88sl .sl-skel i{grid-row:auto;height:72.5px;border-radius:12px}
main#main-content:not(:has(ul.products))>#h88sl#h88sl .sl-skel i:nth-child(1){width:260px;height:14px;margin:14px 0 14.5px;border-radius:7px}
main#main-content:not(:has(ul.products))>#h88sl#h88sl .sl-skel i:nth-child(3){height:403px;margin-top:15px}
main#main-content:not(:has(ul.products))>#h88sl#h88sl .sl-skel i:nth-child(n+4){display:none}
main#main-content.h88-category-archive:not(:has(ul.products))>#h88sl#h88sl .sl-skel i:nth-child(2){height:168.8px}
/* ---- listing-cart-v1 2026-10-28: approved listing-v1 design (rem x 12.5px, scoped) ---- */
#h88sl#h88sl .sb-badge .star-logo{width:50px;height:15px;background:url(../88hardware-home-pc-r15/img/star-logo.webp) center/contain no-repeat}
#h88sl#h88sl .eb{display:inline-flex;align-items:center;gap:5px;font:800 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
#h88sl#h88sl .eb .ico{width:13.75px;height:13.75px;stroke-width:2.4}
#h88sl#h88sl .btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:37.5px;padding:0 17.5px;border-radius:999px;font:700 13.5px/1 var(--text);white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .2s,transform .2s var(--ease)}
#h88sl#h88sl .btn .ico{width:15px;height:15px;stroke-width:2.6;transition:transform .2s}
#h88sl#h88sl .btn:hover .ico{transform:translateX(3px)}
#h88sl#h88sl .btn-red{background:var(--red);color:#fff;box-shadow:0 10px 20px -14px rgba(160,0,10,.9)}
#h88sl#h88sl .btn-red:hover{background:var(--red-2)}
#h88sl#h88sl .btn-yel{background:var(--yellow);color:var(--yellow-ink);box-shadow:0 10px 20px -12px rgba(90,40,0,.75)}
#h88sl#h88sl .btn-yel:hover{background:#FFD24D}
#h88sl#h88sl .btn-line{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2)}
#h88sl#h88sl .btn-line:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .lk{display:inline-flex;align-items:center;gap:2.5px;font:700 13px/1 var(--text);color:var(--red);white-space:nowrap}
#h88sl#h88sl .lk .ico{width:13.75px;height:13.75px;stroke-width:2.6;transition:transform .2s}
#h88sl#h88sl .lk:hover .ico{transform:translateX(3px)}
#h88sl#h88sl .scp{display:inline-flex;align-items:center;gap:5px;height:27.5px;padding:0 10px 0 7.5px;border-radius:999px;background:#1B0A0C;color:#fff;flex:none}
#h88sl#h88sl .scp .star-logo{width:55px;height:16.25px}
#h88sl#h88sl .scp b{font:italic 900 13px/1 var(--display);font-stretch:88%;letter-spacing:.04em;color:var(--yellow)}
#h88sl#h88sl .mpx{display:inline-block;font:900 23px/1 var(--display);font-stretch:78%;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
#h88sl#h88sl .mpx small{font-size:12px;font-weight:900;margin-right:1px;vertical-align:.12em}
#h88sl#h88sl .mpx i{font-style:normal;font-size:12.5px;vertical-align:.62em;margin-left:1px}
#h88sl#h88sl .mpx .fr{font:800 12px/1 var(--text);font-stretch:100%;margin-right:3.75px;vertical-align:.14em}
#h88sl#h88sl .npx{font:500 12.5px/1 var(--text);color:var(--strike);white-space:nowrap;font-variant-numeric:tabular-nums}
#h88sl#h88sl .npx s{text-decoration-thickness:1.2px}
#h88sl#h88sl .svx,#h88sl#h88sl .ofx{display:inline-flex;align-items:center;height:23.75px;padding:0 7.5px;border-radius:5.62px;font:800 12px/1 var(--text);font-style:normal;white-space:nowrap}
#h88sl#h88sl .svx{background:var(--yellow);color:var(--yellow-ink)}
#h88sl#h88sl .ofx{background:var(--red);color:#fff;padding:0 5.62px}
#h88sl#h88sl .bc{display:flex;align-items:center;gap:6.25px;height:42.5px;font:500 12.5px/1 var(--text);color:var(--mute);white-space:nowrap}
#h88sl#h88sl .bc a:hover{color:var(--red)}
#h88sl#h88sl .bc .ico{width:12.5px;height:12.5px;stroke-width:2.6;color:#A3AAB3}
#h88sl#h88sl .bc b{color:var(--ink);font-weight:700}
#h88sl#h88sl .lh{position:relative;background:#fff;border-radius:12px;box-shadow:var(--sh);padding:16.25px 17.5px 16.25px;overflow:hidden}
#h88sl#h88sl .lh::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--red),#FF4A2B 60%,var(--yellow))}
#h88sl#h88sl .lh-top{display:flex;align-items:center;gap:10px;min-width:0}
#h88sl#h88sl .lh-i{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--red);color:#fff;box-shadow:0 8px 16px -10px rgba(160,0,10,.9)}
#h88sl#h88sl .lh-i .ico{width:22.5px;height:22.5px;stroke-width:1.8;--acc:rgba(255,255,255,.28);--ib:var(--red)}
#h88sl#h88sl .lh h1{min-width:0;font:800 22px/1.15 var(--text);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h88sl#h88sl .lh h1 q{color:var(--red)}
#h88sl#h88sl .cnt{flex:none;display:inline-flex;align-items:center;height:26.25px;padding:0 10px;border-radius:999px;background:var(--plate);font:700 12.5px/1 var(--text);color:var(--ink-2);white-space:nowrap}
#h88sl#h88sl .cnt b{color:var(--red);font-weight:800;margin-right:3.12px}
#h88sl#h88sl .lh-sv{flex:none;display:inline-flex;align-items:center;gap:6.25px;height:30px;padding:0 5px 0 11.25px;border-radius:999px;background:var(--yellow-tint);box-shadow:inset 0 0 0 1px #FFE08A;font:600 12.5px/1 var(--text);color:#5A3D00;white-space:nowrap}
#h88sl#h88sl .lh-sv>b{font:900 17px/1 var(--display);font-stretch:82%;color:var(--red)}
#h88sl#h88sl .lh-sv .go{display:inline-flex;align-items:center;gap:2.5px;height:22.5px;padding:0 5px 0 8.75px;border-radius:999px;background:var(--yellow);color:var(--yellow-ink);font:800 12px/1 var(--text)}
#h88sl#h88sl .lh-sv .go .ico{width:12.5px;height:12.5px;stroke-width:2.8}
#h88sl#h88sl .lh-sv .go:hover{background:#FFD24D}
#h88sl#h88sl .lh-rel{margin-left:auto;flex:none;display:flex;align-items:center;gap:7.5px;font:600 12.5px/1 var(--text);color:var(--mute);white-space:nowrap}
#h88sl#h88sl .lh-rel a{display:inline-flex;align-items:center;gap:2.5px;height:30px;padding:0 7.5px 0 11.25px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-weight:700;color:var(--ink)}
#h88sl#h88sl .lh-rel a .ico{width:12.5px;height:12.5px;stroke-width:2.6}
#h88sl#h88sl .lh-rel a:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .lh-sv .tx2{display:none}
@media (max-width:1399px){
  #h88sl#h88sl .lh-sv .tx{display:none}
  #h88sl#h88sl .lh-sv .tx2{display:inline}
}
@media (max-width:1299px){
  #h88sl#h88sl .lh-rel>span{display:none}
  #h88sl#h88sl .b-club .band-h p{display:none}
  #h88sl#h88sl .lh-sv{padding-right:11.25px}
  #h88sl#h88sl .lh-sv .go{display:none}
}
#h88sl#h88sl .subs{display:flex;flex-wrap:wrap;align-items:center;gap:7.5px;margin-top:13.75px}
#h88sl#h88sl .subs-l{flex:none;margin-right:3.75px;font:800 11.5px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
#h88sl#h88sl .sbc-c{display:inline-flex;align-items:center;gap:6.25px;height:37.5px;padding:0 11.25px 0 3.75px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 12.5px/1 var(--text);color:var(--ink-2);white-space:nowrap;transition:box-shadow .15s,color .15s,background-color .15s}
#h88sl#h88sl .sbc-c .t{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--plate) center/82% no-repeat}
#h88sl#h88sl .sbc-c .t .ico{width:16.25px;height:16.25px;stroke-width:1.7;color:#8C939D}
#h88sl#h88sl .sbc-c .n{min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--red);color:#fff;font:800 11.5px/1 var(--text)}
#h88sl#h88sl .sbc-c.has{color:var(--ink);font-weight:700}
#h88sl#h88sl .sbc-c:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .sbc-c:hover .t .ico{color:var(--red)}
#h88sl#h88sl .sbc-c.on{background:var(--red-tint);color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .sbc-c.more{padding:0 12.5px;background:var(--red-tint);color:var(--red);box-shadow:inset 0 0 0 1px #FFC9CE;font-weight:800}
#h88sl#h88sl .sbc-c.back{padding:0 12.5px 0 8.75px;color:var(--ink)}
#h88sl#h88sl .sbc-c.back .ico{width:13.75px;height:13.75px;stroke-width:2.6}
#h88sl#h88sl .lb{display:grid;grid-template-columns:var(--catw) minmax(0,1fr);gap:var(--hgap);align-items:start;margin-top:15px}
#h88sl#h88sl .side{display:grid;gap:15px;min-width:0}
#h88sl#h88sl .mainc{min-width:0}
#h88sl#h88sl .fp{background:#fff;border-radius:12px;box-shadow:var(--sh)}
#h88sl#h88sl .fp-h{display:flex;align-items:center;gap:6.25px;height:50px;padding:0 15px;border-bottom:1px solid var(--line);font:800 15px/1 var(--text)}
#h88sl#h88sl .fp-h .ico{width:17.5px;height:17.5px;stroke-width:2.2;color:var(--red)}
#h88sl#h88sl .fp-h button{margin-left:auto;font:600 12px/1 var(--text);color:#A3AAB3!important;cursor:default}
#h88sl#h88sl .fp-h button.on{color:var(--red)!important;cursor:pointer}
#h88sl#h88sl .fp-h button.on:hover{text-decoration:underline}
#h88sl#h88sl .fs{padding:13.75px 15px 15px;border-bottom:1px solid var(--line)}
#h88sl#h88sl .fs:last-child{border-bottom:0}
#h88sl#h88sl .fs-t{display:block;margin-bottom:8.75px;font:800 11.5px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
#h88sl#h88sl .tree{display:grid;gap:1.25px}
#h88sl#h88sl .tr{display:flex;align-items:center;gap:7.5px;min-height:32.5px;padding:2.5px 5px;margin:0 -5px;border-radius:6.25px;font:500 13px/1.25 var(--text);color:var(--ink-2);cursor:pointer;transition:background-color .12s,color .12s}
#h88sl#h88sl .tr:hover{background:var(--plate);color:var(--red)}
#h88sl#h88sl .tr .lab{flex:1;min-width:0}
#h88sl#h88sl .tr .c{flex:none;min-width:23.75px;height:21.25px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--plate);font:700 11.5px/1 var(--text);color:var(--mute)}
#h88sl#h88sl .tr input{position:absolute;opacity:0;pointer-events:none}
#h88sl#h88sl .ck{flex:none;width:17px;height:17px;border-radius:3.75px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px #B9BEC6;background:#fff;transition:background-color .12s,box-shadow .12s}
#h88sl#h88sl .ck .ico{width:12.5px;height:12.5px;stroke-width:3.4;color:#fff;opacity:0}
#h88sl#h88sl .tr[aria-pressed=true] .ck{background:var(--red);box-shadow:none}
#h88sl#h88sl .tr[aria-pressed=true] .ck .ico{opacity:1}
#h88sl#h88sl .tr.pa{font-weight:700;color:var(--ink)}
#h88sl#h88sl .tr.pa .tw{flex:none;width:17px;height:17px;display:grid;place-items:center;color:var(--mute);transition:transform .2s}
#h88sl#h88sl .tr.pa .tw .ico{width:13.75px;height:13.75px;stroke-width:2.6}
#h88sl#h88sl .tr.pa[aria-expanded=true] .tw{transform:rotate(90deg)}
#h88sl#h88sl .tr.cur{background:var(--red-tint);color:var(--red);font-weight:700}
#h88sl#h88sl .tr.cur .c{background:#fff;color:var(--red)}
#h88sl#h88sl .tr.up{color:var(--mute);font-weight:600}
#h88sl#h88sl .tr.up .ico{width:13.75px;height:13.75px;stroke-width:2.6}
#h88sl#h88sl .kids{display:grid;gap:1.25px;padding-left:23.75px}
#h88sl#h88sl .kids[hidden]{display:none}
#h88sl#h88sl .prc{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:5px}
#h88sl#h88sl .prc span{color:#A3AAB3}
#h88sl#h88sl .prc input{width:100%;height:35px;padding:0 7.5px;border:1px solid var(--line-2);border-radius:6.25px;background:#fff;font:600 12.5px/1 var(--text);color:var(--ink);outline:0;font-variant-numeric:tabular-nums}
#h88sl#h88sl .prc input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(215,0,15,.12)}
#h88sl#h88sl .prc input::placeholder{color:#A3AAB3;font-weight:500}
#h88sl#h88sl .apply{width:100%;height:35px;margin-top:7.5px;border-radius:6.25px!important;background:var(--red)!important;color:#fff!important;font:700 13px/1 var(--text)!important;transition:background-color .15s}
#h88sl#h88sl .apply:hover{background:var(--red-2)!important}
#h88sl#h88sl .pchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8.75px}
#h88sl#h88sl .pchips button{height:30px;padding:0 8.75px;border-radius:6.25px;background:var(--plate)!important;font:600 12px/1 var(--text);color:var(--ink-2)!important;white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .15s}
#h88sl#h88sl .pchips button:hover{color:var(--red)!important;box-shadow:inset 0 0 0 1px var(--red)}
#h88sl#h88sl .pchips button[aria-pressed=true]{background:var(--red-tint)!important;color:var(--red)!important;box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .tg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:6.25px;padding:11.25px 7.5px;margin:0 -5px;border-radius:10px;cursor:pointer;transition:background-color .15s}
#h88sl#h88sl .tg+.tg{margin-top:5px}
#h88sl#h88sl .tg.mem{background:linear-gradient(120deg,#FFF8E1,#FFF1C2);box-shadow:inset 0 0 0 1px #FFE08A}
#h88sl#h88sl .tg:hover{background:var(--plate)}
#h88sl#h88sl .tg.mem:hover{background:linear-gradient(120deg,#FFF3CC,#FFE9A6)}
#h88sl#h88sl .tg input{position:absolute;opacity:0;pointer-events:none}
#h88sl#h88sl .sw{position:relative;width:35px;height:20px;margin-top:1.25px;border-radius:999px;background:#C5CAD1;transition:background-color .2s}
#h88sl#h88sl .sw::after{content:"";position:absolute;left:2.5px;top:2.5px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .25s var(--pop)}
#h88sl#h88sl .tg[aria-pressed=true] .sw{background:var(--red)}
#h88sl#h88sl .tg[aria-pressed=true] .sw::after{transform:translateX(15px)}
#h88sl#h88sl .tg-t{display:grid;gap:3.75px;font:700 12.5px/1.3 var(--text);color:var(--ink);white-space:nowrap}
#h88sl#h88sl .tg-t small{white-space:normal}
#h88sl#h88sl .tg-t small{font:500 12px/1.3 var(--text);color:var(--mute)}
#h88sl#h88sl .tg-t .scp{justify-self:start;height:22.5px;padding:0 7.5px 0 6.25px}
#h88sl#h88sl .tg-t .scp .star-logo{width:45px;height:13.75px}
#h88sl#h88sl .tg-t .scp b{font-size:11.5px}
#h88sl#h88sl .tg .c{min-width:23.75px;height:21.25px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#fff;font:700 11.5px/1 var(--text);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line)}
#h88sl#h88sl .spro{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;justify-items:start;padding:18.75px 17.5px 18.75px;border-radius:12px;color:#fff;overflow:hidden;
  background:radial-gradient(90% 50% at 100% 100%,rgba(255,199,44,.24),transparent 70%),radial-gradient(80% 60% at 0 0,rgba(255,255,255,.08),transparent 70%),linear-gradient(165deg,#3A0207 0%,#1E0507 55%,#120405 100%);box-shadow:var(--sh)}
#h88sl#h88sl .spro::after{content:"";position:absolute;right:-45px;top:-35px;width:137.5px;height:137.5px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z' fill='none' stroke='%23FFC72C' stroke-opacity='.18' stroke-width='.7'/%3E%3C/svg%3E");pointer-events:none}
#h88sl#h88sl .spro .scp{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,199,44,.4)}
#h88sl#h88sl .spro h3{font:900 28px/.98 var(--display);font-stretch:80%;letter-spacing:-.005em}
#h88sl#h88sl .spro h3 em{display:block;font-style:italic;color:var(--yellow)}
#h88sl#h88sl .spro p{font:400 13px/1.5 var(--text);color:#F5D5D8}
#h88sl#h88sl .spro p b{color:#fff;font-weight:700}
#h88sl#h88sl .sp-ex{align-self:stretch;display:grid;gap:6.25px;padding:11.25px 12.5px;border-radius:10px;background:#fff;color:var(--ink)}
#h88sl#h88sl .sp-ex>span{font:600 12px/1.25 var(--text);color:var(--mute)}
#h88sl#h88sl .sp-ex .row{display:flex;align-items:baseline;flex-wrap:wrap;gap:2.5px 7.5px}
#h88sl#h88sl .sp-ex .row .mpx{font-size:26.25px}
#h88sl#h88sl .sp-ex .lg2{display:flex;flex-wrap:wrap;gap:3.75px 10px;font:600 11.5px/1 var(--text);color:var(--mute)}
#h88sl#h88sl .sp-ex .lg2 span{white-space:nowrap}
#h88sl#h88sl .sp-ex .lg2 i{display:inline-block;width:8.75px;height:8.75px;margin-right:3.75px;border-radius:2px;background:var(--red);font-style:normal}
#h88sl#h88sl .sp-ex .lg2 i.g{background:#A3AAB3}
#h88sl#h88sl .spro .btn{height:37.5px}
#h88sl#h88sl .sbiz{display:grid;grid-template-columns:45px minmax(0,1fr);gap:11.25px;align-items:start;padding:15px;border-radius:12px;background:#fff;box-shadow:var(--sh);transition:box-shadow .2s}
#h88sl#h88sl .sbiz:hover{box-shadow:inset 0 0 0 1.5px var(--red),var(--sh)}
#h88sl#h88sl .sbiz .i{width:45px;height:45px;border-radius:12.5px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#3A414C,#16191E)}
#h88sl#h88sl .sbiz .i .ico{width:22.5px;height:22.5px;stroke-width:1.8}
#h88sl#h88sl .sbiz b{display:block;font:800 14px/1.3 var(--text)}
#h88sl#h88sl .sbiz small{display:block;margin:2.5px 0 6.25px;font:400 12px/1.4 var(--text);color:var(--mute)}
#h88sl#h88sl .res{position:relative;background:#fff;border-radius:12px;box-shadow:var(--sh)}
#h88sl#h88sl .sortbar{display:flex;align-items:center;gap:6.25px;height:57.5px;padding:0 15px;border-radius:12px 12px 0 0;background:#EEF0F2;border-bottom:1px solid var(--line)}
#h88sl#h88sl .sortbar>.l{margin-right:6.25px;font:600 13px/1 var(--text);color:var(--mute);white-space:nowrap}
#h88sl#h88sl .sb{height:36.25px;padding:0 13.75px;border-radius:3.75px;background:#fff!important;box-shadow:0 1px 1px rgba(22,25,30,.08);font:600 13px/1 var(--text);color:var(--ink)!important;white-space:nowrap;transition:background-color .15s,color .15s}
#h88sl#h88sl .sb:hover{color:var(--red)!important}
#h88sl#h88sl .sb[aria-pressed=true]{background:var(--red)!important;color:#fff!important;box-shadow:0 6px 12px -8px rgba(160,0,10,.9)}
#h88sl#h88sl .sb.svg{display:inline-flex;align-items:center;gap:5px;background:var(--yellow-tint)!important;color:#6B4400!important;box-shadow:inset 0 0 0 1px #FFD966}
#h88sl#h88sl .sb.svg .ico{width:15px;height:15px;color:var(--red)}
#h88sl#h88sl .sb.svg:hover{background:#FFEDB3!important}
#h88sl#h88sl .sb.svg[aria-pressed=true]{background:var(--yellow)!important;color:var(--yellow-ink)!important;box-shadow:0 6px 12px -8px rgba(110,70,0,.9)}
#h88sl#h88sl .pg{margin-left:auto;display:flex;align-items:center;gap:3.75px;font:600 13px/1 var(--text);color:var(--ink);white-space:nowrap}
#h88sl#h88sl .pg>span{margin-right:5px}
#h88sl#h88sl .pg>span b{color:var(--red);font-weight:800}
#h88sl#h88sl .pg button{width:36.25px;height:36.25px;border-radius:3.75px;display:grid;place-items:center;background:#fff!important;color:var(--ink-2)!important;box-shadow:0 1px 1px rgba(22,25,30,.08)}
#h88sl#h88sl .pg button[disabled]{color:#C5CAD1!important;cursor:not-allowed}
#h88sl#h88sl .pg .ico{width:15px;height:15px;stroke-width:2.6}
#h88sl#h88sl .vt{display:flex;margin-left:10px;padding:2.5px;border-radius:5px;background:#fff;box-shadow:0 1px 1px rgba(22,25,30,.08)}
#h88sl#h88sl .vt button{width:32.5px;height:31.25px;border-radius:3.75px;display:grid;place-items:center;color:var(--mute)!important;transition:background-color .15s,color .15s}
#h88sl#h88sl .vt button:hover{color:var(--red)!important}
#h88sl#h88sl .vt button[aria-pressed=true]{background:var(--ink)!important;color:#fff!important}
#h88sl#h88sl .vt .ico{width:17.5px;height:17.5px;stroke-width:2}
@media (max-width:1399px){
  #h88sl#h88sl .sortbar>.l{display:none}
  #h88sl#h88sl .sb{padding:0 10px}
}
@media (max-width:1299px){
  #h88sl#h88sl .sb{padding:0 8.12px;font-size:12.5px}
  #h88sl#h88sl .vt{margin-left:5px}
  #h88sl#h88sl .pg>span{margin-right:1.25px}
}
#h88sl#h88sl .sel{display:flex;flex-wrap:wrap;align-items:center;gap:6.25px;padding:10px 15px;border-bottom:1px solid var(--line);background:#FFFCF5}
#h88sl#h88sl .sel>span{margin-right:2.5px;font:700 12px/1 var(--text);color:var(--mute)}
#h88sl#h88sl .sel button{display:inline-flex;align-items:center;gap:3.75px;height:28.75px;padding:0 6.25px 0 10px;border-radius:5px;background:#fff!important;box-shadow:inset 0 0 0 1px var(--red);font:600 12px/1 var(--text);color:var(--red)!important}
#h88sl#h88sl .sel button .ico{width:12.5px;height:12.5px;stroke-width:2.8}
#h88sl#h88sl .sel button:hover{background:var(--red-tint)!important}
#h88sl#h88sl .sel .clr{box-shadow:none;color:var(--mute)!important;text-decoration:underline}
#h88sl#h88sl .grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:1px;background:var(--line)}
#h88sl#h88sl .pc{position:relative;display:flex;flex-direction:column;min-width:0;padding:12.5px 12.5px 13.75px;background:#fff;color:var(--ink)}
#h88sl#h88sl .pc:hover,#h88sl#h88sl .pc:focus-within{z-index:4;box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .pc-img{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;border-radius:6.25px}
#h88sl#h88sl .pc-img img{position:absolute;inset:0;transition:transform .45s var(--ease)}
#h88sl#h88sl .pc:hover .pc-img img{transform:scale(1.05)}
#h88sl#h88sl .pc-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin:10px 0 6.25px;font:500 13px/1.35 var(--text);color:var(--ink)}
#h88sl#h88sl .pc-n:hover{color:var(--red)}
#h88sl#h88sl .pc-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:1.25px 7.5px;min-height:30px}
#h88sl#h88sl .pc-s{display:flex;align-items:center;gap:4.38px;min-height:23.75px;margin-top:6.25px;white-space:nowrap}
#h88sl#h88sl .pc-o{font:600 12px/23.75px var(--text);color:var(--mute)}
#h88sl#h88sl .atc-w{position:absolute;z-index:1;left:0;right:0;top:100%;height:37.5px;padding-bottom:20px;margin-bottom:-20px;overflow:hidden;pointer-events:none;box-sizing:content-box}
#h88sl#h88sl .atc{display:flex;align-items:center;justify-content:center;gap:6.25px;width:100%;height:100%;border-radius:0;background:var(--red)!important;color:#fff!important;font:700 13.5px/1 var(--text);transform:translateY(-101%);transition:transform .22s var(--ease),background-color .15s}
#h88sl#h88sl .atc .ico{width:17.5px;height:17.5px;stroke-width:2}
#h88sl#h88sl .pc:hover .atc,#h88sl#h88sl .pc:focus-within .atc{pointer-events:auto}
#h88sl#h88sl .pc:hover .atc,#h88sl#h88sl .pc:focus-within .atc{transform:none;box-shadow:0 10px 18px -10px rgba(60,0,6,.7)}
#h88sl#h88sl .atc:hover{background:var(--red-2)!important}
#h88sl#h88sl .atc.done{background:#13844B!important}
#h88sl#h88sl .pc .atc-l{display:none}
#h88sl#h88sl .pc.new{animation:h88sl-rise .35s var(--ease) both}
@keyframes h88sl-rise{from{opacity:0;transform:translateY(8px)}}
#h88sl#h88sl .grid.list{grid-template-columns:minmax(0,1fr)}
#h88sl#h88sl .list .pc{display:grid;grid-template-columns:110px minmax(0,1fr) 187.5px 150px;grid-template-rows:auto auto;column-gap:20px;align-items:center;align-content:center;padding:12.5px 17.5px}
#h88sl#h88sl .list .pc-img{grid-row:1/3;width:110px}
#h88sl#h88sl .list .pc-n{grid-column:2;grid-row:1/3;min-height:0;margin:0;font-size:15px;-webkit-line-clamp:2}
#h88sl#h88sl .list .pc-p{grid-column:3;grid-row:1;align-self:end;justify-content:flex-start;min-height:0}
#h88sl#h88sl .list .pc-s{grid-column:3;grid-row:2;align-self:start;margin-top:5px}
#h88sl#h88sl .list .atc-w{display:none}
#h88sl#h88sl .list .pc .atc-l{grid-column:4;grid-row:1/3;display:flex;align-items:center;justify-content:center;gap:5px;height:40px;border-radius:999px;background:#fff!important;color:var(--red)!important;box-shadow:inset 0 0 0 1.5px var(--red);font:700 13.5px/1 var(--text);transition:background-color .15s,color .15s}
#h88sl#h88sl .list .pc .atc-l .ico{width:16.25px;height:16.25px;stroke-width:2}
#h88sl#h88sl .list .pc:hover .atc-l,#h88sl#h88sl .list .pc .atc-l:focus-visible{background:var(--red)!important;color:#fff!important}
#h88sl#h88sl .list .pc .atc-l.done{background:#13844B!important;color:#fff!important;box-shadow:none}
#h88sl#h88sl .endb{grid-column:span var(--span,1);container-type:inline-size;position:relative;min-width:0;padding:20px 22.5px;background:
  radial-gradient(60% 90% at 100% 0,rgba(255,199,44,.14),transparent 70%),linear-gradient(135deg,#FFF6F6 0%,#FFFFFF 55%,#FAFAFB 100%)}
#h88sl#h88sl .endb::before{content:"";position:absolute;left:12.5px;top:12.5px;bottom:12.5px;width:3px;border-radius:3px;background:linear-gradient(var(--red),var(--yellow))}
#h88sl#h88sl .eb-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,312.5px);gap:17.5px 25px;align-items:start;height:100%;padding-left:7.5px}
#h88sl#h88sl .eb-m{display:grid;gap:7.5px;justify-items:start;align-content:center;height:100%}
#h88sl#h88sl .eb-m h3{font:800 19px/1.25 var(--text);letter-spacing:-.005em;color:var(--ink)}
#h88sl#h88sl .eb-m p{font:400 13px/1.5 var(--text);color:var(--mute);max-width:52ch}
#h88sl#h88sl .eb-ch{display:flex;flex-wrap:wrap;gap:5px}
#h88sl#h88sl .eb-ch a{display:inline-flex;align-items:center;gap:3.75px;height:30px;padding:0 8.75px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:600 12px/1 var(--text);color:var(--ink-2);white-space:nowrap}
#h88sl#h88sl .eb-ch a i{font-style:normal;color:var(--red);font-weight:800}
#h88sl#h88sl .eb-ch a .ico{width:12.5px;height:12.5px;stroke-width:2.6}
#h88sl#h88sl .eb-ch a:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .eb-m .btn{margin-top:3.75px;height:37.5px}
#h88sl#h88sl .eb-t{align-self:stretch;display:grid;align-content:start;gap:8.75px;padding:15px 16.25px;border-radius:11.25px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
#h88sl#h88sl .eb-t ul{display:grid;gap:7.5px}
#h88sl#h88sl .eb-t li{display:grid;grid-template-columns:17.5px minmax(0,1fr);gap:6.25px;font:500 12.5px/1.4 var(--text);color:var(--ink-2)}
#h88sl#h88sl .eb-t li .ico{width:16.25px;height:16.25px;margin-top:0.62px;stroke-width:2.8;color:var(--red)}
#h88sl#h88sl .eb-t li b{color:var(--ink)}
@container (max-width:620px){
  #h88sl#h88sl .eb-in{grid-template-columns:minmax(0,1fr)}
  #h88sl#h88sl .eb-t{display:none}
}
@container (max-width:340px){
  #h88sl#h88sl .eb-m p,#h88sl#h88sl .eb-ch{display:none}
  #h88sl#h88sl .eb-m h3{font-size:16px}
}
#h88sl#h88sl .endl{display:flex;align-items:center;gap:15px;height:55px;padding:0 15px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:#FAFAFB;font:500 12.5px/1 var(--text);color:var(--mute);white-space:nowrap}
#h88sl#h88sl .endl .c{flex:1;display:flex;align-items:center;gap:12.5px;font:800 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
#h88sl#h88sl .endl .c::before,#h88sl#h88sl .endl .c::after{content:"";flex:1;height:1px;background:var(--line-2)}
#h88sl#h88sl .endl .c span{display:inline-flex;align-items:center;gap:5px}
#h88sl#h88sl .endl .c .ico{width:15px;height:15px;stroke-width:2.4;color:var(--red)}
#h88sl#h88sl .endl .n{min-width:162.5px}
#h88sl#h88sl .endl .n b{color:var(--ink)}
#h88sl#h88sl .nomatch{grid-column:1/-1;display:flex;align-items:center;gap:17.5px;padding:30px 25px;background:#fff}
#h88sl#h88sl .nomatch .i{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--red-tint);color:var(--red)}
#h88sl#h88sl .nomatch .i .ico{width:27.5px;height:27.5px;stroke-width:2}
#h88sl#h88sl .nomatch b{display:block;font:800 17px/1.3 var(--text)}
#h88sl#h88sl .nomatch span{display:block;margin-top:2.5px;color:var(--mute)}
#h88sl#h88sl .nomatch .btn{margin-left:auto}
#h88sl#h88sl .band{position:relative;margin-top:15px;background:#fff;border-radius:12px;box-shadow:var(--sh)}
#h88sl#h88sl .band-h{display:flex;align-items:center;gap:12.5px;height:55px;padding:0 17.5px;border-radius:12px 12px 0 0;color:#fff;overflow:hidden;white-space:nowrap}
#h88sl#h88sl .band-h h2{font:800 18px/1 var(--text);letter-spacing:-.005em}
#h88sl#h88sl .band-h p{min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 12.5px/1 var(--text)}
#h88sl#h88sl .band-h .lk{margin-left:auto;flex:none}
#h88sl#h88sl .b-club .band-h{background:radial-gradient(40% 160% at 0 0,rgba(215,0,15,.35),transparent 70%),radial-gradient(30% 140% at 100% 100%,rgba(255,199,44,.18),transparent 70%),linear-gradient(100deg,#1E0306 0%,#3B0408 55%,#5A050B 100%)}
#h88sl#h88sl .b-club .band-h h2 em{font:italic 900 20.5px/1 var(--display);font-stretch:86%;letter-spacing:.02em;color:var(--yellow)}
#h88sl#h88sl .b-club .band-h p{color:#E8B7BC}
#h88sl#h88sl .b-club .band-h .lk{color:var(--yellow)}
#h88sl#h88sl .b-ymal .band-h{background:repeating-linear-gradient(115deg,transparent 0 60px,rgba(255,255,255,.05) 60px 62px),linear-gradient(100deg,#D7000F 0%,#E8240F 60%,#F4511E 100%)}
#h88sl#h88sl .b-ymal .band-h h2{font:italic 900 24px/1 var(--display);font-stretch:86%}
#h88sl#h88sl .b-ymal .band-h p{color:#FFE1E4}
#h88sl#h88sl .b-ymal .band-h .lk{color:#fff}
#h88sl#h88sl .rowg{display:grid;grid-template-columns:repeat(var(--rc,var(--cols)),minmax(0,1fr));gap:1px;background:var(--line);border-radius:0 0 12px 12px}
#h88sl#h88sl .full .rowg{--rc:calc(var(--cols) + 1)}
#h88sl#h88sl .rowg>:first-child{border-bottom-left-radius:12px}
#h88sl#h88sl .rowg>:last-child{border-bottom-right-radius:12px}
#h88sl#h88sl .rowg>.pc:hover,#h88sl#h88sl .rowg>.pc:focus-within{border-bottom-left-radius:0;border-bottom-right-radius:0}
#h88sl#h88sl .rowg .pc-n{min-height:2.7em}
#h88sl#h88sl .jtile{grid-column:span var(--span,1);container-type:inline-size;position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px 17.5px;color:#fff;overflow:hidden;
  background:radial-gradient(70% 50% at 100% 100%,rgba(255,199,44,.26),transparent 70%),radial-gradient(70% 60% at 0 0,rgba(215,0,15,.45),transparent 70%),linear-gradient(160deg,#2A0306 0%,#170506 100%)}
#h88sl#h88sl .jtile::after{content:"";position:absolute;right:-32.5px;bottom:-32.5px;width:112.5px;height:112.5px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8z' fill='%23FFC72C' fill-opacity='.12'/%3E%3C/svg%3E");pointer-events:none}
#h88sl#h88sl .jtile .scp{align-self:flex-start;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,199,44,.4)}
#h88sl#h88sl .jtile b{font:900 21.25px/1.04 var(--display);font-stretch:80%}
#h88sl#h88sl .jtile b span{display:block;white-space:nowrap}
#h88sl#h88sl .jtile b em{display:block;font-style:italic;color:var(--yellow);font-size:1.18em}
#h88sl#h88sl .jtile p{font:400 12.5px/1.45 var(--text);color:#E8C3C7}
#h88sl#h88sl .jtile .btn{align-self:flex-start;height:36.25px;padding:0 15px}
@container (min-width:400px){
  #h88sl#h88sl .jtile{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:25px}
  #h88sl#h88sl .jtile .scp{flex-basis:100%;flex-grow:0}
  #h88sl#h88sl .jtile b{font-size:27.5px}
  #h88sl#h88sl .jtile p{flex:1}
}
#h88sl#h88sl .sbc{grid-column:span var(--span,1);container-type:inline-size;display:flex;flex-direction:column;gap:12.5px;min-width:0;padding:18.75px 20px;background:radial-gradient(50% 80% at 100% 100%,rgba(255,199,44,.12),transparent 70%),linear-gradient(135deg,#FFF5F5 0%,#FFFFFF 60%,#FAFAFB 100%)}
#h88sl#h88sl .sbc-h{display:flex;align-items:flex-end;gap:12.5px}
#h88sl#h88sl .sbc-h h3{margin-top:5px;font:800 19px/1.1 var(--text)}
#h88sl#h88sl .sbc-h .lk{margin-left:auto}
#h88sl#h88sl .sbc-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(212.5px,1fr));gap:7.5px}
#h88sl#h88sl .ct{display:grid;grid-template-columns:45px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8.75px 10px 8.75px 8.75px;border-radius:11.25px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s}
#h88sl#h88sl .ct .ci{position:relative;width:45px;height:45px;border-radius:10px;display:grid;place-items:center;background:var(--red-tint);color:var(--red)}
#h88sl#h88sl .ct .ci .ico{width:23.75px;height:23.75px;stroke-width:1.7;--acc:#FFD3D7}
#h88sl#h88sl .ct .ci img{position:absolute;right:-6.25px;bottom:-6.25px;width:30px;height:30px;border-radius:50%;background-color:#fff;background-size:80%;box-shadow:0 0 0 1.5px #fff,0 4px 8px -4px rgba(22,25,30,.4)}
#h88sl#h88sl .ct b{display:block;font:700 13px/1.25 var(--text);color:var(--ink)}
#h88sl#h88sl .ct small{display:block;margin-top:2.5px;font:500 12px/1.2 var(--text);color:var(--mute);white-space:nowrap}
#h88sl#h88sl .ct small em{font-style:normal;font-weight:800;color:var(--red)}
#h88sl#h88sl .ct>.ico{width:15px;height:15px;stroke-width:2.6;color:#A3AAB3;transition:transform .2s,color .15s}
#h88sl#h88sl .ct:hover{box-shadow:inset 0 0 0 1.5px var(--red)}
#h88sl#h88sl .ct:hover>.ico{color:var(--red);transform:translateX(3px)}
#h88sl#h88sl .ct.all .ci{background:var(--red);color:#fff}
#h88sl#h88sl .ct.all .ci .ico{--acc:rgba(255,255,255,.28)}
/* ---- listing-cart-v1: real-data adaptations of the design ---- */
#h88sl#h88sl{--catw:232px;--hgap:16px;--cols:5}
@media (min-width:1680px){#h88sl#h88sl{--cols:6}}
@media (max-width:1399px){#h88sl#h88sl{--catw:222px}}
@media (max-width:1299px){#h88sl#h88sl{--cols:4}}
#h88sl#h88sl .scp .star-logo{display:inline-block;background:url(../88hardware-home-pc-r15/img/star-logo.webp) center/contain no-repeat}
#h88sl#h88sl button.tr,#h88sl#h88sl button.tg{width:calc(100% + 10px);text-align:left}
#h88sl#h88sl button.tg{width:calc(100% + 10px)}
#h88sl#h88sl button.tr:focus-visible .ck,#h88sl#h88sl button.tg:focus-visible .sw{outline:3px solid #E0A300;outline-offset:2px}
#h88sl#h88sl .pc-img{background:#fff}
#h88sl#h88sl .pc-img img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .45s var(--ease)}
#h88sl#h88sl .pc.is-oos .pc-img img{opacity:.55}
#h88sl#h88sl .pc .oos{position:absolute;left:12.5px;top:12.5px;z-index:1;padding:4px 7.5px;border-radius:6px;background:var(--ink);color:#fff;font:700 11px/1 var(--text)}
#h88sl#h88sl .pc-cat{display:block;margin-top:4px;font:500 11.5px/1.3 var(--text);color:var(--mute)}
#h88sl#h88sl .list .pc-cat{display:none}
#h88sl#h88sl a.atc,#h88sl#h88sl a.atc-l{text-decoration:none}
#h88sl#h88sl .sbc-c .t.im{background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
#h88sl#h88sl .sbc-c .t.im img{width:80%;height:80%;object-fit:contain}
#h88sl#h88sl .sbc-c .t.art{background-size:cover}
#h88sl#h88sl button.sbc-c{cursor:pointer}
#h88sl#h88sl .subs.cap:not(.open) .sbc-c.x{display:none}
#h88sl#h88sl .ct .ci img{object-fit:contain;padding:2px}
#h88sl#h88sl .pf{display:block}
#h88sl#h88sl .prc input{-moz-appearance:textfield;appearance:textfield}
#h88sl#h88sl .prc input::-webkit-inner-spin-button,#h88sl#h88sl .prc input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#h88sl#h88sl .fp-h button[disabled]{cursor:default}
#h88sl#h88sl .endl .pgs{margin-left:auto;display:flex;align-items:center;gap:4px}
#h88sl#h88sl .endl .pgn{min-width:30px;height:30px;padding:0 8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:700 12px/1 var(--text);color:var(--ink);display:inline-grid;place-items:center}
#h88sl#h88sl .endl .pgn[aria-current=page]{background:var(--red);color:#fff;box-shadow:none}
#h88sl#h88sl .endl .pgn[disabled]{opacity:.4;cursor:default}
#h88sl#h88sl .endl .pgn .ico{width:14px;height:14px;stroke-width:2.4}
#h88sl#h88sl .endl .pgd{color:var(--mute)}
#h88sl#h88sl .pg button[disabled]{opacity:.45;cursor:default}
#h88sl#h88sl .b-brow .rowg{border-radius:12px}
#h88sl#h88sl .b-brow .rowg>.sbc{border-radius:12px}

/* add-to-cart toast */
#h88sl-toast{--red:#D7000F;--ease:cubic-bezier(.2,.7,.2,1);--text:"H88R15 Inter",Inter,Arial,sans-serif;box-sizing:border-box;position:fixed;z-index:99999;left:50%;bottom:27px;display:flex;align-items:center;gap:11px;min-width:300px;padding:11px 11px 11px 14.5px;border-radius:11px;background:#16191E;color:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .25s var(--ease),opacity .2s}
#h88sl-toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#h88sl-toast .tk{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#13844B}
#h88sl-toast .tk svg{width:14px;height:14px;stroke-width:3}
#h88sl-toast .tm{flex:1;display:grid;gap:2px;font:500 11.5px/1.3 var(--text);color:rgba(255,255,255,.75)}
#h88sl-toast .tm b{font:800 12.5px/1.2 var(--text);color:#fff}
#h88sl-toast a{text-decoration:none;height:30.5px;padding:0 13.5px;border-radius:899px;background:var(--red);color:#fff;font:700 12px/30.5px var(--text)}
#h88sl-toast .tx{border:0;background:none;cursor:pointer;width:27px;height:27px;color:rgba(255,255,255,.6);font-size:18px;line-height:1}

#h88sl-toast .tk svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1600px){
  #h88sl#h88sl .pc{--ih:180px}
  #h88sl#h88sl .rec .pc{--ih:170px}
}
@media (prefers-reduced-motion:reduce){
  #h88sl#h88sl *{transition:none!important;animation:none!important}
}
/* notfound-v3 (2026-10-31): zero matches -> ordinary listing filled with other published products; departments end cell / fallback */
#h88sl#h88sl .endb.fill .eb-in{grid-template-columns:minmax(0,1fr)}
#h88sl#h88sl .endb.fill .eb-ch{display:flex}
#h88sl#h88sl .endl .n:empty{min-width:0}
#h88sl#h88sl .tr .c:empty{display:none}
/* notfound-v4: department grid in the style of the Become Our Supplier "Categories we are sourcing" sheet */
#h88sl#h88sl .dpt{margin-top:15px;background:#fff;border-radius:12px;box-shadow:var(--sh);border-top:4px solid var(--red);overflow:hidden}
#h88sl#h88sl .dpt-h{box-sizing:border-box;height:101px;padding:24px 28px 22px}
#h88sl#h88sl .dpt-k{display:block;margin-bottom:9px;font:800 12px/1.2 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
#h88sl#h88sl .dpt-h h2{font:800 32px/1 var(--display);letter-spacing:-.01em;color:#1c2027}
#h88sl#h88sl .dpt-g{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:#e4e7ec;border-top:1px solid #e4e7ec}
#h88sl#h88sl .dpt-g li{background:#fff;min-width:0}
#h88sl#h88sl .dpt-c{box-sizing:border-box;height:148px;overflow:hidden;padding:22px 10px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:#1c2027;text-decoration:none;transition:background-color .25s ease}
#h88sl#h88sl .dpt-c svg{display:block;width:76px;height:60px;flex:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s ease}
#h88sl#h88sl .dpt-c span{font:750 13.5px/1.32 var(--text);letter-spacing:-.005em;max-width:132px;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#h88sl#h88sl .dpt-c:hover{background:#fffbef}
#h88sl#h88sl .dpt-c:hover svg{transform:translateY(-5px);filter:drop-shadow(0 6px 5px #1c202722)}
#h88sl#h88sl .dpt-c:hover span{color:var(--red)}
#h88sl#h88sl .dpt-c:focus-visible{outline:2.5px solid #E0A300;outline-offset:-4px;background:#fffbef}
#h88sl#h88sl .dpt-all span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;color:var(--red);max-width:none}
#h88sl#h88sl .dpt-all span .ico{display:block;width:12px;height:12px;stroke-width:2.6}
@media (prefers-reduced-motion:reduce){#h88sl#h88sl .dpt-c,#h88sl#h88sl .dpt-c svg{transition:none}}
}
/* card-sq-20261104: PC listing card = EY image 2 (square card on hover, Add to cart flush full-width joined at card bottom radius 0, fully square, price close under title; list view untouched). */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
#h88sl#h88sl#h88sl .pc:is(:hover,:focus-within){border-radius:0}
#h88sl#h88sl#h88sl .atc{border-radius:0}
#h88sl#h88sl#h88sl .pc-n{align-content:end}
#h88sl#h88sl#h88sl .list .pc-n{align-content:normal}
}

/* EY search-card-20261104: search results only. Match the homepage's square,
   full-width hover action; keep the existing price markup and WooCommerce AJAX.
   Removing the department cell also removes its minimum-height from the row. */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
body.search #h88sl#h88sl#h88sl .lh-sv,
body.search #h88sl#h88sl#h88sl .res .grid > .endb{display:none}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list){background:#fff}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) > .pc{border-radius:0}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) > .pc:not(:hover):not(:focus-within){box-shadow:1px 0 0 var(--line)}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .pc-n{align-content:end}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .pc-s:empty{min-height:0;margin-top:0}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .atc-w{top:100%;left:0;right:0;margin:0;height:38px;padding:0;overflow:visible;box-sizing:border-box}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .atc{height:38px;border-radius:0;opacity:0;transform:none;clip-path:inset(0 0 100% 0);pointer-events:none}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .pc:is(:hover,:focus-within) .atc{opacity:1;clip-path:inset(0 -30px -30px -30px);pointer-events:auto}
}

/* EY search-card-20261104b: desktop search only. Hide the savings sort and
   sidebar example badge; align grid titles and prices with equal image boxes
   and exactly two top-aligned title lines. Keep the square, flush cart action. */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
body.search #h88sl#h88sl#h88sl .sortbar .sb[data-sort="saving"]{display:none}
body.search #h88sl#h88sl#h88sl .side .spro .sp-ex .svx{visibility:hidden}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .pc-img{height:145px;flex:0 0 145px;aspect-ratio:auto}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .pc-img img{width:100%;height:100%;object-fit:contain}
body.search #h88sl#h88sl#h88sl .res .grid:not(.list) .pc-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis;line-height:1.35;height:2.7em;min-height:2.7em;max-height:2.7em;flex:0 0 auto;align-content:start;-webkit-box-pack:start}
}

/* EY 2026-11-04 19:34: hide END OF LIST row on PC search (keep pager when present) */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){body.search #h88sl#h88sl .endl:not(:has(.pgs)){display:none}body.search #h88sl#h88sl .endl .c{display:none}}