:root{--red:#951820;--text:#222;--muted:#777;--line:#e9e9eb;--soft:#f7f7f8}
*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text)}.wrap{width:min(1180px,92vw);margin:auto}
header{border-bottom:1px solid #eee}.top{height:88px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:28px;font-weight:900;color:#222;text-decoration:none;letter-spacing:-1.4px}.logo span,.eyebrow{color:var(--red)}.back{font-size:13px;color:#777;text-decoration:none}
.hero{text-align:center;padding:42px 0 20px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em}.hero h1{font-size:clamp(35px,5vw,50px);margin:8px 0;letter-spacing:-2px}.hero p{color:var(--muted)}
.search{width:min(800px,100%);margin:24px auto 0;position:relative}.search input{width:100%;height:56px;border:1px solid #ddd;border-radius:16px;padding:0 50px 0 20px;font-size:16px;outline:none;box-shadow:0 8px 25px #0000000d}.search span{position:absolute;right:20px;top:15px;font-size:21px;color:#777}
.az{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:17px 0}.az button{border:0;background:none;width:30px;height:30px;border-radius:8px;font-weight:700;color:#777;cursor:pointer}.az button.active,.az button:hover{background:var(--red);color:#fff}
.section-title{display:flex;justify-content:space-between;margin:30px 0 15px;align-items:center}.section-title h2{margin:0;font-size:21px}.section-title span{font-size:12px;color:#888}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:55px}.card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 7px 24px #0000000b;transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:0 15px 32px #0000001c}
.product-image{height:205px;background:linear-gradient(145deg,#fafafa,#eee);display:grid;place-items:center;padding:20px;position:relative}.product-image img{max-width:85%;max-height:165px;object-fit:contain}.placeholder{width:75px;height:125px;background:#fff;border:1px solid #ddd;border-radius:12px 12px 22px 22px;box-shadow:0 12px 20px #0002;display:grid;place-items:center;font-size:27px;font-weight:900;color:var(--red)}.placeholder-label{position:absolute;bottom:10px;font-size:9px;color:#aaa;letter-spacing:.08em}
.info{padding:16px}.info h3{margin:0 0 7px;font-size:16px}.tags{font-size:11px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.go{display:flex;justify-content:space-between;margin-top:15px;color:var(--red);font-size:12px;font-weight:800}
.empty{grid-column:1/-1;text-align:center;padding:50px;color:#888}
.modal{position:fixed;inset:0;background:#0009;display:none;place-items:center;padding:20px;z-index:50;backdrop-filter:blur(5px)}.modal.open{display:grid}.panel{width:min(850px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;padding:28px;box-shadow:0 25px 70px #0005}.close{float:right;border:0;border-radius:50%;width:40px;height:40px;font-size:23px;cursor:pointer;background:#f1f1f1}
.product-head{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;margin:18px 0 25px}.detail-image{height:120px;background:var(--soft);border-radius:16px;display:grid;place-items:center;padding:12px}.detail-image img{max-height:100px;max-width:100%;object-fit:contain}.product-head h2{font-size:30px;margin:0 0 8px}.modal-tags{font-size:13px;color:#888}
.video-item{border-top:1px solid #eee;padding:24px 0}.video-item:first-child{border-top:0}.video-item h3{margin:0 0 8px;font-size:19px}.video-item p{margin:0 0 15px;color:#666;line-height:1.55;font-size:14px}.video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#111}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
footer{padding:24px;text-align:center;border-top:1px solid #eee;background:#fafafa;color:#888;font-size:12px}
@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.grid{grid-template-columns:1fr}.product-image{height:175px}.product-head{grid-template-columns:1fr}.detail-image{height:130px}.panel{padding:21px}}