/* 88HARDWARE homepage r15 (PC only). Generated by src/build-css.js from design/homepage-r15.html. */
@font-face{font-family:"H88R15 Inter";src:url(fonts/inter-r15.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"H88R15 Archivo";src:url(fonts/archivo-sx-r15.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
#h88r15{display:none}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
main#main-content.h88-r15-on{max-width:none!important;width:auto!important;margin:0!important;padding:0!important}
main#main-content.h88-r15-on>:not(#h88r15){display:none!important}
#h88r15#h88r15{display:block;all:revert;display:block;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:start;text-indent:0;white-space:normal;color:#16191E}
#h88r15#h88r15 :where(:not(svg,svg *,img)){all:revert}
#h88r15#h88r15 :where(img){max-width:none;border:0;box-shadow:none;margin:0;padding:0}
#h88r15#h88r15 .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* 88HARDWARE Homepage r15 - wide and short; top area sized as r13. */
#h88r15#h88r15{
  --red:#D7000F; --red-2:#B4000C; --red-tint:#FFF0F1;
  --ink:#16191E; --ink-2:#3A414C; --mute:#5C6470; --strike:#6E7682;
  --line:#E6E8EC; --line-2:#D6DAE0; --ground:#F2F3F5; --paper:#FFFFFF; --plate:#F4F5F7;
  --yellow:#FFC72C; --yellow-2:#FFB800; --yellow-tint:#FFF5D6; --yellow-ink:#2B1D00;
  --char:#17191D;
  --display:"H88R15 Archivo","H88R15 Inter","Arial Narrow",Arial,sans-serif;
  --text:"H88R15 Inter",Arial,sans-serif;
  --wrap:min(1600px,calc(100% - 152px));
  --catw:232px; --hgap:16px; --hink:0px;
  --r:16px; --r-m:12px; --r-s:8px;
  --sh:0 1px 2px rgba(22,25,30,.05),0 8px 24px -18px rgba(22,25,30,.25);
  --sh-h:0 24px 44px -24px rgba(22,25,30,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
  --pop:cubic-bezier(.3,1.6,.5,1);
  color-scheme:light;
}
#h88r15#h88r15,#h88r15#h88r15 *{box-sizing:border-box}
#h88r15#h88r15{margin:0;background:var(--ground);color:var(--ink);font:14px/1.5 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased}
#h88r15#h88r15 a{color:inherit;text-decoration:none}
#h88r15#h88r15 button,#h88r15#h88r15 input{font:inherit}
#h88r15#h88r15 button{cursor:pointer}
#h88r15#h88r15 :focus-visible{outline:3px solid #E0A300;outline-offset:2px}
#h88r15#h88r15 :where(h1,h2,h3,h4,p,ul,ol){margin:0}
#h88r15#h88r15 :where(ul,ol){list-style:none;padding:0}
#h88r15#h88r15 button{border:0;background:none;padding:0;color:inherit}
#h88r15#h88r15 [hidden]{display:none!important}
#h88r15#h88r15 .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;--acc:#E6E8EC;--ib:#fff}
#h88r15#h88r15 .duo{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#h88r15#h88r15 .wrap{width:var(--wrap);margin-left:auto;margin-right:auto}
#h88r15#h88r15 .ph{display:block;background:center/contain no-repeat}
#h88r15#h88r15 .cut{display:block;background:center/contain no-repeat;filter:drop-shadow(0 18px 18px rgba(40,0,4,.32))}
#h88r15#h88r15 .lg{display:block;background:center/contain no-repeat}

/* ---------- live nav: the ink of "H" in Home sits on the hero's left edge ---------- */
/* ---------- type ---------- */
#h88r15#h88r15 .eyebrow{display:inline-flex;align-items:center;gap:6px;font:800 13px/18px var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
#h88r15#h88r15 .eyebrow svg{width:14px;height:14px;fill:currentColor}
#h88r15#h88r15 .h2{font:900 34px/1.02 var(--display);font-stretch:80%;letter-spacing:-.005em;color:var(--ink)}
#h88r15#h88r15 .pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:999px;font:700 15px/1 var(--text);white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .2s,transform .2s var(--ease)}
#h88r15#h88r15 .pill .ico{width:16px;height:16px;stroke-width:2.5;transition:transform .2s}
#h88r15#h88r15 .pill:hover .ico,#h88r15#h88r15 a:hover>.pill .ico{transform:translateX(3px)}
#h88r15#h88r15 .pill:active{transform:translateY(1px)}
#h88r15#h88r15 .pill-yellow{background:var(--yellow);color:var(--yellow-ink);box-shadow:0 10px 22px -12px rgba(90,40,0,.75)}
#h88r15#h88r15 .pill-yellow:hover{background:#FFD24D}
#h88r15#h88r15 .pill-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65)}
#h88r15#h88r15 .pill-ghost:hover{background:#fff;color:var(--red);box-shadow:none}
#h88r15#h88r15 .pill-red{background:var(--red);color:#fff;box-shadow:0 12px 22px -14px rgba(160,0,10,.9)}
#h88r15#h88r15 .pill-red:hover{background:var(--red-2)}
#h88r15#h88r15 .pill-white{background:#fff;color:var(--ink);box-shadow:0 10px 22px -14px rgba(0,0,0,.6)}
#h88r15#h88r15 .pill-ink{background:var(--ink);color:#fff}
#h88r15#h88r15 .pill-blue{background:#0B5ED7;color:#fff;box-shadow:0 10px 22px -12px rgba(11,79,179,.8)}
#h88r15#h88r15 .pill-blue:hover{background:#0A4FB6}
#h88r15#h88r15 .pill-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
#h88r15#h88r15 .pill-line:hover{color:var(--red);box-shadow:inset 0 0 0 1.5px var(--red)}
#h88r15#h88r15 .link{display:inline-flex;align-items:center;gap:3px;font:700 14px/18px var(--text);color:var(--red);white-space:nowrap}
#h88r15#h88r15 .link .ico{width:14px;height:14px;stroke-width:2.5;transition:transform .2s}
#h88r15#h88r15 a:hover .link .ico,#h88r15#h88r15 .link:hover .ico{transform:translateX(3px)}
#h88r15#h88r15 .chip-logo{display:inline-grid;place-items:center;height:34px;padding:0 12px;border-radius:9px;background:#fff;box-shadow:0 8px 18px -12px rgba(0,0,0,.5)}
#h88r15#h88r15 .chip-logo .lg{width:84px;height:22px}

/* ---------- price ---------- */
#h88r15#h88r15 .mp{display:inline-block;font:900 30px/1 var(--display);font-stretch:78%;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
#h88r15#h88r15 .mp small{font-size:max(13px,.44em);font-weight:900;margin-right:2px;vertical-align:.12em}
#h88r15#h88r15 .mp i{font-style:normal;font-size:max(13px,.52em);vertical-align:.6em;margin-left:1px}
#h88r15#h88r15 .np{font-size:13px;color:var(--strike);white-space:nowrap;font-variant-numeric:tabular-nums}
#h88r15#h88r15 .np s,#h88r15#h88r15 .np del{text-decoration-thickness:1.3px}
#h88r15#h88r15 .save{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;background:var(--yellow);color:var(--yellow-ink);font:800 13px/1 var(--text);font-style:normal;white-space:nowrap}
#h88r15#h88r15 .off{position:absolute;z-index:2;left:0;top:0;height:24px;display:inline-flex;align-items:center;padding:0 8px;border-radius:7px;background:var(--red);color:#fff;font:800 13px/1 var(--text)}
#h88r15#h88r15 .pline{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}

/* =================== HERO =================== */
#h88r15#h88r15 .hero{position:relative;padding:16px 0 76px;color:#fff;overflow:hidden;
  background:radial-gradient(42% 70% at 76% 40%,rgba(255,255,255,.2),transparent 70%),radial-gradient(50% 80% at 0 100%,rgba(90,0,8,.45),transparent 70%),linear-gradient(165deg,#E8000F 0%,#D3000E 52%,#AE000C 100%)}
#h88r15#h88r15 .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask:radial-gradient(60% 80% at 70% 40%,#000 20%,transparent 75%);mask:radial-gradient(60% 80% at 70% 40%,#000 20%,transparent 75%);pointer-events:none}
#h88r15#h88r15 .hero-in{position:relative;z-index:1;display:grid;grid-template-columns:var(--catw) minmax(0,1fr);gap:var(--hgap);height:468px}

/* categories */
#h88r15#h88r15 .cats{position:relative;z-index:7;display:grid;grid-template-rows:repeat(13,minmax(0,1fr));padding:10px 0;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 24px 44px -28px rgba(60,0,6,.8)}
#h88r15#h88r15 .cat{position:relative;min-width:0;display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;font:500 13.5px/18px var(--text);white-space:nowrap;transition:background-color .15s,color .15s}
#h88r15#h88r15 .cat .ico{width:18px;height:18px;stroke-width:1.7;color:var(--ink-2);transition:color .15s}
#h88r15#h88r15 .cat span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#h88r15#h88r15 .cat .chev{position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;stroke-width:2.4;color:var(--red);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .2s}
#h88r15#h88r15 .cat:hover span,#h88r15#h88r15 .cat.on span{padding-right:12px}
#h88r15#h88r15 .cat::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:0 3px 3px 0;background:var(--red);transform:scaleY(0);transition:transform .2s var(--ease)}
#h88r15#h88r15 .cat:hover,#h88r15#h88r15 .cat.on{background:var(--red-tint);color:var(--red)}
#h88r15#h88r15 .cat:hover .ico,#h88r15#h88r15 .cat.on .ico{color:var(--red);--acc:#FFD3D7}
#h88r15#h88r15 .cat:hover .chev,#h88r15#h88r15 .cat.on .chev{opacity:1;transform:none}
#h88r15#h88r15 .cat:hover::before,#h88r15#h88r15 .cat.on::before{transform:scaleY(1)}
#h88r15#h88r15 .cats.flash{animation:h88r15-flash 1.1s ease}
@keyframes h88r15-flash{30%{box-shadow:0 0 0 4px rgba(255,199,44,.75)}}

/* stage: copy + hanging member-price tag */
#h88r15#h88r15 .stage{position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);min-width:0;container-type:inline-size}
#h88r15#h88r15 .copy{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 0 10px}
#h88r15#h88r15 .copy .eyebrow{color:var(--yellow)}
#h88r15#h88r15 .h1{margin-top:14px;font:900 min(7.4cqw,70px)/.9 var(--display);font-stretch:76%;letter-spacing:-.012em;margin-left:-.06em;text-shadow:0 10px 30px rgba(90,0,8,.25)}
#h88r15#h88r15 .h1 span{display:block;white-space:nowrap}
#h88r15#h88r15 .h1 em{position:relative;font-style:normal;color:var(--yellow)}
#h88r15#h88r15 .h1 em::after{content:"";position:absolute;left:.04em;right:.1em;bottom:-.04em;height:.09em;border-radius:.05em;background:var(--yellow);transform-origin:left;animation:h88r15-ul 1s var(--ease) .5s both}
@keyframes h88r15-ul{from{transform:scaleX(0)}}
#h88r15#h88r15 .copy .sub{margin-top:18px;max-width:34ch;font:400 16px/25px var(--text);color:#FFE3E6}
#h88r15#h88r15 .cta{display:flex;align-items:center;gap:12px;margin-top:26px}
#h88r15#h88r15 .assure{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font:600 13px/18px var(--text);color:#FFE3E6}
#h88r15#h88r15 .assure li{display:inline-flex;align-items:center;gap:6px}
#h88r15#h88r15 .assure .ico{width:16px;height:16px;stroke-width:2.6;color:var(--yellow)}

#h88r15#h88r15 .tagstage{position:relative;min-width:0}
#h88r15#h88r15 .rays{position:absolute;right:-6%;top:-14%;width:min(86%,520px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.09) 0 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 25%,transparent);mask:radial-gradient(closest-side,#000 25%,transparent);animation:h88r15-spin 90s linear infinite;pointer-events:none}
@keyframes h88r15-spin{to{transform:rotate(1turn)}}
#h88r15#h88r15 .prod::before{content:"";position:absolute;left:10%;right:10%;bottom:-4%;height:13%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(255,255,255,.07) 70%,transparent);box-shadow:0 18px 26px -10px rgba(70,0,5,.35)}
#h88r15#h88r15 .spk{position:absolute;width:18px;height:18px;color:#FFE08A;opacity:0;animation:h88r15-twinkle 3.6s ease-in-out infinite;pointer-events:none}
#h88r15#h88r15 .spk svg{width:100%;height:100%;fill:currentColor}
#h88r15#h88r15 .tagstage{--tagw:264px}
#h88r15#h88r15 .spk.s0{left:calc(var(--tagw) + 4px);top:6%}#h88r15#h88r15 .spk.s1{right:0;top:0;width:14px;height:14px;animation-delay:1.1s}#h88r15#h88r15 .spk.s2,#h88r15#h88r15 .spk.s3{display:none}
@keyframes h88r15-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.6) rotate(90deg)}}
#h88r15#h88r15 .slide{position:absolute;inset:0;visibility:hidden}
#h88r15#h88r15 .slide.on{visibility:visible}
#h88r15#h88r15 .prod{position:absolute;left:calc(var(--tagw) + 30px);right:0;top:0;bottom:100px;opacity:0;transform:translateX(40px) scale(.94);transition:opacity .55s ease,transform .8s var(--ease)}
#h88r15#h88r15 .slide.on .prod{opacity:1;transform:none}
#h88r15#h88r15 .slide.on .prod .cut{animation:h88r15-float 6s ease-in-out .8s infinite}
@keyframes h88r15-float{50%{transform:translateY(-8px)}}
#h88r15#h88r15 .prod .cut{width:100%;height:100%}
#h88r15#h88r15 .tagwrap{position:absolute;left:0;top:9%;width:var(--tagw);transform-origin:50% -40px;opacity:0;transform:rotate(-14deg) translateY(-12px);transition:opacity .4s ease .2s,transform .9s cubic-bezier(.3,1.5,.45,1) .2s}
#h88r15#h88r15 .slide.on .tagwrap{opacity:1;transform:none;animation:h88r15-sway 4.6s ease-in-out 1.4s infinite}
@keyframes h88r15-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}
#h88r15#h88r15 .string{position:absolute;left:50%;top:-58px;width:2px;height:66px;margin-left:-1px;background:linear-gradient(#FFE08A,#E8B53A);border-radius:2px}
#h88r15#h88r15 .string::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF2C4,#C99A1E);box-shadow:0 2px 3px rgba(0,0,0,.35)}
#h88r15#h88r15 .tag{position:relative;display:block;padding:26px 18px 14px;border-radius:18px 18px 16px 16px;background:linear-gradient(#fff,#fff) padding-box;color:var(--ink);box-shadow:0 30px 50px -24px rgba(50,0,4,.9);
  -webkit-mask:radial-gradient(circle 7px at 50% 14px,#0000 96%,#000);mask:radial-gradient(circle 7px at 50% 14px,#0000 96%,#000)}
#h88r15#h88r15 .tag::before{content:"";position:absolute;left:50%;top:5px;width:18px;height:18px;margin-left:-9px;border-radius:50%;box-shadow:inset 0 0 0 2px #E7E9ED}
#h88r15#h88r15 .tag::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--red),#FF4A2B 50%,var(--yellow))}
#h88r15#h88r15 .tag-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#h88r15#h88r15 .tag-pct{height:22px;display:inline-flex;align-items:center;padding:0 7px;border-radius:6px;background:var(--red);color:#fff;font:800 13px/1 var(--text)}
#h88r15#h88r15 .tag-n{display:block;margin-top:8px;font:600 13px/18px var(--text);color:var(--ink-2);max-width:22ch}
#h88r15#h88r15 .tag-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed #E2E4E8;font:600 13px/18px var(--text);color:var(--mute)}
#h88r15#h88r15 .tag-row s,#h88r15#h88r15 .tag-row del{position:relative;font:700 16px/1 var(--text);color:var(--strike);text-decoration:none}
#h88r15#h88r15 .tag-row s::after,#h88r15#h88r15 .tag-row del::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s ease .95s}
#h88r15#h88r15 .slide.on .tag-row s::after,#h88r15#h88r15 .slide.on .tag-row del::after{transform:scaleX(1)}
#h88r15#h88r15 .tag-m{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:6px}
#h88r15#h88r15 .tag-m b{font:800 13px/18px var(--text);color:var(--red);padding-bottom:8px;white-space:nowrap}
#h88r15#h88r15 .tag .mp{font-size:58px;letter-spacing:-.01em}
#h88r15#h88r15 .tag-sv{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;height:38px;padding:0 12px;border-radius:9px;background:var(--yellow);color:var(--yellow-ink);font:800 13px/1 var(--text);opacity:0;transform:scale(.92);transition:opacity .25s ease 1.6s,transform .45s var(--pop) 1.6s}
#h88r15#h88r15 .tag-sv b{font:900 25px/1 var(--display);font-stretch:80%}
#h88r15#h88r15 .slide.on .tag-sv{opacity:1;transform:none}
#h88r15#h88r15 .tag-go{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #F0F1F3}
#h88r15#h88r15 .tag-go>span:last-child{display:inline-flex;align-items:center;gap:3px;font:700 13px/18px var(--text);color:var(--red)}
#h88r15#h88r15 .tag-go .ico{width:14px;height:14px;stroke-width:2.6;transition:transform .2s}
#h88r15#h88r15 .tag:hover .tag-go .ico{transform:translateX(3px)}
#h88r15#h88r15 .bars{width:74px;height:18px;background:repeating-linear-gradient(90deg,#2A2F36 0 2px,transparent 2px 4px,#2A2F36 4px 5px,transparent 5px 8px,#2A2F36 8px 11px,transparent 11px 12px);opacity:.75}
/* deal switcher: product thumbnails with member prices */
#h88r15#h88r15 .tctl{position:absolute;z-index:5;right:0;bottom:34px;display:flex;align-items:center;gap:8px}
#h88r15#h88r15 .th{position:relative;display:flex;align-items:center;gap:6px;height:52px;padding:0 12px 0 6px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
#h88r15#h88r15 .th:hover{background:rgba(255,255,255,.24)!important;transform:translateY(-2px)}
#h88r15#h88r15 .th-i{width:40px;height:40px;background:center/contain no-repeat;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
#h88r15#h88r15 .th-p{font:900 17px/1 var(--display);font-stretch:80%;white-space:nowrap}
#h88r15#h88r15 .th i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left}
#h88r15#h88r15 .th.on{background:#fff!important;color:var(--red)!important;box-shadow:0 14px 24px -14px rgba(60,0,6,.9)}
#h88r15#h88r15 .th.on i{transform:scaleX(1)}
#h88r15#h88r15 .run .th.on i{animation:h88r15-fill var(--dwell,5s) linear both}
#h88r15#h88r15 .held .th.on i{animation:none}
@keyframes h88r15-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#h88r15#h88r15 .tctl .tp{width:32px;height:32px;margin-left:2px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.22)!important;color:#fff}
#h88r15#h88r15 .tctl .tp .ico{width:12px;height:12px;stroke-width:2.8}
#h88r15#h88r15 .tp .i-play{display:none}#h88r15#h88r15 .held .tp .i-play{display:block}#h88r15#h88r15 .held .tp .i-pause{display:none}

/* mega menu */
#h88r15#h88r15 .fly{position:absolute;z-index:6;left:calc(var(--catw) + var(--hgap));right:0;top:0;bottom:0;display:flex;flex-direction:column;padding:22px 26px 20px 30px;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 34px 60px -30px rgba(40,0,4,.75);opacity:0;visibility:hidden;transform:translateX(-10px);transition:opacity .2s ease,transform .3s var(--ease),visibility .2s}
#h88r15#h88r15 .fly.open{opacity:1;visibility:visible;transform:none}
#h88r15#h88r15 .fy-h{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
#h88r15#h88r15 .fy-h h3{font:800 19px/24px var(--text);white-space:nowrap}
#h88r15#h88r15 .fy-hot{flex:1;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
#h88r15#h88r15 .fy-hot a{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;background:var(--plate);font:500 13px/1 var(--text);color:var(--ink-2)}
#h88r15#h88r15 .fy-hot a:first-child{background:var(--red-tint);color:var(--red);font-weight:600}
#h88r15#h88r15 .fy-hot a:hover{background:var(--red);color:#fff}
#h88r15#h88r15 .fy-h .link{font-size:13px}
#h88r15#h88r15 .fy-b{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;margin-top:18px}
#h88r15#h88r15 .fy-g{column-count:3;column-gap:28px;min-height:0;overflow:hidden}
#h88r15#h88r15 .fy-g section{break-inside:avoid;margin-bottom:16px}
#h88r15#h88r15 .fy-g h4{margin:0 0 6px;font:800 14px/20px var(--text)}
#h88r15#h88r15 .fy-g h4 .nw{white-space:nowrap}
#h88r15#h88r15 .fy-g h4 .ico{width:13px;height:13px;margin-left:2px;vertical-align:-1px;stroke-width:2.5;color:var(--red)}
#h88r15#h88r15 .fy-g a{display:block;font:400 13.5px/25px var(--text);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s,transform .12s}
#h88r15#h88r15 .fy-g a:hover{color:var(--red);transform:translateX(2px)}
#h88r15#h88r15 .fy-r{display:flex;flex-direction:column;gap:12px;min-height:0;padding-left:22px;border-left:1px solid var(--line)}
#h88r15#h88r15 .fy-promo{position:relative;flex:none;display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:var(--r-m);background:linear-gradient(160deg,#FFF6D6,#FFE7A0);overflow:hidden}
#h88r15#h88r15 .fy-promo .eyebrow{font-size:13px}
#h88r15#h88r15 .fy-promo .pimg{display:block;height:84px;margin:2px 0 4px}
#h88r15#h88r15 .fy-promo .pimg>span{display:block;width:100%;height:100%;mix-blend-mode:multiply;transition:transform .35s}
#h88r15#h88r15 .fy-promo:hover .pimg>span{transform:scale(1.06)}
#h88r15#h88r15 .fy-promo b{font:700 13px/18px var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#h88r15#h88r15 .fy-promo .mp{font-size:26px}
#h88r15#h88r15 .fy-promo .off{left:auto;right:10px;top:10px}
#h88r15#h88r15 .fy-promo .save{margin-top:4px;align-self:flex-start}
#h88r15#h88r15 .fy-brands{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#h88r15#h88r15 .fy-brands a{display:grid;place-items:center;height:40px;border-radius:var(--r-s);box-shadow:inset 0 0 0 1px var(--line)}
#h88r15#h88r15 .fy-brands a:hover{box-shadow:inset 0 0 0 1.5px var(--red)}
#h88r15#h88r15 .fy-brands .lg{width:70px;height:22px}

/* =================== SHOP BY JOB: one compact row =================== */
#h88r15#h88r15 .jobs{position:relative;z-index:4;margin-top:-50px;display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border-radius:var(--r);box-shadow:0 22px 44px -26px rgba(22,25,30,.5)}
/* 2026-10-30 jobrow: 20 jobs in ONE row, whole tiles only. r15.js sets --jn = how many ~112px tiles fit (9 is the no-JS fallback);
   the rest scroll sideways (snap per tile, no visible scrollbar) with the small arrows on each side. */
#h88r15#h88r15 .jobs ul{--jn:9;flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / var(--jn));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
#h88r15#h88r15 .jobs ul::-webkit-scrollbar{display:none}
#h88r15#h88r15 .jobs li{min-width:0;scroll-snap-align:start}
#h88r15#h88r15 .jobs-arr{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#fff!important;color:var(--ink-2)!important;box-shadow:inset 0 0 0 1px var(--line-2),0 4px 10px -6px rgba(22,25,30,.45);transition:opacity .2s,color .15s,box-shadow .15s}
#h88r15#h88r15 .jobs-arr:hover{color:var(--red)!important;box-shadow:inset 0 0 0 1.5px var(--red),0 4px 10px -6px rgba(22,25,30,.45)}
#h88r15#h88r15 .jobs-arr .ico{width:16px;height:16px;stroke-width:2.4}
#h88r15#h88r15 .jobs-prev .ico{transform:rotate(180deg)}
#h88r15#h88r15 .jobs-arr:disabled{opacity:.3;cursor:default;pointer-events:none}
#h88r15#h88r15 .jt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 2px 6px;border-radius:var(--r-m);font:600 13px/16px var(--text);color:var(--ink-2);white-space:nowrap;transition:color .15s}
#h88r15#h88r15 .ji{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--plate);transition:background-color .2s,transform .3s var(--ease),box-shadow .2s}
#h88r15#h88r15 .ji svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;--duo:#FFD3D8;transition:stroke .2s}
#h88r15#h88r15 .jt:hover{color:var(--red)}
#h88r15#h88r15 .jt:hover .ji{background:var(--red);transform:translateY(-3px);box-shadow:0 12px 18px -10px rgba(160,0,10,.7)}
#h88r15#h88r15 .jt:hover .ji svg{stroke:#fff;--duo:rgba(255,255,255,.32);animation:h88r15-wig .5s ease}
@keyframes h88r15-wig{30%{transform:rotate(-9deg)}65%{transform:rotate(6deg)}}

/* =================== Stanley strip =================== */
#h88r15#h88r15 .strip{position:relative;display:flex;align-items:center;gap:30px;height:196px;padding:0 32px;border-radius:20px;overflow:hidden;color:var(--ink);background:linear-gradient(105deg,#FFD000 0 38%,#151515 38.1% 100%);box-shadow:var(--sh)}
#h88r15#h88r15 .strip::after{content:"";position:absolute;inset:auto 0 0 0;height:8px;background:repeating-linear-gradient(135deg,#151515 0 14px,#FFD000 14px 28px)}
#h88r15#h88r15 .st-l{flex:none;width:330px;display:grid;justify-items:start;gap:8px}
#h88r15#h88r15 .st-l .ad-eb{color:#3A2E00}
#h88r15#h88r15 .st-l b{font:900 32px/1 var(--display);font-stretch:80%}
#h88r15#h88r15 .st-l .upto{background:#151515;color:#fff}
#h88r15#h88r15 .st-l .upto b{margin:0 0 0 4px;font:800 13px/1 var(--text);color:var(--yellow)}
#h88r15#h88r15 .st-items{flex:1;min-width:0;display:flex;align-items:flex-end;justify-content:space-around;gap:12px;height:100%;padding:14px 0 22px}
#h88r15#h88r15 .st-i{flex:1;max-width:170px;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
#h88r15#h88r15 .st-i .cut{width:100%;height:110px;transition:transform .45s var(--ease)}
#h88r15#h88r15 .strip:hover .st-i .cut{transform:translateY(-6px) rotate(-4deg)}
#h88r15#h88r15 .st-i:nth-child(2) .cut{transition-delay:.04s}#h88r15#h88r15 .st-i:nth-child(3) .cut{transition-delay:.08s}#h88r15#h88r15 .st-i:nth-child(4) .cut{transition-delay:.12s}
#h88r15#h88r15 .st-p{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;background:#fff;box-shadow:0 8px 16px -10px rgba(0,0,0,.7)}
#h88r15#h88r15 .st-p .mp{font-size:21px}
#h88r15#h88r15 .strip .pill{flex:none}

/* ---------- toast ---------- */
#h88r15#h88r15 .r15-toast{position:fixed;right:calc(var(--h88-tool-rail-width,70px) + 24px);bottom:24px;z-index:2147483001;display:flex;align-items:center;gap:12px;max-width:440px;padding:12px 12px 12px 14px;background:var(--char);color:#fff;border-radius:var(--r-m);box-shadow:0 22px 44px -20px rgba(0,0,0,.65);font:14px/1.35 var(--text);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
#h88r15#h88r15 .r15-toast.on{opacity:1;transform:none;pointer-events:auto}
#h88r15#h88r15 .r15-toast .tk{flex:none;width:26px;height:26px;border-radius:50%;background:var(--red);position:relative}
#h88r15#h88r15 .r15-toast .tk:after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
#h88r15#h88r15 .r15-toast .tm{display:grid;min-width:0}
#h88r15#h88r15 .r15-toast .tm b{font-weight:700}
#h88r15#h88r15 .r15-toast .tm span{color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h88r15#h88r15 .r15-toast .tv{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;text-decoration:none}
#h88r15#h88r15 .r15-toast .tv:hover{background:var(--red-2)}
#h88r15#h88r15 .r15-toast .tx{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.7);font:20px/1 var(--text);cursor:pointer}
#h88r15#h88r15 .r15-toast .tx:hover{color:#fff;background:rgba(255,255,255,.12)}
#h88r15#h88r15 .qv-add[disabled]{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){#h88r15#h88r15 .r15-toast{transition:none}}


/* =================== r15 sections: wide and short, close together =================== */
#h88r15#h88r15 .blk{margin-top:16px}
#h88r15#h88r15 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#h88r15#h88r15 .jobs-w+.blk{margin-top:18px}

/* ---------- right tool rail: always visible, solid, flush against the window edge (like Taobao) ---------- */

/* ---------- product card (r15.1: Add to cart appears over the card bottom on hover, no reserved space) ---------- */
#h88r15#h88r15 .pc{position:relative;display:flex;flex-direction:column;min-width:0;padding:12px 12px 14px;background:#fff;transition:box-shadow .2s}
#h88r15#h88r15 .pc:hover,#h88r15#h88r15 .pc:has(:focus-visible){z-index:1;box-shadow:inset 0 0 0 1.5px var(--red)}
#h88r15#h88r15 .pc-img{position:relative;display:block;height:var(--ih,118px);overflow:hidden;border-radius:8px}
#h88r15#h88r15 .pc-img .ph{width:100%;height:100%;transition:transform .45s var(--ease)}
#h88r15#h88r15 .pc:hover .pc-img .ph{transform:scale(1.05)}
#h88r15#h88r15 .pc-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin:10px 0 6px;font:500 13.5px/1.35 var(--text);color:var(--ink)}
#h88r15#h88r15 .pc-n:hover{color:var(--red)}
#h88r15#h88r15 .pr{display:grid;gap:5px;justify-items:start;margin-bottom:10px}
#h88r15#h88r15 .pr .mp{font-size:24px}
#h88r15#h88r15 .pr .pline{min-height:26px}
#h88r15#h88r15 .sslot{min-height:22px;display:flex;align-items:center;gap:5px;white-space:nowrap}
#h88r15#h88r15 .sslot .save{height:22px}
#h88r15#h88r15 .sslot .off{position:static;height:22px;padding:0 7px;border-radius:6px}
#h88r15#h88r15 .pc-add{margin-top:auto;width:100%;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#fff!important;color:var(--red)!important;box-shadow:inset 0 0 0 1.5px var(--red);font:700 13.5px/1 var(--text);opacity:0;transform:translateY(6px);transition:opacity .18s,transform .25s var(--ease),background-color .15s,color .15s}
#h88r15#h88r15 .pc:hover .pc-add,#h88r15#h88r15 .pc:has(:focus-visible) .pc-add{opacity:1;transform:none}
#h88r15#h88r15 .pc:hover .pc-add,#h88r15#h88r15 .pc-add:hover,#h88r15#h88r15 .pc-add.solid{background:var(--red)!important;color:#fff!important}
#h88r15#h88r15 .pc-add.solid:hover{background:var(--red-2)!important}
#h88r15#h88r15 .pc-add.done{background:#13844B!important;color:#fff!important;box-shadow:none}
#h88r15#h88r15 .rv .off{animation:h88r15-punch .5s var(--pop) both}
@keyframes h88r15-punch{from{transform:scale(.4) rotate(-14deg)}}
#h88r15#h88r15 .pc.new{animation:h88r15-rise .4s var(--ease) both}
@keyframes h88r15-rise{from{opacity:0;transform:translateY(8px)}}

/* ---------- member deals: one row ---------- */
#h88r15#h88r15 .deals{--dn:6;display:grid;grid-template-columns:var(--dsw,236px) minmax(0,1fr);background:#fff;border-radius:16px;box-shadow:var(--sh);overflow:hidden}
#h88r15#h88r15 .dl-side{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:22px 22px 22px;color:#fff;overflow:hidden;
  background:radial-gradient(90% 45% at 100% 100%,rgba(255,199,44,.28),transparent 70%),radial-gradient(80% 50% at 0 0,rgba(255,255,255,.14),transparent 70%),linear-gradient(165deg,#E8000F 0%,#C2000D 60%,#96000A 100%)}
#h88r15#h88r15 .dl-side::after{content:"";position:absolute;right:-46px;bottom:-40px;width:170px;height:170px;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='%23fff' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");pointer-events:none}
#h88r15#h88r15 .star-logo{display:block;width:112px;height:34px;background:left center/contain no-repeat}
#h88r15#h88r15 .dl-word{margin-top:12px;font:italic 900 16px/1 var(--display);font-stretch:88%;letter-spacing:.06em;text-transform:uppercase;color:#FFD9DC}
#h88r15#h88r15 .dl-side h2{margin-top:10px;font:900 23px/1.08 var(--display);font-stretch:80%}
#h88r15#h88r15 .dl-side h2 span{display:block}
#h88r15#h88r15 .dl-side h2 b{display:block;margin:4px 0 2px;font-size:60px;line-height:.92;color:var(--yellow);font-weight:900}
#h88r15#h88r15 .dl-side p{margin-top:10px;font:400 13.5px/20px var(--text);color:#FFE1E4}
#h88r15#h88r15 .dl-side .pill{margin-top:auto;height:40px;padding:0 18px;font-size:14px}
#h88r15#h88r15 .dl-row{display:grid;grid-template-columns:repeat(var(--dn),minmax(0,1fr));gap:1px;background:var(--line)}
#h88r15#h88r15 .dl-row .pc{--ih:150px;padding-top:14px}
#h88r15#h88r15 .dotw{background:linear-gradient(180deg,#FFF6DA 0,#fff 46%)}
#h88r15#h88r15 .dotw-l{position:absolute;z-index:3;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:7px;background:var(--red);color:#fff;font:800 13px/1 var(--text)}
#h88r15#h88r15 .dotw-l svg{width:13px;height:13px;fill:var(--yellow)}
#h88r15#h88r15 .dotw .pc-img{margin-top:24px;height:126px}

/* ---------- services ---------- */
#h88r15#h88r15 .svcbar{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:16px;box-shadow:var(--sh);overflow:hidden}
#h88r15#h88r15 .sv{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:14px;row-gap:6px;padding:18px 20px 16px;transition:background-color .2s}
#h88r15#h88r15 .sv+.sv::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--line)}
#h88r15#h88r15 .sv-i{grid-row:1/3;align-self:start;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;transition:transform .35s var(--ease)}
#h88r15#h88r15 .sv-i .duo{width:26px;height:26px;--duo:rgba(255,255,255,.3)}
#h88r15#h88r15 .s-club .sv-i{background:linear-gradient(145deg,#FF2A35,#C4000D)}
#h88r15#h88r15 .s-club .sv-i .duo{color:#fff;--duo:var(--yellow)}
#h88r15#h88r15 .s-biz .sv-i{background:linear-gradient(145deg,#3A414C,#16191E)}
#h88r15#h88r15 .s-biz .sv-i .duo{--duo:rgba(255,199,44,.55)}
#h88r15#h88r15 .s-sup .sv-i{background:linear-gradient(145deg,#2D7BE0,#0B4FB3)}
#h88r15#h88r15 .sv-i.stores{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:7px;background:#F3F4F6;box-shadow:inset 0 0 0 1px var(--line)}
#h88r15#h88r15 .sv-i.stores img{width:100%;height:100%;object-fit:contain;border-radius:6px;background:#fff}
#h88r15#h88r15 .sv-t{display:grid;gap:2px;align-content:start}
#h88r15#h88r15 .sv-t b{font:800 15.5px/21px var(--text);color:var(--ink)}
#h88r15#h88r15 .sv-t span{font:400 13px/19px var(--text);color:var(--mute)}
#h88r15#h88r15 .sv-go{display:inline-flex;align-items:center;gap:3px;font:700 13.5px/18px var(--text);color:var(--red)}
#h88r15#h88r15 .sv-go .ico{width:14px;height:14px;stroke-width:2.6;transition:transform .2s}
#h88r15#h88r15 .sv:hover{background:#FFF8F6}
#h88r15#h88r15 .sv:hover .sv-i{transform:translateY(-2px) rotate(-6deg)}
#h88r15#h88r15 .sv:hover .sv-go .ico{transform:translateX(4px)}

/* ---------- category sections: EY's reference layout - slim header; banner + popular | 2 x 4 flush grid | 2 tall promos ---------- */
#h88r15#h88r15 .floor{background:#fff;border-radius:16px;box-shadow:var(--sh);overflow:hidden}
#h88r15#h88r15 .fh{display:flex;align-items:center;gap:12px;height:58px;padding:0 20px;border-bottom:1px solid var(--line)}
#h88r15#h88r15 .fi{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--red);color:#fff}
#h88r15#h88r15 .fi .duo{width:20px;height:20px;--duo:rgba(255,255,255,.28)}
#h88r15#h88r15 .fh h2{font:800 22px/1 var(--text);letter-spacing:-.01em;white-space:nowrap}
#h88r15#h88r15 .upto{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:var(--yellow-tint);color:#7A4B00;font:700 13px/1 var(--text);white-space:nowrap}
#h88r15#h88r15 .upto b{margin-left:4px;color:var(--red);font-weight:800}
#h88r15#h88r15 .ftabs{margin-left:auto;display:flex;align-items:center;min-width:0;overflow:hidden}
#h88r15#h88r15 .ftabs button{position:relative;flex:none;height:30px;padding:0 14px;font:500 14px/1 var(--text);color:var(--ink-2)!important;white-space:nowrap;transition:color .15s}
#h88r15#h88r15 .ftabs button+button::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line-2)}
#h88r15#h88r15 .ftabs button:hover{color:var(--red)!important}
#h88r15#h88r15 .ftabs button[aria-selected=true]{color:var(--red)!important;font-weight:700}
#h88r15#h88r15 .fh .more{flex:none;display:inline-flex;align-items:center;gap:2px;margin-left:14px;font:700 14px/1 var(--text);color:var(--ink)}
#h88r15#h88r15 .fh .more .ico{width:14px;height:14px;stroke-width:2.6;transition:transform .2s}
#h88r15#h88r15 .fh .more:hover{color:var(--red)}
#h88r15#h88r15 .fh .more:hover .ico{transform:translateX(3px)}
#h88r15#h88r15 .fb{display:grid;grid-template-columns:22.6% minmax(0,1fr) 20.4%}
#h88r15#h88r15 .fl{display:flex;flex-direction:column;min-width:0}
#h88r15#h88r15 .fg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;align-content:start;background:var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line)}
#h88r15#h88r15 .fg .pc{--ih:100px;padding:14px 14px 12px}
#h88r15#h88r15 .fg .pc:hover,#h88r15#h88r15 .fg .pc:has(:focus-visible){box-shadow:inset 0 0 0 1.5px var(--red)}
#h88r15#h88r15 .fg .pc-n{margin:10px 0 4px}
#h88r15#h88r15 .fg .pr{margin-bottom:8px}
#h88r15#h88r15 .fg .pc-add{height:32px}
/* tab with fewer than 8 products: the gap becomes a See all tile */
#h88r15#h88r15 .ffill{min-height:var(--rh,0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:#FAFAFB;text-align:center;transition:background-color .2s}
#h88r15#h88r15 .ffill:hover{background:#FFF1F2}
#h88r15#h88r15 .ff-i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--red);color:#fff}
#h88r15#h88r15 .ff-i .duo{width:24px;height:24px;--duo:rgba(255,255,255,.28)}
#h88r15#h88r15 .ffill b{font:800 15px/20px var(--text);color:var(--ink)}
#h88r15#h88r15 .ffill.fb2{flex-direction:row;justify-content:flex-start;gap:16px;padding:16px 24px;text-align:left}
#h88r15#h88r15 .ff-t{display:grid;gap:3px;margin-right:auto}
#h88r15#h88r15 .ff-t span{font:400 13px/19px var(--text);color:var(--mute)}
#h88r15#h88r15 .ffill .pill{height:38px;background:#fff}
#h88r15#h88r15 .ffill.fb2.narrow{flex-direction:column;justify-content:center;text-align:center;padding:16px}
#h88r15#h88r15 .ffill.fb2.narrow .ff-t{margin:0}#h88r15#h88r15 .ffill.fb2.narrow .ff-t span{display:none}
/* popular, under the banner */
#h88r15#h88r15 .pop{padding:14px 16px 16px}
#h88r15#h88r15 .pop>b{display:block;margin-bottom:10px;font:800 13px/18px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
#h88r15#h88r15 .pop>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#h88r15#h88r15 .pop a{height:32px;display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:999px;background:var(--plate);font:500 13px/1 var(--text);color:var(--ink-2);white-space:nowrap;overflow:hidden;transition:background-color .15s,color .15s}
#h88r15#h88r15 .pop a:hover{background:var(--red);color:#fff}
/* tall promo cards: words on top, the photo in its own area, link at the bottom */
#h88r15#h88r15 .t-sun{background:radial-gradient(70% 55% at 80% 85%,#fff,transparent 70%),linear-gradient(160deg,#FFF6D6,#FFE39A)}
#h88r15#h88r15 .t-sky{background:radial-gradient(70% 55% at 80% 85%,#fff,transparent 70%),linear-gradient(160deg,#EEF5FF,#D3E5FF)}
#h88r15#h88r15 .t-rose{background:radial-gradient(70% 55% at 80% 85%,#fff,transparent 70%),linear-gradient(160deg,#FFF0EE,#FFD6D2)}
#h88r15#h88r15 .kit-row{display:flex;align-items:center;gap:8px}
#h88r15#h88r15 .kit-l{font:700 13px/1 var(--text);color:var(--mute)}
/* the banner sits flush in the top-left of the section */
#h88r15#h88r15 .ad{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;isolation:isolate}
#h88r15#h88r15 .ad-t{position:relative;z-index:3;display:grid;justify-items:start;padding:20px 20px 0;translate:calc(var(--px,0)*3px) calc(var(--py,0)*2px);transition:translate .5s var(--ease)}
#h88r15#h88r15 .ad-t .chip-logo{margin-bottom:12px}
#h88r15#h88r15 .ad-eb{font:800 13px/18px var(--text);letter-spacing:.08em;text-transform:uppercase}
#h88r15#h88r15 .ad h3{margin-top:6px;font:900 30px/.94 var(--display);font-stretch:80%}
#h88r15#h88r15 .ad h3 span{display:block}
#h88r15#h88r15 .ad-s{display:none}
#h88r15#h88r15 .ad-price{display:flex;align-items:baseline;gap:6px;margin-top:8px;font:700 13px/1 var(--text)}
#h88r15#h88r15 .ad-price small{font-size:13px}
#h88r15#h88r15 .ad-price .mp{font-size:24px;color:inherit}
#h88r15#h88r15 .a-h88 .ad-price{color:var(--yellow)}
#h88r15#h88r15 .ad .pill{margin-top:12px;height:36px;padding:0 15px;font-size:14px}
#h88r15#h88r15 .ad-art{position:relative;flex:1;min-height:70px;margin:10px 14px 14px;pointer-events:none}
#h88r15#h88r15 .ad-art>*{position:absolute;inset:0;width:auto;height:auto;translate:calc(var(--px,0)*-8px) calc(var(--py,0)*-6px);transition:translate .5s var(--ease),transform .6s var(--ease)}
#h88r15#h88r15 .ad:hover .ad-art>*{transform:scale(1.04) rotate(-2deg)}
#h88r15#h88r15 .a-h88{color:#fff;background:radial-gradient(70% 45% at 55% 82%,rgba(120,190,255,.38),transparent 70%),linear-gradient(165deg,#1566C4 0%,#0B3E8A 62%,#082F6A 100%)}
#h88r15#h88r15 .a-h88 .ad-eb{color:#A9D4FF}
#h88r15#h88r15 .a-philips{color:var(--ink);background:radial-gradient(70% 42% at 50% 80%,#fff 0,#fff 45%,rgba(255,255,255,0) 72%),linear-gradient(170deg,#EEF5FF 0%,#D6E7FC 100%)}
#h88r15#h88r15 .a-philips h3{color:#0B4FB3}
#h88r15#h88r15 .a-philips .k-alt-bulb{mix-blend-mode:multiply}
#h88r15#h88r15 .a-paint{color:var(--ink);background:radial-gradient(60% 40% at 60% 80%,rgba(255,255,255,.85),transparent 70%),linear-gradient(165deg,#FFE459,#FFC400)}
#h88r15#h88r15 .a-paint .ad-eb{color:#7A4B00}
#h88r15#h88r15 .a-paint .k-alt-roller{mix-blend-mode:multiply}
#h88r15#h88r15 .a-safe{color:var(--ink);background:radial-gradient(60% 40% at 60% 76%,rgba(255,255,255,.6),transparent 70%),linear-gradient(165deg,#FFE04F,#FFC21A)}
#h88r15#h88r15 .a-safe::after{content:"";position:absolute;z-index:3;inset:auto 0 0 0;height:14px;background:repeating-linear-gradient(135deg,#16191E 0 14px,#FFC72C 14px 28px)}
#h88r15#h88r15 .a-safe .ad-eb{color:#6B4A00}
#h88r15#h88r15 .a-safe .ad-art{margin-bottom:26px}

#h88r15#h88r15 .bsec{display:grid;grid-template-columns:330px minmax(0,1fr);gap:28px;align-items:center;padding:22px 22px 22px 30px;background:#fff;border-radius:16px;box-shadow:var(--sh)}

/* ---------- 第七: STAR CLUB trolley - products are added as it rolls along, the savings grow ---------- */
#h88r15#h88r15 .club{position:relative;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr) 336px;gap:24px;align-items:center;min-height:330px;padding:24px 24px 24px 34px;border-radius:16px;overflow:hidden;color:var(--ink);
  background:radial-gradient(55% 90% at 52% 100%,rgba(255,255,255,.42),transparent 70%),linear-gradient(160deg,#FFD84D 0%,#FFC72C 52%,#FFB300 100%)}
#h88r15#h88r15 .tr-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 12px;border-radius:999px;background:var(--ink);color:#fff}
#h88r15#h88r15 .tr-pill .star-logo{width:64px;height:19px}
#h88r15#h88r15 .tr-pill b{margin-left:-3px;font:italic 900 15px/1 var(--display);font-stretch:88%;letter-spacing:.04em;color:var(--yellow)}
#h88r15#h88r15 .tr-pill>span:last-child{padding-left:9px;border-left:1px solid rgba(255,255,255,.25);font:600 13px/1 var(--text);color:#E6E8EC;white-space:nowrap}
#h88r15#h88r15 .club h2{margin-top:14px;font:900 36px/.98 var(--display);white-space:nowrap;font-stretch:78%;letter-spacing:-.005em}
#h88r15#h88r15 .club h2 span{display:block}
#h88r15#h88r15 .club h2 span:last-child{color:var(--red)}
#h88r15#h88r15 .tr-copy>p{margin-top:12px;max-width:40ch;font:400 14.5px/22px var(--text);color:#3A2E0A}
#h88r15#h88r15 .club .cta{flex-wrap:wrap;row-gap:10px;margin-top:18px;gap:14px}
#h88r15#h88r15 .club .pill{padding:0 18px}
#h88r15#h88r15 .club .link{color:var(--ink)}
/* the aisle: shelves slide past as the trolley rolls */
#h88r15#h88r15 .tr-stage{position:relative;align-self:stretch;min-height:282px;margin:-24px 0;overflow:hidden}
#h88r15#h88r15 .tr-shelf{position:absolute;left:0;right:0;top:0;bottom:40px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='250'%3E%3Cg fill='%23A86A00' fill-opacity='.10'%3E%3Crect x='14' y='26' width='58' height='42' rx='4'/%3E%3Crect x='80' y='38' width='44' height='30' rx='4'/%3E%3Crect x='136' y='16' width='76' height='52' rx='4'/%3E%3Crect x='18' y='132' width='70' height='36' rx='4'/%3E%3Crect x='98' y='114' width='52' height='54' rx='4'/%3E%3Crect x='160' y='138' width='62' height='30' rx='4'/%3E%3C/g%3E%3Cg fill='%23A86A00' fill-opacity='.2'%3E%3Crect y='68' width='240' height='6'/%3E%3Crect y='168' width='240' height='6'/%3E%3Crect width='5' height='250'/%3E%3C/g%3E%3C/svg%3E") repeat-x;background-position:var(--bx,0px) 22px;transition:background-position 1.3s cubic-bezier(.45,0,.25,1);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
#h88r15#h88r15 .tr-floor{position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(rgba(150,90,0,.14),rgba(150,90,0,.03));border-top:2px solid rgba(150,90,0,.16)}
#h88r15#h88r15 .trolley{--tw:380px;position:absolute;left:8px;bottom:14px;width:var(--tw);aspect-ratio:360/220;transform:translateX(var(--x,0px));transition:transform 1.3s cubic-bezier(.45,0,.25,1),opacity .45s}
#h88r15#h88r15 .trolley.snap{transition:none}
#h88r15#h88r15 .trolley.gone{opacity:0}
#h88r15#h88r15 .tr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#h88r15#h88r15 .roll .wh{animation:h88r15-wspin .45s linear infinite}
@keyframes h88r15-wspin{to{transform:rotate(1turn)}}
#h88r15#h88r15 .ti{position:absolute;opacity:0;transform:translateY(-150%);transition:transform .6s cubic-bezier(.3,1.35,.5,1),opacity .2s}
#h88r15#h88r15 .ti.in{opacity:1;transform:none}
#h88r15#h88r15 .ti svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 5px rgba(90,40,0,.25))}
#h88r15#h88r15 .t-ladder{z-index:1}#h88r15#h88r15 .t-alt-paint{z-index:2}#h88r15#h88r15 .t-cable{z-index:2}#h88r15#h88r15 .t-drill{z-index:3}#h88r15#h88r15 .t-screws{z-index:4}
/* the saving pops up above each product as it lands, then floats away (never left over the photo) */
#h88r15#h88r15 .tchip{position:absolute;left:50%;top:-8px;padding:5px 8px;border-radius:6px;background:var(--yellow);color:var(--yellow-ink);font:800 13px/1 var(--text);font-style:normal;white-space:nowrap;box-shadow:0 0 0 1.5px var(--ink),0 8px 14px -6px rgba(60,30,0,.7);opacity:0;transform:translateX(-50%);pointer-events:none}
#h88r15#h88r15 .ti.land .tchip{animation:h88r15-chip 1.9s ease both}
@keyframes h88r15-chip{0%{opacity:0;transform:translate(-50%,10px)}15%,60%{opacity:1;transform:translate(-50%,-26px)}100%{opacity:0;transform:translate(-50%,-44px)}}
/* savings display mounted on the trolley handle */
#h88r15#h88r15 .tr-scr{position:absolute;z-index:6;left:62.5%;top:19%;width:25.5%;min-width:84px;display:grid;justify-items:center;gap:3px;padding:6px 4px 7px;border-radius:8px;background:linear-gradient(#262A31,#141619);box-shadow:inset 0 0 0 2px #3E434B,0 10px 16px -8px rgba(0,0,0,.6);color:#fff}
#h88r15#h88r15 .tr-scr::after{content:"";position:absolute;right:-9px;top:50%;width:10px;height:5px;margin-top:-2px;background:#6B727C}
#h88r15#h88r15 .tr-scr small{font:700 13px/1 var(--text);color:#B5BBC3;white-space:nowrap}
#h88r15#h88r15 .tr-scr b{font:900 22px/1 var(--display);font-stretch:80%;color:var(--yellow);font-variant-numeric:tabular-nums}
/* the bill: an 88HARDWARE e-invoice that fills in as each item lands in the trolley */
#h88r15#h88r15 .einv{position:relative;align-self:center;padding-bottom:12px;border-radius:8px;background:#fff;box-shadow:0 26px 40px -24px rgba(110,60,0,.75),0 0 0 1px rgba(110,60,0,.08);overflow:hidden}
#h88r15#h88r15 .einv::before{content:"";display:block;height:5px;background:linear-gradient(90deg,#1659D6 0 55%,var(--red) 55% 100%)}
#h88r15#h88r15 .ei-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 9px;border-bottom:1px solid var(--line)}
#h88r15#h88r15 .ei-meta{display:flex;justify-content:space-between;gap:10px;padding:6px 16px;background:#F7F8FA;border-bottom:1px solid var(--line);font:700 13px/18px var(--text);color:var(--ink)}
#h88r15#h88r15 .ei-meta small{margin-right:6px;font:500 13px/18px var(--text);color:var(--mute)}
#h88r15#h88r15 .ei-th,#h88r15#h88r15 .tr-lines li{display:grid;grid-template-columns:14px minmax(0,1fr) 64px 66px;gap:6px;align-items:center}
#h88r15#h88r15 .ei-th{padding:7px 16px 4px;font:700 13px/16px var(--text);color:var(--mute)}
#h88r15#h88r15 .ei-th span:nth-child(n+3){text-align:right}
#h88r15#h88r15 .tr-lines{margin:0;padding:0 16px}
#h88r15#h88r15 .tr-lines li{height:26px;margin:0 -6px;padding:0 6px;border-bottom:1px dashed #E6E8EC;border-radius:4px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .4s var(--ease),background-color .8s}
#h88r15#h88r15 .tr-lines li.in{opacity:1;transform:none}
#h88r15#h88r15 .tr-lines li.new{background:#FFF3C4;transition:opacity .3s,transform .4s var(--ease),background-color 0s}
#h88r15#h88r15 .ei-no{font:600 13px/1 var(--text);color:var(--mute)}
#h88r15#h88r15 .tl-n{font:600 13px/1.2 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h88r15#h88r15 .tr-lines s,#h88r15#h88r15 .tr-lines del{font:500 13px/1 var(--text);color:var(--strike);text-align:right}
#h88r15#h88r15 .tr-lines b{font:800 13.5px/1 var(--text);color:var(--red);text-align:right}
#h88r15#h88r15 .tr-tot{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 10px;margin:6px 16px 0;font:600 13px/21px var(--text);color:var(--mute)}
#h88r15#h88r15 .tr-tot s,#h88r15#h88r15 .tr-tot del{color:var(--strike);text-align:right}
#h88r15#h88r15 .tr-tot b{font:900 20px/22px var(--display);font-stretch:82%;color:var(--red);text-align:right}
#h88r15#h88r15 .tr-save{display:flex;align-items:center;justify-content:space-between;margin:8px 16px 0;height:38px;padding:0 12px;border-radius:8px;background:var(--yellow);color:var(--yellow-ink);font:800 14px/1 var(--text)}
#h88r15#h88r15 .tr-save b{font:900 24px/1 var(--display);font-stretch:80%;font-variant-numeric:tabular-nums}

/* ---------- brands: two rows of flush tiles, arrows slide through the rest ---------- */
#h88r15#h88r15 .bh{display:flex;align-items:flex-end;gap:20px;margin-bottom:14px}
#h88r15#h88r15 .bh .link{margin-left:auto;padding-bottom:4px}
#h88r15#h88r15 .bcar{--bc:8;position:relative}
#h88r15#h88r15 .bview{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh)}
#h88r15#h88r15 .btrack{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,82px);grid-auto-columns:calc(100% / var(--bc));width:calc(100% + 1px);margin-left:-1px;transform:translateX(var(--bx,0px));transition:transform .55s var(--ease)}
#h88r15#h88r15 .btrack a{position:relative;display:grid;place-items:center;border-left:1px solid var(--line);background:#fff;transition:background-color .15s}
#h88r15#h88r15 .btrack a:nth-child(odd){border-bottom:1px solid var(--line)}
#h88r15#h88r15 .btrack a:hover,#h88r15#h88r15 .btrack a:focus-visible{z-index:1;background:#FFF8F6;box-shadow:inset 0 0 0 1.5px var(--red);outline:0}
#h88r15#h88r15 .btrack .lg{width:min(100px,70%);height:34px;transition:transform .25s var(--ease)}
#h88r15#h88r15 .btrack a:hover .lg{transform:scale(1.06)}
#h88r15#h88r15 .bnav{position:absolute;z-index:2;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;display:grid;place-items:center;background:#fff!important;color:var(--ink)!important;box-shadow:0 10px 22px -10px rgba(22,25,30,.55),0 0 0 1px var(--line);transition:opacity .2s,color .15s,transform .2s var(--ease)}
#h88r15#h88r15 .bnav.prev{left:10px}#h88r15#h88r15 .bnav.next{right:10px}
#h88r15#h88r15 .bnav:hover{color:var(--red)!important;transform:scale(1.06)}
#h88r15#h88r15 .bnav[disabled]{opacity:0;pointer-events:none}
#h88r15#h88r15 .bnav .ico{width:20px;height:20px;stroke-width:2.4}

/* ---------- daily picks ---------- */
#h88r15#h88r15 .daily{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
#h88r15#h88r15 .dh{display:flex;align-items:center;gap:18px;height:64px;padding:0 24px;color:#fff;background:repeating-linear-gradient(115deg,transparent 0 60px,rgba(255,255,255,.05) 60px 62px),linear-gradient(100deg,#D7000F 0%,#E8240F 60%,#F4511E 100%)}
#h88r15#h88r15 .dh h2{font:italic 900 28px/1 var(--display);font-stretch:86%;white-space:nowrap}
#h88r15#h88r15 .wtabs{display:flex;gap:6px}
#h88r15#h88r15 .wtab{height:34px;padding:0 15px;border-radius:999px;font:700 13.5px/1 var(--text);color:#fff!important;background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);white-space:nowrap;transition:background-color .15s,color .15s}
#h88r15#h88r15 .wtab:hover{background:rgba(255,255,255,.28)!important}
#h88r15#h88r15 .wtab[aria-selected=true]{background:#fff!important;color:var(--red)!important;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
#h88r15#h88r15 .dh .link{margin-left:auto;color:#fff}
#h88r15#h88r15 .wall .pc{--ih:128px}
#h88r15#h88r15 .wall{display:grid;grid-template-columns:repeat(var(--wc,6),minmax(0,1fr));gap:1px;background:var(--line)}
#h88r15#h88r15 .end{margin-bottom:40px}


/* ---------- quick view: opens from Add to cart, large, every photo shown ---------- */
html.qv-open{overflow:hidden}
#h88r15#h88r15 .qv :where(h3,p,ul){margin:0}
#h88r15#h88r15 .qv ul{list-style:none;padding:0}
#h88r15#h88r15 :where(.qv) button{border:0;background:none;padding:0;color:inherit;font:inherit}
#h88r15#h88r15 .qv{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
#h88r15#h88r15 .qv[hidden]{display:none}
#h88r15#h88r15 .qv-back{position:absolute;inset:0;background:rgba(14,16,20,.56);opacity:0;transition:opacity .2s}
#h88r15#h88r15 .qv-box{position:relative;width:min(1120px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.65);overflow:hidden;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .22s,transform .3s var(--ease)}
#h88r15#h88r15 .qv.on .qv-back{opacity:1}
#h88r15#h88r15 .qv.on .qv-box{opacity:1;transform:none}
#h88r15#h88r15 .qv-h{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 26px;border-bottom:1px solid var(--line)}
#h88r15#h88r15 .qv-h b{font:800 18px/24px var(--text)}
#h88r15#h88r15 .qv-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
#h88r15#h88r15 .qv-x:hover{background:var(--plate)!important;color:var(--red)}
#h88r15#h88r15 .qv-x .ico{width:22px;height:22px;stroke-width:2}
#h88r15#h88r15 .qv-b{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:34px;padding:24px 30px 28px;overflow:auto}
#h88r15#h88r15 .qv-gal{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start}
#h88r15#h88r15 .qv-th{display:flex;flex-direction:column;gap:10px;max-height:min(520px,calc(100vh - 160px));overflow:auto}
#h88r15#h88r15 .qv-th button{flex:none;width:84px;height:84px;padding:4px!important;border-radius:11px;background:#fff!important;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s}
#h88r15#h88r15 .qv-th button>span{display:block;width:100%;height:100%;border-radius:8px}
#h88r15#h88r15 .qv-th button:hover{box-shadow:inset 0 0 0 1.5px var(--line-2)}
#h88r15#h88r15 .qv-th button[aria-selected=true]{box-shadow:inset 0 0 0 2px var(--red)}
#h88r15#h88r15 .qv-main{position:relative;aspect-ratio:1;max-height:calc(100vh - 170px);border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
#h88r15#h88r15 .qv-main>span{position:absolute;inset:0;opacity:0;transition:opacity .25s}
#h88r15#h88r15 .qv-main>span.on{opacity:1}
#h88r15#h88r15 .qv-main .ph{inset:22px}
#h88r15#h88r15 .qv-mw{display:grid;gap:8px;min-width:0}
#h88r15#h88r15 .gp{display:block;background-position:center;background-size:cover;background-repeat:no-repeat}
#h88r15#h88r15 .qv-info{display:flex;flex-direction:column;min-width:0}
#h88r15#h88r15 .qv-info h3{margin-top:8px;font:800 24px/1.28 var(--text);color:var(--ink)}
#h88r15#h88r15 .qv-price{display:grid;gap:8px;margin-top:16px;padding:16px 18px;border-radius:14px;background:linear-gradient(120deg,#FFF1F2,#FFF8F0);box-shadow:inset 0 0 0 1px #FFE0E3}
#h88r15#h88r15 .qv-pm{display:flex;align-items:flex-end;gap:12px;font:800 13px/18px var(--text);color:var(--red)}
#h88r15#h88r15 .qv-pm span{padding-bottom:8px}
#h88r15#h88r15 .qv-pm .mp{font-size:50px}
#h88r15#h88r15 .qv-pn{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font:600 13px/18px var(--text);color:var(--mute)}
#h88r15#h88r15 .qv-pn .np s,#h88r15#h88r15 .qv-pn .np del{font:700 16px/1 var(--text)}
#h88r15#h88r15 .qv-pn .off{position:static}
#h88r15#h88r15 .qv-q{display:flex;align-items:center;gap:18px;margin-top:18px;font:700 14px/1 var(--text);color:var(--ink-2)}
#h88r15#h88r15 .qty{flex:none;display:inline-flex;align-items:center;height:42px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
#h88r15#h88r15 .qty button{width:40px;height:100%;display:grid;place-items:center;color:var(--ink-2)!important;border-radius:10px;transition:color .15s,background-color .15s}
#h88r15#h88r15 .qty button:hover{color:var(--red)!important;background:var(--red-tint)!important}
#h88r15#h88r15 .qty svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
#h88r15#h88r15 .qty input{width:46px;height:100%;padding:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:none;text-align:center;font:800 16px/1 var(--text);color:var(--ink);font-variant-numeric:tabular-nums}
#h88r15#h88r15 .qv-svc{display:grid;gap:7px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font:500 13.5px/18px var(--text);color:var(--ink-2)}
#h88r15#h88r15 .qv-svc li{display:flex;align-items:center;gap:8px}
#h88r15#h88r15 .qv-svc .ico{width:16px;height:16px;stroke-width:2.4;color:#13844B}
#h88r15#h88r15 .qv-act{display:flex;gap:12px;margin-top:auto;padding-top:22px}
#h88r15#h88r15 .qv-add{flex:1;height:52px;font-size:16px}
#h88r15#h88r15 .qv-pdp{height:52px}
/* ---------- quick view variations (qv-vx 2026-10-28): option chips, stock line, hint, added state ---------- */
#h88r15#h88r15 .qv-vx{display:grid;gap:14px;margin-top:18px}
#h88r15#h88r15 .qv-vx[hidden]{display:none}
#h88r15#h88r15 .vx-g{display:grid;gap:8px}
#h88r15#h88r15 .vx-l{display:flex;align-items:baseline;gap:8px;font:700 14px/18px var(--text);color:var(--ink-2)}
#h88r15#h88r15 .vx-l b{font-weight:600;color:var(--ink)}
#h88r15#h88r15 .vx-l i{font:500 13px/18px var(--text);color:var(--mute)}
#h88r15#h88r15 .vx-g.need .vx-l,#h88r15#h88r15 .vx-g.need .vx-l i{color:var(--red)}
#h88r15#h88r15 .vx-o{display:flex;flex-wrap:wrap;gap:8px}
#h88r15#h88r15 .qv .vx-c{position:relative;min-width:64px;height:40px;padding:0 16px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:600 14px/1 var(--text);color:var(--ink);cursor:pointer;transition:box-shadow .15s,color .15s,background-color .15s}
#h88r15#h88r15 .qv .vx-c:hover{box-shadow:inset 0 0 0 1.5px #9AA1AB}
#h88r15#h88r15 .qv .vx-c[aria-pressed=true]{background:var(--red-tint);color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
#h88r15#h88r15 .qv .vx-g.need .vx-c:not(:disabled){box-shadow:inset 0 0 0 1.5px #F2A3A9}
#h88r15#h88r15 .qv .vx-c:disabled{background:var(--plate);color:#A3A9B2;box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
#h88r15#h88r15 .qv .vx-c.oos{color:#A3A9B2;text-decoration:line-through;text-decoration-thickness:1.5px}
#h88r15#h88r15 .qv .vx-c:focus-visible{outline:2px solid var(--red);outline-offset:2px}
#h88r15#h88r15 .vx-load{display:grid;gap:10px}
#h88r15#h88r15 .vx-load span{display:block;height:58px;border-radius:10px;background:linear-gradient(90deg,var(--plate) 0 40%,#fff 50%,var(--plate) 60% 100%) 0 0/300% 100%;animation:h88vx 1.2s linear infinite}
@keyframes h88vx{to{background-position:-150% 0}}
#h88r15#h88r15 .vx-st{display:flex;align-items:center;gap:7px;font:600 13px/18px var(--text);color:#13844B}
#h88r15#h88r15 .vx-st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
#h88r15#h88r15 .vx-st.out{color:var(--red)}
#h88r15#h88r15 .qv-pm .qv-rng{padding-bottom:4px;font:900 28px/1 var(--display);font-stretch:78%;color:var(--red);white-space:nowrap}
#h88r15#h88r15 .qv-add.vx-off{opacity:.45;cursor:not-allowed;box-shadow:none}
#h88r15#h88r15 .qv-add.vx-off:hover{background:var(--red)}
#h88r15#h88r15 .qv-add.vx-ok,#h88r15#h88r15 .qv-add.vx-ok:hover{background:#13844B}
#h88r15#h88r15 .qv-hint{margin:10px 0 0;font:600 13px/18px var(--text);color:var(--mute)}
#h88r15#h88r15 .qv-hint[hidden]{display:none}
#h88r15#h88r15 .qv-hint.need{color:var(--red)}
#h88r15#h88r15 .qv-hint.ok{color:#13844B}
#h88r15#h88r15 .qv-hint.ok b{color:var(--ink)}
#h88r15#h88r15 .qv-hint a{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}
#h88r15#h88r15 .qv-main>img.qv-vimg{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:22px;background:#fff;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .25s}
#h88r15#h88r15 .qv-main>img.qv-vimg.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  #h88r15#h88r15,#h88r15#h88r15 *,#h88r15#h88r15 *::before,#h88r15#h88r15 *::after{animation:none!important;transition:none!important}
}

/* =================== wide screens: more per row =================== */
@media (min-width:1600px){
  #h88r15#h88r15 .fg .pc{--ih:126px}
  #h88r15#h88r15 .bcar{--bc:10}
  #h88r15#h88r15 .fh h2{font-size:24px}
  #h88r15#h88r15 .trolley{--tw:420px}
  #h88r15#h88r15 .deals{--dn:7;--dsw:250px}
  #h88r15#h88r15 .bsec{grid-template-columns:360px minmax(0,1fr)}
  #h88r15#h88r15 .wall{--wc:8}
}
@media (max-width:1599px){
  #h88r15#h88r15 .dl-row .pc:nth-child(n+7){display:none}
}
/* =================== narrower PCs (1220-1399) =================== */
@media (max-width:1399px){
  #h88r15#h88r15{--catw:222px}
  /* live footer: give the last column room so it never runs under the always-visible right rail */
  #h88r15#h88r15 .cat{padding-left:14px;gap:9px;font-size:13px}
  #h88r15#h88r15 .cat .chev{display:none}
  #h88r15#h88r15 .copy .sub{font-size:15px;line-height:23px}
  #h88r15#h88r15 .h1{font-size:min(6.6cqw,70px)}
  #h88r15#h88r15 .stage{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  #h88r15#h88r15 .copy .pill{padding:0 16px;font-size:14px}
  #h88r15#h88r15 .tagstage{--tagw:228px}
  #h88r15#h88r15 .tag{padding:24px 14px 12px}
  #h88r15#h88r15 .tag-m b,#h88r15#h88r15 .tag-row{font-size:13px}
  #h88r15#h88r15 .tag-go .bars{width:46px}
  #h88r15#h88r15 .prod{left:calc(var(--tagw) + 14px);right:-10px}
  #h88r15#h88r15 .tagwrap{top:11%}
  #h88r15#h88r15 .tag .mp{font-size:44px}
  #h88r15#h88r15 .tag-sv b{font-size:22px}
  #h88r15#h88r15 .th{padding:0 6px}#h88r15#h88r15 .th-p{display:none}
  #h88r15#h88r15 .fy-b{grid-template-columns:minmax(0,1fr) 190px}
  #h88r15#h88r15 .fy-g{column-count:2}
  #h88r15#h88r15 .deals{--dn:5;--dsw:214px}
  #h88r15#h88r15 .dl-row .pc:nth-child(n+6){display:none}
  #h88r15#h88r15 .dl-side h2{font-size:25px}
  #h88r15#h88r15 .dl-side h2 b{font-size:50px}
  #h88r15#h88r15 .sv{padding:16px 14px 14px;grid-template-columns:44px minmax(0,1fr);column-gap:12px}
  #h88r15#h88r15 .sv-i{width:44px;height:44px;border-radius:14px}
  #h88r15#h88r15 .sv-i .duo{width:24px;height:24px}
  #h88r15#h88r15 .sv-t b{font-size:15px}
  #h88r15#h88r15 .pc{padding:10px 10px 12px}
  #h88r15#h88r15 .pr .mp{font-size:22px}
  #h88r15#h88r15 .sslot .save{padding:0 7px}
  #h88r15#h88r15 .sslot .off{padding:0 5px}
  #h88r15#h88r15 .bcar{--bc:7}
  #h88r15#h88r15 .fh{padding:0 16px;gap:10px}
  #h88r15#h88r15 .fh h2{font-size:20px}
  #h88r15#h88r15 .ftabs button{padding:0 10px;font-size:13.5px}
  #h88r15#h88r15 .fh .more{margin-left:8px}
  #h88r15#h88r15 .fg .pc{padding:12px 10px 10px}
  #h88r15#h88r15 .ad-t{padding:16px 16px 0}
  #h88r15#h88r15 .ad h3{font-size:25px}
  #h88r15#h88r15 .pop{padding:12px 12px 14px}
  #h88r15#h88r15 .pop a{font-size:13px;padding:0 4px}
  #h88r15#h88r15 .ei-th,#h88r15#h88r15 .tr-lines li{grid-template-columns:minmax(0,1fr) 62px 64px}
  #h88r15#h88r15 .ei-th span:first-child,#h88r15#h88r15 .ei-no{display:none}
  #h88r15#h88r15 .ffill.fb2 .ff-t span{display:none}
  #h88r15#h88r15 .bsec{grid-template-columns:270px minmax(0,1fr);gap:20px;padding:20px 20px 20px 24px}
  #h88r15#h88r15 .club{grid-template-columns:minmax(0,262px) minmax(0,1fr) 300px;gap:16px;padding:22px 20px 22px 26px}
  #h88r15#h88r15 .club h2{font-size:31px;white-space:normal}
  #h88r15#h88r15 .tr-copy>p{font-size:13.5px;line-height:20px}
  #h88r15#h88r15 .trolley{--tw:300px}
  #h88r15#h88r15 .tr-pill>span:last-child{display:none}
  #h88r15#h88r15 .strip{gap:20px;padding:0 24px}
  #h88r15#h88r15 .st-l{width:290px}
  #h88r15#h88r15 .st-i:nth-child(4){display:none}
  #h88r15#h88r15 .qv-b{gap:24px;padding:20px 22px 24px}
  #h88r15#h88r15 .qv-gal{grid-template-columns:72px minmax(0,1fr)}
  #h88r15#h88r15 .qv-th button{width:72px;height:72px}
  #h88r15#h88r15 .qv-pm .mp{font-size:44px}
}
@media (max-width:1299px){
  #h88r15#h88r15 .dh .link{display:none}
}


#h88r15#h88r15 .p-alt-drill{background-image:url(img/p-alt-drill.webp)}
#h88r15#h88r15 .p-alt-grinder{background-image:url(img/p-alt-grinder.webp)}
#h88r15#h88r15 .p-alt-hammer{background-image:url(img/p-alt-hammer.webp)}
#h88r15#h88r15 .p-alt-pliers{background-image:url(img/p-alt-pliers.webp)}
#h88r15#h88r15 .p-alt-boots{background-image:url(img/p-alt-boots.webp)}
#h88r15#h88r15 .p-alt-goggles{background-image:url(img/p-alt-goggles.webp)}
#h88r15#h88r15 .p-alt-tape{background-image:url(img/p-alt-tape.webp)}
#h88r15#h88r15 .p-tape{background-image:url(img/p-tape.jpg)}
#h88r15#h88r15 .p-alt-fixings{background-image:url(img/p-alt-fixings.webp)}
#h88r15#h88r15 .p-alt-tap{background-image:url(img/p-alt-tap.webp)}
#h88r15#h88r15 .p-garden{background-image:url(img/p-garden.jpg)}
#h88r15#h88r15 .p-alt-blade{background-image:url(img/p-alt-blade.webp)}
#h88r15#h88r15 .p-drill{background-image:url(img/p-drill.jpg)}
#h88r15#h88r15 .p-grinder{background-image:url(img/p-grinder.jpg)}
#h88r15#h88r15 .p-alt-bits{background-image:url(img/p-alt-bits.webp)}
#h88r15#h88r15 .p-discs{background-image:url(img/p-discs.jpg)}
#h88r15#h88r15 .p-hammer{background-image:url(img/p-hammer.jpg)}
#h88r15#h88r15 .p-pliers{background-image:url(img/p-pliers.jpg)}
#h88r15#h88r15 .p-screwdriver{background-image:url(img/p-screwdriver.jpg)}
#h88r15#h88r15 .p-alt-wrench{background-image:url(img/p-alt-wrench.webp)}
#h88r15#h88r15 .p-sawblade{background-image:url(img/p-sawblade.jpg)}
#h88r15#h88r15 .p-alt-bulb{background-image:url(img/p-alt-bulb.webp)}
#h88r15#h88r15 .p-alt-cable{background-image:url(img/p-alt-cable.webp)}
#h88r15#h88r15 .p-alt-socket{background-image:url(img/p-alt-socket.webp)}
#h88r15#h88r15 .p-cord{background-image:url(img/p-cord.jpg)}
#h88r15#h88r15 .p-tap{background-image:url(img/p-tap.jpg)}
#h88r15#h88r15 .p-fittings{background-image:url(img/p-fittings.jpg)}
#h88r15#h88r15 .p-valve{background-image:url(img/p-valve.jpg)}
#h88r15#h88r15 .p-cable{background-image:url(img/p-cable.jpg)}
#h88r15#h88r15 .p-alt-paint{background-image:url(img/p-alt-paint.webp)}
#h88r15#h88r15 .p-roller9{background-image:url(img/p-roller9.jpg)}
#h88r15#h88r15 .p-caulkgun{background-image:url(img/p-caulkgun.jpg)}
#h88r15#h88r15 .p-alt-sealant{background-image:url(img/p-alt-sealant.webp)}
#h88r15#h88r15 .p-screws{background-image:url(img/p-screws.jpg)}
#h88r15#h88r15 .p-padlock{background-image:url(img/p-padlock.jpg)}
#h88r15#h88r15 .p-alt-ladder{background-image:url(img/p-alt-ladder.webp)}
#h88r15#h88r15 .p-paint{background-image:url(img/p-paint.jpg)}
#h88r15#h88r15 .p-helmet{background-image:url(img/p-helmet.jpg)}
#h88r15#h88r15 .p-alt-gloves{background-image:url(img/p-alt-gloves.webp)}
#h88r15#h88r15 .p-boots{background-image:url(img/p-boots.jpg)}
#h88r15#h88r15 .p-alt-vest{background-image:url(img/p-alt-vest.webp)}
#h88r15#h88r15 .p-goggles{background-image:url(img/p-goggles.jpg)}
#h88r15#h88r15 .p-earmuffs{background-image:url(img/p-earmuffs.jpg)}
#h88r15#h88r15 .p-mask{background-image:url(img/p-mask.jpg)}
#h88r15#h88r15 .p-extinguisher{background-image:url(img/p-extinguisher.jpg)}
#h88r15#h88r15 .p-alt-helmet{background-image:url(img/p-alt-helmet.webp)}
#h88r15#h88r15 .p-vest{background-image:url(img/p-vest.jpg)}
#h88r15#h88r15 .p-gloves{background-image:url(img/p-gloves.jpg)}
#h88r15#h88r15 .p-wrenches{background-image:url(img/p-wrenches.jpg)}
#h88r15#h88r15 .p-basintaps{background-image:url(img/p-basintaps.jpg)}
#h88r15#h88r15 .p-alt-pvc{background-image:url(img/p-alt-pvc.webp)}
#h88r15#h88r15 .p-alt-roller{background-image:url(img/p-alt-roller.webp)}
#h88r15#h88r15 .p-pipes{background-image:url(img/p-pipes.jpg)}
#h88r15#h88r15 .p-mhammer{background-image:url(img/p-mhammer.jpg)}
#h88r15#h88r15 .p-bulb{background-image:url(img/p-bulb.jpg)}
#h88r15#h88r15 .p-alt-screwdriver{background-image:url(img/p-alt-screwdriver.webp)}
#h88r15#h88r15 .p-socket{background-image:url(img/p-socket.jpg)}
#h88r15#h88r15 .p-silicone{background-image:url(img/p-silicone.jpg)}
#h88r15#h88r15 .p-roller4{background-image:url(img/p-roller4.jpg)}
#h88r15#h88r15 .p-ladder{background-image:url(img/p-ladder.jpg)}
#h88r15#h88r15 .c-alt-drill{background-image:url(img/c-alt-drill.webp)}
#h88r15#h88r15 .c-alt-grinder{background-image:url(img/c-alt-grinder.webp)}
#h88r15#h88r15 .c-alt-hammer{background-image:url(img/c-alt-hammer.webp)}
#h88r15#h88r15 .c-alt-pliers{background-image:url(img/c-alt-pliers.webp)}
#h88r15#h88r15 .c-alt-boots{background-image:url(img/c-alt-boots.webp)}
#h88r15#h88r15 .c-alt-tape{background-image:url(img/c-alt-tape.webp)}
#h88r15#h88r15 .c-drill{background-image:url(img/c-drill.webp)}
#h88r15#h88r15 .c-alt-paint{background-image:url(img/c-alt-paint.webp)}
#h88r15#h88r15 .c-helmet{background-image:url(img/c-helmet.webp)}
#h88r15#h88r15 .c-alt-screwdriver{background-image:url(img/c-alt-screwdriver.webp)}
#h88r15#h88r15 .g-drill-a{background-image:url(img/g-drill-a.webp)}
#h88r15#h88r15 .g-drill-b{background-image:url(img/g-drill-b.webp)}
#h88r15#h88r15 .star-logo{background-image:url(img/star-logo.webp)}
#h88r15#h88r15 .lg-makita{background-image:url(img/lg-makita.png)}
#h88r15#h88r15 .lg-dongcheng{background-image:url(img/lg-dongcheng.png)}
#h88r15#h88r15 .lg-bosch{background-image:url(img/lg-bosch.png)}
#h88r15#h88r15 .lg-dewalt{background-image:url(img/lg-dewalt.png)}
#h88r15#h88r15 .lg-nietz{background-image:url(img/lg-nietz.png)}
#h88r15#h88r15 .lg-stanley{background-image:url(img/lg-stanley.png)}
#h88r15#h88r15 .lg-bahco{background-image:url(img/lg-bahco.png)}
#h88r15#h88r15 .lg-tsunamipump{background-image:url(img/lg-tsunamipump.png)}
#h88r15#h88r15 .lg-philips{background-image:url(img/lg-philips.png)}
#h88r15#h88r15 .lg-schneiderelectric{background-image:url(img/lg-schneiderelectric.png)}
#h88r15#h88r15 .lg-3m{background-image:url(img/lg-3m.png)}
#h88r15#h88r15 .lg-nipponpaint{background-image:url(img/lg-nipponpaint.png)}
#h88r15#h88r15 .lg-kth{background-image:url(img/lg-kth.png)}
#h88r15#h88r15 .lg-xtraseal{background-image:url(img/lg-xtraseal.png)}
#h88r15#h88r15 .lg-samurai{background-image:url(img/lg-samurai.png)}
#h88r15#h88r15 .lg-tiger{background-image:url(img/lg-tiger.png)}
#h88r15#h88r15 .lg-kobelco{background-image:url(img/lg-kobelco.png)}
#h88r15#h88r15 .lg-everlas{background-image:url(img/lg-everlas.png)}
#h88r15#h88r15 .lg-hitz{background-image:url(img/lg-hitz.png)}
#h88r15#h88r15 .lg-syw{background-image:url(img/lg-syw.png)}
#h88r15#h88r15 .lg-tahan{background-image:url(img/lg-tahan.png)}
#h88r15#h88r15 .lg-jayamata{background-image:url(img/lg-jayamata.png)}
#h88r15#h88r15 .lg-stguchi{background-image:url(img/lg-stguchi.png)}
#h88r15#h88r15 .lg-scp{background-image:url(img/lg-scp.png)}

#h88r15#h88r15{--wrap:min(1600px,calc(100% - 80px))}
@media (max-width:1240px){#h88r15#h88r15{--wrap:calc(100% - 48px)}}
/* quick-view popup: sits above the live sticky header and tool rail so its backdrop dims the whole page */
#h88r15#h88r15 .qv{z-index:2147483000}
/* =================== r15.1 (EY fixes, 2026-10-24) =================== */
/* 1 + 2: no reserved gutter for the tool rail. The bands run to the screen edge under the floating rail; content stops ~14px
   before the rail; its left edge (and the category list width) follow the header's All Categories button. r15.js measures
   --h88g/--hl/--hw/--hr; the fallbacks below are used only until it runs. */
#h88r15#h88r15{margin-right:calc(-1 * var(--h88g,0px));--hl:max(40px,calc((100vw - 1500px) / 2));--hr:40px;--catw:var(--hw,220px)}
@media (max-width:1240px){#h88r15#h88r15{--hl:24px;--hr:24px}}
#h88r15#h88r15 .wrap{width:auto;margin-left:var(--hl);margin-right:max(var(--hr),calc(100% - var(--hl) - 1600px))}

/* 4: product cards: nothing reserved for Add to cart; it slides up over the card bottom on hover (no layout shift) */
#h88r15#h88r15 .pc-img{flex:1 0 auto;height:auto;min-height:var(--ih,118px)}
#h88r15#h88r15 .pc .pr,#h88r15#h88r15 .fg .pr{margin-bottom:0}
#h88r15#h88r15 .pc-add,#h88r15#h88r15 .fg .pc-add{position:absolute;z-index:2;left:10px;right:10px;bottom:10px;width:auto;height:36px;margin:0;box-shadow:inset 0 0 0 1.5px var(--red),0 10px 18px -10px rgba(120,0,8,.55)}
#h88r15#h88r15 .dotw .pc-img{height:auto;min-height:126px}

/* 5: quick view: no title bar, just the close button */
#h88r15#h88r15 .qv-h{position:absolute;z-index:3;top:10px;right:10px;padding:0;border:0}
#h88r15#h88r15 .qv-b{padding-top:30px}
#h88r15#h88r15 .qv-info{padding-right:34px}
#h88r15#h88r15 .qv-info h3{margin-top:0}

/* 6: category floors: banner | 5 x 2 products | slim brand column */
#h88r15#h88r15 .fb{grid-template-columns:21% minmax(0,1fr) var(--fbw,112px)}
#h88r15#h88r15 .fg{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch}
#h88r15#h88r15 .fbr{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 10px 8px;background:#FAFAFB}
#h88r15#h88r15 .fbr-h{display:block;padding:2px 0 2px;text-align:center;font:800 13px/18px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
#h88r15#h88r15 .fbr-l{display:flex;flex-direction:column;gap:8px}
#h88r15#h88r15 .fbr-l a{display:grid;place-items:center;height:56px;padding:8px 10px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s var(--ease)}
#h88r15#h88r15 .fbr-l a:hover{box-shadow:inset 0 0 0 1.5px var(--red),0 8px 16px -12px rgba(120,0,8,.6);transform:translateY(-1px)}
#h88r15#h88r15 .fbr .lg{width:100%;height:100%}
#h88r15#h88r15 .fbr-all{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:2px;height:34px;white-space:nowrap;font:700 13px/1 var(--text);color:var(--ink)}
#h88r15#h88r15 .fbr-all:hover{color:var(--red)}
#h88r15#h88r15 .fbr-all .ico{width:13px;height:13px;stroke-width:2.6}

/* 7: STAR CLUB: yellow runs edge to edge; trolley pushed by a worker; e-invoice title top-left */
#h88r15#h88r15 .club{display:block;min-height:0;padding:0;border-radius:0;overflow:hidden}
#h88r15#h88r15 .club-in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr) 400px;gap:24px;align-items:center;min-height:330px;padding:24px 0}
#h88r15#h88r15 .trolley{--tw:360px;left:0;bottom:12px;aspect-ratio:480/220}
#h88r15#h88r15 .tr-man{position:absolute;left:0;top:0;width:25%;height:100%;overflow:visible}
#h88r15#h88r15 .tr-cart{position:absolute;right:0;top:0;width:75%;height:100%}
#h88r15#h88r15 .tm-lf{transform:rotate(-12deg)}#h88r15#h88r15 .tm-lb{transform:rotate(14deg)}
#h88r15#h88r15 .roll .tm-lf{animation:h88r15-stride .56s ease-in-out infinite alternate}
#h88r15#h88r15 .roll .tm-lb{animation:h88r15-stride .56s ease-in-out infinite alternate-reverse}
#h88r15#h88r15 .roll .tm-up{animation:h88r15-bob .28s ease-in-out infinite alternate}
@keyframes h88r15-stride{from{transform:rotate(-20deg)}to{transform:rotate(18deg)}}
@keyframes h88r15-bob{to{transform:translateY(2px)}}
#h88r15#h88r15 .tr-scr{left:auto;right:1%;top:1%;width:24%;min-width:80px}
#h88r15#h88r15 .tr-scr::after{right:auto;left:50%;top:100%;width:0;height:0;margin:0 0 0 -6px;background:none;border:6px solid transparent;border-top-color:#141619;border-bottom:0}
#h88r15#h88r15 .ei-top{justify-content:space-between;padding:12px 16px 10px}
#h88r15#h88r15 .ei-t{font:900 20px/1 var(--display);font-stretch:85%;letter-spacing:.08em;color:var(--ink)}
#h88r15#h88r15 .ei-mp{font:700 13px/1 var(--text);color:var(--red)}

/* 8: daily picks: endless rows, then a way out to the shop */

@media (min-width:1600px){
  #h88r15#h88r15 .trolley{--tw:480px}
  #h88r15#h88r15 .fb{--fbw:124px}
}
@media (max-width:1399px){
  #h88r15#h88r15 .club{padding:0;grid-template-columns:none}
  #h88r15#h88r15 .club-in{grid-template-columns:minmax(0,262px) minmax(0,1fr) 380px;gap:16px;padding:22px 0}
  #h88r15#h88r15 .trolley{--tw:310px}
  #h88r15#h88r15 .fb{--fbw:100px;grid-template-columns:20% minmax(0,1fr) var(--fbw)}
  #h88r15#h88r15 .fbr-l a{height:50px;padding:7px 8px}
}
}

@media (min-width:1024px) and (hover:hover) and (pointer:fine){
/* =================== r15.2 (EY, 2026-10-24 20:35) =================== */
/* 1: STAR CLUB member prices - a bold red subsidy band, edge to edge like the STAR CLUB band */
#h88r15#h88r15 .sband{position:relative;margin-top:16px;overflow:hidden;color:#fff;
  background:radial-gradient(48% 130% at 8% -10%,rgba(255,216,90,.34),transparent 62%),radial-gradient(42% 110% at 96% 115%,rgba(255,140,40,.5),transparent 66%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath fill='%23fff' fill-opacity='.055' d='M30 14l4.4 9 9.9 1.4-7.2 7 1.7 9.8L30 36.6l-8.8 4.6 1.7-9.8-7.2-7 9.9-1.4zM90 72l3 6.1 6.7 1-4.9 4.7 1.2 6.7-6-3.2-6 3.2 1.2-6.7-4.9-4.7 6.7-1z'/%3E%3C/svg%3E"),
  linear-gradient(100deg,#B8000D 0%,#E2101C 38%,#F2261E 70%,#FF5A22 100%)}
#h88r15#h88r15 .sband::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#FFD23F 20%,#FFF0A8 50%,#FFD23F 80%,transparent)}
#h88r15#h88r15 .sb-in{padding:20px 0 24px}
#h88r15#h88r15 .sb-hd{display:flex;align-items:center;gap:16px;min-height:44px;margin-bottom:16px}
#h88r15#h88r15 .sb-badge{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 12px;border-radius:999px;background:linear-gradient(#2A0708,#120203);box-shadow:inset 0 0 0 1.5px #FFC72C,0 8px 16px -8px rgba(60,0,0,.8)}
#h88r15#h88r15 .sb-badge .star-logo{width:64px;height:19px}
#h88r15#h88r15 .sb-badge b{margin-left:-2px;font:italic 900 15px/1 var(--display);font-stretch:88%;letter-spacing:.04em;color:var(--yellow)}
#h88r15#h88r15 .sb-hd h2{flex:none;font:italic 900 40px/1 var(--display);font-stretch:78%;letter-spacing:-.005em;white-space:nowrap;color:#fff;text-shadow:0 2px 0 rgba(110,0,0,.35)}
#h88r15#h88r15 .sb-hd h2 em{font-style:italic;color:#FFD23F;background:linear-gradient(180deg,#FFF6C2 0%,#FFD84D 46%,#FFB000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(110,0,0,.35))}
#h88r15#h88r15 .sb-tag{min-width:0;display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:1px solid rgba(255,255,255,.3)}
#h88r15#h88r15 .sb-tag b{font:800 16px/1.15 var(--text);color:#FFE58A;white-space:nowrap}
#h88r15#h88r15 .sb-tag span{font:500 13px/1.3 var(--text);color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#h88r15#h88r15 .sb-join{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 16px 0 20px;border-radius:999px;background:linear-gradient(#FFE266,#FFC72C);color:#5A0A00;font:800 14px/1 var(--text);white-space:nowrap;box-shadow:0 8px 18px -8px rgba(70,0,0,.8);transition:transform .2s var(--ease),filter .2s}
#h88r15#h88r15 .sb-join:hover{transform:translateY(-1px);filter:brightness(1.06)}
#h88r15#h88r15 .sb-more{flex:none;display:inline-flex;align-items:center;gap:2px;color:#fff;font:700 14px/1 var(--text);white-space:nowrap}
#h88r15#h88r15 .sb-more:hover{color:#FFE58A}
#h88r15#h88r15 .sb-join .ico,#h88r15#h88r15 .sb-more .ico{width:14px;height:14px;stroke-width:2.6;transition:transform .2s}
#h88r15#h88r15 .sb-join:hover .ico,#h88r15#h88r15 .sb-more:hover .ico{transform:translateX(3px)}
#h88r15#h88r15 .sb-body{display:grid;grid-template-columns:clamp(380px,32%,500px) minmax(0,1fr);gap:16px;align-items:stretch}
/* featured: the biggest real member saving */
#h88r15#h88r15 .sb-feat{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:300px;border-radius:16px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 0 0 3px rgba(255,214,80,.9),0 22px 40px -22px rgba(70,0,0,.9)}
#h88r15#h88r15 .sb-flag{position:absolute;z-index:3;left:0;top:0;padding:8px 14px 8px 12px;border-radius:0 0 12px 0;background:linear-gradient(90deg,#FFE266,#FFB800);color:#5A0A00;font:800 13px/1 var(--text);letter-spacing:.01em}
#h88r15#h88r15 .sb-fimg{position:relative;display:block;padding:40px 14px 16px;background:radial-gradient(70% 60% at 50% 58%,#FFFFFF 0,#FFF3DE 55%,#FFE2B8 100%)}
#h88r15#h88r15 .sb-fimg .ph{width:100%;height:100%;min-height:210px;transition:transform .45s var(--ease)}
#h88r15#h88r15 .sb-feat:hover .sb-fimg .ph{transform:scale(1.05)}
#h88r15#h88r15 .sb-fimg .off{left:auto;right:12px;top:auto;bottom:14px;width:58px;height:58px;padding:0;justify-content:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF3B3B,#C8000E);color:#FFE266;font:italic 900 19px/1 var(--display);font-stretch:85%;transform:rotate(-10deg);box-shadow:0 0 0 3px #fff,0 10px 18px -8px rgba(120,0,0,.8)}
#h88r15#h88r15 .sb-finfo{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:22px 22px 22px 8px}
#h88r15#h88r15 .sb-fn{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font:700 18px/1.3 var(--text);color:var(--ink)}
#h88r15#h88r15 .sb-fn:hover{color:var(--red)}
#h88r15#h88r15 .sb-lbl{margin-top:14px;font:800 12.5px/1 var(--text);letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
#h88r15#h88r15 .sb-finfo .mp{margin-top:4px;font-size:64px;line-height:.95;color:var(--red)}
#h88r15#h88r15 .sb-fo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:8px}
#h88r15#h88r15 .sb-fo .np{font:500 14px/1 var(--text)}
#h88r15#h88r15 .sb-fo .np s{margin-left:3px;font-weight:600}
#h88r15#h88r15 .sb-fo .save{height:28px;padding:0 12px;border-radius:999px;font-size:15px;box-shadow:0 6px 12px -6px rgba(140,90,0,.8)}
#h88r15#h88r15 .sb-add{margin-top:18px;height:44px;border-radius:999px;background:var(--red)!important;color:#fff!important;font:800 15px/1 var(--text);box-shadow:0 10px 20px -10px rgba(150,0,10,.9);transition:background-color .2s,transform .2s var(--ease)}
#h88r15#h88r15 .sb-add:hover{background:var(--red-2)!important;transform:translateY(-1px)}
/* the row: white tiles that scroll sideways; arrows page it */
#h88r15#h88r15 .sb-rw{position:relative;min-width:0}
#h88r15#h88r15 .sb-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px) / 4);column-gap:12px;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px}
#h88r15#h88r15 .sb-row::-webkit-scrollbar{display:none}
#h88r15#h88r15 .sbt{position:relative;display:flex;flex-direction:column;min-width:0;padding:12px 12px 14px;border-radius:14px;background:#fff;color:var(--ink);scroll-snap-align:start;box-shadow:0 12px 24px -18px rgba(70,0,0,.9);transition:box-shadow .25s}
#h88r15#h88r15 .sbt:hover{box-shadow:inset 0 0 0 2px #FFD23F,0 16px 28px -16px rgba(70,0,0,.9)}
#h88r15#h88r15 .sbt-img{position:relative;display:block;flex:1 0 auto;min-height:140px;padding:14px;border-radius:10px;background:#FFF6EA}
#h88r15#h88r15 .sbt-img .ph{position:absolute;inset:14px;transition:transform .45s var(--ease)}
#h88r15#h88r15 .sbt:hover .sbt-img .ph{transform:scale(1.06)}
#h88r15#h88r15 .sbt-rib{position:absolute;z-index:2;left:0;top:18px;padding:6px 10px 6px 12px;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#FFE266,#FFC72C);color:var(--yellow-ink);font:800 13px/1 var(--text);font-style:normal;white-space:nowrap;box-shadow:0 5px 10px -5px rgba(120,60,0,.8)}
#h88r15#h88r15 .sbt-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin:10px 0 6px;font:500 13.5px/1.35 var(--text);color:var(--ink)}
#h88r15#h88r15 .sbt-n:hover{color:var(--red)}
#h88r15#h88r15 .sbt-p{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
#h88r15#h88r15 .sbt-p .mp{font-size:30px;color:var(--red)}
#h88r15#h88r15 .sbt-add{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;height:40px;border-radius:999px;background:var(--red)!important;color:#fff!important;font:800 14px/1 var(--text);box-shadow:0 10px 18px -8px rgba(120,0,8,.75);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease),background-color .2s}
#h88r15#h88r15 .sbt:hover .sbt-add,#h88r15#h88r15 .sbt:focus-within .sbt-add{opacity:1;transform:none;pointer-events:auto}
#h88r15#h88r15 .sbt-add:hover{background:var(--red-2)!important}
#h88r15#h88r15 .sb-arr{position:absolute;z-index:4;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border-radius:50%;background:#fff!important;color:var(--red)!important;box-shadow:0 0 0 2px rgba(255,214,80,.95),0 10px 22px -8px rgba(60,0,0,.8);transition:opacity .2s,transform .2s var(--ease),background-color .2s}
#h88r15#h88r15 .sb-arr:hover{background:#FFE266!important;transform:scale(1.06)}
#h88r15#h88r15 .sb-arr .ico{width:20px;height:20px;stroke-width:2.8}
#h88r15#h88r15 .sb-prev{left:-12px}#h88r15#h88r15 .sb-prev .ico{transform:rotate(180deg)}
#h88r15#h88r15 .sb-next{right:10px}
#h88r15#h88r15 .sb-arr:disabled{opacity:0;pointer-events:none}

/* 2: STAR CLUB trolley: a taller worker; the load piles up into a mountain taller than he is */
#h88r15#h88r15 .club-in{min-height:400px}
#h88r15#h88r15 .tr-stage{min-height:360px}
#h88r15#h88r15 .trolley{--tw:400px;left:0;bottom:8px;aspect-ratio:460/360}
#h88r15#h88r15 .tr-cart{left:0;right:auto;width:100%}
#h88r15#h88r15 .tr-scr{right:0;top:0}
#h88r15#h88r15 .tr-lines{max-height:182px;overflow:hidden}
#h88r15#h88r15 .tr-lines .tl-o{font:500 13px/1 var(--text);color:var(--strike);text-align:right}
@media (min-width:1600px){
  #h88r15#h88r15 .trolley{--tw:460px}
  #h88r15#h88r15 .sb-row{grid-auto-columns:calc((100% - 48px) / 5)}
}
@media (max-width:1399px){
  #h88r15#h88r15 .club-in{min-height:360px}
  #h88r15#h88r15 .tr-stage{min-height:320px}
  #h88r15#h88r15 .trolley{--tw:340px}
  #h88r15#h88r15 .sb-hd h2{font-size:34px}
  #h88r15#h88r15 .sb-tag span{display:none}
  #h88r15#h88r15 .sb-body{grid-template-columns:360px minmax(0,1fr)}
  #h88r15#h88r15 .sb-finfo{padding:20px 16px 20px 4px}
  #h88r15#h88r15 .sb-fn{font-size:16px}
  #h88r15#h88r15 .sb-finfo .mp{font-size:54px}
  #h88r15#h88r15 .sbt-p .mp{font-size:26px}
}
}

/* ==== r15 RIGHT TOOL RAIL (front page only, PC gate, live rail markup) ====
 * This file is enqueued only on is_front_page(). It moves the live theme's own rail (.h88-desktop-tool-rail panel and its
 * fixed shortcut rows) flush to the window's right edge with a solid white panel, as in the r15 design. Only position,
 * corner radius, border and shadow change; links, cart fragment, chat and counts are untouched. Delete this block to undo. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){@media (min-width:1200px) and (any-pointer:fine){
html.h88-category-desktop body.hardware-club-theme.home{--h88-tool-rail-right:0px;--h88-tool-rail-width:70px}
html.h88-category-desktop body.hardware-club-theme.home .h88-desktop-tool-rail{right:0;border:1px solid #E3E6EA;border-right:0;border-radius:14px 0 0 14px;background:#fff;box-shadow:-8px 0 26px -16px rgba(22,25,30,.35)}
html.h88-category-desktop body.hardware-club-theme.home .h88-desktop-account-shortcut{border-radius:14px 0 0 0}
html.h88-category-desktop body.hardware-club-theme.home .h88-back-to-top{border-radius:0 0 0 14px}
}}
/* =================== r15.3 (EY marked-up screenshots, 2026-10-24 22:22) =================== */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
/* 1: Shopee-style hover: red outline + a full-width Add to cart bar that extends DOWN below the card.
   Absolutely positioned (card height unchanged, nothing moves); overflows over whatever is underneath. */
#h88r15#h88r15 .pc:hover,#h88r15#h88r15 .pc:has(:focus-visible){z-index:30;box-shadow:inset 0 0 0 1.5px var(--red)}
#h88r15#h88r15 .pc .pc-add,#h88r15#h88r15 .fg .pc .pc-add{position:absolute;z-index:3;left:0;right:0;top:100%;bottom:auto;width:auto;height:38px;margin:0;padding:0;border-radius:0;background:var(--red)!important;color:#fff!important;box-shadow:0 14px 22px -12px rgba(120,0,8,.65);font:700 14px/1 var(--text);opacity:0;transform:none;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .22s var(--ease),opacity .12s}
#h88r15#h88r15 .pc:hover .pc-add,#h88r15#h88r15 .pc:has(:focus-visible) .pc-add{opacity:1;clip-path:inset(0 -30px -30px -30px);pointer-events:auto}
#h88r15#h88r15 .pc .pc-add:hover{background:var(--red-2)!important}
#h88r15#h88r15 .pc .pc-add.done{background:#13844B!important}
/* containers that used overflow:hidden for their rounded corners: let the bar out, round the corner pieces instead */
#h88r15#h88r15 .deals,#h88r15#h88r15 .floor,#h88r15#h88r15 .daily{overflow:visible}
#h88r15#h88r15 .dl-side{border-radius:16px 0 0 16px}
#h88r15#h88r15 .dl-row{border-radius:0 16px 16px 0}
#h88r15#h88r15 .dl-row .pc:nth-child(6){border-radius:0 16px 16px 0}
#h88r15#h88r15 .fh{border-radius:16px 16px 0 0}
#h88r15#h88r15 .fb>:first-child{border-bottom-left-radius:16px}
#h88r15#h88r15 .fbr{border-bottom-right-radius:16px}
#h88r15#h88r15 .dh{border-radius:16px 16px 0 0}
#h88r15#h88r15 .daily{padding-bottom:14px}
/* member-prices band: tiles live in a horizontal scroller (which must clip), so the row reserves the bar's room */
#h88r15#h88r15 .sb-in{padding-bottom:6px}
#h88r15#h88r15 .sb-feat{margin-bottom:42px}
#h88r15#h88r15 .sb-row{padding-bottom:42px;border-radius:16px 16px 0 0}
#h88r15#h88r15 .sb-arr{margin-top:-43px}
#h88r15#h88r15 .sbt{transition:box-shadow .2s,border-radius .2s}
#h88r15#h88r15 .sbt:hover,#h88r15#h88r15 .sbt:focus-within{border-radius:14px 14px 0 0;box-shadow:inset 0 0 0 2px #FFD23F}
#h88r15#h88r15 .sbt-add{left:0;right:0;top:100%;bottom:auto;height:40px;border-radius:0;background:#FFD23F!important;color:#7A1200!important;font:800 14px/1 var(--text);box-shadow:0 14px 22px -12px rgba(70,0,0,.8);opacity:0;transform:none;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .22s var(--ease),opacity .12s}
#h88r15#h88r15 .sbt:hover .sbt-add,#h88r15#h88r15 .sbt:focus-within .sbt-add{opacity:1;clip-path:inset(0 -30px -30px -30px);pointer-events:auto}
#h88r15#h88r15 .sbt-add:hover{background:#FFE266!important}

/* 2: floor brand column without the "Brands" title */
#h88r15#h88r15 .fbr-h{display:none}

/* 5a: All Categories list hangs straight off the header's red tab: same edges, no gap, square top */
#h88r15#h88r15 .hero .cats{margin-top:var(--cgap,-16px);border-radius:0 0 var(--r) var(--r);box-shadow:0 24px 44px -28px rgba(60,0,6,.8)}
/* 5b: member-deal card: wide enough for the biggest price, save pill always shown, sits right after the headline */
#h88r15#h88r15 .stage{grid-template-columns:fit-content(50%) minmax(0,1fr);column-gap:clamp(24px,3vw,48px)}
#h88r15#h88r15 .tagstage{--tagw:288px}
#h88r15#h88r15 .tag{padding:26px 18px 14px}
#h88r15#h88r15 .tag .mp{font-size:56px;font-variant-numeric:tabular-nums;white-space:nowrap}
#h88r15#h88r15 .tag-m{flex-wrap:nowrap}
#h88r15#h88r15 .tag-sv{opacity:1;transform:none;transition:none}
#h88r15#h88r15 .prod{left:calc(var(--tagw) + 22px);right:0}
#h88r15#h88r15 .spk.s0{left:calc(var(--tagw) + 4px)}
#h88r15#h88r15 .tctl{left:0;right:auto}

/* 6: category mega-menu: shrink to its content (no tall empty panel), columns closer together */
#h88r15#h88r15 .fly{right:auto;bottom:auto;width:max-content;min-width:min(640px,calc(100% - var(--catw) - var(--hgap)));max-width:calc(100% - var(--catw) - var(--hgap));max-height:100%;padding:20px 24px 20px 26px}
#h88r15#h88r15 .fy-h{gap:12px;padding-bottom:12px}
#h88r15#h88r15 .fy-hot{flex:0 1 auto;margin-right:auto}
#h88r15#h88r15 .fy-b{flex:none;grid-template-columns:auto 200px;gap:28px;margin-top:14px;align-items:start}
#h88r15#h88r15 .fy-g{column-count:3;column-gap:36px;overflow:visible}
#h88r15#h88r15 .fy-g section{margin-bottom:14px}
#h88r15#h88r15 .fy-g a{line-height:24px}
#h88r15#h88r15 .fy-r{padding-left:20px}
#h88r15#h88r15 .fy-promo .pimg{height:70px}

/* 7: trolley fills its stage */
#h88r15#h88r15 .trolley{--tw:440px;bottom:6px}

@media (min-width:1600px){
  #h88r15#h88r15 .dl-row .pc:nth-child(6){border-radius:0}
  #h88r15#h88r15 .dl-row .pc:nth-child(7){border-radius:0 16px 16px 0}
  #h88r15#h88r15 .tagstage{--tagw:300px}
  #h88r15#h88r15 .tag .mp{font-size:58px}
  #h88r15#h88r15 .club-in{min-height:420px}
  #h88r15#h88r15 .tr-stage{min-height:384px}
  #h88r15#h88r15 .trolley{--tw:484px}
}
@media (max-width:1399px){
  #h88r15#h88r15 .dl-row .pc:nth-child(6){border-radius:0}
  #h88r15#h88r15 .dl-row .pc:nth-child(5){border-radius:0 16px 16px 0}
  #h88r15#h88r15 .tagstage{--tagw:256px}
  #h88r15#h88r15 .tag{padding:24px 15px 12px}
  #h88r15#h88r15 .tag .mp{font-size:48px}
  #h88r15#h88r15 .prod{left:calc(var(--tagw) + 14px);right:-10px}
  #h88r15#h88r15 .fy-b{grid-template-columns:auto 186px;gap:22px}
  #h88r15#h88r15 .fy-g{column-count:2;column-gap:30px}
  #h88r15#h88r15 .trolley{--tw:380px}
}
@media (max-width:1240px){
  #h88r15#h88r15 .stage{column-gap:20px}
  #h88r15#h88r15 .tagstage{--tagw:244px}
  #h88r15#h88r15 .tag .mp{font-size:44px}
}
@media (max-width:1100px){
  #h88r15#h88r15 .stage{column-gap:16px}
  #h88r15#h88r15 .tagstage{--tagw:226px}
  #h88r15#h88r15 .tag{padding:22px 13px 12px}
  #h88r15#h88r15 .tag .mp{font-size:40px}
  #h88r15#h88r15 .prod{left:calc(var(--tagw) + 6px);right:-22px}
}
}

/* r15.4: real member deals in the hero; STAR CLUB band shows the 4 real member-price tiles across the full row */
#h88r15#h88r15 .c-grinder{background-image:url(img/c-grinder.webp)}
#h88r15#h88r15 .c-cable{background-image:url(img/c-cable.webp)}
#h88r15#h88r15 .c-paint{background-image:url(img/c-paint.webp)}
#h88r15#h88r15 .c-screws{background-image:url(img/c-screws.webp)}
#h88r15#h88r15 .sb-row,#h88r15#h88r15 .sb-row.sb-row{grid-auto-columns:calc((100% - 36px) / 4);overflow:hidden}
#h88r15#h88r15 .sb-arr{display:none}

/* r15.5: category tiles (real category, no price) in product grids and the mega-menu promo */
#h88r15#h88r15 .ct-l{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--text);color:var(--ink-2)}
#h88r15#h88r15 .ct-l:after{content:"";width:6px;height:6px;border:solid var(--red);border-width:2px 2px 0 0;transform:rotate(45deg)}
#h88r15#h88r15 .pc.ct .pline{align-items:center}
#h88r15#h88r15 a.pc-add{text-decoration:none;display:flex;align-items:center;justify-content:center}
#h88r15#h88r15 .fy-promo.fy-cat .pline{margin-top:6px}

/* ==== home-floors-6x2-20261028 (EY 2026-10-28 21:12): every floor = real products only, 6 per row x 2 rows, flush 1px lines ====
 * Banner and brand column keep their widths; the product cards get narrower. "From" tag for variable products (lowest price). */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
#h88r15#h88r15 .fg{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1px;align-content:stretch}
#h88r15#h88r15 .fg>.ffill{display:none}
#h88r15#h88r15 .fg .pc{padding:12px 10px 10px}
#h88r15#h88r15 .fg .pc-n{font-size:13.5px;line-height:18px}
#h88r15#h88r15 .fg .pline{flex-wrap:wrap;row-gap:2px}
/* EY 21:42 (pt484u): Save chip and -% chip on ONE row in floor cards at 1220/1440/1680 (same text, same colours) */
#h88r15#h88r15 .fg .sslot{flex-wrap:nowrap;gap:4px;white-space:nowrap;min-width:0}
#h88r15#h88r15 .fg .sslot .save,#h88r15#h88r15 .fg .sslot .off{flex:0 0 auto;font-size:12px;letter-spacing:-.01em}
#h88r15#h88r15 .fg .sslot .save{padding:0 6px}
#h88r15#h88r15 .fg .sslot .off{padding:0 5px}
@media (max-width:1399px){
#h88r15#h88r15 .fg .pc{padding:12px 8px 10px}
#h88r15#h88r15 .fg .sslot{gap:3px}
#h88r15#h88r15 .fg .sslot .save,#h88r15#h88r15 .fg .sslot .off{font-size:11.5px;letter-spacing:-.02em}
#h88r15#h88r15 .fg .sslot .save{padding:0 5px}
#h88r15#h88r15 .fg .sslot .off{padding:0 4px}
}
#h88r15#h88r15 .pline .fr{align-self:center;margin-right:4px;font:600 12px/1 var(--text);color:var(--mute)}
}

/* =================== r15.3 (EY, 2026-10-29 11:02 "left/right not balanced, and narrower?"): one balanced column ===================
   Replaces r15.2 (08:21), which matched the content to the header but left the whole column 40px left of the screen centre
   (the theme centres header/nav/footer .shell in viewport minus the 80px rail lane) and narrowed the content.
   Now, homepage only, header bars, nav row, every r15 block and the footer use ONE column with equal gaps to the screen edges:
     gap = max(78px, (screen - 1600px) / 2)   -> 78px = fixed tool rail (70px, flush right) + 8px clearance; 1600px = r15.1 cap.
   Only container margins/width change. Band backgrounds still run full width (and under the rail) as before.
   r15.js lay() reads --hl from the All Categories button, so the content's left edge follows the header automatically. */
#h88r15#h88r15 .wrap{margin-right:var(--hl)}
@media (min-width:1200px) and (any-pointer:fine){
#h88r15#h88r15{--hl:max(78px,calc((100% - var(--h88g,0px) + var(--h88-tool-rail-lane,80px) - 1600px) / 2))}
html.h88-category-desktop body.home.hardware-club-theme :is(.site-header,#department-nav,.site-footer) .shell{
  width:auto;max-width:none;
  margin-left:max(78px,calc((100% + var(--h88-tool-rail-lane,80px) - 1600px) / 2));
  margin-right:calc(max(78px,calc((100% + var(--h88-tool-rail-lane,80px) - 1600px) / 2)) - var(--h88-tool-rail-lane,80px))}
}

/* ==== r15.7 home-club-art-20261029 (EY): original r15.3 STAR CLUB band (rolling trolley + E-INVOICE) with the approved v2.4 art.
   Only the illustration changed: one base drawing (worker, handle, deck, wheels) + 4 pile items that drop in as the e-invoice fills.
   E-invoice lines are real Store API products only; without them the rows are neutral grey bars and no totals show. ==== */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
#h88r15#h88r15 .trolley.tw-art{left:4px;bottom:4px;width:calc(100% - 44px);max-width:760px;aspect-ratio:2/1}
#h88r15#h88r15 .tw-art .tr-svg{overflow:visible}
#h88r15#h88r15 .tw-art .ti svg{filter:drop-shadow(0 6px 4px rgba(90,40,0,.22))}
#h88r15#h88r15 .tw-art .wh{transform-box:fill-box;transform-origin:50% 50%}
#h88r15#h88r15 .tw-art.roll .tw-man{animation:h88r15-bob .28s ease-in-out infinite alternate}
#h88r15#h88r15 .tw-art .tchip:empty{display:none}
#h88r15#h88r15 .tw-art .tr-scr{left:auto;right:0;top:0;width:19%;min-width:84px}
#h88r15#h88r15 .trolley.tw-art:not(.tw-real) .tr-scr{display:none}
#h88r15#h88r15 .tr-lines li.ph .phb,#h88r15#h88r15 .einv.ei-empty .phb{display:block;height:8px;border-radius:4px;background:#E3E6EA}
#h88r15#h88r15 .tr-lines li.ph .tl-n .phb{width:74%}
#h88r15#h88r15 .tr-lines li.ph:nth-child(2) .tl-n .phb{width:58%}
#h88r15#h88r15 .tr-lines li.ph:nth-child(3) .tl-n .phb{width:82%}
#h88r15#h88r15 .tr-lines li.ph:nth-child(4) .tl-n .phb{width:64%}
#h88r15#h88r15 .tr-lines li.ph:nth-child(5) .tl-n .phb{width:70%}
#h88r15#h88r15 .tr-lines li.ph:nth-child(6) .tl-n .phb{width:52%}
#h88r15#h88r15 .tr-lines li.ph .tl-o .phb,#h88r15#h88r15 .tr-lines li.ph b .phb{width:44px;margin-left:auto}
#h88r15#h88r15 .tr-lines li.ph b .phb{background:#F3D5D7}
#h88r15#h88r15 .einv.ei-empty .tr-cnt .phb{display:inline-block;width:16px;vertical-align:-1px}
#h88r15#h88r15 .einv.ei-empty .tr-tot .phb{display:inline-block;width:76px;height:10px;vertical-align:middle}
#h88r15#h88r15 .einv.ei-empty .tr-save .phb{display:inline-block;width:70px;height:12px;vertical-align:middle;background:rgba(31,34,40,.14)}
}

/* home-real-products-v2-20261029 (EY): real Store API products only, and every section / slot keeps its r15.3 place and size.
   A slot without a real product is an empty slot (.es): the same element tree as a real card, grey blocks and bars only,
   static, no text, no price, no hover bar, not clickable. Product photos are real <img> in the slots the drawn placeholders used. */
#h88r15#h88r15 img.rimg{object-fit:contain;mix-blend-mode:multiply}
#h88r15#h88r15 .noimg{background:#F3F4F6;border-radius:8px}
#h88r15#h88r15 .fg .pline:has(.rng) .np{display:none}
#h88r15#h88r15 .tagstage:has(.slide.on.es) .rays,#h88r15#h88r15 .tagstage:has(.slide.on.es) .spk{animation:none!important}
#h88r15#h88r15 .sb-feat .sb-fn{-webkit-line-clamp:2}
#h88r15#h88r15 .pc-img img.ph{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
#h88r15#h88r15 .sb-fimg img.ph{display:block;height:210px}
#h88r15#h88r15 .fy-promo .pimg>img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s}
#h88r15#h88r15 .fy-promo:hover .pimg>img{transform:scale(1.06)}
#h88r15#h88r15 .qv-main>span>img{position:absolute;inset:22px;width:calc(100% - 44px);height:calc(100% - 44px);object-fit:contain}
#h88r15#h88r15 .qv-th button>span>img{display:block;width:100%;height:100%;object-fit:contain}
#h88r15#h88r15 .pline .rng{align-self:center;margin-left:3px;font:800 13px/1 var(--text);color:var(--red);white-space:nowrap}
#h88r15#h88r15 .prod{display:flex;align-items:center;justify-content:center}
#h88r15#h88r15 .prod img.cut{width:auto;height:auto;max-width:100%;max-height:100%;padding:16px;border-radius:22px;background:#fff;mix-blend-mode:normal;box-shadow:0 24px 40px -18px rgba(40,0,4,.55)}
#h88r15#h88r15 .th-i[style]{border-radius:8px;background-color:#fff}
/* empty slots */
#h88r15#h88r15 .es,#h88r15#h88r15 .es *{pointer-events:none!important;cursor:default!important;animation:none!important;transition:none!important}
#h88r15#h88r15 u.eb{display:inline-block;vertical-align:middle;width:80%;max-width:100%;height:.62em;border-radius:4px;background:#E9ECF0;text-decoration:none}
#h88r15#h88r15 u.eb.w9{width:90%}#h88r15#h88r15 u.eb.w7{width:7em}#h88r15#h88r15 u.eb.w6{width:60%}#h88r15#h88r15 u.eb.w5{width:4.5em}#h88r15#h88r15 u.eb.w4{width:3.4em}#h88r15#h88r15 u.eb.w3{width:2.4em}
#h88r15#h88r15 u.eb.pm{width:2.4em;height:.7em}
#h88r15#h88r15 u.eb.pn{width:4.2em;height:.62em}
#h88r15#h88r15 .pc.es{background:#fff}
#h88r15#h88r15 .pc.es:hover,#h88r15#h88r15 .sbt.es:hover{box-shadow:none;border-radius:inherit}
#h88r15#h88r15 .es .pc-img{border-radius:10px;background:#F1F3F5}
#h88r15#h88r15 .es .z::after{content:"\200B"}
#h88r15#h88r15 .es .zb{display:inline-block;color:transparent!important;text-decoration:none!important;background:linear-gradient(#E9ECF0,#E9ECF0) 0 50%/100% .62em no-repeat!important;box-shadow:none!important}
#h88r15#h88r15 .es .mp.zb{display:inline-flex;width:55px;background-size:100% 11px!important}
#h88r15#h88r15 .es .np.zb{width:64px;background-size:100% 9px!important}
#h88r15#h88r15 .es .pline{align-items:center}
#h88r15#h88r15 .fg .es .mp.zb{width:64px}#h88r15#h88r15 .fg .es .np.zb{width:66px}
#h88r15#h88r15 .es .zb.w9{width:90%}#h88r15#h88r15 .es .zb.w7{width:7em}#h88r15#h88r15 .es .zb.w6{width:5.4em}#h88r15#h88r15 .es .zb.w5{width:4.5em}#h88r15#h88r15 .es .zb.w4{width:3.4em}
#h88r15#h88r15 .es .dotw-l{background:#E9ECF0;width:140px}
#h88r15#h88r15 .es .dotw-l u.eb{background:transparent}
/* hero empty tag + thumbs */
#h88r15#h88r15 .slide.es .prod{opacity:1;transform:none}
#h88r15#h88r15 .slide.es .ecut{width:62%;height:auto;aspect-ratio:1;max-height:86%;border-radius:22px;background:rgba(255,255,255,.16);filter:none}
#h88r15#h88r15 .slide.es .tag-pct,#h88r15#h88r15 .slide.es .tag-go>span:last-child{background:#E9ECF0!important;box-shadow:none!important;color:transparent}
#h88r15#h88r15 .slide.es .tag-pct u.eb,#h88r15#h88r15 .slide.es .tag-go>span:last-child u.eb{background:transparent}
#h88r15#h88r15 u.eb.lb{position:relative;height:auto;vertical-align:baseline;background:none!important;border-radius:0}
#h88r15#h88r15 u.eb.lb::after{content:"\200B"}
#h88r15#h88r15 u.eb.lb::before{content:"";position:absolute;left:0;right:0;top:50%;height:.62em;margin-top:-.31em;border-radius:4px;background:var(--eb,#E9ECF0)}
#h88r15#h88r15 .slide.es .tag-pct u.eb.lb,#h88r15#h88r15 .slide.es .tag-go>span:last-child u.eb.lb{--eb:transparent}
#h88r15#h88r15 u.eb.ms{width:1.3em}#h88r15#h88r15 u.eb.mn{width:1.9em}
#h88r15#h88r15 .slide.es svg{opacity:.3}
#h88r15#h88r15 .slide.es .tag-go .bars{opacity:.25}
#h88r15#h88r15 .th.es{display:flex}
#h88r15#h88r15 .th.es .th-i{border-radius:8px;background:rgba(255,255,255,.22)}
#h88r15#h88r15 .th.es .th-p u.eb{width:52px;background:rgba(255,255,255,.3)}
#h88r15#h88r15 .tctl .tp:disabled{opacity:.45}
/* band */
#h88r15#h88r15 .sb-feat.es .sb-flag,#h88r15#h88r15 .sb-feat.es .sb-add{background:#E9ECF0!important;box-shadow:none!important}
#h88r15#h88r15 .sb-feat.es .sb-flag{width:180px;height:29px}
#h88r15#h88r15 .sb-feat.es .sb-flag u.eb{background:transparent}
#h88r15#h88r15 .sb-feat.es .sb-fimg{background:#F6F7F9}
#h88r15#h88r15 .sb-feat.es .eimg{display:block;height:100%;border-radius:14px;background:#EDEFF2}
#h88r15#h88r15 .sb-feat.es .sb-add{display:block}
#h88r15#h88r15 .sb-feat.es .save{width:107px;background:#E9ECF0;color:transparent}
#h88r15#h88r15 .sb-feat.es .sb-fo .np.zb{width:123px}
#h88r15#h88r15 .sb-feat.es .mp.zb{width:150px;background-size:100% 30px!important}
#h88r15#h88r15 u.eb.l1{width:6.6em}#h88r15#h88r15 u.eb.l2{width:7.4em}
#h88r15#h88r15 .sbt.es .sbt-img{background:#F1F3F5;border-radius:12px}
/* member deals heading 'up to' amount + tools banner price place */
#h88r15#h88r15 #deals-h u.eb.hb{width:2.6em;height:.6em;background:rgba(255,255,255,.28)}
#h88r15#h88r15 .ad-price.es{height:24px}
#h88r15#h88r15 .fy-promo.es{background:#F4F5F7}
#h88r15#h88r15 .fy-promo.es .pimg{border-radius:10px;background:#E9ECF0}

/* club v2.5 (EY 2026-10-29 14:07): art 20% smaller, Business purchasing as button */
#h88r15#h88r15 .trolley.tw-art{width:calc((100% - 44px)*.84);max-width:638px}
#h88r15#h88r15#h88r15 .club .cta .pill-white{text-decoration:none}
#h88r15#h88r15 .club .cta .pill-white{background:#16191E;color:#fff;box-shadow:0 10px 22px -14px rgba(0,0,0,.7)}#h88r15#h88r15 .club .cta .pill-white:hover{background:#000;color:#fff}#h88r15#h88r15 .club .cta .pill-white .ico{color:#fff}#h88r15#h88r15 .club .tr-floor{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* ==== 2026-10-30 jobrow-brandhover CLS fix ====
   The PC page geometry (body tool-rail lane in desktop-tool-rail.css, and the r15 header/nav/footer .shell column above) is keyed on
   html.h88-category-desktop, which category-overlay.js adds only at the end of the page. Until then .shell is min(100% - 80px,1420px)
   with no lane, so at 1366-1920 the header, nav and hero jump when the class lands (~1.1 s, while fonts load): CLS 0.29-0.43.
   The same geometry is applied here from the first paint, using that script's own test ((min-width:1200px) and not (any-pointer:coarse)),
   only while the class is still missing, so after the class arrives the original rules apply unchanged (same values).
   --h88g starts at the lane width that r15.js lay() measures (body padding-right), so #h88r15 does not widen by 80px when lay() runs. */
@media (min-width:1200px) and (any-pointer:fine){@media not all and (any-pointer:coarse){
#h88r15#h88r15{--h88g:var(--h88-tool-rail-lane,80px)}
html:not(.h88-category-desktop) body.hardware-club-theme.home{--h88-tool-rail-lane:calc(80px + env(safe-area-inset-right,0px));box-sizing:border-box;padding-right:var(--h88-tool-rail-lane)}
html:not(.h88-category-desktop) body.hardware-club-theme.home>.site-header>.header-masthead>:is(.utility-bar,.header-main-band),
html:not(.h88-category-desktop) body.hardware-club-theme.home>.site-footer.club-footer{margin-right:calc(0px - var(--h88-tool-rail-lane));padding-right:var(--h88-tool-rail-lane)}
html:not(.h88-category-desktop) body.home.hardware-club-theme :is(.site-header,#department-nav,.site-footer) .shell{
  width:auto;max-width:none;
  margin-left:max(78px,calc((100% + var(--h88-tool-rail-lane,80px) - 1600px) / 2));
  margin-right:calc(max(78px,calc((100% + var(--h88-tool-rail-lane,80px) - 1600px) / 2)) - var(--h88-tool-rail-lane,80px))}
/* nav categories: r15.js hides links that do not fit whole; keep a clear gap before "Delivery & collection". */
html body.home .site-header .h88p-nav>.h88p-cats{margin-right:10px}
}}

/* codex-20261030 */
#h88r15#h88r15 .copy .eyebrow{font-size:19px;line-height:24px;letter-spacing:.1em;gap:8px}
#h88r15#h88r15 .copy .eyebrow svg{width:19px;height:19px}
#h88r15#h88r15 .copy .eyebrow-logo{display:block;width:220px;height:28px;max-width:100%;object-fit:contain;object-position:left center;margin:-44px 0 0;align-self:flex-start}
#h88r15#h88r15 .copy .sub{text-wrap:pretty}
#h88r15#h88r15 .jobs-arr[aria-disabled="true"]{opacity:.3;cursor:default;pointer-events:none}
#h88r15#h88r15 .ei-th,#h88r15#h88r15 .tr-lines li,#h88r15#h88r15 .tr-tot{grid-template-columns:24px minmax(0,1fr) 76px 76px;column-gap:20px}
#h88r15#h88r15 .einv{font-variant-numeric:tabular-nums}
#h88r15#h88r15 .tr-lines li>:nth-child(n+3),#h88r15#h88r15 .tr-tot s,#h88r15#h88r15 .tr-tot b{white-space:nowrap;text-align:right}
#h88r15#h88r15 .tl-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#h88r15#h88r15 .tr-tot>span{grid-column:1 / 3;white-space:nowrap}
#h88r15#h88r15 .tr-tot>span:nth-of-type(2){grid-column:1 / 4}
#h88r15#h88r15 .tr-tot .tt-n,#h88r15#h88r15 .tr-tot .tt-m{justify-self:end;white-space:nowrap}
#h88r15#h88r15 .tr-tot .tt-n{grid-column:3}
#h88r15#h88r15 .tr-tot .tt-m{grid-column:4}
@media(max-width:1399px){
#h88r15#h88r15 .ei-th,#h88r15#h88r15 .tr-lines li,#h88r15#h88r15 .tr-tot{grid-template-columns:minmax(0,1fr) 76px 76px}
#h88r15#h88r15 .tr-tot>span{grid-column:1 / 2}
#h88r15#h88r15 .tr-tot>span:nth-of-type(2){grid-column:1 / 3}
#h88r15#h88r15 .tr-tot .tt-n{grid-column:2}
#h88r15#h88r15 .tr-tot .tt-m{grid-column:3}
}

/* codex-20261030: measured two-row reveal and rounded hover edges. */
#h88r15#h88r15 .wall>.pc[hidden],#h88r15#h88r15 .wload[hidden]{display:none}
#h88r15#h88r15 #daily[hidden]{display:none}
#h88r15#h88r15 .wall>.pc.es:nth-child(n+13){display:none}
@media(min-width:1600px){#h88r15#h88r15 .wall>.pc.es:nth-child(-n+16):not([hidden]){display:flex}}
#h88r15#h88r15 .wload{display:block;margin:16px auto 2px;height:40px;padding:0 24px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font:600 14px/1 var(--text);cursor:pointer}
#h88r15#h88r15 .wload:hover{border-color:var(--red);color:var(--red);background:var(--red-tint)}
#h88r15#h88r15 .bview{isolation:isolate;clip-path:inset(0 round 14px)}
#h88r15#h88r15 :is(.wall,.fg) .pc:is(:hover,:focus-within){border-radius:8px}
#h88r15#h88r15 .jt:is(:hover,:focus-within){border-radius:var(--r-m)}
#h88r15#h88r15 .pc .pc-add{border-radius:0 0 8px 8px}
#h88r15#h88r15 .sbt:is(:hover,:focus-within){border-radius:14px}
#h88r15#h88r15 .sbt-add{border-radius:0 0 14px 14px}
/* card-sq-20261104: PC 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). any-pointer:fine keeps this out of build_m.py touch rebuilds. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (any-pointer:fine){
#h88r15#h88r15#h88r15 .pc:is(:hover,:focus-within){border-radius:0}
#h88r15#h88r15#h88r15 .pc .pc-add{border-radius:0}
#h88r15#h88r15#h88r15 .pc .pc-n{align-content:end}
}