.wcspp-offer-box,
.wcspp-cart-notice {
  border: 1px solid #e0e3e8;
  border-left: 3px solid #4a7c45;
  border-radius: 10px;
  background: #fff;
  
}

.wcspp-offers          { display: block; width: 100%; margin: 0 0 16px; }
.wcspp-offer-box       { margin-bottom: 10px; }
.wcspp-cart-notices    { display: block; margin: 0 0 20px; }

.wcspp-offer-box__head,
.wcspp-cart-notice__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 8px;
  background: #f7faf7;
  border-bottom: 1px solid #e8f0e7;
  border-radius: 7px 7px 0 0;    
}

.wcspp-offer-title,
.wcspp-cart-notice__title {
  font-size: 13px;
  font-weight: 600;
  color: #1a2e19;
}

.wcspp-offer-list,
.wcspp-cart-notice__offers {
  padding: 8px;
  display: grid;
  gap: 6px;
}

.wcspp-card { display: block; position: relative; }

.wcspp-card-check {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}

.wcspp-card__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
}
.wcspp-card__inner:hover { border-color: #b0c9ad; }

.wcspp-card-check:checked ~ .wcspp-card__inner {
  border-color: #4a7c45;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-width: 0;
  background: #f9fdf9;
}

.wcspp-card__footer {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #2d5e28;
  background: #f0f7ef;
  border: 1.5px solid #4a7c45;
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}
.wcspp-card-check:checked ~ .wcspp-card__footer { display: flex; }

.wcspp-card__photo {
  position: relative; width: 48px; height: 48px;
  flex-shrink: 0; border-radius: 6px; overflow: visible; cursor: zoom-in;
}
.wcspp-card__photo img {
  width: 48px; height: 48px; border-radius: 6px; object-fit: cover; display: block; position: relative; z-index: 1;
}
.wcspp-photo-tooltip {
  position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
  z-index: 9999; width: 130px; height: 130px; border-radius: 10px;
  overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.wcspp-photo-tooltip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcspp-card__photo:hover .wcspp-photo-tooltip { opacity: 1; visibility: visible; }

.wcspp-img-badge {
  position: absolute; bottom: -5px; right: -5px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 18px; padding: 0 5px;
  background: #2d6a27; color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.wcspp-img-badge--gift { background: #c2762c; }

.wcspp-card__meta { flex: 1; min-width: 0; }
.wcspp-card__rule-label { font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.wcspp-card__name { font-size: 13px; font-weight: 600; color: #111827; line-height: 1.3; margin: 0 0 2px; }
.wcspp-card__price { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
.wcspp-price-new  { font-size: 13px; font-weight: 700; color: #374151; }
.wcspp-price-old  { font-size: 11px; color: #9ca3af; text-decoration: line-through; }
.wcspp-price-free { font-size: 13px; font-weight: 700; color: #2d6a27; }

.wcspp-card__variants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.wcspp-pill { position: relative; cursor: pointer; display: inline-flex; }
.wcspp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.wcspp-pill span {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px solid #d1d5db; border-radius: 999px;
  font-size: 11px; font-weight: 500; color: #6b7280; background: #fff;
  transition: border-color .12s, color .12s, background .12s;
}
.wcspp-pill:hover span { border-color: #9db89a; color: #374151; }
.wcspp-pill.is-selected span,
.wcspp-pill input:checked + span { border-color: #4a7c45; background: #f0f7ef; color: #2d4e29; }

.wcspp-pill-expand,
.wcspp-show-more-btn {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px dashed #9ca3af; border-radius: 999px;
  font-size: 11px; font-weight: 500; color: #6b7280; background: transparent;
  cursor: pointer; transition: border-color .12s, color .12s;
}
.wcspp-pill-expand:hover,
.wcspp-show-more-btn:hover { border-color: #4a7c45; color: #4a7c45; text-decoration: none; }

.wcspp-card__check { flex-shrink: 0; }
.wcspp-checkmark {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1.5px solid #d1d5db;
  border-radius: 5px; background: #fff; transition: background .12s, border-color .12s;
}
.wcspp-checkmark svg { opacity: 0; transition: opacity .12s; }
.wcspp-card-check:checked ~ .wcspp-card__inner .wcspp-checkmark { background: #4a7c45; border-color: #4a7c45; }
.wcspp-card-check:checked ~ .wcspp-card__inner .wcspp-checkmark svg { opacity: 1; }

.wcspp-ci-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fff; transition: border-color .15s;
}
.wcspp-ci-card.is-added { border-color: #b4d9af; background: #f7fbf7; }

.wcspp-ci-card__img { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid #f0f0f0; margin-top: 2px; }
.wcspp-ci-card__info { flex: 1; min-width: 0; }
.wcspp-ci-card__rule { display: block; font-size: 10px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.wcspp-ci-card__name { display: block; font-size: 12px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.wcspp-ci-card__price { display: block; font-size: 11px; color: #374151; margin-bottom: 5px; }
.wcspp-ci-card__price s  { color: #9ca3af; }
.wcspp-ci-card__price em { font-style: normal; font-weight: 700; color: #4a7c45; margin-left: 2px; }
.wcspp-ci-free { color: #2d6a27; font-weight: 700; }

.wcspp-pill-expand,
.wcspp-show-more-btn {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  box-shadow: none;
  text-decoration: none;
}

.wcspp-pills-hidden { display: none; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; }
.wcspp-pills-hidden.is-open { display: flex; }

.wcspp-ci-card__variants { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wcspp-variants-hidden { display: none; flex-wrap: wrap; gap: 6px; align-items: center; }
.wcspp-variants-hidden.is-open { display: flex; }

.wcspp-ci-pill {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 6px; font-size: 11px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
  border: 1.5px solid #4a7c45; color: #4a7c45; background: #fff;
  white-space: nowrap;
}
button.wcspp-ci-pill { border: 1.5px solid #4a7c45; }
.wcspp-ci-pill:hover, button.wcspp-ci-pill:hover { background: #4a7c45; color: #fff; }
.wcspp-ci-pill:disabled { opacity: .6; cursor: default; }

.wcspp-ci-pill.is-added {
  border-color: #4a7c45; background: #f0f7ef; color: #2d4e29; pointer-events: none;
}

.wcspp-ci-pill.is-oos {
  border-color: #d1d5db; color: #9ca3af; pointer-events: none; text-decoration: line-through;
}

.wcspp-ci-pill.is-limit {
  border-color: #d1d5db; color: #9ca3af; pointer-events: none;
}

.wcspp-show-more-btn {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1.5px dashed #9ca3af; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: #6b7280; background: transparent;
  cursor: pointer; transition: border-color .12s, color .12s;
}
.wcspp-show-more-btn:hover { border-color: #4a7c45; color: #4a7c45; }

.wcspp-ci-card__btn {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  background: #4a7c45; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 6px; text-decoration: none; border: none;
  white-space: nowrap; flex-shrink: 0; cursor: pointer; transition: background .15s;
}
.wcspp-ci-card__btn:hover { background: #3a6236; color: #fff; }
.wcspp-ci-card__single-cta { margin-top: 4px; }
.wcspp-ci-card__added { font-size: 11px; font-weight: 700; color: #4a7c45; }
.wcspp-ci-card__oos   { font-size: 11px; font-weight: 600; color: #9ca3af; }

.wcspp-cart-badge {
  display: inline-flex; align-items: center; background: #f0f7ef;
  border: 1px solid #c8ddc5; color: #2d4e29; font-size: 11px; font-weight: 600;
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}
.wcspp-remove-lock { display: inline-flex; min-width: 18px; justify-content: center; color: #9ca3af; }

@media (max-width: 480px) {
  .wcspp-card__photo, .wcspp-card__photo img { width: 42px; height: 42px; }
  .wcspp-card__inner { gap: 8px; padding: 9px 10px; }
  .wcspp-photo-tooltip { display: none; }
}

.wcspp-ci-limit-msg {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  font-style: italic;
  margin-top: 3px;
}

.wcspp-ci-card__variants {
  row-gap: 6px;
}
.wcspp-ci-limit-msg--badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f7faf7;
  border: 1px solid #d7e7d4;
  color: #4a7c45;
  font-style: normal;
  margin: 0 0 6px;
}

.wcspp-discount-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  margin-left: 8px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.woocommerce .price del {
  opacity: 0.6;
  font-size: 0.9em;
}

.woocommerce .price ins {
  text-decoration: none;
  font-weight: 600;
}

.wcspp-global-badge {
  position: absolute;
  top: 10px; 
  left: 10px;
  z-index: 10;
  pointer-events: none;
}

.cst-product-labels:not(.wcspp-global-badge) ~ .wcspp-global-badge {
  top: 40px;
}

.wcspp-discount-label {
  background-color: #dc2626 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .wcspp-global-badge {
    top: 8px;
    left: 8px;
  }
  
  .cst-product-labels:not(.wcspp-global-badge) ~ .wcspp-global-badge {
    top: 35px;
  }
}