/* ============================================================
   PARCELLING LOVE — PRODUCT LIST
   Header/footer inherit the finalized global homepage styles.
   ============================================================ */

.products-page {
  background:#fbf6ee;
  color:#542711;
  overflow:hidden;
}

/* Intro */
.products-intro {
  max-width:1400px;
  margin:0 auto;
  padding:170px 6% 62px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:60px;
}

.products-kicker {
  display:inline-block;
  color:#b87827;
  font:500 11px/1 Arial,sans-serif;
  letter-spacing:.18em;
}

.products-intro h1 {
  margin:13px 0 0;
  color:#542711;
  font:500 clamp(50px,5vw,74px)/.9 var(--serif);
  letter-spacing:-.025em;
}

.products-intro h1 em,
.products-note h2 em {
  color:#b87827;
  font:400 1em/1 var(--script);
  letter-spacing:0;
}

.products-intro > p {
  max-width:430px;
  margin:0 0 4px;
  color:#6c4934;
  font:15px/1.8 Arial,sans-serif;
}

/* Toolbar */
.products-toolbar {
  max-width:1400px;
  margin:0 auto;
  padding:0 6% 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e5cfb1;
}

.product-filters {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.product-filter {
  border:1px solid #d7b989;
  background:transparent;
  color:#6b3b1e;
  padding:9px 17px;
  cursor:pointer;
  border-radius:30px;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.2s ease;
}

.product-filter:hover,
.product-filter.active {
  background:#542711;
  border-color:#542711;
  color:#fffaf3;
}

.product-count {
  color:#987354;
  font:11px/1 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Cards */
.product-grid {
  max-width:1400px;
  margin:0 auto;
  padding:28px 6% 80px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.product-card {
  position:relative;
  background:#fffdf9;
  border:1px solid #e5cfb1;
  border-radius:16px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(84,39,17,.09);
}

.product-image {
  position:relative;
  aspect-ratio:1.12/1;
  overflow:hidden;
  background:#f2e3cf;
}

.product-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .45s ease;
}

.product-card:hover .product-image img {
  transform:scale(1.045);
}

.product-badge {
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  min-width:49px;
  min-height:49px;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  border-radius:50%;
  background:#c78a2b;
  color:#fffaf3;
  font:700 8px/1.05 Arial,sans-serif;
  letter-spacing:.04em;
}

.product-badge.new {
  min-width:49px;
  min-height:49px;
}

.product-heart {
  position:absolute;
  right:13px;
  top:13px;
  width:36px;
  height:36px;
  border:1px solid rgba(84,39,17,.18);
  border-radius:50%;
  background:rgba(255,250,243,.9);
  color:#542711;
  cursor:pointer;
  font-size:19px;
  line-height:1;
}

.product-content {
  padding:20px 20px 21px;
}

.product-category {
  color:#b87827;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.15em;
}

.product-content h2 {
  margin:9px 0 7px;
  color:#542711;
  font:500 23px/1.08 var(--serif);
}

.product-content p {
  min-height:43px;
  margin:0;
  color:#785a46;
  font:13px/1.55 Arial,sans-serif;
}

.product-bottom {
  margin-top:20px;
  padding-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #ead9c2;
}

.product-bottom strong {
  color:#b87827;
  font:700 18px/1 Arial,sans-serif;
}

.product-order {
  padding:11px 14px;
  border:1px solid #b87827;
  background:#542711;
  color:#542711;
  cursor:pointer;
  font:500 9px/1 Arial,sans-serif;
  letter-spacing:.1em;
  transition:.2s ease;
}

.product-order span {
  margin-left:8px;
  font-size:13px;
}

.product-order:hover {
  background:#542711;
  border-color:#542711;
  color:#fffaf3;
}

/* Make the fifth card visually intentional rather than leaving an awkward gap. */
.product-card:last-child {
  grid-column:auto;
}

/* Bottom CTA */
.products-note {
  margin:0;
  padding:80px 24px 88px;
  text-align:center;
  background:#f0dfc9;
  border-top:1px solid #e4cba9;
}

.products-note h2 {
  margin:13px 0 12px;
  color:#542711;
  font:500 52px/.92 var(--serif);
}

.products-note p {
  max-width:510px;
  margin:0 auto 25px;
  color:#6b4934;
  font:14px/1.7 Arial,sans-serif;
}

.products-note-button {
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:13px 21px;
  border:1px solid #542711;
  background:#542711;
  color:#fffaf3;
  text-decoration:none;
  font:500 10px/1 Arial,sans-serif;
  letter-spacing:.11em;
}

.products-note-button:hover {
  background:#b87827;
  border-color:#b87827;
}

/* Tablet */
@media(max-width:1050px) {
  .products-grid {
    grid-template-columns:repeat(3,1fr);
  }

  .products-intro {
    padding-left:4%;
    padding-right:4%;
  }

  .products-toolbar,
  .product-grid {
    padding-left:4%;
    padding-right:4%;
  }
}

/* Mobile */
@media(max-width:780px) {
  .products-intro {
    padding:125px 22px 45px;
    display:block;
  }

  .products-intro h1 {
    font-size:50px;
  }

  .products-intro > p {
    margin-top:24px;
  }

  .products-toolbar {
    padding:0 22px 18px;
    display:block;
  }

  .product-filters {
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:3px;
  }

  .product-filter {
    flex:0 0 auto;
  }

  .product-count {
    display:block;
    margin-top:16px;
  }

  .product-grid {
    padding:22px 18px 60px;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .product-content {
    padding:15px 13px 15px;
  }

  .product-content h2 {
    font-size:19px;
  }

  .product-content p {
    min-height:0;
    font-size:12px;
  }

  .product-bottom {
    display:block;
    margin-top:15px;
  }

  .product-bottom strong {
    display:block;
    margin-bottom:11px;
  }

  .product-order {
    width:100%;
  }

  .product-badge {
    top:9px;
    left:9px;
    min-width:43px;
    min-height:43px;
    font-size:7px;
  }

  .product-heart {
    top:9px;
    right:9px;
    width:32px;
    height:32px;
  }

  .products-note {
    padding:60px 22px 68px;
  }

  .products-note h2 {
    font-size:45px;
  }
}

@media(max-width:430px) {
  .product-grid {
    grid-template-columns:1fr;
  }

  .product-image {
    aspect-ratio:1.25/1;
  }
}


/* PRODUCTS V2 — no hero
   Header/footer remain unchanged. */

.products-toolbar {
  padding-top: 155px;
}

.product-order {
  background: #542711;
  border-color: #542711;
  color: #fffaf3;
}

.product-order:hover {
  background: #b87827;
  border-color: #b87827;
  color: #fffaf3;
}

@media (max-width:780px) {
  .products-toolbar {
    padding-top: 105px;
  }
}