/* Shared visual rules for the storefront and account pages. */
:root {
  --site-ink: #252a30;
  --site-muted: #626b75;
  --site-border: #e1e5e9;
  --site-accent: #c93429;
  --site-radius: 8px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--site-ink);
  line-height: 1.65;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1; }
h1, h2, h3, h4, h5, h6 { line-height: 1.35; overflow-wrap: anywhere; }
a, button, input { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 3px;
}
.btn {
  min-height: 44px;
  padding: .6rem 1.2rem;
  border-radius: var(--site-radius);
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.btn-sm { min-height: 36px; padding: .4rem .8rem; }
.btn-lg, .btn-xl { min-height: 48px; font-size: 1rem; padding: .8rem 1.5rem; }
.form-control {
  min-height: 44px;
  height: auto;
  padding: .65rem .85rem;
  border-color: var(--site-border);
  border-radius: var(--site-radius);
  font-size: 1rem;
  line-height: 1.4;
}
.form-control:focus { border-color: var(--site-accent); box-shadow: 0 0 0 3px rgba(201,52,41,.1); }
.card { border-color: var(--site-border); border-radius: var(--site-radius); }
.alert { border-radius: var(--site-radius); overflow-wrap: anywhere; }
.sb-navbar { border-bottom: 1px solid var(--site-border); box-shadow: none; }
.sb-navbar .navbar-brand { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.sb-navbar .navbar-brand img { flex-shrink: 0; }
.sb-navbar .nav-link { font-size: .9rem; white-space: nowrap; }
.sb-navbar .ai-entry-button { border-radius: var(--site-radius); margin: .5rem .75rem .5rem 0; box-shadow: none; }
.nav-template-search { flex: 1 1 150px; }
.nav-template-search button { width: 44px; min-height: 44px; flex-shrink: 0; border-radius: var(--site-radius); }
.navbar-toggler { min-width: 44px; min-height: 44px; border-radius: var(--site-radius); }
.dropdown-menu { border-radius: var(--site-radius); }
.dropdown-item { min-height: 40px; display: flex; align-items: center; gap: .4rem; }
.listing-header { margin-bottom: 1.5rem; }
.listing-header h1, main.container > h1 { font-size: 2rem; margin-bottom: .75rem; }
.listing-header .lead, main.container > .lead { color: var(--site-muted); font-size: 1rem; line-height: 1.75; }
.item-preview .item-preview-img { border: 1px solid var(--site-border); border-radius: var(--site-radius); }
.item-preview .item-preview-img img { display: block; margin-top: 0 !important; }
.item-preview .item-preview-title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.item-preview-description { font-size: .875rem; color: var(--site-muted); }
.general-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem 0; }
.general-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; border-radius: var(--site-radius); }
.footer-main { line-height: 1.8; }
.footer-main nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-main nav a { margin-right: 0 !important; }
.footer-main p:last-child { margin-bottom: 0; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  .sb-navbar .navbar-collapse { flex-wrap: wrap; }
  .sb-navbar .navbar-nav.mr-auto { flex: 1 0 100%; }
  .sb-navbar .nav-link { padding-left: .5rem; padding-right: .5rem; }
}
@media (max-width: 991.98px) {
  .sb-navbar .navbar-collapse { padding-top: .5rem; }
  .sb-navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
  .nav-template-search { max-width: none; width: 100%; }
  .sb-navbar .ai-entry-button { margin-right: 0; }
}
@media (max-width: 575.98px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .listing-header h1, main.container > h1 { font-size: 1.5rem; }
  .btn-lg, .btn-xl { padding: .75rem 1rem; }
  .main > .container > .card { margin-top: 2rem !important; margin-bottom: 2rem !important; }
  .main .card-body .row { row-gap: .5rem; }
  .general-pagination { gap: .3rem; }
  .footer-main { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}