:root{--hh-teal:#008C6E;--hh-orange:#E0651F;--hh-blue:#1E6FB5;--hh-plum:#B3357F;--hh-ink:#22201C;--hh-stone:#6B665C;--hh-rule:#DDD8CE}
.hhc{font-family:var(--font-body--family);width:100%}
.hhc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 24px}
.hhc-head h2{font-family:var(--font-heading--family);font-size:clamp(22px,2.6vw,28px);color:var(--hh-ink);margin:0;font-weight:600;letter-spacing:-.015em}
.hhc-tools{display:flex;align-items:center;gap:16px;flex-shrink:0}
.hhc-all{color:var(--hh-teal);font-size:14px;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.hhc-nav{display:flex;gap:8px}
.hhc-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--hh-teal);background:#FFF;color:var(--hh-teal);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s ease,color .2s ease,opacity .2s ease}
.hhc-btn:hover:not(:disabled){background:var(--hh-teal);color:#FFF}
.hhc-btn:disabled{opacity:.28;cursor:default}
.hhc-btn svg{width:15px;height:15px;display:block}
.hhc-track{--hhc-n:4;--hhc-gap:16px;display:flex;gap:var(--hhc-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;margin:0 -2px;padding:0 2px 4px;overscroll-behavior-x:contain}
.hhc-track::-webkit-scrollbar{display:none}
.hhc-card{flex:0 0 calc((100% - (var(--hhc-n) - 1)*var(--hhc-gap))/var(--hhc-n));scroll-snap-align:start;text-decoration:none;color:inherit}
.hhc-img{background:#FFF;border:1px solid var(--hh-rule);border-radius:10px;overflow:hidden;aspect-ratio:4/5}
.hhc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.hhc-card:hover .hhc-img img{transform:scale(1.04)}
.hhc-t{margin:12px 0 3px;font-size:15px;line-height:1.35;color:var(--hh-ink)}
.hhc-p{font-size:14px;color:var(--hh-teal);font-weight:700}
.hhc-empty{color:var(--hh-stone);font-size:15px;padding:20px 0}
.hhc-static .hhc-nav{display:none}
@media(prefers-reduced-motion:reduce){.hhc-img img,.hhc-btn{transition:none}}
@media(max-width:1100px){.hhc-track{--hhc-n:3}}
@media(max-width:889px){.hhc-track{--hhc-n:2.25}}
@media(max-width:519px){.hhc-track{--hhc-n:1.65;--hhc-gap:12px}.hhc-t{font-size:14px}.hhc-btn{width:34px;height:34px}}
@media(hover:none){.hhc-nav{display:none}}