:root{--maroon:#7a0026;--maroon-dark:#5e001d;--text:#0f172a;--bg:#ffffff}
*{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
html,body{height:100%}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
main{flex:1 0 auto}
.footer{flex-shrink:0;background:#0f172a;color:#cbd5e1}
a{color:var(--maroon)} a:hover{color:var(--maroon-dark)}
.topbar{background:#fafafa;border-bottom:1px solid #eee;font-size:.92rem}
.searchbar{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid #eee}
.search-input{height:48px;border-radius:999px}
.categorybar{background:#fff;border-bottom:1px solid #eee}
.nav-cat > li{position:relative}
.nav-cat > li > a{padding:.8rem 1rem;display:block;text-decoration:none;color:#334155;font-weight:600}
.nav-cat > li:hover{background:#fff1f4}
.dropdown-menu-cat{position:absolute;left:0;top:100%;min-width:260px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);display:none;padding:.5rem}
.nav-cat > li:hover .dropdown-menu-cat{display:block}
.hero-carousel .carousel-item{height:360px}
.hero-carousel .carousel-item img{object-fit:cover;height:100%;width:100%;border-radius:16px}
.card-product{border:0;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card-product img{height:220px;object-fit:cover;border-top-left-radius:16px;border-top-right-radius:16px}
.badge-soft{background:#fff0f4;color:var(--maroon);border:1px solid #ffd1df}
.kicker{letter-spacing:.18em;text-transform:uppercase;color:#64748b;font-size:.8rem;font-weight:700}
.promise-card{border:1px solid #eee;border-radius:16px;padding:18px;background:#fff}
.view-toggle .btn{border-radius:999px}
.list-view .card-product img{height:160px}
.sticky-pt{padding-top:76px} /* compensate sticky search header */
/* make the category bar and its dropdown sit above the page */
.categorybar {
  position: relative;
  z-index: 1040;
}

/* ensure the dropdown floats above sticky headers/carousels/modals */
.dropdown-menu-cat {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 260px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  display: none;
  padding: .5rem;
  z-index: 1055; /* higher than sticky header (1030) */
}

.nav-cat > li { position: relative; }
.nav-cat > li:hover .dropdown-menu-cat { display: block; }

/* optional: keep the carousel lower in the stacking context */
.hero-carousel { position: relative; z-index: 1; }
.text-maroon { color: #7a0026 !important; }
.btn-maroon {
  background-color: #7a0026;
  color: #fff;
  border: none;
}
.btn-maroon:hover { background-color: #5e001d; color: #fff; }
.btn-outline-maroon {
  border: 1px solid #7a0026;
  color: #7a0026;
}
.btn-outline-maroon:hover {
  background-color: #7a0026;
  color: #fff;
}
.searchbar { position: sticky; top: 0; z-index: 1030; }