/* 08-category-page.css — Category page and the Makay Table grid.
   Part of the old css/styles.css (lines 1664–1770); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ── Category Page ── */
.category-container { display: flex; height: 100%; }
.category-left {
  width: 32%; border-right: 1px solid #e0e0e0;
  overflow-y: auto; background: #fafafa; padding: 0;
  min-height: 0;
  flex: 0 0 32%;
  align-self: stretch;
}
.category-left::-webkit-scrollbar { width: 3px; }
.category-left::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
.category-left div { padding: 0.7rem; border-bottom: 1px solid #eee; cursor: pointer; transition: all 0.2s ease; font-weight: 500; font-size: 0.8rem; }
.category-left div:hover  { background: #f5f5f5; }
.category-left div.active { background: #e8f9e5; color: #19378C; font-weight: 600; }
.category-right {
  width: 68%; overflow-y: auto; padding: 0.8rem;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem;
  background: #fff; align-content: start;
  min-height: 0;
  flex: 1 1 68%;
  align-self: stretch;
}
.category-right::-webkit-scrollbar { width: 4px; }
.category-right::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }

/* Subcategory icon cards in right panel — keep circles here (small icons, not photos) */
.item-card {
  text-align: center; background: #fff; padding: 0.6rem 0.4rem;
  border-radius: 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  transition: all 0.2s ease; cursor: pointer;
  opacity: 0; transform: translateY(20px); border: 1px solid #f0f0f0;
  position: relative;
}
.item-card.show   { opacity: 1; transform: translateY(0); }
.item-card:hover  { transform: translateY(-2px); }
.item-card img    { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; }
.item-card span   { display: block; margin-top: 0.3rem; font-size: 0.7rem; font-weight: 500; }
/* Long subcategory names ("Smartwatches & Fitness Trackers") wrap onto a
   few lines — keep them tight and centred, and keep the icon centred too. */
.item-card        { display: flex; flex-direction: column; align-items: center; }
.item-card span   { line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.item-card-icon   { width: 40px; height: 40px; border-radius: 10px; background: #eef1f9; display: flex; align-items: center; justify-content: center; }
.item-card-icon .material-symbols-rounded { font-size: 20px; color: #19378C; }
.item-card-other  { border-style: dashed; border-color: #e0c090; color: #e67e22; }
.item-card-other .item-card-icon { background: #fff3e0; }
.item-card-other .item-card-icon .material-symbols-rounded { color: #e67e22; }

/* ── Subcategory picker (#categoryRight) — the small chips ──
   Three things were making these look squished and "switched up",
   worst on iPhones:

   1. #categoryRight is itself a 3-column grid (rule above) whose ONE child
      is .subcategory-grid-inner — which is another 3-column grid. The
      child landed in the first column of the outer grid, so the whole
      picker was laid out inside a third of an already-narrow panel.
      The outer box is now a plain block and the inner grid owns the width.

   2. Columns were repeat(3, 1fr). 1fr is minmax(auto, 1fr), so one long
      word ("Confectionery", "Smartwatches") stretched its own column and
      starved the rest — uneven, shifted columns. The grid now fits as many
      100px+ columns as the panel allows (two on phones), and min-width:0
      on the cards stops one word dictating the layout.

   3. `.item-card span` was meant for the label but also matches the icon
      glyph's <span>, giving it the label's margin, block display and
      `hyphens: auto` — Safari hyphenates and re-wraps the icon's ligature
      text when the icon font is still loading, which is the garbled look
      on Apple devices. The label rules below target only the direct-child
      span, and hyphenation is off for good: a name is never split mid-word.

   Written against #categoryRight so these beat the single-class rules in
   later stylesheets without needing !important. */
#categoryRight {
  display: block;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;          /* iOS inflates small text in grids otherwise */
}
#categoryRight .subcategory-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  padding: 12px;
  margin: 0;
}
#categoryRight .item-card {
  min-width: 0;
  justify-content: flex-start;
  padding: 12px 8px 10px;
  border-radius: 14px;
}
#categoryRight .item-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
}
#categoryRight .item-card-icon .material-symbols-rounded {
  display: block;
  margin: 0;
  font-size: 22px;
  line-height: 1;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
}
#categoryRight .item-card > span {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #333;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;               /* even line lengths where supported */
}
#categoryRight .item-card-other > span { color: #e67e22; }

/* Subcategory product grid */
/* Product results for a tapped subcategory — must match the other product
   grids (.product-grid-static, .search-results-grid) at 2 columns. This
   was 3 columns, copied from .subcategory-grid-inner below (the small
   icon-tile subcategory *picker* in #categoryRight, where 3 columns is
   correct) — but #subcategoryGrid renders full product cards, not tiles,
   so it needs the same 2-column treatment every other product grid uses. */
.subcategory-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.4rem; padding: 0 1rem; margin-bottom: 1.5rem; }
.subcategory-grid-inner { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 12px 14px; margin-top: 8px; }

/* ── Makay Table — grid only, no list view ── */
#makayTable { padding: 0; background: #f8f9fa; }

#insights { background: #f8f9fa; }

#userGoodsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
}
@media (min-width: 480px) {
  #userGoodsGrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 16px; }
}

/* Same look as the home feed's .product-card — kept as its own class
   (not .product-card) so Makay Table can keep its own entry animation and
   sold styling. A tap opens the listing page; editing is "Edit post" there. */
.user-good-card {
  background: #fff; border-radius: 0; padding: 0.3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; overflow: hidden;
  opacity: 0; transform: translateY(20px);
}
.user-good-card.show { animation: fadeInUp 0.4s ease forwards; }
.user-good-card.show:nth-child(1) { animation-delay: 0.05s; }
.user-good-card.show:nth-child(2) { animation-delay: 0.10s; }
.user-good-card.show:nth-child(3) { animation-delay: 0.15s; }
.user-good-card.show:nth-child(4) { animation-delay: 0.20s; }
.user-good-card.show:nth-child(5) { animation-delay: 0.25s; }
.user-good-card.show:nth-child(6) { animation-delay: 0.30s; }
.user-good-card.show:nth-child(n+7) { animation-delay: 0.35s; }
.user-good-card:hover  { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.user-good-card.sold   { opacity: 0.75; }
.user-good-card.sold .product-card-img-wrap img { filter: grayscale(30%); }

.makay-table-empty { text-align: center; padding: 4rem 2rem; color: #95a5a6; grid-column: 1 / -1; }
.makay-table-empty p { font-size: 16px; margin: 0; line-height: 1.6; }

/* ── Empty Makay Table ───────────────────────────────────────────────
   Built by activity.js _makayTableEmptyHtml() (and the matching
   placeholder in index.html). Spans both grid columns and centres
   everything — the old button sat left-aligned because the grid
   treated it as a plain block. */
.makay-table-empty.mt-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem 2rem;
  color: #6b7280;
}
.mt-empty-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: #eef1f9;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.mt-empty-icon .material-symbols-rounded { font-size: 40px; color: #19378C; }
.mt-empty-title { font-size: 1.15rem; font-weight: 800; color: #1a1a2e; margin: 0 0 0.4rem; }
/* .mt-empty prefix: beats the older `.makay-table-empty p` rule above. */
.mt-empty .mt-empty-text { font-size: 0.88rem; color: #7a7d8a; line-height: 1.5; max-width: 280px; margin: 0 0 1.4rem; }
.mt-empty-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #19378C; color: #fff; border: none; border-radius: 14px;
  padding: 0.8rem 1.4rem; font-family: inherit; font-size: 0.92rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(25,55,140,0.25);
  transition: background 0.2s, transform 0.1s;
}
.mt-empty-btn .material-symbols-rounded { font-size: 20px; }
.mt-empty-btn:active { transform: scale(0.97); background: #0f2460; }
.mt-empty-tips {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2rem; width: 100%; max-width: 300px;
}
.mt-empty-tip {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #eef0f5; border-radius: 12px;
  padding: 10px 12px; font-size: 0.82rem; font-weight: 600; color: #3a3d4a; text-align: left;
}
.mt-empty-tip .material-symbols-rounded { font-size: 18px; color: #19378C; flex-shrink: 0; }