/* * HUNA lenses (Phase 4) */
.huna-lenses{--huna-lenses-bg:var(--huna-bg);padding-block:var(--huna-lenses-pad-mobile);background:var(--huna-lenses-bg);color:var(--huna-text)}
@media (min-width:768px){.huna-lenses{padding-block:var(--huna-lenses-pad-desktop)}
}
.huna-lenses__inner{max-width:var(--huna-page-max);margin-inline:auto;padding-inline:var(--huna-pad-x)}
.huna-lenses__component{display:block;min-width:0}
.huna-lenses__head{display:flex;flex-direction:column;gap:var(--huna-space-md);margin-bottom:var(--huna-space-lg)}
.huna-lenses__intro{display:flex;flex-direction:column;gap:var(--huna-space-xs)}
.huna-lenses__eyebrow,.huna-lenses__heading,.huna-lenses__sub{margin:0}
.huna-lenses__sub{margin-top:var(--huna-space-sm)}
.huna-lenses__tabs{position:relative;display:flex;gap:var(--huna-space-sm);margin-block:-0.25rem;margin-inline:calc(var(--huna-pad-x) * -1);padding-block:0.25rem;padding-inline:var(--huna-pad-x);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--huna-pad-x);scrollbar-width:none}
.huna-lenses__tabs::-webkit-scrollbar{display:none}
.huna-lenses__tabs[hidden]{display:none}
@media (scripting:enabled){.huna-lenses__tabs[hidden]{display:flex;visibility:hidden}
}
.huna-lenses__tab{position:relative;flex:none;min-height:3rem;padding:0 var(--huna-space-md);border:1px solid var(--huna-text-subtle);border-radius:var(--huna-radius);background:transparent;color:var(--huna-text-muted);font-family:var(--font-body--family);font-size:0.75rem;line-height:1rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;scroll-snap-align:start}
.huna-lenses__tab[aria-selected='true']{border-color:var(--huna-ink);background:var(--huna-ink);color:var(--huna-on-ink)}
.huna-lenses__tiles{position:relative;display:flex;gap:var(--huna-space-md);margin-top:var(--huna-space-md);margin-inline:calc(var(--huna-pad-x) * -1);padding-inline:var(--huna-pad-x);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--huna-pad-x);scrollbar-width:none}
.huna-lenses__tiles::-webkit-scrollbar{display:none}
.huna-lenses__tiles:focus-visible{outline-offset:-2px}
.huna-lens{position:relative;display:flex;flex:0 0 76vw;flex-direction:column;gap:var(--huna-space-sm);min-width:0;max-width:22rem;padding:var(--huna-space-md);background:var(--huna-surface-low);scroll-snap-align:start}
.huna-lens__top{display:flex;align-items:center;justify-content:space-between;min-height:1.5rem}
.huna-lens__included{color:var(--huna-text-subtle)}
.huna-lens__swatch{flex:none;width:1rem;height:1rem;border-radius:var(--huna-radius-round);box-shadow:0 0 0 1px rgb(0 0 0 / 0.25)}
.huna-lens__media{position:relative;aspect-ratio:4 / 5;overflow:hidden;background:var(--huna-surface)}
.huna-lens__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.huna-lens__ph{position:absolute;inset:0;min-height:0}
.huna-lens__name,.huna-lens__use{margin:0}
.huna-lens__name{margin-top:var(--huna-space-xs)}
.huna-lens::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--huna-bronze);transform:scaleX(0);transform-origin:left;transition:transform var(--huna-dur-fast) linear}
.huna-lenses__component[data-enhanced] .huna-lens.is-active::after{transform:scaleX(1)}
.huna-lenses__caption{margin:var(--huna-space-lg) 0 0;font-size:0.75rem;text-align:center;text-transform:uppercase;letter-spacing:0.1em;color:var(--huna-text-subtle)}
@media (min-width:1024px){.huna-lenses__head{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:var(--huna-space-xl)}
.huna-lenses__tabs{flex:none;gap:var(--huna-space-md);margin-inline:0;padding-inline:0;overflow:visible}
.huna-lenses__tab{padding:0 var(--huna-space-xs);border:0;background:transparent;color:var(--huna-text-muted)}
.huna-lenses__tab:hover{color:var(--huna-ink)}
.huna-lenses__tab[aria-selected='true']{background:transparent;color:var(--huna-ink)}
.huna-lenses__tab::after{content:'';position:absolute;inset-inline:var(--huna-space-xs);bottom:0.625rem;height:1px;background:var(--huna-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--huna-dur-fast) linear}
.huna-lenses__tab[aria-selected='true']::after{transform:scaleX(1)}
.huna-lenses__tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--huna-gutter);margin-inline:0;padding-inline:0;overflow:visible}
.huna-lens{flex:none;max-width:none;min-height:27.5rem}
.huna-lens--text{min-height:0}
}
.huna-lens__swatch-block{position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .12)}
