/* ============================================================
   Qsarco Storefront v2 — Design System
   ------------------------------------------------------------
   - CSS Cascade Layers : @layer reset, tokens, base, components, theme, overrides
   - Tokens design system (light + dark)
   - Motion system Apple-grade (springs, durations)
   - Accessibilité : focus-visible, prefers-reduced-motion, prefers-color-scheme
   ============================================================ */

@layer reset, tokens, base, components, theme, overrides;

/* ---------- Tokens ---------- */
@layer tokens {

  :root {
    /* Palette neutre */
    --qsf-bg:            #ffffff;
    --qsf-bg-soft:       #f7f8fa;
    --qsf-bg-elevated:   #ffffff;
    --qsf-bg-overlay:    rgba(15, 23, 42, 0.45);
    --qsf-surface:       #ffffff;
    --qsf-surface-2:     #fafbfc;
    --qsf-surface-3:     #f1f3f5;

    --qsf-border:        #e5e7eb;
    --qsf-border-strong: #d1d5db;
    --qsf-border-focus:  #006fff;

    --qsf-text:          #0f172a;
    --qsf-text-soft:     #475569;
    --qsf-text-muted:    #6b7280;
    --qsf-text-faint:    #9ca3af;
    --qsf-text-inverse:  #ffffff;

    /* Palette marque */
    --qsf-primary:        #006fff;
    --qsf-primary-hover:  #0058cc;
    --qsf-primary-active: #00499f;
    --qsf-primary-soft:   #e6f0ff;
    --qsf-primary-ring:   rgba(0, 111, 255, 0.30);

    --qsf-success:        #16a34a;
    --qsf-success-soft:   #dcfce7;
    --qsf-warning:        #f59e0b;
    --qsf-warning-soft:   #fef3c7;
    --qsf-danger:         #dc2626;
    --qsf-danger-soft:    #fee2e2;

    /* Aliases QOT */
    --qot-primary:        var(--qsf-primary);
    --qot-primary-hover:  var(--qsf-primary-hover);
    --qot-text:           var(--qsf-text);
    --qot-text-muted:     var(--qsf-text-muted);
    --qot-bg:             var(--qsf-bg);
    --qot-border:         var(--qsf-border);

    /* Radius — Apple-grade : grand sur cards, modeste sur inputs */
    --qsf-radius-xs:  4px;
    --qsf-radius-sm:  8px;
    --qsf-radius-md:  12px;
    --qsf-radius-lg:  16px;
    --qsf-radius-xl:  20px;
    --qsf-radius-2xl: 28px;
    --qsf-radius-full: 9999px;

    /* Espacements — échelle 4px */
    --qsf-space-0:  0;
    --qsf-space-1:  4px;
    --qsf-space-2:  8px;
    --qsf-space-3:  12px;
    --qsf-space-4:  16px;
    --qsf-space-5:  20px;
    --qsf-space-6:  24px;
    --qsf-space-7:  32px;
    --qsf-space-8:  40px;
    --qsf-space-9:  56px;
    --qsf-space-10: 72px;

    /* Type scale modulaire (ratio 1.2) */
    --qsf-text-xs:   11px;
    --qsf-text-sm:   13px;
    --qsf-text-base: 15px;
    --qsf-text-md:   17px;
    --qsf-text-lg:   20px;
    --qsf-text-xl:   24px;
    --qsf-text-2xl:  30px;
    --qsf-text-3xl:  38px;
    --qsf-text-4xl:  48px;

    --qsf-leading-tight:  1.2;
    --qsf-leading-snug:   1.35;
    --qsf-leading-normal: 1.5;
    --qsf-leading-relaxed: 1.7;

    --qsf-weight-regular:  400;
    --qsf-weight-medium:   500;
    --qsf-weight-semibold: 600;
    --qsf-weight-bold:     700;

    --qsf-tracking-tight:  -0.02em;
    --qsf-tracking-normal: 0;
    --qsf-tracking-wide:   0.02em;

    /* Ombres multi-couches (Apple-grade) */
    --qsf-shadow-xs:  0 1px 1px rgba(15, 23, 42, 0.04);
    --qsf-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05),
                      0 1px 1px rgba(15, 23, 42, 0.03);
    --qsf-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.06),
                      0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --qsf-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08),
                      0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --qsf-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.10),
                      0 8px 10px -6px rgba(15, 23, 42, 0.05);
    --qsf-shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
    --qsf-shadow-ring: 0 0 0 4px var(--qsf-primary-ring);
    --qsf-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.05);

    /* Motion — Apple springs & easings */
    --qsf-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --qsf-ease-in:         cubic-bezier(0.7, 0, 0.84, 0);
    --qsf-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --qsf-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --qsf-ease-snappy:     cubic-bezier(0.4, 0, 0.2, 1);
    --qsf-ease-linear:     linear;

    --qsf-duration-instant: 80ms;
    --qsf-duration-fast:    150ms;
    --qsf-duration-normal:  250ms;
    --qsf-duration-slow:    400ms;
    --qsf-duration-slower:  600ms;

    --qsf-transition-tap:    transform var(--qsf-duration-instant) var(--qsf-ease-snappy);
    --qsf-transition-color:  color var(--qsf-duration-fast) var(--qsf-ease-snappy),
                              background-color var(--qsf-duration-fast) var(--qsf-ease-snappy),
                              border-color var(--qsf-duration-fast) var(--qsf-ease-snappy);
    --qsf-transition-card:   box-shadow var(--qsf-duration-normal) var(--qsf-ease-out),
                              transform var(--qsf-duration-normal) var(--qsf-ease-out);

    /* Backdrop blur (Apple iOS-style) */
    --qsf-blur-sm: saturate(180%) blur(8px);
    --qsf-blur-md: saturate(180%) blur(16px);
    --qsf-blur-lg: saturate(180%) blur(24px);

    /* Font stack — Apple system avec fallback Inter */
    --qsf-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                      "Inter", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
                      sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --qsf-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

    /* Z-index */
    --qsf-z-base:    1;
    --qsf-z-sticky:  100;
    --qsf-z-drawer:  900;
    --qsf-z-modal:   1000;
    --qsf-z-toast:   1100;
    --qsf-z-tooltip: 1200;
  }

  /* Dark mode auto */
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) {
      --qsf-bg:            #0b0f17;
      --qsf-bg-soft:       #11161f;
      --qsf-bg-elevated:   #161c28;
      --qsf-bg-overlay:    rgba(0, 0, 0, 0.65);
      --qsf-surface:       #161c28;
      --qsf-surface-2:     #1c2331;
      --qsf-surface-3:     #232b3a;

      --qsf-border:        #2a3344;
      --qsf-border-strong: #3a4458;
      --qsf-border-focus:  #4d9aff;

      --qsf-text:          #f1f5f9;
      --qsf-text-soft:     #cbd5e1;
      --qsf-text-muted:    #94a3b8;
      --qsf-text-faint:    #64748b;
      --qsf-text-inverse:  #0b0f17;

      --qsf-primary:        #4d9aff;
      --qsf-primary-hover:  #6aacff;
      --qsf-primary-active: #2c81f0;
      --qsf-primary-soft:   rgba(77, 154, 255, 0.15);
      --qsf-primary-ring:   rgba(77, 154, 255, 0.35);

      --qsf-success-soft: rgba(22, 163, 74, 0.18);
      --qsf-warning-soft: rgba(245, 158, 11, 0.18);
      --qsf-danger-soft:  rgba(220, 38, 38, 0.18);

      --qsf-shadow-xs:  0 1px 1px rgba(0, 0, 0, 0.35);
      --qsf-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4),
                        0 1px 1px rgba(0, 0, 0, 0.25);
      --qsf-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4),
                        0 2px 4px -2px rgba(0, 0, 0, 0.3);
      --qsf-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.45),
                        0 4px 6px -4px rgba(0, 0, 0, 0.3);
      --qsf-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.5),
                        0 8px 10px -6px rgba(0, 0, 0, 0.35);
      --qsf-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    }
  }

  :root[data-qsf-theme="dark"] { color-scheme: dark; }
  :root[data-qsf-theme="light"] { color-scheme: light; }
}

/* ---------- Reset ---------- */
@layer reset {
  .qsf-page, .qsf-page *,
  .qot-page, .qot-page *,
  .qsf-drawer, .qsf-drawer *,
  .qsf-modal, .qsf-modal *,
  .qsf-toast, .qsf-toast * {
    box-sizing: border-box;
  }

  .qsf-page, .qot-page, .qsf-checkout-wrap {
    font-family: var(--qsf-font-sans);
    color: var(--qsf-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv01", "cv11", "ss01", "ss03";
  }

  .qsf-page h1, .qsf-page h2, .qsf-page h3, .qsf-page h4,
  .qot-page h1, .qot-page h2, .qot-page h3, .qot-page h4 {
    text-transform: none;
    letter-spacing: var(--qsf-tracking-tight);
    line-height: var(--qsf-leading-tight);
    margin: 0;
  }
}

/* ---------- Base ---------- */
@layer base {
  .qsf-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--qsf-space-7) var(--qsf-space-5);
    background: var(--qsf-bg);
    min-height: 60vh;
  }

  .qsf-title {
    font-size: var(--qsf-text-2xl);
    font-weight: var(--qsf-weight-bold);
    margin-bottom: var(--qsf-space-6);
  }

  .qsf-back, .qot-back {
    display: inline-flex;
    align-items: center;
    gap: var(--qsf-space-2);
    color: var(--qsf-text-muted);
    text-decoration: none;
    font-size: var(--qsf-text-sm);
    font-weight: var(--qsf-weight-medium);
    margin-bottom: var(--qsf-space-5);
    transition: var(--qsf-transition-color);
  }
  .qsf-back:hover, .qot-back:hover { color: var(--qsf-text); }

  .qsf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qsf-space-2);
    padding: var(--qsf-space-3) var(--qsf-space-5);
    border-radius: var(--qsf-radius-md);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--qsf-text-base);
    font-weight: var(--qsf-weight-semibold);
    line-height: 1;
    cursor: pointer;
    background: var(--qsf-primary);
    color: var(--qsf-text-inverse);
    transition: var(--qsf-transition-color), var(--qsf-transition-tap), box-shadow var(--qsf-duration-fast) var(--qsf-ease-snappy);
    text-decoration: none;
  }
  .qsf-btn:hover { background: var(--qsf-primary-hover); }
  .qsf-btn:active { transform: scale(0.97); background: var(--qsf-primary-active); }
  .qsf-btn:focus-visible { outline: none; box-shadow: var(--qsf-shadow-ring); }
  .qsf-btn[disabled], .qsf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .qsf-btn-secondary {
    background: var(--qsf-surface);
    color: var(--qsf-text);
    border-color: var(--qsf-border-strong);
  }
  .qsf-btn-secondary:hover { background: var(--qsf-surface-2); border-color: var(--qsf-text-muted); }
  .qsf-btn-secondary:active { background: var(--qsf-surface-3); }

  .qsf-btn-ghost {
    background: transparent;
    color: var(--qsf-text);
  }
  .qsf-btn-ghost:hover { background: var(--qsf-surface-2); }

  .qsf-tap { transition: var(--qsf-transition-tap); }
  .qsf-tap:active { transform: scale(0.97); }

  .qsf-link {
    color: var(--qsf-primary);
    text-decoration: none;
    font-weight: var(--qsf-weight-medium);
    transition: var(--qsf-transition-color);
  }
  .qsf-link:hover {
    color: var(--qsf-primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .qsf-link:focus-visible {
    outline: 2px solid var(--qsf-primary);
    outline-offset: 3px;
    border-radius: var(--qsf-radius-xs);
  }
}

/* ---------- Components partagés ---------- */
@layer components {

  /* Skeleton */
  .qsf-skeleton {
    background: linear-gradient(90deg,
      var(--qsf-surface-3) 0%,
      var(--qsf-surface-2) 50%,
      var(--qsf-surface-3) 100%);
    background-size: 200% 100%;
    animation: qsf-shimmer 1.4s linear infinite;
    border-radius: var(--qsf-radius-sm);
    display: block;
  }
  @keyframes qsf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Spinner */
  .qsf-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--qsf-border-strong);
    border-top-color: var(--qsf-primary);
    animation: qsf-spin 0.7s linear infinite;
    display: inline-block;
  }
  @keyframes qsf-spin { to { transform: rotate(360deg); } }

  /* Modal (dialog natif) */
  .qsf-modal {
    padding: 0;
    border: none;
    border-radius: var(--qsf-radius-xl);
    background: var(--qsf-surface);
    color: var(--qsf-text);
    box-shadow: var(--qsf-shadow-2xl);
    max-width: 420px;
    width: calc(100% - 32px);
    margin: auto;
  }
  .qsf-modal::backdrop {
    background: var(--qsf-bg-overlay);
    backdrop-filter: var(--qsf-blur-sm);
    -webkit-backdrop-filter: var(--qsf-blur-sm);
    animation: qsf-fade-in var(--qsf-duration-normal) var(--qsf-ease-out);
  }
  .qsf-modal[open] {
    animation: qsf-modal-in var(--qsf-duration-slow) var(--qsf-ease-spring);
  }
  @keyframes qsf-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  @keyframes qsf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .qsf-modal-body { padding: var(--qsf-space-7) var(--qsf-space-6) var(--qsf-space-5); text-align: center; }
  .qsf-modal-title { font-size: var(--qsf-text-lg); font-weight: var(--qsf-weight-semibold); margin-bottom: var(--qsf-space-2); }
  .qsf-modal-text  { color: var(--qsf-text-muted); font-size: var(--qsf-text-sm); line-height: var(--qsf-leading-normal); margin-bottom: var(--qsf-space-5); }
  .qsf-modal-actions { display: flex; gap: var(--qsf-space-2); padding: 0 var(--qsf-space-6) var(--qsf-space-6); }
  .qsf-modal-actions .qsf-btn { flex: 1; }

  /* Toast */
  .qsf-toast-container {
    position: fixed;
    bottom: var(--qsf-space-6);
    right: var(--qsf-space-6);
    z-index: var(--qsf-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--qsf-space-2);
    pointer-events: none;
    max-width: calc(100% - 32px);
  }
  .qsf-toast {
    background: var(--qsf-surface);
    color: var(--qsf-text);
    padding: var(--qsf-space-3) var(--qsf-space-4);
    border-radius: var(--qsf-radius-lg);
    box-shadow: var(--qsf-shadow-xl);
    border: 1px solid var(--qsf-border);
    display: flex;
    align-items: center;
    gap: var(--qsf-space-3);
    min-width: 260px;
    max-width: 380px;
    pointer-events: auto;
    font-size: var(--qsf-text-sm);
    backdrop-filter: var(--qsf-blur-sm);
    -webkit-backdrop-filter: var(--qsf-blur-sm);
    animation: qsf-toast-in var(--qsf-duration-slow) var(--qsf-ease-spring);
  }
  .qsf-toast.is-leaving {
    animation: qsf-toast-out var(--qsf-duration-normal) var(--qsf-ease-in) forwards;
  }
  .qsf-toast-success { border-color: var(--qsf-success); }
  .qsf-toast-success .qsf-toast-icon { color: var(--qsf-success); }
  .qsf-toast-error   { border-color: var(--qsf-danger); }
  .qsf-toast-error   .qsf-toast-icon { color: var(--qsf-danger); }
  .qsf-toast-warning { border-color: var(--qsf-warning); }
  .qsf-toast-warning .qsf-toast-icon { color: var(--qsf-warning); }
  .qsf-toast-icon { flex-shrink: 0; width: 18px; height: 18px; }
  @keyframes qsf-toast-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes qsf-toast-out {
    to { opacity: 0; transform: translateX(20px); }
  }

  /* Mini-cart POPOVER (style UniFi dropdown) — pixel-perfect */
  .qsf-cart-popover {
    position: absolute;
    width: 460px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    box-shadow: 0 18px 40px -8px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
    z-index: var(--qsf-z-drawer);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--qsf-duration-normal) var(--qsf-ease-out),
                transform var(--qsf-duration-slow) var(--qsf-ease-spring);
    overflow: hidden;
    font-family: var(--qsf-font-sans);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-cart-popover {
      background: #16191f;
      border-color: #2a2e36;
      color: #e7e9ec;
    }
  }
  .qsf-cart-popover.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .qsf-popover-arrow {
    position: absolute;
    top: -7px;
    right: 24px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid #e6e8eb;
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-arrow {
      background: #16191f;
      border-color: #2a2e36;
    }
  }

  /* Header : "X items in Cart" + "View Full Cart" */
  .qsf-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #e6e8eb;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-header { border-color: #2a2e36; }
  }
  .qsf-popover-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-title { color: #f1f5f9; }
  }
  .qsf-popover-view-cart {
    color: #006fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
  }
  .qsf-popover-view-cart:hover { color: #0058cc; text-decoration: underline; text-underline-offset: 2px; }

  .qsf-popover-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
  }
  .qsf-popover-empty p { margin: 0; font-size: 13px; }

  /* Thead "Item / Quantity / Sub-Total" */
  .qsf-popover-table { padding: 0; }
  .qsf-popover-thead {
    display: grid;
    grid-template-columns: 1fr 70px 90px;
    gap: 12px;
    padding: 10px 20px 8px;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-thead { color: #9ca3af; }
  }
  .qsf-popover-th-qty   { text-align: right; }
  .qsf-popover-th-total { text-align: right; }

  .qsf-popover-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .qsf-popover-item {
    display: grid;
    grid-template-columns: 1fr 70px 90px;
    gap: 12px;
    align-items: center;
    padding: 10px 20px;
    transition: background 0.15s;
  }
  .qsf-popover-item:hover { background: #f7f8fa; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-item:hover { background: #1c2027; }
  }

  .qsf-popover-item-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .qsf-popover-item-thumb {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .qsf-popover-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .qsf-popover-item-name {
    font-size: 13px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-item-name { color: #e7e9ec; }
  }
  .qsf-popover-item-qty {
    text-align: right;
    font-size: 13px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-item-qty { color: #e7e9ec; }
  }
  .qsf-popover-item-sub {
    text-align: right;
    font-size: 13px;
    color: #0f172a;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-item-sub { color: #e7e9ec; }
  }
  .qsf-popover-item-sub .woocommerce-Price-amount,
  .qsf-popover-item-sub bdi { font-weight: 400; }

  /* Footer Total + Buy Now */
  .qsf-popover-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid #e6e8eb;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-footer { border-color: #2a2e36; }
  }
  .qsf-popover-total-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-top: 4px;
  }
  .qsf-popover-total-label {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-total-label { color: #f1f5f9; }
  }
  .qsf-popover-total-amounts {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .qsf-popover-total-value {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-total-value { color: #f1f5f9; }
  }
  .qsf-popover-vat {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-qsf-theme="light"]) .qsf-popover-vat { color: #9ca3af; }
  }

  .qsf-popover-buy-now {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    background: #006fff;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s, transform 0.08s;
    border: none;
    cursor: pointer;
  }
  .qsf-popover-buy-now:hover { background: #0058cc; color: #ffffff; }
  .qsf-popover-buy-now:active { transform: scale(0.98); }

  /* Cart badge on the trigger button */
  .qsf-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background: var(--qsf-primary);
    color: var(--qsf-text-inverse);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }
  .qsf-cart-badge.is-empty { display: none; }

  .qsf-mini-cart-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--qsf-radius-md);
    position: relative;
    transition: background var(--qsf-duration-fast);
  }
  .qsf-mini-cart-trigger:hover {
    background: var(--qsf-surface-2);
  }

  @media (max-width: 720px) {
    .qsf-cart-popover {
      position: fixed !important;
      bottom: 8px;
      left: 8px !important;
      right: 8px !important;
      top: auto !important;
      width: auto !important;
      max-width: none !important;
    }
    .qsf-popover-arrow { display: none; }
  }

  /* Legacy drawer fallback (still used by qsfUI.drawer) — masqué pour mini-cart */
  .qsf-drawer { display: none; }
  .qsf-drawer-backdrop { display: none; }
  .qsf-drawer-header {
    padding: var(--qsf-space-5);
    border-bottom: 1px solid var(--qsf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .qsf-drawer-title { font-size: var(--qsf-text-md); font-weight: var(--qsf-weight-semibold); }
  .qsf-drawer-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--qsf-space-2);
    border-radius: var(--qsf-radius-full);
    color: var(--qsf-text-muted);
    display: inline-flex;
    transition: var(--qsf-transition-color), var(--qsf-transition-tap);
  }
  .qsf-drawer-close:hover { background: var(--qsf-surface-2); color: var(--qsf-text); }
  .qsf-drawer-close:active { transform: scale(0.92); }
  .qsf-drawer-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--qsf-space-4);
  }
  .qsf-drawer-footer {
    padding: var(--qsf-space-4) var(--qsf-space-5);
    border-top: 1px solid var(--qsf-border);
    background: var(--qsf-surface-2);
  }
  .qsf-drawer-empty { text-align: center; padding: var(--qsf-space-9) var(--qsf-space-4); color: var(--qsf-text-muted); }

  /* Loading overlay */
  .is-loading { position: relative; pointer-events: none; }
  .is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 5;
    border-radius: inherit;
    animation: qsf-fade-in var(--qsf-duration-fast) var(--qsf-ease-snappy);
  }
  @media (prefers-color-scheme: dark) {
    .is-loading::after { background: rgba(11, 15, 23, 0.6); }
  }
}

/* ---------- Utilitaires ---------- */
@layer theme {
  .qsf-scroll-smooth { scroll-behavior: smooth; }
  .qsf-mono { font-family: var(--qsf-font-mono); font-variant-numeric: tabular-nums; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .qsf-back, .qot-back,
  .qsf-checkout-btn, .qsf-btn,
  .qsf-drawer, .qsf-drawer-backdrop,
  .qsf-toast-container, .qsf-modal {
    display: none !important;
  }
}

/* ---------- Screen reader only ---------- */
.qsf-sr-only,
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}