/* alchemyV55.css . adds theme-dark, keeps existing class names working */

/* Base light theme (fallback) */
:root {
  --bg: #0e1116;
  --bg-elev: #161a22;
  --text: #e6e9ef;
  --muted: #9aa4b2;
  --link: #7ab7ff;
  --link-hover: #a6ceff;
  --accent: #3b82f6;
  --border: #2a2f39;
  --row-alt: #12161d;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Explicit dark theme class used by the renderer */
body.theme-dark {
  --bg: #0e1116;
  --bg-elev: #161a22;
  --text: #e6e9ef;
  --muted: #9aa4b2;
  --link: #7ab7ff;
  --link-hover: #a6ceff;
  --accent: #60a5fa;
  --border: #2a2f39;
  --row-alt: #12161d;
  background: var(--bg);
  color: var(--text);
}

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 18px 60px;
}

/* Typography */
h1, h2, h3, h4 { color: var(--text); margin: 0 0 10px; }
.mega-title { font-size: 28px; font-weight: 700; letter-spacing: .2px; }

/* Links */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a.unstyled-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--border); }
a.unstyled-link:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); }

/* Sections */
.section { margin: 18px 0 24px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; }

/* Hero */
.hero .lead { color: var(--muted); display: flex; gap: 16px; align-items: flex-start; }
.hero .lead img { max-height: 220px; border-radius: 8px; border: 1px solid var(--border); }

/* Facts */
.facts2 { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 10px 16px; }
.facts2 .fact { display: contents; }
.facts2 .k { color: var(--muted); }
.facts2 .v { color: var(--text); }

/* Tables */
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
table.sortable thead th {
  background: var(--bg-elev);
  position: sticky; top: 0;
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
table.sortable tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
table.sortable tbody tr:nth-child(2n) { background: var(--row-alt); }
.sort-indicator { opacity: .45; font-size: 12px; }

/* Attribute links */
a.attr-link { color: var(--link); }
a.attr-link:hover { color: var(--link-hover); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.gallery img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }

/* Footer */
.footer { margin-top: 28px; color: var(--muted); text-align: center; font-size: 13px; }


/* ------------------------------------------------------------------
   V56: styles for the menu, listing and homepage classes.

   The menu/homepage generators emitted four-column-grid, item, pagination,
   bucket-nav, bucket-disabled, current-page and disabled since V5 shipped,
   but no stylesheet ever defined them, so every menu page rendered as an
   unstyled list. Adds the listing card grid and the homepage search box.
   ------------------------------------------------------------------ */

.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px 48px; }

/* Homepage hero + search --------------------------------------------- */
.hero { padding: 40px 0 28px; border-bottom: 1px solid var(--border); }
.hero .mega-title { margin: 0 0 6px; font-size: 34px; letter-spacing: -0.5px; }
.hero .lead { margin: 0 0 20px; color: var(--muted); font-size: 16px; }

.site-search { display: flex; gap: 8px; max-width: 620px; }
.site-search-input {
  flex: 1; padding: 11px 14px; font-size: 15px;
  color: var(--text); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 8px;
}
.site-search-input::placeholder { color: var(--muted); }
.site-search-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}
.site-search-button {
  padding: 11px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
  color: #06101f; background: var(--accent);
  border: 1px solid var(--accent); border-radius: 8px;
}
.site-search-button:hover { background: var(--link-hover); border-color: var(--link-hover); }

.browse-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }
.browse-nav a {
  padding: 9px 16px; border-radius: 999px; text-decoration: none;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border);
}
.browse-nav a:hover { border-color: var(--accent); color: var(--link-hover); }

.section { margin: 34px 0 0; }
.section h2 {
  margin: 0 0 14px; font-size: 19px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* Text grids (brand/part/attribute lists) ---------------------------- */
.four-column-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.four-column-grid .item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 9px 12px; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 7px;
}
.four-column-grid .item a {
  color: var(--link); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.four-column-grid .item a:hover { color: var(--link-hover); text-decoration: underline; }
.four-column-grid .item .count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Product listing cards ---------------------------------------------- */
.card-grid {
  display: grid; gap: 14px; margin: 18px 0;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.card {
  display: flex; flex-direction: column; gap: 10px; padding: 12px;
  text-decoration: none; color: var(--text);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px;
}
.card:hover { border-color: var(--accent); }
.card-thumb {
  display: block; width: 100%; height: 150px;
  object-fit: contain; background: #fff; border-radius: 6px;
}
.card-thumb-empty {
  background: var(--row-alt); border: 1px dashed var(--border);
}
.card-title {
  font-size: 13px; line-height: 1.35; color: var(--link);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card:hover .card-title { color: var(--link-hover); }

/* A-Z bucket nav ------------------------------------------------------ */
.bucket-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px;
  padding: 12px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 8px;
}
.bucket-nav a, .bucket-nav span {
  min-width: 34px; padding: 6px 9px; text-align: center;
  border-radius: 6px; font-size: 14px; text-decoration: none;
}
.bucket-nav a { color: var(--link); border: 1px solid var(--border); }
.bucket-nav a:hover { color: var(--link-hover); border-color: var(--accent); }
.bucket-nav .current-page {
  color: #06101f; background: var(--accent); border: 1px solid var(--accent);
  font-weight: 600;
}
.bucket-nav .bucket-disabled { color: var(--muted); opacity: 0.45; border: 1px solid transparent; }

/* Pagination ---------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; }
.pagination a, .pagination span {
  min-width: 36px; padding: 7px 11px; text-align: center;
  border-radius: 6px; font-size: 14px; text-decoration: none;
  border: 1px solid var(--border);
}
.pagination a { color: var(--link); }
.pagination a:hover { color: var(--link-hover); border-color: var(--accent); }
.pagination .current-page {
  color: #06101f; background: var(--accent); border-color: var(--accent); font-weight: 600;
}
.pagination .disabled { color: var(--muted); opacity: 0.4; }

.footer {
  margin-top: 48px; padding-top: 18px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 13px;
}
.footer a { color: var(--link); }

@media (max-width: 640px) {
  .wrapper { padding: 0 14px 32px; }
  .hero .mega-title { font-size: 26px; }
  .site-search { flex-direction: column; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .card-thumb { height: 110px; }
}