.hwe-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hwe-cat-item { display: flex; flex-direction: column; align-items: stretch; text-decoration: none; color: inherit; padding: 16px; overflow: hidden; transition-property: background-color, box-shadow; transition-duration: 200ms; transition-timing-function: ease; }
.hwe-cat-item--lift, .hwe-cat-item--scale { will-change: transform; transition-property: background-color, box-shadow, transform; }
.hwe-cat-item--lift:hover { transform: translateY(-4px); }
.hwe-cat-item--scale:hover { transform: scale(1.03); }
.hwe-cat-image-wrap { position: relative; overflow: hidden; line-height: 0; }
.hwe-cat-image-wrap--has-overlay::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; will-change: background-color; transition-property: background-color; transition-duration: 400ms; transition-timing-function: ease; }
.hwe-cat-image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.hwe-cat-image--placeholder { opacity: 0.4; }
.hwe-cat-body { display: flex; flex-direction: column; flex: 1; }
.hwe-cat-description { display: block; width: 100%; margin: 8px 0 0; padding: 0; text-align: center; color: inherit; font-size: 0.875em; line-height: 1.5; }
.hwe-cat-button { display: block; width: 100%; margin-top: auto; padding-top: 12px; text-align: center; font-size: 0.8em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; transition: color 200ms ease; }
.hwe-cat-name { display: block; width: 100%; margin-top: 12px; text-align: center; font-weight: 600; color: inherit; text-decoration: none; }
.hwe-cat-count { display: block; width: 100%; margin-top: 4px; text-align: center; font-size: 0.85em; opacity: 0.65; color: inherit; }
.hwe-cat-item--upsell { position: relative; background-color: #f59e0b; }
.hwe-upsell-badge { position: absolute; top: 22px; right: 22px; z-index: 10; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.7em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; background-color: #fff; color: #f59e0b; }
.hwe-upsell-placeholder { aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.25); border-radius: 8px; }