/* Codelith Sales Pulse — stylesheet isolated to .csp-widget */
.csp-widget{--csp-accent:#7c3aed;--csp-duration:7s;position:fixed;z-index:99990;pointer-events:none;width:min(390px,calc(100vw - 32px));font:normal 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#172033;box-sizing:border-box}
.csp-widget *{box-sizing:border-box}.csp-widget a{color:inherit;text-decoration:none}.csp-widget a:focus-visible,.csp-widget button:focus-visible{outline:3px solid var(--csp-accent);outline-offset:3px}
.csp-position-bottom-left{bottom:25px;left:24px}.csp-position-bottom-right{bottom:25px;right:24px}.csp-position-bottom-center{bottom:25px;left:50%;transform:translateX(-50%)}.csp-position-top-left{top:25px;left:24px}.csp-position-top-right{top:25px;right:24px}
.csp-toast{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:104px;padding:16px 35px 16px 14px;background:#fff;border:1px solid #e8eaf1;border-radius:19px;box-shadow:0 13px 42px rgba(17,24,39,.15),0 2px 8px rgba(17,24,39,.04);pointer-events:auto;overflow:hidden;opacity:0;transform:translateY(20px);transition:transform .5s cubic-bezier(.2,.86,.21,1),opacity .4s ease,box-shadow .3s ease;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.csp-toast:hover{box-shadow:0 16px 46px rgba(17,24,39,.19)}.csp-toast.csp-visible{opacity:1;transform:none}.csp-toast.csp-leaving{opacity:0;transform:translateY(12px)}.csp-thumb{width:76px;height:76px;flex:0 0 76px;overflow:hidden;border-radius:14px;background:#f2edff;border:1px solid rgba(120,90,150,.09);display:grid;place-items:center}.csp-thumb img{height:100%;width:100%;object-fit:cover;display:block}
.csp-toast-content{flex:1;min-width:0}.csp-buyer{font-size:14px;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.csp-buyer strong{font-weight:780;color:var(--csp-accent)}.csp-from{font-weight:450;color:#525c70}.csp-purchase{margin:4px 0 7px;font-size:13.7px;line-height:1.45;max-height:40px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.csp-verb{color:#596274}.csp-product-name{font-weight:760;color:#263047;overflow-wrap:anywhere}.csp-product-name:hover{text-decoration:underline}.csp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11.7px;color:#7b8495;line-height:1.45}.csp-confirmed{color:#0a9468;font-weight:760}.csp-meta-dot{color:#b3bbcb}.csp-close{position:absolute;right:8px;top:8px;border:0!important;box-shadow:none!important;border-radius:50%!important;background:transparent!important;color:#98a1af!important;font-size:24px!important;line-height:24px!important;height:26px!important;width:26px!important;min-width:26px!important;padding:0!important;margin:0!important;cursor:pointer;display:grid;place-items:center}.csp-close:hover{background:rgba(88,92,112,.1)!important;color:#354052!important}.csp-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--csp-accent);opacity:.65;transform-origin:left;animation:csp-count var(--csp-duration) linear both}.csp-toast.csp-leaving .csp-progress{animation-play-state:paused}@keyframes csp-count{to{transform:scaleX(0)}}
/* Six self-contained skins */
.csp-template-glass .csp-toast{background:rgba(255,255,255,.92);border:1px solid rgba(240,240,250,.8);box-shadow:0 18px 56px rgba(31,33,71,.18),inset 0 1px rgba(255,255,255,.9)}
.csp-template-minimal .csp-toast{border-radius:10px;border:1px solid #eee;box-shadow:0 9px 26px rgba(18,29,56,.1);background:#fff}.csp-template-minimal .csp-thumb{border-radius:8px}.csp-template-minimal .csp-progress{height:2px}
.csp-template-gradient .csp-toast{background:linear-gradient(120deg,#5b21b6,#9333ea 56%,#db2777);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:0 17px 46px rgba(108,39,165,.31)}.csp-template-gradient .csp-buyer strong,.csp-template-gradient .csp-product-name,.csp-template-gradient .csp-confirmed{color:#fff}.csp-template-gradient .csp-from,.csp-template-gradient .csp-verb,.csp-template-gradient .csp-meta{color:rgba(255,255,255,.78)}.csp-template-gradient .csp-close{color:#fff!important}.csp-template-gradient .csp-progress{background:#fff}
.csp-template-dark .csp-toast{background:#131929;color:#f7f8ff;border:1px solid #394054;box-shadow:0 20px 50px rgba(0,0,0,.26)}.csp-template-dark .csp-buyer strong{color:#c4b5fd}.csp-template-dark .csp-product-name{color:#fff}.csp-template-dark .csp-from,.csp-template-dark .csp-verb,.csp-template-dark .csp-meta{color:#aab3c7}.csp-template-dark .csp-confirmed{color:#5be6b8}.csp-template-dark .csp-close{color:#c3c6d4!important}
.csp-template-outline .csp-toast{background:#fff;border:2px solid var(--csp-accent);border-radius:22px;box-shadow:0 9px 36px rgba(30,31,66,.1)}.csp-template-outline .csp-thumb{border-radius:50%}
.csp-template-neon .csp-toast{background:#0d1323;color:#fff;border:1px solid #825dfa;box-shadow:0 0 21px rgba(125,92,240,.36),0 14px 30px rgba(0,0,0,.29)}.csp-template-neon .csp-buyer strong,.csp-template-neon .csp-product-name{color:#f0eaff}.csp-template-neon .csp-from,.csp-template-neon .csp-verb,.csp-template-neon .csp-meta{color:#b5b6cd}.csp-template-neon .csp-confirmed{color:#61efc3}.csp-template-neon .csp-close{color:#bbb8db!important}
/* Entrances are independent of the fixed container position. */
.csp-widget[data-animation="fade"] .csp-toast{transform:none}.csp-widget[data-animation="zoom"] .csp-toast{transform:scale(.87)}.csp-widget[data-animation="bounce"] .csp-toast{transform:translateY(34px);transition-timing-function:cubic-bezier(.17,1.53,.48,1)}.csp-widget[data-animation="flip"] .csp-toast{transform:perspective(600px) rotateX(-24deg);transform-origin:top}.csp-widget[data-animation] .csp-toast.csp-visible{transform:none}.csp-widget[data-animation="fade"] .csp-toast.csp-leaving{transform:none}
@media(max-width:640px){.csp-widget.csp-hide-mobile{display:none}.csp-widget{width:calc(100vw - 26px);max-width:390px;}.csp-toast{min-height:91px;padding:12px 35px 12px 11px;border-radius:16px;gap:11px}.csp-thumb{width:63px;height:63px;flex-basis:63px;border-radius:11px}.csp-buyer{font-size:13px}.csp-purchase{font-size:12.5px}.csp-meta{font-size:11px}}
@media(prefers-reduced-motion:reduce){.csp-widget .csp-toast,.csp-widget .csp-toast.csp-visible,.csp-widget .csp-toast.csp-leaving{transition:none!important;transform:none!important}.csp-widget .csp-progress{animation:none!important}.csp-widget .csp-toast.csp-visible{opacity:1}}
.csp-widget.csp-reduced .csp-toast{transition:none!important;transform:none!important}.csp-widget.csp-reduced .csp-progress{animation:none!important}
/* v0.2 visual editions and customer-friendly behavior */
.csp-layout-compact{width:min(340px,calc(100vw - 24px))}
.csp-layout-compact .csp-toast{min-height:77px;padding:10px 32px 10px 10px;gap:10px;border-radius:13px}
.csp-layout-compact .csp-thumb{height:53px;width:53px;flex-basis:53px;border-radius:10px}
.csp-layout-compact .csp-buyer{font-size:12.5px}.csp-layout-compact .csp-purchase{font-size:12px;margin:3px 0}
.csp-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:9px;padding:5px 11px;background:var(--csp-accent);color:white!important;text-decoration:none!important;border-radius:8px;font-weight:750;font-size:11px;transition:filter .2s}
.csp-cta:hover{filter:brightness(1.13)}
.csp-toast.csp-paused .csp-progress{animation-play-state:paused!important}
.csp-template-luxury .csp-toast{background:linear-gradient(135deg,#1e1914,#34281a);color:#fff8e6;border:1px solid #b18a4c;box-shadow:0 14px 45px rgba(44,32,17,.26)}
.csp-template-luxury .csp-buyer strong,.csp-template-luxury .csp-product-name{color:#fbd689}.csp-template-luxury .csp-from,.csp-template-luxury .csp-verb,.csp-template-luxury .csp-meta{color:#ded1b8}.csp-template-luxury .csp-confirmed{color:#e7d09f}.csp-template-luxury .csp-close{color:#e9d1a5!important}.csp-template-luxury .csp-progress,.csp-template-luxury .csp-cta{background:#bd944e}
.csp-template-ocean .csp-toast{background:linear-gradient(120deg,#ecfaff,#f8fdff);border:1px solid #94dae9;box-shadow:0 13px 38px rgba(2,95,132,.14)}.csp-template-ocean .csp-buyer strong{color:#00799f}.csp-template-ocean .csp-progress,.csp-template-ocean .csp-cta{background:#009bb8}
.csp-template-sunset .csp-toast{background:linear-gradient(120deg,#fff4e8,#ffe2e4);border:1px solid #ffbea7;box-shadow:0 14px 38px rgba(178,74,58,.13)}.csp-template-sunset .csp-buyer strong{color:#bf4757}.csp-template-sunset .csp-progress,.csp-template-sunset .csp-cta{background:#e6675d}
.csp-widget[data-animation="pop"] .csp-toast{transform:scale(.67);transition-timing-function:cubic-bezier(.17,1.54,.44,1)}
.csp-widget[data-animation="float"] .csp-toast{transform:translateY(54px) scale(.97);transition-duration:.72s;transition-timing-function:cubic-bezier(.16,.91,.22,1)}
.csp-widget[data-animation="pop"] .csp-toast.csp-visible,.csp-widget[data-animation="float"] .csp-toast.csp-visible{transform:none}
@media(max-width:640px){.csp-layout-compact{max-width:340px}}

/* v0.3: product discovery labelling, expanded placement and directional movement */
.csp-position-top-center{top:25px;left:50%;transform:translateX(-50%)}
.csp-position-middle-left{top:50%;left:24px;transform:translateY(-50%)}
.csp-position-middle-right{top:50%;right:24px;transform:translateY(-50%)}
.csp-position-middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.csp-featured-label{display:inline-flex;border-radius:999px;padding:3px 8px;background:rgba(124,58,237,.1);color:var(--csp-accent);font-weight:750;letter-spacing:.01em;font-size:10px}
.csp-is-showcase .csp-toast{border-left:4px solid var(--csp-accent)}
.csp-is-showcase .csp-buyer{white-space:normal}
.csp-is-showcase .csp-buyer strong{font-size:12.5px}
.csp-is-showcase .csp-cta{display:inline-flex}
.csp-widget[data-animation="side-sweep"] .csp-toast{transform:translateX(-110vw);transition-duration:.64s;transition-timing-function:cubic-bezier(.18,.82,.2,1)}
.csp-widget[data-animation="side-sweep"][class*="-right"] .csp-toast{transform:translateX(110vw)}
.csp-widget[data-animation="fly-across"] .csp-toast{transform:translateX(-110vw);transition-duration:.7s;transition-timing-function:cubic-bezier(.23,.83,.2,1)}
.csp-widget[data-animation="side-sweep"] .csp-toast.csp-visible,.csp-widget[data-animation="fly-across"] .csp-toast.csp-visible{transform:none}
.csp-widget[data-animation="side-sweep"] .csp-toast.csp-leaving{transform:translateX(-110vw);opacity:0}
.csp-widget[data-animation="side-sweep"][class*="-right"] .csp-toast.csp-leaving{transform:translateX(110vw)}
.csp-widget[data-animation="fly-across"] .csp-toast.csp-leaving{transform:translateX(110vw);opacity:0}
.csp-widget[data-exit="slide"] .csp-toast.csp-leaving{transform:translateX(-110vw);opacity:0}
.csp-widget[data-exit="slide"][class*="-right"] .csp-toast.csp-leaving{transform:translateX(110vw)}
.csp-widget[data-exit="fade"] .csp-toast.csp-leaving{transform:none;opacity:0}
/* Legacy mobile-match CSS removed: JS now sets the chosen position on the viewport. */
@media(prefers-reduced-motion:reduce){.csp-widget[data-animation="side-sweep"] .csp-toast,.csp-widget[data-animation="fly-across"] .csp-toast,.csp-widget[data-animation="side-sweep"] .csp-toast.csp-leaving,.csp-widget[data-animation="fly-across"] .csp-toast.csp-leaving{transition:none!important;transform:none!important}}
/* 0.4.0: independent responsive placement and dimensions. All selectors scoped. */
.csp-widget{--csp-card-width:var(--csp-desktop-width,390px);--csp-card-pad:var(--csp-desktop-pad,14px);--csp-card-font:var(--csp-desktop-font,14px);--csp-card-image:var(--csp-desktop-image,76px);--csp-card-radius:17px;--csp-edge-gap:24px;--csp-mobile-bottom-gap:76px;width:min(var(--csp-card-width),calc(100vw - 2 * var(--csp-edge-gap)));z-index:2147480000;max-width:100vw;isolation:isolate;font-size:var(--csp-card-font)}
.csp-widget.csp-position-top-left,.csp-widget.csp-position-middle-left,.csp-widget.csp-position-bottom-left{left:var(--csp-edge-gap)}
.csp-widget.csp-position-top-right,.csp-widget.csp-position-middle-right,.csp-widget.csp-position-bottom-right{right:var(--csp-edge-gap)}
.csp-widget.csp-position-top-left,.csp-widget.csp-position-top-center,.csp-widget.csp-position-top-right{top:var(--csp-edge-gap)}
.csp-widget.csp-position-bottom-left,.csp-widget.csp-position-bottom-center,.csp-widget.csp-position-bottom-right{bottom:var(--csp-edge-gap)}
.csp-widget .csp-toast{padding:var(--csp-card-pad) calc(var(--csp-card-pad) + 23px) var(--csp-card-pad) var(--csp-card-pad);border-radius:var(--csp-card-radius);min-height:0;gap:10px;font-size:var(--csp-card-font);max-height:min(75vh,520px);overflow:hidden;overflow-wrap:anywhere}
.csp-widget .csp-thumb{height:var(--csp-card-image);width:var(--csp-card-image);flex:0 0 var(--csp-card-image);min-width:0}
.csp-widget .csp-buyer{font-size:1em}.csp-widget .csp-purchase{font-size:.96em;max-height:none;line-height:1.33;margin:4px 0}
.csp-widget .csp-meta{font-size:.8em}.csp-widget .csp-cta{font-size:.83em;line-height:1.25;padding:.45em .8em;margin-top:6px;max-width:100%;white-space:normal}
.csp-widget .csp-close{z-index:3}.csp-widget .csp-progress{z-index:2}
/* Distinct structure A: full-bleed image hero above the content. */
.csp-template-poster .csp-toast{padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0;background:#fffdfb;border:1px solid #e8ded6;box-shadow:0 20px 50px #603e2624}
.csp-template-poster .csp-thumb{width:100%;height:clamp(96px,calc(var(--csp-card-image) + 55px),190px);flex:none;border:0;border-radius:0;background:linear-gradient(135deg,#ede6ff,#f8dfca)}
.csp-template-poster .csp-thumb img{object-fit:contain;padding:12px}
.csp-template-poster .csp-toast-content{padding:13px var(--csp-card-pad) 15px;text-align:left}
.csp-template-poster .csp-buyer strong{font-size:.8em;text-transform:uppercase;letter-spacing:.14em;color:#95643b}
.csp-template-poster .csp-purchase{font-size:1.12em;line-height:1.3;margin:6px 0 8px}
.csp-template-poster .csp-cta{display:flex;justify-content:center;margin-top:10px;background:#33281f;border-radius:6px}
.csp-template-poster .csp-close{background:#fff!important;color:#333!important;top:8px;right:8px}
/* Distinct structure B: perforated ticket with product at right. */
.csp-template-ticket .csp-toast{display:flex;flex-direction:row-reverse;align-items:stretch;background:linear-gradient(100deg,#fffaf1 0%,#fffaf1 72%,#f3e5d3 72%);border:1px solid #e9d3ad;box-shadow:0 12px 30px #62482724;border-radius:9px}
.csp-template-ticket .csp-thumb{border:0;border-left:2px dashed #d2b88a;box-sizing:content-box;padding-left:12px;border-radius:0;background:transparent;height:auto;min-height:var(--csp-card-image)}
.csp-template-ticket .csp-thumb img{object-fit:contain}
.csp-template-ticket .csp-toast-content{align-self:center}.csp-template-ticket .csp-buyer strong{color:#ad6d28;letter-spacing:.02em}.csp-template-ticket .csp-cta{background:#9a6136;border-radius:4px}
.csp-template-ticket .csp-close{right:5px;top:4px}
/* Distinct structure C: compact elongated capsule. */
.csp-template-capsule .csp-toast{display:flex;align-items:center;background:linear-gradient(115deg,#fff,#f3f8ff);border:1px solid #d8e5fb;border-radius:999px;box-shadow:0 13px 36px #153f7526;padding-top:9px;padding-bottom:9px}
.csp-template-capsule .csp-thumb{height:clamp(34px,calc(var(--csp-card-image) - 10px),75px);width:clamp(34px,calc(var(--csp-card-image) - 10px),75px);flex-basis:clamp(34px,calc(var(--csp-card-image) - 10px),75px);border-radius:50%;background:#e6eaf9}
.csp-template-capsule .csp-buyer{font-size:.88em}.csp-template-capsule .csp-buyer strong{color:#126bc2}.csp-template-capsule .csp-purchase{font-size:.9em;margin:2px 0}
.csp-template-capsule .csp-featured-label{font-size:.75em;padding:1px 6px}.csp-template-capsule .csp-cta{font-size:.75em;margin-top:3px;padding:3px 8px;border-radius:999px;background:#126bc2}
.csp-template-capsule .csp-close{top:50%;transform:translateY(-50%);right:6px}
/* Distinct structure D: editorial column typography / product at right. */
.csp-template-editorial .csp-toast{flex-direction:row-reverse;align-items:stretch;background:#f9f7f0;border:0;border-radius:2px;box-shadow:10px 12px 0 #1b2b2b,0 16px 34px #1118;gap:14px}
.csp-template-editorial .csp-thumb{height:auto;min-height:var(--csp-card-image);width:36%;flex:0 0 36%;border:0;border-radius:0;background:#e8ede0}
.csp-template-editorial .csp-thumb img{object-fit:cover}
.csp-template-editorial .csp-toast-content{align-self:center}.csp-template-editorial .csp-buyer strong{color:#31765b;letter-spacing:.11em;text-transform:uppercase;font-size:.83em}
.csp-template-editorial .csp-product-name{font-size:1.13em;line-height:1.2;color:#1d302e}.csp-template-editorial .csp-cta{background:#1d302e;border-radius:0}
/* Distinct structure E: center-floating product spotlight with title beneath. */
.csp-template-spotlight .csp-toast{flex-direction:column;align-items:center;text-align:center;gap:0;background:radial-gradient(circle at 50% 0%,#e4d6ff 0%,#fff 55%);border:1px solid #d5c3fb;box-shadow:0 17px 46px #6d45b02b}
.csp-template-spotlight .csp-thumb{width:calc(var(--csp-card-image) + 17px);height:calc(var(--csp-card-image) + 17px);flex:none;border-radius:50%;background:#fff;padding:6px;box-shadow:0 7px 20px #7e48d02c}
.csp-template-spotlight .csp-toast-content{width:100%;padding:10px 2px 0}.csp-template-spotlight .csp-buyer strong{font-size:.85em;text-transform:uppercase;letter-spacing:.12em}
.csp-template-spotlight .csp-purchase{font-size:1.05em}.csp-template-spotlight .csp-meta{justify-content:center}.csp-template-spotlight .csp-cta{border-radius:999px;padding:.58em 1.5em}
/* Distinct structure F: diagonal ribbon / media on right. */
.csp-template-ribbon .csp-toast{flex-direction:row-reverse;align-items:center;background:linear-gradient(117deg,#101a30 0%,#233a67 69%,#f2b458 69%,#f6ce80 100%);border:0;border-radius:10px;color:#fff;box-shadow:0 18px 36px #18264057}
.csp-template-ribbon .csp-thumb{background:#fff;border:3px solid #ffcf77;border-radius:9px;transform:rotate(4deg);box-shadow:0 8px 14px #0002}
.csp-template-ribbon .csp-buyer strong,.csp-template-ribbon .csp-product-name{color:#fff}.csp-template-ribbon .csp-from,.csp-template-ribbon .csp-verb,.csp-template-ribbon .csp-meta{color:#c4d4f4}.csp-template-ribbon .csp-featured-label{background:#f7b950;color:#16233b}
.csp-template-ribbon .csp-cta{background:#ffca6e;color:#172540!important;border-radius:3px}.csp-template-ribbon .csp-close{color:#fff!important}
/* Some templates are intentionally vertical; the configured width and image size still apply. */
@media (max-width:640px){
 .csp-widget{--csp-card-width:var(--csp-phone-width,302px);--csp-card-pad:var(--csp-phone-pad,9px);--csp-card-font:var(--csp-phone-font,12px);--csp-card-image:var(--csp-phone-image,50px);width:min(var(--csp-phone-width,302px),calc(100vw - 2 * var(--csp-phone-edge,12px)))!important;max-width:calc(100vw - 8px)!important}
 .csp-widget.csp-layout-compact{max-width:none}
 .csp-widget .csp-toast{padding:var(--csp-card-pad) calc(var(--csp-card-pad) + 24px) var(--csp-card-pad) var(--csp-card-pad);gap:7px;min-height:0;border-radius:var(--csp-card-radius)}
 .csp-widget .csp-thumb{width:var(--csp-card-image);height:var(--csp-card-image);flex:0 0 var(--csp-card-image)}
 .csp-widget .csp-buyer{font-size:1em}.csp-widget .csp-purchase{font-size:1em;line-height:1.28}
 .csp-widget .csp-meta{font-size:.82em}.csp-widget .csp-cta{font-size:.87em;padding:4px 8px;margin-top:5px}
 /* Explicit viewport positioning beats the older unconditional bottom-center rule. */
 .csp-widget[data-mobile-effective]{left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
 .csp-widget[data-mobile-effective^="top-"]{top:max(var(--csp-phone-edge,12px),env(safe-area-inset-top))!important}
 .csp-widget[data-mobile-effective^="middle-"]{top:50%!important;transform:translateY(-50%)!important}
 .csp-widget[data-mobile-effective^="bottom-"]{bottom:max(var(--csp-mobile-bottom-gap),env(safe-area-inset-bottom))!important}
 .csp-widget[data-mobile-effective$="-left"]{left:var(--csp-phone-edge,12px)!important}
 .csp-widget[data-mobile-effective$="-right"]{right:var(--csp-phone-edge,12px)!important}
 .csp-widget[data-mobile-effective$="-center"]{left:50%!important;transform:translateX(-50%)!important}
 .csp-widget[data-mobile-effective="middle-center"]{transform:translate(-50%,-50%)!important}
 .csp-widget[data-mobile-effective="middle-left"],.csp-widget[data-mobile-effective="middle-right"]{transform:translateY(-50%)!important}
 .csp-template-poster .csp-toast{padding:0}.csp-template-poster .csp-thumb{width:100%;height:clamp(75px,calc(var(--csp-card-image) + 45px),145px);flex:none}.csp-template-poster .csp-toast-content{padding:10px var(--csp-card-pad) 13px}
 .csp-template-editorial .csp-thumb{width:36%;flex:0 0 36%;height:auto}.csp-template-ticket .csp-thumb{height:auto;min-height:var(--csp-card-image)}
 .csp-template-spotlight .csp-thumb{width:calc(var(--csp-card-image) + 17px);height:calc(var(--csp-card-image) + 17px);flex:none}
 .csp-template-capsule .csp-toast{border-radius:999px}.csp-template-capsule .csp-thumb{width:clamp(34px,calc(var(--csp-card-image) - 10px),75px);height:clamp(34px,calc(var(--csp-card-image) - 10px),75px);flex:0 0 clamp(34px,calc(var(--csp-card-image) - 10px),75px)}
 .csp-template-ribbon .csp-thumb{height:var(--csp-card-image);width:var(--csp-card-image);flex:0 0 var(--csp-card-image)}
}

/* v0.4.2: Placement is set as inline-important on #csp-sales-pulse by frontend.js.
   Never force bottom-center at a breakpoint; mobile placement is independent. */

/* v0.4.3 - only render CTA when explicitly enabled in either notification mode. */
.csp-widget .csp-cta[hidden]{display:none!important}

/* v0.5.0 | Six new independent layouts */
.csp-template-story .csp-toast{display:grid;grid-template-columns:88px minmax(0,1fr);background:#fff6ea;border:2px solid #f1d9bc;border-radius:20px 20px 6px 20px;gap:12px;box-shadow:0 16px 34px #55321d24}
.csp-template-story .csp-thumb{width:88px;height:88px;flex:none;border-radius:12px 38px 12px 12px;grid-row:1;background:#f9e2c7;transform:rotate(-2deg)}
.csp-template-story .csp-buyer strong{color:#a84b2d;text-transform:uppercase;font-size:.86em;letter-spacing:.08em}
.csp-template-story .csp-product-name{font-size:1.13em;color:#3d2b25}
.csp-template-story .csp-cta{background:#b65732}
.csp-template-polaroid .csp-toast{flex-direction:column;align-items:center;gap:0;background:#fffefb;border:8px solid #fff;box-shadow:0 14px 32px #21243b33;transform-origin:50% 20%}
.csp-template-polaroid .csp-thumb{width:100%;height:clamp(98px,calc(var(--csp-card-image) + 50px),170px);flex:none;border:0;border-radius:2px;background:#ebeaf1}
.csp-template-polaroid .csp-thumb img{object-fit:contain;padding:6px}
.csp-template-polaroid .csp-toast-content{text-align:center;padding:12px 7px 5px;width:100%}
.csp-template-polaroid .csp-meta{justify-content:center}
.csp-template-polaroid .csp-close{top:2px;right:2px;background:#fff!important}
.csp-template-ticker .csp-toast{border-radius:5px;display:flex;flex-direction:row;gap:9px;background:#0c1a1d;color:#ecffef;border:1px solid #2cd6a5;box-shadow:0 0 0 3px #0c1a1d,0 12px 36px #042d2480;padding:12px 35px 12px 12px}
.csp-template-ticker .csp-toast:before{content:'●';color:#2ce6a8;position:absolute;left:6px;top:2px;font-size:9px}
.csp-template-ticker .csp-thumb{border:0;border-radius:3px;box-shadow:0 0 0 2px #285e4d;background:#152b27}
.csp-template-ticker .csp-buyer strong,.csp-template-ticker .csp-product-name{color:#5cf5bd}
.csp-template-ticker .csp-verb,.csp-template-ticker .csp-meta{color:#a3c8ba}
.csp-template-ticker .csp-cta{border-radius:3px;background:#2cd6a5;color:#08211b!important}
.csp-template-split .csp-toast{display:flex;flex-direction:row-reverse;align-items:stretch;gap:0;border:0;background:linear-gradient(125deg,#eff6fe,#dae3ff);border-radius:18px;box-shadow:0 18px 35px #33487826;padding:0}
.csp-template-split .csp-thumb{flex:0 0 38%;width:38%;height:auto;min-height:115px;border:0;border-radius:0 18px 18px 0;background:#b5c6ed}
.csp-template-split .csp-thumb img{object-fit:cover}
.csp-template-split .csp-toast-content{padding:17px 8px 16px 14px;align-self:center}
.csp-template-split .csp-buyer strong{color:#4a60bc}.csp-template-split .csp-cta{background:#354b9b;border-radius:99px}
.csp-template-split .csp-close{background:#ffffffcc!important;right:5px;top:5px}
.csp-template-badge .csp-toast{display:flex;flex-direction:row;align-items:center;gap:12px;background:#fbf8f3;border:1px solid #dfc29b;border-radius:4px 24px 4px 24px;box-shadow:9px 9px 0 #e1caae,0 15px 35px #3f28261f}
.csp-template-badge .csp-toast:before{content:'FEATURED';position:absolute;left:-31px;top:13px;background:#9d4b3f;color:#fff;font-size:8px;letter-spacing:.12em;font-weight:800;transform:rotate(-45deg);padding:5px 31px}
.csp-template-badge .csp-thumb{border-radius:50%;border:3px solid #dcbf9c;background:#fff}
.csp-template-badge .csp-buyer strong{color:#923e36}.csp-template-badge .csp-cta{background:#923e36}
.csp-template-orb .csp-toast{display:flex;flex-direction:column;gap:8px;align-items:center;background:linear-gradient(160deg,#d6f6ffcc,#eee4ffea);border:1px solid #ffffffb8;border-radius:30px;box-shadow:0 15px 45px #596fc53a, inset 0 2px 3px #ffffffaa;text-align:center}
.csp-template-orb .csp-thumb{height:clamp(64px,calc(var(--csp-card-image) + 8px),120px);width:clamp(64px,calc(var(--csp-card-image) + 8px),120px);flex:none;border:4px solid #fff;border-radius:100%;box-shadow:0 5px 20px #6366f166}
.csp-template-orb .csp-meta{justify-content:center}.csp-template-orb .csp-buyer strong{color:#5255b4}.csp-template-orb .csp-toast-content{width:100%}.csp-template-orb .csp-cta{border-radius:99px}
/* Merchant's optional Visual Builder overrides. It does not affect templates until enabled. */
.csp-widget.csp-custom-surface .csp-toast{background:var(--csp-surface)!important;color:var(--csp-text)!important;border:1px solid var(--csp-outline)!important}
.csp-widget.csp-custom-surface .csp-purchase,.csp-widget.csp-custom-surface .csp-buyer,.csp-widget.csp-custom-surface .csp-product-name,.csp-widget.csp-custom-surface .csp-verb,.csp-widget.csp-custom-surface .csp-from{color:var(--csp-text)!important}
.csp-widget[data-shadow="none"] .csp-toast{box-shadow:none!important}
.csp-widget[data-shadow="soft"] .csp-toast{box-shadow:0 8px 22px #19243a1c!important}
.csp-widget[data-shadow="strong"] .csp-toast{box-shadow:0 20px 60px #17203c69!important}
@media(max-width:640px){
 .csp-template-story .csp-toast{grid-template-columns:65px minmax(0,1fr);gap:6px}.csp-template-story .csp-thumb{width:65px;height:65px}
 .csp-template-polaroid .csp-toast{border-width:5px}.csp-template-polaroid .csp-thumb{height:95px;flex:none;width:100%}
 .csp-template-split .csp-thumb{width:36%;flex:0 0 36%;height:auto;min-height:88px}.csp-template-split .csp-toast-content{padding:11px 8px}
 .csp-template-badge .csp-toast{border-radius:4px 17px 4px 17px}
 .csp-template-orb .csp-thumb{height:62px;width:62px;flex:0 0 62px}
}

/* v0.5.1 — Unified corner dismiss control, optimized for every template.
   Aggressive WordPress/WoodMart global button and icon rules must not displace it. */
.csp-widget .csp-toast { position:relative; min-width:0; }
.csp-widget .csp-toast > .csp-close {
  box-sizing:border-box!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  bottom:auto!important;
  left:auto!important;
  float:none!important;
  clear:none!important;
  transform:none!important;
  translate:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:none!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.95)!important;
  color:#26344f!important;
  box-shadow:0 3px 12px rgba(15,23,42,.16)!important;
  font-size:0!important;
  line-height:1!important;
  text-align:center!important;
  text-decoration:none!important;
  text-indent:0!important;
  opacity:1!important;
  visibility:visible!important;
  cursor:pointer!important;
  z-index:12!important;
  pointer-events:auto!important;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease!important;
}
.csp-widget .csp-toast > .csp-close svg {
  display:block!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  overflow:visible!important;
  fill:none!important;
  stroke:currentColor!important;
  pointer-events:none!important;
  flex:none!important;
}
.csp-widget .csp-toast > .csp-close:hover,
.csp-widget .csp-toast > .csp-close:focus-visible {
  background:#ffffff!important;
  color:#6d28d9!important;
  box-shadow:0 4px 17px rgba(29,25,66,.24)!important;
}
.csp-widget .csp-toast > .csp-close:focus-visible {outline:2px solid var(--csp-accent,#7c3aed)!important;outline-offset:2px!important}
/* Non-bleed cards reserve a full control column. Row-reversed media moves left rather than hiding the X. */
.csp-widget:not(.csp-template-poster):not(.csp-template-polaroid):not(.csp-template-split) .csp-toast {
  padding-right:max(44px,calc(var(--csp-card-pad,14px) + 33px));
}
.csp-widget .csp-toast-content {min-width:0; max-width:100%; overflow-wrap:anywhere;}
.csp-widget .csp-buyer {max-width:100%;}
.csp-widget .csp-product-name {overflow-wrap:anywhere;word-break:normal;}
.csp-widget .csp-meta {min-width:0;max-width:100%;}
.csp-widget .csp-cta {max-width:100%;white-space:normal;overflow-wrap:anywhere;}
/* Full-bleed hero image templates keep their edge-to-edge image; the button sits over a small,
   opaque corner of the image rather than escaping the notification or blocking the title. */
.csp-widget.csp-template-poster .csp-toast,
.csp-widget.csp-template-polaroid .csp-toast,
.csp-widget.csp-template-split .csp-toast {padding-right:0;}
.csp-widget.csp-template-poster .csp-toast-content,
.csp-widget.csp-template-polaroid .csp-toast-content {padding-right:max(14px,var(--csp-card-pad,14px));padding-left:max(14px,var(--csp-card-pad,14px));}
.csp-widget.csp-template-split .csp-toast-content {padding-right:12px;padding-left:max(12px,var(--csp-card-pad,14px));}
.csp-widget.csp-template-split .csp-thumb,
.csp-widget.csp-template-poster .csp-thumb,
.csp-widget.csp-template-polaroid .csp-thumb {min-width:0;}
.csp-widget.csp-template-split .csp-thumb img,
.csp-widget.csp-template-poster .csp-thumb img,
.csp-widget.csp-template-polaroid .csp-thumb img {max-width:100%;}
/* Avoid a theme changing the flex direction of a real button or absolutely positioned control. */
.csp-widget .csp-toast > .csp-close { align-self:auto!important; order:99!important; }
@media (max-width:640px) {
  .csp-widget .csp-toast > .csp-close {width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;min-height:30px!important;max-height:30px!important;top:6px!important;right:6px!important;}
  .csp-widget:not(.csp-template-poster):not(.csp-template-polaroid):not(.csp-template-split) .csp-toast {padding-right:max(41px,calc(var(--csp-card-pad,9px) + 32px));}
  .csp-widget.csp-template-story .csp-toast {grid-template-columns:minmax(0,65px) minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce) {
  .csp-widget .csp-toast > .csp-close {transition:none!important;}
}


/* v0.5.2 — Bare corner X: no circle, surface, border, or shadow.
   The invisible tap area stays generous, while the visible icon occupies only 16px.
   Scoped and strengthened to resist WoodMart/global button styling. */
.csp-widget .csp-toast > button.csp-close,
.csp-widget .csp-toast > button.csp-close:hover,
.csp-widget .csp-toast > button.csp-close:active,
.csp-widget .csp-toast > button.csp-close:focus {
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:auto!important;
  inset:0 0 auto auto!important;
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  color:var(--csp-close-ink,#26344f)!important;
  opacity:.9!important;
  transform:none!important;
  transition:opacity .15s ease,color .15s ease!important;
  text-decoration:none!important;
  cursor:pointer!important;
  z-index:20!important;
}
.csp-widget .csp-toast > button.csp-close:hover,
.csp-widget .csp-toast > button.csp-close:focus-visible {opacity:1!important}
.csp-widget .csp-toast > button.csp-close:focus-visible {
  outline:2px solid var(--csp-accent,#7c3aed)!important;
  outline-offset:-3px!important;
}
.csp-widget .csp-toast > button.csp-close svg {
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  stroke:currentColor!important;
}
.csp-widget .csp-toast > button.csp-close svg path{stroke-width:2.35!important}
/* High-contrast glyph colours without painting any button background. */
.csp-widget.csp-template-gradient,.csp-widget.csp-template-dark,
.csp-widget.csp-template-neon,.csp-widget.csp-template-luxury,
.csp-widget.csp-template-ticker {--csp-close-ink:#fff}
.csp-widget.csp-template-ribbon {--csp-close-ink:#16243a}
.csp-widget.csp-template-poster,.csp-widget.csp-template-polaroid,
.csp-widget.csp-template-ticket,.csp-widget.csp-template-split,
.csp-widget.csp-template-ocean,.csp-widget.csp-template-sunset {--csp-close-ink:#24334b}
/* Give the horizontal card its full usable width again: no vacant close-button column. */
.csp-widget:not(.csp-template-poster):not(.csp-template-polaroid):not(.csp-template-split) .csp-toast {
  padding-right:var(--csp-card-pad,14px);
}
/* Only the first line on rightmost text rows reserves room for the glyph.
   Media-right and stacked designs already keep text away from the top-right edge. */
.csp-widget:not(.csp-template-ticket):not(.csp-template-editorial):not(.csp-template-ribbon):not(.csp-template-split):not(.csp-template-poster):not(.csp-template-polaroid):not(.csp-template-spotlight):not(.csp-template-orb) .csp-toast-content > .csp-buyer {
  padding-right:22px;
  white-space:normal;
  overflow-wrap:anywhere;
}
/* Keep nested content within the card without sacrificing its width. */
.csp-widget .csp-toast-content {flex:1 1 0;min-width:0;max-width:100%}
.csp-widget .csp-purchase,.csp-widget .csp-meta {min-width:0;max-width:100%;overflow-wrap:anywhere}
.csp-widget .csp-thumb {max-width:100%}
/* An overlay X on the right-hand artwork should sit in its corner without pushing the image. */
.csp-widget.csp-template-poster .csp-toast,
.csp-widget.csp-template-polaroid .csp-toast,
.csp-widget.csp-template-split .csp-toast {padding-right:0}
@media(max-width:640px){
  .csp-widget .csp-toast > button.csp-close,
  .csp-widget .csp-toast > button.csp-close:hover {top:0!important;right:0!important;width:32px!important;min-width:32px!important;max-width:32px!important;height:32px!important;min-height:32px!important;max-height:32px!important}
  .csp-widget:not(.csp-template-poster):not(.csp-template-polaroid):not(.csp-template-split) .csp-toast {padding-right:var(--csp-card-pad,9px)}
  .csp-widget:not(.csp-template-ticket):not(.csp-template-editorial):not(.csp-template-ribbon):not(.csp-template-split):not(.csp-template-poster):not(.csp-template-polaroid):not(.csp-template-spotlight):not(.csp-template-orb) .csp-toast-content > .csp-buyer {padding-right:20px}
}
@media(prefers-reduced-motion:reduce){.csp-widget .csp-toast > button.csp-close{transition:none!important}}

/* v0.5.3 Raised Corner Cap and Signature Shine.
   Keep the toast itself overflow:visible: a cap overhanging the edge cannot be
   positioned reliably while overflow:hidden clips it. Instead the shimmer is
   clipped by its own inset layer. Do not reserve a permanent close column. */
.csp-widget .csp-toast { overflow:visible!important; isolation:isolate; }
.csp-widget .csp-toast > button.csp-close,
.csp-widget .csp-toast > button.csp-close:hover,
.csp-widget .csp-toast > button.csp-close:focus,
.csp-widget .csp-toast > button.csp-close:active {
  position:absolute!important;
  inset:-17px -5px auto auto!important;
  top:-17px!important;right:-5px!important;left:auto!important;bottom:auto!important;
  width:34px!important;min-width:34px!important;max-width:34px!important;
  height:34px!important;min-height:34px!important;max-height:34px!important;
  padding:0!important;margin:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:12px 12px 12px 4px!important;
  background:#1d2945!important;background-image:linear-gradient(135deg,#4b3c75,#162540)!important;
  color:#fff!important;opacity:1!important;
  box-shadow:0 4px 14px rgba(8,17,41,.24)!important;
  transform:none!important;filter:none!important;z-index:30!important;
  cursor:pointer!important;transition:box-shadow .2s ease,background-color .2s ease!important;
}
.csp-widget .csp-toast > button.csp-close:hover,
.csp-widget .csp-toast > button.csp-close:focus-visible {
  background:#39236a!important;background-image:linear-gradient(135deg,#6843ae,#352559)!important;
  box-shadow:0 5px 18px rgba(43,23,79,.38)!important;
}
.csp-widget .csp-toast > button.csp-close svg,
.csp-widget .csp-toast > button.csp-close svg path {color:#fff!important;stroke:#fff!important;}
/* The text area remains wide. Visual content is not forced into a close-button column. */
.csp-widget .csp-toast-content{min-width:0;max-width:100%;position:relative;z-index:1}
.csp-widget .csp-thumb{position:relative;z-index:1}
/* Shine is an inert, self-clipped overlay (including full-image templates). */
.csp-widget .csp-toast > .csp-shine {
  display:block;position:absolute;inset:0;z-index:4;
  border-radius:inherit;overflow:hidden;pointer-events:none!important;
  background:transparent!important;
}
.csp-widget .csp-toast > .csp-shine::before {
  content:"";display:block;position:absolute;left:-120%;top:-40%;
  width:110%;height:180%;pointer-events:none;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.04) 41%,rgba(255,255,255,.30) 49%,rgba(255,255,255,.10) 53%,transparent 65%);
  transform:skewX(-19deg) translateX(0);
  opacity:0;
}
.csp-widget[data-shine="on"] .csp-toast.csp-visible:not(.csp-leaving) > .csp-shine::before {
  animation:csp-signature-shine var(--csp-shine-cycle,5.5s) ease-in-out infinite;
}
@keyframes csp-signature-shine {
  0%,9% {left:-120%;opacity:0}
  13% {opacity:.72}
  42% {left:115%;opacity:.72}
  50%,100% {left:115%;opacity:0}
}
/* Avoid any animations where motion is reduced; show no static white band. */
@media(prefers-reduced-motion:reduce){
 .csp-widget .csp-toast > .csp-shine::before{animation:none!important;opacity:0!important}
}
.csp-widget.csp-reduced .csp-toast > .csp-shine::before{animation:none!important;opacity:0!important}
@media(max-width:640px){
 .csp-widget .csp-toast > button.csp-close,
 .csp-widget .csp-toast > button.csp-close:hover,
 .csp-widget .csp-toast > button.csp-close:focus {
   inset:-17px -4px auto auto!important;top:-17px!important;right:-4px!important;
   width:34px!important;min-width:34px!important;max-width:34px!important;
   height:34px!important;min-height:34px!important;max-height:34px!important;
 }
}
/* The Polaroid frame has a thicker border, so offset its cap by that border. */
.csp-widget.csp-template-polaroid .csp-toast > button.csp-close {top:-25px!important;inset:-25px -5px auto auto!important}
@media(max-width:640px){.csp-widget.csp-template-polaroid .csp-toast > button.csp-close{top:-22px!important;inset:-22px -4px auto auto!important}}


/* v0.5.5 — ROLLBACK of v0.5.4 universal image-left redesign.
 * Keep the v0.5.3 geometry, image placement and typography on all 21 styles.
 * ONLY preserve the flush orange-to-coral top-right corner close control from
 * v0.5.4. All later rules here apply only to the button (not the card/layout).
 * This section overrides older raised cap declarations and hostile theme CSS.
 */
#csp-sales-pulse {--csp-close-first:#ffb53d;--csp-close-second:#ff563e}
#csp-sales-pulse .csp-toast > button.csp-close,
#csp-sales-pulse .csp-toast > button.csp-close:hover,
#csp-sales-pulse .csp-toast > button.csp-close:focus,
#csp-sales-pulse .csp-toast > button.csp-close:active,
#csp-sales-pulse.csp-template-polaroid .csp-toast > button.csp-close {
  -webkit-appearance:none!important;appearance:none!important;
  position:absolute!important;
  inset:0 0 auto auto!important;
  top:0!important;right:0!important;left:auto!important;bottom:auto!important;
  width:54px!important;height:54px!important;
  min-width:54px!important;min-height:54px!important;
  max-width:54px!important;max-height:54px!important;
  flex:none!important;float:none!important;clear:none!important;
  display:block!important;text-align:center!important;
  padding:0!important;margin:0!important;
  border:0!important;
  border-radius:0 var(--csp-card-radius,17px) 0 100%!important;
  background-color:#ff7938!important;
  background-image:linear-gradient(135deg,var(--csp-close-first,#ffb53d),var(--csp-close-second,#ff563e))!important;
  box-shadow:none!important;filter:none!important;
  color:white!important;opacity:1!important;
  outline:none!important;
  transform:none!important;translate:none!important;
  z-index:35!important;pointer-events:auto!important;
  line-height:1!important;font-size:0!important;
  cursor:pointer!important;
  transition:filter .2s ease!important;
}
#csp-sales-pulse .csp-toast > button.csp-close:hover {filter:brightness(1.08)!important}
#csp-sales-pulse .csp-toast > button.csp-close:focus-visible{outline:3px solid #fff!important;outline-offset:-3px!important}
#csp-sales-pulse .csp-toast > button.csp-close svg{
  display:block!important;position:absolute!important;
  top:8px!important;right:9px!important;
  width:19px!important;height:19px!important;
  min-width:19px!important;min-height:19px!important;
  padding:0!important;margin:0!important;
  stroke:#fff!important;color:#fff!important;
  filter:none!important;transform:none!important;opacity:1!important;
}
#csp-sales-pulse .csp-toast > button.csp-close svg path{stroke:#fff!important;stroke-width:2.5!important}
/* Progress and Shine retain their v0.5.3 styles, safely under the control. */
#csp-sales-pulse .csp-toast > .csp-shine{z-index:3!important}
#csp-sales-pulse .csp-toast > .csp-progress{z-index:7!important}
@media(max-width:640px){
 #csp-sales-pulse .csp-toast > button.csp-close,
 #csp-sales-pulse .csp-toast > button.csp-close:hover,
 #csp-sales-pulse.csp-template-polaroid .csp-toast > button.csp-close {
  inset:0 0 auto auto!important;top:0!important;right:0!important;
  width:47px!important;height:47px!important;
  min-width:47px!important;min-height:47px!important;
  max-width:47px!important;max-height:47px!important;
 }
 #csp-sales-pulse .csp-toast > button.csp-close svg {
  top:6px!important;right:7px!important;
  width:17px!important;height:17px!important;
  min-width:17px!important;min-height:17px!important;
 }
}
@media(prefers-reduced-motion:reduce){#csp-sales-pulse .csp-toast > button.csp-close{transition:none!important}}


/* v0.5.6 — Small corner, protected thumbnail for the original Promo Ribbon.
   Scope media adjustments to Ribbon ONLY: preserve all 21 original layouts.
   #csp-sales-pulse is deliberate to outrank old theme/global button rules. */
#csp-sales-pulse .csp-toast > button.csp-close,
#csp-sales-pulse .csp-toast > button.csp-close:hover,
#csp-sales-pulse .csp-toast > button.csp-close:focus,
#csp-sales-pulse .csp-toast > button.csp-close:active,
#csp-sales-pulse.csp-template-polaroid .csp-toast > button.csp-close {
  width:40px!important;min-width:40px!important;max-width:40px!important;
  height:40px!important;min-height:40px!important;max-height:40px!important;
  inset:0 0 auto auto!important;
}
#csp-sales-pulse .csp-toast > button.csp-close svg {
  top:6px!important;right:7px!important;
  width:16px!important;height:16px!important;
  min-width:16px!important;min-height:16px!important;
}
/* Keep the product on the right, but draw it inward across the navy/gold
   diagonal so the corner never overlaps the product frame. */
#csp-sales-pulse.csp-template-ribbon .csp-toast {flex-direction:row-reverse!important}
#csp-sales-pulse.csp-template-ribbon .csp-toast > .csp-thumb {
  margin-right:34px!important;
  margin-left:0!important;
  flex-shrink:0!important;
  position:relative!important;
  align-self:center!important;
  z-index:2!important;
}
#csp-sales-pulse.csp-template-ribbon .csp-toast-content{min-width:0!important;flex:1 1 0!important}
#csp-sales-pulse.csp-template-ribbon .csp-buyer{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
#csp-sales-pulse.csp-template-ribbon .csp-purchase {overflow-wrap:anywhere!important}
@media(max-width:640px){
 #csp-sales-pulse .csp-toast > button.csp-close,
 #csp-sales-pulse .csp-toast > button.csp-close:hover,
 #csp-sales-pulse .csp-toast > button.csp-close:focus,
 #csp-sales-pulse.csp-template-polaroid .csp-toast > button.csp-close {
  width:32px!important;min-width:32px!important;max-width:32px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  inset:0 0 auto auto!important;
 }
 #csp-sales-pulse .csp-toast > button.csp-close svg{
  top:5px!important;right:5px!important;
  width:13px!important;height:13px!important;
  min-width:13px!important;min-height:13px!important;
 }
 #csp-sales-pulse.csp-template-ribbon .csp-toast > .csp-thumb{
  margin-right:30px!important;
 }
}

/* v0.7.0 - Precision Studio. The default options are visually identical to v0.5.6. */
#csp-sales-pulse .csp-toast > .csp-thumb {
  translate:var(--csp-image-nudge,0px) 0;
}
#csp-sales-pulse .csp-toast > button.csp-close,
#csp-sales-pulse .csp-toast > button.csp-close:hover,
#csp-sales-pulse .csp-toast > button.csp-close:focus,
#csp-sales-pulse .csp-toast > button.csp-close:active {
  width:var(--csp-corner-desktop,40px)!important;
  min-width:var(--csp-corner-desktop,40px)!important;
  max-width:var(--csp-corner-desktop,40px)!important;
  height:var(--csp-corner-desktop,40px)!important;
  min-height:var(--csp-corner-desktop,40px)!important;
  max-height:var(--csp-corner-desktop,40px)!important;
}
#csp-sales-pulse.csp-template-ribbon .csp-toast > .csp-thumb {
  margin-right:max(34px,calc(var(--csp-corner-desktop,40px) - 6px))!important;
}
@media(max-width:640px){
  #csp-sales-pulse .csp-toast > button.csp-close,
  #csp-sales-pulse .csp-toast > button.csp-close:hover,
  #csp-sales-pulse .csp-toast > button.csp-close:focus,
  #csp-sales-pulse .csp-toast > button.csp-close:active {
    width:var(--csp-corner-phone,32px)!important;
    min-width:var(--csp-corner-phone,32px)!important;
    max-width:var(--csp-corner-phone,32px)!important;
    height:var(--csp-corner-phone,32px)!important;
    min-height:var(--csp-corner-phone,32px)!important;
    max-height:var(--csp-corner-phone,32px)!important;
  }
  #csp-sales-pulse.csp-template-ribbon .csp-toast > .csp-thumb {
    margin-right:max(30px,calc(var(--csp-corner-phone,32px) - 2px))!important;
  }
}
/* Outline effect uses an inert layer, not the card's box-shadow, so original template shadows remain. */
#csp-sales-pulse[data-glow="soft"] .csp-toast::after,
#csp-sales-pulse[data-glow="vivid"] .csp-toast::after {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  z-index:4;
  border:1px solid var(--csp-glow-color,#8b5cf6);
  box-shadow:inset 0 0 7px var(--csp-glow-color,#8b5cf6);
  opacity:.35;
  pointer-events:none;
}
#csp-sales-pulse[data-glow="vivid"] .csp-toast::after {opacity:.65;animation:csp-precision-glow 3.7s ease-in-out infinite}
@keyframes csp-precision-glow {0%,100%{opacity:.35}50%{opacity:.75}}
#csp-sales-pulse[data-micro-motion="image"] .csp-toast.csp-visible .csp-thumb img {animation:csp-precision-image 5s ease-in-out infinite}
#csp-sales-pulse[data-micro-motion="badge"] .csp-toast.csp-visible .csp-featured-label,
#csp-sales-pulse[data-micro-motion="badge"] .csp-toast.csp-visible .csp-confirmed {animation:csp-precision-badge 4.3s ease-in-out infinite}
@keyframes csp-precision-image {0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes csp-precision-badge {0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
@media(prefers-reduced-motion:reduce){
 #csp-sales-pulse[data-glow] .csp-toast::after,
 #csp-sales-pulse[data-micro-motion] .csp-toast .csp-thumb img,
 #csp-sales-pulse[data-micro-motion] .csp-toast .csp-featured-label,
 #csp-sales-pulse[data-micro-motion] .csp-toast .csp-confirmed {animation:none!important}
}
#csp-sales-pulse.csp-reduced .csp-toast::after,
#csp-sales-pulse.csp-reduced .csp-toast .csp-thumb img,
#csp-sales-pulse.csp-reduced .csp-toast .csp-featured-label {animation:none!important}