/* === Stardew Valley Shops Guide === */

:root {
  --sh: #b5651d;           /* shopkeeper amber-brown */
  --sh-dark: #8a4a12;
  --sh-bg: #f7ecdf;
  --gold: #d9a93a;

  /* tab bar accent, consumed by stardew-common.css */
  --tab-bg: var(--sh-bg);
  --tab-accent: var(--sh);
  --tab-text: var(--sh-dark);
}

main { max-width: 900px; }

/* --- Vendor header card --- */
.shop-vendor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.shop-vendor-name {
  margin: 0;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--sh-dark);
}
.shop-hours { font-size: 0.88rem; font-weight: 700; color: var(--muted); }

/* --- Section cards --- */
.shop-section {
  margin-bottom: 1rem;
  background: var(--card);
  border: 2px solid var(--border);
  border-left: 5px solid var(--sh);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.shop-section-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.05rem;
}
.shop-section-head::-webkit-details-marker { display: none; }
.shop-section-head::after {
  content: "\25BC";
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.2s ease;
  margin-left: auto;
}
.shop-section[open] .shop-section-head::after { transform: rotate(180deg); }
.shop-section-title {
  margin: 0;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--sh-dark);
}
.shop-section-sub { margin: -0.3rem 1.05rem 0.7rem; font-size: 0.86rem; color: var(--muted); }

/* --- Tables --- */
.shop-table-wrap { overflow-x: auto; padding: 0 1.05rem 1rem; }
.shop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.shop-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.shop-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.shop-table tr:last-child td { border-bottom: none; }
.shop-item-name { font-weight: 700; color: var(--ink); white-space: nowrap; }
.shop-price { font-weight: 800; color: var(--sh-dark); white-space: nowrap; text-align: right; }
.shop-mats { color: var(--muted); font-size: 0.86rem; }
.shop-unlock {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--sh-dark);
  background: var(--sh-bg);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.shop-adds { color: var(--muted); font-size: 0.86rem; }
.shop-note { color: var(--muted); font-size: 0.84rem; font-style: italic; }
.shop-free { color: var(--sh); font-weight: 800; }

/* --- Callout notes under a section --- */
.shop-callouts { margin: 0; padding: 0 1.05rem 1rem; }
.shop-callouts li {
  list-style: none;
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.35rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.shop-callouts li::before { content: "\2726"; position: absolute; left: 0; color: var(--sh); }

.dash { color: var(--border); }
html.dark .dash { color: var(--muted); }
@media (max-width: 560px) {
  .shop-table { font-size: 0.85rem; }
  .shop-item-name { white-space: normal; }
}

/* ==== Dark mode: re-tint local palette (same approach as bundles.css) ==== */
html.dark {
  --sh-bg: rgba(181, 101, 29, 0.20);
  --sh-dark: #e6ab72;
  --sh: #cf8340;
  --gold: #e6c25c;
}