/* Compound Purity Store: plugin components. Uses theme presets when present, with fallbacks. */
.cp-ship-note, .cp-upsell, .cp-coa {
  --cp-navy: var(--wp--preset--color--navy, #0B2B4A);
  --cp-teal-300: var(--wp--preset--color--teal-300, #76B3C5);
  --cp-teal-50: var(--wp--preset--color--teal-50, #EAF5F9);
  --cp-teal: var(--wp--preset--color--teal, #0075A0);
  --cp-ink: var(--wp--preset--color--ink, #1F2933);
  --cp-line: var(--wp--preset--color--line, #E3E8EE);
  --cp-muted: var(--wp--preset--color--muted, #6B7480);
}
.cp-muted { color: var(--cp-muted, #6B7480); }
.cp-ship-note { display: flex; gap: 10px; align-items: center; background: var(--cp-teal-50); color: var(--cp-navy); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 16px 0; }
.cp-ship-note::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v9H3zM14 9h4l3 3v3h-7' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='7' cy='17.5' r='1.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h11v9H3zM14 9h4l3 3v3h-7' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='7' cy='17.5' r='1.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.cp-upsell { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1.5px dashed var(--cp-teal-300); border-radius: 10px; padding: 14px 16px; margin: 0 0 20px; font-size: 14px; }
.cp-upsell strong { color: var(--cp-ink); }
.cp-btn-outline { background: #fff !important; color: var(--cp-navy) !important; border: 1.5px solid var(--cp-line) !important; padding: 9px 14px !important; font-size: 14px !important; white-space: nowrap; border-radius: 10px; }
.cp-btn-outline:hover { border-color: var(--cp-navy) !important; }
.cp-coa { display: flex; gap: 14px; align-items: center; }
.cp-coa-doc { width: 46px; height: 56px; border-radius: 6px; border: 1px solid var(--cp-line); background: linear-gradient(#fff 60%, var(--cp-teal-50)); display: grid; place-items: center; color: var(--cp-teal); font-size: 10px; font-weight: 700; flex: none; }
@media (max-width: 781px) { .cp-upsell { flex-direction: column; align-items: flex-start; } }

/* Shipping insurance toggle (cart + checkout) */
.cps-insurance { --cp-navy: var(--wp--preset--color--navy, #0B2B4A); --cp-teal: var(--wp--preset--color--teal, #0075A0); --cp-teal-50: var(--wp--preset--color--teal-50, #EAF5F9); --cp-line: var(--wp--preset--color--line, #E3E8EE); --cp-muted: var(--wp--preset--color--muted, #6B7480); margin: 0 0 20px; }
.cps-insurance[hidden] { display: none; }
.cps-insurance-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--cp-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.cps-insurance-row:hover { border-color: var(--cp-teal); }
.cps-insurance-row:has(input:checked) { border-color: var(--cp-teal); background: var(--cp-teal-50); }
.cps-insurance-input { width: 20px; height: 20px; accent-color: var(--cp-navy); flex: none; margin: 0; }
.cps-insurance-ico { color: var(--cp-teal); display: grid; place-items: center; flex: none; }
.cps-insurance-text { font-size: 14.5px; line-height: 1.45; }
.cps-insurance-price { font-weight: 600; color: var(--cp-navy); }

/* Bulk 10-pack banner */
.cps-bulk-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 36px; border: 1px solid #CFE6EE; border-radius: 16px; background: linear-gradient(120deg, var(--wp--preset--color--teal-50, #EAF5F9), #fff); }
.cps-bulk-banner h2 { margin: 0 0 6px; }
.cps-bulk-banner p { margin: 0; }
.cps-bulk-banner .cp-eyebrow { margin-bottom: 10px; }