/* Original 3D category artwork: one transparent 4 × 2 atlas, no product-photo changes. */
.h-category-art{
 display:grid;
 place-items:center;
 position:relative;
 isolation:isolate;
 overflow:hidden;
 aspect-ratio:1.19;
 border-radius:24px;
 background:var(--home-rose);
}
.h-photo-category--cream .h-category-art{background:var(--home-cream);}
.h-photo-category--lilac .h-category-art{background:var(--home-lilac);}
.h-photo-category--grey .h-category-art{background:var(--home-grey);}
.h-photo-category--sand .h-category-art{background:var(--home-sand);}
.h-category-art::before{
 content:"";
 position:absolute;
 width:58%;
 height:10%;
 left:21%;
 bottom:9%;
 border-radius:50%;
 background:radial-gradient(ellipse, var(--ink), transparent 70%);
 opacity:.07;
 z-index:-1;
}
.h-category-icon-3d{
 display:block;
 width:81%;
 aspect-ratio:1;
 background-image:url("assets/images/category-icons-3d.png");
 background-size:400% 200%;
 background-repeat:no-repeat;
 background-position:0 0;
 transform-origin:50% 72%;
}
.h-category-icon-3d[data-category-icon="base-top"]{background-position:33.333333% 0;}
.h-category-icon-3d[data-category-icon="gels-modeling"]{background-position:66.666667% 0;}
.h-category-icon-3d[data-category-icon="equipment"]{background-position:100% 0;}
.h-category-icon-3d[data-category-icon="drill-bits"]{background-position:0 100%;}
.h-category-icon-3d[data-category-icon="tools"]{background-position:33.333333% 100%;}
.h-category-icon-3d[data-category-icon="consumables"]{background-position:66.666667% 100%;}
.h-category-icon-3d[data-category-icon="care"]{background-position:100% 100%;}
.h-category-3d:focus-visible{outline-offset:6px;border-radius:24px;}
@media (max-width:1023px){.h-category-art{border-radius:20px;}}
@media (max-width:767px){
 .h-category-art{aspect-ratio:1.03;}
 .h-category-icon-3d{width:85%;}
}
@media (prefers-reduced-motion:no-preference){
 .h-category-icon-3d{transition:transform .24s ease;}
 .h-category-3d:active .h-category-icon-3d{transform:translateY(1px) scale(.97);}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .h-category-3d:hover .h-category-icon-3d,
 .h-category-3d:focus-visible .h-category-icon-3d{transform:translateY(-4px) rotate(-2deg);}
 .h-category-3d:nth-child(even):hover .h-category-icon-3d,
 .h-category-3d:nth-child(even):focus-visible .h-category-icon-3d{transform:translateY(-4px) rotate(2deg);}
 .h-category-3d:active .h-category-icon-3d{transform:translateY(1px) scale(.97);}
}