:root {
  /* Warm, appetizing palette */
  --color-blue: #D54B2A;      /* Primary accent (tomato) */
  --color-green: #6FA56E;     /* Fresh herb */
  --color-orange: #E59A3A;    /* Honey amber */
  --color-bg: #FFF8F1;        /* Warm cream */
  --color-charcoal: #2C2C2C;  /* Ink */
  --color-teal: #48C0C6;      /* Soft overlay (unused mostly) */
  --color-border: #EADFD3;    /* Warm subtle border */

  --radius-lg: 14px;
  --shadow-card: 0 6px 24px rgba(44,44,44,0.06);
}

body { font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, sans-serif; background: var(--color-bg); margin: 0; padding: 1.2rem; color: var(--color-charcoal); }
.container { max-width: 1120px; margin: 0 auto; }

/* Header (full-width, simple) */
.site-header { background: #fff; border-bottom: 1px solid var(--color-border); margin: 0 0 1rem; }
.site-header .wrap { display: flex; align-items: center; justify-content: flex-start; padding: .6rem 1rem; max-width: 1120px; margin: 0 auto; }
.brand { font-weight: 800; letter-spacing: 0.2px; color: #7A5A3C; text-decoration: none; }
.brand-img { height: 28px; display: block; }
.btn { 
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 40px; padding: 0 .9rem; border-radius: 10px;
  text-decoration: none; font-size: .95rem; font-weight: 600;
}
.btn svg { width: 18px; height: 18px; display: inline-block; }
.btn.cta { background: var(--color-blue); color: #fff; }
.btn.cta:hover { filter: brightness(0.96); }

.page-title { margin: .2rem 0 1rem; font-size: 1.6rem; }

/* Gurunavi-like vertical list */
#shop-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.list-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); overflow: hidden; display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: stretch; }
.lc-media { position: relative; background: #e5e7eb; }
.lc-media .thumb { position: absolute; inset: 0; background-size: cover; background-position: center; }
.lc-media .thumb.no-image { background-image: linear-gradient(135deg,#e5e7eb,#f3f4f6); }
.lc-media .thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0.00)); }
.lc-body { padding: .9rem 1rem 1rem 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: .4rem; }
.lc-top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.lc-title { font-size: 1.15rem; margin: 0; line-height: 1.4; color: var(--color-charcoal); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: .78rem; background: #F3F2ED; color: #4B4B4B; border: 1px solid var(--color-border); border-radius: 999px; padding: .15rem .6rem; }
.chip-area { background: #FFF3E8; color: var(--color-orange); border-color: #F6DEBF; }
.catch { color: rgba(44,44,44,0.75); font-size: .92rem; margin: 0; }
.meta { margin-top: .2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; }
.meta-item { display: flex; align-items: center; gap: .45rem; color: rgba(44,44,44,0.85); font-size: .92rem; }
.meta-item svg { width: 18px; height: 18px; color: var(--color-orange); flex: 0 0 18px; }
.lc-actions { display: flex; gap: .6rem; margin-top: .6rem; }
.btn.more { background: var(--color-blue); color: #fff; }
.btn.site { background: #FFF4EF; color: var(--color-blue); border: 1px solid #FADBD0; }

@media (max-width: 920px) {
  .list-card { grid-template-columns: 190px 1fr; }
}
@media (max-width: 720px) {
  .list-card { grid-template-columns: 1fr; }
  .lc-media { height: 180px; }
  .lc-body { padding: .9rem 1rem 1rem; }
  .meta { grid-template-columns: 1fr; }
}

/* Search bar */
.searchbar { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--color-border); padding: 1rem; }
#search-form { display: grid; grid-template-columns: 1.3fr 1fr; gap: .8rem 1rem; align-items: end; }
#search-form .field { display: grid; gap: .35rem; }
#search-form label, #search-form legend { font-size: .9rem; color: rgba(44,44,44,0.8); }
#search-form input[type="search"], #search-form select { height: 40px; border-radius: 10px; border: 1px solid rgba(44,44,44,0.15); padding: 0 .7rem; background: #fff; color: var(--color-charcoal); }
.cat-group { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.cat-group label { display: inline-flex; align-items: center; gap: .35rem; }
#search-form .actions { display: flex; gap: .6rem; align-self: center; }
.result-count { align-self: center; color: rgba(44,44,44,0.7); }

@media (max-width: 920px) {
  #search-form { grid-template-columns: 1fr 1fr; }
  #search-form .actions, .result-count { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #search-form { grid-template-columns: 1fr; }
}