/* ============================================================
   NILS storefront — reusable inventory collection + deposit modal.
   Uses the page's NILS palette tokens (--ivory/--ink/--sand/--gold/--copper).
   Drop <link> + <script src="/storefront.js"> on any page, then add
   <div data-collection data-category="ring"></div> where you want the grid.
   ============================================================ */
.sf-section{padding:7rem 5.5rem;background:var(--black)}
.sf-section .sf-head{margin-bottom:2.6rem}
.sf-section .sf-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,4vw,4rem);font-weight:300;line-height:1.05;color:var(--ink)}
.sf-section .sf-head h2 em{font-style:italic;color:var(--gold)}
@media(max-width:900px){.sf-section{padding:4.5rem 1.5rem}}
.sf-collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem}
.sf-card{background:var(--ivory);border:1px solid rgba(107,103,95,.2);overflow:hidden;transition:transform .4s,box-shadow .4s;display:flex;flex-direction:column}
.sf-card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(27,26,24,.14)}
.sf-img{height:290px;overflow:hidden;background:#f3efe9;position:relative}
.sf-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.sf-card:hover .sf-img img{transform:scale(1.06)}
.sf-info{padding:1.4rem 1.5rem 1.7rem;flex:1;display:flex;flex-direction:column}
.sf-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--ink);margin-bottom:.25rem}
.sf-cut{font-size:.72rem;color:var(--sand);letter-spacing:.03em;line-height:1.5;margin-bottom:1.1rem}
.sf-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.sf-price{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:var(--copper)}
.sf-dep-btn{font-family:'Jost',sans-serif;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink);background:var(--gold);border:none;padding:.66rem 1.15rem;cursor:pointer;transition:all .3s;white-space:nowrap;line-height:1}
.sf-dep-btn:hover{background:var(--ink);color:var(--ivory)}
.sf-empty{padding:3rem 1rem;color:var(--sand);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;text-align:center}

/* deposit modal (namespaced) */
.sf-modal{position:fixed;inset:0;z-index:1200;background:rgba(27,26,24,.45);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1.5rem}
.sf-modal.open{display:flex}
.sf-modal-card{background:var(--ivory);border:1px solid rgba(107,103,95,.25);max-width:480px;width:100%;padding:2.6rem 2.4rem;position:relative;box-shadow:0 30px 80px rgba(27,26,24,.18)}
.sf-modal-close{position:absolute;top:.9rem;right:1.2rem;background:none;border:none;font-size:1.7rem;color:var(--sand);cursor:pointer;line-height:1}
.sf-modal-eyebrow{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:.5rem}
.sf-modal-h{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:400;color:var(--ink);text-align:center;margin:.2rem 0 .6rem}
.sf-modal-sub{font-size:.84rem;color:var(--sand);line-height:1.7;text-align:center;margin-bottom:1.4rem}
.sf-modal-grid{display:grid;gap:.7rem;margin-bottom:.7rem}
.sf-modal input,.sf-modal textarea{background:rgba(107,103,95,.05);border:1px solid rgba(107,103,95,.2);padding:.8rem .9rem;font-family:'Jost',sans-serif;font-size:.9rem;color:var(--ink);width:100%;outline:none}
.sf-modal textarea{min-height:78px;resize:vertical}
.sf-modal input:focus,.sf-modal textarea:focus{border-color:var(--gold)}
.sf-modal input::placeholder,.sf-modal textarea::placeholder{color:rgba(107,103,95,.6)}
.sf-modal-submit{width:100%;margin-top:1rem;background:var(--gold);color:var(--ink);border:none;font-family:'Jost',sans-serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding:1rem;cursor:pointer;transition:background .3s}
.sf-modal-submit:hover{background:var(--gold-lt)}
.sf-toast{position:fixed;bottom:2rem;right:2rem;background:var(--ivory);color:var(--ink);border-left:2px solid var(--gold);padding:1rem 1.6rem;font-size:.78rem;box-shadow:0 10px 40px rgba(27,26,24,.18);opacity:0;transform:translateY(8px);transition:all .4s;z-index:1300;pointer-events:none}
.sf-toast.show{opacity:1;transform:none}