/* Ring builder — customer-facing configurator. Matches the Aurelle storefront. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&display=swap');

:root{
  --bg:#FFFFFF; --bg-alt:#F6F5F3; --ink:#16130F; --gold:#B08D57;
  --line:rgba(22,19,15,.14); --muted:rgba(22,19,15,.55);
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0;letter-spacing:-.01em}
a{color:inherit}

.wrap{max-width:1180px;margin-inline:auto;padding:0 1.25rem}
.eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}
.rule{width:38px;height:1px;background:var(--gold);border:0;margin:1rem 0}

/* header */
.bld-head{text-align:center;padding:2.5rem 1.25rem 1.5rem}
.bld-head .wordmark{font-family:var(--serif);font-size:1.4rem;letter-spacing:.14em;text-transform:uppercase}
.bld-head h1{font-size:clamp(2rem,4vw,3rem);margin:.6rem 0 .4rem}
.bld-head p{color:var(--muted);max-width:34rem;margin:.5rem auto 0}

/* layout: steps + sticky summary */
.bld-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:4rem}
@media(min-width:960px){.bld-grid{grid-template-columns:1fr 360px;gap:3.5rem;align-items:start}}

.step{border-top:1px solid var(--line);padding:2rem 0}
.step:first-child{border-top:0}
.step__n{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.step h2{font-size:1.5rem;margin-bottom:1.25rem}

/* tile selectors */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:560px){.tiles{grid-template-columns:repeat(5,1fr)}}
.tiles--metal{grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.tiles--metal{grid-template-columns:repeat(3,1fr)}}
.tiles--setting{grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.tiles--setting{grid-template-columns:repeat(5,1fr)}}
.tile{position:relative;border:1px solid var(--line);padding:1rem .5rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--bg);font-size:.82rem;letter-spacing:.02em}
.tile:hover{border-color:var(--ink)}
.tile input{position:absolute;opacity:0}
.tile.sel{border-color:var(--ink);background:var(--bg-alt)}
.tile .shape-ic{width:30px;height:30px;margin:0 auto .5rem;color:var(--ink)}
.tile .sw{width:24px;height:24px;border-radius:50%;margin:0 auto .5rem;border:1px solid var(--line)}
.sw.WG{background:#ECEAE6}.sw.YG{background:#E7C667}.sw.RG{background:#E6BCA8}.sw.PT{background:#DDDDE0}

/* range + selects */
.field{margin-bottom:1.25rem}
.field label{display:flex;justify-content:space-between;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.field label b{color:var(--ink);font-weight:500}
input[type=range]{width:100%;accent-color:var(--ink)}
.grade-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem}
select{width:100%;padding:.7rem;border:1px solid var(--line);background:var(--bg);font-family:inherit;font-size:.9rem}
.disabled{opacity:.4;pointer-events:none}

/* summary panel */
.summary{border:1px solid var(--line);padding:1.75rem;position:sticky;top:1.5rem;background:var(--bg)}
.summary h3{font-size:1.2rem;margin-bottom:1rem}
.spec-list{list-style:none;margin:0 0 1.25rem;padding:0}
.spec-list li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.spec-list li span:first-child{color:var(--muted)}
.price-box{background:var(--bg-alt);padding:1.25rem;margin:1.25rem 0;text-align:center}
.price-box .retail{font-size:.8rem;color:var(--muted);text-decoration:line-through}
.price-box .ours{font-family:var(--serif);font-size:2rem;margin:.25rem 0}
.price-box .ours small{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;text-decoration:none}
.price-box .save{font-size:.78rem;color:var(--gold);letter-spacing:.04em}
.price-note{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.75rem;line-height:1.5}
.btn{display:flex;width:100%;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:.2s;text-decoration:none;margin-bottom:.6rem}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.5;cursor:default}
.spinner{width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.muted-line{font-size:.74rem;color:var(--muted);text-align:center;margin-top:.5rem}
.err{font-size:.82rem;color:#9a2c2c;text-align:center;padding:.5rem 0}
.bld-foot{border-top:1px solid var(--line);text-align:center;padding:2rem;font-size:.78rem;color:var(--muted)}