/* =========================================================================
   Reborne Products — tabbed product listing.
   Pill tabs (active = black/white, inactive = white/black). Latest products in
   a 4-col (desktop) / 2-col (mobile) grid + a "see more" button per tab.
   Container heading + side padding match the other reborne modules.
   ========================================================================= */

.reborne-products {
  width: 100%;
  margin: 2rem 0;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
}

.reborne-products__heading {
  margin: 0 0 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: left;
}

/* ---- Pill tabs -------------------------------------------------------- */

.reborne-products__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.reborne-products__pill {
  appearance: none;
  cursor: pointer;
  padding: .5rem 1.25rem;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
  transition: background .2s ease, color .2s ease;
}

.reborne-products__pill:hover {
  background: #111;
  color: #fff;
}

.reborne-products__pill.is-active {
  background: #111;
  color: #fff;
}

/* ---- Panes ------------------------------------------------------------ */

.reborne-products__pane[hidden] {
  display: none;
}

/* ---- Product grid: 4 cols desktop / 2 cols mobile -------------------- */

.reborne-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 1.5rem);
}

@media (max-width: 767px) {
  .reborne-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The miniature article fills its grid cell. */
.reborne-products__grid .product-miniature {
  width: 100%;
  margin: 0;
}

/* ---- "See more" button ----------------------------------------------- */

.reborne-products__more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.reborne-products__more-btn {
  display: inline-block;
  padding: .75rem 2.5rem;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.reborne-products__more-btn:hover {
  background: #111;
  color: #fff;
  text-decoration: none;
}