.pp-metal{margin:22px 0;color:#fff;font-family:Inter,sans-serif}
.pp-metal__heading,.pp-metal__guide-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
html body.template-product #MainContent [data-metal-finishes] .pp-metal__heading h2{font:800 17px/1.3 Inter,sans-serif!important;letter-spacing:-.035em!important;text-transform:none!important;margin:0!important}
.pp-metal__size{margin:0 0 22px;font:400 12px/1.5 Inter,sans-serif;color:#bdb8c6}.pp-metal__size strong{color:#fff}
.pp-metal__heading button{font:600 12px/1.3 Inter,sans-serif;color:#d4ff46;white-space:nowrap;border-bottom:1px solid #637321;padding:8px 0;background:none}
.pp-metal__selected{font-size:12px;margin:9px 0 12px;color:#bdb8c6}.pp-metal__selected strong{color:#d4ff46}
.pp-metal__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0;min-width:0}
.pp-metal__choice{position:relative;margin:0!important;cursor:pointer;text-transform:none!important;letter-spacing:0!important}
.pp-metal__choice input{position:absolute;opacity:0;width:1px;height:1px;inset:0}
.pp-metal__card{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:9px;min-height:90px;padding:8px 4px;border:1px solid transparent;border-radius:5px;background:transparent;transition:border-color .15s ease,background .15s ease}
.pp-metal__sample{display:block;overflow:hidden;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff40;box-shadow:inset 0 0 0 1px #0002,0 2px 8px #0005;background:linear-gradient(125deg,var(--metal-dark),var(--metal-light) 25%,var(--metal-mid) 45%,var(--metal-light) 64%,var(--metal-dark))}
.pp-metal__sample--shiny-gold{--metal-dark:#8d701f;--metal-mid:#ceaf55;--metal-light:#fff2b4}
.pp-metal__sample--shiny-silver{--metal-dark:#74777a;--metal-mid:#bdc2c6;--metal-light:#f8fafb}
.pp-metal__sample--shiny-nickel{--metal-dark:#777566;--metal-mid:#bdbdab;--metal-light:#f0eedb}
.pp-metal__sample--shiny-brass{--metal-dark:#87712e;--metal-mid:#c6b77b;--metal-light:#eee2a5}
.pp-metal__sample--shiny-copper{--metal-dark:#965538;--metal-mid:#d49c76;--metal-light:#f8d2b3}
.pp-metal__sample--antique-gold{--metal-dark:#493514;--metal-mid:#917239;--metal-light:#bba26b}
.pp-metal__sample--antique-silver{--metal-dark:#45494a;--metal-mid:#7e8583;--metal-light:#b2b9b6}
.pp-metal__sample--antique-nickel{--metal-dark:#434742;--metal-mid:#7a8276;--metal-light:#aeb5a6}
.pp-metal__sample--antique-brass{--metal-dark:#4f4325;--metal-mid:#938156;--metal-light:#c0b083}
.pp-metal__sample--antique-copper{--metal-dark:#623c2a;--metal-mid:#a87555;--metal-light:#d1a585}
.pp-metal__sample--matt-gold{--metal-mid:#cebd77;--metal-light:#e4d596;--metal-dark:#ae9654}
.pp-metal__sample--matt-silver{--metal-mid:#c4c6c4;--metal-light:#e0e2df;--metal-dark:#9c9f9b}
.pp-metal__sample--matt-nickel{--metal-mid:#bcbcab;--metal-light:#dcdccc;--metal-dark:#999b89}
.pp-metal__sample--matt-brass{--metal-mid:#b9ac77;--metal-light:#d7ca94;--metal-dark:#978956}
.pp-metal__sample--matt-copper{--metal-mid:#c8916e;--metal-light:#e0af8e;--metal-dark:#a77252}
.pp-metal__sample[class*="--matt-"]{background:linear-gradient(135deg,var(--metal-light),var(--metal-mid) 60%,var(--metal-dark))}
.pp-metal__sample[class*="--antique-"]{background:radial-gradient(ellipse at 35% 25%,var(--metal-light),var(--metal-mid) 46%,var(--metal-dark))}
.pp-metal__sample--black-nickel{--metal-dark:#141619;--metal-mid:#45494c;--metal-light:#94989a}
.pp-metal__card--text{border-color:#514b59;margin:8px 0;min-height:74px}
.pp-metal__name{font:600 10px/1.25 Inter,sans-serif;text-align:center;color:#eee;min-height:25px;display:flex;align-items:center}
.pp-metal__choice input:checked+.pp-metal__card{border-color:#d4ff46;background:#191b0f}
.pp-metal__choice input:checked+.pp-metal__card .pp-metal__sample{outline:2px solid #d4ff46;outline-offset:3px}
.pp-metal__choice input:checked+.pp-metal__card .pp-metal__name{color:#d4ff46}
.pp-metal__choice input:focus-visible+.pp-metal__card{outline:2px solid white;outline-offset:3px}
.pp-metal__choice:hover .pp-metal__card{border-color:#a5b857}
.pp-metal__text-sample{height:55px;display:grid;place-content:center;text-align:center;font-size:12px;font-weight:700;color:#fff}
.pp-metal__note{font:400 11px/1.6 Inter,sans-serif;color:#b6afbd;margin:12px 0 0}
.pp-metal__guide{color:#fff;background:#100b16;border:1px solid #514b59;border-radius:14px;padding:24px;width:min(900px,calc(100vw - 28px));max-height:86vh;overflow:auto}
.pp-metal__guide::backdrop{background:rgba(0,0,0,.8)}
.pp-metal__guide-head{position:sticky;top:-24px;background:#100b16;padding:12px 0;z-index:1}
.pp-metal__guide-head h2{font:800 clamp(20px,3vw,30px)/1.15 Inter,sans-serif;letter-spacing:-.04em;text-transform:none;margin:0}
.pp-metal__guide-head button{width:44px;height:44px;color:#d4ff46;font-size:30px;border:1px solid #514b59;border-radius:50%;flex:none}
.pp-metal__guide p{font:400 13px/1.6 Inter,sans-serif;color:#bdb8c6}
.pp-metal__guide-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 12px;margin-top:24px}
.pp-metal__guide figure{margin:0;text-align:center}.pp-metal__guide .pp-metal__sample{width:min(100%,148px);height:auto;aspect-ratio:1;margin:auto}
.pp-metal__guide figcaption{font:600 12px/1.4 Inter,sans-serif;margin-top:9px}
.pp-metal__unavailable{aspect-ratio:1;display:grid;place-content:center;border:1px dashed #514b59;border-radius:8px;color:#a9a3ae;font-size:12px;padding:8px}
[data-product-handle="custom-metal-keyrings"] .pp-metal-concepts{font:400 11px/1.5 Inter,sans-serif;color:#aaa3b1;margin:12px 0}
[data-product-wall="custom-metal-keyrings"] .pp-photo-wall__tile img{object-fit:contain}
[data-product-handle="custom-metal-keyrings"] [data-product-images] img{object-fit:contain!important}
@media(max-width:700px){.pp-metal__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-metal__card{min-height:83px;padding:8px 4px;gap:8px}.pp-metal__sample{width:40px;height:40px}.pp-metal__name{font-size:11px;min-height:15px}.pp-metal__guide{padding:16px}.pp-metal__guide-head{top:-16px}.pp-metal__guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}}
@media(prefers-reduced-motion:reduce){.pp-metal__card{transition:none}}
