/* =========================================================================
   SITE STYLES — feel free to change colors/fonts here.
   Change --brand below to re-color the whole site in one place.
   ========================================================================= */
:root {
  --brand: #1a3d8f;
  --brand-dark: #12296b;
  --accent: #e8b400;
  --ink: #1c1f26;
  --muted: #6b7280;
  --bg: #f7f8fa;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; display: block; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  /* Left/right only (not shorthand "padding: 0 20px") — a shorthand here
     would zero out top/bottom padding on any <section class="container">,
     silently overriding the "section { padding: 48px 0 }" rule below since
     a class selector beats a plain element selector. That's what was
     causing homepage sections (Popular Teams, Shop by Category, etc.) to
     butt right up against each other with no vertical breathing room. */
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- Header ---------- */
header.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 16px 20px;
  max-width: 1120px;
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  /* Text-logo properties kept here as a fallback (e.g. the alt text if the
     image ever fails to load) — safe to remove once you're sure the image
     logo is final. */
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.logo span { color: var(--accent); }
.logo img {
  /* Height-constrained, width auto — keeps the logo's own proportions no
     matter how wide the source file is. Bump this height to make the logo
     bigger/smaller; everything else in the header re-centers automatically. */
  height: 44px;
  width: auto;
}
nav.main-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
nav.main-nav a {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95rem;
}
nav.main-nav a:hover, nav.main-nav a.active { color: var(--brand); }
.cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--brand);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
}
.cart-badge {
  background: var(--accent);
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ---------- Header search ---------- */
.header-search {
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  max-width: 320px;
  margin: 0 4px;
}
.header-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px 0 0 999px;
  border-right: none;
  font-size: 0.9rem;
  background: var(--bg);
}
.header-search input:focus { outline: none; border-color: var(--brand); }
.header-search button {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0 999px 999px 0;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.header-search button:hover { background: var(--bg); }

/* ---------- Quick category links (homepage, under hero) ---------- */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  padding: 20px 0 0;
}
.quick-link {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.quick-link:hover { border-bottom-color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: white;
  padding: 34px 20px 40px;
  text-align: center;
  overflow-x: clip; /* safety net for the full-bleed image's negative margins below */
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  /* Bottom margin matches .hero's own 34px top padding (see above) so the
     headline sits centered in the blue space above the banner image,
     instead of hugging the image with barely any gap. */
  margin: 0 0 30px;
  letter-spacing: -0.02em;
}
.hero p {
  max-width: 560px;
  /* Top margin gives real breathing room under the banner image (was 6px,
     which — since adjacent block margins collapse to whichever is larger —
     was actually only leaving the image's own 14px margin-bottom of gap,
     reading as cramped). */
  margin: 32px auto 20px;
  color: #dbe4ff;
  font-size: 1.05rem;
}
/* Banner image — sits between the headline and the smaller text/button,
   and intentionally breaks out to the full width of the browser window
   (not just the boxed page content) via the negative-margin trick below,
   regardless of how narrow the .container it sits inside is. Drop your
   photo in as images/hero-banner.jpg and it shows automatically; until
   then, the gradient behind it shows through instead of a broken image
   icon (it's layered as a fallback, not a missing file). background-size:
   cover always preserves the photo's own proportions and crops any
   overflow rather than stretching it, so enlarging this never distorts
   the image — it just shows more of it, scaled up cleanly. */
.hero-banner-img {
  width: 100vw;
  max-width: 100vw;
  aspect-ratio: 16 / 7;
  margin: 4px calc(50% - 50vw) 14px;
  background-image: url('../images/hero-banner.jpg'), linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.02));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--brand-dark);
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn:hover { filter: brightness(1.05); }
.btn.secondary {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.6);
}
.btn.outline {
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.btn.small { padding: 8px 16px; font-size: 0.9rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Sections ---------- */
section { padding: 48px 0; }
.section-title {
  font-size: 1.6rem;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.section-sub { color: var(--muted); margin: 0 0 28px; }

.how-it-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.step .num {
  width: 32px; height: 32px;
  background: var(--brand);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin-bottom: 12px;
}

/* ---------- Category chips ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.chip {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--muted);
}
.chip.active { background: var(--brand); color: white; border-color: var(--brand); }

/* ---------- Team shop layout + season sidebar (team.html) ---------- */
.team-shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.team-shop-layout.has-sidebar {
  grid-template-columns: 1fr 220px;
}
@media (max-width: 800px) {
  .team-shop-layout.has-sidebar { grid-template-columns: 1fr; }
  .season-sidebar { order: -1; }
}
.season-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky;
  top: 20px;
}
.season-sidebar-title {
  font-size: 0.95rem;
  margin: 0 0 12px;
}
.season-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.season-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  color: var(--muted);
}
.season-pill.active { background: var(--brand); color: white; border-color: var(--brand); }

/* ---------- Product grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(20,30,60,0.08); }
.card .thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .body { padding: 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card .team { font-size: 0.8rem; color: var(--muted); }
.card .name { font-weight: 700; font-size: 1rem; }
.card .price { font-weight: 800; color: var(--brand); font-size: 1.1rem; margin-top: 6px; }
.card .card-footer { padding: 0 16px 16px; }
.badge-new {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: var(--brand-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 1;
}
.badge-comingsoon {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  background: #fff4d6;
  color: #8a5a00;
  border: 1px solid #e8b400;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.3;
  padding: 4px 9px;
  border-radius: 10px;
  z-index: 1;
}

/* On phones, auto-fill's 230px minimum only ever fits 1 card per row —
   force 2 across (like most jersey retailers) with tighter card spacing
   so it doesn't look cramped. */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .card .body { padding: 10px; gap: 3px; }
  .card .team { font-size: 0.72rem; }
  .card .name { font-size: 0.88rem; }
  .card .price { font-size: 1rem; margin-top: 4px; }
  .badge-new, .badge-comingsoon { font-size: 0.6rem; padding: 3px 7px; top: 6px; }
  .badge-new { left: 6px; }
  .badge-comingsoon { right: 6px; }
}

/* ---------- Product detail: "no supplier photo yet" notice.
   Shown only when a listing's `image` is null in products.js — a real,
   orderable product you just haven't sourced a photo for yet. */
.coming-soon-notice {
  background: #fff8e8;
  border: 1px solid #e8b400;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #6b4c00;
}
.coming-soon-notice strong {
  display: block;
  margin-bottom: 4px;
  color: #4d3800;
}

/* ---------- Product detail ---------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .product-detail { grid-template-columns: 1fr; }
}
.product-photo {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.product-photo:has(img) { padding: 0; }
.product-photo img { border-radius: var(--radius); }
.product-info .team { color: var(--muted); font-weight: 600; }
.product-info h1 { margin: 4px 0 12px; font-size: 1.8rem; }
.product-info .price { font-size: 1.6rem; font-weight: 800; color: var(--brand); margin-bottom: 16px; }
.field-group { margin-bottom: 18px; }
.field-group label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.9rem; }
select, input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
}
.checkbox-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.checkbox-row input { width: 18px; height: 18px; }
.checkbox-row label { font-weight: 600; font-size: 0.95rem; }
.qty-row { display: flex; align-items: center; gap: 12px; }
.qty-row input { width: 80px; }

/* ---------- Cart / order pages ---------- */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.cart-table th, .cart-table td {
  text-align: left;
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.cart-table input[type="number"] { width: 64px; padding: 6px; }
.link-btn {
  background: none; border: none; color: #b91c1c; cursor: pointer; font-weight: 700; font-size: 0.85rem;
}
.totals-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 360px;
  margin-left: auto;
}
.totals-box .row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; }
.totals-box .row.total { font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.totals-box .row.discount { color: #059669; }

/* Coupon code entry — sits above the totals rows inside .totals-box. */
.coupon-box { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.coupon-box label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
.coupon-box .coupon-row { display: flex; gap: 8px; }
.coupon-box input[type="text"] {
  flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem;
}
.coupon-box .btn.outline { padding: 9px 16px; font-size: 0.9rem; white-space: nowrap; }
.coupon-status { margin-top: 8px; font-size: 0.85rem; }
.coupon-status.success { color: #059669; }
.coupon-status.error { color: #b91c1c; }
.coupon-status .link-btn { font-size: 0.8rem; margin-left: 6px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* Full illustrated logo, used as a one-off "brand moment" rather than a
   functional nav element — the order-confirmation page and the empty-cart
   state right now. Keep it out of anywhere a customer is actively trying
   to get something done (checkout forms, populated cart/shop grids) —
   it's meant for a pause point in the flow, not a busy working page. */
.brand-mark {
  width: 180px;
  max-width: 60vw;
  margin: 0 auto 20px;
}
.brand-mark-small {
  width: 130px;
  margin-bottom: 16px;
}

.notice {
  background: #fff7e6;
  border: 1px solid #f2d38a;
  color: #7a5b00;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 32px 20px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 40px;
}

.badge-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
  font-weight: 600;
}
.footer-links a { color: var(--brand); }
.footer-links a:hover { text-decoration: underline; }

/* ---------- Simple content pages (FAQ, Size Guide, Policies) ---------- */
.content-page h1 { margin-bottom: 6px; }
.content-page .updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 32px; }
.content-page h2 { font-size: 1.2rem; margin-top: 32px; margin-bottom: 10px; }
.content-page p { margin-bottom: 14px; }
.content-page ul { margin: 0 0 14px 20px; }
.content-page li { margin-bottom: 6px; }
.content-page .placeholder {
  background: #fff7e6;
  border: 1px dashed #e0b84a;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  color: #7a5b00;
}
.size-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
}
.size-table th, .size-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: center;
  font-size: 0.9rem;
}
.size-table th { background: #f4f5f7; }
.faq-item { margin-bottom: 22px; }
.faq-item h2 { margin-top: 0; margin-bottom: 6px; }

/* ---------- Popular teams (homepage) ---------- */
.team-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px;
}
.popular-teams-block + .popular-teams-block { margin-top: 22px; }
.popular-teams-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.team-shortcut {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.team-shortcut:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,30,60,0.08); }
.team-shortcut .swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  margin: 0 auto 8px;
}

/* ---------- Mini-cart drawer (slide-out sidebar) ---------- */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 35, 0.45);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cart-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: 100%;
  background: var(--card);
  z-index: 100;
  box-shadow: -8px 0 32px rgba(15,20,35,0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-header h2 { margin: 0; font-size: 1.2rem; }
.cart-drawer-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
}
.cart-drawer-close:hover { color: var(--ink); }

.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 4px 22px;
}
.cart-drawer-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-item-info { flex: 1; }
.cart-drawer-item-name { font-weight: 700; font-size: 0.92rem; }
.cart-drawer-item-meta { color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
.cart-drawer-item-price { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.cart-drawer-item-remove {
  background: none;
  border: none;
  color: #b91c1c;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0;
  margin-top: 8px;
  display: block;
}

.cart-drawer-footer {
  padding: 18px 22px;
  border-top: 1px solid var(--border);
}
.cart-drawer-footer .row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; }
.cart-drawer-footer .row.total { font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; margin-bottom: 16px; }
.cart-drawer-footer .row.discount { color: #059669; }
.cart-drawer-actions { display: flex; gap: 10px; }
.cart-drawer-actions .btn { flex: 1; text-align: center; padding: 12px 14px; }
.cart-drawer-empty { text-align: center; padding: 60px 20px; color: var(--muted); }

/* Prevents background scroll while the drawer is open */
body.cart-drawer-locked { overflow: hidden; }