.categories{background:var(--cream);padding-block:clamp(1.4rem,2vw,2rem)}
.section-heading{text-align:center;margin-block-end:.85rem}
.section-heading p{font-size:clamp(.85rem,1.2vw,1rem);font-weight:800;line-height:1.4;margin-block-start:.2rem}
.category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.6rem,1vw,1rem)}
.category-card{position:relative;aspect-ratio:180/226;overflow:clip;border-radius:var(--radius);background:#070707;color:var(--paper);display:flex;align-items:flex-end;isolation:isolate}
.category-art{position:absolute;inset:0;z-index:-1;background-image:url('../../../images/categories.webp');background-repeat:no-repeat;background-size:500% 100%;transition:transform 250ms ease}
.category-wash .category-art{background-position:0% center}.category-sprays .category-art{background-position:25% center}.category-tires .category-art{background-position:50% center}.category-towels .category-art{background-position:75% center}.category-accessories .category-art{background-position:100% center}
/* Fill each card with splash artwork; size the bottle independently by height. */
.category-wash .category-art,.category-sprays .category-art{inset:0;height:auto;width:auto;aspect-ratio:auto;translate:none;background-image:url('../../../images/category-splashes-v2.png')}
.category-wash .category-art::after,.category-sprays .category-art::after{content:'';position:absolute;inset:8% 0 14%;background-repeat:no-repeat;background-position:center top;background-size:auto 100%}
.category-wash .category-art::after{background-image:url('../../../images/category-foam-v2.png')}
.category-sprays .category-art::after{background-image:url('../../../images/category-spray-v2.png')}
.category-info{display:block;inline-size:100%;text-align:center;padding:.5rem .35rem .8rem;background:linear-gradient(transparent,rgba(0,0,0,.9) 24%)}
.category-info h3{font-family:var(--font-condensed);font-weight:700;font-size:clamp(1.25rem,2vw,1.9rem);margin-block-end:.3rem}
.category-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid #86857e;border-radius:2px;padding:.35rem .7rem;font-size:clamp(.65rem,.85vw,.85rem);min-block-size:32px;line-height:1.2}
.category-cta .icon{inline-size:1rem;block-size:1rem}
.category-card:hover .category-art{transform:scale(1.035)}
.category-card:hover .category-cta{background:var(--red);border-color:var(--red)}
@media(min-width:48rem) and (max-width:63.999rem){.category-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.category-card{grid-column:span 2;aspect-ratio:1/1.15}.category-card:nth-child(4){grid-column:2/span 2}.category-info h3{font-size:1.6rem}.category-cta{font-size:.85rem}}
@media(max-width:47.999rem){.categories{padding-block:2rem}.section-heading{margin-block-end:1.25rem}.section-heading p{max-inline-size:34ch;margin-inline:auto;margin-block-start:.5rem}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.category-card{aspect-ratio:3/4}.category-info h3{font-size:1.3rem}.category-card:last-child{grid-column:1/-1;inline-size:calc(50% - .375rem);justify-self:center}.category-cta{font-size:.75rem;min-block-size:38px}}
