/* ============================================================
   SIGNAL PACK — E-COMMERCE UTILITY COMPONENTS
   ============================================================ */

/* Breadcrumbs */
.sp-breadcrumbs{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--grey-text); margin-bottom:24px; flex-wrap:wrap; }
.sp-breadcrumbs a:hover{ color:var(--navy); }
.sp-breadcrumbs .sp-sep{ color:var(--line); }
.sp-breadcrumbs .sp-current{ color:var(--ink); font-weight:600; }

/* Pagination */
.sp-pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px; }
.sp-pagination a, .sp-pagination span{
  width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:var(--ink); border:1px solid transparent;
}
.sp-pagination a:hover{ border-color:var(--line); }
.sp-pagination .is-current{ background:var(--navy); color:#fff; }
.sp-pagination .is-disabled{ color:var(--color-disabled-text); pointer-events:none; }

/* Filters */
.sp-filter-group{ margin-bottom:22px; }
.sp-filter-group h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); margin-bottom:12px; }
.sp-filter-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.sp-filter-pill-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:var(--radius-pill); padding:8px 16px; font-size:12.5px; font-weight:600; }
.sp-filter-pill-btn:hover{ border-color:var(--navy); }

/* Sort */
.sp-sort-select{ width:auto; min-width:160px; }

/* Price / MOQ display */
.sp-price-display{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-price); color:var(--navy); }
.sp-price-display .sp-strike{ font-size:12px; font-weight:600; color:var(--grey-text); text-decoration:line-through; margin-right:6px; }
.sp-moq-display{ font-size:11.5px; color:var(--grey-text); }

/* Badges (generic) — reuse .sp-tag-* from product cards */
.sp-stock-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; }
.sp-stock-badge.in-stock{ color:var(--color-success); }
.sp-stock-badge.low-stock{ color:var(--color-warning); }
.sp-stock-badge.out-of-stock{ color:var(--color-error); }
.sp-stock-badge .sp-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* Tabs */
.sp-tabs{ border-bottom:1px solid var(--line); display:flex; gap:8px; overflow-x:auto; }
.sp-tab{ padding:14px 4px; margin-right:22px; font-size:13.5px; font-weight:600; color:var(--grey-text); border-bottom:2px solid transparent; white-space:nowrap; }
.sp-tab:hover{ color:var(--ink); }
.sp-tab.is-active{ color:var(--navy); border-bottom-color:var(--red); }
.sp-tab-panel{ display:none; padding-top:20px; }
.sp-tab-panel.is-active{ display:block; }

/* Accordion (generic, reused by FAQ / filters / mobile nav) */
.sp-accordion-item{ border-bottom:1px solid var(--line); }
.sp-accordion-trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 4px; font-family:var(--font-display); font-weight:700; font-size:15px; text-align:left; }
.sp-accordion-trigger .sp-caret{ transition:transform var(--duration-base) var(--ease); color:var(--red); }
.sp-accordion-trigger[aria-expanded="true"] .sp-caret{ transform:rotate(45deg); }
.sp-accordion-panel{ display:none; padding:0 4px 20px; font-size:13.5px; color:var(--grey-text); line-height:1.65; }
.sp-accordion-panel.is-open{ display:block; }

/* Modal */
.sp-modal-overlay{ position:fixed; inset:0; background:rgba(23,22,46,0.55); z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:20px; }
.sp-modal-overlay.is-open{ display:flex; }
.sp-modal{ background:var(--paper); border-radius:var(--radius-lg); max-width:480px; width:100%; padding:28px; box-shadow:var(--shadow-lg); }
.sp-modal-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.sp-modal-head h3{ font-size:18px; }
.sp-modal-body{ font-size:13.5px; color:var(--grey-text); line-height:1.6; margin-bottom:22px; }
.sp-modal-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* Confirmation dialog is a modal variant */
.sp-confirm-dialog .sp-modal{ max-width:400px; text-align:center; }
.sp-confirm-dialog .sp-modal-actions{ justify-content:center; }

/* Generic drawer (used by mini cart / mobile filters) — shares .sp-mini-cart pattern */
.sp-drawer{ position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; background:var(--paper); z-index:calc(var(--z-drawer) + 1); transform:translateX(100%); transition:transform var(--duration-slow) var(--ease); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.sp-drawer.is-open{ transform:translateX(0); }
.sp-drawer.sp-drawer--left{ right:auto; left:0; transform:translateX(-100%); }
.sp-drawer.sp-drawer--left.is-open{ transform:translateX(0); }

/* Tooltip */
.sp-tooltip{ position:relative; display:inline-flex; }
.sp-tooltip .sp-tooltip-bubble{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:#fff; font-size:11.5px; padding:6px 10px; border-radius:var(--radius-sm);
  white-space:nowrap; opacity:0; visibility:hidden; transition:opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
  z-index:var(--z-tooltip);
}
.sp-tooltip:hover .sp-tooltip-bubble, .sp-tooltip:focus-within .sp-tooltip-bubble{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* Alert (inline, form-level or page-level) */
.sp-alert{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md); font-size:13px; line-height:1.5; }
.sp-alert svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.sp-alert-info{ background:var(--color-info-bg); color:var(--navy); }
.sp-alert-success{ background:var(--color-success-bg); color:var(--color-success); }
.sp-alert-error{ background:var(--color-error-bg); color:var(--color-error); }
.sp-alert-warning{ background:var(--color-warning-bg); color:var(--color-warning); }

/* Toast notification */
.sp-toast-stack{ position:fixed; top:24px; right:24px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:10px; }
.sp-toast{ min-width:280px; max-width:360px; background:var(--ink); color:#fff; border-radius:var(--radius-md); padding:14px 16px; display:flex; gap:10px; align-items:flex-start; box-shadow:var(--shadow-md); font-size:13px; animation:sp-toast-in var(--duration-slow) var(--ease); }
.sp-toast.sp-toast-success{ background:var(--color-success); }
.sp-toast.sp-toast-error{ background:var(--color-error); }
@keyframes sp-toast-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:480px){ .sp-toast-stack{ left:16px; right:16px; top:16px; } .sp-toast{ min-width:0; max-width:none; } }

/* Loading skeletons (generic) */
.sp-skeleton{ background:linear-gradient(90deg, var(--grey-bg) 25%, var(--grey-alt) 37%, var(--grey-bg) 63%); background-size:400% 100%; animation:sp-skeleton 1.4s ease infinite; border-radius:var(--radius-sm); }
.sp-skeleton-text{ height:12px; margin-bottom:8px; }
.sp-skeleton-text.short{ width:40%; }

/* Empty / error / success full-block states */
.sp-state-block{ text-align:center; padding:60px 20px; }
.sp-state-block svg{ width:44px; height:44px; margin:0 auto 16px; }
.sp-state-block h4{ margin-bottom:8px; }
.sp-state-block p{ color:var(--grey-text); font-size:13.5px; max-width:360px; margin:0 auto 20px; }
.sp-state-block.is-empty svg{ stroke:var(--grey-text); }
.sp-state-block.is-error svg{ stroke:var(--color-error); }
.sp-state-block.is-success svg{ stroke:var(--color-success); }

/* Cookie consent banner */
.sp-cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; max-width:520px; background:var(--ink); color:#fff;
  border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-lg); z-index:calc(var(--z-toast) - 1);
  display:none; gap:14px; flex-direction:column;
}
.sp-cookie-banner.is-visible{ display:flex; }
.sp-cookie-banner p{ font-size:12.5px; color:rgba(255,255,255,0.8); line-height:1.6; }
.sp-cookie-banner .sp-cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Back to top */
.sp-back-to-top{
  position:fixed; right:24px; bottom:96px; width:44px; height:44px; border-radius:50%; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--duration-base) var(--ease); z-index:calc(var(--z-sticky-bar) - 2);
}
.sp-back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.sp-back-to-top:hover{ background:var(--red); }
.sp-back-to-top svg{ width:18px; height:18px; stroke:#fff; }
@media (max-width:880px){ .sp-back-to-top{ right:16px; bottom:150px; } }