Shop

.hm-shop-wrap-v9 {
margin: 0 0 14px;
}
.hm-shop-head-v9 {
margin: 0 0 18px;
}
.hm-shop-head-v9 h2 {
margin: 0 0 8px;
font-size: 34px;
line-height: 1.14;
color: #101828;
letter-spacing: -0.03em;
}
.hm-shop-head-v9 p {
margin: 0;
max-width: 760px;
font-size: 15px;
line-height: 1.8;
color: #667085;
}
.hm-shop-grid-v9 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 0;
}
.hm-shop-card {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
background: linear-gradient(180deg, #dbe4ee 0%, #cbd5e1 100%);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
isolation: isolate;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hm-shop-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
.hm-shop-card-media,
.hm-shop-card-media img,
.hm-shop-card-bg,
.hm-shop-card-overlay {
position: absolute;
inset: 0;
}
.hm-shop-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hm-shop-card-bg {
background: linear-gradient(135deg, #d7dee7 0%, #bfcad8 100%);
}
.hm-shop-card-overlay {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0.18) 42%, rgba(15, 23, 42, 0.82) 100%);
}
.hm-shop-card-copy {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px;
}
.hm-shop-card-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
min-height: 24px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
backdrop-filter: blur(6px);
}
.hm-shop-card-title {
display: block;
color: #ffffff;
font-size: 19px;
line-height: 1.28;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.hm-shop-card-kicker {
display: block;
color: rgba(255, 255, 255, 0.82);
font-size: 12px;
line-height: 1.55;
}
.hm-shop-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hm-shop-card-cta::after {
content: “→”;
font-size: 13px;
}
.hm-shop-note-v9 {
margin: 16px 0 0;
padding: 2px 0 0;
font-size: 14px;
line-height: 1.8;
color: #667085;
}
@media (max-width: 1140px) {
.hm-shop-grid-v9 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.hm-shop-head-v9 h2 {
font-size: 28px;
}
.hm-shop-grid-v9 {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
}

Browse Product Categories

The category block stays aligned with the product listing below, but the cards are simplified back into cleaner square tiles so the top of the Shop page feels easier to scan instead of crowded.