/* QA101.25 — CMS keeps the banner after the six cards; images lift on hover. */
.sppauto-theme .sppauto-category-strip[data-cms-block="product_categories"] { padding:0; background:#fff; }
.sppauto-theme .sppauto-category-strip .category-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; width:100%; margin-bottom:78px; border:0; background:#909090; overflow:visible; position:relative; }
.sppauto-theme .sppauto-category-strip .category-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; grid-row:auto; grid-column:auto; height:350px; min-height:0; min-width:0; padding:58px 14px 0; border:0; background:transparent; color:#fff; overflow:visible; box-shadow:none; transform:none; transition:background .2s ease; }
.sppauto-theme .sppauto-category-strip .category-card .meta { position:relative; z-index:4; width:100%; max-width:100%; margin:0; text-align:center; }
.sppauto-theme .sppauto-category-strip .category-card h3 { margin:0; font-family:"SPPAUTO Zirkel Display", "Segoe UI Light", "Segoe UI", Arial, sans-serif; font-weight:200; font-size:clamp(16px,1.2vw,23px); line-height:1.35; letter-spacing:1px; text-transform:uppercase; color:#fff; overflow-wrap:anywhere; }
.sppauto-theme .sppauto-category-strip .category-card .go,
.sppauto-theme .sppauto-category-strip .category-card::before { display:none; }
.sppauto-theme .sppauto-category-media { position:absolute; z-index:1; top:140px; bottom:-58px; inset-inline:0; width:clamp(240px,84%,340px); margin-inline:auto; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; transform:translateY(0); }
/* Override the old directory's image-free rules and per-card positioning. */
.sppauto-theme .sppauto-category-strip .category-card img { display:block!important; position:static; width:100%!important; height:auto; max-width:100%; max-height:none; right:auto!important; bottom:auto!important; margin:0; object-fit:contain; object-position:center bottom; mix-blend-mode:normal; filter:drop-shadow(0 10px 14px rgba(0,0,0,.15)); }
/* QA102.44 — Fade is moved into the visible alpha footprint.
   Some WEBP assets contain transparent canvas below the product, so the old
   84–100% mask faded only empty pixels. The first four cards now fade earlier;
   the repair-kit asset keeps its existing fade because its visible pixels reach
   the bottom of the canvas. */
.sppauto-theme .sppauto-category-strip .category-card img {
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.94) 75%,rgba(0,0,0,.68) 80%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.14) 88%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.94) 75%,rgba(0,0,0,.68) 80%,rgba(0,0,0,.38) 84%,rgba(0,0,0,.14) 88%,transparent 92%);
}
.sppauto-theme .sppauto-category-strip .category-card[data-category-id="6"] img {
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,rgba(0,0,0,.96) 89%,rgba(0,0,0,.72) 94%,rgba(0,0,0,.28) 97%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 84%,rgba(0,0,0,.96) 89%,rgba(0,0,0,.72) 94%,rgba(0,0,0,.28) 97%,transparent 100%);
}
/* QA102.42 — Normalize perceived visual size using the visible alpha footprint of each asset. */
.sppauto-theme .sppauto-category-strip .category-card { --category-visual-scale:1; --category-visual-translate-y:0px; }
.sppauto-theme .sppauto-category-strip .category-card[data-category-id="31"] { --category-visual-scale:.74; }
.sppauto-theme .sppauto-category-strip .category-card[data-category-id="32"] { --category-visual-scale:1.15; }
.sppauto-theme .sppauto-category-strip .category-card[data-category-id="2"]  { --category-visual-scale:1.02; }
.sppauto-theme .sppauto-category-strip .category-card[data-category-id="7"]  { --category-visual-scale:1.15; }
.sppauto-theme .sppauto-category-strip .category-card[data-category-id="6"]  { --category-visual-scale:.58; --category-visual-translate-y:-8px; }
.sppauto-theme .sppauto-category-strip .category-card img { transform:translateY(var(--category-visual-translate-y)) scale(var(--category-visual-scale)); transform-origin:center bottom; }
.sppauto-theme .sppauto-category-strip .category-card::after { display:none; content:none; }
.sppauto-theme .sppauto-category-strip a.category-card:hover,
.sppauto-theme .sppauto-category-strip a.category-card:focus-visible { background:rgba(0,0,0,.12); color:#fff; box-shadow:none; transform:none; }
.sppauto-theme .sppauto-category-strip a.category-card:focus-visible { outline:2px solid #fff; outline-offset:-5px; }
.sppauto-theme:lang(ar) .sppauto-category-strip .category-card h3 { letter-spacing:0; line-height:1.5; }
/* QA102.43 — Large desktop: let the five category visuals use the wider columns.
   Mobile/tablet sizing stays exactly as QA102.42.
   QA102.45 — Repair kits reduced slightly and lifted to align with the other four visuals. */
@media(min-width:1500px) {
  .sppauto-theme .sppauto-category-strip .sppauto-category-media {
    width:min(100%,420px);
  }
  .sppauto-theme .sppauto-category-strip .category-card[data-category-id="31"] { --category-visual-scale:.88; }
  .sppauto-theme .sppauto-category-strip .category-card[data-category-id="32"] { --category-visual-scale:1.22; }
  .sppauto-theme .sppauto-category-strip .category-card[data-category-id="2"]  { --category-visual-scale:1.10; }
  .sppauto-theme .sppauto-category-strip .category-card[data-category-id="7"]  { --category-visual-scale:1.22; }
  .sppauto-theme .sppauto-category-strip .category-card[data-category-id="6"]  { --category-visual-scale:.69; --category-visual-translate-y:-10px; }
}
@media(max-width:1200px) {
  .sppauto-theme .sppauto-category-strip .category-card { height:310px; padding:42px 10px 0; }
  .sppauto-theme .sppauto-category-media { top:125px; bottom:-50px; width:clamp(240px,90%,340px); }
}
@media(max-width:900px) {
  .sppauto-theme .sppauto-category-strip .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); background:none; row-gap:58px; margin-bottom:50px; }
  .sppauto-theme .sppauto-category-strip .category-card { height:290px; padding-top:32px; background:#909090; }
  .sppauto-theme .sppauto-category-strip a.category-card:hover,
  .sppauto-theme .sppauto-category-strip a.category-card:focus-visible { background:#858585; }
  .sppauto-theme .sppauto-category-strip .category-card h3 { font-size:18px; }
  .sppauto-theme .sppauto-category-media { top:106px; bottom:-38px; width:86%; max-width:300px; }
}
@media(max-width:560px) {
  .sppauto-theme .sppauto-category-strip .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:38px; row-gap:48px; }
  .sppauto-theme .sppauto-category-strip .category-card { height:250px; padding:26px 10px 0; }
  .sppauto-theme .sppauto-category-strip .category-card h3 { font-size:16px; letter-spacing:.5px; }
  .sppauto-theme .sppauto-category-media { top:92px; bottom:-30px; width:90%; max-width:260px; }
}
@media(prefers-reduced-motion:no-preference) {
  .sppauto-theme .sppauto-category-strip .sppauto-category-media { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .sppauto-theme .sppauto-category-strip a.category-card:focus-visible .sppauto-category-media { transform:translateY(-14px); }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .sppauto-theme .sppauto-category-strip a.category-card:hover .sppauto-category-media { transform:translateY(-14px); }
}
@media(prefers-reduced-motion:reduce) {
  .sppauto-theme .sppauto-category-strip .category-card { transition:none; }
  .sppauto-theme .sppauto-category-strip .sppauto-category-media { transition:none; transform:none; }
}