.catalog {
     /* Pastel kids palette */
     --yellow: #FFE68A;
     --blue: #A8D8FF;
     --pink: #FFD1DC;
     --mint: #C9F2E6;
     --lavender: #E6D9FF;
     --navy: #1C2541;
     --text: #1f2a44;
     --muted: #5c6b80;
     --bg: #ffffff;
     --chip: #f7fafc;
     --radius: 16px;
     --shadow: 0 10px 30px rgba(28, 37, 65, .08);
     --lg-bg: linear-gradient(135deg,var(--mint),var(--blue));
     --barik-900:#0b2142; --barik-800:#0f2d5a; --barik-700:#12376e; --barik-600:#164583;
    --barik-500:#1b5fb3; --barik-300:#66a7e6; --ink-700:#1f2937; --ink-400:#9ca3af;
    --ink-200:#e5e7eb; --radius:12px; --shadow:0 6px 16px rgba(11,33,66,.08);
    --gap:12px; --gap-lg:16px;
 }

 img {
     max-width: 100%;
     display: block
 }

 /* Layout */
 .catalog {
     max-width: 1200px;
     margin: 0 auto;
     padding: 18px;
     display: grid;
     grid-template-columns: 280px 1fr;
     gap: 24px
 }

 /* Sidebar */
 .filter-panel {
     position: sticky;
     top: 84px;
     align-self: start;
     background: #fff;
     border: 1px solid #eef3fa;
     border-radius: 20px;
     box-shadow: var(--shadow);
     padding: 16px
 }

 .filter-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px
 }

 .filter-title {
     font-family: Poppins, sans-serif;
     font-weight: 700;
     font-size: 18px
 }

 .clear-all {
     font-size: 12px;
     color: #6b7a90;
     background: #f3f7fd;
     border: 0;
     padding: 6px 10px;
     border-radius: 999px;
     cursor: pointer
 }

 .filter-group {
     border-top: 1px dashed #edf1f7;
     padding-top: 12px;
     margin-top: 12px
 }

 .filter-group:first-of-type {
     border-top: 0;
     padding-top: 0;
     margin-top: 0
 }

 .fg-title {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 700;
     font-family: Poppins, sans-serif;
     font-size: 14px;
     margin-bottom: 10px
 }

.catalog .fg-title .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--barik-500);
  box-shadow: var(--shadow-blue);
}

 .catalog .fg-title.blue .dot {
     background: var(--blue);
     box-shadow: 0 0 0 3px rgba(168, 216, 255, .55)
 }

 .catalog .fg-title.pink .dot {
     background: var(--pink);
     box-shadow: 0 0 0 3px rgba(255, 209, 220, .5)
 }

 /* Age chips */
 .catalog .age-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 8px
 }

 .catalog .chip {
     padding: 8px 12px;
     border-radius: 999px;
     border: 1px solid #e8eef6;
     background: var(--chip);
     font-size: 13px;
     cursor: pointer;
     transition: all .2s
 }

 .catalog .chip:hover {
     transform: translateY(-1px)
 }

 .catalog .chip.active {
     background: var(--lg-bg);
     border-color: transparent;
     box-shadow: 0 6px 18px rgba(255, 230, 138, .35)
 }

 /* Price */
 .catalog .price {
     display: grid;
     gap: 10px
 }

 .catalog .price .range {
     accent-color: var(--barik-500);
 }

 .catalog .price .preview {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     color: var(--muted)
 }

 .catalog .price .bubble {
     font-weight: 700;
     background: var(--lg-bg);
     padding: 6px 10px;
     border-radius: 10px
 }

 /* Checkbox list */
 .checklist {
     display: grid;
     gap: 8px;
     max-height: 220px;
     overflow: auto;
     padding-right: 4px
 }

 .catalog .check {
     display: flex;
     align-items: center;
     gap: 10px
 }

 .catalog .check input {
     width: 16px;
     height: 16px
 }

 /* Rating */
 .catalog .rating-option {
     display: flex;
     align-items: center;
     gap: 6px;
     cursor: pointer
 }

 .catalog .star {
     font-size: 16px;
     color: #ffb84d
 }

 /* Active filter chips */
 .catalog .active-filters {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 10px
 }

 .catalog .af-chip {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #f1f5ff;
     border: 1px solid #dfe8ff;
     border-radius: 999px;
     padding: 6px 10px;
     font-size: 12px
 }

 .catalog .af-chip i {
     cursor: pointer
 }

 /* Sort & result info */
 .toolbar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 12px;
     justify-content: space-between;
     margin-bottom: 12px
 }

 .catalog .sort {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .catalog .select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     border: 1px solid #e6edf7;
     background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5 7l5 5 5-5" stroke="%236b7a90" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center;
     background-size: 18px;
     border-radius: 12px;
     padding: 8px 34px 8px 12px
 }

 .catalog .result-count {
     color: var(--muted);
     font-size: 14px
 }

 /* Grid */
 .catalog .product-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px
 }

 .catalog .card {
     position: relative;
     background: #fff;
     border: 1px solid #edf2fb;
     border-radius: 20px;
     box-shadow: var(--shadow);
     overflow: hidden;
     transition: transform .2s, box-shadow .2s
 }

 .catalog .card:hover {
     transform: translateY(-4px);
     box-shadow: 0 14px 34px rgba(28, 37, 65, .12)
 }

 .catalog .card-media {
/*
     aspect-ratio: 1/1;
     background: var(--lg-bg);
     display: grid;
     place-items: center
*/
 }

 .catalog .card-media .thumb {
     width: 100%;
     filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .08));
     padding: 0;
     height: auto;
 }
 

 .catalog article .badge {
     position: absolute;
     left: 12px;
     top: 12px;
     background: linear-gradient(135deg, var(--pink), var(--yellow));
     color: #333;
     font-weight: 700;
     font-size: 12px;
     padding: 6px 10px;
     border-radius: 999px ;
     -webkit-border-radius: 999px;
     -moz-border-radius: 999px;
     -ms-border-radius: 999px;
     -o-border-radius: 999px;
     z-index: 9;
}

 .catalog .fav {
     position: absolute;
     right: 12px;
     top: 12px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #fff;
     border: 1px solid #e8eef6;
     cursor: pointer
 }

 .catalog .fav:hover {
     animation: wobble .6s ease-in-out
 }

 @keyframes wobble {
     0% {
         transform: rotate(0)
     }

     25% {
         transform: rotate(-8deg)
     }

     50% {
         transform: rotate(8deg)
     }

     100% {
         transform: rotate(0)
     }
 }

 .catalog .card-body {
     padding: 14px
 }

 .catalog .title {
     font-weight: 700;
     font-family: Poppins, sans-serif;
     line-height: 1.2;
     min-height: 44px
 }

 .catalog .meta {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--muted);
     font-size: 12px;
     margin: 6px 0 8px
 }

 .catalog .price-row {
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .catalog .price {
     font-weight: 800;
     font-family: Poppins, sans-serif
 }

 .catalog .btn:hover {
     transform: translateY(-2px)
 }

 /* Mobile filter button */
 .filter-toggle {
     display: none;
     position: sticky;
     top: 62px;
     z-index: 25;
     background: #fff;
     padding: 10px 0
 }

 .filter-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #fff;
     border: 1px solid #dfe7f3;
     border-radius: 999px;
     padding: 10px 14px;
     font-weight: 700
 }

 /* Offcanvas for mobile */
 .offcanvas {
     position: fixed;
     inset: 0;
     z-index: 50;
     background: rgba(8, 15, 30, .35);
     display: none
 }

 .offcanvas.open {
     display: block
 }

 .offcanvas .sheet {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 86%;
     max-width: 360px;
     background: #fff;
     border-right: 1px solid #e9eff7;
     border-top-right-radius: 18px;
     border-bottom-right-radius: 18px;
     overflow: auto;
     box-shadow: var(--shadow);
     animation: slideIn .25s ease
 }

 @keyframes slideIn {
     from {
         transform: translateX(-16px);
         opacity: 0
     }

     to {
         transform: translateX(0);
         opacity: 1
     }
 }

 .catalog .sheet-head {
     position: sticky;
     top: 0;
     background: #fff;
     padding: 14px;
     border-bottom: 1px solid #eef3fa;
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 /* Responsive */
 @media (max-width: 1024px) {
     .catalog {
         grid-template-columns: 250px 1fr
     }
 }

 @media (max-width: 860px) {
     .catalog {
         grid-template-columns: 1fr
     }

     .filter-panel {
         display: none
     }

     .filter-toggle {
         display: block
     }

     .catalog .product-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media (max-width: 520px) {
     .catalog .product-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .catalog {
         padding: 0;
     }

     .title {
         min-height: auto
     }
 }
.category-pagination {
    display:grid;
    place-items:center;
    margin:26px 0 10px;
}

aside.nav {
  position: relative;
}
.nav-card {
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px;
  position: sticky;
  top: 86px;
}
.nav-title {
  font-weight: 700;
  color: var(--barik-700);
  margin: 6px 0 10px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  color: #16223a;
  transition: background 0.2s, transform 0.12s;
}
aside .nav-list li a .badge {
  font-size: 11px;
  color: #586a8a;
  background: #edf3ff;
  padding: 2px 8px;
  border-radius: 999px;
}
.nav-list li a:hover {
  background: linear-gradient(90deg, #eef5ff 0%, #ffffff 100%);
  transform: translateX(2px);
  text-decoration: none;
}
.nav-group {
  margin-top: 10px;
}
.nav-group .group-title {
  font-size: 12px;
  color: #6b7a99;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 12px 6px 4px;
}
.barik-search{margin:16px 0;}
  .barik-search .search-grid{
    display:grid;
    gap:5px;
    grid-template-columns:1fr;
    padding:0;
  }

  /* ≥768px: layout sejajar */
  @media (min-width:768px){
    .barik-search .search-grid{
      grid-template-columns:2fr 1.3fr 1.5fr auto;
      align-items:end;
      gap:15px;
      padding: 18px;
    }
  }

  .barik-search .field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .barik-search .form-control,
  .barik-search select,
  .barik-search input[type="text"]{
    width:100%;
    height:44px;
    padding:0 14px;
    border:1px solid var(--ink-200);
    border-radius:10px;
    font-size:14px;
    outline:none;
    transition:.2s;
  }

  .barik-search .form-control:focus{
    border-color:var(--barik-600);
    box-shadow:0 0 0 3px rgba(22,69,131,.15);
  }

  /* Checkbox layout: 2 rows */
  .barik-search .field-options{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    padding:4px 0;
  }
  @media(min-width:768px){
    .barik-search .field-options{
      grid-template-columns:1fr;
      grid-template-rows:auto auto;
    }
  }

  .barik-search .checkbox-inline{
    margin: 0;
    font-size:13px;
    transition:.2s;
    cursor:pointer;
  }

  .barik-search .checkbox-inline:hover{background:#f9fafb;}

  /* Button sejajar */
  .barik-search .actions{
    display:flex;
    align-items:end;
  }

  .barik-search #button-search{
    height:44px;
    padding:0 22px;
    border:none;
    border-radius:10px;
    font-weight:600;
    color:#fff;
    background:linear-gradient(180deg,var(--barik-600),var(--barik-700));
    box-shadow:var(--shadow);
    cursor:pointer;
    transition:.15s ease;
  }
  .barik-search #button-search:active{transform:translateY(1px);}
  @media (min-width:576px){
    .barik-search .actions{justify-self:end;}
    .barik-search .full{grid-column:1 / -1;}
  }

  /* ≥992px: 4 kolom seperti layout awal (search / category / options / button) */
  @media (min-width:992px){
    .barik-search .search-grid{
      grid-template-columns: 2fr 1.3fr 1.4fr auto;
    }
  }

  @media screen and (max-width:768x){
    .barik-search .search-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr;
  padding: 0;
}
  }