:root {
  --brand: #1c3d3a;
  --brand-dark: #122725;
  --accent: #ff7a1a;
  --accent-dark: #e0660a;
}

html { overflow-x: hidden; }
body { background-color: #f7f8f7; overflow-x: hidden; }

.bg-brand { background-color: var(--brand) !important; }
.top-bar { background-color: var(--brand-dark); color: #cfe3df; }
.btn-accent, .badge.bg-accent {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.btn-accent:hover { background-color: var(--accent-dark) !important; }
a.link-light:hover { color: var(--accent) !important; }

.accordion-button.no-caret::after { display: none; }

.category-nav .nav-link { color: #222; font-weight: 500; padding: 0.6rem 0.9rem; }
.category-nav .nav-link:hover { color: var(--accent); }

/* ---- Hero ---- */
.hero-banner {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
}
.hero-banner h1 { font-size: 1.6rem; }
@media (min-width: 768px) {
  .hero-banner h1 { font-size: 2.5rem; }
}

/* ---- Category tiles ---- */
.category-tile {
  text-decoration: none;
  color: inherit;
  display: block;
  background: #fff;
  border-radius: 0.75rem;
  padding: 1rem 0.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  height: 100%;
}
.category-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); color: inherit; }
.category-tile .icon-wrap {
  width: 56px; height: 56px; margin: 0 auto 0.5rem;
  border-radius: 50%; background: #eef4f2;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--brand);
}

/* ---- Product cards ---- */
.product-card {
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }
.product-card .product-img-wrap {
  aspect-ratio: 1 / 1;
  background: #f1f3f2;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-card .product-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-card .badge-corner { position: absolute; top: 0.5rem; left: 0.5rem; }
.product-card .card-body { padding: 0.75rem; display: flex; flex-direction: column; flex-grow: 1; }
.product-card .product-title {
  font-size: 0.92rem; font-weight: 500; color: #222; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.product-price .current { font-weight: 700; color: var(--brand); }
.product-price .original { text-decoration: line-through; color: #999; font-size: 0.85em; margin-left: 0.35rem; }
.star-rating { color: #f5a623; font-size: 0.85rem; }

/* ---- Section headers ---- */
.section-title {
  font-weight: 700;
  border-left: 4px solid var(--accent);
  padding-left: 0.6rem;
  margin-bottom: 1rem;
}

/* ---- Horizontal scroll row on mobile ---- */
.scroll-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-row .scroll-item { flex: 0 0 46%; scroll-snap-align: start; }
@media (min-width: 576px) { .scroll-row .scroll-item { flex-basis: 30%; } }
@media (min-width: 992px) { .scroll-row { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; } .scroll-row .scroll-item { flex-basis: auto; } }

/* ---- Sticky mobile add-to-cart bar ---- */
.sticky-atc-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #e2e2e2;
  padding: 0.6rem 1rem;
  z-index: 1030;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
@media (min-width: 992px) { .sticky-atc-bar { display: none; } }

/* The bar is position:fixed, so it overlaps whatever is underneath it in
   the viewport regardless of DOM order — including the footer. Reserve
   space at the end of the page so the footer's last line (and anything
   else) can still be scrolled into view above the bar, not hidden under it. */
@media (max-width: 991.98px) {
  body:has(.sticky-atc-bar) { padding-bottom: 76px; }
}

/* Tap targets */
.btn, .dropdown-item { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.category-tile { min-height: 44px; }
.category-nav .nav-link { min-height: 44px; display: inline-flex; align-items: center; }