.zsm-ringcatalog {
    --zsm-navy: #24313f;
    --zsm-gold: #c6a15b;
    --zsm-border: rgba(36,49,63,.13);
    --zsm-muted: #6d747b;
    width: 100%;
}
.zsm-ringcatalog__intro { text-align:center; margin:0 auto 24px; max-width:850px; }
.zsm-ringcatalog__heading { margin:0 0 8px; }
.zsm-ringcatalog__subheading { margin:0; color:var(--zsm-muted); }
.zsm-ringcatalog__tabs { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:0 0 30px; }
.zsm-ringcatalog__tab {
    display:inline-flex; align-items:center; justify-content:center; min-height:44px;
    padding:10px 22px; border:1px solid var(--zsm-gold); border-radius:5px;
    color:var(--zsm-navy); background:transparent; text-decoration:none!important;
    font-weight:600; letter-spacing:.03em; transition:.22s ease;
}
.zsm-ringcatalog__tab:hover, .zsm-ringcatalog__tab.is-active {
    background:var(--zsm-navy); border-color:var(--zsm-navy); color:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.12); transform:translateY(-1px);
}
.zsm-ringcatalog__tab span { opacity:.72; margin-left:4px; font-weight:500; }
.zsm-ringcatalog__grid {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
}
.zsm-ringcard {
    appearance:none; -webkit-appearance:none; border:1px solid var(--zsm-border); background:#fff;
    border-radius:8px; padding:0; overflow:hidden; text-align:left; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.05); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    color:inherit; font:inherit;
}
.zsm-ringcard:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.11); border-color:rgba(198,161,91,.65); }
.zsm-ringcard__imagewrap { display:block; position:relative; background:#fff; aspect-ratio:1/1; overflow:hidden; }
.zsm-ringcard__image { width:100%; height:100%; object-fit:contain; display:block; padding:10px; box-sizing:border-box; transition:transform .3s ease; }
.zsm-ringcard:hover .zsm-ringcard__image { transform:scale(1.035); }
.zsm-ringcard__badge {
    position:absolute; top:10px; left:10px; background:var(--zsm-gold); color:#fff;
    border-radius:999px; padding:5px 9px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.zsm-ringcard__label { display:block; padding:12px 14px 14px; font-size:14px; font-weight:600; color:var(--zsm-navy); text-align:center; }
.zsm-ringcatalog__pagination { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:30px; }
.zsm-ringcatalog__page {
    min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--zsm-border); border-radius:5px; color:var(--zsm-navy); background:#fff; text-decoration:none!important;
    transition:.2s ease;
}
.zsm-ringcatalog__page:hover, .zsm-ringcatalog__page.is-active { background:var(--zsm-navy); color:#fff; border-color:var(--zsm-navy); }
.zsm-ringcatalog__page--arrow { border-color:var(--zsm-gold); }
.zsm-ringcatalog__empty { padding:28px; text-align:center; border:1px solid var(--zsm-border); border-radius:8px; background:#fff; }
.zsm-ringcatalog__lightbox[hidden] { display:none!important; }
.zsm-ringcatalog__lightbox {
    position:fixed; inset:0; z-index:99999; background:rgba(20,25,30,.88); display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:28px; box-sizing:border-box;
}
.zsm-ringcatalog__lightbox img { max-width:min(900px,92vw); max-height:80vh; object-fit:contain; background:#fff; border-radius:8px; box-shadow:0 18px 60px rgba(0,0,0,.45); }
.zsm-ringcatalog__lightbox-label { color:#fff; margin-top:14px; font-size:15px; }
.zsm-ringcatalog__lightbox-close {
    position:absolute; top:18px; right:24px; width:46px; height:46px; border:1px solid rgba(255,255,255,.35);
    background:rgba(0,0,0,.2); color:#fff; border-radius:50%; font-size:32px; line-height:1; cursor:pointer;
}
@media (max-width:959px) { .zsm-ringcatalog__grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } }
@media (max-width:639px) {
    .zsm-ringcatalog__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .zsm-ringcatalog__tabs { gap:8px; }
    .zsm-ringcatalog__tab { flex:1 1 140px; padding:9px 14px; }
    .zsm-ringcard__label { font-size:13px; padding:9px 8px 11px; }
}
.zsm-ringcatalog__page--dots { border-color:transparent; background:transparent; cursor:default; }
.zsm-ringcatalog__page--dots:hover { background:transparent; color:var(--zsm-navy); border-color:transparent; }