:root{
  --bg:#fff; --ink:#0a0a0a; --muted:#6b7280; --ring:rgba(0,0,0,.08);
  --container-pad:16px;

  /* Home-like image behavior */
  --thumb-ratio: 4 / 5;     /* shape of the image box */
  --thumb-max-h: none;      /* no clamp → same as home */

  /* Safe inset for cover to avoid cropping edges */
  --cover-safe: 6%;         /* tweak 4%–10% to taste */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}
a{ text-decoration:none; color:inherit; }

.note-bar{
  font-size:12px; color:#111; text-align:center;
  padding:10px 8px; border-bottom:1px solid var(--ring);
}

.section{ padding:28px var(--container-pad) 48px; }
.inner{ max-width:1100px; margin:0 auto; }
.page-title{ margin:0 0 18px; font-size:18px; font-weight:600; }

/* ==== Always 2 columns, centered like home ==== */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  width: min(92vw, 720px);
  margin-inline: auto;
}

/* Card layout */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:none;
  background:transparent;
}

/* Uniform image box (home behavior) */
.img-wrap{
  position:relative;
  width:100%;
  aspect-ratio: var(--thumb-ratio);
  overflow:hidden;
  margin-inline:auto; /* visually match home centering */
}

/* Image fills box with a small inner margin so cover crops less */
.img-wrap img{
  position:absolute;
  inset: var(--cover-safe);                          /* inner margin */
  width: calc(100% - 2 * var(--cover-safe));
  height: calc(100% - 2 * var(--cover-safe));
  object-fit: cover;
  display:block;
}

/* Sold out badge */
.soldout-badge{
  position:absolute;
  left:8px; bottom:8px; z-index:2;
  font-size:11px; padding:4px 8px; border-radius:999px;
  background:#111; color:#fff;
}

/* Disable any legacy ::after badge if present */
.card.soldout::after{ content:none; }

/* Meta under image */
.meta{
  padding-top:8px;
  text-align:center;
  display:grid;
  grid-template-rows:auto auto;  /* name | price */
  row-gap:6px;
}

/* 2-line clamp so rows line up even with long names */
.name{
  font-size:12px; line-height:1.35; color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.35em * 2);
}

.price{
  margin-top:0;
  font-weight:800; font-size:12px;
}

/* Dim price when sold out (optional) */
.card.soldout .price{ opacity:.6; }

/* Typographic bumps */
@media (min-width:768px){
  :root{ --container-pad:24px; }
  .page-title{ font-size:20px; }
}
@media (min-width:1024px){
  :root{ --container-pad:28px; }
  .page-title{ font-size:22px; }
}

/* Tighten on ultra-small screens */
@media (max-width:360px){
  .grid{ gap:16px; }
}

/* Optional: make cards bigger on very wide screens (like home) */
@media (min-width:1280px){
  .grid{ width: min(92vw, 800px); }
}