:root{
  --ink: #111111;
  --ink-muted: #555555;
  --ink-faint: #888888;
  --line: #111111;
  --line-soft: #dddddd;
  --bg: #ffffff;
  --bg-soft: #f5f5f5;
  --danger: #b3261e;
  --font: "Work Sans", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background: var(--bg); color: var(--ink); font-family: var(--font); }
h1,h2,h3 { margin:0; line-height:1.15; }
p { margin:0; }
a { color: var(--ink); }
button, select, input, textarea { font-family: var(--font); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px,5vw,48px); }

header.hero { background: var(--bg); border-bottom: 1px solid var(--line); padding: 30px clamp(20px,5vw,48px) 34px; }
.brand-row { display:flex; align-items:center; justify-content:center; flex-wrap: wrap; row-gap: 8px; max-width:1180px; margin:0 auto 26px; }
.brand { font-size:1.1rem; font-weight:800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.hero-title { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; text-align:center; max-width: 620px; margin: 0 auto; letter-spacing: -0.01em; }
.hero-sub { color: var(--ink-muted); text-align:center; max-width: 540px; margin: 14px auto 0; font-size: 0.94rem; line-height:1.6; }
.hero-note { color: var(--ink-faint); text-align:center; margin: 14px auto 0; font-size: 0.76rem; }

.filters { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.filters-row { display:flex; flex-wrap:wrap; gap: 12px; align-items:flex-end; }
.field { display:flex; flex-direction:column; gap: 5px; }
.field-label { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.select-field, .search-input, .text-input { border:1px solid var(--line); background: var(--bg); border-radius: 0; padding: 9px 12px; font-size: 0.85rem; color: var(--ink); min-width: 148px; }
.search-input { min-width: 220px; }
.search-field { flex: 1; min-width: 220px; }

.results-bar { display:flex; justify-content:space-between; align-items:baseline; margin: 24px 0 18px; flex-wrap: wrap; gap: 8px; }
.results-count { font-size: 0.82rem; color: var(--ink-faint); }
.clear-btn { background:none; border:none; color: var(--ink); font-size: 0.8rem; padding: 0; cursor: pointer; text-decoration: underline; }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; padding-bottom: 60px; }
.card { background: var(--bg); display:flex; flex-direction:column; border: 1px solid var(--line); }
.card-photo { aspect-ratio: 4/5; background: var(--bg-soft); position:relative; overflow:hidden; }
.card-photo img { width:100%; height:100%; object-fit: cover; display:block; }
.card-body { padding: 16px 18px 20px; display:flex; flex-direction:column; gap: 7px; flex:1; }
.photo-caption { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 18px 0; }
.card-name { font-size: 0.98rem; font-weight:700; text-transform: uppercase; letter-spacing: 0.01em; }
.card-meta { font-size: 0.8rem; color: var(--ink-faint); }
.card-price { font-weight:700; font-size: 1.05rem; color: var(--ink); }
.card-sizes { font-size: 0.8rem; color: var(--ink-muted); }
.card-cta { display:flex; align-items:center; justify-content:center; gap:8px; background: var(--ink); color: #fff; border:none; padding: 11px 16px; border-radius: 0; font-size: 0.8rem; font-weight:600; text-transform: uppercase; letter-spacing: 0.05em; text-decoration:none; margin-top: 6px; cursor: pointer; }
.card-cta:hover { background: #333; }

.empty { text-align:center; padding: 60px 20px; color: var(--ink-muted); }

footer { background: var(--bg); border-top: 1px solid var(--line); padding: 26px clamp(20px,5vw,48px); text-align:center; }
footer p { color: var(--ink-muted); font-size: 0.84rem; }
footer a { text-decoration: underline; }

@media (max-width: 560px) {
  .select-field, .search-input, .text-input { min-width: 0; width: 100%; }
  .field { width: 100%; }
  .search-field { width: 100%; }
}

/* ---- admin-only ---- */
.login-screen { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px; }
.login-box { border: 1px solid var(--line); padding: 36px 32px; max-width: 320px; width:100%; text-align:center; }
.login-box h1 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; }
.login-box input { width:100%; text-align:center; font-size: 1.4rem; letter-spacing: 0.3em; padding: 12px; margin-bottom: 14px; }
.btn-solid { background: var(--ink); color:#fff; border:none; padding: 12px 20px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; font-weight:600; cursor:pointer; width:100%; }
.btn-solid:hover { background:#333; }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 10px 18px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; font-weight:600; cursor:pointer; }
.error-msg { color: var(--danger); font-size: 0.82rem; margin-top: 10px; min-height: 1.2em; }

.admin-header { display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid var(--line); padding: 18px clamp(20px,5vw,48px); flex-wrap: wrap; gap: 10px; }
.admin-section { padding: 28px clamp(20px,5vw,48px); border-bottom: 1px solid var(--line-soft); }
.admin-section h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; }
.form-field { display:flex; flex-direction:column; gap:5px; }
.form-field label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.form-field input, .form-field select, .form-field textarea { border:1px solid var(--line); padding: 9px 11px; font-size: 0.88rem; border-radius:0; }
.size-toggles { display:flex; flex-wrap:wrap; gap:6px; }
.size-toggle { border:1px solid var(--line); background: var(--bg); padding: 6px 12px; font-size: 0.82rem; cursor:pointer; }
.size-toggle.on { background: var(--ink); color:#fff; }
.photo-preview { width: 120px; aspect-ratio: 4/5; background: var(--bg-soft); border: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size: 0.7rem; color: var(--ink-faint); text-align:center; }
.photo-preview img { width:100%; height:100%; object-fit:cover; }

.admin-list { display:flex; flex-direction:column; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.admin-row { background: var(--bg); display:flex; align-items:center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.admin-row .thumb { width: 48px; height: 60px; object-fit:cover; background: var(--bg-soft); flex-shrink:0; }
.admin-row .info { flex:1; min-width: 160px; }
.admin-row .info .n { font-weight:700; font-size:0.9rem; }
.admin-row .info .m { font-size:0.78rem; color: var(--ink-faint); }
.admin-row .actions { display:flex; gap: 8px; }
.admin-row .actions button { border:1px solid var(--line); background: var(--bg); padding: 6px 12px; font-size: 0.76rem; text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; }
.admin-row.inactive { opacity: 0.5; }
.status-msg { font-size: 0.82rem; margin-top: 10px; min-height: 1.2em; }
.status-msg.ok { color: #1a7a3c; }
.status-msg.err { color: var(--danger); }