:root { --bg:#f8fafc; --text:#0f172a; --muted:#64748b; --card:#ffffff; --primary:#22c55e; --danger:#ef4444; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--text);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.site-header{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:10}
.site-header .brand{font-weight:700;margin-right:1rem}
.site-header .search{display:flex;gap:.5rem;align-items:center}
.site-header input, select{padding:.5rem;border:1px solid #cbd5e1;border-radius:.5rem}
.site-header button{padding:.55rem .9rem;border:0;background:var(--primary);color:white;border-radius:.5rem;cursor:pointer}
nav a{margin-left:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:200px;object-fit:cover;background:#e2e8f0}
.card .p{padding:.75rem}
.badge{display:inline-block;background:#e2e8f0;color:#334155;border-radius:999px;padding:.15rem .5rem;font-size:.8rem;margin-right:.25rem}
.price{font-weight:700}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:.6rem;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.form{display:grid;gap:.75rem;max-width:650px}
.form input,.form select,.form textarea{padding:.7rem;border:1px solid #cbd5e1;border-radius:.5rem}
.form label{font-size:.9rem;color:var(--muted)}
.flash{padding:.6rem .8rem;border-radius:.5rem;margin:.75rem 0}
.flash.success{background:#dcfce7;border:1px solid #86efac}
.flash.error{background:#fee2e2;border:1px solid #fecaca}
.site-footer{margin-top:2rem;border-top:1px solid #e2e8f0;background:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e2e8f0;padding:.6rem;text-align:left}
.empty{color:var(--muted);padding:1rem 0}


/* Carousel */
.carousel{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;overflow:hidden}
.carousel-viewport{position:relative;overflow:hidden}
.carousel-track{display:flex;transition:transform .3s ease}
.carousel-slide{min-width:100%}
.carousel-slide img{width:100%;height:auto;display:block;max-height:520px;object-fit:contain;background:#f1f5f9}
.carousel-controls{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem}
.carousel-prev,.carousel-next{border:1px solid #cbd5e1;background:#fff;border-radius:.5rem;padding:.4rem .7rem;cursor:pointer}
.carousel-prev[disabled],.carousel-next[disabled]{opacity:.4;cursor:not-allowed}
.carousel-dots{display:flex;gap:.4rem;justify-content:center;padding:.5rem 0}
.carousel-dot{width:10px;height:10px;border-radius:999px;border:1px solid #94a3b8;background:#fff;cursor:pointer}
.carousel-dot.active{background:#334155}
.carousel-thumbs{display:flex;gap:.5rem;overflow:auto;padding:.5rem;background:#f8fafc;border-top:1px solid #e2e8f0}
.carousel-thumb{border:2px solid transparent;border-radius:.5rem;cursor:pointer;flex:0 0 auto}
.carousel-thumb img{width:70px;height:70px;object-fit:cover;display:block;border-radius:.4rem;background:#e2e8f0}
.carousel-thumb.active{border-color:#334155}