:root { --ink:#1f2933; --muted:#6b7785; --line:#e2e6ea; --bg:#f6f7f9; --card:#fff; --accent:#1d4f91; --ok:#1b7f4b; --bad:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); }
img { max-width:100%; height:auto; }
h1 { font-size:1.6rem; margin:0 0 1rem; } h2 { font-size:1.15rem; margin:0 0 .5rem; }
.container { max-width:1100px; margin:0 auto; padding:1.5rem 1rem 3rem; }
.site-header { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding:.9rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.site-header nav { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.brand { font-weight:700; text-decoration:none; color:var(--ink); }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card:hover { border-color:var(--accent); }
.card-image { aspect-ratio:1/1; background:#eef0f3; }
.card-image img { width:100%; height:100%; object-fit:cover; display:block; }
.card-body { padding:.75rem; } .card-body h2 { font-size:1rem; }
.price { font-weight:700; margin:.25rem 0; }
.product { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
.product-images { display:grid; gap:.75rem; } .product-images img { border-radius:8px; border:1px solid var(--line); }
.variants { padding-left:1.2rem; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.25rem; margin-bottom:1.25rem; overflow-x:auto; }
.narrow { max-width:420px; margin:2rem auto; }
.notice { text-align:center; padding:3rem 1rem; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; }
.stat strong { display:block; font-size:1.8rem; } .stat span { color:var(--muted); font-size:.9rem; }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; font-size:.93rem; }
th { color:var(--muted); font-weight:600; }
.details th { width:180px; }
.thumb { width:56px; } .thumb img { width:44px; height:44px; object-fit:cover; border-radius:4px; display:block; }
.thumbs { display:flex; flex-wrap:wrap; gap:.6rem; } .thumbs img { width:120px; height:120px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
label { display:block; margin-bottom:.9rem; font-size:.93rem; }
input[type=text], input[type=email], input[type=password], input[type=search] { display:block; width:100%; padding:.55rem .65rem; margin-top:.25rem; border:1px solid #c5ccd3; border-radius:6px; font:inherit; }
button { padding:.55rem 1rem; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
button.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); }
button.link { background:none; color:var(--accent); padding:0; text-decoration:underline; }
form.inline { display:inline-block; margin:0 .5rem .25rem 0; }
.search { display:flex; gap:.5rem; margin-bottom:1rem; max-width:480px; } .search input { margin-top:0; }
.flash { background:#e8f1fb; border:1px solid #b8d2ee; padding:.7rem .9rem; border-radius:6px; }
.flash-error { background:#fdecea; border-color:#f3b9b4; }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.8rem; }
.badge-on { background:#e3f4ea; color:var(--ok); } .badge-off { background:#fdecea; color:var(--bad); }
.pager a, .pager strong { margin-right:.5rem; }
code { background:#eef0f3; padding:.1rem .3rem; border-radius:4px; }
@media (max-width:720px) { .product { grid-template-columns:1fr; } }
.small { font-size:.85rem; font-weight:400; }
.num { text-align:right; white-space:nowrap; }
tfoot td { border-bottom:0; } tr.total td { font-weight:700; border-top:2px solid var(--line); }
.qty { width:5rem; padding:.4rem; border:1px solid #c5ccd3; border-radius:6px; font:inherit; }
a.button { display:inline-block; padding:.55rem 1rem; border-radius:6px; background:var(--accent); color:#fff; text-decoration:none; }
.buy { margin:1rem 0; max-width:340px; }
select, textarea, input[type=number], input[type=tel] { display:block; width:100%; padding:.55rem .65rem; margin-top:.25rem; border:1px solid #c5ccd3; border-radius:6px; font:inherit; background:#fff; }
.checkout { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:1.25rem; align-items:start; }
.checkout h2 { margin-top:1rem; } .checkout h2:first-of-type { margin-top:0; }
.field-error { display:block; color:var(--bad); font-size:.85rem; margin-top:.2rem; }
.bank { background:#eef0f3; padding:.75rem; border-radius:6px; }
@media (max-width:720px) { .checkout { grid-template-columns:1fr; } }