html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #fff;
}

/* ── Outdoors Ramsey colour palette ────────────────────────── */
:root {
  --or-brown: #5c4033;
  --or-brown-light: #7a5c4f;
  --or-dark: #222;
  --or-grey: #f5f5f5;
  --or-border: #ddd;
  --or-accent: #c8553d;
  --or-link: #0056b3;
}

/* ── Links ──────────────────────────────────────────────────── */
a {
  color: var(--or-link);
  text-decoration: none;
}
a:hover {
  color: var(--or-brown);
  text-decoration: underline;
}

/* ── Top navigation bar ─────────────────────────────────────── */
.navbar-or {
  background: #fff;
  border-bottom: 1px solid var(--or-border);
}
.navbar-or .navbar-brand img {
  height: 40px;
}
.navbar-or .nav-link {
  color: var(--or-brown) !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.75rem 1rem;
}
.navbar-or .nav-link:hover {
  color: var(--or-dark) !important;
  text-decoration: none;
}
.navbar-or .nav-link.active {
  color: var(--or-dark) !important;
  border-bottom: 2px solid var(--or-brown);
}

/* ── Hero banner ────────────────────────────────────────────── */
.hero {
  background: var(--or-grey);
  color: var(--or-dark);
  border-bottom: 1px solid var(--or-border);
}
.hero h1 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ── Cards (product listing) ────────────────────────────────── */
.card {
  border: 1px solid var(--or-border);
  border-radius: 0;
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transform: none;
}
.card .card-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  color: var(--or-dark);
}
.card .card-footer {
  border-top: 1px solid var(--or-border);
}

/* ── Prices ─────────────────────────────────────────────────── */
.price {
  color: var(--or-dark);
  font-weight: 700;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background-color: #222;
  border-color: #222;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  border-radius: 0;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.btn-primary:active {
  background-color: #444 !important;
  border-color: #444 !important;
}

.btn-outline-dark {
  background-color: #fff;
  border-color: #222;
  color: #222;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.btn-outline-dark:hover,
.btn-outline-dark.active,
.btn-dark {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(92, 64, 51, 0.25);
}

/* ── Category filter pills ──────────────────────────────────── */
.filter-pills .btn {
  border-radius: 0;
}

/* ── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 0;
  border-color: var(--or-border);
}
.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #555;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.85rem;
  background: none;
  padding: 0;
}
.breadcrumb a {
  color: var(--or-brown);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge.bg-secondary {
  background-color: var(--or-brown) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  border-radius: 0;
}
.badge.bg-light {
  border-radius: 0;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer-or {
  background: var(--or-dark);
  color: #ccc;
  font-size: 0.85rem;
}
.footer-or h6 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}
.footer-or a {
  color: #ccc;
}
.footer-or a:hover {
  color: #fff;
  text-decoration: none;
}

/* ── Detail page ────────────────────────────────────────────── */
.detail-title {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Section headings ───────────────────────────────────────── */
h5 {
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ── Admin table ────────────────────────────────────────────── */
.table th {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Admin buttons ──────────────────────────────────────────── */
.admin-btn-action {
  background-color: #222;
  border-color: #222;
  color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.admin-btn-action:hover { background-color: #000; border-color: #000; color: #fff; }

.admin-btn-secondary {
  background-color: #fff;
  border-color: #222;
  color: #222;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.admin-btn-secondary:hover { background-color: #f5f5f5; border-color: #000; color: #000; }

.admin-btn-danger {
  background-color: #fff;
  border-color: #c00;
  color: #c00;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.admin-btn-danger:hover { background-color: #c00; border-color: #c00; color: #fff; }

/* Status filter pills — black/white, active = filled */
.status-filter .btn {
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background-color: #fff;
  border-color: #222;
  color: #222;
}
.status-filter .active-filter {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-success {
  background-color: #f0f7f0;
  border-color: #d4e8d4;
  color: #2d5a2d;
  border-radius: 0;
}

/* ── Misc ───────────────────────────────────────────────────── */
.shadow-sm {
  box-shadow: none !important;
}