:root{--navy:#082a57;--blue:#0b67c2;--ice:#f4f9fd;--line:#dbe6ef;--text:#17202a;--muted:#66788a;--white:#fff;--shadow:0 8px 25px rgba(8,42,87,.09)}
#sld-finder, #sld-finder *{box-sizing:border-box}#sld-finder{font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
.sld-wrap{max-width:1440px;margin:0 auto;padding:24px}
.hero{text-align:center;padding:20px 12px 14px}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-size:12px;font-weight:700}
.hero h1{margin:8px 0 6px;font-family:Georgia,serif;font-size:38px;color:var(--navy);font-weight:500}.hero p{margin:0;color:var(--muted);font-size:15px}
.finder{border:1px solid var(--line);border-radius:16px;background:var(--white);box-shadow:var(--shadow);overflow:hidden}
.filter-top{padding:20px;background:linear-gradient(180deg,#fbfdff,#f4f9fd)}
.filter-row{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:12px;align-items:end}
.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin:0 0 6px}
.field select,.field input{width:100%;height:42px;border:1px solid #cbd9e5;border-radius:8px;background:#fff;padding:0 10px;font-size:14px;color:#1f2d3d;outline:none}
.range-pair{display:flex;gap:6px}.range-pair input{min-width:0}
.shape-block{padding:18px 20px 2px}.shape-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin-bottom:9px}
.shapes{display:grid;grid-template-columns:repeat(11,minmax(74px,1fr));gap:8px}.shape-btn{border:1px solid #cbd9e5;background:#fff;border-radius:10px;padding:9px 6px 8px;cursor:pointer;color:#34495e;font-weight:600;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:76px;transition:.18s}.shape-btn:hover,.shape-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-1px)}.shape-icon{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.all-icon{display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;color:currentColor}
.actions{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 18px}.advanced-toggle{border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer;padding:8px 0}.reset-btn{border:1px solid #cbd9e5;background:#fff;padding:8px 13px;border-radius:8px;cursor:pointer}
.advanced{display:none;border-top:1px solid var(--line);padding:17px 20px;background:#fff}.advanced.open{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.results-head{display:flex;justify-content:space-between;align-items:center;padding:22px 2px 12px}.count{font-weight:700;color:var(--navy)}.sort select{border:1px solid #cbd9e5;border-radius:8px;padding:9px;background:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;transition:.18s;display:flex;flex-direction:column}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.imgbox{aspect-ratio:1/1;background:#f7fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.imgbox img{width:100%;height:100%;object-fit:cover}.badge{position:absolute;left:9px;top:9px;background:rgba(8,42,87,.92);color:#fff;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700}
.body{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}.title{font-size:15px;line-height:1.3;font-weight:700;color:var(--navy);margin-bottom:6px}.spec{font-size:13px;color:#4c6073;line-height:1.5}.price{font-size:21px;font-weight:800;color:var(--navy);margin:10px 0 8px}.icons{display:flex;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--blue);margin-bottom:10px}.view{margin-top:auto;display:block;text-align:center;background:var(--navy);color:#fff;text-decoration:none;border-radius:8px;padding:10px;font-weight:700}.view:hover{background:#0c3d79}
.pagination{display:flex;justify-content:center;gap:6px;margin:24px 0 6px;flex-wrap:wrap}.pagination button{border:1px solid #cbd9e5;background:#fff;border-radius:7px;padding:8px 11px;cursor:pointer}.pagination button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.note{font-size:12px;color:#7a8b9a;text-align:center;padding:18px}
@media(max-width:1050px){.filter-row{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sld-wrap{padding:12px}.hero h1{font-size:30px}.filter-row{grid-template-columns:repeat(2,1fr)}.advanced.open{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.filter-row,.advanced.open{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.results-head{align-items:flex-start;gap:10px;flex-direction:column}.shape-btn{padding:8px 10px;font-size:12px}}

@media(max-width:1150px){.shapes{grid-template-columns:repeat(6,1fr)}}
@media(max-width:760px){.shapes{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.shapes{grid-template-columns:repeat(3,1fr)}.shape-btn{min-height:70px}}

/* v4: improved phone/tablet layout */
#sld-finder .sld-wrap{width:100%}
@media(max-width:760px){
  #sld-finder .sld-wrap{padding:8px!important}
  #sld-finder .hero{padding:12px 6px 10px}
  #sld-finder .hero h1{font-size:27px;line-height:1.08;margin:6px 0}
  #sld-finder .hero p{font-size:13px;line-height:1.35}
  #sld-finder .finder{border-radius:11px}
  #sld-finder .shape-block{padding:13px 12px 2px}
  #sld-finder .shapes{grid-template-columns:repeat(3,1fr)!important;gap:6px}
  #sld-finder .shape-btn{min-height:66px!important;padding:7px 3px!important;font-size:11px!important}
  #sld-finder .shape-icon{width:29px;height:29px}
  #sld-finder .filter-top{padding:12px}
  #sld-finder .filter-row{grid-template-columns:1fr 1fr!important;gap:9px}
  #sld-finder .field label{font-size:10px}
  #sld-finder .field select,#sld-finder .field input{height:44px;font-size:16px}
  #sld-finder .range-pair{gap:5px}
  #sld-finder .advanced.open{grid-template-columns:1fr 1fr!important;padding:12px}
  #sld-finder .actions{padding:10px 12px 13px;gap:10px}
  #sld-finder .advanced-toggle,#sld-finder .reset-btn{min-height:42px}
  #sld-finder .results-head{padding:17px 3px 10px}
  #sld-finder .grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  #sld-finder .body{padding:10px}
  #sld-finder .title{font-size:13px}
  #sld-finder .spec{font-size:11px}
  #sld-finder .price{font-size:18px;margin:7px 0}
  #sld-finder .icons{font-size:10px;gap:5px}
  #sld-finder .view{padding:11px 6px;font-size:12px}
  #sld-finder .badge{font-size:9px;padding:4px 6px}
}
@media(max-width:430px){
  #sld-finder .filter-row,#sld-finder .advanced.open{grid-template-columns:1fr!important}
  #sld-finder .grid{grid-template-columns:1fr!important}
  #sld-finder .shapes{grid-template-columns:repeat(3,1fr)!important}
  #sld-finder .imgbox{aspect-ratio:1.08/1}
}