/* =========================
   Base
========================= */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f3f3f3;
  color:#222;
}
h1,h2,h3{color:#0033a0}
a{color:inherit}

/* =========================
   Header / Nav
========================= */
.site-header{
  background:#0033a0;
  color:#fff;
  border-bottom:5px solid #d40000;
}
.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-title{
  color:#fff;
  font-weight:800;
  font-size:1.5rem;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.tagline{opacity:.85;font-size:.9rem}
.nav a{
  color:#fff;
  text-decoration:none;
  margin-left:14px;
  font-weight:700;
  font-size:.95rem;
}
.nav a:hover{text-decoration:underline}

/* =========================
   Layout
========================= */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px 40px;
}
.pagehead{margin:6px 0 14px}

.content-with-sidebar{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
}
.sidebar{
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:14px;
  height:fit-content;
}

/* =========================
   Hero / Search / Buttons
========================= */
.hero{
  background:#fff;
  border:1px solid #d6d6d6;
  border-radius:10px;
  padding:22px;
  margin:10px 0 24px;
}
.hero p{line-height:1.5}

.search{
  display:flex;
  gap:10px;
  margin:14px 0;
}
.search input{
  flex:1;
  padding:12px;
  border:1px solid #cfcfcf;
  border-radius:8px;
}

.btn{
  display:inline-block;
  background:#d40000;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 16px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{background:#aa0000}
.btn-secondary{background:#1f3d7a}
.btn-secondary:hover{background:#162c58}
.btn-danger{background:#a40000}
.btn-danger:hover{background:#7f0000}
.btn-small{padding:8px 12px;border-radius:8px;font-size:.9rem}

/* =========================
   Cards / Grids / Lists
========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:14px;
  text-decoration:none;
  color:#222;
}
.card:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}

.list{
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
}
.list-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-top:1px solid #eee;
  align-items:flex-start;
}
.list-row:first-child{border-top:none}

.list-title{
  font-weight:800;
  text-decoration:none;
  color:#222;
}
.list-title:hover{text-decoration:underline}

.muted{color:#666}
.desc{margin-top:6px;line-height:1.4;color:#333}
.list-desc{
  margin-top:4px;
  font-size:.95rem;
  color:#444;
  line-height:1.4;
}

/* =========================
   Filters / Forms / Notices
========================= */
.filters .filter-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:12px;
}
.filter-form input,.filter-form select{
  padding:10px;
  border:1px solid #cfcfcf;
  border-radius:8px;
}

.form{
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:14px;
  display:grid;
  gap:10px;
  max-width:640px;
}
.form input,.form textarea,.form select{
  padding:10px;
  border:1px solid #cfcfcf;
  border-radius:8px;
}
.form label{display:grid;gap:6px;font-weight:700}
.form .small{font-size:.85rem}

.notice{
  padding:12px 14px;
  border-radius:10px;
  margin:12px 0;
}
.notice.success{background:#e9ffe9;border:1px solid #b6ffb6}
.notice.error{background:#ffe9e9;border:1px solid #ffb6b6}

/* =========================
   Footer
========================= */
.site-footer{background:#111;color:#ddd;padding:18px 16px}
.fineprint{
  max-width:1100px;
  margin:0 auto;
  line-height:1.4;
  font-size:.85rem;
  color:#bbb;
}

/* =========================
   Pagination
========================= */
.pager{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  color:#444;
}

/* =========================
   Events
========================= */
.month-head{margin:18px 0 10px}
.event-top-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}

.event-list{display:grid;gap:14px;margin-bottom:18px}
.event-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:14px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
}
.event-media{
  background:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
}
.event-media img{width:100%;height:auto;display:block}
.event-placeholder{
  font-weight:900;
  color:#0033a0;
  letter-spacing:2px;
  padding:30px;
}
.event-body{padding:12px 14px}
.event-title{margin:0 0 6px;color:#0033a0}
.event-meta{
  display:grid;
  gap:4px;
  color:#444;
  font-size:.95rem;
  margin-bottom:8px;
}
.event-desc{line-height:1.45;color:#333;margin:8px 0 10px}
.event-actions{display:flex;gap:10px;flex-wrap:wrap}

/* =========================
   Home sidebar
========================= */
.home-grid{
  display:grid;
  grid-template-columns:1fr;   /* one column */
  gap:18px;
}
.home-sidebar{
  background:#fff;
  border:1px solid #ddd;
  border-radius:10px;
  padding:14px;
  height:fit-content;
}
.mini-event{border-top:1px solid #eee;padding:10px 0}
.mini-event:first-child{border-top:none}
.mini-event .t{font-weight:900;color:#222;text-decoration:none}
.mini-event .t:hover{text-decoration:underline}
.mini-event .m{color:#666;font-size:.9rem;margin-top:4px}

/* =========================
   Merch / Garage Finds
========================= */

/* Grid */
.merch-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.merch-grid-large{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/* Base merch card (legacy-safe) */
.merch-card{
  background:#fafafa;
  border:1px solid #e4e4e4;
  border-radius:10px;
  padding:10px;
  text-decoration:none;
  color:#222;
  position:relative;
}

/* Legacy image rule (kept for older markup) */
.merch-card img{
  width:100%;
  height:auto;
  border-radius:8px;
  margin-bottom:8px;
}

/* Merch v2 – modern card layout */
.merch-card.merch-card-v2{
  display:grid;
  grid-template-rows:auto 1fr;
  padding:0;              /* overrides legacy padding */
  overflow:hidden;
  background:#fff;
}

/* IMPORTANT: fixed thumbnail height so Amazon images never render “full size” */
.merch-card.merch-card-v2 .merch-thumb{
  position:relative;
  width:100%;
  height:220px;           /* change height if you want */
  overflow:hidden;
  background:#f7f7f7;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Thumbnail image fill */
.merch-card.merch-card-v2 .merch-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;       /* use contain if you prefer no crop */
  display:block;
  margin:0;
  border-radius:0;
}

/* HARD OVERRIDE: defeat the legacy .merch-card img rules in all browsers/caches */
.merch-card.merch-card-v2 img{
  height:100% !important;
  margin-bottom:0 !important;
  border-radius:0 !important;
}

/* No-image placeholder */
.merch-noimg{
  font-weight:900;
  letter-spacing:2px;
  color:#0033a0;
}

/* “View” button overlay */
.merch-zoom{
  position:absolute;
  right:10px;
  bottom:10px;
  border:0;
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  cursor:pointer;
  background:rgba(0,0,0,.65);
  color:#fff;
}
.merch-card-v2:hover .merch-zoom{background:rgba(0,0,0,.8)}

/* Info area */
.merch-info{
  padding:10px 10px 12px;
  display:grid;
  gap:8px;
}
.merch-title{
  font-weight:900;
  font-size:.95rem;
  line-height:1.25;
  color:#222;
}
.merch-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* Pills */
.pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  background:#eee;
  font-weight:900;
  font-size:.75rem;
  color:#333;
}
.pill-blue{
  background:#0033a0;
  color:#fff;
}

/* CTA */
.merch-cta{
  margin-top:2px;
  width:max-content;
  padding:7px 10px;
  border-radius:8px;
  background:#d40000;
  color:#fff;
  font-weight:900;
  font-size:.85rem;
}
.merch-card-v2:hover .merch-cta{background:#aa0000}

/* =========================
   Image Modal (Lightbox)
========================= */
.img-modal{display:none}
.img-modal.open{display:block; position:fixed; inset:0; z-index:9999}
.img-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.75)}
.img-modal-content{
  position:relative;
  max-width:900px;
  margin:6vh auto;
  background:#fff;
  border-radius:10px;
  padding:12px;
  width:calc(100% - 24px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.img-modal-close{
  position:absolute;
  top:10px;
  right:10px;
  border:0;
  background:#111;
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.img-modal-title{font-weight:900; margin:4px 0 10px; color:#222}
#imgModalImg{width:100%; height:auto; display:block; border-radius:8px}

/* =========================
   Responsive
========================= */
@media (max-width: 920px){
  .content-with-sidebar{grid-template-columns:1fr}
  .home-grid{grid-template-columns:1fr}
  .nav a{margin-left:10px}
  .event-card{grid-template-columns:1fr}
}

/* Store-like product listings */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:14px;
  margin-top:10px;
}

.product-card{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  background:#fff;
  border:1px solid #e4e4e4;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:#222;
}

.product-card:hover{
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.product-img{
  position:relative;
  background:#f7f7f7;
  border-right:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  min-height:140px;
}

.product-img img{
  width:100%;
  height:120px;        /* fixed display height */
  object-fit:contain;  /* RESCALE, no crop */
  display:block;
}

.product-noimg{
  font-weight:900;
  letter-spacing:2px;
  color:#0033a0;
}

.product-zoom{
  position:absolute;
  right:10px;
  bottom:10px;
  border:0;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
  background:rgba(0,0,0,.65);
  color:#fff;
}

.product-info{
  padding:12px 12px 14px;
  display:grid;
  gap:8px;
}

.product-title{
  font-weight:900;
  font-size:1rem;
  line-height:1.25;
  color:#222;
}

.product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.product-desc{
  color:#333;
  line-height:1.35;
  font-size:.95rem;
}

.product-actions{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.product-cta{
  padding:8px 12px;
  border-radius:10px;
  background:#d40000;
  color:#fff;
  font-weight:900;
  font-size:.9rem;
}

.product-card:hover .product-cta{
  background:#aa0000;
}

.product-hint{
  font-size:.85rem;
}

@media (max-width: 520px){
  .product-card{grid-template-columns:1fr}
  .product-img{border-right:none;border-bottom:1px solid #eee}
  .product-img img{height:160px}
}