/* ============================================================
   shop.css — category chips, product grid/cards, sort, filters
   ============================================================ */

/* ── CATEGORY CHIPS ───────────────────────────────────────── */
.nt-chips {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 18px;
  scrollbar-width: none;
}
.nt-chips::-webkit-scrollbar { display: none; }
.nt-chip {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: var(--nt-radius-pill);
  background: var(--nt-white);
  border: 1px solid rgba(26, 21, 35, 0.08);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--nt-ink-soft);
}
.nt-chip.is-active {
  background: var(--nt-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: rgba(124, 58, 237, 0.3) 0px 6px 16px;
}

/* ── TOOLBAR (count + sort) ──────────────────────────────── */
.nt-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 18px;
  font-size: 13.5px;
  color: var(--nt-ink-soft);
  font-weight: 600;
}
.nt-shop-toolbar select {
  border: none;
  background: transparent;
  font-weight: 700;
  color: var(--nt-ink);
  font-family: var(--f-body);
}

/* ── PRODUCT GRID ─────────────────────────────────────────── */
ul.products,
.nt-product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 783px) {
  ul.products,
  .nt-product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* ── PRODUCT CARD ─────────────────────────────────────────── */
ul.products li.product,
.nt-product-card {
  background: var(--nt-white);
  border-radius: 20px;
  box-shadow: var(--nt-card-shadow);
  overflow: hidden;
  position: relative;
  padding: 0 0 14px;
}
ul.products li.product a { display: block; }

.nt-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #F4F2F9;
}
.nt-product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.nt-product-card__flag {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--nt-gradient);
  padding: 4px 8px;
  border-radius: 6px;
}
.nt-product-card__body { padding: 12px 14px 0; }
.nt-product-card__brand {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--nt-ink-faint);
}
.nt-product-card__name {
  font-size: 14.5px;
  font-weight: 700;
  margin: 2px 0 6px;
  color: var(--nt-ink);
}
.nt-product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nt-product-card__price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
}

/* Bestseller strip on shop page */
.nt-trending .nt-section-head { margin-top: 8px; }
.nt-trending-scroller {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.nt-trending-scroller::-webkit-scrollbar { display: none; }
.nt-trending-scroller .nt-product-card { min-width: 160px; flex-shrink: 0; }

/* ── DESKTOP SIDEBAR (category drill-in) ─────────────────── */
.nt-shop-layout { display: block; }
.nt-shop-sidebar { display: none; }
@media (min-width: 783px) {
  .nt-shop-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
  }
  .nt-shop-sidebar {
    display: block;
    position: sticky;
    top: 90px;
  }
  .nt-shop-sidebar ul { list-style: none; margin: 0; padding: 0; }
  .nt-shop-sidebar li a {
    display: block;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nt-ink-soft);
  }
  .nt-shop-sidebar li a.is-active,
  .nt-shop-sidebar li a:hover {
    background: var(--nt-pill-bg);
    color: var(--nt-purple-dark);
  }
}