/* =========================================================
   BARAKAT — engagement & wedding ring pages
   ========================================================= */
.rs{max-width:1280px;margin:0 auto;padding:clamp(96px,12vw,130px) clamp(16px,4vw,40px) 80px}
.rs-crumbs{display:flex;gap:.6em;align-items:center;font-size:.78rem;color:var(--muted);letter-spacing:.04em;margin-bottom:2rem;flex-wrap:wrap}
.rs-crumbs a{color:var(--muted)}
.rs-crumbs a:hover{color:var(--gold)}
.rs-crumbs b{color:var(--text);font-weight:400}
.rs-head{text-align:center;max-width:760px;margin:0 auto 2.6rem}
.rs-head h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);margin:.6rem 0 1rem}
.rs-head p{color:var(--muted);line-height:1.8;font-size:.95rem}

/* start with a setting / a stone */
.rs-start{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:2.6rem}
.rs-start a{position:relative;display:flex;align-items:flex-end;min-height:220px;padding:1.6rem;overflow:hidden;border:1px solid var(--line);color:var(--cream)}
.rs-start a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s}
.rs-start a:hover img{transform:scale(1.05);opacity:.7}
.rs-start a::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.85),transparent 65%)}
.rs-start span{position:relative;z-index:1}
.rs-start em{display:block;font-style:normal;font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.rs-start b{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase}

/* facets */
.rs-filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.8rem 0 1.6rem}
.rs-facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.8rem 2.6rem}
.rs-facet--wide{grid-column:1/-1}
.rs-facet h3{font-family:var(--sans);font-weight:500;font-size:.9rem;color:var(--cream);margin-bottom:.9rem}
.rs-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.rs-chip{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1em;border:1px solid var(--line);background:none;color:var(--muted);font-family:var(--sans);font-size:.8rem;cursor:pointer;transition:all .2s}
.rs-chip:hover{color:var(--cream);border-color:rgba(229,175,143,.5)}
.rs-chip.is-on{color:var(--cream);border-color:var(--gold);background:rgba(229,175,143,.08)}
.rs-metal{width:11px;height:11px;border-radius:50%}
.rs-metal--yellow{background:linear-gradient(135deg,#f3d27a,#c9972f)}
.rs-metal--white{background:linear-gradient(135deg,#f4f4f4,#b9bcc0)}
.rs-metal--rose{background:linear-gradient(135deg,#f3c2a8,#c98466)}
.rs-metal--platinum{background:linear-gradient(135deg,#e9ebee,#9aa0a7)}
.rs-shapes{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:.5rem}
.rs-shape{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .3rem;background:rgba(255,255,255,.02);border:1px solid var(--line);color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:.72rem;transition:all .2s}
.rs-shape svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round}
.rs-shape svg polygon:nth-child(2),.rs-shape svg path{stroke-width:1.6;opacity:.7}
.rs-shape:hover{color:var(--cream);border-color:rgba(229,175,143,.5)}
.rs-shape.is-on{color:var(--cream);border-color:var(--gold);background:rgba(229,175,143,.08);box-shadow:inset 0 0 0 1px var(--gold)}

.rs-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.4rem 0}
.rs-bar p{color:var(--muted);font-size:.88rem}
.rs-bar__r{display:flex;align-items:center;gap:1.4rem}
.rs-clear{background:none;border:none;color:var(--gold);font-family:var(--sans);font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.rs-sort{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.82rem}
.rs-sort select{height:36px;padding:0 .7rem;background:#161514;border:1px solid var(--line);color:var(--cream);font-family:var(--sans);font-size:.82rem}

/* empty collection */
.rs-empty{padding:1rem 0 1.4rem}
.rs-ghosts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-bottom:2.2rem}
.rs-ghosts span{aspect-ratio:1/1;border:1px dashed rgba(229,175,143,.22);background:radial-gradient(circle at 50% 45%,rgba(229,175,143,.05),transparent 70%)}
.rs-empty__card{text-align:center;max-width:620px;margin:0 auto}
.rs-empty__card h2{font-family:var(--display);font-weight:400;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);margin-bottom:.8rem}
.rs-empty__card p{color:var(--muted);line-height:1.75;font-size:.92rem;margin-bottom:1.4rem}
.rs-empty__act{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* guide */
.rs-guide{margin-top:4.5rem;padding-top:3rem;border-top:1px solid var(--line)}
.rs-guide__intro{max-width:820px;margin:0 auto 3rem;text-align:center;color:var(--muted);line-height:1.85}
.rs-guide h2{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-align:center;margin-bottom:1rem}
.rs-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin:2rem 0 3.6rem}
.rs-cards div{border:1px solid var(--line);padding:1.5rem 1.3rem;background:rgba(255,255,255,.015)}
.rs-cards h4{font-family:var(--display);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:.88rem;color:var(--gold);margin-bottom:.7rem}
.rs-cards p{color:var(--muted);font-size:.86rem;line-height:1.7}
.rs-two{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;margin-bottom:3.6rem}
.rs-two h3{font-family:var(--display);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:1rem;color:var(--cream);margin-bottom:.8rem}
.rs-two p{color:var(--muted);font-size:.9rem;line-height:1.8;margin-bottom:.8rem}
.rs-faq{max-width:860px;margin:0 auto}
.rs-faq > div{border-bottom:1px solid var(--line)}
.rs-faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;background:none;border:none;color:var(--cream);font-family:var(--sans);font-size:.95rem;text-align:left;cursor:pointer}
.rs-faq button::after{content:'+';color:var(--gold);font-size:1.3rem;transition:transform .25s}
.rs-faq button[aria-expanded="true"]::after{transform:rotate(45deg)}
.rs-faq p{color:var(--muted);font-size:.9rem;line-height:1.8;padding:0 0 1.2rem}

@media (max-width:1100px){.rs-shapes{grid-template-columns:repeat(5,minmax(0,1fr))}.rs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .rs-start,.rs-two{grid-template-columns:minmax(0,1fr)}
  .rs-start a{min-height:160px}
  .rs-ghosts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .rs-cards{grid-template-columns:minmax(0,1fr)}
  .rs-shapes{grid-template-columns:repeat(5,minmax(0,1fr))}
}