body {
  background: linear-gradient(to bottom, #f5b6b0 0%, #f8bfba 14%, #fac9c5 30%, #fcddd9 50%, #feeeed 74%, #ffffff 100%) top/100% 560px no-repeat, #ffffff;
}

.breadcrumb {
  background: transparent;
  border-bottom: none;
}

.cat-hero {
  background: transparent;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 2rem 1.6rem;
}
.cat-hero .breadcrumb-inline {
  font-size: .82rem;
  color: #7a3a3a;
  margin-bottom: .6rem;
}
.cat-hero .breadcrumb-inline a { color: #7a3a3a; text-decoration: none; }
.cat-hero .breadcrumb-inline a:hover { color: #3a1010; text-decoration: underline; }
.cat-hero .breadcrumb-inline .sep { margin: 0 .4rem; }

.cat-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #1a1a1a;
  font-family: 'Open Sans', serif;
  margin: 0;
}

.cat-controls {
  max-width: 1200px;
  margin: 1.4rem auto .6rem;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.cat-count { font-size: .85rem; color: #555; }
.cat-count strong { color: #c0665e; }
.cat-sort {
  padding: .5rem 2rem .5rem .9rem;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: .88rem;
  color: #333;
  background: #fff;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  cursor: pointer;
}

.cat-grid {
  max-width: 1200px;
  margin: 0 auto 5rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

.cat-grid .prod-card-img { aspect-ratio: 3/4; border-radius: 10px; }
.cat-grid .prod-card-name { font-size: .95rem; }
.cat-grid .prod-card-price { font-size: .92rem; margin-bottom: .2rem; }
.cat-grid .prod-card-btn { padding: .5rem 1.1rem; font-size: .82rem; }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .cat-grid { grid-template-columns: 1fr; gap: 1rem; padding: 0 1rem; }
  .cat-grid .prod-card-name,
  .cat-grid .prod-card-subtitle,
  .cat-grid .prod-card-price { text-align: center; }
  .cat-grid .prod-card-btn { display: block; margin: 0 auto; }
  .cat-hero { padding: 1rem 1rem .7rem; text-align: center; }
  .cat-controls { padding: 0 1rem; }
  .cat-title { font-size: 1.4rem; }
}