:root { --ink:#0f172a; --muted:#64748b; --brand:#065f46; --accent:#0ea5e9; --bg:#f8fafc; }
*{box-sizing:border-box} body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.topbar{background:#fff;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:20}
.topbar .brand a{font-weight:800;font-size:22px;color:var(--ink)} .brand span{color:var(--brand)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.mainnav a{margin:0 10px;color:var(--ink)}
.hero{padding:48px 0;background:linear-gradient(120deg,#ffffff 0%,#e6f7ff 100%)}
.hero h1{font-size:34px;margin:0 0 8px}
.searchbar{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:8px;margin-top:16px}
.searchbar input,.searchbar select{padding:10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff}
.searchbar button{padding:10px 18px;border:0;background:var(--brand);color:#fff;border-radius:6px;cursor:pointer}
.section{padding:28px 0}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:180px;object-fit:cover;background:#e2e8f0}
.card .p{padding:12px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.badge{font-size:12px;padding:2px 6px;border-radius:999px;background:#e2e8f0;color:#334155}
.price{font-weight:700}
.compare{display:flex;align-items:center;gap:8px;margin-top:8px}
.cta{display:flex;gap:8px;margin-top:8px}
.cta a, .cta button{flex:1;text-align:center;padding:8px 10px;border-radius:6px;border:1px solid #cbd5e1;background:#fff}
.cta .primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.sitefoot{border-top:1px solid #e2e8f0;background:#fff;padding:20px 0;margin-top:32px}
.page{min-height:60vh}
.notice{padding:12px;border-radius:8px;background:#fff;border:1px solid #e2e8f0;margin-bottom:12px}
.form label{display:block;margin:8px 0 4px}
.form input{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:6px}
.btn{display:inline-block;padding:10px 14px;border-radius:6px;border:1px solid #cbd5e1;background:#fff}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e2e8f0;padding:10px;text-align:left}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,.06)}
.card .p{padding:12px}
.card-title{font-weight:700;color:#0b1220;text-decoration:none}
.card-title:hover{text-decoration:underline}
.price{font-size:1.25rem;font-weight:800}
.muted{color:#64748b}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta .primary{background:#075985;color:#fff;border:1px solid #075985;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:700}
.cta .secondary{background:#fff;color:#075985;border:1px solid #075985;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:700}

/* Slider buttons */
.card-slider .nav, .gallery .nav{
  position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer
}
.card-slider .prev,.gallery .prev{left:8px} .card-slider .next,.gallery .next{right:8px}
.card-slider .nav:hover,.gallery .nav:hover{background:rgba(0,0,0,.5)}

/* Gallery thumbs */
.gallery .thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;margin-top:8px}
.gallery .thumbs img{width:100%;height:60px;object-fit:cover;border:2px solid transparent;border-radius:8px;cursor:pointer}
.gallery .thumbs img.on{border-color:#075985}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin:18px 0}
.pagination a{padding:6px 10px;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#0b1220}
.pagination a.active{background:#075985;border-color:#075985;color:#fff}

/* Breadcrumb */
.breadcrumb{font-size:.9rem;margin-bottom:8px}
.breadcrumb a{color:#075985;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
/* Admin listing shares same card styles as public */
.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,.06)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card .p{padding:12px}
.card-title{font-weight:700;color:#0b1220;margin:4px 0}
.price{font-weight:800}
.searchbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.searchbar input,.searchbar select{padding:8px;border:1px solid #e2e8f0;border-radius:10px}
.searchbar button,.btn{padding:8px 12px;border:1px solid #075985;background:#075985;color:#fff;border-radius:10px;text-decoration:none}
.searchbar .btn{background:#fff;color:#075985;border-color:#075985}
.pagination{display:flex;gap:8px;justify-content:center;margin:18px 0}
.pagination a{padding:6px 10px;border:1px solid #e2e8f0;border-radius:8px;text-decoration:none;color:#0b1220}
.pagination a.active{background:#075985;border-color:#075985;color:#fff}