.of-page { background:#f5f7fb; padding:2.5rem 0 4rem; }
.of-wrap { max-width:1300px; margin:0 auto; padding:0 1.5rem; }
.of-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; padding-bottom:1rem; border-bottom:1px solid #e5e7eb; }
.of-topbar-left { display:flex; align-items:center; gap:.85rem; }
.of-topbar-tag { background:#ef4444; color:#fff; font-size:.75rem; font-weight:800; padding:.28rem .7rem; border-radius:6px; white-space:nowrap; letter-spacing:.02em; }
.of-topbar-title { font-size:1.25rem; font-weight:800; color:#111827; margin:0; }
.of-topbar-back { font-size:.82rem; font-weight:600; color:#6b7280; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:color .15s; }
.of-topbar-back:hover { color:#111827; }
.of-count { font-size:.85rem; color:#6b7280; margin-bottom:1.5rem; }
.of-empty { text-align:center; padding:4rem 1rem; color:#9ca3af; }
.of-empty i { font-size:3rem; color:#e5e7eb; display:block; margin-bottom:1rem; }
.of-empty-link { display:inline-block; margin-top:.75rem; padding:.65rem 1.5rem; background:#111; color:#fff !important; border-radius:12px; font-weight:700; text-decoration:none !important; }
.of-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; }
.of-card { background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.of-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.11); }
.of-img { height:190px; background:#f9fafb; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; text-decoration:none; color:inherit; }
.of-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.of-card:hover .of-img img { transform:scale(1.04); }
.of-img-ph { color:#d1d5db; font-size:2.5rem; }
.of-pct { position:absolute; top:.7rem; left:.7rem; background:#ef4444; color:#fff; font-size:.72rem; font-weight:800; padding:.22rem .6rem; border-radius:8px; }
.of-body { padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.of-cat { font-size:.7rem; font-weight:700; color:#10b981; text-transform:uppercase; letter-spacing:.05em; }
.of-name { font-size:.9rem; font-weight:700; color:#111827; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-decoration:none; }
.of-name:hover { color:#c0392b; }
.of-prices { display:flex; align-items:baseline; gap:.5rem; margin-top:.2rem; }
.of-price-old { font-size:.8rem; color:#9ca3af; text-decoration:line-through; }
.of-price-new { font-size:1.1rem; font-weight:800; color:#111827; }
.of-actions { display:flex; gap:.5rem; margin-top:auto; padding-top:.65rem; }
.of-btn-add-wrap { margin:0; width:100%; }
.of-btn-add { width:100%; padding:.55rem; border-radius:10px; background:#111111; color:#fff; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.of-btn-add:hover { background:#1f1f1f; }