/* ============================================================
     PART 1 — WIDGET STYLES. Needed for the shopping list to work.
     Copy this whole block into your site's stylesheet.

     Every selector here is either an ID unique to the widget or a
     class prefixed "sl-", so it can't collide with your site's
     existing CSS or with any global reset/box-sizing rules you
     already have. Do NOT rename these away from the sl- prefix
     without also updating the matching names in the <script> below.
     ============================================================ */
  :root {
    --sl-accent: #1f6feb;
    --sl-card: #ffffff;
    --sl-border: #e2e5ea;
    --sl-text: #1c1f26;
    --sl-muted: #6b7280;
    --sl-danger: #d64545;
  }

  #sl-list-toggle {
    box-sizing: border-box;
    position: relative;
   /* background: var(--sl-accent);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;*/
    cursor: pointer;
  }
  #sl-list-toggle .sl-count {
    box-sizing: border-box;
    position: absolute;
    top: 22px;
    right: 55px;
    background: var(--sl-danger);
    color: #fff;
    border-radius: 999px;
    /*font-size: 11px;
    min-width: 18px;
    height: 18px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* Slide-in list panel */
  #sl-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: none;
    z-index: 9998; /* raised well above typical site content so it always sits on top */
  }
  #sl-panel-overlay.open { display: block; }
  #sl-panel {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 90vw;
    background: var(--sl-card);
    box-shadow: -2px 0 16px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--sl-text);
  }
  #sl-panel * { box-sizing: border-box; } /* scoped to inside the panel only */
  #sl-panel.open { transform: translateX(0); }
  #sl-panel-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--sl-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #sl-panel-header h2 { font-size: 16px; margin: 0; }
  #sl-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--sl-muted);
  }
  #sl-panel-items {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
  }
  .sl-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--sl-border);
    gap: 8px;
  }
  .sl-list-item .sl-part { font-size: 14px; flex: 1; }
  .sl-list-item .sl-name { font-size: 12px; color: var(--sl-muted); }
  .sl-list-item .sl-price { font-size: 12px; color: var(--sl-muted); }
  .sl-qty {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .sl-qty button {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--sl-border);
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex: none;
  }
  .sl-qty input[type="number"] {
    width: 56px;
    height: 24px;
    border: 1px solid var(--sl-border);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    padding: 0 4px;
  }
  .sl-unit-label {
    font-size: 12px;
    color: var(--sl-muted);
    white-space: nowrap;
  }
  .sl-list-item .sl-subtotal {
    font-size: 12px;
    color: var(--sl-text);
    font-weight: 600;
  }
  .sl-remove-btn {
    background: none;
    border: none;
    color: var(--sl-danger);
    cursor: pointer;
    font-size: 13px;
  }
  #sl-panel-empty {
    color: var(--sl-muted);
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
  }
  #sl-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--sl-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #sl-panel-footer button {
    padding: 10px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    cursor: pointer;
  }
  #sl-email-list-btn { background: var(--sl-accent); color: #fff; }
  #sl-clear-list-btn { background: #fff; color: var(--sl-danger); border: 1px solid var(--sl-border) !important; }
  .sl-added {
    background: #1a7f37 !important;
    color: #fff !important;
  } /* applied by flashAdded() to whichever button was just clicked — works
       regardless of what other classes (Bootstrap or otherwise) that button
       already has, since .sl-added is only ever added by our own JS */