/* Crystal material library */
.bead.textured,.swatch.textured,.detail-swatch{
 background-image:var(--texture-image,url('assets/bead-atlas.png'));
 background-size:var(--texture-size,300% 200%);
 background-position:var(--texture-x) var(--texture-y);
 background-repeat:no-repeat;
}
.material-browser{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(120px,1fr);gap:12px 10px;margin:0 0 13px;padding:16px 15px 12px;background:linear-gradient(125deg,#fffdf9cc,#eee1d35e);border:1px solid #b89a7485;box-shadow:inset 0 0 0 3px #fffaf18c;position:relative}
.material-browser label{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:10px;color:#795f60;letter-spacing:.2px}
.material-browser input,.material-browser select{width:100%;min-width:0;min-height:42px;background:#fffdf8de;border:1px solid #b99b786b;border-radius:2px;color:#55414b;padding:10px 11px;font:inherit;font-size:11px;outline-offset:3px}
.material-browser input::placeholder{color:#9c8988;font-size:10px}
.material-browser input:focus-visible,.material-browser select:focus-visible{outline:2px solid #9c747c;border-color:#9c747c}
.material-results{grid-column:1/-1;font-size:9px;letter-spacing:.6px;color:#897071;margin:0}
.material-legacy{grid-column:1/-1;margin:0;font-size:10px;line-height:1.75;color:#816657;padding-top:8px;border-top:1px solid #bba07c55}
.material-legacy[hidden]{display:none}
.palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:566px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b59a87 transparent;padding:4px 5px 5px;margin:0 -5px 15px;scroll-padding:5px}
.palette .stone-option{min-width:0;min-height:126px;padding:12px 5px 10px;gap:5px}
.palette .stone-option .swatch{width:55px;height:55px;flex-shrink:0}
.palette .stone-option>span:not(.swatch){display:flex;align-items:center;justify-content:center;min-height:28px;overflow-wrap:anywhere;font-size:10px;line-height:1.35}
.palette .stone-option small{font-size:9px;line-height:1.4}
.materials-empty{grid-column:1/-1;padding:24px 18px;text-align:center;background:#fffaf6a6;border:1px solid #b69b7c6b;color:#86696e;font-size:11px;line-height:1.8}
.materials-empty p{margin:0 0 10px}
.materials-empty button{border:0;border-bottom:1px solid #ad8b7c;background:transparent;padding:4px 0;color:#76545f;font-size:10px}
.total strong.quote-required{font-size:28px;letter-spacing:.1px;line-height:1.45}
@media(max-width:480px){
 .material-browser{grid-template-columns:minmax(0,1.25fr) minmax(110px,1fr);padding:13px 11px 11px;gap:11px 8px}
 .material-browser input,.material-browser select{font-size:12px;padding:10px 8px;min-height:44px}
 .material-browser input::placeholder{font-size:9px}
 .palette{grid-template-columns:repeat(3,minmax(0,1fr));max-height:440px;gap:8px}
 .palette .stone-option{min-height:132px}
 .palette .stone-option .swatch{width:58px;height:58px}
 .palette .stone-option>span:not(.swatch){font-size:10px;min-height:30px}
}
@media(prefers-reduced-motion:reduce){.palette .stone-option,.palette .stone-option .swatch{transition:none}}