/* Categories page: feature cards + inline expandable product sections */
.categories-page-hero{
  padding-bottom:38px;
}

.categories-feature-section{
  padding-top:28px;
}

.categories-feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.category-feature-card{
  position:relative;
  min-height:226px;
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  background-image:var(--category-bg);
  background-size:cover;
  background-position:center center;
  box-shadow:0 18px 42px rgba(8,19,56,.15);
}

.category-feature-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(18,34,74,.92) 0%, rgba(18,34,74,.72) 42%, rgba(217,111,77,.38) 100%);
  z-index:-1;
}

.category-feature-content{
  position:relative;
  z-index:1;
  min-height:226px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:28px 30px;
  color:#fff;
}

.category-feature-content h2{
  color:#fff;
  font-size:32px;
  line-height:1.1;
  margin:0 0 12px;
}

.category-feature-content p{
  max-width:560px;
  margin:0 0 18px;
  color:#fff;
  font-size:16px;
  line-height:1.55;
}

.category-browse-btn{
  background:#fff;
  color:#10224f;
  border:none;
}

.category-browse-btn:hover{
  background:#fff1ea;
  color:#d96f4d;
}

.category-products-wrap{
  margin-top:34px;
}

.category-products-panel{
  animation:categoryPanelIn .28s ease;
}

.category-products-panel[hidden]{
  display:none !important;
}

.category-products-head{
  margin-bottom:28px;
}

.categories-empty-state{
  text-align:center;
  padding:40px 24px;
}

.categories-empty-state h3{
  margin-bottom:10px;
}

@keyframes categoryPanelIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:980px){
  .categories-feature-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .category-feature-card,
  .category-feature-content{
    min-height:250px;
  }

  .category-feature-content{
    padding:24px 20px;
  }

  .category-feature-content h2{
    font-size:28px;
  }

  .category-feature-content p{
    font-size:15px;
  }
}