@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap');

.hgpc-wrap{
  --hgpc-green:#063d2e;
  --hgpc-green-2:#135842;
  --hgpc-orange:#f05a3f;
  --hgpc-muted:#97a0ae;
  --hgpc-border:#dfe8e4;
  font-family:'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  width:100%;
  max-width:1460px;
  margin:0 auto;
  padding:54px 18px 50px;
  background:#fff;
  color:var(--hgpc-green);
}

.hgpc-head{text-align:center;margin-bottom:34px}
.hgpc-head h2{
  margin:0;
  color:var(--hgpc-green);
  font-size:clamp(30px,3.1vw,48px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.hgpc-star-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:22px;
  color:var(--hgpc-orange);
}
.hgpc-star-line span{
  display:block;
  width:74px;
  height:2px;
  background:var(--hgpc-orange);
}
.hgpc-star-line i{
  font-style:normal;
  font-size:24px;
  line-height:1;
}

.hgpc-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin:0 auto 31px;
}
.hgpc-tab{
  min-width:150px;
  height:51px;
  border:1.5px solid var(--hgpc-green);
  background:#fff;
  color:var(--hgpc-green);
  border-radius:999px;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}
.hgpc-tab:hover,
.hgpc-tab.active{
  background:var(--hgpc-green);
  color:#fff;
  transform:translateY(-1px);
}

.hgpc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px;
  align-items:stretch;
}
.hgpc-wrap[data-columns="4"] .hgpc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hgpc-wrap[data-columns="2"] .hgpc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.hgpc-card{
  background:#fff;
  border-radius:16px;
  padding:14px 14px 30px;
  box-shadow:0 8px 27px rgba(0,0,0,.09);
  border:1px solid rgba(6,61,46,.04);
  overflow:hidden;
  transition:.22s ease;
}
.hgpc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.13);
}
.hgpc-card.is-hidden{display:none}

.hgpc-img{
  width:100%;
  aspect-ratio: 16 / 9.3;
  border-radius:10px;
  overflow:hidden;
  background:#edf2f0;
}
.hgpc-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hgpc-body{padding:22px 14px 0}
.hgpc-body h3{
  margin:0;
  text-align:center;
  color:var(--hgpc-green);
  font-size:clamp(23px,1.8vw,30px);
  font-weight:900;
  line-height:1.25;
}
.hgpc-price{
  margin-top:10px;
  text-align:center;
  color:var(--hgpc-orange);
  font-size:20px;
  font-weight:900;
}
.hgpc-under{
  width:58px;
  height:5px;
  background:var(--hgpc-orange);
  border-radius:999px;
  margin:8px auto 26px;
}

.hgpc-info{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:28px;
}
.hgpc-row{
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:12px;
  color:#6c7584;
  font-size:17px;
  font-weight:700;
}
.hgpc-icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--hgpc-green-2);
  color:#fff;
  border-radius:50%;
}
.hgpc-icon svg{
  width:17px;
  height:17px;
  fill:currentColor;
}
.hgpc-label{white-space:nowrap}
.hgpc-row strong{
  color:var(--hgpc-muted);
  font-size:18px;
  font-weight:800;
  text-align:right;
}

.hgpc-btn{
  height:59px;
  border-radius:7px;
  background:var(--hgpc-green-2);
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  font-size:21px;
  font-weight:900;
  text-decoration:none !important;
  letter-spacing:.2px;
  transition:.2s ease;
}
.hgpc-btn:hover{
  background:var(--hgpc-green);
  color:#fff !important;
  transform:translateY(-1px);
}
.hgpc-btn span{
  font-size:28px;
  line-height:1;
}

.hgpc-empty{
  grid-column:1/-1;
  text-align:center;
  padding:32px;
  background:#f6faf8;
  border-radius:14px;
  color:var(--hgpc-green);
  font-weight:800;
}

@media (max-width:1200px){
  .hgpc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hgpc-wrap[data-columns="4"] .hgpc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hgpc-wrap{padding:38px 14px}
  .hgpc-tabs{gap:10px;margin-bottom:24px}
  .hgpc-tab{min-width:96px;height:42px;font-size:16px}
  .hgpc-grid,
  .hgpc-wrap[data-columns="4"] .hgpc-grid,
  .hgpc-wrap[data-columns="2"] .hgpc-grid{grid-template-columns:1fr}
  .hgpc-card{padding:10px 10px 24px}
  .hgpc-body{padding:18px 10px 0}
  .hgpc-row{font-size:15px;grid-template-columns:30px 1fr auto}
  .hgpc-row strong{font-size:15px}
  .hgpc-btn{height:52px;font-size:18px}
}