/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 #header{ background: rgb(143, 4, 4) !important; }


/* Menu bar text color */
.main-menu__tree__link {
  color: #04105d !important;
}

/* Hover state */
.main-menu__tree__link:hover {
  color: #f4f0f0 !important;
}

/* Active / current page */
.shop.current .main-menu__tree__link {
  color: #f3efef !important;
}

 :root{
  --accent:#d71920; /* change to your brand */
}

.ms-container{
  max-width:1200px;
  margin:0 auto;
}

.ms-hero{
  position:relative;
  margin-bottom:50px;
}
.ms-hero img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.ms-hero-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#fff;
}
.ms-hero-text h1{
  font-size:48px;
  margin-bottom:10px;
  text-transform:uppercase;
}
.ms-hero-text p{
  font-size:18px;
}

.ms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.ms-card{
  background:#fff;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  transition:all .25s ease;
  text-align:center;
}
.ms-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 25px rgba(0,0,0,.18);
}

.ms-card-img{overflow:hidden;}

.ms-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  transition:transform .4s ease;
}
.ms-card:hover img{
  transform:scale(1.08);
}

.ms-card h3{
  margin:18px 10px 10px;
  font-size:20px;
  text-transform:uppercase;
}

.ms-card p{
  padding:0 18px 0px;
  color:#555;
  min-height:70px;
}

.ms-btn{
  display:inline-block;
  margin:10px 0 22px;
  padding:12px 22px;
  background:#000;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:600;
  transition:all .25s ease;
}
.ms-btn:hover{
  background:var(--accent);
}

@media(max-width:768px){
  .ms-hero img{height:260px}
  .ms-hero-text h1{font-size:28px}
}