:root{
  --bg:#ffffff;
  --ink:#111827;
  --ink-2:#374151;
  --line:#e5e7eb;
  --accent:#ef476f;
}

/* Base */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
}

/* ===================== HEADER ===================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;             /* center everything horizontally */
}

/* TOP ROW: centered inline (logo | name | select | buttons) */
.topbar{
  display:flex;
  align-items:center;
  justify-content:center;         /* center the whole row */
  gap:14px;
  flex-wrap:wrap;                 /* wrap gracefully on small screens */
  width:100%;
}

.topbar__logo{
  width:160px;                    /* requested fixed width */
  height:auto;
  display:block;
  flex:0 0 auto;
}

.topbar__name{
  margin:0;
  font-size:1.2rem;
  font-weight:600;
  color:var(--ink);
  flex:0 0 auto;
}

/* Controls in the top row */
.topbar__select,
.btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  height:36px;                    /* unify control heights */
  line-height:20px;
  flex:0 0 auto;
  cursor:pointer;
}

/* SEARCH ROW (below) */
.searchbar{
  display:flex;
  justify-content:center;         /* center the search */
  width:100%;
}
.searchbar input[type="search"]{
  flex:0 1 780px;                 /* max width, shrinks on small screens */
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}

/* ===================== CONTENT ===================== */
.stats{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
  text-align:center;              /* center the stats line */
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  padding:16px 12px;
}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:230px;
}

/* Image-friendly swatch (uses image if provided; else gradient) */
.card .swatch{
  height:100px;                              /* make 120–140px if you want taller */
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb); /* fallback when no image */
  background-size: contain;                  /* show whole image */
  background-position: center;
  background-repeat: no-repeat;
  padding: 6px;                              /* small frame around the image */
  background-clip: content-box;              /* keep padding clear */
}


.card .meta{ padding:10px 12px 0; }
.card .name{ font-size:1rem; margin:0 0 2px; }
.card .code{ margin:0 0 8px; color:var(--ink-2); font-size:.9rem; }

.card .controls{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 12px;
}

/* Heart toggle */
.heart{ display:flex; align-items:center; gap:6px; user-select:none; }
.heart input{ display:none; }
.heart span{
  font-size:20px; line-height:1; cursor:pointer;
  filter:grayscale(1); opacity:.6; transition:.15s;
}
.heart input:checked + span{ filter:none; opacity:1; color:var(--accent); }

/* Buy button */
.buy{
  border:1px solid var(--line);
  border-radius:10px;
  padding:6px 10px;
  text-decoration:none;
  color:var(--ink);
}

/* Footer */
.site-footer{
  padding:20px 12px;
  border-top:1px solid var(--line);
  text-align:center;
  color:var(--ink-2);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .topbar{ gap:10px; }
  .topbar__logo{ width:140px; }
}
@media (max-width: 640px){
  .topbar__name{ font-size:1rem; }
  .searchbar input[type="search"]{ max-width:100%; }
}