/**
 * NX Cart Feedback + SweetAlert theme skin
 *
 * Pairs with public/frontend/js/modern/cart-feedback.js.
 * Colours come from the backend theme (--primary / --primary-hover / --text-*);
 * spacing, radius and duration come from core/variables.css (--space-*, --radius-*, --duration-*).
 */

/* Component tokens. Literal values live only in this block. */
/* ds-allow-hardcode:start component token definitions */
:root {
    --nx-cf-primary: var(--primary, #8bc34a);
    --nx-cf-primary-hover: var(--primary-hover, #7cb342);
    --nx-cf-on-primary: #fff;
    --nx-cf-surface: #fff;
    --nx-cf-surface-tint: #f8fafc;
    --nx-cf-ink: var(--text-primary, #1c1c1e);
    --nx-cf-muted: var(--text-secondary, #6b7280);
    --nx-cf-warning: #f59e0b;
    --nx-cf-warning-ring: #fcd34d;
    --nx-cf-warning-soft: #fffbeb;
    --nx-cf-warning-deep: #b45309;
    --nx-cf-danger: #ef4444;
    --nx-cf-danger-ring: #fca5a5;
    --nx-cf-scrim: rgba(15, 23, 42, 0.45);
    --nx-cf-blur: 4px;
    --nx-cf-blur-soft: 2px;
    --nx-cf-scrim-light: rgba(15, 23, 42, 0.22);
    --nx-cf-accent-warm: #f59e0b;

    --nx-cf-primary-soft: color-mix(in srgb, var(--nx-cf-primary) 12%, var(--nx-cf-surface));
    /* Darker shade for text and gradient ends: some themes set --primary-hover lighter than --primary */
    --nx-cf-primary-deep: color-mix(in srgb, var(--nx-cf-primary) 70%, #000);
    --nx-cf-primary-mid: color-mix(in srgb, var(--nx-cf-primary) 86%, #000);
    --nx-cf-primary-wash: color-mix(in srgb, var(--nx-cf-primary) 6%, var(--nx-cf-surface-tint));
    --nx-cf-primary-ring: color-mix(in srgb, var(--nx-cf-primary) 35%, transparent);
    --nx-cf-primary-glow: color-mix(in srgb, var(--nx-cf-primary) 70%, transparent);
    --nx-cf-line: color-mix(in srgb, var(--nx-cf-ink) 10%, transparent);
    --nx-cf-line-strong: color-mix(in srgb, var(--nx-cf-ink) 16%, transparent);
    --nx-cf-hover: color-mix(in srgb, var(--nx-cf-ink) 6%, transparent);
    --nx-cf-neutral-btn: color-mix(in srgb, var(--nx-cf-ink) 7%, var(--nx-cf-surface));

    --nx-cf-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.28), 0 4px 12px -4px rgba(15, 23, 42, 0.12);
    --nx-cf-shadow-fly: 0 10px 24px -6px rgba(15, 23, 42, 0.35);
    --nx-cf-shadow-btn: 0 6px 16px -6px var(--nx-cf-primary-glow);
    --nx-cf-shadow-btn-hover: 0 10px 22px -8px var(--nx-cf-primary-glow);
    --nx-cf-shadow-soft: 0 2px 8px -2px rgba(15, 23, 42, 0.08);

    --nx-cf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --nx-cf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --nx-cf-spin: 0.7s;
    --nx-cf-pop: 0.45s;
    --nx-cf-bump: 0.6s;
    --nx-cf-enter: 0.5s;
    --nx-cf-exit: 0.28s;
    --nx-cf-ring: 0.8s;

    --nx-cf-stroke: 2px;
    --nx-cf-stroke-strong: 3px;
    --nx-cf-accent: 4px;
    --nx-cf-progress: 3px;
    --nx-cf-check: 30px;
    --nx-cf-check-glyph: 18px;
    --nx-cf-close-glyph: 16px;
    --nx-cf-thumb: 60px;
    --nx-cf-badge: 60px;
    --nx-cf-badge-glyph: 28px;
    --nx-cf-dot: 6px;
    --nx-cf-burst: 46px;
    --nx-cf-chip-y: 2px;
    --nx-cf-btn-h-lg: 46px;
    --nx-cf-radius-card: 24px;
    --nx-cf-radius-btn: 14px;
    --nx-cf-fly: 64px;
    --nx-cf-btn-h: 38px;
    --nx-cf-btn-h-touch: 40px;
    --nx-cf-swal-btn-h: 44px;
    --nx-cf-stack-w: 380px;
    --nx-cf-notice-w: 440px;
    --nx-cf-swal-w: 26rem;
    --nx-cf-swal-radius: 24px;
    --nx-cf-radius: 18px;
    --nx-cf-radius-inner: 14px;

    --nx-cf-fs-title: 0.95rem;
    --nx-cf-fs-hero: 1.25rem;
    --nx-cf-fs-body: 0.875rem;
    --nx-cf-fs-btn: 0.85rem;
    --nx-cf-fs-small: 0.78rem;
    --nx-cf-fs-swal-title: 1.15rem;
    --nx-cf-fs-swal-body: 0.925rem;

    --nx-cf-z-fly: 1090;
    --nx-cf-z-stack: 1085; /* above the header (1001) and the quick-view modal (1055) */
}
/* ds-allow-hardcode:end */

/* ==========================================================================
   Add to Cart button states
   ========================================================================== */

.add-to-cart-btn.nx-cf-btn--busy,
.add-to-cart-btn.nx-cf-btn--added,
.add-to-cart-btn.nx-cf-btn--incart {
    pointer-events: none;
}

/* Same variant already in the cart: a calm "In cart" state (nothing was added) */
.add-to-cart-btn.nx-cf-btn--incart {
    color: var(--nx-cf-primary-deep) !important;
    background: var(--nx-cf-primary-soft) !important;
    border-color: var(--nx-cf-primary) !important;
    box-shadow: none;
    animation: nx-cf-pop var(--nx-cf-pop) var(--nx-cf-spring);
}

.add-to-cart-btn.nx-cf-btn--busy i {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: var(--nx-cf-stroke) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: nx-cf-spin var(--nx-cf-spin) linear infinite;
}

.add-to-cart-btn.nx-cf-btn--busy i::before {
    content: none;
}

.add-to-cart-btn.nx-cf-btn--added {
    color: var(--nx-cf-on-primary) !important;
    background: var(--nx-cf-primary) !important;
    border-color: var(--nx-cf-primary) !important;
    box-shadow: 0 0 0 var(--nx-cf-accent) var(--nx-cf-primary-ring);
    animation: nx-cf-pop var(--nx-cf-pop) var(--nx-cf-spring);
}

.add-to-cart-btn.nx-cf-btn--added i {
    animation: nx-cf-pop var(--nx-cf-pop) var(--nx-cf-spring);
}

/* ==========================================================================
   Header cart badge
   ========================================================================== */

.nx-cart-badge.nx-cf-bump,
.nx-mobile-cart-badge.nx-cf-bump {
    animation: nx-cf-bump var(--nx-cf-bump) var(--nx-cf-spring);
}

.nx-cart-icon-wrapper.nx-cf-wiggle,
.nx-mobile-cart-icon.nx-cf-wiggle {
    animation: nx-cf-wiggle var(--nx-cf-bump) var(--nx-cf-ease);
}

/* ==========================================================================
   Fly-to-cart image
   ========================================================================== */

.nx-cf-fly {
    position: fixed;
    z-index: var(--nx-cf-z-fly);
    width: var(--nx-cf-fly);
    height: var(--nx-cf-fly);
    border-radius: var(--radius-xl);
    background: var(--nx-cf-surface) center / cover no-repeat;
    box-shadow: var(--nx-cf-shadow-fly), 0 0 0 var(--nx-cf-stroke-strong) var(--nx-cf-surface);
    pointer-events: none;
    will-change: transform, opacity;
}

/* ==========================================================================
   Toast: centred card with a light scrim
   ========================================================================== */

.nx-cf-scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--nx-cf-z-stack) - 1);
    background: var(--nx-cf-scrim-light);
    -webkit-backdrop-filter: blur(var(--nx-cf-blur-soft));
    backdrop-filter: blur(var(--nx-cf-blur-soft));
    animation: nx-cf-fade-in var(--duration-base) ease both;
}

.nx-cf-scrim--out {
    animation: nx-cf-fade-out var(--nx-cf-exit) ease forwards;
}

/* Centred on screen on every device */
.nx-cf-stack {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--nx-cf-z-stack);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(var(--nx-cf-stack-w), calc(100vw - var(--space-8)));
    pointer-events: none;
}

.nx-cf-toast {
    position: relative;
    overflow: hidden;
    padding: var(--space-6) var(--space-5) var(--space-5);
    color: var(--nx-cf-ink);
    background:
        radial-gradient(120% 70% at 50% 0%, var(--nx-cf-primary-soft) 0%, transparent 62%),
        var(--nx-cf-surface);
    border: 1px solid var(--nx-cf-line);
    border-radius: var(--nx-cf-radius-card);
    box-shadow: var(--nx-cf-shadow);
    pointer-events: auto;
    animation: nx-cf-toast-in var(--nx-cf-enter) var(--nx-cf-spring) both;
}

.nx-cf-toast--out {
    animation: nx-cf-toast-out var(--nx-cf-exit) var(--nx-cf-ease) forwards;
}

.nx-cf-toast__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-cf-check);
    height: var(--nx-cf-check);
    padding: 0;
    color: var(--nx-cf-muted);
    background: var(--nx-cf-surface);
    border: 1px solid var(--nx-cf-line);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease, transform var(--duration-base) var(--nx-cf-ease);
}

.nx-cf-toast__close:hover {
    color: var(--nx-cf-ink);
    background: var(--nx-cf-hover);
    transform: rotate(90deg);
}

.nx-cf-toast__close svg {
    width: var(--nx-cf-close-glyph);
    height: var(--nx-cf-close-glyph);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* Hero: badge, title, cart count */
.nx-cf-toast__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.nx-cf-toast__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-cf-badge);
    height: var(--nx-cf-badge);
    margin-bottom: var(--space-2);
    color: var(--nx-cf-on-primary);
    background: linear-gradient(145deg, var(--nx-cf-primary), var(--nx-cf-primary-mid));
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 var(--space-2) var(--nx-cf-primary-soft), var(--nx-cf-shadow-btn);
    animation: nx-cf-pop var(--nx-cf-enter) var(--duration-fast) var(--nx-cf-spring) both;
}

/* Expanding ring behind the badge */
.nx-cf-toast__badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 var(--nx-cf-stroke) var(--nx-cf-primary);
    opacity: 0;
    animation: nx-cf-ring var(--nx-cf-ring) var(--duration-slow) var(--nx-cf-ease) both;
}

.nx-cf-toast__badge svg {
    position: relative;
    width: var(--nx-cf-badge-glyph);
    height: var(--nx-cf-badge-glyph);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: nx-cf-draw var(--duration-slow) var(--duration-slow) var(--nx-cf-ease) forwards;
}

/* Confetti burst: six dots fly out along --a and fade */
.nx-cf-toast__burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nx-cf-toast__burst i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nx-cf-dot);
    height: var(--nx-cf-dot);
    margin: calc(var(--nx-cf-dot) / -2) 0 0 calc(var(--nx-cf-dot) / -2);
    background: var(--nx-cf-primary);
    border-radius: var(--radius-full);
    opacity: 0;
    animation: nx-cf-burst var(--nx-cf-ring) var(--duration-slow) var(--nx-cf-ease) both;
}

.nx-cf-toast__burst i:nth-child(even) {
    background: var(--nx-cf-accent-warm);
}

.nx-cf-toast__title {
    font-size: var(--nx-cf-fs-hero);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    animation: nx-cf-rise var(--nx-cf-pop) var(--duration-base) var(--nx-cf-ease) both;
}

.nx-cf-toast__sub {
    font-size: var(--nx-cf-fs-body);
    color: var(--nx-cf-muted);
    animation: nx-cf-rise var(--nx-cf-pop) var(--duration-slow) var(--nx-cf-ease) both;
}

.nx-cf-toast__sub strong {
    font-weight: 700;
    color: var(--nx-cf-primary-deep);
}

/* Product row */
.nx-cf-toast__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-3);
    background: var(--nx-cf-surface);
    border: 1px solid var(--nx-cf-line);
    border-radius: var(--nx-cf-radius-inner);
    box-shadow: var(--nx-cf-shadow-soft);
    animation: nx-cf-rise var(--nx-cf-pop) var(--duration-slow) var(--nx-cf-ease) both;
}

.nx-cf-toast__thumb {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-cf-thumb);
    height: var(--nx-cf-thumb);
    color: var(--nx-cf-primary);
    background: var(--nx-cf-surface) center / contain no-repeat;
    border: 1px solid var(--nx-cf-line);
    border-radius: var(--radius-lg);
}

/* Shown when the product photo is missing or failed to load */
.nx-cf-toast__thumb--icon {
    background: var(--nx-cf-primary-wash);
}

.nx-cf-toast__thumb svg {
    width: var(--space-6);
    height: var(--space-6);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nx-cf-toast__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.nx-cf-toast__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--nx-cf-fs-body);
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nx-cf-toast__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.nx-cf-toast__chip {
    max-width: 100%;
    overflow: hidden;
    padding: var(--nx-cf-chip-y) var(--space-2);
    font-size: var(--nx-cf-fs-small);
    font-weight: 600;
    line-height: 1.3;
    color: var(--nx-cf-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--nx-cf-primary-wash);
    border-radius: var(--radius-full);
}

.nx-cf-toast__price {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: var(--nx-cf-fs-title);
    font-weight: 800;
    color: var(--nx-cf-primary-deep);
    white-space: nowrap;
}

/* Actions: two equal buttons */
.nx-cf-toast__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-4);
    animation: nx-cf-rise var(--nx-cf-pop) var(--nx-cf-pop) var(--nx-cf-ease) both;
}

.nx-cf-toast__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--nx-cf-btn-h-lg);
    padding: 0 var(--space-3);
    font-size: var(--nx-cf-fs-btn);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--nx-cf-radius-btn);
    cursor: pointer;
    transition: transform var(--duration-base) var(--nx-cf-ease), background-color var(--duration-base) ease, box-shadow var(--duration-base) ease, color var(--duration-base) ease;
}

.nx-cf-toast__btn:active {
    transform: scale(0.97);
}

.nx-cf-toast__btn--ghost {
    color: var(--nx-cf-ink);
    background: var(--nx-cf-surface);
    border-color: var(--nx-cf-line-strong);
}

.nx-cf-toast__btn--ghost:hover {
    color: var(--nx-cf-ink);
    background: var(--nx-cf-hover);
}

.nx-cf-toast__btn--primary {
    color: var(--nx-cf-on-primary);
    background: linear-gradient(180deg, var(--nx-cf-primary-mid), var(--nx-cf-primary-deep));
    box-shadow: var(--nx-cf-shadow-btn);
}

.nx-cf-toast__btn--primary:hover,
.nx-cf-toast__btn--primary:focus-visible {
    color: var(--nx-cf-on-primary);
    transform: translateY(-1px);
    box-shadow: var(--nx-cf-shadow-btn-hover);
}

.nx-cf-toast__btn svg {
    flex: 0 0 auto;
    width: var(--nx-cf-close-glyph);
    height: var(--nx-cf-close-glyph);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nx-cf-toast__btn--primary svg:last-child {
    transition: transform var(--duration-base) var(--nx-cf-ease);
}

.nx-cf-toast__btn--primary:hover svg:last-child {
    transform: translateX(var(--nx-cf-stroke-strong));
}

.nx-cf-toast__btn:focus-visible,
.nx-cf-toast__close:focus-visible {
    outline: var(--nx-cf-stroke-strong) solid var(--nx-cf-primary-ring);
    outline-offset: var(--nx-cf-stroke);
}

/* Auto-dismiss countdown */
.nx-cf-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--nx-cf-progress);
    background: linear-gradient(90deg, var(--nx-cf-primary), var(--nx-cf-primary-deep));
    opacity: 0.7;
    transform-origin: left center;
    animation-name: nx-cf-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.nx-cf-toast--paused .nx-cf-toast__progress {
    animation-play-state: paused;
}

/* Phones: near full width */
@media (max-width: 575.98px) {
    .nx-cf-stack {
        width: calc(100vw - var(--space-6));
    }

    .nx-cf-toast {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }
}

/* Very narrow phones: stack the buttons */
@media (max-width: 359.98px) {
    .nx-cf-toast__actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Alert: light, non-blocking notice (no scrim), e.g. "Already in your cart"
   ========================================================================== */

.nx-cf-notice {
    position: fixed;
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    left: 50%;
    z-index: var(--nx-cf-z-stack);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: min(var(--nx-cf-notice-w), calc(100vw - var(--space-6)));
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    color: var(--nx-cf-ink);
    background: var(--nx-cf-surface);
    border: 1px solid var(--nx-cf-line);
    border-left: var(--nx-cf-accent) solid var(--nx-cf-primary);
    border-radius: var(--nx-cf-radius-inner);
    box-shadow: var(--nx-cf-shadow);
    transform: translateX(-50%);
    animation: nx-cf-notice-in var(--nx-cf-pop) var(--nx-cf-spring) both;
}

.nx-cf-notice--out {
    animation: nx-cf-notice-out var(--duration-base) var(--nx-cf-ease) forwards;
}

.nx-cf-notice__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-cf-check);
    height: var(--nx-cf-check);
    color: var(--nx-cf-primary-deep);
    background: var(--nx-cf-primary-soft);
    border-radius: var(--radius-full);
}

.nx-cf-notice__icon svg {
    width: var(--nx-cf-close-glyph);
    height: var(--nx-cf-close-glyph);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nx-cf-notice__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    font-size: var(--nx-cf-fs-small);
    line-height: 1.35;
    color: var(--nx-cf-muted);
}

.nx-cf-notice__text strong {
    font-size: var(--nx-cf-fs-body);
    font-weight: 700;
    color: var(--nx-cf-ink);
}

.nx-cf-notice__link {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--nx-cf-fs-small);
    font-weight: 700;
    color: var(--nx-cf-primary-deep);
    text-decoration: none;
    white-space: nowrap;
    background: var(--nx-cf-primary-soft);
    border-radius: var(--radius-full);
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.nx-cf-notice__link:hover,
.nx-cf-notice__link:focus-visible {
    color: var(--nx-cf-on-primary);
    background: var(--nx-cf-primary-deep);
}

.nx-cf-notice__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nx-cf-check);
    height: var(--nx-cf-check);
    padding: 0;
    color: var(--nx-cf-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.nx-cf-notice__close:hover {
    color: var(--nx-cf-ink);
    background: var(--nx-cf-hover);
}

.nx-cf-notice__close svg {
    width: var(--nx-cf-close-glyph);
    height: var(--nx-cf-close-glyph);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* Warning tone (amber): used for "Already in your cart" */
.nx-cf-notice--warning {
    background: var(--nx-cf-warning-soft);
    border-color: var(--nx-cf-warning-ring);
    border-left-color: var(--nx-cf-warning);
}

.nx-cf-notice--warning .nx-cf-notice__icon {
    color: var(--nx-cf-warning-deep);
    background: color-mix(in srgb, var(--nx-cf-warning) 18%, var(--nx-cf-surface));
}

.nx-cf-notice--warning .nx-cf-notice__text strong {
    color: var(--nx-cf-warning-deep);
}

.nx-cf-notice--warning .nx-cf-notice__link {
    color: var(--nx-cf-warning-deep);
    background: color-mix(in srgb, var(--nx-cf-warning) 16%, var(--nx-cf-surface));
}

.nx-cf-notice--warning .nx-cf-notice__link:hover,
.nx-cf-notice--warning .nx-cf-notice__link:focus-visible {
    color: var(--nx-cf-on-primary);
    background: var(--nx-cf-warning-deep);
}

@keyframes nx-cf-notice-in {
    from { transform: translate(-50%, calc(var(--space-4) * -1)); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes nx-cf-notice-out {
    to { transform: translate(-50%, calc(var(--space-2) * -1)); opacity: 0; }
}

/* ==========================================================================
   SweetAlert2 theme skin (storefront only: this file is loaded by the frontend layout)
   ========================================================================== */

.swal2-container.swal2-backdrop-show {
    background: var(--nx-cf-scrim) !important;
    -webkit-backdrop-filter: blur(var(--nx-cf-blur));
    backdrop-filter: blur(var(--nx-cf-blur));
}

.swal2-popup {
    width: min(var(--nx-cf-swal-w), calc(100vw - var(--space-8))) !important;
    padding: var(--space-7) var(--space-6) var(--space-6) !important;
    color: var(--nx-cf-ink);
    border-radius: var(--nx-cf-swal-radius) !important;
    box-shadow: var(--nx-cf-shadow);
    font-family: inherit; /* ds-allow-hardcode: inherit the storefront font, not a literal family */
}

.swal2-popup.swal2-show {
    animation: nx-cf-swal-in var(--nx-cf-pop) var(--nx-cf-spring);
}

.swal2-popup.swal2-hide {
    animation: nx-cf-swal-out var(--duration-base) var(--nx-cf-ease) forwards;
}

.swal2-popup .swal2-title {
    padding: var(--space-2) 0 0 !important;
    font-size: var(--nx-cf-fs-swal-title) !important;
    font-weight: 700 !important;
    line-height: 1.4;
    color: var(--nx-cf-ink) !important;
}

.swal2-popup .swal2-html-container {
    margin: var(--space-2) 0 0 !important;
    font-size: var(--nx-cf-fs-swal-body) !important;
    line-height: 1.55;
    color: var(--nx-cf-muted) !important;
}

/* Scale via font-size: SweetAlert positions the tick / cross strokes in em of the icon */
.swal2-popup .swal2-icon {
    margin: var(--space-1) auto var(--space-2);
    font-size: 0.85em;
}

/* Success icon in the store theme colour */
.swal2-popup .swal2-icon.swal2-success {
    border-color: var(--nx-cf-primary) !important;
    color: var(--nx-cf-primary) !important;
}

.swal2-popup .swal2-icon.swal2-success .swal2-success-ring {
    border-color: var(--nx-cf-primary-ring) !important;
}

.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--nx-cf-primary) !important;
}

/* SweetAlert paints white patches behind the success ring; keep them invisible */
.swal2-popup .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix {
    background-color: transparent !important;
}

.swal2-popup .swal2-icon.swal2-warning {
    color: var(--nx-cf-warning) !important;
    border-color: var(--nx-cf-warning-ring) !important;
}

.swal2-popup .swal2-icon.swal2-error {
    border-color: var(--nx-cf-danger-ring) !important;
}

.swal2-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
    background-color: var(--nx-cf-danger) !important;
}

.swal2-popup .swal2-icon.swal2-info,
.swal2-popup .swal2-icon.swal2-question {
    color: var(--nx-cf-primary) !important;
    border-color: var(--nx-cf-primary-ring) !important;
}

.swal2-popup .swal2-actions {
    gap: var(--space-2);
    margin-top: var(--space-5) !important;
}

.swal2-popup .swal2-styled {
    min-height: var(--nx-cf-swal-btn-h);
    margin: 0 !important;
    padding: 0 var(--space-6) !important;
    font-size: var(--nx-cf-fs-swal-body) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    transition: transform var(--duration-base) var(--nx-cf-ease), box-shadow var(--duration-base) ease;
}

.swal2-popup .swal2-styled:active {
    transform: scale(0.96);
}

/* Theme colour wins over per-call confirmButtonColor values (they are set inline) */
.swal2-popup .swal2-styled.swal2-confirm {
    color: var(--nx-cf-on-primary) !important;
    background: var(--nx-cf-primary) !important;
    box-shadow: var(--nx-cf-shadow-btn);
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
    background: var(--nx-cf-primary-hover) !important;
}

.swal2-popup .swal2-styled.swal2-cancel,
.swal2-popup .swal2-styled.swal2-deny {
    color: var(--nx-cf-ink) !important;
    background: var(--nx-cf-neutral-btn) !important;
    box-shadow: none;
}

.swal2-popup .swal2-styled:focus,
.swal2-popup .swal2-styled:focus-visible {
    box-shadow: 0 0 0 var(--nx-cf-stroke-strong) var(--nx-cf-primary-ring) !important;
}

.swal2-popup .swal2-timer-progress-bar {
    background: var(--nx-cf-primary);
    opacity: 0.6;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes nx-cf-spin {
    to { transform: rotate(360deg); }
}

@keyframes nx-cf-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes nx-cf-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes nx-cf-rise {
    from { transform: translateY(var(--space-2)); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes nx-cf-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.55); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes nx-cf-wiggle {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    45% { transform: rotate(10deg); }
    70% { transform: rotate(-5deg); }
}

@keyframes nx-cf-toast-in {
    from { transform: translateY(var(--space-4)) scale(0.88); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes nx-cf-toast-out {
    to { transform: scale(0.94); opacity: 0; }
}

@keyframes nx-cf-ring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes nx-cf-burst {
    0% { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(var(--nx-cf-burst) * -1)) scale(1); opacity: 0; }
}

@keyframes nx-cf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nx-cf-fade-out {
    to { opacity: 0; }
}

@keyframes nx-cf-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes nx-cf-swal-in {
    0% { transform: translateY(var(--space-4)) scale(0.92); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes nx-cf-swal-out {
    to { transform: scale(0.95); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-cf-scrim,
    .nx-cf-toast,
    .nx-cf-toast--out,
    .nx-cf-toast__badge,
    .nx-cf-toast__title,
    .nx-cf-toast__sub,
    .nx-cf-toast__item,
    .nx-cf-toast__actions,
    .add-to-cart-btn.nx-cf-btn--added,
    .add-to-cart-btn.nx-cf-btn--added i,
    .add-to-cart-btn.nx-cf-btn--incart,
    .nx-cf-notice,
    .nx-cf-notice--out,
    .nx-cart-badge.nx-cf-bump,
    .nx-mobile-cart-badge.nx-cf-bump,
    .nx-cart-icon-wrapper.nx-cf-wiggle,
    .nx-mobile-cart-icon.nx-cf-wiggle {
        animation: none;
    }

    .nx-cf-toast__badge svg {
        stroke-dashoffset: 0;
        animation: none;
    }

    .nx-cf-toast__badge::before,
    .nx-cf-toast__burst {
        display: none;
    }
}