/* demo64: looks with credit pins, colour filter. Background: a woven cloth dyed by the filter. */
.sa2-top { padding-top:clamp(24px,4vw,56px); padding-bottom:clamp(24px,3vw,40px); }
.sa2-top .hero__text { max-width:640px; }
.sa2-dyes .pf-chip { display:inline-flex; align-items:center; gap:7px; }
.sa2-dyes i { width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 1px rgb(255 255 255 / .4); }
.sa2-looks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; scroll-margin-top:90px; }
.sa2-look[hidden] { display:none; }
.sa2-look { border-radius:var(--radius-lg); overflow:hidden; background:rgb(24 23 26 / .72); border:1px solid var(--line-strong); }
.sa2-pic { position:relative; aspect-ratio:4/5; }
.sa2-pic img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.sa2-pin { position:absolute; width:32px; height:32px; margin:-16px 0 0 -16px; padding:0; border:2px solid #fff; border-radius:50%; background:rgb(0 0 0 / .55); color:#fff; font:700 13px var(--font); cursor:pointer; transition:background .2s,color .2s,transform .2s; backdrop-filter:blur(4px); }
.sa2-pin:hover { transform:scale(1.15); }
.sa2-pin.on { background:var(--yellow); border-color:var(--yellow); color:#18171a; }
.sa2-note { padding:12px 14px 14px; min-height:112px; }
.sa2-note strong { display:block; font:600 18px var(--font-head); color:#fff; }
.sa2-note small { color:#cfcfcf; font-size:13px; }
.sa2-note p { margin:6px 0 0; font-size:14px; line-height:1.4; color:#ececec; }
.sa2-note p b { color:var(--yellow); }
@media (max-width:980px){ .sa2-looks { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .sa2-looks { grid-template-columns:1fr; } }