/* Imagist Shop - Minimal theme override for Dujiaoka
   Only colors and basic styling. No layout changes. */

:root {
  --imagist-bg: #f7f5f2;
  --imagist-card: #ffffff;
  --imagist-primary: #6b7a65;
  --imagist-primary-strong: #5a6755;
  --imagist-primary-soft: #f0f2ec;
  --imagist-text: #292524;
  --imagist-muted: #78716c;
  --imagist-line: #e7e5e4;
}

/* Background */
html, body {
  background: var(--imagist-bg) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--imagist-text) !important;
}

/* Header / Navbar */
.navbar, header, .header {
  background: var(--imagist-bg) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hide logo column - center nav */
.header .col-md-3 { display: none !important; }
.header .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; }

/* Force nav to center (override Bootstrap me-auto) */
.header-right { display: flex !important; justify-content: center !important; }
.header-right .navbar { width: 100% !important; }
.header-right .container-fluid { justify-content: center !important; }
.navbar-collapse, .navbar-nav, .navbar-nav.me-auto {
  margin-right: 0 !important;
  margin-left: 0 !important;
  flex: none !important;
  justify-content: center !important;
}
.navbar-nav { gap: 8px !important; }

/* Hide footer */
.footer, footer { display: none !important; }

/* Hide page title and subtitle */
h3.text-center, .lead.text-center, .separator { display: none !important; }

/* Hide search box (top-right "商品名称") */
.navbar form, .navbar .d-flex,
#searchText, #searchBtn,
.navbar input.form-control,
.navbar button[type="button"] { display: none !important; }

/* Hide announcement card "公告" */
.jumbotron, .alert, .notice,
.card-body .jumbotron-fluid,
header + .container .card:has(.jumbotron),
section.main-container > .container > .row > .col-md-12 > .card:first-child:has(h4) {
  display: none !important;
}

/* Hide category tabs (全部/测试) - only in goods section */
.category .nav-pills, .category .nav-tabs, .category .btn-group[role="group"],
.category-tabs, .goods-group-tab { display: none !important; }

/* Compress empty announcement/category containers above products */
.notice, .notice-area,
.main-container > .container > .row > .col-md-12 > .card:has(.jumbotron),
section.category, .goods-group-name, div.category {
  display: none !important;
}
section.main-container { padding-top: 0 !important; margin-top: 0 !important; }
/* Real DOM: main-container > div.goods > div.container > div.goods-list
   The .category block is hidden above. Push goods-list down so first card
   has breathing room below the sticky header. */
section.main-container > .goods > .container { padding-top: 24px !important; }
.goods-list { margin-top: 0 !important; padding-top: 0 !important; }
.main-container .row > .col-md-12:has(> .card .jumbotron) { display: none !important; }

/* Mobile: force nav visible + card layout tweaks */
@media (max-width: 991px) {
  .navbar-collapse { display: flex !important; }
  .navbar-toggler { display: none !important; }
  .navbar-nav { flex-direction: row !important; justify-content: center !important; gap: 8px !important; }
}

/* Mobile: title and stock on same row */
@media (max-width: 767px) {
  .goods .card .card-body {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
  }
  .goods .card .card-body .card-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .goods .card .card-body h6.mt-2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    align-self: center !important;
    margin: 0 !important;
  }
  .goods .card .card-body .btn-outline-success {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .goods .card .card-body a.btn-primary,
  .goods .card .card-body a.fr {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}

/* Nav buttons - active = green */
.nav-link {
  color: var(--imagist-muted) !important;
  border-radius: 16px !important;
  border: 1px solid var(--imagist-line) !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
}
.nav-link:hover {
  color: var(--imagist-primary) !important;
  background: var(--imagist-primary-soft) !important;
  border-color: var(--imagist-primary) !important;
}
.nav-link.active {
  color: #fff !important;
  background: var(--imagist-primary) !important;
  border-color: var(--imagist-primary) !important;
}

/* Cards */
.card {
  background: var(--imagist-card) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04) !important;
}

/* Force product grid to 4 equal columns on desktop */
@media (min-width: 768px) {
  .goods .row-cols-md-5 {
    --bs-columns: 4 !important;
  }
  .goods .row-cols-md-5 > .col {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}
.goods .card img.card-img-top, .goods .card .card-img-top,
.goods-card img, .goods .card img[alt] {
  height: 120px !important;
  max-height: 120px !important;
  object-fit: contain !important;
  padding: 12px !important;
}
.goods .card .card-body { padding: 12px 16px !important; }

/* Layout: title (full row) | stock (full row) | price + buy (same row)
   Scoped to .goods so it doesn't affect order-search / buy / other pages. */
.goods .card .card-body {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 6px 8px !important;
  align-items: center !important;
}
.goods .card .card-body .card-title {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .goods .card .card-body h6.mt-2,
  .goods .card .card-body h6:has(small.text-muted) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 12px !important;
  }
}
.goods .card .card-body .btn-outline-success {
  grid-column: 1 !important;
  grid-row: 3 !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
}
.goods .card .card-body a.btn-primary, .goods .card .card-body a.fr {
  grid-column: 2 !important;
  grid-row: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  float: none !important;
  margin: 0 !important;
}

/* Buttons */
.btn-primary {
  background: var(--imagist-primary) !important;
  border-color: var(--imagist-primary) !important;
  color: #fff !important;
  border-radius: 16px !important;
}
.btn-primary:hover {
  background: var(--imagist-primary-strong) !important;
  border-color: var(--imagist-primary-strong) !important;
}
.btn-outline-primary, .btn-outline-success {
  border-radius: 16px !important;
}
.btn-outline-primary {
  color: var(--imagist-primary) !important;
  border-color: var(--imagist-primary) !important;
}
.btn-outline-primary:hover {
  background: var(--imagist-primary) !important;
  color: #fff !important;
}

/* Form inputs - just rounded, don't touch width */
.form-control {
  border-radius: 16px !important;
  border-color: var(--imagist-line) !important;
  background: var(--imagist-bg) !important;
}
.form-control:focus {
  border-color: var(--imagist-primary) !important;
  box-shadow: 0 0 0 3px rgba(107,122,101,0.15) !important;
}

/* Order search page: narrow the card and center it */
body[class*="order"] section.main-container .card.m-3,
section.main-container > .container > .row > .col-12 > .card.m-3,
section.main-container .card.m-3:has(.buy-form) {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Buy detail page: narrow the card, shrink the giant image */
section.main-container .card.mt-3:has(.buy-form),
section.main-container .card.mt-3.mb-3 {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Hide "商品描述" card on buy page */
section.main-container .card.mt-3.mb-3 {
  display: none !important;
}
section.main-container .card.mt-3 img.card-img-top {
  max-height: 200px !important;
  height: 200px !important;
  width: auto !important;
  object-fit: contain !important;
  padding: 16px !important;
  display: block !important;
  margin: 0 auto !important;
}