html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Remove template sticky-footer hacks */

body {
  margin-bottom: 0;
}

:root {
  --navy: #2b2a6e;
  --accent: #ff6a00;
  --light: #f8f9fb;
}

html { font-size: 16px; }

body {
  color: #222;
  background: #fff;
}

.text-navy { color: var(--navy); }
.bg-navy { background: var(--navy); }
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover,
.btn-outline-accent:hover {
  filter: brightness(0.95);
  color: #fff;
}
.btn-outline-accent {
  border-color: var(--accent);
  color: var(--accent);
}

/* Navbar */
header .navbar { border-bottom: 3px solid var(--accent); }
.navbar .nav-link {
  color: var(--navy);
  font-weight: 600;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--accent); }
.brand-logo { height: 60px; }
@media (max-width: 575.98px) {
  .brand-logo { height: 42px; }
}

/* Hero */
.hero-section { padding-top: 2rem; padding-bottom: 2rem; }
.object-fit-cover { object-fit: cover; }

/* Footer remains in normal flow */
footer { background: var(--light); }

/* Image strip */
.image-strip { overflow: hidden; background: #fff; }
.image-strip .strip-viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  position: relative;
}
.image-strip .strip-track {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
  will-change: transform;
  animation: strip-scroll 50s linear infinite;
}
.image-strip .strip-track.paused { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .image-strip .strip-track { animation: none; }
}

@keyframes strip-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-66.666%); }
}

.strip-item { flex: 0 0 auto; }
.strip-tile {
  width: 260px;
  height: 200px;
  background: #fff;
  border: 1px solid #e7e7ea;
  border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  text-align: center;
}
.strip-tile img {
  width: 100%;
  height: 140px;
  object-fit: contain;
}
.strip-tile figcaption {
  font-size: .9rem;
  color: var(--navy);
  font-weight: 600;
  margin-top: .5rem;
}

/* Product cards */
.product-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: #fff;
}