* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.55; }
a { color: var(--brand); text-underline-offset: .2em; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: #fff; border: 2px solid #000; padding: .5rem .75rem; z-index: 1000; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }

.site-header { border-bottom: 1px solid var(--border); }
.header-top { background: #f7faf7; border-bottom: 1px solid var(--border); }
.top-inner { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s4); align-items: center; padding: .5rem 0; }
.motto { margin: 0; color: var(--muted); font-size: .9rem; }
.social, .tools ul, .main-nav .menu, .ext-shops ul, .top-links .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .7rem; align-items: center; }
.social a, .top-links a, .tools a, .main-nav a, .ext-shops a { text-decoration: none; color: inherit; }

.header-middle { border-bottom: 1px solid var(--border); }
.middle-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s4); padding: .9rem 0; }
.site-title { margin: 0; font-size: 1.45rem; }
.site-title a { color: inherit; text-decoration: none; }
.search-form { display: flex; gap: .5rem; }
.search-field { width: 100%; min-height: 44px; border: 1px solid #cfd7d1; border-radius: .55rem; padding: .55rem .7rem; }
.search-submit { min-height: 44px; border: 1px solid #27451b; background: var(--brand); color: #fff; border-radius: .55rem; padding: .55rem .85rem; }
.count { display: inline-flex; min-width: 1.2rem; height: 1.2rem; border-radius: 999px; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-size: .72rem; padding: 0 .25rem; }
.mobile-toggle { display: none; min-height: 44px; border: 1px solid #cfd7d1; background: #fff; border-radius: .55rem; padding: .5rem .7rem; }

.header-categories { background: var(--brand); color: #fff; }
.categories-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s4); }
.main-nav .menu { flex-wrap: wrap; }
.main-nav .menu > li > a { display: inline-flex; min-height: 44px; align-items: center; padding: .6rem .55rem; border-radius: .4rem; }
.main-nav .menu > li > a:hover { background: rgba(255,255,255,.16); }
.ext-shops a { display: inline-flex; min-height: 44px; align-items: center; padding: .6rem .5rem; }

.mobile-overlay, .mobile-panel { display: none; }

.site-content { padding: 2rem 0; }
.prose > * { margin-block: 1rem; }
.prose p { max-width: 70ch; }

.site-footer { border-top: 1px solid var(--border); padding: 2rem 0 1rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.footer-grid h2 { margin-top: 0; font-size: 1rem; }
.footer-grid .menu, .footer-bottom .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer-grid a, .footer-bottom a { text-decoration: none; color: inherit; }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; display: grid; grid-template-columns: 1fr auto; gap: .8rem; color: var(--muted); font-size: .9rem; }
.footer-bottom p { margin: 0; }
.footer-bottom .menu { display: flex; gap: .8rem; }

@media (max-width: 64rem) {
  .top-inner { grid-template-columns: 1fr; gap: .5rem; }
  .middle-inner { grid-template-columns: auto 1fr auto; }
  .tools { display: none; }
  .mobile-toggle { display: inline-flex; }
  .header-categories { display: none; }

  .mobile-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 998; }
  .mobile-panel { position: fixed; top: 0; right: 0; width: min(92vw, 24rem); height: 100vh; z-index: 999; background: #fff; border-left: 1px solid var(--border); padding: 1rem; overflow-y: auto; }
  .mobile-panel[hidden], .mobile-overlay[hidden] { display: none !important; }
  body.mobile-open { overflow: hidden; }
  .mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
  .mobile-close { min-height: 44px; min-width: 44px; border: 1px solid #cfd7d1; border-radius: .55rem; background: #fff; }
  .mobile-nav .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
  .mobile-nav a { min-height: 44px; display: flex; align-items: center; text-decoration: none; color: #111; padding: .45rem .55rem; border-radius: .45rem; }
  .mobile-nav a:hover { background: #f3f4f6; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { grid-template-columns: 1fr; }
}