/* (Sir, Nov 1: "for this, don't do the border, do something wayyy different") the "All accessories" section has no
   frame at all: it is a dark showroom lit by a soft silver spotlight that follows the mouse (js/showroom.js sets
   --mx/--my). Phones get a still light from the top. */
html body:is(.repairs,.storepage) .stx > section.stx-grid-sec::before,
html body:is(.repairs,.storepage) .stx > section.stx-grid-sec::after{display:none !important}
html body:is(.repairs,.storepage) .stx > section.stx-grid-sec{
  background:
    radial-gradient(120% 60% at 50% 120%,rgba(205,203,202,.07),rgba(205,203,202,0) 60%),
    #0B0B0B !important}
/* ("take all the lag off") the light is its own layer (.mv-spot, added by js/showroom.js) moved with transform only,
   so the section and its cards never repaint while the mouse moves */
html body:is(.repairs,.storepage) .stx-grid-sec > .mv-spot-box{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
html body:is(.repairs,.storepage) .stx-grid-sec .mv-spot{position:absolute;left:0;top:0;width:1040px;height:1040px;
  margin:-520px 0 0 -520px;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(222,220,219,.19),rgba(222,220,219,.07) 54%,rgba(222,220,219,0) 100%);
  transform:translate3d(50vw,-10vh,0)}
/* (Sir, Nov 1: "it's getting cut out") category bubbles = true circles; the photo sits centred, fully inside */
html body .stx-cat .stx-cat-img:not(#_a){width:104px !important;height:104px !important;aspect-ratio:1/1 !important;
  display:grid !important;place-items:center !important;padding:0 !important;box-sizing:border-box !important}
html body .stx-cat .stx-cat-img:not(#_a) img{width:72% !important;height:72% !important;object-fit:contain !important;
  margin:0 !important;position:static !important;transform:none !important}
html body .stx-cat:not(#_a){display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;height:auto !important}
html body .stx-cat:not(#_a) .stx-cat-t{margin:0 !important;position:static !important;transform:none !important}
/* (Sir, Nov 1: "right got cut out") the category row lives INSIDE the frame: clipped at the frame's inner edge
   (not the window) and softly faded at both ends, so it reads as "scroll for more" instead of spilling out */
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a){margin-inline:calc(var(--pan-x,32px) + 3px) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
/* (Sir, Nov 1: "instead of sliders, put up and bottom") the brand row is no longer a slider: every bubble shows,
   wrapping onto rows, centred */
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a){-webkit-mask-image:none !important;mask-image:none !important;overflow:visible !important}
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-scroller{overflow:visible !important;transform:none !important}
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats{display:flex !important;flex-wrap:wrap !important;
  justify-content:center !important;gap:clamp(22px,3vw,40px) clamp(18px,3vw,48px) !important;width:auto !important;
  padding:8px 0 !important;margin:0 auto !important;transform:none !important;grid-auto-flow:unset !important}
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats > li{flex:0 0 auto !important;width:clamp(96px,10vw,130px) !important;margin:0 !important}
@media (max-width:734px){
  html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats > li{width:calc((100% - 2*18px)/3) !important}
  html body .stx-cat .stx-cat-img:not(#_a){width:84px !important;height:84px !important}
}
html body:is(.repairs,.storepage) .stx > .stx-top:not(#_a){height:auto !important;max-height:none !important}
html body:is(.repairs,.storepage) .stx > .stx-top:not(#_a) > *,
html body:is(.repairs,.storepage) .stx-cats:not(#_a),
html body:is(.repairs,.storepage) .stx-cats:not(#_a) :is(.stx-rail,.stx-clip,.stx-scroller){flex-shrink:0 !important;height:auto !important;max-height:none !important}
/* (Sir, Nov 1: "too laggy") the product cards in the showroom drop their backdrop blur: behind them is only the
   dark floor and the moving spotlight, so the blur showed nothing but had to be redone on every mouse move */
html body:is(.repairs,.storepage) .stx-grid-sec :is(.st-card,.stx-card,.rpx-card):not(#_a){-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
/* (Nov 1: "fix all the small errors") even rows: no single bubble left alone on the last row.
   Store (8): one row of 8, 4 + 4 on tablets. Repairs (14): 7 + 7, then 5 + 5 + 4. Phones: 3 a row. */
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats{--g:clamp(14px,2vw,28px);column-gap:var(--g) !important;max-width:1180px}
html body.storepage .stx-clip-cats:not(#_a) .stx-platter-cats > li{width:calc((100% - 7*var(--g))/8) !important}
html body.repairs .stx-clip-cats:not(#_a) .stx-platter-cats > li{width:calc((100% - 6*var(--g))/7) !important}
@media (max-width:1100px){
  html body.storepage .stx-clip-cats:not(#_a) .stx-platter-cats > li{width:calc((100% - 3*var(--g))/4) !important}
  html body.repairs .stx-clip-cats:not(#_a) .stx-platter-cats > li{width:calc((100% - 4*var(--g))/5) !important}
}
@media (max-width:734px){
  html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats > li{width:calc((100% - 2*var(--g))/3) !important}
}
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats > li,
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats > li > .stx-cat{min-width:0 !important;max-width:none !important}
html body:is(.repairs,.storepage) .stx-clip-cats:not(#_a) .stx-platter-cats > li > .stx-cat{width:100% !important}