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

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

.wcpb-offer-box__head,
.wcpb-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;    
}

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

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

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

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

.wcpb-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;
}
.wcpb-card__inner:hover { border-color: #b0c9ad; }

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

.wcpb-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;
}
.wcpb-card-check:checked ~ .wcpb-card__footer { display: flex; }

.wcpb-card__photo {
  position: relative; width: 48px; height: 48px;
  flex-shrink: 0; border-radius: 6px; overflow: visible; cursor: zoom-in;
}
.wcpb-card__photo img {
  width: 48px; height: 48px; border-radius: 6px; object-fit: cover; display: block; position: relative; z-index: 1;
}
.wcpb-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;
}
.wcpb-photo-tooltip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcpb-card__photo:hover .wcpb-photo-tooltip { opacity: 1; visibility: visible; }

.wcpb-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);
}
.wcpb-img-badge--gift { background: #c2762c; }

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

.wcpb-card__variants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.wcpb-pill { position: relative; cursor: pointer; display: inline-flex; }
.wcpb-pill input { position: absolute; opacity: 0; pointer-events: none; }
.wcpb-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;
}
.wcpb-pill:hover span { border-color: #9db89a; color: #374151; }
.wcpb-pill.is-selected span,
.wcpb-pill input:checked + span { border-color: #4a7c45; background: #f0f7ef; color: #2d4e29; }

.wcpb-pill-expand,
.wcpb-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;
}
.wcpb-pill-expand:hover,
.wcpb-show-more-btn:hover { border-color: #4a7c45; color: #4a7c45; text-decoration: none; }

.wcpb-card__check { flex-shrink: 0; }
.wcpb-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;
}
.wcpb-checkmark svg { opacity: 0; transition: opacity .12s; }
.wcpb-card-check:checked ~ .wcpb-card__inner .wcpb-checkmark { background: #4a7c45; border-color: #4a7c45; }
.wcpb-card-check:checked ~ .wcpb-card__inner .wcpb-checkmark svg { opacity: 1; }

.wcpb-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;
}
.wcpb-ci-card.is-added { border-color: #b4d9af; background: #f7fbf7; }

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

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

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

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

.wcpb-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.wcpb-ci-pill { border: 1.5px solid #4a7c45; }
.wcpb-ci-pill:hover, button.wcpb-ci-pill:hover { background: #4a7c45; color: #fff; }
.wcpb-ci-pill:disabled { opacity: .6; cursor: default; }

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

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

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

.wcpb-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;
}
.wcpb-show-more-btn:hover { border-color: #4a7c45; color: #4a7c45; }

.wcpb-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;
}
.wcpb-ci-card__btn:hover { background: #3a6236; color: #fff; }
.wcpb-ci-card__single-cta { margin-top: 4px; }
.wcpb-ci-card__added { font-size: 11px; font-weight: 700; color: #4a7c45; }
.wcpb-ci-card__oos   { font-size: 11px; font-weight: 600; color: #9ca3af; }

.wcpb-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;
}
.wcpb-remove-lock { display: inline-flex; min-width: 18px; justify-content: center; color: #9ca3af; }

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

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

.wcpb-ci-card__variants {
  row-gap: 6px;
}
.wcpb-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;
}

.wcpb-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;
}

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

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

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

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

/* Bundle separator */
.wcpb-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    font-size: 20px;
    font-weight: bold;
    color: #ff6b35;
}

/* Override separator - vertical line from left side connecting cards */
.wcpb-offer-list {
    position: relative;
}

.wcpb-separator {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 20px !important;
    font-size: 0 !important;
}

.wcpb-separator::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #d0d0d0;
}

/* Line connecting from card edge */
.wcpb-card {
    position: relative;
}

/* Facebook-style connector lines */
.wcpb-offer-list {
    position: relative;
}

/* Vertical line on the left */
.wcpb-offer-list::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 80px;
    bottom: 80px;
    width: 2px;
    background: #d0d0d0;
}

/* Horizontal connector from vertical line to each card */
.wcpb-card {
    position: relative;
}

/* Hide separator completely - we use ::before lines instead */
.wcpb-separator {
    display: none !important;
}

/* Stock notices */
.wcpb-stock-notice {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 3px;
    margin-top: 4px;
    display: inline-block;
}

.wcpb-stock-notice--backorder {
    background: none;
    color: #6b7280;
    border: none;
    padding: 0;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.wcpb-stock-notice--outofstock {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Separate bundle button */
.wcpb-separate-button-wrap {
    margin-top: 20px;
    text-align: center;
}

.wcpb-add-bundle-btn {
    width: 100%;
    max-width: 400px;
}

/* After image display */
.woocommerce-product-gallery + .wcpb-offers,
.product-images .wcpb-offers {
    margin-top: 20px;
    width: 100%;
}
/* Grid layout when after image */
.wcpb-offers--after-image .wcpb-offer-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.wcpb-offers--after-image .wcpb-card {
    margin-bottom: 0;
}

.wcpb-offers--after-image .wcpb-separator {
    display: none;
}

.wcpb-offers--after-image .wcpb-separate-button-wrap {
    grid-column: 1 / -1;
    margin-top: 10px;
}