:root {
    --so-bg: #fdfbf7;
    --so-surface: #ffffff;
    --so-border: #111111;
    --so-red: #e60000;
    --so-blue: #0000cd;
    --so-yellow: #ffcc00;
    --so-text-main: #111111;
    --so-text-sub: #555555;
    --so-line: 3px solid #111111;
}
body { margin: 0; background-color: var(--so-bg); color: var(--so-text-main); font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
.so-header-wrap { border-bottom: var(--so-line); background: var(--so-surface); }
.so-top-notice { background: var(--so-red); color: #fff; border-bottom: var(--so-line); padding: 10px 24px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; justify-content: space-between; }
.so-nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 80px; box-sizing: border-box; }
.so-logo img { height: 28px; filter: grayscale(1) contrast(2); }
.so-menu { display: flex; gap: 0; border-left: var(--so-line); height: 100%; }
.so-menu a { display: flex; align-items: center; text-decoration: none; color: var(--so-text-main); font-weight: 900; font-size: 14px; text-transform: uppercase; padding: 0 30px; border-right: var(--so-line); transition: 0.2s; }
.so-menu a:hover { background-color: var(--so-yellow); }
.so-container { max-width: 1400px; margin: 50px auto; padding: 0 24px; box-sizing: border-box; }
.so-cat-head { border: var(--so-line); background: var(--so-blue); color: #fff; padding: 20px 30px; margin-bottom: 20px; font-size: 20px; font-weight: 900; display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; }
.so-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border-top: var(--so-line); border-left: var(--so-line); margin-bottom: 60px; }
.so-card { background-color: var(--so-surface); border-bottom: var(--so-line); border-right: var(--so-line); padding: 20px; text-decoration: none; transition: 0.2s; display: flex; flex-direction: column; position: relative; }
.so-card:hover { background-color: var(--so-yellow); }
.so-img-box { width: 100%; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 2px solid var(--so-border); }
.so-img-box img { width: 70%; height: 70%; object-fit: contain; filter: grayscale(0.2); transition: 0.3s; }
.so-card:hover .so-img-box img { filter: grayscale(0) contrast(1.2); transform: scale(1.05); }
.so-name { font-size: 14px; font-weight: 900; color: var(--so-text-main); height: 40px; line-height: 1.4; overflow: hidden; margin-bottom: 15px; }
.so-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; border-top: 2px solid var(--so-border); padding-top: 15px; }
.so-price { color: var(--so-red); font-weight: 900; font-size: 18px; }
.so-sell { font-size: 11px; color: var(--so-text-sub); font-weight: 800; }
.so-tag { position: absolute; top: 0; left: 0; background: var(--so-red); color: #fff; font-size: 10px; padding: 4px 10px; font-weight: 900; border-right: 2px solid var(--so-border); border-bottom: 2px solid var(--so-border); }
.so-detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: var(--so-line); background: var(--so-surface); }
.so-box-left { border-right: var(--so-line); padding: 50px; }
.so-box-right { padding: 50px; background: var(--so-bg); }
.so-h1 { font-size: 32px; font-weight: 900; margin: 0 0 30px 0; color: var(--so-text-main); line-height: 1.2; text-transform: uppercase; }
.so-desc-block { border-top: var(--so-line); padding-top: 20px; font-size: 15px; font-weight: 600; line-height: 1.8; color: var(--so-text-sub); }
.so-stats { display: flex; border: var(--so-line); margin-top: 40px; }
.so-stat-item { flex: 1; padding: 20px; text-align: center; border-right: var(--so-line); background: var(--so-surface); }
.so-stat-item:last-child { border-right: none; }
.so-stat-val { font-size: 20px; font-weight: 900; color: var(--so-text-main); margin-top: 8px; }
.so-input { width: 100%; height: 56px; background: var(--so-surface); border: var(--so-line); padding: 0 20px; font-size: 15px; font-weight: 900; box-sizing: border-box; outline: none; transition: 0.2s; margin-top: 10px; color: var(--so-text-main); }
.so-input:focus { background: var(--so-yellow); }
.so-label { display: block; font-size: 13px; font-weight: 900; color: var(--so-text-main); text-transform: uppercase; }
.so-btn { width: 100%; height: 64px; background: var(--so-blue); color: #fff; border: var(--so-line); font-size: 18px; font-weight: 900; cursor: pointer; transition: 0.2s; margin-top: 30px; text-transform: uppercase; }
.so-btn:hover { background: var(--so-red); color: #fff; }
.so-footer { border-top: var(--so-line); padding: 60px 0; margin-top: 80px; text-align: center; background: var(--so-surface); font-weight: 900; font-size: 14px; text-transform: uppercase; }
@media (max-width: 1400px) { .so-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1000px) { .so-grid { grid-template-columns: repeat(3, 1fr); } .so-detail-grid { grid-template-columns: 1fr; } .so-box-left { border-right: none; border-bottom: var(--so-line); } }
@media (max-width: 600px) { .so-grid { grid-template-columns: repeat(2, 1fr); } .so-menu { display: none; } .so-nav-inner { padding: 20px; } }