/**
 * Front-end notification styles (scoped under .xswclsn-notifications).
 *
 * Storefront: cards render inside #xswclsn-notification-stack.xswclsn-notifications.
 * Editor preview: same classes under .xswclsn-notif-preview-scope .xswclsn-notifications.
 * All descendant selectors are prefixed with ".xswclsn-notifications " so theme rules
 * targeting generic elements do not win over plugin components.
 *
 * Physical file order (cascade-safe — do NOT reorder sections):
 *
 *   SECTION 1  WRAPPER        — design tokens, stack, isolation, box-sizing
 *   SECTION 2  MOTION         — @keyframes, entrance/exit animation classes
 *   SECTION 3  SHARED PRIMS   — base card, close button, badge, stars, button
 *   SECTION 4  SHARED ELEMENTS — headline, sub, link, row, body, time, product,
 *                                testimonial-centered chrome, simple-row chrome
 *   SECTION 5  GLOBAL STYLE 1–10 — [class$="-N"] visual treatments, category
 *                                   palette tokens, coupon radius patch after each N
 *                                   *** MUST precede all per-category variant sections ***
 *   SECTION 6  STYLE OVERRIDES  — element adjustments for dark/gradient cards
 *   SECTION 7  SIMPLE         — icon-wrap variants, promo-label, T1–T10
 *   SECTION 8  COUPON         — type chrome, cpn-* components, T1–T8
 *   SECTION 9  TESTIMONIALS   — type chrome, tml-* components, T1–T6
 *   SECTION 10 REAL ORDER     — type chrome, ro-* components, T1–T8
 *   SECTION 11 COUNTER        — type chrome, vc-* components, T1–T6
 *   SECTION 12 SOCIAL FOLLOW  — type chrome, sf-* components, T1–T5
 *   SECTION 13 A11Y + RESPONSIVE — prefers-reduced-motion, 768px, 769px+
 */

/* ── 1. WRAPPER — descendant box model + design tokens + stack position ───── */

.xswclsn-notifications *,
.xswclsn-notifications *::before,
.xswclsn-notifications *::after {
	box-sizing: border-box;
}
.xswclsn-notifications {
  /* Typography scale */
  --xswclsn-fz-sm: 13px;
  --xswclsn-fz-md: 14px;
  --xswclsn-fz-lg: 16px;
  --xswclsn-fz-xl: 18px;
  /* 8px spacing grid */
  --xswclsn-space-xs: 4px;
  --xswclsn-space-sm: 8px;
  --xswclsn-space-md: 12px;
  --xswclsn-space-lg: 16px;
  --xswclsn-space-xl: 24px;
  /* Radii: default card = md (Material / Ant use ~8px) */
  --xswclsn-radius: 8px;
  --xswclsn-radius-sm: 6px;
  --xswclsn-radius-md: 8px;
  --xswclsn-radius-lg: 12px;
  --xswclsn-radius-xl: 16px;
  --xswclsn-radius-2xl: 18px;
  --xswclsn-radius-3xl: 20px;
  --xswclsn-radius-full: 9999px;
  /* Toast container (Material min width ~288dp; common max ~360px) */
  --xswclsn-toast-min-width: 288px;
  --xswclsn-toast-max-width: 360px;
  --xswclsn-toast-max-width-mobile: calc(100vw - (2 * var(--xswclsn-space-lg)));
  --xswclsn-toast-max-width-tablet: 360px;
  --xswclsn-toast-max-width-desktop: 380px;
  --xswclsn-toast-padding-x: 16px;
  --xswclsn-toast-padding-y: 14px;
  --xswclsn-toast-padding-end: 32px;
  --xswclsn-line-height-body: 1.45;
  --xswclsn-line-height-tight: 1.25;
  --xswclsn-headline-fz: var(--xswclsn-fz-lg);
  --xswclsn-sub-fz: var(--xswclsn-fz-sm);
  --xswclsn-message-fz: var(--xswclsn-fz-md);
  --xswclsn-meta-fz: var(--xswclsn-fz-sm);
  /* Elevation (Material-like layers) */
  --xswclsn-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --xswclsn-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --xswclsn-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.08);
  --xswclsn-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.1);
  --xswclsn-shadow-4: 0 12px 32px rgba(0, 0, 0, 0.12);
  /* Motion (entrance: fade = scale + opacity in place / slower; slide = directional move / snappier) */
  --xswclsn-motion-duration-enter: 0.35s;
  --xswclsn-motion-duration-enter-fade: 0.85s;
  --xswclsn-motion-duration-enter-slide: 0.45s;
  --xswclsn-motion-duration-exit: 0.25s;
  --xswclsn-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --xswclsn-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --xswclsn-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  /* Touch: Apple HIG / Material min target 44–48dp */
  --xswclsn-touch-target-min: 44px;
  /* Primary / secondary actions */
  --xswclsn-btn-height-md: 36px;
  --xswclsn-btn-height-sm: 32px;
  --xswclsn-btn-height-lg: 40px;
  --xswclsn-btn-height-compact: 30px;
  --xswclsn-btn-padding-x: 16px;
  --xswclsn-btn-font-size: 13px;
  --xswclsn-btn-radius: 8px;
  /* Icon containers (inline with MD icon leading area) */
  --xswclsn-icon-container-sm: 40px;
  --xswclsn-icon-container-md: 40px;
  --xswclsn-icon-container-lg: 48px;
  --xswclsn-icon-svg-sm: 20px;
  --xswclsn-icon-svg-md: 20px;
  --xswclsn-icon-svg-lg: 26px;
  /* Simple category structure system */
  --xswclsn-simple-gap-row: var(--xswclsn-space-md);
  --xswclsn-simple-gap-row-lg: var(--xswclsn-space-lg);
  --xswclsn-simple-gap-stack: 6px;
  --xswclsn-simple-title-weight: 600;
  --xswclsn-simple-sub-weight: 400;
  --xswclsn-simple-callline-size: var(--xswclsn-fz-xl);
  --xswclsn-simple-callline-weight: 700;
  --xswclsn-simple-icon-size: var(--xswclsn-icon-svg-sm);
  --xswclsn-simple-icon-size-lg: var(--xswclsn-icon-svg-lg);
  /* Focus visible (WCAG) */
  --xswclsn-focus-ring: 2px solid rgba(56, 88, 233, 0.45);
  --xswclsn-focus-ring-offset: 2px;
  /* Surface */
  --xswclsn-bg: #fff;
  --xswclsn-border: #e0e0e0;
  --xswclsn-text: #1d2327;
  --xswclsn-text-muted: #646970;
  --xswclsn-badge-bg: rgba(15, 23, 42, 0.08);
  --xswclsn-badge-text: rgba(15, 23, 42, 0.9);
  position: fixed;
  z-index: 999999;
  min-width: 0;
  max-width: var(--xswclsn-toast-max-width);
  width: min(100%, var(--xswclsn-toast-max-width));
  pointer-events: none;
  isolation: isolate;
}

.xswclsn-notifications--top_left {
  top: var(--xswclsn-space-lg);
  left: var(--xswclsn-space-lg);
}

.xswclsn-notifications--top_right {
  top: var(--xswclsn-space-lg);
  right: var(--xswclsn-space-lg);
}

.xswclsn-notifications--bottom_left {
  bottom: var(--xswclsn-space-lg);
  left: var(--xswclsn-space-lg);
}

.xswclsn-notifications--bottom_right {
  bottom: var(--xswclsn-space-lg);
  right: var(--xswclsn-space-lg);
}

/* Mobile stack: centered strip (top / bottom) */
.xswclsn-notifications--top {
  top: var(--xswclsn-space-lg);
  left: var(--xswclsn-space-lg);
  right: var(--xswclsn-space-lg);
  margin-left: auto;
  margin-right: auto;
}

.xswclsn-notifications--bottom {
  bottom: var(--xswclsn-space-lg);
  left: var(--xswclsn-space-lg);
  right: var(--xswclsn-space-lg);
  margin-left: auto;
  margin-right: auto;
}

/* Mobile position overrides (per-notification) applied via JS class */
.xswclsn-notifications.xswclsn-mobile--bottom_full {
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  border-radius: 0;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .xswclsn-notifications {
    max-width: min(var(--xswclsn-toast-max-width-tablet), calc(100vw - (2 * var(--xswclsn-space-lg))));
    width: min(100%, var(--xswclsn-toast-max-width-tablet));
    isolation: isolate;
  }
}

@media (min-width: 1025px) {
  .xswclsn-notifications {
    max-width: var(--xswclsn-toast-max-width-desktop);
    width: min(100%, var(--xswclsn-toast-max-width-desktop));
    isolation: isolate;
  }
}

/* ── 2. MOTION — @keyframes + card entrance / exit ───────────────────────── */

@keyframes xswclsn-card-enter-fade {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  35% {
    opacity: 0.35;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide: strong directional motion from the stack edge (distinct from fade’s in-place scale + opacity). */
@keyframes xswclsn-card-enter-slide-bottom {
  from { opacity: 0; transform: translate3d(0, 52px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes xswclsn-card-enter-slide-top {
  from { opacity: 0; transform: translate3d(0, -52px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes xswclsn-card-enter-slide-bottom-right {
  from { opacity: 0; transform: translate3d(36px, 48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes xswclsn-card-enter-slide-bottom-left {
  from { opacity: 0; transform: translate3d(-36px, 48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes xswclsn-card-enter-slide-top-right {
  from { opacity: 0; transform: translate3d(36px, -48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes xswclsn-card-enter-slide-top-left {
  from { opacity: 0; transform: translate3d(-36px, -48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Exit: mirror entrance timing; slide exits toward the same edge the card entered from. */
@keyframes xswclsn-card-exit-fade {
  from {
    opacity: 1;
    transform: scale(1);
  }
  65% {
    opacity: 0.35;
  }
  to {
    opacity: 0;
    transform: scale(0.86);
  }
}

@keyframes xswclsn-card-exit-slide-bottom {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, 52px, 0); }
}

@keyframes xswclsn-card-exit-slide-top {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -52px, 0); }
}

@keyframes xswclsn-card-exit-slide-bottom-right {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(36px, 48px, 0); }
}

@keyframes xswclsn-card-exit-slide-bottom-left {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-36px, 48px, 0); }
}

@keyframes xswclsn-card-exit-slide-top-right {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(36px, -48px, 0); }
}

@keyframes xswclsn-card-exit-slide-top-left {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-36px, -48px, 0); }
}

/* ── 3. SHARED PRIMITIVES — base card, close, message, badge (all categories) ─ */

.xswclsn-notifications .xswclsn-notification-card {
  position: relative;
  background: var(--xswclsn-bg);
  border: 1px solid var(--xswclsn-border);
  /* Style slider / applyStyleOverrideVars set --xswclsn-radius on the card; coupon & other types use this fallback chain. */
  border-radius: var(--xswclsn-radius, var(--xswclsn-radius-md));
  box-shadow: var(--xswclsn-shadow);
  padding: var(--xswclsn-toast-padding-y) var(--xswclsn-toast-padding-x);
  padding-right: var(--xswclsn-toast-padding-end);
  margin-bottom: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--xswclsn-fz-md);
  color: var(--xswclsn-text);
  pointer-events: auto;
  line-height: var(--xswclsn-line-height-body);
  transition:
    opacity var(--xswclsn-motion-duration-exit) var(--xswclsn-motion-easing-standard),
    transform var(--xswclsn-motion-duration-exit) var(--xswclsn-motion-easing-standard);
}

.xswclsn-notifications .xswclsn-notification-card--entrance-fade_in {
  animation: xswclsn-card-enter-fade var(--xswclsn-motion-duration-enter-fade) var(--xswclsn-motion-easing-decelerate) forwards;
  transform-origin: center center;
}

/* Default slide (e.g. unknown corner): upward from below */
.xswclsn-notifications .xswclsn-notification-card--entrance-slide_in {
  animation: xswclsn-card-enter-slide-bottom var(--xswclsn-motion-duration-enter-slide) var(--xswclsn-motion-easing-emphasized) forwards;
}

.xswclsn-notifications--bottom_right .xswclsn-notification-card--entrance-slide_in {
  animation-name: xswclsn-card-enter-slide-bottom-right;
}

.xswclsn-notifications--bottom_left .xswclsn-notification-card--entrance-slide_in {
  animation-name: xswclsn-card-enter-slide-bottom-left;
}

.xswclsn-notifications--bottom .xswclsn-notification-card--entrance-slide_in {
  animation-name: xswclsn-card-enter-slide-bottom;
}

.xswclsn-notifications--top_right .xswclsn-notification-card--entrance-slide_in {
  animation-name: xswclsn-card-enter-slide-top-right;
}

.xswclsn-notifications--top_left .xswclsn-notification-card--entrance-slide_in {
  animation-name: xswclsn-card-enter-slide-top-left;
}

.xswclsn-notifications--top .xswclsn-notification-card--entrance-slide_in {
  animation-name: xswclsn-card-enter-slide-top;
}

.xswclsn-notifications .xswclsn-notification-card--entrance-none {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Per-notification motion exit (matches resolved_motion + stack position). */
.xswclsn-notifications .xswclsn-notification-card--exit-motion-fade {
  animation: xswclsn-card-exit-fade var(--xswclsn-motion-duration-enter-fade) var(--xswclsn-motion-easing-decelerate) forwards;
  transform-origin: center center;
}

.xswclsn-notifications .xswclsn-notification-card--exit-motion-slide {
  animation: xswclsn-card-exit-slide-bottom var(--xswclsn-motion-duration-enter-slide) var(--xswclsn-motion-easing-emphasized) forwards;
}

.xswclsn-notifications--bottom_right .xswclsn-notification-card--exit-motion-slide {
  animation-name: xswclsn-card-exit-slide-bottom-right;
}

.xswclsn-notifications--bottom_left .xswclsn-notification-card--exit-motion-slide {
  animation-name: xswclsn-card-exit-slide-bottom-left;
}

.xswclsn-notifications--bottom .xswclsn-notification-card--exit-motion-slide {
  animation-name: xswclsn-card-exit-slide-bottom;
}

.xswclsn-notifications--top_right .xswclsn-notification-card--exit-motion-slide {
  animation-name: xswclsn-card-exit-slide-top-right;
}

.xswclsn-notifications--top_left .xswclsn-notification-card--exit-motion-slide {
  animation-name: xswclsn-card-exit-slide-top-left;
}

.xswclsn-notifications--top .xswclsn-notification-card--exit-motion-slide {
  animation-name: xswclsn-card-exit-slide-top;
}

.xswclsn-notifications .xswclsn-notification-card--exit-motion-none {
  opacity: 0;
  animation: none;
}

.xswclsn-notifications .xswclsn-notification-card__close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  box-sizing: border-box;
  width: var(--xswclsn-touch-target-min);
  height: var(--xswclsn-touch-target-min);
  padding: 0;
  border: none;
  border-radius: var(--xswclsn-radius-sm);
  background: transparent;
  color: var(--xswclsn-text-muted);
  font-size: var(--xswclsn-fz-lg, 16px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}
.xswclsn-notifications .xswclsn-notification-card__close::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--xswclsn-radius-sm);
}
.xswclsn-notifications .xswclsn-notification-card__close:hover {
  color: var(--xswclsn-text);
  background: var(--xswclsn-badge-bg);
}
.xswclsn-notifications .xswclsn-notification-card__close--hover-only {
  opacity: 0;
}
.xswclsn-notifications .xswclsn-notification-card:hover .xswclsn-notification-card__close--hover-only {
  opacity: 1;
}
.xswclsn-notifications .xswclsn-notification-card__close:focus-visible {
  outline: var(--xswclsn-focus-ring);
  outline-offset: var(--xswclsn-focus-ring-offset);
}
.xswclsn-notifications .xswclsn-notification-card__close:focus:not(:focus-visible) {
  outline: none;
}

.xswclsn-notifications .xswclsn-notification-card__message {
  margin: 0 0 var(--xswclsn-space-xs);
  font-size: var(--xswclsn-message-fz, var(--xswclsn-fz-md));
  line-height: var(--xswclsn-line-height-body);
}
.xswclsn-notifications .xswclsn-notification-card__time {
  display: block;
  font-size: var(--xswclsn-meta-fz, var(--xswclsn-fz-sm));
  color: var(--xswclsn-text-muted);
  margin-top: var(--xswclsn-space-xs);
}

/* Category-level baseline standards (content scale, spacing, icon size) */
.xswclsn-notifications .xswclsn-notification-card--simple {
  --xswclsn-headline-fz: var(--xswclsn-fz-lg);
  --xswclsn-sub-fz: var(--xswclsn-fz-sm);
  --xswclsn-message-fz: var(--xswclsn-fz-md);
}

.xswclsn-notifications .xswclsn-notification-card--coupon {
  --xswclsn-headline-fz: var(--xswclsn-fz-lg);
  --xswclsn-sub-fz: var(--xswclsn-fz-sm);
  --xswclsn-message-fz: var(--xswclsn-fz-md);
}

.xswclsn-notifications .xswclsn-notification-card--testimonials {
  --xswclsn-headline-fz: var(--xswclsn-fz-lg);
  --xswclsn-sub-fz: var(--xswclsn-fz-sm);
  --xswclsn-message-fz: var(--xswclsn-fz-md);
}

/* Testimonials overlap: #xswclsn-notification-stack gets .xswclsn-tml-overlap-session while a multi-quote run is active; prepending a newer card shifts older ones with a short FLIP transform in frontend.js. */
/* Recent purchases multi-story: same overlap hook pattern as testimonials (.xswclsn-ro-overlap-session + FLIP in frontend.js). */

/* Editor + PHP wrap multiple Recent purchase cards in this flex column (storefront inserts cards into #stack, not this wrapper). */
.xswclsn-notifications .xswclsn-ro-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xswclsn-space-sm, 8px);
}

/* Recent + Sample purchase notifications: shared type hook (see PHP render_card). */
.xswclsn-notifications .xswclsn-notification-card--purchase,
.xswclsn-notifications .xswclsn-notification-card--real-order,
.xswclsn-notifications .xswclsn-notification-card--dummy-order {
  --xswclsn-message-fz: var(--xswclsn-fz-md);
  --xswclsn-meta-fz: var(--xswclsn-fz-sm);
}

.xswclsn-notifications .xswclsn-notification-card--counter {
  --xswclsn-message-fz: var(--xswclsn-fz-md);
  --xswclsn-meta-fz: var(--xswclsn-fz-sm);
}

.xswclsn-notifications .xswclsn-notification-card--social {
  --xswclsn-headline-fz: var(--xswclsn-fz-lg);
  --xswclsn-sub-fz: var(--xswclsn-fz-sm);
  --xswclsn-message-fz: var(--xswclsn-fz-md);
}

/* Simple type: optional image and button */
.xswclsn-notifications .xswclsn-notification-card__simple-img { margin-bottom: var(--xswclsn-space-sm); }
.xswclsn-notifications .xswclsn-notification-card__simple-img img { max-width: 100%; height: auto; display: block; border-radius: var(--xswclsn-radius); }
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-left { text-align: left; }
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-center { text-align: center; }
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-right { text-align: right; }
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-left img,
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-center img,
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-right img { margin-left: auto; margin-right: auto; }
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-right img { margin-left: auto; margin-right: 0; }
.xswclsn-notifications .xswclsn-notification-card__simple-img--align-left img { margin-left: 0; margin-right: auto; }
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row,
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__row { display: flex; align-items: flex-start; gap: var(--xswclsn-space-md); }
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row .xswclsn-notification-card__simple-img,
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__row .xswclsn-notification-card__simple-img { margin-bottom: 0; flex-shrink: 0; }
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row .xswclsn-notification-card__simple-img img,
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__row .xswclsn-notification-card__simple-img img { max-width: 64px; max-height: 64px; object-fit: cover; }
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__btn,
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__btn { margin-top: var(--xswclsn-space-sm); }

/* Premium UI primitives */
.xswclsn-notifications .xswclsn-notification-card__badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--xswclsn-badge-bg);
  color: var(--xswclsn-badge-text);
  margin-bottom: var(--xswclsn-space-sm);
}

.xswclsn-notifications .xswclsn-notification-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--xswclsn-btn-height-md);
  height: auto;
  padding: 8px var(--xswclsn-btn-padding-x);
  border-radius: var(--xswclsn-btn-radius);
  border: 1px solid var(--xswclsn-border);
  background: #fff;
  color: var(--xswclsn-text);
  font-size: var(--xswclsn-btn-font-size);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.xswclsn-notifications .xswclsn-notification-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.xswclsn-notifications .xswclsn-notification-card__btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.xswclsn-notifications .xswclsn-notification-card__thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #f0f0f1;
  flex-shrink: 0;
}

.xswclsn-notifications .xswclsn-notification-card__thumb--ph {
  display: inline-block;
  background: linear-gradient(135deg, rgba(2,132,199,0.15), rgba(99,102,241,0.12));
}

.xswclsn-notifications .xswclsn-notification-card__rating { display: flex; gap: 3px; margin: 4px 0 0; }
.xswclsn-notifications .xswclsn-notification-card__rating .xswclsn-star { font-size: var(--xswclsn-fz-md, 14px); color: #d1d5db; }
.xswclsn-notifications .xswclsn-notification-card__rating .xswclsn-star.is-on { color: #eab308; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-row { display: flex; gap: 10px; align-items: flex-start; }
/* Testimonials left/right photo: vertical alignment of avatar vs text block */
.xswclsn-notifications .xswclsn-notification-card__testimonial-row--v-top { align-items: flex-start; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-row--v-center { align-items: center; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-row--v-bottom { align-items: flex-end; }
.xswclsn-notifications .xswclsn-tml-compact-row.xswclsn-notification-card__testimonial-row--v-top { align-items: flex-start; }
.xswclsn-notifications .xswclsn-tml-compact-row.xswclsn-notification-card__testimonial-row--v-center { align-items: center; }
.xswclsn-notifications .xswclsn-tml-compact-row.xswclsn-notification-card__testimonial-row--v-bottom { align-items: flex-end; }
.xswclsn-notifications .xswclsn-notification-card__avatar { flex-shrink: 0; width: var(--xswclsn-icon-container-sm); height: var(--xswclsn-icon-container-sm); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--xswclsn-badge-bg); color: var(--xswclsn-badge-text); }
.xswclsn-notifications .xswclsn-notification-card__avatar-img { flex-shrink: 0; width: var(--xswclsn-icon-container-sm); height: var(--xswclsn-icon-container-sm); border-radius: 50%; object-fit: cover; display: block; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-body { flex: 1; min-width: 0; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-link { display: block; text-decoration: none; color: inherit; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-link:hover { color: inherit; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap { margin-bottom: 6px; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap:last-child { margin-bottom: 0; margin-top: 6px; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap--align-top { text-align: left; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap--align-center { text-align: center; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap--align-bottom { text-align: right; }
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap .xswclsn-notification-card__avatar,
.xswclsn-notifications .xswclsn-notification-card__testimonial-avatar-wrap .xswclsn-notification-card__avatar-img { display: inline-block; }
.xswclsn-notifications .xswclsn-notification-card__author-line { display: block; font-size: var(--xswclsn-fz-sm); font-weight: 600; color: var(--xswclsn-text); margin-bottom: 2px; }
.xswclsn-notifications .xswclsn-notification-card__quote {
  margin: 0 0 var(--xswclsn-space-xs);
  word-break: break-word;
}

/* ========== SECTION 4 — SHARED LAYOUT PRIMITIVES (headline, banner, promo, simple rows) ========== */

/* =====================================================================
   NEW STRUCTURAL ELEMENTS — used by variant-specific layouts
   ===================================================================== */

/* ── Generic shared elements ─────────────────────────────────── */

/* Generic headline (works outside --coupon scope) */
.xswclsn-notifications .xswclsn-notification-card__headline {
  font-size: var(--xswclsn-headline-fz, var(--xswclsn-fz-lg));
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 var(--xswclsn-space-xs);
  line-height: var(--xswclsn-line-height-tight);
  color: var(--xswclsn-text);
}

/* Subtitle / secondary line below headline */
.xswclsn-notifications .xswclsn-notification-card__sub {
  font-size: var(--xswclsn-sub-fz, var(--xswclsn-fz-sm));
  color: var(--xswclsn-text-muted);
  margin: 0 0 var(--xswclsn-space-sm);
  line-height: 1.4;
}

/* Inline text link */
.xswclsn-notifications .xswclsn-notification-card__link {
  display: inline-block;
  font-size: var(--xswclsn-fz-sm);
  font-weight: 600;
  color: var(--xswclsn-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  margin-top: var(--xswclsn-space-xs);
  pointer-events: auto;
}
.xswclsn-notifications .xswclsn-notification-card__link:hover { opacity: .7; }

/* ── SIMPLE: Horizontal mini-toast (V1-4) ────────────────────── */

.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--xswclsn-space-sm);
}
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row .xswclsn-notification-card__body {
  flex: 1;
  min-width: 0;
}

/* ── SIMPLE: Info card (V5-7) ────────────────────────────────── */

/* Centered layout for V5-7 */
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-5"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-6"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-7"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-template-simple-7 {
  text-align: center;
}

/* ── SIMPLE: Promo announcement (V8-10) ──────────────────────── */

/* Bold promotional text like "FREE SHIPPING" */
.xswclsn-notifications .xswclsn-notification-card__promo-label {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc, currentColor);
  margin-bottom: var(--xswclsn-space-xs);
  line-height: 1.1;
}

/* ── TESTIMONIALS: Centered quote (V6-10) ────────────────────── */

.xswclsn-notifications .xswclsn-notification-card__testimonial-centered { text-align: center; }

/* Large opening quotation mark */
.xswclsn-notifications .xswclsn-notification-card__quote-mark {
  display: block;
  font-size: 3rem;
  line-height: .9;
  color: var(--tc, currentColor);
  opacity: .3;
  font-family: Georgia, 'Times New Roman', serif;
  margin-bottom: -4px;
}

.xswclsn-notifications .xswclsn-notification-card__testimonial-centered .xswclsn-notification-card__rating {
  justify-content: center;
  margin: 6px 0 4px;
}
.xswclsn-notifications .xswclsn-notification-card__testimonial-centered .xswclsn-notification-card__author-line {
  display: block;
  text-align: center;
  font-style: italic;
  font-weight: 400;
  color: var(--xswclsn-text-muted);
  margin-top: 2px;
}


/* =====================================================================
   SECTION 5 — GLOBAL STYLE 1–10 — [class$="-N"] visual treatments
   + category palette tokens + coupon radius patch after each N.
   IMPORTANT: this section MUST remain before Sections 7–12 (per-category
   variant rules) so the cascade order lets variant rules override global.
   ===================================================================== */

/* ── Category color palette tokens ──────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"]       {--tc:#3858e9;--tc-l:#eef2ff;--tc-d:#1e40af;--tc-a:rgba(56,88,233,.14)}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-coupon-"]        {--tc:#047857;--tc-l:#d1fae5;--tc-d:#065f46;--tc-a:rgba(4,120,87,.14)}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-testimonials-"]  {--tc:#7c3aed;--tc-l:#f5f3ff;--tc-d:#5b21b6;--tc-a:rgba(124,58,237,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2          {--tc:#059669;--tc-l:#d1fae5;--tc-d:#064e3b;--tc-a:rgba(5,150,105,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4          {--tc:#d97706;--tc-l:#fef3c7;--tc-d:#78350f;--tc-a:rgba(217,119,6,.14)}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-real-order-"]    {--tc:var(--xswclsn-primary,#dc2626);--tc-l:#fee2e2;--tc-d:#991b1b;--tc-a:rgba(220,38,38,.14)}
/* dummy_order shares real_order variant CSS (dual class); no separate --tc row */
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-counter-"]       {--tc:#0891b2;--tc-l:#cffafe;--tc-d:#155e75;--tc-a:rgba(8,145,178,.14)}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-social-"]        {--tc:#2563eb;--tc-l:#dbeafe;--tc-d:#1d4ed8;--tc-a:rgba(37,99,235,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-social-2                 {--tc:#0d9488;--tc-l:#ccfbf1;--tc-d:#0f766e;--tc-a:rgba(13,148,136,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-social-3                 {--tc:#7c3aed;--tc-l:#f5f3ff;--tc-d:#5b21b6;--tc-a:rgba(124,58,237,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-social-4                 {--tc:#e11d48;--tc-l:#fff1f2;--tc-d:#be123c;--tc-a:rgba(225,29,72,.14)}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 1 · CLASSIC
   Bold colored left-border accent, clean white card, professional.
   Like Stripe, Linear, Vercel notification toasts.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-1"] {
  border:1px solid #e5e7eb;
  border-left:4px solid var(--tc);
  border-radius:2px 10px 10px 2px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding-left:16px;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-1"] .xswclsn-notification-card__btn{background:var(--tc);border-color:var(--tc);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-1"] .xswclsn-notification-card__code{background:var(--tc-l);border-color:var(--tc);color:var(--tc-d);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-1"] .xswclsn-notification-card__count{color:var(--tc)}
.xswclsn-notifications .xswclsn-notification-card[class$="-1"] .xswclsn-notification-card__quote{font-style:italic}
.xswclsn-notifications .xswclsn-notification-card[class$="-1"] .xswclsn-notification-card__product{color:var(--tc-d)}

/* Coupon T1: override style-1 asymmetric radius so per-design rounded corners match editor. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1[class$="-1"] {
  border-radius: var(--xswclsn-radius, var(--xswclsn-radius-md));
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 2 · MINIMAL
   Ultra-clean, almost invisible frame. Typography is the hero.
   Thin bottom accent line via ::after. Ideal for info/simple messages.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-2"] {
  border:1px solid #f1f5f9;
  border-radius:8px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
  padding:12px 14px;
  font-size:13.5px;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-2"]::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:2px;background:var(--tc);border-radius:0 0 8px 8px;opacity:.55;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-2"] .xswclsn-notification-card__quote::before{content:'\201C';font-size:1.6em;color:var(--tc);opacity:.45;line-height:0;vertical-align:-8px;margin-right:2px}
.xswclsn-notifications .xswclsn-notification-card[class$="-2"] .xswclsn-notification-card__btn{background:transparent;border-color:var(--tc);color:var(--tc)}
.xswclsn-notifications .xswclsn-notification-card[class$="-2"] .xswclsn-notification-card__count{color:var(--tc);font-size:1.75rem}

/* Coupon T2: class suffix -2 matches global STYLE 2 rule above (fixed 8px). Honor --xswclsn-radius from applyStyleOverrideVars when custom style is on. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 {
  border-radius: var(--xswclsn-radius, 8px);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 3 · ELEVATED CARD
   Generous padding, large radius (20px), deep layered shadow.
   Feels like a physical card lifted off the page. Premium, spacious.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-3"] {
  border:1px solid rgba(0,0,0,.04);
  border-radius:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.09),0 3px 8px rgba(0,0,0,.05);
  padding:18px 20px;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-3"] .xswclsn-notification-card__btn{background:var(--tc);border-color:var(--tc);color:#fff;border-radius:12px}
.xswclsn-notifications .xswclsn-notification-card[class$="-3"] .xswclsn-notification-card__code{background:var(--tc-l);border-color:rgba(0,0,0,.08);color:var(--tc-d);font-size:1rem;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.xswclsn-notifications .xswclsn-notification-card[class$="-3"] .xswclsn-notification-card__avatar{width:44px;height:44px;font-size:14px;background:var(--tc-l);color:var(--tc-d)}
.xswclsn-notifications .xswclsn-notification-card[class$="-3"] .xswclsn-notification-card__count{font-size:3rem;letter-spacing:-.04em;color:var(--tc)}
.xswclsn-notifications .xswclsn-notification-card[class$="-3"] .xswclsn-notification-card__thumb{border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* Coupon T3: [class$="-3"] fixes 20px; honor --xswclsn-radius from applyStyleOverrideVars when custom style is on. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 {
  border-radius: var(--xswclsn-radius, 20px);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 4 · COMPACT
   Small footprint — tight padding, smaller text. Whisper notification.
   Non-intrusive, great for secondary information or mobile.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-4"] {
  border:1px solid #e5e7eb;
  border-radius:6px;
  box-shadow:none;
  padding:8px 10px 8px 12px;
  font-size:12px;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-4"] .xswclsn-notification-card__btn{min-height:var(--xswclsn-btn-height-compact);height:var(--xswclsn-btn-height-compact);font-size:11px;padding:0 10px;border-radius:var(--xswclsn-radius-sm)}
.xswclsn-notifications .xswclsn-notification-card[class$="-4"] .xswclsn-notification-card__code{padding:4px 8px;font-size:.8rem;letter-spacing:.08em}
.xswclsn-notifications .xswclsn-notification-card[class$="-4"] .xswclsn-notification-card__avatar{width:28px;height:28px;font-size:10px}
.xswclsn-notifications .xswclsn-notification-card[class$="-4"] .xswclsn-notification-card__thumb{width:36px;height:36px;border-radius:8px}
.xswclsn-notifications .xswclsn-notification-card[class$="-4"] .xswclsn-notification-card__count{font-size:1.5rem}

/* Coupon T4: [class$="-4"] fixes 6px; honor --xswclsn-radius when custom style is on. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 {
  border-radius: var(--xswclsn-radius, 6px);
}

/* Social T4 compact bar: icons sit on the right — clear absolute close (Style 4 only leaves 10px). */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-social-4 {
  padding-right: calc(var(--xswclsn-touch-target-min) + 8px);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-social-4 .xswclsn-notification-card__close {
  top: 50%;
  transform: translateY(-50%);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 5 · DARK / BOLD
   Category color AS the background. Full white text. High contrast.
   Attention-commanding. Ideal for CTAs, promotions, urgency.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] {
  background:var(--tc);
  border-color:transparent;
  border-radius:12px;
  box-shadow:0 6px 24px var(--tc-a),0 2px 6px rgba(0,0,0,.1);
  color:#fff;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__close{color:rgba(255,255,255,.6)}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__close:hover{background:rgba(255,255,255,.15);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__time,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__topline,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__count-label,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__hint,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__author-line{color:rgba(255,255,255,.75)}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__message,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__name,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__mainline{color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__product{color:rgba(255,255,255,.9);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__btn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff;font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__btn:hover{background:rgba(255,255,255,.32)}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__code{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff;font-weight:800;letter-spacing:.1em}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__avatar{background:rgba(255,255,255,.22);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__thumb--ph{background:rgba(255,255,255,.15)}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__count{color:#fff;font-size:2.75rem}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-star{color:rgba(255,255,255,.3)}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-star.is-on{color:#fef08a}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__badge{background:rgba(255,255,255,.25);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__social-icon{background:rgba(255,255,255,.25);opacity:1}

/* Coupon T5: must follow global [class$="-5"] (same specificity) — warm palette; overrides category --tc below */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 {
  --tc: #ea580c;
  --tc-l: #fff7ed;
  --tc-d: #3C2A21;
  --tc-a: rgba(234, 88, 12, 0.14);
  --cpn-t5-bg: #fff7ed;
  --cpn-t5-surface: #fffaf5;
  --cpn-t5-accent: #ea580c;
  --cpn-t5-accent-deep: #c2410c;
  --cpn-t5-text: #3C2A21;
  --cpn-t5-text-muted: #6B5344;
  background: var(--cpn-t5-bg);
  border: 1px solid rgba(234, 88, 12, 0.15);
  border-radius: var(--xswclsn-radius, 20px);
  box-shadow: 0 6px 24px rgba(234, 88, 12, 0.08), 0 2px 6px rgba(0,0,0,.04);
  color: var(--cpn-t5-text);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-notification-card__close { color: var(--cpn-t5-text-muted); }
.xswclsn-notifications .xswclsn-cpn-t5 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xswclsn-notifications .xswclsn-cpn-t5-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.xswclsn-notifications .xswclsn-cpn-t5-visual { flex-shrink: 0; }
.xswclsn-notifications .xswclsn-cpn-t5-orbit {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 3px solid rgba(255, 250, 245, 0.95);
}
.xswclsn-notifications .xswclsn-cpn-t5-orbit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.xswclsn-notifications .xswclsn-cpn-t5-orbit-icon {
  color: #FFFBF0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xswclsn-notifications .xswclsn-cpn-t5-orbit-icon svg {
  display: block;
  shape-rendering: geometricPrecision;
}
.xswclsn-notifications .xswclsn-cpn-t5-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}
.xswclsn-notifications .xswclsn-cpn-t5-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cpn-t5-accent);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-body .xswclsn-notification-card__headline {
  text-align: left;
  font-weight: 700;
  font-size: var(--xswclsn-fz-lg);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--cpn-t5-text);
  margin: 0;
  line-height: 1.25;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-body .xswclsn-notification-card__sub {
  text-align: left;
  color: var(--cpn-t5-text-muted);
  margin: 0;
  line-height: 1.45;
  font-size: var(--xswclsn-fz-sm);
}
.xswclsn-notifications .xswclsn-cpn-t5-code {
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--cpn-t5-surface);
  border: 1px solid rgba(198, 93, 27, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-code .xswclsn-notification-card__code {
  width: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cpn-t5-text);
  font-size: var(--xswclsn-fz-md);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-5 .xswclsn-notification-card__btn {
  width: 100%;
  margin-top: 0;
  background: var(--xswclsn-simple-btn-bg, var(--cpn-t5-accent));
  border-color: var(--xswclsn-simple-btn-bg, var(--cpn-t5-accent));
  color: var(--xswclsn-simple-btn-text, #fff);
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  min-height: 42px;
  box-shadow: 0 3px 14px rgba(234, 88, 12, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 6 · SOFT PASTEL
   Light category-color tinted background. Gentle, approachable.
   Good for testimonials, social proof, friendly content.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] {
  background:var(--tc-l);
  border-color:var(--tc-a);
  border-radius:12px;
  box-shadow:none;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] .xswclsn-notification-card__btn{background:var(--tc);border-color:var(--tc);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] .xswclsn-notification-card__code{background:rgba(255,255,255,.85);border-color:var(--tc);color:var(--tc-d);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] .xswclsn-notification-card__count{color:var(--tc-d);font-size:2.5rem}
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] .xswclsn-notification-card__avatar{background:var(--tc);color:#fff}

/* Coupon T6: [class$="-6"] fixes 12px; honor --xswclsn-radius when custom style is on. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 {
  border-radius: var(--xswclsn-radius, 12px);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 7 · OUTLINE
   White background, 2px solid colored full border. No shadow.
   Bold, energetic. Like a stamp or badge. Great for promotions.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] {
  background:#fff;
  border:2px solid var(--tc);
  border-radius:10px;
  box-shadow:none;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] .xswclsn-notification-card__message,
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] .xswclsn-notification-card__headline{color:var(--tc-d);font-weight:600}
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] .xswclsn-notification-card__btn{background:var(--tc);border-color:var(--tc);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] .xswclsn-notification-card__code{border:2px solid var(--tc);background:#fff;color:var(--tc-d);font-weight:800}
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] .xswclsn-notification-card__count{color:var(--tc);font-size:2.5rem;font-weight:800}
.xswclsn-notifications .xswclsn-notification-card[class$="-7"] .xswclsn-notification-card__product{color:var(--tc-d);font-weight:700}

/* Coupon T7: [class$="-7"] fixes 10px; honor --xswclsn-radius when custom style is on. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 {
  border-radius: var(--xswclsn-radius, 10px);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 8 · PREMIUM GLOW
   Color halo ring + dramatic layered shadow. Feels luxurious.
   The notification seems to float and glow. High perceived value.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] {
  background:#fff;
  border:1px solid rgba(0,0,0,.05);
  border-radius:16px;
  box-shadow:0 0 0 4px var(--tc-a),0 18px 48px rgba(0,0,0,.11),0 4px 12px rgba(0,0,0,.06);
}
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-notification-card__btn{background:var(--tc);border-color:var(--tc);color:#fff;border-radius:12px;min-height:34px;height:34px;font-size:13px;padding:0 16px}
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-notification-card__code{background:var(--tc-l);border-color:var(--tc);color:var(--tc-d);font-size:1.05rem;letter-spacing:.1em;font-weight:800}
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-notification-card__avatar{width:40px;height:40px;box-shadow:0 2px 8px var(--tc-a);background:linear-gradient(135deg,var(--tc) 0%,var(--tc-d) 100%);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-notification-card__count{color:var(--tc);font-size:2.75rem;letter-spacing:-.03em}
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-notification-card__thumb{border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-star.is-on{color:#f59e0b}

/* Coupon T8: [class$="-8"] fixes 16px; honor --xswclsn-radius when custom style is on. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 {
  border-radius: var(--xswclsn-radius, 16px);
}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 9 · TOP STRIPE
   White card with thick colored top accent bar. Borderless left/right.
   Inspired by dashboard toasts (Stripe, Shopify, Notion). Clean.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-9"] {
  background:#fff;
  border:1px solid #e5e7eb;
  border-top:4px solid var(--tc);
  border-radius:0 0 12px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.07);
  padding-top:14px;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-9"] .xswclsn-notification-card__btn{background:var(--tc);border-color:var(--tc);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-9"] .xswclsn-notification-card__code{border-radius:4px;background:var(--tc-l);border-color:var(--tc);color:var(--tc-d);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-9"] .xswclsn-notification-card__count{color:var(--tc)}
.xswclsn-notifications .xswclsn-notification-card[class$="-9"] .xswclsn-notification-card__product{color:var(--tc-d)}

/* ─────────────────────────────────────────────────────────────────────
   STYLE 10 · GRADIENT
   Diagonal gradient from category color to darker shade. White text.
   Shimmer overlay via ::before. Contemporary, eye-catching, bold.
───────────────────────────────────────────────────────────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] {
  background:linear-gradient(135deg,var(--tc) 0%,var(--tc-d) 100%);
  border-color:transparent;
  border-radius:14px;
  box-shadow:0 8px 28px var(--tc-a),0 2px 8px rgba(0,0,0,.08);
  color:#fff;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"]::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 55%);
  border-radius:inherit;pointer-events:none;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__close{color:rgba(255,255,255,.65)}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__close:hover{background:rgba(255,255,255,.15);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__time,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__topline,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__count-label,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__hint,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__author-line{color:rgba(255,255,255,.78)}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__message,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__name,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__mainline{color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__product{color:rgba(255,255,255,.92);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__btn{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:#fff;font-weight:700}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__btn:hover{background:rgba(255,255,255,.32)}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__code{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff;font-weight:800;letter-spacing:.1em}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__avatar{background:rgba(255,255,255,.22);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__thumb--ph{background:rgba(255,255,255,.15)}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__count{color:#fff;font-size:3rem;letter-spacing:-.04em}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__star{color:rgba(255,255,255,.3)}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-star{color:rgba(255,255,255,.3)}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-star.is-on{color:#fef08a}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__badge{background:rgba(255,255,255,.25);color:#fff}
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__social-icon{background:rgba(255,255,255,.25);opacity:1}

/* =====================================================================
   SECTION 6 — STYLE OVERRIDES — element adjustments on dark/gradient cards
   (Style 5: dark gradient, Style 10: dark, Style 6: pastel light).
   Must follow Global Style (Section 5).
   ===================================================================== */

/* ── Dark/gradient cards (Style 5 and 10): light text on elements ─── */
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__promo-label,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__promo-label { color: #fff; }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__link,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__link { color: rgba(255,255,255,.85); }

/* Soft pastel cards: link uses category dark color */
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] .xswclsn-notification-card__link { color: var(--tc-d); }
.xswclsn-notifications .xswclsn-notification-card[class$="-6"] .xswclsn-notification-card__promo-label { color: var(--tc-d); }

/* ── Testimonial quote-mark on dark/gradient cards ───────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-notification-card__quote-mark,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__quote-mark { color: rgba(255,255,255,.6); opacity: 1; }
/* ── Social follow: dark/gradient card overrides ─────────────── */
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf__lead-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf--classic .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf--cta .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf--cards .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf--split .xswclsn-notification-card__headline { color: #fff; }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf .xswclsn-notification-card__sub { color: rgba(255,255,255,.75); }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf--compact .xswclsn-notification-card__message { color: #fff; }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf__icon { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf__card { background: rgba(255,255,255,.15); }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf__card svg { color: #fff; }
.xswclsn-notifications .xswclsn-notification-card[class$="-5"] .xswclsn-sf__card-label { color: rgba(255,255,255,.8); }

/* ── Centered layouts (info/social/testimonial): center-align on V1-4 too */
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-5"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-6"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-7"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-8"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-9"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-notification-card[class$="-10"],
.xswclsn-notifications .xswclsn-notification-card--simple.xswclsn-template-simple-10 { text-align: center; }

/* Promo banner (V8-10) always centered */
.xswclsn-notifications .xswclsn-notification-card[class$="-8"] .xswclsn-notification-card__promo-label,
.xswclsn-notifications .xswclsn-notification-card[class$="-9"] .xswclsn-notification-card__promo-label,
.xswclsn-notifications .xswclsn-notification-card[class$="-10"] .xswclsn-notification-card__promo-label { text-align: left; }

/* =====================================================================
   SECTION 7 — SIMPLE CATEGORY — 10 fully distinct premium designs
   Placed after Global Style (Section 5) so per-variant rules override
   at equal specificity via source order.
   ===================================================================== */

/* ── Per-variant color tokens for Simple ─────────────────────── */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-1  {--tc:#3858e9;--tc-l:#eef2ff;--tc-d:#1e40af;--tc-a:rgba(56,88,233,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2  {--tc:#0ea5e9;--tc-l:#e0f2fe;--tc-d:#0369a1;--tc-a:rgba(14,165,233,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3  {--tc:#0d9488;--tc-l:#f0fdfa;--tc-d:#0f766e;--tc-a:rgba(13,148,136,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-4  {--tc:#7c3aed;--tc-l:#f5f3ff;--tc-d:#5b21b6;--tc-a:rgba(124,58,237,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5  {--tc:#047857;--tc-l:#d1fae5;--tc-d:#065f46;--tc-a:rgba(4,120,87,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6  {--tc:#818cf8;--tc-l:rgba(129,140,248,.2);--tc-d:#c7d2fe;--tc-a:rgba(99,102,241,.25)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7  {--tc:#fff;--tc-l:rgba(255,255,255,.2);--tc-d:rgba(255,255,255,.85);--tc-a:rgba(249,115,22,.25)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8  {--tc:#e11d48;--tc-l:#ffe4e6;--tc-d:#9f1239;--tc-a:rgba(225,29,72,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9  {--tc:#d97706;--tc-l:#fef3c7;--tc-d:#92400e;--tc-a:rgba(217,119,6,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 {--tc:#fff;--tc-l:rgba(255,255,255,.2);--tc-d:rgba(255,255,255,.85);--tc-a:rgba(124,58,237,.25)}

/* ── Per-variant CARD styles for Simple ──────────────────────── */

/* V1 — Classic Blue Toast */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-1 {
  --xswclsn-radius: 12px;
  background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
  border:1px solid #dbeafe;
  border-left:4px solid #3858e9;
  border-radius:2px var(--xswclsn-radius) var(--xswclsn-radius) 2px;
  box-shadow:0 6px 16px rgba(56,88,233,.12),0 1px 3px rgba(0,0,0,.04);
  padding-left:16px;
  color:#1d2327;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-1 .xswclsn-spl-icon-wrap {
  border: 1px solid rgba(56,88,233,.18);
}

/* V2 — Floating Side Thumbnail */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 {
  --xswclsn-radius: 18px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fcff 100%);
  border:none;
  border-radius: var(--xswclsn-radius);
  box-shadow: 0 10px 26px rgba(14,165,233,.14), 0 2px 8px rgba(0,0,0,.06);
  color:#1d2327;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-spl-icon-wrap {
  background: #dbefff;
  border: 1px solid #b6daf8;
  color: #0369a1;
  width: 52px !important;
  height: 52px !important;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-spl-icon-wrap svg {
  width: 28px !important;
  height: 28px !important;
}

/* V3 — FREE SHIPPING Side (Teal) */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 {
  --xswclsn-radius: 14px;
  background:linear-gradient(180deg,#ffffff 0%,#f6fffc 100%);
  border:1px solid #99f6e4;
  border-radius: var(--xswclsn-radius);
  box-shadow:0 6px 18px rgba(13,148,136,.12),0 1px 3px rgba(0,0,0,.03);
  color:#1d2327;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 .xswclsn-notification-card__headline{color:#0f766e;font-size:var(--xswclsn-fz-lg);letter-spacing:.05em;text-transform:uppercase}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 .xswclsn-spl-icon-wrap {
  border: 1px solid #99f6e4;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 .xswclsn-spl-icon-wrap svg {
  width: 26px;
  height: 26px;
}

/* V4 — Need Help Support Card (Violet, centered) */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-4 {
  --xswclsn-radius: 16px;
  background:linear-gradient(180deg,#faf5ff 0%,#f5f3ff 100%);
  border:1px solid #ddd6fe;
  border-radius: var(--xswclsn-radius);
  box-shadow:0 8px 22px rgba(124,58,237,.14),0 1px 4px rgba(0,0,0,.05);
  text-align:center;
  color:#3b0764;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-4 .xswclsn-spl-icon-wrap {
  background: #ede9fe;
  border: 1px solid #c4b5fd;
}

/* V5 — FREE SHIPPING bold poster
   IMPORTANT: Global “style 5” ([class$="-5"]) assumes a DARK card + white type.
   Simple V5 is a LIGHT emerald poster — we must override headline/close (see below). */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 {
  --xswclsn-radius: 18px;
  position: relative;
  background: linear-gradient(165deg, #ffffff 0%, #ecfdf5 55%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  border-radius: var(--xswclsn-radius);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.08),
    0 12px 32px rgba(4, 120, 87, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.04);
  padding: calc(var(--xswclsn-space-lg) + 4px) var(--xswclsn-toast-padding-x) var(--xswclsn-space-xl);
  overflow: hidden;
  text-align: center;
  color: #064e3b;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #059669 0%, #10b981 45%, #34d399 100%);
  pointer-events: none;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-centered {
  gap: var(--xswclsn-space-sm);
}
/* Headline: override global [class$="-5"] { color: #fff } */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__headline {
  color: #065f46 !important;
  font-size: var(--xswclsn-fz-xl);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  margin-bottom: var(--xswclsn-space-xs);
  -webkit-line-clamp: 3;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__sub {
  color: #047857 !important;
  font-size: var(--xswclsn-fz-md);
  font-weight: 500;
  line-height: var(--xswclsn-line-height-body);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__link {
  color: var(--xswclsn-primary, #059669) !important;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-icon-wrap--xl {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 100%);
  border: 2px solid #6ee7b7;
  color: #059669;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.18);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-icon-wrap--xl svg {
  width: 26px;
  height: 26px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__close {
  color: var(--xswclsn-close-color, #64748b) !important;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__close:hover,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__close:focus-visible {
  background: rgba(5, 150, 105, 0.12) !important;
  color: #065f46 !important;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-centered--below-banner{padding:14px 16px 16px}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-notification-card__promo-label{color:#065f46;font-size:var(--xswclsn-fz-xl)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-top-banner {
  background: linear-gradient(135deg,#34d399 0%,#10b981 100%);
}

/* V6 — Dark Glassmorphism Toast */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 {
  --xswclsn-radius: 14px;
  background:linear-gradient(145deg,#0b1220 0%,#111c33 65%,#0f172a 100%);
  border:1px solid rgba(99,102,241,.38);
  border-radius: var(--xswclsn-radius);
  box-shadow:0 0 0 1px rgba(99,102,241,.2),0 12px 34px rgba(2,6,23,.55);
  color:#e2e8f0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__close{color:var(--xswclsn-close-color, rgba(226,232,240,.5))}
/* Headline uses __headline (not __message) — must be light on dark glass */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__headline{color:#f8fafc}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__message{color:#f1f5f9}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__sub{color:#e2e8f0}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__link{color:var(--xswclsn-primary,#e0e7ff)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__link:hover{color:#fff;opacity:1}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-spl-icon-wrap {
  background: rgba(99,102,241,.22);
  color: #c7d2fe;
  border: 1px solid rgba(165,180,252,.28);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__btn {
  background: var(--xswclsn-simple-btn-bg, var(--xswclsn-primary, #6366f1));
  border-color: var(--xswclsn-simple-btn-bg, var(--xswclsn-primary, #6366f1));
  color: var(--xswclsn-simple-btn-text, #fff);
}

/* V6: match editor preview — title, help line, and CTA centered in the text column (row + icon). */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__row {
  justify-content: center;
  align-items: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__sub {
  align-self: stretch;
  text-align: center;
}

/* V7 — Weekend Sale Orange Gradient */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 {
  --xswclsn-radius: 14px;
  background:linear-gradient(135deg,#fb923c 0%,#f97316 45%,#ea580c 100%);
  border:none;
  border-radius: var(--xswclsn-radius);
  box-shadow:0 8px 22px rgba(249,115,22,.24);
  color:#fff;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__close{color:rgba(255,255,255,.6)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__message{color:#fff;font-weight:600}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__sub{color:rgba(255,255,255,.92)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 56%);
}

/* V7: match editor preview — title, help line, and CTA centered in the text column (row + icon). */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__row {
  justify-content: center;
  align-items: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__sub {
  align-self: stretch;
  text-align: center;
}

/* V8 — Flash Sale Pastel Rose (centered) */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 {
  --xswclsn-radius: 18px;
  background:linear-gradient(180deg,#fff7f8 0%,#ffecef 100%);
  border:1px solid #fecdd3;
  border-radius: var(--xswclsn-radius);
  box-shadow:0 8px 22px rgba(225,29,72,.14),0 1px 4px rgba(0,0,0,.04);
  text-align:center;
  color:#4c0519;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-notification-card__headline{color:#9f1239}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-notification-card__sub{color:#6b7280}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-notification-card__btn{background:var(--xswclsn-simple-btn-bg,var(--xswclsn-primary,#f43f5e));border-color:var(--xswclsn-simple-btn-bg,var(--xswclsn-primary,#f43f5e));color:var(--xswclsn-simple-btn-text,#fff)}
/* Icon chip: override --light (white glyph) — use dark rose on light surface for WCAG contrast */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-spl-icon-wrap {
  background: #fff;
  border: 1px solid #fda4af;
  color: #9f1239;
  box-shadow: 0 1px 3px rgba(159, 18, 57, 0.12);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-spl-icon-wrap svg {
  color: inherit;
}

/* V9 — New Arrivals Amber (centered editorial stack: icon → headline → sub → CTA) */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 {
  --xswclsn-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: var(--xswclsn-radius);
  box-shadow: 0 10px 26px rgba(217, 119, 6, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: visible;
  text-align: center;
  color: #1d2327;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-spl-centered--simple9 {
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 2px 0 4px;
  align-items: center;
  box-sizing: border-box;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__headline {
  color: #78350f !important;
  font-size: var(--xswclsn-fz-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__sub {
  color: #78716c !important;
  font-size: var(--xswclsn-fz-md);
  font-weight: 500;
  line-height: 1.45;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__btn {
  background: var(--xswclsn-simple-btn-bg, var(--xswclsn-primary, linear-gradient(180deg, #f59e0b 0%, #d97706 100%)));
  border-color: var(--xswclsn-simple-btn-bg, var(--xswclsn-primary, #b45309));
  color: var(--xswclsn-simple-btn-text, #fff);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.35);
  margin-top: 6px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.45);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-spl-icon-wrap--xl {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
  border: 2px solid rgba(217, 119, 6, 0.3);
  color: #92400e;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.18);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-spl-icon-wrap--xl svg {
  width: 26px;
  height: 26px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__close {
  color: var(--xswclsn-close-color, #64748b) !important;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__close:hover,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__close:focus-visible {
  background: rgba(120, 53, 15, 0.1) !important;
  color: #78350f !important;
}

/* V10 — Members-Only Purple Gradient */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 {
  --xswclsn-radius: 14px;
  background:linear-gradient(135deg,#7c3aed 0%,#6366f1 58%,#4f46e5 100%);
  border:none;
  border-radius: var(--xswclsn-radius);
  box-shadow:0 8px 24px rgba(99,102,241,.28);
  color:#fff;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__close{color:rgba(255,255,255,.6)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 58%);
  border-radius:inherit;pointer-events:none;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__message{color:#fff;font-weight:600}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__sub{color:rgba(255,255,255,.92)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-spl-icon-wrap {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
}

/* V10: match editor preview — title, help line, and CTA centered in the text column (row + icon). */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__row {
  justify-content: center;
  align-items: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__sub {
  align-self: stretch;
  text-align: center;
}

/* ── Simple structural CSS elements ──────────────────────────── */

/* Icon wrap: small colored circle with SVG icon */
.xswclsn-notifications .xswclsn-spl-icon-wrap {
  flex-shrink:0;
  align-self:center;
  width: var(--xswclsn-icon-container-sm);
  height: var(--xswclsn-icon-container-sm);
  border-radius:50%;
  background:var(--tc-l);
  color:var(--tc);
  display:flex;
  align-items:center;
  justify-content:center;
}
.xswclsn-notifications .xswclsn-spl-icon-wrap svg {
  display:block;
  line-height:0;
  width: var(--xswclsn-simple-icon-size);
  height: var(--xswclsn-simple-icon-size);
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
}

.xswclsn-notifications .xswclsn-spl-custom-icon {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.xswclsn-notifications .xswclsn-spl-icon-wrap--xl {
  width: var(--xswclsn-icon-container-lg);
  height: var(--xswclsn-icon-container-lg);
  border-radius: 14px;
}
.xswclsn-notifications .xswclsn-spl-icon-wrap--xl svg {
  width: var(--xswclsn-simple-icon-size-lg);
  height: var(--xswclsn-simple-icon-size-lg);
}
.xswclsn-notifications .xswclsn-spl-icon-wrap--soft {
  background: var(--tc-l);
  color: var(--tc-d);
}
.xswclsn-notifications .xswclsn-spl-icon-wrap--glow {
  background:rgba(129,140,248,.18);
  color:#818cf8;
  box-shadow:0 0 12px rgba(99,102,241,.4);
}
.xswclsn-notifications .xswclsn-spl-icon-wrap--light {
  background:rgba(255,255,255,.2);
  color:#fff;
}

/* Row variants */
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row {
  display:flex;
  align-items:center;
  gap: var(--xswclsn-space-md);
}
.xswclsn-notifications .xswclsn-notification-card--simple .xswclsn-notification-card__row .xswclsn-notification-card__body {
  flex:1;
  min-width:0;
}
.xswclsn-notifications .xswclsn-spl-row--gap-lg { gap: var(--xswclsn-simple-gap-row-lg) !important; align-items:center !important; }

/* Baseline hierarchy system for all Simple variants */
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__headline {
  font-size: var(--xswclsn-headline-fz);
  line-height: var(--xswclsn-line-height-tight);
  font-weight: var(--xswclsn-simple-title-weight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--xswclsn-space-xs);
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__sub {
  font-size: var(--xswclsn-sub-fz);
  line-height: var(--xswclsn-line-height-body);
  font-weight: var(--xswclsn-simple-sub-weight);
  margin: 0;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--xswclsn-space-xs);
  font-weight: 600;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__btn {
  min-height: var(--xswclsn-btn-height-sm);
  padding-inline: calc(var(--xswclsn-btn-padding-x) - 2px);
  font-size: var(--xswclsn-btn-font-size);
  border-radius: var(--xswclsn-btn-radius);
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__time {
  margin-top: 2px;
}

/* Simple category safety limits: prevent image/text/button overflow */
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__headline,
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__message,
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__sub,
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__link {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__headline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__message {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__btn {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Centered vertical layout — gap handles all spacing; zero child margins */
.xswclsn-notifications .xswclsn-spl-centered {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: var(--xswclsn-simple-gap-stack);
}
.xswclsn-notifications .xswclsn-spl-centered--below-banner {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: var(--xswclsn-simple-gap-stack);
}
.xswclsn-notifications .xswclsn-spl-centered > *,
.xswclsn-notifications .xswclsn-spl-centered--below-banner > * {
  margin-top:0;
  margin-bottom:0;
}
.xswclsn-notifications .xswclsn-spl-callline {
  font-size: var(--xswclsn-simple-callline-size);
  font-weight: var(--xswclsn-simple-callline-weight);
  line-height: 1.2;
  color: var(--xswclsn-text);
}
.xswclsn-notifications .xswclsn-spl-centered .xswclsn-notification-card__btn,
.xswclsn-notifications .xswclsn-spl-centered--below-banner .xswclsn-notification-card__btn {
  margin-top:4px;
  align-self:stretch;
}

/* Top banner zone: full-width, bleeds to card edges */
.xswclsn-notifications .xswclsn-spl-top-banner {
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(100% + 32px);
  margin:-14px -16px var(--xswclsn-space-md);
  min-height:76px;
  background:linear-gradient(135deg,var(--tc) 0%,var(--tc-d) 100%);
  color:#fff;
  border-radius:var(--xswclsn-radius) var(--xswclsn-radius) 0 0;
  position:relative;
  overflow:hidden;
}
.xswclsn-notifications .xswclsn-spl-top-banner::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 60%);
  pointer-events:none;
}
/* V5 banner reset: card has padding:0 so no negative-margin bleed needed */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-top-banner {
  width:100%;
  margin:0;
}

/* Button styling per variant */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 .xswclsn-notification-card__btn{background:var(--xswclsn-primary,#0d9488);border-color:var(--xswclsn-primary,#0d9488);color:#fff}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__btn{background:#fff;border-color:#fff;color:var(--xswclsn-primary,#9a3412);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.2)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__btn{background:var(--xswclsn-simple-btn-bg,#fff);border-color:var(--xswclsn-simple-btn-bg,#fff);color:var(--xswclsn-simple-btn-text,#4c1d95);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__btn:hover{box-shadow:0 6px 18px rgba(0,0,0,.2)}

/* Link colors per variant */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-1 .xswclsn-notification-card__link{color:var(--xswclsn-primary,#3858e9);text-decoration-color:color-mix(in srgb,var(--xswclsn-primary,#3858e9) 30%,transparent)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-notification-card__link{color:var(--xswclsn-primary,#0ea5e9)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 .xswclsn-notification-card__link{color:var(--xswclsn-primary,#0d9488)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-4 .xswclsn-notification-card__link{color:var(--xswclsn-primary,#6d28d9)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__link{color:var(--xswclsn-primary,rgba(255,255,255,.95))}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__link{color:var(--xswclsn-primary,rgba(255,255,255,.95))}

/* Contrast tuning for text readability */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-notification-card__message{color:#0f172a}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-notification-card__time{color:#475569}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-3 .xswclsn-notification-card__sub{color:#0f766e}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-4 .xswclsn-notification-card__sub{color:#5b21b6}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__message,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__message{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)}

/* Icon emphasis in dark/gradient cards */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-spl-icon-wrap,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-spl-icon-wrap,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-spl-icon-wrap {
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-notification-card__btn,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__btn {
  width: 100%;
  justify-content: center;
}

/* Close button on banner/dark variants — ensure visibility on colored banners */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-6 .xswclsn-notification-card__close:hover,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-7 .xswclsn-notification-card__close:hover,
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-10 .xswclsn-notification-card__close:hover {
  background:rgba(255,255,255,.15);color:#fff;
}

/* design_overrides text colors (--xswclsn-simple-* on card). Invalid var() drops the declaration (incl. !important) so template colors win. */
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color) !important;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__promo-label {
  color: var(--xswclsn-simple-headline-color) !important;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__message {
  color: var(--xswclsn-simple-headline-color) !important;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color) !important;
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__time {
  color: var(--xswclsn-simple-time-color) !important;
}

/* =====================================================================
   SECTION 8 — COUPON — type chrome, cpn-* components, T1–T8
   Placed after Global Style (Section 5) so coupon-specific backgrounds,
   borders, and shadows properly override the global visual treatment.
   ===================================================================== */

/* Coupon: headline + code box + hint */
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__headline { font-size: var(--xswclsn-headline-fz, var(--xswclsn-fz-lg)); margin-bottom: var(--xswclsn-space-sm); font-weight: 600; letter-spacing: -0.01em; }
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__code-row { display: flex; align-items: center; gap: var(--xswclsn-space-sm); flex-wrap: wrap; }
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__code { font-family: ui-monospace, monospace; font-weight: 800; font-size: var(--xswclsn-fz-md); letter-spacing: 0.08em; padding: 10px 14px; border-radius: var(--xswclsn-radius-lg, 12px); margin: 0; display: inline-flex; align-items: center; }
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__hint { font-size: var(--xswclsn-fz-sm); color: var(--xswclsn-text-muted); }
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__sub { margin-bottom: var(--xswclsn-space-md); }
.xswclsn-notifications .xswclsn-notification-card--coupon .xswclsn-notification-card__btn { width: 100%; margin-top: var(--xswclsn-space-sm); }
.xswclsn-notifications .xswclsn-cpn-code-wrap .xswclsn-notification-card__code {
  width: 100%;
  justify-content: center;
  border: 1px dashed var(--xswclsn-border);
  background: rgba(255,255,255,.65);
}

/* ── Coupon T1: Coupon Ticket (horizontal stub + perforated border + content) ── */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 {
  padding: 0; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
  border: 1px solid #ede9fe;
  box-shadow: 0 6px 20px rgba(79,70,229,.1), 0 2px 6px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-cpn-ticket-wrap {
  display: flex; flex-direction: row; align-items: stretch; min-height: 150px;
}
.xswclsn-notifications .xswclsn-cpn-ticket-stub {
  flex-shrink: 0; width: 56px;
  background: linear-gradient(180deg, #312e81 0%, #4f46e5 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  border-right: 2px dashed rgba(255,255,255,.3);
}
.xswclsn-notifications .xswclsn-cpn-ticket-stub::before,
.xswclsn-notifications .xswclsn-cpn-ticket-stub::after {
  content: ''; position: absolute;
  right: -8px; width: 14px; height: 14px; border-radius: 50%;
  background: #faf7ff;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,.12);
}
.xswclsn-notifications .xswclsn-cpn-ticket-stub::before { top: -7px; }
.xswclsn-notifications .xswclsn-cpn-ticket-stub::after  { bottom: -7px; }
.xswclsn-notifications .xswclsn-cpn-ticket-label {
  display: block; transform: rotate(-90deg); white-space: nowrap;
  color: rgba(255,255,255,.9); font-weight: 900; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
}
.xswclsn-notifications .xswclsn-cpn-ticket-body {
  flex: 1; min-width: 0;
  padding: calc(var(--xswclsn-toast-padding-y) + 4px) var(--xswclsn-space-md) var(--xswclsn-toast-padding-y) var(--xswclsn-space-md);
  display: flex; flex-direction: column;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-notification-card__close {
  background: rgba(255,255,255,.9); color: #1e1b4b; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-notification-card__headline {
  font-weight: 800; font-size: var(--xswclsn-fz-md); color: #1e1b4b;
  margin-bottom: var(--xswclsn-space-xs); line-height: 1.3;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-notification-card__sub {
  color: #6b7280; font-size: var(--xswclsn-fz-sm); margin-bottom: var(--xswclsn-space-sm);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-cpn-ticket-body .xswclsn-notification-card__code {
  width: 100%; justify-content: center;
  border: 1.5px dashed #c4b5fd; background: #f5f3ff;
  color: #1e1b4b; font-weight: 700; letter-spacing: .12em;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-1 .xswclsn-notification-card__btn {
  width: 100%; margin-top: var(--xswclsn-space-sm);
  background: var(--xswclsn-simple-btn-bg, #4f46e5);
  border-color: var(--xswclsn-simple-btn-bg, #4f46e5);
  color: var(--xswclsn-simple-btn-text, #fff);
  border-radius: 10px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 3px 12px rgba(79,70,229,.35);
}

/* ── Coupon T2: Art Frame (centered hero image in decorative frame) ───── */
.xswclsn-notifications .xswclsn-cpn-art-frame { display: flex; justify-content: center; margin-bottom: var(--xswclsn-space-md); padding-top: var(--xswclsn-space-xs); }
.xswclsn-notifications .xswclsn-cpn-art-frame-img,
.xswclsn-notifications .xswclsn-cpn-art-frame-placeholder { width: 110px; height: 110px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.xswclsn-notifications .xswclsn-cpn-art-frame-img { display: block; object-fit: cover; border: 2px solid rgba(0,0,0,.06); box-shadow: 0 6px 24px rgba(236,72,153,.16), 0 2px 6px rgba(0,0,0,.06); }
.xswclsn-notifications .xswclsn-cpn-art-frame-placeholder {
  display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center;
  background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 50%, #a855f7 100%);
  border: 2px solid rgba(255,255,255,.45); box-shadow: 0 6px 24px rgba(236,72,153,.22);
}
.xswclsn-notifications .xswclsn-cpn-art-frame-placeholder span { color: #fff; font-weight: 800; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.6; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 {
  background: linear-gradient(180deg, #fdf2f8 0%, #faf5ff 100%);
  border: 1px solid #fce7f3;
  box-shadow: 0 6px 20px rgba(236,72,153,.08), 0 2px 6px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-notification-card__headline { text-align: center; font-weight: 800; font-size: var(--xswclsn-fz-lg); text-transform: uppercase; letter-spacing: .01em; color: #1f2937; margin-bottom: var(--xswclsn-space-xs); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-notification-card__sub { text-align: center; color: #9ca3af; margin-bottom: var(--xswclsn-space-sm); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code { width: 100%; justify-content: center; border: 1.5px dashed #f9a8d4; background: #fff; font-weight: 700; letter-spacing: .12em; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-2 .xswclsn-notification-card__btn { width: 100%; background: var(--xswclsn-simple-btn-bg, #ec4899); border-color: var(--xswclsn-simple-btn-bg, #ec4899); color: var(--xswclsn-simple-btn-text, #fff); border-radius: 10px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 3px 12px rgba(236,72,153,.3); }

/* ── Coupon T3: Event Badge (centered brand badge / logo at top) ──────── */
.xswclsn-notifications .xswclsn-cpn-badge-zone { display: flex; justify-content: center; align-items: center; margin-bottom: var(--xswclsn-space-md); min-height: 80px; padding-top: var(--xswclsn-space-xs); }
.xswclsn-notifications .xswclsn-cpn-badge-zone-img { max-height: 90px; max-width: 200px; object-fit: contain; display: block; }
.xswclsn-notifications .xswclsn-cpn-badge-zone-text {
  display: inline-flex; align-items: center; padding: 8px 18px;
  background: #18181b; color: #fff; font-weight: 900; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; gap: 8px;
}
.xswclsn-notifications .xswclsn-cpn-badge-zone-text::before {
  content: ''; display: inline-block; width: 8px; height: 20px; background: #ef4444;
  border-radius: 2px; transform: skewX(-8deg); flex-shrink: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 {
  background: #fff;
  border: 1px solid #f4f4f5;
  box-shadow: 0 6px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.03);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-notification-card__headline { text-align: center; font-weight: 800; font-size: var(--xswclsn-fz-lg); letter-spacing: .01em; color: #18181b; margin-bottom: var(--xswclsn-space-xs); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-notification-card__sub { text-align: center; color: #71717a; margin-bottom: var(--xswclsn-space-sm); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code { width: 100%; justify-content: center; border: 1.5px dashed #d4d4d8; background: #fafafa; font-weight: 700; letter-spacing: .12em; color: #18181b; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-3 .xswclsn-notification-card__btn { width: 100%; background: var(--xswclsn-simple-btn-bg, #18181b); border-color: var(--xswclsn-simple-btn-bg, #18181b); color: var(--xswclsn-simple-btn-text, #fff); border-radius: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* ── Coupon T4: Offer Spotlight (rich violet pill badge focal element) ── */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 {
  background: #fff;
  border: 1px solid #ede9fe;
  box-shadow: 0 6px 20px rgba(124,58,237,.08), 0 2px 6px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-cpn-spotlight {
  display: flex; justify-content: center;
  padding-top: var(--xswclsn-space-xs);
  margin-bottom: var(--xswclsn-space-md);
}
.xswclsn-notifications .xswclsn-cpn-spotlight-inner {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px;
  background: #ede9fe;
  border-radius: 999px;
  box-shadow: 0 3px 16px rgba(124,58,237,.18), 0 1px 4px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-cpn-spotlight-inner span {
  color: #4c1d95;
  font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-notification-card__headline {
  text-align: center; font-weight: 800; font-size: var(--xswclsn-fz-lg);
  color: #1f2937; margin-bottom: var(--xswclsn-space-xs);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-notification-card__sub {
  text-align: center; color: #6b7280; margin-bottom: var(--xswclsn-space-sm);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code {
  width: 100%; justify-content: center;
  border: 1.5px dashed #c4b5fd;
  background: #f5f3ff;
  color: #4c1d95; font-weight: 700; letter-spacing: .12em;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-4 .xswclsn-notification-card__btn {
  width: 100%;
  background: var(--xswclsn-simple-btn-bg, #7c3aed);
  border-color: var(--xswclsn-simple-btn-bg, #7c3aed);
  color: var(--xswclsn-simple-btn-text, #fff);
  border-radius: 10px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 3px 14px rgba(124,58,237,.32);
}

/* ── Coupon T6: Ribbon Badge (premium navy/gold — logo zone + centered copy) ── */
.xswclsn-notifications .xswclsn-cpn-t6-badge-zone { display: flex; justify-content: center; align-items: center; margin-bottom: var(--xswclsn-space-md); min-height: 80px; padding-top: var(--xswclsn-space-xs); }
.xswclsn-notifications .xswclsn-cpn-t6-badge-zone-img { max-height: 90px; max-width: 200px; object-fit: contain; display: block; }
.xswclsn-notifications .xswclsn-cpn-t6-badge-zone-text {
  display: inline-flex; align-items: center; padding: 9px 18px;
  background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%); color: #fff; font-weight: 900; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; gap: 8px;
  box-shadow: 0 4px 18px rgba(15,23,42,.3);
}
.xswclsn-notifications .xswclsn-cpn-t6-badge-zone-text::before {
  content: ''; display: inline-block; width: 8px; height: 20px;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 2px; transform: skewX(-8deg); flex-shrink: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 {
  background: linear-gradient(180deg, #ffffff 0%, #fefdfb 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15,23,42,.07), 0 2px 6px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-notification-card__headline { text-align: center; font-weight: 800; font-size: var(--xswclsn-fz-lg); letter-spacing: .01em; color: #0f172a; margin-bottom: var(--xswclsn-space-xs); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-notification-card__sub { text-align: center; color: #64748b; margin-bottom: var(--xswclsn-space-sm); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code { width: 100%; justify-content: center; border: 1.5px dashed #93c5fd; background: #f0f4ff; font-weight: 700; letter-spacing: .12em; color: #1e3a8a; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-6 .xswclsn-notification-card__btn { width: 100%; background: var(--xswclsn-simple-btn-bg, #1e3a8a); border-color: var(--xswclsn-simple-btn-bg, #1e3a8a); color: var(--xswclsn-simple-btn-text, #fff); border-radius: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 3px 14px rgba(30,58,138,.28); }

/* ── Coupon T7: Bottom Strip (rose-mauve — offer tag + code+btn bottom strip) ── */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 {
  background: #fff;
  border: 1px solid #fce7f3;
  overflow: hidden; padding-bottom: 0;
  box-shadow: 0 6px 20px rgba(131,24,67,.06), 0 2px 6px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-cpn-offer-tag {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  background: #fce7f3;
  color: #9f1239;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--xswclsn-space-sm);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 .xswclsn-notification-card__headline {
  font-weight: 800; font-size: var(--xswclsn-fz-md); color: #1f2937;
  margin-bottom: var(--xswclsn-space-xs);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 .xswclsn-notification-card__sub {
  color: #6b7280; margin-bottom: var(--xswclsn-space-md);
  font-size: var(--xswclsn-fz-sm);
}
.xswclsn-notifications .xswclsn-cpn-bottom-strip {
  margin: 0 calc(-1 * var(--xswclsn-toast-padding-x));
  padding: var(--xswclsn-space-sm) var(--xswclsn-toast-padding-x);
  background: #881337;
  display: flex; align-items: center; gap: 8px;
}
.xswclsn-notifications .xswclsn-cpn-bottom-strip .xswclsn-notification-card__code {
  flex: 1; min-width: 0; margin: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-weight: 700; letter-spacing: .1em;
  font-size: var(--xswclsn-fz-sm); border-radius: 7px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-7 .xswclsn-cpn-bottom-strip .xswclsn-notification-card__btn {
  flex-shrink: 0; margin-top: 0 !important; width: auto;
  padding-left: var(--xswclsn-space-sm); padding-right: var(--xswclsn-space-sm);
  white-space: nowrap;
  background: var(--xswclsn-simple-btn-bg, #fce7f3);
  border-color: var(--xswclsn-simple-btn-bg, #fce7f3);
  color: var(--xswclsn-simple-btn-text, #881337);
  font-weight: 700; font-size: var(--xswclsn-fz-sm); border-radius: 7px;
}

/* ── Coupon T8: Diagonal Impact (sapphire blue diagonal header + clean body) ── */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 {
  padding: 0; overflow: hidden;
  background: #fff; color: #0f172a;
  border: none;
  box-shadow: 0 8px 28px rgba(37,99,235,.12), 0 2px 6px rgba(0,0,0,.06);
}
.xswclsn-notifications .xswclsn-cpn-diag-head {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
  padding: var(--xswclsn-toast-padding-y) var(--xswclsn-toast-padding-x) 38px;
  position: relative; overflow: visible;
}
.xswclsn-notifications .xswclsn-cpn-diag-head::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 28px;
  background: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.xswclsn-notifications .xswclsn-cpn-flash-badge {
  display: inline-block; padding: 5px 14px;
  background: rgba(255,255,255,.15); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--xswclsn-space-xs);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: relative; z-index: 1;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-notification-card__close {
  color: rgba(255,255,255,.9); z-index: 4; background: rgba(0,0,0,.15); border-radius: 50%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-notification-card__headline {
  color: #fff; font-weight: 900; font-size: var(--xswclsn-fz-lg);
  text-shadow: 0 2px 8px rgba(0,0,0,.15); margin-bottom: 0;
  position: relative; z-index: 1;
}
.xswclsn-notifications .xswclsn-cpn-diag-body {
  padding: var(--xswclsn-space-sm) var(--xswclsn-toast-padding-x) var(--xswclsn-toast-padding-y);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-notification-card__sub {
  color: #64748b; margin-bottom: var(--xswclsn-space-sm);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-cpn-diag-body .xswclsn-notification-card__code {
  width: 100%; justify-content: center;
  border: 1.5px dashed #93c5fd; background: #eff6ff;
  color: #1e3a8a; font-weight: 800; letter-spacing: .14em;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-notification-card--coupon.xswclsn-template-coupon-8 .xswclsn-notification-card__btn {
  width: 100%;
  background: var(--xswclsn-simple-btn-bg, #2563eb);
  border-color: var(--xswclsn-simple-btn-bg, #2563eb);
  color: var(--xswclsn-simple-btn-text, #fff);
  border-radius: 10px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 3px 14px rgba(37,99,235,.35);
}

/* Coupon Look & colors — CSS variables from editor / PHP (optional overrides) */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-cpn-ticket-stub {
  background: var(--xswclsn-coupon-accent-bg, linear-gradient(180deg, #312e81 0%, #4f46e5 100%));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-cpn-ticket-label {
  color: var(--xswclsn-coupon-accent-text, rgba(255,255,255,.9));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #1e1b4b);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #6b7280);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-1 .xswclsn-cpn-ticket-body .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, #1e1b4b);
  background: var(--xswclsn-coupon-code-bg, #f5f3ff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-cpn-art-frame-placeholder {
  background: var(--xswclsn-coupon-accent-bg, linear-gradient(135deg, #f9a8d4 0%, #ec4899 50%, #a855f7 100%));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-cpn-art-frame-placeholder span {
  color: var(--xswclsn-coupon-accent-text, #fff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #1f2937);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #9ca3af);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-2 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, inherit);
  background: var(--xswclsn-coupon-code-bg, #fff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-cpn-badge-zone-text {
  background: var(--xswclsn-coupon-accent-bg, #18181b);
  color: var(--xswclsn-coupon-accent-text, #fff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #18181b);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #71717a);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-3 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, #18181b);
  background: var(--xswclsn-coupon-code-bg, #fafafa);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-cpn-spotlight-inner {
  background: var(--xswclsn-coupon-accent-bg, #ede9fe);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-cpn-spotlight-inner span {
  color: var(--xswclsn-coupon-accent-text, #4c1d95);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #1f2937);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #6b7280);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-4 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, #4c1d95);
  background: var(--xswclsn-coupon-code-bg, #f5f3ff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-kicker {
  color: var(--xswclsn-coupon-accent-text, var(--cpn-t5-accent));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-body .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, var(--cpn-t5-text));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-body .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, var(--cpn-t5-text-muted));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-5 .xswclsn-cpn-t5-code .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, var(--cpn-t5-text));
  background: var(--xswclsn-coupon-code-bg, transparent);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-cpn-t6-badge-zone-text {
  background: var(--xswclsn-coupon-accent-bg, linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%));
  color: var(--xswclsn-coupon-accent-text, #fff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #0f172a);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #64748b);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-6 .xswclsn-cpn-code-wrap .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, #1e3a8a);
  background: var(--xswclsn-coupon-code-bg, #f0f4ff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 .xswclsn-cpn-offer-tag {
  background: var(--xswclsn-coupon-accent-bg, #fce7f3);
  color: var(--xswclsn-coupon-accent-text, #9f1239);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #1f2937);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #6b7280);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-7 .xswclsn-cpn-bottom-strip .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, #fff);
  background: var(--xswclsn-coupon-code-bg, rgba(255,255,255,.12));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-cpn-flash-badge {
  background: var(--xswclsn-coupon-accent-bg, rgba(255,255,255,.15));
  color: var(--xswclsn-coupon-accent-text, #fff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-cpn-diag-head .xswclsn-notification-card__headline {
  color: var(--xswclsn-simple-headline-color, #fff);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-notification-card__sub {
  color: var(--xswclsn-simple-sub-color, #64748b);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-coupon-8 .xswclsn-cpn-diag-body .xswclsn-notification-card__code {
  color: var(--xswclsn-coupon-code-text, #1e3a8a);
  background: var(--xswclsn-coupon-code-bg, #eff6ff);
}

/* =====================================================================
   SECTION 9 — TESTIMONIALS — type chrome, tml-* components, T1–T6
   ===================================================================== */

/* ── Testimonials stack (multiple cards from one notification) ─ */
.xswclsn-notifications .xswclsn-tml-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xswclsn-space-sm, 8px);
}
/* Viewing count multi-story stack (same layout as testimonials). */
.xswclsn-notifications .xswclsn-vc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xswclsn-space-sm, 8px);
}
.xswclsn-notifications .xswclsn-tml-photo-ring__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ── Testimonials type hooks ─────────────────────────────────── */
/* Testimonials: quote + author */
.xswclsn-notifications .xswclsn-notification-card--testimonials .xswclsn-notification-card__quote { font-style: italic; margin-bottom: var(--xswclsn-space-xs); font-size: var(--xswclsn-fz-md); }
.xswclsn-notifications .xswclsn-notification-card--testimonials .xswclsn-notification-card__author { font-size: var(--xswclsn-fz-sm); color: var(--xswclsn-text-muted); }

/* ── Testimonials templates T1–T6 ───────────────────────────── */

/* =====================================================================
   TESTIMONIALS — 6 structurally unique templates
   T1 · Classic Side       — avatar + author + quote + stars (horizontal)
   T2 · Speech Bubble      — quote in bubble with tail + author below
   T3 · Centered Elegant   — quote mark + text + stars + verified badge
   T4 · Compact Inline     — ultra-tight row: avatar + name + quote + stars
   T5 · Bold Dark          — dark gradient, white text, centered
   T6 · Card with Photo    — large avatar ring + name + stars + quote + verified
   ===================================================================== */

/* ── T1: Classic Side ───────────────────────────────────────────
   Re-uses existing .xswclsn-notification-card__testimonial-row.
   Per-template override: purple left accent, warm white bg.        */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 {
  background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
  border: 1px solid var(--xswclsn-tml-card-border, #ede9fe);
  border-left: 4px solid var(--xswclsn-tml-left-accent, #7c3aed);
  border-radius: 2px 12px 12px 2px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.1), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding-left: 16px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 .xswclsn-notification-card__avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
  background: var(--xswclsn-tml-avatar-bg, linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%));
  color: var(--xswclsn-tml-avatar-text, #fff);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
/* Preset / upload faces must match initials circle (global __avatar-img uses 40px token). */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 .xswclsn-notification-card__avatar-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 .xswclsn-notification-card__author-line {
  font-weight: 700;
  color: var(--xswclsn-tml-author, #1e1b4b);
  font-style: normal;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 .xswclsn-notification-card__quote {
  font-style: italic;
  color: var(--xswclsn-tml-quote, #4b5563);
  line-height: 1.5;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 .xswclsn-star { color: var(--xswclsn-tml-star-off, #d1d5db); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-1 .xswclsn-star.is-on { color: var(--xswclsn-tml-star-on, #fbbf24); }

/* ── T2: Speech Bubble ──────────────────────────────────────────
   Quote inside a bubble shape with a CSS triangle tail below.      */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid var(--xswclsn-tml-card-border, #d1fae5);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.xswclsn-notifications .xswclsn-tml-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.xswclsn-notifications .xswclsn-tml-bubble {
  background: var(--xswclsn-tml-bubble-bg, #f0fdf4);
  border: 1px solid var(--xswclsn-tml-bubble-border, #a7f3d0);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 .xswclsn-tml-bubble .xswclsn-notification-card__quote {
  font-style: italic;
  color: var(--xswclsn-tml-quote, #1f2937);
  font-size: var(--xswclsn-fz-md);
  margin: 0;
  line-height: 1.5;
}
.xswclsn-notifications .xswclsn-tml-bubble-tail {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--xswclsn-tml-tail-border, #a7f3d0);
  margin-left: 24px;
  position: relative;
}
.xswclsn-notifications .xswclsn-tml-bubble-tail::after {
  content: '';
  position: absolute;
  top: -11px;
  left: -9px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid var(--xswclsn-tml-tail-inner, #f0fdf4);
}
.xswclsn-notifications .xswclsn-tml-bubble-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.xswclsn-notifications .xswclsn-tml-bubble-author--pos-left { flex-direction: row; }
.xswclsn-notifications .xswclsn-tml-bubble-author--pos-right { flex-direction: row-reverse; }
.xswclsn-notifications .xswclsn-tml-bubble-author--pos-above { flex-direction: column; align-items: flex-start; }
.xswclsn-notifications .xswclsn-tml-bubble-author--pos-below { flex-direction: column-reverse; align-items: flex-start; }
.xswclsn-notifications .xswclsn-tml-bubble-author--pos-left.xswclsn-tml-bubble-author--align-top,
.xswclsn-notifications .xswclsn-tml-bubble-author--pos-right.xswclsn-tml-bubble-author--align-top { align-items: flex-start; }
.xswclsn-notifications .xswclsn-tml-bubble-author--align-center { align-items: center; }
.xswclsn-notifications .xswclsn-tml-bubble-author--align-bottom { align-items: flex-end; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 .xswclsn-notification-card__avatar {
  width: 44px;
  height: 44px;
  font-size: 14px;
  background: var(--xswclsn-tml-avatar-bg, linear-gradient(135deg, #10b981 0%, #059669 100%));
  color: var(--xswclsn-tml-avatar-text, #fff);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 .xswclsn-notification-card__avatar-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.xswclsn-notifications .xswclsn-tml-bubble-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 .xswclsn-notification-card__author-line {
  font-weight: 700;
  color: var(--xswclsn-tml-author, #064e3b);
  font-style: normal;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 .xswclsn-star { color: var(--xswclsn-tml-star-off, #a7f3d0); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-2 .xswclsn-star.is-on { color: var(--xswclsn-tml-star-on, #059669); }

/* ── T3: Centered Elegant ───────────────────────────────────────
   Large decorative quote mark, centered layout, verified badge.    */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-3 {
  background: #fff;
  border: 1px solid var(--xswclsn-tml-card-border, rgba(0, 0, 0, 0.04));
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09), 0 3px 8px rgba(0, 0, 0, 0.05);
  padding: 20px 22px;
}
.xswclsn-notifications .xswclsn-tml-elegant {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-3 .xswclsn-notification-card__quote-mark {
  font-size: 3.5rem;
  color: var(--xswclsn-tml-quote-mark, #a78bfa);
  opacity: .6;
  margin-bottom: -2px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-3 .xswclsn-notification-card__quote {
  font-style: italic;
  font-size: var(--xswclsn-fz-lg);
  color: var(--xswclsn-tml-quote, #1f2937);
  line-height: 1.5;
  margin: 0;
}
.xswclsn-notifications .xswclsn-tml-elegant .xswclsn-notification-card__rating {
  justify-content: center;
  margin: 6px 0 4px;
}
.xswclsn-notifications .xswclsn-tml-elegant .xswclsn-notification-card__author-line {
  display: block;
  text-align: center;
  font-style: italic;
  font-weight: 400;
  color: var(--xswclsn-tml-author, var(--xswclsn-text-muted));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-3 .xswclsn-star { color: var(--xswclsn-tml-star-off, #e5e7eb); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-3 .xswclsn-star.is-on { color: var(--xswclsn-tml-star-on, #fbbf24); }
.xswclsn-notifications .xswclsn-tml-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--xswclsn-tml-badge-bg, #f5f3ff);
  color: var(--xswclsn-tml-badge-text, #6d28d9);
  margin-top: 4px;
}
.xswclsn-notifications .xswclsn-tml-verified-badge--green {
  background: var(--xswclsn-tml-badge-green-bg, #dcfce7);
  color: var(--xswclsn-tml-badge-green-text, #15803d);
}

/* ── T4: Compact Inline ─────────────────────────────────────────
   Ultra-compact, whisper-style notification: small footprint.      */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
  border: 1px solid var(--xswclsn-tml-card-border, #fde68a);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
  padding: 8px 10px 8px 12px;
  font-size: 12px;
}
.xswclsn-notifications .xswclsn-tml-compact-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-notification-card__avatar {
  width: 44px;
  height: 44px;
  font-size: 13px;
  background: var(--xswclsn-tml-avatar-bg, linear-gradient(135deg, #f59e0b 0%, #d97706 100%));
  color: var(--xswclsn-tml-avatar-text, #fff);
  flex-shrink: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-notification-card__avatar-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.xswclsn-notifications .xswclsn-tml-compact-body {
  flex: 1;
  min-width: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-notification-card__author-line {
  font-size: 12px;
  font-weight: 700;
  color: var(--xswclsn-tml-author, #78350f);
  font-style: normal;
  margin-bottom: 1px;
}
.xswclsn-notifications .xswclsn-tml-compact-quote-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-notification-card__quote {
  font-size: 12px;
  font-style: italic;
  color: var(--xswclsn-tml-quote, #6b7280);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-star { color: var(--xswclsn-tml-star-off, #fcd34d); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-star.is-on { color: var(--xswclsn-tml-star-on, #d97706); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-notification-card__rating {
  margin: 0;
  flex-shrink: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-4 .xswclsn-notification-card__rating .xswclsn-star {
  font-size: 11px;
}

/* ── T5: Bold Dark ──────────────────────────────────────────────
   Dark purple gradient + white text, glowing shadow, centered.     */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 {
  background: var(--xswclsn-tml-dark-gradient, linear-gradient(145deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%));
  border: 1px solid var(--xswclsn-tml-card-border, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12);
  color: #fff;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 55%);
  border-radius: inherit;
  pointer-events: none;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-notification-card__close {
  color: rgba(255, 255, 255, 0.6);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-notification-card__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-notification-card__quote-mark {
  color: var(--xswclsn-tml-quote-mark, rgba(255, 255, 255, 0.5));
  opacity: 1;
  font-size: 3.5rem;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-notification-card__quote {
  color: var(--xswclsn-tml-quote, #fff);
  font-style: italic;
  font-size: var(--xswclsn-fz-lg);
  line-height: 1.5;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-star {
  color: var(--xswclsn-tml-star-off, rgba(255, 255, 255, 0.3));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-star.is-on {
  color: var(--xswclsn-tml-star-on, #fef08a);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-5 .xswclsn-notification-card__author-line {
  color: var(--xswclsn-tml-author, rgba(255, 255, 255, 0.78));
}

/* ── T6: Card with Photo ────────────────────────────────────────
   Centered layout with large avatar ring, name, stars, quote.     */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-6 {
  background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
  border: 1px solid var(--xswclsn-tml-card-border, #ede9fe);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.xswclsn-notifications .xswclsn-tml-photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.xswclsn-notifications .xswclsn-tml-photo-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 3px;
  background: var(--xswclsn-tml-ring-gradient, linear-gradient(135deg, #8b5cf6 0%, #a78bfa 50%, #7c3aed 100%));
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.xswclsn-notifications .xswclsn-tml-photo-ring .xswclsn-notification-card__avatar {
  width: 100%;
  height: 100%;
  font-size: 18px;
  background: var(--xswclsn-tml-photo-inner-bg, #f5f3ff);
  color: var(--xswclsn-tml-photo-inner-text, #5b21b6);
  border: 2px solid #fff;
}
/* Ring photos: override global fixed 40px on __avatar-img so preset/upload match initials fill. */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-6 .xswclsn-tml-photo-ring .xswclsn-notification-card__avatar-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  flex-shrink: 0;
  box-sizing: border-box;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-6 .xswclsn-notification-card__author-line {
  font-weight: 700;
  font-size: var(--xswclsn-fz-md);
  color: var(--xswclsn-tml-author, #1e1b4b);
  font-style: normal;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-6 .xswclsn-star { color: var(--xswclsn-tml-star-off, #ddd6fe); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-6 .xswclsn-star.is-on { color: var(--xswclsn-tml-star-on, #fbbf24); }
.xswclsn-notifications .xswclsn-tml-photo-card .xswclsn-notification-card__rating {
  justify-content: center;
  margin: 0;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-testimonials-6 .xswclsn-notification-card__quote {
  font-style: italic;
  color: var(--xswclsn-tml-quote, #4b5563);
  line-height: 1.5;
  margin: 2px 0;
}

/* =====================================================================
   SECTION 10 — REAL ORDER — type chrome, ro-* components, T1–T8
   The dummy_order category shares the same markup and CSS (dual class on card root).
   ===================================================================== */

/* ── Real Order type hooks ───────────────────────────────────── */
/* Purchase notifications:/* Purchase notifications: generic row/body chrome (template-specific rules override). */
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__row { display: flex; align-items: flex-start; gap: var(--xswclsn-space-md); }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__body { flex: 1; min-width: 0; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__topline { font-size: var(--xswclsn-meta-fz, var(--xswclsn-fz-sm)); color: var(--xswclsn-text-muted); margin-bottom: 2px; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__name { font-weight: 600; color: var(--xswclsn-text); }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__mainline { font-size: var(--xswclsn-fz-md); letter-spacing: -0.01em; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__action { font-weight: 600; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__product {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card--purchase a.xswclsn-notification-card__product:hover { text-decoration: underline; }
/* Thumbnail links: keep flex/grid layout (anchor does not add a box). */
.xswclsn-notifications .xswclsn-notification-card--purchase a.xswclsn-ro-thumb-hit {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.xswclsn-notifications .xswclsn-notification-card--purchase a.xswclsn-ro-proof-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.xswclsn-notifications .xswclsn-notification-card--purchase a.xswclsn-ro-proof-link:hover { text-decoration: underline; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__time { font-size: var(--xswclsn-meta-fz, var(--xswclsn-fz-sm)); }

/* ── Real Order + Dummy Order templates T1–T8 ───────────────── */

/* -- Per-variant color tokens for Real Order (8 templates) */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 {--tc:var(--xswclsn-primary,#dc2626);--tc-l:#fee2e2;--tc-d:#991b1b;--tc-a:rgba(220,38,38,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 {--tc:#ea580c;--tc-l:#fff7ed;--tc-d:#9a3412;--tc-a:rgba(234,88,12,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 {--tc:var(--xswclsn-primary,#0891b2);--tc-l:#ecfeff;--tc-d:#155e75;--tc-a:rgba(8,145,178,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-4 {--tc:var(--xswclsn-primary,#6d28d9);--tc-l:#f5f3ff;--tc-d:#4c1d95;--tc-a:rgba(109,40,217,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 {--tc:var(--xswclsn-primary,#059669);--tc-l:#ecfdf5;--tc-d:#064e3b;--tc-a:rgba(5,150,105,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 {--tc:var(--xswclsn-primary,#1d4ed8);--tc-l:#eff6ff;--tc-d:#1e3a8a;--tc-a:rgba(29,78,216,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 {--tc:var(--xswclsn-primary,#d4af37);--tc-l:#1c1c1e;--tc-d:#b8941e;--tc-a:rgba(212,175,55,.18)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 {--tc:var(--xswclsn-primary,#7c3aed);--tc-l:#f5f3ff;--tc-d:#5b21b6;--tc-a:rgba(124,58,237,.14)}

/* Global STYLE N uses [class$="-N"] and would flatten unique Recent purchase layouts. */
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-real-order-"]::after {
  content: none;
  display: none;
}

/* ====================================================================
   T1 — Classic Toast
   Standard horizontal layout: product image left, buyer info + product + time right.
   Left accent border for urgency. Inspired by the reference screenshot.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 {
  background: linear-gradient(180deg, #ffffff 0%, #fffbfb 100%);
  border: 1px solid var(--ro-card-border, #fecaca);
  border-left: 4px solid var(--ro-left-accent, var(--tc, #dc2626));
  border-radius: 2px 12px 12px 2px;
  box-shadow: 0 4px 14px rgba(220, 38, 38, .1), 0 1px 3px rgba(0,0,0,.04);
  padding-left: 16px;
}
.xswclsn-notifications .xswclsn-ro-classic { display: flex; flex-direction: column; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__row {
  align-items: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__thumb {
  width: 100px; height: 100px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__thumb--ph {
  width: 100px; height: 100px; border-radius: 10px;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__topline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--xswclsn-text);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__name { color: var(--ro-name, #1a1a2e); font-weight: 600; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__location { color: var(--ro-location, #6b7280); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__mainline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--ro-purchased, #6b7280); margin-top: 3px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__product {
  color: var(--ro-product, #991b1b); font-weight: 700; font-size: var(--xswclsn-fz-lg);
  display: block; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-1 .xswclsn-notification-card__time {
  font-size: 12px; color: var(--ro-time, #9ca3af); margin-top: 4px; display: block;
}

/* ====================================================================
   T2 — Map Pin Card
   Location header shows buyer name + city. Product image left of details.
   Time placed beneath product name. Warm orange palette.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  border: 1px solid var(--ro-card-border, #fed7aa);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(234, 88, 12, .08), 0 1px 3px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-ro-mappin { display: flex; flex-direction: column; gap: 8px; }
.xswclsn-notifications .xswclsn-ro-mappin-header {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 400; letter-spacing: .01em;
  color: #9a3412;
}
.xswclsn-notifications .xswclsn-ro-mappin-icon { display: flex; color: var(--ro-mappin-icon, #ea580c); flex-shrink: 0; }
.xswclsn-notifications .xswclsn-ro-mappin-loc { flex: 1; min-width: 0; line-height: 1.3; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 .xswclsn-ro-mappin-loc .xswclsn-notification-card__name {
  color: var(--ro-name, #9a3412); font-weight: 700;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 .xswclsn-ro-mappin-loc .xswclsn-notification-card__location {
  color: var(--ro-location, #6b7280);
}
.xswclsn-notifications .xswclsn-ro-mappin-thumb {
  width: 75px; height: 75px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.xswclsn-notifications .xswclsn-ro-mappin-thumb--ph {
  display: block; width: 75px; height: 75px; border-radius: 10px;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 .xswclsn-notification-card__row {
  align-items: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 .xswclsn-notification-card__mainline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--ro-purchased, #6b7280); margin-bottom: 3px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 .xswclsn-notification-card__product {
  color: var(--ro-product, #9a3412); font-weight: 700; font-size: var(--xswclsn-fz-lg); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-2 .xswclsn-notification-card__time {
  display: block; margin-top: 4px; font-size: 12px; color: var(--ro-time, #c2410c); opacity: .7;
}

/* ====================================================================
   T3 — Split Image Hero
   Large product image banner top, details below. Teal/cyan palette.
   Product image is the visual hero — prominent and attention-grabbing.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 {
  background: #ffffff;
  border: 1px solid var(--ro-card-border, rgba(0,0,0,.06));
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(8, 145, 178, .1), 0 2px 6px rgba(0,0,0,.05);
  padding: 0;
  overflow: hidden;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 .xswclsn-notification-card__close {
  z-index: 2; top: 8px; right: 8px;
}
.xswclsn-notifications .xswclsn-ro-hero { display: flex; flex-direction: column; }
.xswclsn-notifications .xswclsn-ro-hero-img {
  width: 100%; height: 110px; overflow: hidden;
  background: linear-gradient(135deg, var(--ro-hero-band-a, #ecfeff) 0%, var(--ro-hero-band-b, #cffafe) 100%);
}
.xswclsn-notifications .xswclsn-ro-hero-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.xswclsn-notifications .xswclsn-ro-hero-img--ph { background: linear-gradient(135deg, var(--ro-hero-band-a, #ecfeff) 0%, var(--ro-hero-band-b, #a5f3fc) 100%); }
.xswclsn-notifications .xswclsn-ro-hero-body {
  padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--ro-hero-body-bg, transparent);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 .xswclsn-notification-card__topline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--xswclsn-text);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 .xswclsn-notification-card__name { color: var(--ro-name, #155e75); font-weight: 600; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 .xswclsn-notification-card__location { color: var(--ro-location, #6b7280); }
.xswclsn-notifications .xswclsn-ro-hero-purchased {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--ro-purchased, #6b7280);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 .xswclsn-notification-card__product {
  color: var(--ro-product, #0891b2); font-weight: 700; font-size: var(--xswclsn-fz-lg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-3 .xswclsn-notification-card__time {
  font-size: 12px; color: var(--ro-time, #9ca3af); margin-top: 1px;
}

/* ====================================================================
   T4 — Compact Inline
   Ultra-tight single row with a tiny product thumbnail. Minimal footprint.
   Purple palette, perfect for non-intrusive notifications.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-4 {
  background: #ffffff;
  border: 1px solid var(--ro-card-border, #e9d5ff);
  border-radius: 8px;
  box-shadow: none;
  padding: 11px 13px;
  font-size: 15px;
}
.xswclsn-notifications .xswclsn-ro-compact { display: flex; align-items: center; gap: 11px; }
.xswclsn-notifications .xswclsn-ro-compact-thumb {
  width: 75px; height: 75px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.xswclsn-notifications .xswclsn-ro-compact-thumb--ph {
  display: block; width: 75px; height: 75px; border-radius: 10px;
  background: linear-gradient(135deg, #f5f3ff 0%, #e9d5ff 100%);
}
.xswclsn-notifications .xswclsn-ro-compact-body { flex: 1; min-width: 0; }
.xswclsn-notifications .xswclsn-ro-compact-line {
  display: block; font-size: 15px; line-height: var(--xswclsn-line-height-tight);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ro-compact-purchased, #4c1d95);
}
.xswclsn-notifications .xswclsn-ro-compact-meta {
  display: flex; gap: 9px; font-size: 14px; color: var(--ro-meta, #6b7280); margin-top: 4px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-4 .xswclsn-ro-compact-meta .xswclsn-notification-card__location { color: var(--ro-location, var(--ro-meta, #6b7280)); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-4 .xswclsn-ro-compact-meta .xswclsn-notification-card__time { color: var(--ro-time, var(--ro-meta, #6b7280)); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-4 .xswclsn-notification-card__name { font-weight: 600; color: var(--ro-name, #4c1d95); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-4 .xswclsn-notification-card__product { font-weight: 700; color: var(--ro-product, #6d28d9); }

/* ====================================================================
   T5 — Social Proof Stack
   Verified badge at top, large product image + buyer info, "View product" link.
   Green palette for trust & verified authenticity.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid var(--ro-card-border, #bbf7d0);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(5, 150, 105, .1), 0 1px 3px rgba(0,0,0,.04);
  padding-right: 18px;
  color: var(--xswclsn-text);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__close { right: 6px; top: 6px; color: #166534; opacity: .9; }
.xswclsn-notifications .xswclsn-ro-proof { display: flex; flex-direction: column; gap: 8px; }
.xswclsn-notifications .xswclsn-ro-proof-main { display: block; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__badge {
  background: var(--ro-badge-bg, #dcfce7); color: var(--ro-badge-text, #166534); align-self: flex-start;
  font-size: 14px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__row { gap: 12px; align-items: center; min-width: 0; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__thumb {
  width: 100px; height: 100px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__thumb--ph {
  width: 100px; height: 100px; border-radius: 12px;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__topline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--xswclsn-text);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__name { color: var(--ro-name, #064e3b); font-weight: 600; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__location { color: var(--ro-location, #6b7280); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__mainline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--ro-purchased, #6b7280); margin-top: 3px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__product {
  color: var(--ro-product, #059669); font-weight: 700; font-size: var(--xswclsn-fz-lg);
  display: block; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__time {
  font-size: 12px; color: var(--ro-time, #9ca3af); margin-top: 4px; display: block;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__link {
  color: var(--ro-footer-link, #059669); font-size: 15px; font-weight: 700; margin-top: 0;
  display: inline-block; text-decoration: none;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-ro-proof-footer {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-ro-proof-link {
  white-space: nowrap;
  padding: 2px 6px;
  color: var(--ro-footer-link, #059669);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 a.xswclsn-ro-proof-link:hover { color: var(--ro-footer-link-hover, #047857); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-5 .xswclsn-notification-card__link:hover { text-decoration: underline; }

/* ====================================================================
   T6 — Minimal Text
   Text-only with verified badge, prominent product name, blue palette.
   Clean and distraction-free for stores that prefer text-based notifications.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 {
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border: 1px solid var(--ro-card-border, #bfdbfe);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(29, 78, 216, .08), 0 1px 3px rgba(0,0,0,.04);
}
.xswclsn-notifications .xswclsn-ro-minimal { display: flex; flex-direction: column; gap: 6px; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 .xswclsn-notification-card__badge {
  background: var(--ro-badge-bg, #dbeafe); color: var(--ro-badge-text, #1e40af); align-self: flex-start;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 .xswclsn-notification-card__mainline { font-size: var(--xswclsn-fz-md); color: var(--ro-t6-inline-rest, #6b7280); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 .xswclsn-notification-card__name { font-weight: 600; color: var(--ro-name, #1e3a8a); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 .xswclsn-notification-card__location { color: var(--ro-location, #6b7280); }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 .xswclsn-notification-card__product {
  font-weight: 700; font-size: var(--xswclsn-fz-lg); color: var(--ro-product, #1d4ed8);
  display: block; margin-top: 2px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 .xswclsn-notification-card__time {
  font-size: 11px; color: var(--ro-time, #9ca3af);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-6 a.xswclsn-notification-card__product:hover { text-decoration: underline; }

/* ====================================================================
   T7 — Dark Luxe
   Premium dark card with gold accent left border. Large product image.
   Designed for luxury/fashion brands with a sophisticated dark theme.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 {
  background: var(--ro-luxe-gradient, linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%));
  border: 1px solid var(--ro-luxe-border, rgba(212, 175, 55, .25));
  border-left: 4px solid var(--ro-luxe-accent, #d4af37);
  border-radius: 2px 14px 14px 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 2px 8px rgba(0,0,0,.2);
  color: #fafaf9;
  padding-left: 16px;
}
.xswclsn-notifications .xswclsn-ro-luxe { display: flex; flex-direction: column; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__row {
  align-items: center;
}
.xswclsn-notifications .xswclsn-ro-luxe-thumb {
  width: 90px; height: 90px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  border: 1px solid var(--ro-luxe-thumb-border, rgba(212, 175, 55, .15));
}
.xswclsn-notifications .xswclsn-ro-luxe-thumb--ph {
  display: block; width: 90px; height: 90px; border-radius: 10px;
  background: linear-gradient(135deg, #2c2c2e 0%, #3a3a3c 100%);
  border: 1px solid var(--ro-luxe-thumb-border, rgba(212, 175, 55, .15));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__close {
  color: rgba(250, 250, 249, .5);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__close:hover {
  color: var(--ro-close-hover, rgba(250, 250, 249, .9));
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__topline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__name {
  color: var(--ro-name, #fafaf9); font-weight: 600; letter-spacing: .01em;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__location {
  color: var(--ro-location, #94a3b8);
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__mainline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--ro-purchased, #94a3b8); margin-top: 3px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__product {
  color: var(--ro-product, #d4af37); font-weight: 700; font-size: var(--xswclsn-fz-lg);
  display: block; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-7 .xswclsn-notification-card__time {
  font-size: 12px; color: var(--ro-time, rgba(148, 163, 184, .6)); margin-top: 4px; display: block;
}

/* ====================================================================
   T8 — Glassmorphism Float
   Frosted glass effect with circular product image. Modern 2025-2026 trend.
   Purple/violet accent palette with backdrop blur and luminous border.
   ==================================================================== */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border: 1px solid var(--ro-glass-border, rgba(124, 58, 237, .18));
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(124, 58, 237, .12), 0 2px 8px rgba(0,0,0,.06);
}
.xswclsn-notifications .xswclsn-ro-glass { display: flex; flex-direction: column; }
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__row {
  align-items: center;
}
.xswclsn-notifications .xswclsn-ro-glass-thumb {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(124, 58, 237, .15);
  border: 2px solid var(--ro-glass-thumb-border, rgba(124, 58, 237, .2));
}
.xswclsn-notifications .xswclsn-ro-glass-thumb--ph {
  display: block; width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ro-glass-thumb-ph-a, #f5f3ff) 0%, var(--ro-glass-thumb-ph-b, #ede9fe) 100%);
  border: 2px solid var(--ro-glass-thumb-border, rgba(124, 58, 237, .15));
}
.xswclsn-notifications .xswclsn-ro-glass-emoji {
  font-size: 15px; margin-right: 4px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__topline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--xswclsn-text);
  display: flex; align-items: center;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__name {
  color: var(--ro-name, #1a1a2e); font-weight: 600;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__location {
  color: var(--ro-location, #6b7280);
  margin-left: 8px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__mainline {
  font-size: var(--xswclsn-fz-md); line-height: var(--xswclsn-line-height-tight); color: var(--ro-purchased, #6b7280); margin-top: 3px;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__product {
  color: var(--ro-product, #7c3aed); font-weight: 700; font-size: var(--xswclsn-fz-lg);
  display: block; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-real-order-8 .xswclsn-notification-card__time {
  font-size: 12px; color: var(--ro-time, #a78bfa); margin-top: 4px; display: block;
}

/* ── Recent purchases: image row layout (image_position / image_align) ── */
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__row.xswclsn-ro-row--pos-right { flex-direction: row-reverse; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__row.xswclsn-ro-row--pos-above { flex-direction: column; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__row.xswclsn-ro-row--pos-below { flex-direction: column-reverse; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-compact.xswclsn-ro-row--pos-right { flex-direction: row-reverse; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-compact.xswclsn-ro-row--pos-above { flex-direction: column; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-compact.xswclsn-ro-row--pos-below { flex-direction: column-reverse; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__row.xswclsn-ro-row--align-center { align-items: center; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-notification-card__row.xswclsn-ro-row--align-bottom { align-items: flex-end; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-above { flex-direction: column; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-below { flex-direction: column-reverse; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-left,
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-right { flex-direction: row; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-right { flex-direction: row-reverse; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-left .xswclsn-ro-hero-img,
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-right .xswclsn-ro-hero-img { width: 42%; height: auto; min-height: 110px; flex-shrink: 0; }
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-left .xswclsn-ro-hero-body,
.xswclsn-notifications .xswclsn-notification-card--purchase .xswclsn-ro-hero.xswclsn-ro-row--pos-right .xswclsn-ro-hero-body { flex: 1; min-width: 0; }

/* ── Viewing count: image row layout (image_position / image_align) ── */
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--pos-right { flex-direction: row-reverse; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--pos-above { flex-direction: column; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--pos-below { flex-direction: column-reverse; align-items: stretch; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--align-center { align-items: center; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--align-bottom { align-items: flex-end; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--pos-above .xswclsn-vc-thumb,
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row.xswclsn-ro-row--pos-below .xswclsn-vc-thumb {
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: cover;
}

/* =====================================================================
   SECTION 11 — COUNTER (VIEWING COUNT) — type chrome, vc-* components, T1–T6
   ===================================================================== */

/* ── Counter type hooks ──────────────────────────────────────── */
/* Counter: big number/* Counter: big number + label; optional image and link */
.xswclsn-notifications .xswclsn-notification-card--counter { text-align: center; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row { text-align: left; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__count { font-size: 2.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__count-label { font-size: var(--xswclsn-meta-fz, var(--xswclsn-fz-sm)); color: var(--xswclsn-text-muted); margin-top: 2px; }
.xswclsn-notifications .xswclsn-notification-card__counter-link { display: block; text-decoration: none; color: inherit; }
.xswclsn-notifications .xswclsn-notification-card__counter-link:hover { color: inherit; }
.xswclsn-notifications .xswclsn-notification-card__counter-img { display: block; margin: 4px 0; }
.xswclsn-notifications .xswclsn-notification-card__counter-img img { display: block; max-width: 100%; height: auto; border-radius: inherit; }
.xswclsn-notifications .xswclsn-notification-card__counter-img--align-top { text-align: left; }
.xswclsn-notifications .xswclsn-notification-card__counter-img--align-center { text-align: center; }
.xswclsn-notifications .xswclsn-notification-card__counter-img--align-bottom { text-align: right; }

/* ── Counter structural chrome (shared vc-* + --counter row) ── */
/* ── COUNTER: Product + inline count (V6-10) ─────────────────── *//* ── COUNTER: Product + inline count (V6-10) ─────────────────── */

.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--xswclsn-space-md);
  text-align: left;
}
.xswclsn-notifications .xswclsn-notification-card--counter .xswclsn-notification-card__row .xswclsn-notification-card__body {
  flex: 1;
  min-width: 0;
}

/* ── Counter templates T1–T6 ────────────────────────────────── */
/* =====================================================================
   VIEWING COUNT (Counter) - 6 structurally unique templates
   ===================================================================== */

/* Shared Viewing Count elements */
.xswclsn-notifications .xswclsn-vc-thumb{width:90px;height:90px;border-radius:10px;object-fit:cover;flex-shrink:0}
.xswclsn-notifications .xswclsn-vc-thumb--lg{width:100px;height:100px;border-radius:14px}
.xswclsn-notifications .xswclsn-vc-thumb--sm{width:48px;height:48px;border-radius:8px}
.xswclsn-notifications .xswclsn-vc-thumb--ph{display:block;background:linear-gradient(135deg,#ecfeff 0%,#cffafe 100%);border:1px solid rgba(8,145,178,.12)}
.xswclsn-notifications .xswclsn-vc-headline{font-size:var(--xswclsn-fz-md);line-height:1.4;color:var(--vc-headline,var(--xswclsn-text,#1d2327));font-weight:500}
.xswclsn-notifications .xswclsn-vc-count{font-weight:800;color:var(--vc-count,var(--tc,#0891b2));letter-spacing:-0.01em}
.xswclsn-notifications .xswclsn-vc-cta{display:block;font-size:var(--xswclsn-fz-sm);font-style:italic;color:var(--vc-cta,#6b7280);margin-top:4px;line-height:1.4}
.xswclsn-notifications .xswclsn-vc-eye{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;color:var(--vc-eye,var(--tc,#0891b2));opacity:0.7}

/* T1: Classic Viewer Toast */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1{background:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%);border:1px solid var(--vc-card-border,#a5f3fc);border-left:4px solid var(--vc-left-accent,#0891b2);border-radius:2px 10px 10px 2px;box-shadow:0 4px 14px rgba(8,145,178,.1),0 1px 3px rgba(0,0,0,.04);padding-left:16px}
.xswclsn-notifications .xswclsn-vc-classic{display:flex;flex-direction:column}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1 .xswclsn-notification-card__row{align-items:center}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1 .xswclsn-vc-thumb{width:100px;height:100px;border-radius:10px;box-shadow:0 2px 8px rgba(8,145,178,.12)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1 .xswclsn-vc-headline{font-weight:600;font-size:var(--xswclsn-fz-md);color:var(--vc-headline,#155e75);line-height:1.35}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1 .xswclsn-vc-count{font-size:1.1em;color:var(--vc-count,#0891b2)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1 .xswclsn-notification-card__product{color:var(--vc-product,#0891b2);font-weight:700;font-size:var(--xswclsn-fz-md);display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-1 .xswclsn-vc-cta{color:var(--vc-cta,#6b7280)}

/* T2: Minimal Observer */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2{background:#fff;border:1px solid var(--vc-card-border,#f1f5f9);border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.05);padding:12px 14px}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--vc-bottom-bar,#0891b2);border-radius:0 0 8px 8px;opacity:.55}
.xswclsn-notifications .xswclsn-vc-minimal{display:flex;flex-direction:column}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2 .xswclsn-notification-card__row{align-items:center}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2 .xswclsn-vc-thumb{width:100px;height:100px;border-radius:8px}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2 .xswclsn-vc-headline{font-size:13.5px;font-weight:500;color:var(--vc-headline,#475569);display:flex;align-items:center;flex-wrap:wrap;gap:0;line-height:1.45}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2 .xswclsn-vc-count{font-size:1.15em;color:var(--vc-count,#0891b2);font-weight:700}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2 .xswclsn-vc-eye{color:var(--vc-eye,#0891b2)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-2 .xswclsn-notification-card__product{color:var(--vc-product,#155e75);font-weight:600;font-size:var(--xswclsn-fz-md);display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* T3: Elevated Live Card */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3{background:#fff;border:1px solid var(--vc-card-border,rgba(0,0,0,.04));border-radius:20px;box-shadow:0 12px 32px rgba(8,145,178,.1),0 3px 8px rgba(0,0,0,.05);padding:18px 20px}
.xswclsn-notifications .xswclsn-vc-elevated{display:flex;flex-direction:column;gap:10px}
.xswclsn-notifications .xswclsn-vc-live-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--vc-live-badge-text,#dc2626);background:var(--vc-live-badge-bg,#fef2f2);border:1px solid rgba(220,38,38,.15);border-radius:20px;padding:3px 10px 3px 8px;align-self:flex-start}
.xswclsn-notifications .xswclsn-vc-pulse{width:8px;height:8px;border-radius:50%;background:var(--vc-live-pulse,#dc2626);display:inline-block;animation:xswclsn-vc-pulse-anim 1.5s ease-in-out infinite}
@keyframes xswclsn-vc-pulse-anim{0%,
100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-notification-card__row{align-items:center}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-vc-thumb{border-radius:14px;box-shadow:0 2px 10px rgba(8,145,178,.14)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-vc-headline{font-size:var(--xswclsn-fz-md);font-weight:600;color:var(--vc-headline,#334155)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-vc-count{font-size:1.2em;color:var(--vc-count,#0891b2);font-weight:800}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-notification-card__product{color:var(--vc-product,#0e7490);font-weight:700;font-size:var(--xswclsn-fz-lg);display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-notification-card__link{font-size:var(--xswclsn-fz-sm);color:var(--vc-footer-link,#0891b2);margin-top:4px;display:inline-block;font-weight:500}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-3 .xswclsn-notification-card__link:hover{color:var(--vc-footer-link-hover,#0e7490)}

/* T4: Compact Counter */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-4{border:1px solid var(--vc-card-border,#e5e7eb);border-radius:6px;box-shadow:none;padding:8px 10px 8px 12px;font-size:12px}
.xswclsn-notifications .xswclsn-vc-compact{display:flex;flex-direction:column}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-4 .xswclsn-notification-card__row{align-items:center;gap:10px}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-4 .xswclsn-vc-thumb--sm{border-radius:6px}
.xswclsn-notifications .xswclsn-vc-compact-line{font-size:12px;font-weight:500;color:var(--vc-compact-line,#475569);display:block;line-height:1.5}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-4 .xswclsn-vc-count{font-size:13px;font-weight:800;color:var(--vc-count,#0891b2)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-4 .xswclsn-notification-card__product{color:var(--vc-product,#155e75);font-weight:600;font-size:12px;display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* T5: Bold Dark Counter */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5{background:var(--vc-dark-gradient,linear-gradient(135deg,#155e75 0%,#0e4f63 60%,#0c3547 100%));border:1px solid var(--vc-card-border,rgba(8,145,178,.3));border-radius:12px;box-shadow:0 8px 28px rgba(8,145,178,.2),0 2px 8px rgba(0,0,0,.15);color:#fff}
.xswclsn-notifications .xswclsn-vc-dark{display:flex;flex-direction:column}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-notification-card__row{align-items:center}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-vc-thumb{border-radius:10px;box-shadow:0 3px 12px rgba(0,0,0,.3);border:2px solid var(--vc-thumb-border,rgba(255,255,255,.15))}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-vc-thumb--ph{background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.12)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-vc-headline{color:var(--vc-headline,rgba(255,255,255,.9));font-weight:600}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-vc-count{color:var(--vc-count,#67e8f9);font-size:1.2em;font-weight:800}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-notification-card__product{color:var(--vc-product,#fff);font-weight:700;font-size:var(--xswclsn-fz-lg);display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-vc-cta{color:var(--vc-cta,rgba(255,255,255,.7));font-style:italic}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-notification-card__close{color:rgba(255,255,255,.5)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-5 .xswclsn-notification-card__close:hover{background:rgba(255,255,255,.12);color:var(--vc-close-hover,rgba(255,255,255,.9))}

/* T6: Trending Card */
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6{background:linear-gradient(180deg,#ecfeff 0%,#f0fdfa 100%);border:1px solid var(--vc-card-border,rgba(8,145,178,.15));border-radius:12px;box-shadow:0 4px 16px rgba(8,145,178,.08),0 1px 4px rgba(0,0,0,.04)}
.xswclsn-notifications .xswclsn-vc-trending{display:flex;flex-direction:column;gap:10px}
.xswclsn-notifications .xswclsn-vc-trending-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--vc-trending-badge-text,#ea580c);background:var(--vc-trending-badge-bg,#fff7ed);border:1px solid rgba(234,88,12,.15);border-radius:20px;padding:3px 10px;align-self:flex-start}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6 .xswclsn-notification-card__row{align-items:center}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6 .xswclsn-vc-thumb{border-radius:10px;box-shadow:0 2px 8px rgba(8,145,178,.1)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6 .xswclsn-vc-headline{font-weight:600;color:var(--vc-headline,#155e75);font-size:var(--xswclsn-fz-md)}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6 .xswclsn-vc-count{color:var(--vc-count,#0891b2);font-size:1.1em;font-weight:800}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6 .xswclsn-notification-card__product{color:var(--vc-product,#0e7490);font-weight:700;font-size:var(--xswclsn-fz-md);display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.xswclsn-notifications .xswclsn-notification-card.xswclsn-template-counter-6 .xswclsn-vc-cta{color:var(--vc-cta,#6b7280)}

/* =====================================================================
   SECTION 12 — SOCIAL FOLLOW — type chrome, sf-* components, T1–T5
   ===================================================================== */

/* ── Social Follow type hooks ────────────────────────────────── */
/* Social: icon + message + button *//* Social: icon + message + button */
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__social-row { display: flex; align-items: center; gap: var(--xswclsn-space-md); }
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__social-icon { width: var(--xswclsn-icon-container-md); height: var(--xswclsn-icon-container-md); border-radius: 12px; background: currentColor; opacity: 0.14; flex-shrink: 0; }
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__social-icon-wrap { flex-shrink: 0; width: var(--xswclsn-icon-container-md); height: var(--xswclsn-icon-container-md); border-radius: 12px; overflow: hidden; }
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__social-icon-wrap .xswclsn-notification-card__social-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__social-body { flex: 1; min-width: 0; }
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__message { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.xswclsn-notifications .xswclsn-notification-card__social-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; }
.xswclsn-notifications .xswclsn-notification-card__social-channel { display: inline-flex; align-items: center; justify-content: center; width: var(--xswclsn-icon-container-sm); height: var(--xswclsn-icon-container-sm); border-radius: 10px; background: rgba(0,0,0,0.06); color: inherit; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.xswclsn-notifications .xswclsn-notification-card__social-channel:hover { background: rgba(0,0,0,0.1); transform: scale(1.05); }
.xswclsn-notifications .xswclsn-notification-card__social-channel .xswclsn-notification-card__social-icon-img { width: 20px; height: 20px; object-fit: contain; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default { width: 20px; height: 20px; border-radius: 4px; background: currentColor; opacity: 0.5; display: block; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--facebook { opacity: 0.6; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--twitter { opacity: 0.6; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--instagram { opacity: 0.6; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--youtube { opacity: 0.6; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--tiktok { opacity: 0.6; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--linkedin { opacity: 0.6; }
.xswclsn-notifications .xswclsn-notification-card__social-icon-default--custom { opacity: 0.5; }

/* ── Social Follow structural chrome (sf-* shared elements + T1–T5) ── */
/* ── SOCIAL FOLLOW: shared structural styles (xswclsn-sf) ─────── *//* ── SOCIAL FOLLOW: shared structural styles (xswclsn-sf) ─────── */

.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--xswclsn-space-md);
}
.xswclsn-notifications .xswclsn-notification-card--social .xswclsn-notification-card__row .xswclsn-notification-card__body {
  flex: 1;
  min-width: 0;
}

/* Social follow icon row */
.xswclsn-notifications .xswclsn-sf__icons-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.xswclsn-notifications .xswclsn-sf__icons-row--sm { gap: 8px; margin-top: 8px; justify-content: flex-start; }
.xswclsn-notifications .xswclsn-sf__icons-row--inline { gap: 6px; margin-top: 0; justify-content: flex-end; }

/* Individual social platform icon */
.xswclsn-notifications .xswclsn-sf__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.xswclsn-notifications .xswclsn-sf__icon:hover { transform: scale(1.08); }
.xswclsn-notifications .xswclsn-sf__icon:not(a) { cursor: default; }
.xswclsn-notifications .xswclsn-sf__icon:not(a):hover { transform: none; }
.xswclsn-notifications .xswclsn-sf__icon--fb { background: #1877f2; }
.xswclsn-notifications .xswclsn-sf__icon--tw { background: #0f1419; }
.xswclsn-notifications .xswclsn-sf__icon--ig { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.xswclsn-notifications .xswclsn-sf__icon--yt { background: #ff0000; }
.xswclsn-notifications .xswclsn-sf__icon--tt { background: #010101; }
.xswclsn-notifications .xswclsn-sf__icon--li { background: #0a66c2; }
.xswclsn-notifications .xswclsn-sf__icon--custom { background: var(--tc, #2563eb); }
.xswclsn-notifications .xswclsn-sf__icon svg { display: block; }
.xswclsn-notifications .xswclsn-sf__icon img { display: block; width: 60%; height: 60%; object-fit: contain; }

/* Small icon variant */
.xswclsn-notifications .xswclsn-sf__icons-row--sm .xswclsn-sf__icon { width: 30px; height: 30px; border-radius: 8px; }
.xswclsn-notifications .xswclsn-sf__icons-row--inline .xswclsn-sf__icon { width: 28px; height: 28px; border-radius: 7px; }

/* ── T1: Classic Connect — centered heading + sub + brand icons ── */
.xswclsn-notifications .xswclsn-sf--classic { text-align: center; }
.xswclsn-notifications .xswclsn-sf--classic .xswclsn-sf__header { margin-bottom: 2px; }
.xswclsn-notifications .xswclsn-sf--classic .xswclsn-notification-card__headline {
  font-weight: 700;
  font-size: var(--xswclsn-headline-fz);
  color: var(--sf-headline, var(--tc, #2563eb));
  margin-bottom: 4px;
  line-height: var(--xswclsn-line-height-tight);
}
.xswclsn-notifications .xswclsn-sf--classic .xswclsn-notification-card__sub {
  font-size: var(--xswclsn-sub-fz);
  color: var(--sf-sub, var(--xswclsn-text-muted));
  line-height: var(--xswclsn-line-height-body);
}

/* ── T2: Split Follow — lead icon + body with text + icon row ─── */
.xswclsn-notifications .xswclsn-sf--split .xswclsn-notification-card__headline {
  font-weight: 600;
  font-size: var(--xswclsn-headline-fz);
  color: var(--sf-headline, var(--tc-d, #0f766e));
  margin-bottom: 2px;
  line-height: var(--xswclsn-line-height-tight);
  text-align: left;
}
.xswclsn-notifications .xswclsn-sf--split .xswclsn-notification-card__sub {
  font-size: var(--xswclsn-sub-fz);
  color: var(--sf-sub, var(--xswclsn-text-muted));
  line-height: var(--xswclsn-line-height-body);
  text-align: left;
}
.xswclsn-notifications .xswclsn-sf__lead-icon {
  flex-shrink: 0;
  width: var(--xswclsn-icon-container-md);
  height: var(--xswclsn-icon-container-md);
  border-radius: 12px;
  background: var(--sf-lead-bg, var(--tc-l, #ccfbf1));
  color: var(--sf-lead-icon, var(--tc, #0d9488));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── T3: Platform Cards — headline + 4-column mini-card grid ──── */
.xswclsn-notifications .xswclsn-sf--cards { text-align: center; }
.xswclsn-notifications .xswclsn-sf--cards .xswclsn-notification-card__headline {
  font-weight: 700;
  font-size: var(--xswclsn-headline-fz);
  color: var(--sf-headline, var(--tc-d, #5b21b6));
  margin-bottom: 10px;
  line-height: var(--xswclsn-line-height-tight);
}
.xswclsn-notifications .xswclsn-sf__grid {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.xswclsn-notifications .xswclsn-sf__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 68px;
  padding: 10px 4px 8px;
  border-radius: 12px;
  background: var(--tc-l, #f5f3ff);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.xswclsn-notifications .xswclsn-sf__card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--tc-a, rgba(124,58,237,.14)); }
.xswclsn-notifications .xswclsn-sf__card:not(a) { cursor: default; }
.xswclsn-notifications .xswclsn-sf__card:not(a):hover { transform: none; box-shadow: none; }
.xswclsn-notifications .xswclsn-sf__card svg { display: block; }
.xswclsn-notifications .xswclsn-sf__card--fb { color: #1877f2; }
.xswclsn-notifications .xswclsn-sf__card--tw { color: #0f1419; }
.xswclsn-notifications .xswclsn-sf__card--ig { color: #e1306c; }
.xswclsn-notifications .xswclsn-sf__card--yt { color: #ff0000; }
.xswclsn-notifications .xswclsn-sf__card--tt { color: #010101; }
.xswclsn-notifications .xswclsn-sf__card--li { color: #0a66c2; }
.xswclsn-notifications .xswclsn-sf__card--custom { color: var(--tc, #2563eb); }
.xswclsn-notifications .xswclsn-sf__card img { display: block; width: 16px; height: 16px; object-fit: contain; }
.xswclsn-notifications .xswclsn-sf__card-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--xswclsn-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ── T4: Compact Bar — single-row message + inline icons ───────── */
.xswclsn-notifications .xswclsn-sf--compact .xswclsn-sf__bar {
  display: flex;
  align-items: center;
  gap: var(--xswclsn-space-md);
}
.xswclsn-notifications .xswclsn-sf--compact .xswclsn-notification-card__message {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: var(--xswclsn-message-fz);
  color: var(--sf-headline, var(--tc-d, #be123c));
  white-space: nowrap;
}

/* ── T5: CTA Community — centered header + icons + button ──────── */
.xswclsn-notifications .xswclsn-sf--cta { text-align: center; }
.xswclsn-notifications .xswclsn-sf--cta .xswclsn-sf__header { margin-bottom: 2px; }
.xswclsn-notifications .xswclsn-sf--cta .xswclsn-notification-card__headline {
  font-weight: 700;
  font-size: var(--xswclsn-headline-fz);
  color: var(--sf-headline, var(--tc, #2563eb));
  margin-bottom: 4px;
  line-height: var(--xswclsn-line-height-tight);
}
.xswclsn-notifications .xswclsn-sf--cta .xswclsn-notification-card__sub {
  font-size: var(--xswclsn-sub-fz);
  color: var(--sf-sub, var(--xswclsn-text-muted));
  line-height: var(--xswclsn-line-height-body);
}
.xswclsn-notifications .xswclsn-sf--cta .xswclsn-notification-card__btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  background: var(--sf-cta-bg, var(--tc, #2563eb));
  border-color: var(--sf-cta-bg, var(--tc, #2563eb));
  color: var(--sf-cta-text, #fff);
}
.xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-social-"] {
  border-color: var(--sf-card-border, #e5e7eb);
}

/* ========== SECTION 13 — ACCESSIBILITY + RESPONSIVE ========== */

/* Respect system “reduce motion” (WCAG / Material / Apple) */
@media (prefers-reduced-motion: reduce) {
  .xswclsn-notifications .xswclsn-notification-card {
    transition: none;
  }

  .xswclsn-notifications .xswclsn-notification-card--entrance-fade_in,
  .xswclsn-notifications .xswclsn-notification-card--entrance-slide_in,
  .xswclsn-notifications .xswclsn-notification-card--exit-motion-fade,
  .xswclsn-notifications .xswclsn-notification-card--exit-motion-slide {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Responsive: mobile breakpoint (default 768px from settings) */
@media (max-width: 768px) {
  .xswclsn-notifications {
    max-width: var(--xswclsn-toast-max-width-mobile);
    min-width: 0;
    left: var(--xswclsn-space-lg);
    right: var(--xswclsn-space-lg);
    margin-left: 0;
    margin-right: 0;
    isolation: isolate;
  }

  .xswclsn-notifications--bottom_right,
  .xswclsn-notifications--top_right {
    left: var(--xswclsn-space-lg);
    right: var(--xswclsn-space-lg);
  }

  /* Top/bottom phone strip: center wrapper in viewport.
     left+right are already set to 16px by the base rule so margin:auto has no centering effect on a fixed element.
     Use left:50%+translateX(-50%) to truly center, capped by max-width. */
  .xswclsn-notifications.xswclsn-notifications--top,
  .xswclsn-notifications.xswclsn-notifications--bottom {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--xswclsn-toast-max-width-mobile), var(--xswclsn-toast-max-width));
    max-width: var(--xswclsn-toast-max-width-mobile);
    margin-left: 0;
    margin-right: 0;
  }

  .xswclsn-notifications.xswclsn-notifications--bottom {
    bottom: max(var(--xswclsn-space-lg), env(safe-area-inset-bottom, 0px));
  }

  .xswclsn-notifications.xswclsn-notifications--top {
    top: max(var(--xswclsn-space-lg), env(safe-area-inset-top, 0px));
  }

  /* Recent purchases (stacked stories) + Stories on phones: center each story in the phone strip */
  .xswclsn-notifications.xswclsn-ro-overlap-session > .xswclsn-notification-card--real-order,
  .xswclsn-notifications.xswclsn-notifications--top > .xswclsn-notification-card--real-order,
  .xswclsn-notifications.xswclsn-notifications--bottom > .xswclsn-notification-card--real-order {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: min(var(--xswclsn-toast-max-width-mobile), var(--xswclsn-toast-max-width));
  }

  .xswclsn-notifications--bottom_right,
  .xswclsn-notifications--bottom_left {
    bottom: max(var(--xswclsn-space-lg), env(safe-area-inset-bottom, 0px));
  }

  .xswclsn-notifications .xswclsn-notification-card {
    font-size: var(--xswclsn-fz-sm);
    padding: var(--xswclsn-space-sm) var(--xswclsn-space-md);
    padding-right: var(--xswclsn-toast-padding-end);
  }

  .xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] {
    --xswclsn-simple-gap-stack: 5px;
    --xswclsn-simple-icon-size: 18px;
    --xswclsn-simple-icon-size-lg: 22px;
  }

  .xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-spl-icon-wrap {
    width: 48px !important;
    height: 48px !important;
  }

  .xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-2 .xswclsn-spl-icon-wrap svg {
    width: 24px !important;
    height: 24px !important;
  }

  .xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__headline {
    font-size: var(--xswclsn-fz-md);
  }

  .xswclsn-notifications .xswclsn-notification-card[class*="xswclsn-template-simple-"] .xswclsn-notification-card__sub {
    font-size: var(--xswclsn-fz-sm);
  }

  .xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-5 .xswclsn-spl-top-banner {
    min-height: 70px;
  }

  .xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-8 .xswclsn-notification-card__btn,
  .xswclsn-notifications .xswclsn-notification-card.xswclsn-template-simple-9 .xswclsn-notification-card__btn {
    min-height: var(--xswclsn-btn-height-compact);
  }
}