/* COMBO PACKAGE PRODUCTS */
.section--combo-package-products{
  background:#ffffff;
  padding:10px 0 28px;
}

/* grid */
.cpp .cpp-grid{
  display:grid; gap:16px;
  grid-template-columns:1fr 1fr;
}
@media (max-width:980px){ .cpp .cpp-grid{ grid-template-columns:1fr; } }

/* card */
.cpp .cpp-card{
  overflow:hidden;
  padding:0;
  display:flex; flex-direction:column;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05);
}

/* media */
.cpp .cpp-media{ position:relative; overflow:hidden; margin:0; padding:0; border-radius:12px 12px 0 0; }
.cpp .cpp-media img{
  display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:21/9;
  transform:scale(1); transition:transform .45s cubic-bezier(.22,.61,.36,1); will-change:transform;
}
.cpp .cpp-card:hover .cpp-media img,
.cpp .cpp-media:hover img{ transform:scale(1.10); }

/* softer, slower shine on image (hover) */
.cpp .cpp-media:not(.noimg)::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  transform:translateX(-120%);
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.48) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.32; z-index:2;
}
.cpp .cpp-card:hover .cpp-media::before,
.cpp .cpp-media:hover::before{ animation:cpp-media-shine 2.2s ease; }
@keyframes cpp-media-shine{ to{ transform:translateX(120%);} }

.cpp .cpp-media.noimg{ background:linear-gradient(135deg,#eaf2ee 0,#f7faf8 100%); min-height:170px; }

/* top badge + chip */
.cpp .cpp-badge{
  position:absolute; top:10px; left:10px; z-index:3;
  background:#ff7f2a; color:#fff; font-weight:900; font-size:12px;
  padding:6px 10px; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.cpp .cpp-badge--orange{ background:#ff7f2a; }
.cpp .cpp-chip{
  position:absolute; right:10px; bottom:10px; z-index:3;
  background:#0b3d1b; color:#e7f5ee; border:1px solid rgba(255,255,255,.18);
  font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px;
}

/* body */
.cpp .cpp-body{ padding:14px 16px 10px; flex:1; }
.cpp .cpp-title{ margin:0 0 4px; font-weight:900; color:#0f172a; font-size:16px; }
.cpp .cpp-sub{ color:#0f5a22; font-weight:700; font-size:13px; margin-bottom:6px; }
.cpp .cpp-desc{ margin:0 0 10px; color:#46555f; font-size:13px; line-height:1.45; }
.cpp .cpp-mini{ margin:8px 0 6px; font-weight:900; font-size:13px; color:#0f172a; }

/* list */
.cpp .cpp-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.cpp .cpp-list li{ padding-left:18px; position:relative; color:#3f4f58; font-size:13px; line-height:1.45; }
.cpp .cpp-list li:before{
  content:""; position:absolute; left:0; top:.5em; width:12px; height:12px; border-radius:50%; border:2px solid #0c612c;
}
.cpp .cpp-list li:after{
  content:""; position:absolute; left:3px; top:.75em; width:6px; height:3px; border-left:2px solid #0c612c; border-bottom:2px solid #0c612c; transform:rotate(-45deg);
}

/* finance band */
.cpp .cpp-finance{ margin-top:10px; border:1px solid #dcefe5; background:#eaf7ef; border-radius:8px; padding:8px 10px; }
.cpp .cpp-finance-top{ display:flex; align-items:center; gap:8px; color:#0c3f20; }
.cpp .cpp-finance-note{ font-size:11.5px; color:#43615a; margin-top:4px; }

/* actions */
.cpp .cpp-actions{ display:flex; gap:10px; align-items:center; padding:12px 16px 16px; }
.cpp .btn-compact{ font-size:12px; padding:8px 12px; border-radius:8px; }
.cpp .cpp-actions .btn svg{ width:14px; height:14px; margin-right:6px; display:block; } /* no global fill override */

/* GREEN primary button */
.section--combo-package-products .cpp-actions .btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; font-weight:800; color:#fff; text-decoration:none!important;
  transition: transform .08s ease, box-shadow .18s ease, filter .15s ease;
}
.section--combo-package-products .cpp-actions .btn--primary{
  background:linear-gradient(180deg,#16a34a 0%,#15803d 100%); border-color:#166534;
  box-shadow:0 10px 18px rgba(22,163,74,.22), inset 0 -2px 0 rgba(0,0,0,.10);
}
.section--combo-package-products .cpp-actions .btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(34,197,94,.18), 0 14px 28px rgba(22,163,74,.32), inset 0 -2px 0 rgba(0,0,0,.10);
}

/* ORANGE call — locked gradient; walang “pumuputi” */
.section--combo-package-products .cpp-actions .btn--outline{
  background:linear-gradient(180deg,#f97316 0%,#ea580c 100%); border-color:#c2410c; color:#fff;
  box-shadow:0 10px 18px rgba(234,88,12,.28), inset 0 -2px 0 rgba(0,0,0,.10);
}
.section--combo-package-products .cpp-actions .btn--outline:hover,
.section--combo-package-products .cpp-actions .btn--outline:focus,
.section--combo-package-products .cpp-actions .btn--outline:active{
  background:linear-gradient(180deg,#f97316 0%,#ea580c 100%)!important;
  color:#fff!important; border-color:#c2410c!important; filter:none!important;
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(249,115,22,.18), 0 14px 28px rgba(234,88,12,.36), inset 0 -2px 0 rgba(0,0,0,.10);
}

/* shine sweep for buttons — softer + slower */
.section--combo-package-products .cpp-actions .btn::before{
  content:""; pointer-events:none; position:absolute; inset:-2px;
  transform:translateX(-120%);
  background:linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.50) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.55;
}
.section--combo-package-products .cpp-actions .btn:hover::before{ animation:cpp-btn-shine 1.5s ease; }
@keyframes cpp-btn-shine{ to{ transform:translateX(120%);} }