/* ============================================
   PRODUCTS PAGE — extends css/style.css
   ============================================ */

.page-hero{background:linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); padding:48px 0 40px; text-align:center;}
.page-hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem); margin-bottom:.8rem; color:var(--ink);}
.page-hero .hero-sub{max-width:640px; margin:0 auto; color:var(--muted);}

.cat-jump{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.6rem;
}
.cat-jump a{
  font-size:.8rem; font-weight:600; padding:.5rem 1rem; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); background:#fff; transition:all .15s ease;
}
.cat-jump a:hover, .cat-jump a:focus-visible{background:var(--blue); color:#fff; border-color:var(--blue);}

/* ---------- Category sections ---------- */
.category-section{padding:44px 0 8px; scroll-margin-top:82px; border-bottom:1px solid var(--line);}
.category-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;}
.category-head h2{font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink);}
.category-count{font-family:var(--font-mono); font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}

.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; padding-bottom:44px;}
@media (max-width:980px){ .pgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pgrid{grid-template-columns:1fr;} }

.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.pcard:hover{transform:translateY(-5px); box-shadow:0 18px 34px -20px rgba(30,41,59,.28);}
.pcard-thumb{aspect-ratio:1/1; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pcard-thumb img{width:100%; height:100%; object-fit:contain;}
.pcard-body{padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.55rem; flex:1;}
.pcard-name{font-family:var(--font-display); font-size:1rem; font-weight:700; line-height:1.3; color:var(--ink);}
.pcard-price{font-family:var(--font-mono); font-size:1.2rem; font-weight:700; color:var(--green-dark);}
.pcard-price .unit{font-family:var(--font-body); font-size:.72rem; font-weight:500; color:var(--muted); margin-left:.3rem;}
.pcard-price.ask{color:var(--muted); font-size:.88rem; font-family:var(--font-body); font-weight:600;}
.pcard-moq{font-size:.76rem; color:var(--muted);}

.pcard-specs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.55rem 0;}
.pcard-specs li{display:flex; justify-content:space-between; gap:.6rem; font-size:.78rem; padding:.2rem 0; color:var(--ink);}
.pcard-specs li span:first-child{color:var(--muted);}
.pcard-specs li span:last-child{font-weight:600; text-align:right;}

.pcard-actions{display:flex; gap:.55rem; margin-top:auto;}
.pcard-actions a{flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .5rem; border-radius:9px; font-size:.78rem; font-weight:700;}
.pcard-call{background:var(--blue); color:#fff;}
.pcard-call:hover{background:var(--blue-dark);}
.pcard-whatsapp{background:#25D366; color:#fff;}
.pcard-whatsapp:hover{background:#1fb958;}
.pcard-actions svg{width:15px; height:15px; flex-shrink:0;}

.pcard-more{font-size:.74rem; text-align:center; color:var(--muted); text-decoration:underline; margin-top:-.2rem;}
.pcard-more:hover{color:var(--blue);}

/* ---------- Bottom CTA ---------- */
.bottom-cta{background:var(--bg-soft2); color:var(--ink); padding:48px 0; border-top:1px solid var(--line);}
.bottom-cta-inner{display:flex; justify-content:space-between; align-items:center; gap:1.6rem; flex-wrap:wrap;}
.bottom-cta h2{font-size:1.4rem; margin-bottom:.4rem; color:var(--ink);}
.bottom-cta p{color:var(--muted); margin:0;}
.bottom-cta-actions{display:flex; gap:.8rem; flex-wrap:wrap;}

@media (max-width:600px){
  .bottom-cta-inner{text-align:center; justify-content:center;}
  .bottom-cta-actions{justify-content:center; width:100%;}
  .bottom-cta-actions .btn{flex:1; min-width:150px;}
}