/* ============================================================
   SoftBazaar — Design System CSS
   Extracted from Next.js Tailwind v4 tokens.
   No Tailwind dependency — plain CSS only.
   Brand: Gilgal Software | #5B4CF5
   Fonts: DM Sans (body) + Syne (headings)
   ============================================================ */

/* ── 1. CSS Custom Properties (Design Tokens) ──────────────── */
:root {
  --sb-bg:          #ffffff;
  --sb-fg:          #0f0f0f;
  --sb-brand:       #5B4CF5;
  --sb-brand-hover: #4a3de0;
  --sb-brand-light: #EDE9FF;
  --sb-brand-muted: #8b7cf8;
  --sb-surface:     #f8f7ff;
  --sb-border:      #e8e5f8;
  --sb-muted:       #6b7280;
  --sb-subtle:      #9ca3af;
  --sb-success:     #16a34a;
  --sb-success-bg:  #dcfce7;
  --sb-warning:     #d97706;
  --sb-warning-bg:  #fef3c7;
  --sb-error:       #dc2626;
  --sb-error-bg:    #fee2e2;

  /* Spacing scale */
  --sb-radius-sm:   0.375rem;
  --sb-radius:      0.75rem;
  --sb-radius-lg:   1rem;
  --sb-radius-xl:   1.5rem;
  --sb-radius-full: 9999px;

  /* Shadows */
  --sb-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --sb-shadow:      0 4px 12px rgba(0,0,0,0.08);
  --sb-shadow-lg:   0 8px 24px rgba(91,76,245,0.10);
  --sb-shadow-brand:0 4px 16px rgba(91,76,245,0.20);
}

/* ── 2. Base / Reset ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--sb-bg);
  color: var(--sb-fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sb-fg);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--sb-brand); }

img { max-width: 100%; height: auto; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f0ff; }
::-webkit-scrollbar-thumb { background: #c4bcfc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-brand); }

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── 3. Layout Container ───────────────────────────────────── */
.sb-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .sb-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ── 4. Navbar ─────────────────────────────────────────────── */
.sb-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sb-border);
}

.sb-navbar-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Logo */
.sb-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
}

.sb-logo-icon {
  height: 2rem;
  width: 2rem;
  border-radius: 0.5rem;
  background: var(--sb-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-logo-icon svg {
  height: 1rem;
  width: 1rem;
  color: #fff;
}

.sb-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.sb-logo-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sb-fg);
  letter-spacing: -0.02em;
}

.sb-logo-tagline {
  font-size: 0.625rem;
  color: var(--sb-muted);
  font-family: 'DM Sans', sans-serif;
}

/* Search bar */
.sb-search-wrap {
  position: relative;
  flex: 1;
  max-width: 36rem;
}

.sb-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sb-subtle);
  pointer-events: none;
  height: 1rem;
  width: 1rem;
}

.sb-search-input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  font-size: 0.875rem;
  color: var(--sb-fg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.sb-search-input::placeholder { color: var(--sb-subtle); }

.sb-search-input:focus {
  border-color: var(--sb-brand);
  box-shadow: 0 0 0 3px rgba(91, 76, 245, 0.12);
  background: #fff;
}

/* Nav icons */
.sb-nav-icons {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.sb-nav-icon-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem;
  border-radius: var(--sb-radius);
  color: var(--sb-muted);
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.sb-nav-icon-link:hover {
  background: var(--sb-surface);
  color: var(--sb-brand);
}

.sb-nav-icon-link svg {
  height: 1.25rem;
  width: 1.25rem;
}

.sb-nav-icon-label {
  font-size: 0.625rem;
  font-weight: 500;
  white-space: nowrap;
}

.sb-nav-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  height: 1rem;
  min-width: 1rem;
  padding: 0 0.2rem;
  border-radius: var(--sb-radius-full);
  background: var(--sb-brand);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── 5. Page header ────────────────────────────────────────── */
.sb-page-header {
  padding: 2rem 0 0;
}

.sb-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 0.25rem;
}

.sb-page-subtitle {
  font-size: 0.875rem;
  color: var(--sb-muted);
}

/* ── 6. Category Tabs ──────────────────────────────────────── */
.sb-cat-tabs-wrap {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 1.25rem 0 0.25rem;
}

.sb-cat-tabs-wrap::-webkit-scrollbar { display: none; }

.sb-cat-tabs {
  display: flex;
  gap: 0.5rem;
  min-width: max-content;
}

.sb-cat-tab {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--sb-radius);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  color: var(--sb-muted);
  transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}

.sb-cat-tab:hover {
  background: var(--sb-brand-light);
  color: var(--sb-brand);
  border-color: rgba(91, 76, 245, 0.3);
}

.sb-cat-tab.active {
  background: var(--sb-brand);
  color: #fff;
  border-color: var(--sb-brand);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(91,76,245,0.2);
}

/* Category dropdown (mobile) */
.sb-cat-dropdown {
  display: none;
  width: 100%;
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  background: #fff;
  color: var(--sb-fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sb-cat-dropdown:focus {
  outline: none;
  border-color: var(--sb-brand);
  box-shadow: 0 0 0 3px rgba(91,76,245,0.12);
}

/* ── 7. Marketplace Layout (sidebar + grid) ────────────────── */
.sb-marketplace-layout {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem 0 3rem;
  align-items: flex-start;
}

/* ── 8. Filter Sidebar ─────────────────────────────────────── */
.sb-sidebar {
  width: 15rem;
  flex-shrink: 0;
}

.sb-sidebar-card {
  background: #fff;
  border-radius: var(--sb-radius-lg);
  border: 1px solid var(--sb-border);
  padding: 1.25rem;
  position: sticky;
  top: 5.5rem;
}

.sb-sidebar-title {
  font-family: 'Syne', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 0.25rem;
}

.sb-filter-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sb-border);
}

.sb-filter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sb-muted);
  margin-bottom: 0.75rem;
}

/* Price display */
.sb-price-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sb-fg);
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

/* Dual-range slider */
.sb-range-wrap {
  position: relative;
  height: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.sb-range {
  position: absolute;
  width: 100%;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  height: 0;
  outline: none;
  background: transparent;
  z-index: 3;
}

.sb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 1.125rem;
  width: 1.125rem;
  border-radius: 50%;
  border: 2px solid var(--sb-brand);
  background: #fff;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.sb-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(91,76,245,0.3);
}

.sb-range::-moz-range-thumb {
  height: 1.125rem;
  width: 1.125rem;
  border-radius: 50%;
  border: 2px solid var(--sb-brand);
  background: #fff;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.sb-range-track {
  position: absolute;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background: var(--sb-border);
  z-index: 1;
}

.sb-range-fill {
  position: absolute;
  height: 100%;
  border-radius: 2px;
  background: var(--sb-brand);
}

/* Star rating filter */
.sb-star-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.sb-star-row:hover .sb-filter-rating-label { color: var(--sb-brand); }

.sb-star-radio {
  appearance: none;
  -webkit-appearance: none;
  height: 0.875rem;
  width: 0.875rem;
  border-radius: 50%;
  border: 1.5px solid var(--sb-border);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.sb-star-radio:checked {
  background: var(--sb-brand);
  border-color: var(--sb-brand);
  box-shadow: 0 0 0 2px rgba(91,76,245,0.2);
}

.sb-star-row-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.sb-filter-rating-label {
  font-size: 0.75rem;
  color: var(--sb-muted);
  transition: color 0.15s;
}

.sb-filter-rating-any {
  font-size: 0.75rem;
}

/* License toggle */
.sb-license-toggle {
  display: flex;
  border-radius: var(--sb-radius-sm);
  border: 1px solid var(--sb-border);
  overflow: hidden;
}

.sb-license-btn {
  flex: 1;
  padding: 0.375rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  color: var(--sb-muted);
  background: transparent;
  border: none;
  transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
}

.sb-license-btn:hover:not(.active) {
  background: var(--sb-surface);
  color: var(--sb-brand);
}

.sb-license-btn.active {
  background: var(--sb-brand);
  color: #fff;
}

/* Filter actions */
.sb-filter-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── 9. Buttons ────────────────────────────────────────────── */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--sb-radius);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.sb-btn:active { transform: scale(0.98); }

.sb-btn-primary {
  background: var(--sb-brand);
  color: #fff;
}

.sb-btn-primary:hover {
  background: var(--sb-brand-hover);
  color: #fff;
  text-decoration: none;
}

.sb-btn-outline {
  border: 1px solid var(--sb-brand);
  color: var(--sb-brand);
  background: transparent;
}

.sb-btn-outline:hover {
  background: var(--sb-brand-light);
  text-decoration: none;
}

.sb-btn-ghost {
  color: var(--sb-muted);
  background: transparent;
}

.sb-btn-ghost:hover {
  background: var(--sb-surface);
  color: var(--sb-fg);
}

.sb-btn-danger {
  background: var(--sb-error-bg);
  color: var(--sb-error);
}

.sb-btn-danger:hover { opacity: 0.85; }

.sb-btn-xs  { padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: var(--sb-radius-sm); }
.sb-btn-sm  { padding: 0.5rem 0.875rem;  font-size: 0.8125rem; }
.sb-btn-md  { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.sb-btn-lg  { padding: 0.875rem 1.75rem; font-size: 1rem; }
.sb-btn-full { width: 100%; }

/* ── 10. Badges ────────────────────────────────────────────── */
.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--sb-radius-full);
  padding: 0.1875rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}

.sb-badge-top {
  background: var(--sb-success-bg);
  color: var(--sb-success);
}

.sb-badge-category {
  background: var(--sb-surface);
  color: var(--sb-muted);
  border: 1px solid var(--sb-border);
}

.sb-badge-featured {
  background: var(--sb-brand-light);
  color: var(--sb-brand);
}

.sb-badge-top-feat {
  background: #fef3c7;
  color: #92400e;
}

.sb-badge-feat-vendor {
  background: var(--sb-surface);
  color: var(--sb-muted);
}

/* ── 11. Icons ─────────────────────────────────────────────── */
.sb-icon     { height: 2rem; width: 2rem; }
.sb-icon-sm  { height: 1rem; width: 1rem; }
.sb-icon-xs  { height: 0.75rem; width: 0.75rem; }
.sb-icon-lg  { height: 3rem; width: 3rem; }

/* ── 12. Star rating row ───────────────────────────────────── */
.sb-rating-row {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.sb-star {
  height: 0.875rem;
  width: 0.875rem;
  flex-shrink: 0;
}

.sb-star-filled { color: #f59e0b; }
.sb-star-empty  { color: #d1d5db; }
.sb-star-half   { color: #f59e0b; }

.sb-star-white        { color: rgba(255,255,255,0.9); }
.sb-star-white-empty  { color: rgba(255,255,255,0.35); }

.sb-review-count {
  font-size: 0.75rem;
  color: var(--sb-muted);
  margin-left: 0.25rem;
  font-weight: 500;
}

.sb-review-count-white {
  color: rgba(255,255,255,0.7);
}

/* ── 13. Product Grid ──────────────────────────────────────── */
.sb-grid-main {
  flex: 1;
  min-width: 0;
}

.sb-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.sb-product-count {
  font-size: 0.8125rem;
  color: var(--sb-muted);
}

#sb-product-grid-wrap {
  position: relative;
}

#sb-product-grid-wrap.sb-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  border-radius: var(--sb-radius-lg);
  z-index: 10;
}

#sb-product-grid-wrap.sb-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--sb-border);
  border-top-color: var(--sb-brand);
  border-radius: 50%;
  animation: sb-spin 0.6s linear infinite;
  z-index: 11;
}

@keyframes sb-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.sb-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .sb-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sb-product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 14. Product Card (white) ──────────────────────────────── */
.sb-product-card {
  background: #fff;
  border-radius: var(--sb-radius-lg);
  border: 1px solid var(--sb-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sb-product-card:hover {
  border-color: rgba(91, 76, 245, 0.30);
  box-shadow: var(--sb-shadow-lg);
}

.sb-card-link {
  position: relative;
  display: block;
  text-decoration: none;
}

.sb-product-icon-area {
  height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.sb-product-card:hover .sb-product-icon-area { opacity: 0.9; }

/* Category background colours */
.sb-cat-bg-erp        { background: #eff6ff; }  /* blue-50        */
.sb-cat-bg-crm        { background: #fff7ed; }  /* orange-50      */
.sb-cat-bg-hr         { background: #ecfdf5; }  /* emerald-50     */
.sb-cat-bg-sec        { background: #fef2f2; }  /* red-50         */
.sb-cat-bg-log        { background: #fffbeb; }  /* amber-50       */
.sb-cat-bg-powerbanks { background: #fafafa; }  /* neutral-50     */

.sb-product-icon-box {
  height: 4rem;
  width: 4rem;
  border-radius: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sb-shadow-sm);
}

.sb-product-icon-box svg {
  height: 2rem;
  width: 2rem;
}

/* Category icon colours */
.sb-cat-ic-erp        { color: #2563eb; }
.sb-cat-ic-crm        { color: #ea580c; }
.sb-cat-ic-hr         { color: #059669; }
.sb-cat-ic-sec        { color: #dc2626; }
.sb-cat-ic-log        { color: #d97706; }
.sb-cat-ic-powerbanks { color: #7c3aed; }
.sb-cat-bg-home       { background: #ecfdf5; }
.sb-cat-ic-home       { color: #059669; }
.sb-cat-bg-cables     { background: #eff6ff; }
.sb-cat-ic-cables     { color: #2563eb; }

/* ── Product image thumbnail (physical products) ────────────── */
.sb-product-has-img {
  padding: 0 !important;
  overflow: hidden;
}

.sb-product-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
  display: block;
}

.sb-product-card:hover .sb-product-thumb {
  transform: scale(1.05);
}

/* Featured card: product image (full visibility) */
.sb-feat-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
  display: block;
}

.sb-featured-card:hover .sb-feat-thumb {
  transform: scale(1.05);
}

/* ── Product image gallery (detail page) ────────────────────── */
.sb-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sb-gallery-main {
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
  background: #f8f8f8;
  aspect-ratio: 1 / 1;
}

.sb-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s ease;
}

.sb-gallery-thumbs {
  display: flex;
  gap: 0.5rem;
}

.sb-gallery-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--sb-radius);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  background: #f8f8f8;
  transition: border-color 0.2s ease;
}

.sb-gallery-thumb:hover {
  border-color: var(--sb-brand-muted);
}

.sb-gallery-thumb.active {
  border-color: var(--sb-brand);
}

.sb-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Card badges overlay */
.sb-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Wishlist button */
.sb-wishlist-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  height: 2rem;
  width: 2rem;
  border-radius: var(--sb-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.80);
  color: var(--sb-muted);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.sb-wishlist-btn:hover {
  background: #fff;
  color: #ef4444;
}

.sb-wishlist-btn.wishlisted {
  background: #fef2f2;
  color: #ef4444;
}

.sb-wishlist-btn svg {
  height: 1rem;
  width: 1rem;
}

/* Card body */
.sb-product-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.sb-product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Syne', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sb-fg);
  line-height: 1.35;
  margin-top: 0.375rem;
  transition: color 0.15s;
}

.sb-product-name:hover { color: var(--sb-brand); text-decoration: none; }

.sb-product-vendor {
  font-size: 0.75rem;
  color: var(--sb-muted);
  margin-top: 0.125rem;
}

.sb-product-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.sb-product-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sb-fg);
  line-height: 1;
}

.sb-product-price .woocommerce-Price-currencySymbol { font-size: inherit; }
.sb-product-price bdi { font-size: inherit; }

.sb-product-price-label {
  font-size: 0.6875rem;
  color: var(--sb-muted);
  margin-top: 0.125rem;
}

.sb-add-to-cart-btn {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sb-surface);
  color: var(--sb-muted);
  border: 1px solid var(--sb-border);
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}

.sb-add-to-cart-btn:hover {
  background: var(--sb-brand);
  color: #fff;
  border-color: var(--sb-brand);
  text-decoration: none;
}

.sb-add-to-cart-btn svg {
  height: 1rem;
  width: 1rem;
}

/* ── 15. Featured Card (elevated white with brand accent) ──── */
.sb-featured-card {
  background: #fff;
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1.5px solid var(--sb-border);
  border-top: 3px solid var(--sb-brand);
  box-shadow: var(--sb-shadow);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sb-featured-card:hover {
  box-shadow: 0 12px 32px rgba(91, 76, 245, 0.14);
  transform: translateY(-2px);
}

/* Decorative circles hidden — not needed on white */
.sb-feat-circle-top,
.sb-feat-circle-bottom { display: none; }

.sb-feat-icon-area {
  background: var(--sb-surface) !important;
}

.sb-feat-icon-box {
  height: 4rem;
  width: 4rem;
  border-radius: 1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sb-shadow-sm);
}

.sb-feat-icon-box svg { height: 2rem; width: 2rem; }
.sb-icon-white { color: var(--sb-brand) !important; }

.sb-feat-body { border-top: 1px solid var(--sb-border); }

.sb-feat-name {
  color: var(--sb-fg) !important;
}

.sb-feat-name:hover { color: var(--sb-brand) !important; }

.sb-feat-price {
  color: var(--sb-fg) !important;
}

.sb-feat-price-label {
  color: var(--sb-muted) !important;
}

.sb-wishlist-btn-feat {
  background: rgba(91, 76, 245, 0.08) !important;
  color: var(--sb-brand) !important;
}

.sb-wishlist-btn-feat:hover {
  background: rgba(255,255,255,0.30) !important;
  color: #fff !important;
}

.sb-add-to-cart-feat {
  background: rgba(255,255,255,0.20) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.sb-add-to-cart-feat:hover {
  background: #fff !important;
  color: var(--sb-brand) !important;
}

/* ── 16. Empty state ───────────────────────────────────────── */
.sb-empty-state {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--sb-muted);
}

/* ── 17. Footer ────────────────────────────────────────────── */
.sb-footer {
  border-top: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 1.5rem 0;
  margin-top: auto;
}

.sb-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sb-muted);
  flex-wrap: wrap;
  text-align: center;
}

.sb-footer-sep { color: var(--sb-border); }

/* ── 18. Single Product Page ───────────────────────────────── */
.sb-product-detail-wrap {
  padding: 2rem 0 4rem;
}

.sb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--sb-muted);
  margin-bottom: 1.5rem;
}

.sb-breadcrumb a {
  color: var(--sb-muted);
  transition: color 0.15s;
}

.sb-breadcrumb a:hover { color: var(--sb-brand); }

.sb-breadcrumb-sep { color: var(--sb-border); }

.sb-product-detail {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .sb-product-detail { grid-template-columns: 1fr 1fr; }
}

/* Left column — icon area */
.sb-product-detail-icon {
  border-radius: var(--sb-radius-xl);
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-product-detail-icon-box {
  height: 6rem;
  width: 6rem;
  border-radius: 1.5rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sb-shadow);
}

.sb-product-detail-icon-box svg { height: 3rem; width: 3rem; }

/* Right column */
.sb-product-detail-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sb-product-detail-cat { margin-bottom: 0.25rem; }

.sb-product-detail-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sb-fg);
  line-height: 1.2;
}

.sb-product-detail-desc {
  font-size: 0.9375rem;
  color: var(--sb-muted);
  line-height: 1.7;
}

.sb-product-detail-vendor {
  font-size: 0.875rem;
  color: var(--sb-muted);
}

.sb-product-detail-vendor strong { color: var(--sb-fg); }

/* License toggle (product detail) */
.sb-detail-license-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sb-detail-license-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sb-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-detail-license-opts {
  display: flex;
  gap: 0.5rem;
}

.sb-detail-license-opt {
  flex: 1;
  border-radius: var(--sb-radius);
  border: 1px solid var(--sb-border);
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}

.sb-detail-license-opt.active {
  border-color: var(--sb-brand);
  background: var(--sb-brand-light);
}

.sb-detail-license-opt-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sb-fg);
}

.sb-detail-license-opt.active .sb-detail-license-opt-name { color: var(--sb-brand); }

.sb-detail-license-opt-price {
  font-family: 'Syne', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--sb-brand);
  margin-top: 0.25rem;
}

.sb-detail-license-opt-period {
  font-size: 0.6875rem;
  color: var(--sb-muted);
}

/* Price summary box */
.sb-price-box {
  background: var(--sb-surface);
  border-radius: var(--sb-radius);
  border: 1px solid var(--sb-border);
  padding: 1rem 1.25rem;
}

.sb-price-box-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--sb-muted);
  padding: 0.25rem 0;
}

.sb-price-box-row.total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sb-fg);
  border-top: 1px solid var(--sb-border);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.sb-price-box-row.total .val { color: var(--sb-brand); }

.sb-detail-add-to-cart {
  display: flex;
  gap: 0.75rem;
}

.sb-detail-add-to-cart .sb-btn { flex: 1; }

/* ── 19. Cart Page ─────────────────────────────────────────── */
.sb-cart-wrap {
  display: grid;
  gap: 2rem;
  padding: 2rem 0 4rem;
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .sb-cart-wrap { grid-template-columns: 1fr 380px; }
}

.sb-cart-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--sb-fg);
}

.sb-cart-items-card {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
}

.sb-cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sb-border);
  transition: background 0.15s;
}

.sb-cart-item:last-child { border-bottom: none; }

.sb-cart-item:hover { background: var(--sb-surface); }

.sb-cart-item-icon {
  height: 4rem;
  width: 4rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-cart-item-icon svg { height: 1.5rem; width: 1.5rem; }

.sb-cart-item-thumb {
  height: 4rem;
  width: 4rem;
  border-radius: 0.75rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--sb-surface);
}

.sb-cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-cart-item-info { flex: 1; min-width: 0; }

.sb-cart-item-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sb-fg);
  margin-bottom: 0.125rem;
}

.sb-cart-item-meta {
  font-size: 0.75rem;
  color: var(--sb-muted);
}

.sb-cart-item-price {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sb-fg);
  white-space: nowrap;
  min-width: 5rem;
  text-align: right;
}

.sb-cart-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  border-radius: var(--sb-radius);
  color: var(--sb-muted);
  transition: all 0.15s;
  flex-shrink: 0;
}

.sb-cart-remove-btn:hover {
  background: #fef2f2;
  color: #dc2626;
}

.sb-cart-remove-btn svg { width: 1rem; height: 1rem; }

/* Quantity controls */
.sb-qty-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 0.5rem;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  overflow: hidden;
  background: var(--sb-surface);
}

.sb-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--sb-muted);
  transition: all 0.15s;
  padding: 0;
}

.sb-qty-btn:hover {
  background: var(--sb-brand-light);
  color: var(--sb-brand);
}

.sb-qty-btn svg { width: 0.75rem; height: 0.75rem; }

.sb-qty-input {
  width: 2.5rem;
  height: 2rem;
  text-align: center;
  border: none;
  border-left: 1px solid var(--sb-border);
  border-right: 1px solid var(--sb-border);
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sb-fg);
  outline: none;
  -moz-appearance: textfield;
}

.sb-qty-input::-webkit-outer-spin-button,
.sb-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Update cart button */
.sb-update-cart-btn {
  margin-top: 1rem;
  transition: all 0.2s;
}

.sb-update-cart-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Continue shopping link */
.sb-cart-continue {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--sb-brand);
  text-decoration: none;
  font-weight: 500;
}

.sb-cart-continue:hover { text-decoration: underline; }

.sb-cart-continue svg { width: 1rem; height: 1rem; }

/* Cart summary box */
.sb-cart-summary {
  background: #fff;
  border-radius: var(--sb-radius-lg);
  border: 1px solid var(--sb-border);
  padding: 1.5rem;
  position: sticky;
  top: 5.5rem;
  height: fit-content;
}

.sb-cart-summary-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--sb-fg);
}

.sb-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--sb-muted);
  padding: 0.375rem 0;
}

.sb-summary-row .amount {
  color: var(--sb-fg);
  font-weight: 500;
}

.sb-summary-row.total {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--sb-fg);
  border-top: 1px solid var(--sb-border);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.sb-summary-row.total .amount { color: var(--sb-brand); }

.sb-cart-checkout-btn {
  margin-top: 1.25rem;
  width: 100%;
}

.sb-cart-checkout-btn .button,
.sb-cart-checkout-btn .checkout-button {
  width: 100%;
  display: block;
  text-align: center;
}

.sb-cart-trust {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--sb-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

/* Hide WC default empty cart "return to shop" */
.wc-empty-cart-message,
.return-to-shop { display: none; }

/* ── 20. Checkout Page ─────────────────────────────────────── */
.sb-checkout-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 1.5rem;
}

.sb-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: flex-start;
}

.sb-checkout-card {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.sb-checkout-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sb-border);
}

.sb-checkout-review-card {
  position: sticky;
  top: 5.5rem;
}

/* Checkout form fields */
.sb-checkout-form .form-row {
  margin-bottom: 1rem;
}

.sb-checkout-form .form-row label,
.sb-checkout-form .woocommerce-billing-fields label,
.woocommerce form .form-row label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-fg);
  margin-bottom: 0.375rem;
  display: block;
}

.sb-checkout-form .form-row label .required {
  color: var(--sb-error);
}

.sb-checkout-form .form-row input.input-text,
.sb-checkout-form .form-row textarea,
.sb-checkout-form .form-row select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 0.625rem 0.875rem;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  color: var(--sb-fg);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.sb-checkout-form .form-row input.input-text:focus,
.sb-checkout-form .form-row textarea:focus,
.sb-checkout-form .form-row select:focus,
.woocommerce form .form-row input.input-text:focus {
  border-color: var(--sb-brand);
  box-shadow: 0 0 0 3px rgba(91,76,245,0.1);
}

.sb-checkout-form .form-row textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Two-column billing fields */
.sb-checkout-form .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

.sb-checkout-form .form-row-wide { grid-column: 1 / -1; }
.sb-checkout-form .form-row-first { grid-column: 1; }
.sb-checkout-form .form-row-last { grid-column: 2; }

/* Coupon form */
.woocommerce-form-coupon-toggle { margin-bottom: 1rem; }

.woocommerce-form-coupon {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.woocommerce-form-coupon .form-row { margin: 0; flex: 1; }

.woocommerce-form-coupon .button {
  padding: 0.625rem 1.25rem;
  border-radius: var(--sb-radius);
  border: 1px solid var(--sb-brand);
  background: var(--sb-brand);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.woocommerce-form-coupon .button:hover { opacity: 0.9; }

/* Order review table */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.woocommerce-checkout-review-order-table thead th {
  text-align: left;
  padding: 0.625rem 0;
  font-weight: 600;
  color: var(--sb-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--sb-border);
}

.woocommerce-checkout-review-order-table thead th:last-child {
  text-align: right;
}

.woocommerce-checkout-review-order-table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--sb-border);
  color: var(--sb-fg);
  vertical-align: top;
}

.woocommerce-checkout-review-order-table td:last-child {
  text-align: right;
  font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-name {
  font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-name .product-quantity {
  color: var(--sb-muted);
  font-weight: 400;
}

.woocommerce-checkout-review-order-table .product-name dl.variation {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--sb-muted);
}

.woocommerce-checkout-review-order-table .product-name dl.variation dt,
.woocommerce-checkout-review-order-table .product-name dl.variation dd {
  display: inline;
  margin: 0;
  padding: 0;
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd p { margin: 0; display: inline; }

.woocommerce-checkout-review-order-table tfoot th {
  text-align: left;
  padding: 0.625rem 0;
  font-weight: 500;
  color: var(--sb-muted);
  font-size: 0.875rem;
}

.woocommerce-checkout-review-order-table tfoot td {
  padding: 0.625rem 0;
  border-bottom: none;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sb-fg);
  border-top: 1px solid var(--sb-border);
  padding-top: 0.75rem;
}

.woocommerce-checkout-review-order-table tfoot .order-total td .amount {
  color: var(--sb-brand);
  font-family: 'Syne', sans-serif;
}

/* Payment methods */
.woocommerce-checkout-payment {
  background: var(--sb-surface);
  border-radius: var(--sb-radius);
  padding: 1.25rem;
  margin-top: 0.5rem;
}

.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wc_payment_methods li {
  margin-bottom: 0.75rem;
}

.wc_payment_methods li:last-child { margin-bottom: 0; }

.wc_payment_methods .input-radio {
  accent-color: var(--sb-brand);
  margin-right: 0.5rem;
}

.wc_payment_methods label {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--sb-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wc_payment_methods label img {
  height: 1.25rem;
  width: auto;
}

.wc_payment_methods .payment_box {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: var(--sb-radius);
  font-size: 0.8125rem;
  color: var(--sb-muted);
}

.wc_payment_methods .payment_box p { margin: 0; }

/* Place order area */
.form-row.place-order {
  margin-top: 1.25rem;
}

.form-row.place-order .button {
  width: 100%;
  display: block;
}

.woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 1rem;
}

.woocommerce-privacy-policy-text {
  font-size: 0.75rem;
  color: var(--sb-subtle);
  line-height: 1.5;
}

.woocommerce-privacy-policy-text a {
  color: var(--sb-brand);
}

/* WC toast notifications */
.woocommerce-notices-wrapper {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  max-width: 24rem;
  pointer-events: none;
}

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  padding: 0.875rem 1.25rem;
  border-radius: var(--sb-radius);
  background: var(--sb-fg);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  pointer-events: auto;
  animation: sb-toast-in 0.35s ease-out;
  border: none;
  line-height: 1.5;
}

.woocommerce .woocommerce-message a,
.woocommerce .woocommerce-info a {
  color: var(--sb-brand-light);
  font-weight: 600;
  text-decoration: underline;
}

.woocommerce .woocommerce-message { border-left: 3px solid #059669; }
.woocommerce .woocommerce-error   { border-left: 3px solid #dc2626; background: #7f1d1d; }
.woocommerce .woocommerce-info    { border-left: 3px solid var(--sb-brand); }

.sb-toast-out {
  animation: sb-toast-out 0.3s ease-in forwards;
}

@keyframes sb-toast-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sb-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(0.5rem) scale(0.95); }
}

.woocommerce .woocommerce-info a.showcoupon {
  color: var(--sb-brand-light);
  font-weight: 600;
}

/* Coupon toggle (keep inline, not toast) */
.woocommerce-form-coupon-toggle {
  position: static;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
  background: #fff;
  color: var(--sb-fg);
  box-shadow: none;
  border: 1px solid var(--sb-border);
  border-left: 3px solid var(--sb-brand);
  animation: none;
  pointer-events: auto;
}

.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--sb-brand);
}

@media (max-width: 639px) {
  .woocommerce-notices-wrapper {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: none;
  }
}

/* ── 20b. Landing Page ─────────────────────────────────────── */

/* Hero */
.sb-hero {
  padding: 5rem 0 4rem;
  background: linear-gradient(135deg, var(--sb-brand-light) 0%, #f3f0ff 50%, var(--sb-surface) 100%);
}

.sb-hero-content {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.sb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border-radius: var(--sb-radius-full);
  background: #fff;
  border: 1px solid var(--sb-border);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sb-brand);
  margin-bottom: 1.5rem;
}

.sb-hero-badge svg { width: 0.875rem; height: 0.875rem; }

.sb-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sb-fg);
  margin-bottom: 1.25rem;
}

.sb-hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--sb-muted);
  max-width: 36rem;
  margin: 0 auto 2rem;
}

.sb-hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.sb-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.sb-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sb-hero-stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sb-brand);
}

.sb-hero-stat-label {
  font-size: 0.8125rem;
  color: var(--sb-muted);
  margin-top: 0.125rem;
}

.sb-hero-stat-sep {
  width: 1px;
  height: 2rem;
  background: var(--sb-border);
}

/* Value Propositions */
.sb-values {
  padding: 4rem 0;
  background: #fff;
}

.sb-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.sb-value-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--sb-radius-lg);
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  transition: box-shadow 0.2s, transform 0.2s;
}

.sb-value-card:hover {
  box-shadow: var(--sb-shadow);
  transform: translateY(-2px);
}

.sb-value-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: var(--sb-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.sb-value-icon-wrap svg { width: 1.25rem; height: 1.25rem; }

.sb-value-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sb-fg);
  margin-bottom: 0.375rem;
}

.sb-value-desc {
  font-size: 0.8125rem;
  color: var(--sb-muted);
  line-height: 1.5;
}

/* Section headers */
.sb-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
}

.sb-section-header-center {
  justify-content: center;
  text-align: center;
}

.sb-section-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 0.25rem;
}

.sb-section-subtitle {
  font-size: 0.9375rem;
  color: var(--sb-muted);
}

/* Featured Products Section */
.sb-featured-section {
  padding: 4rem 0;
  background: var(--sb-surface);
}

.sb-landing-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* Category Grid */
.sb-categories-section {
  padding: 4rem 0;
  background: #fff;
}

.sb-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.sb-category-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  text-decoration: none;
  transition: all 0.2s;
}

.sb-category-card:hover {
  border-color: var(--sb-brand);
  box-shadow: var(--sb-shadow);
  transform: translateY(-2px);
}

.sb-category-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--sb-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-category-card-icon svg { width: 1.25rem; height: 1.25rem; }

.sb-category-card-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sb-fg);
}

/* Trust Bar */
.sb-trust-section {
  padding: 2.5rem 0;
  background: var(--sb-surface);
  border-top: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
}

.sb-trust-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.sb-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sb-trust-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sb-brand);
}

.sb-trust-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-muted);
}

/* CTA Section */
.sb-cta-section {
  padding: 4rem 0;
  background: #fff;
}

.sb-cta-card {
  text-align: center;
  padding: 3.5rem 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--sb-brand) 0%, #7c6ff8 100%);
  color: #fff;
}

.sb-cta-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.sb-cta-subtitle {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 32rem;
  margin: 0 auto 2rem;
}

.sb-cta-btn {
  background: #fff !important;
  color: var(--sb-brand) !important;
  border-color: #fff !important;
  font-weight: 600;
}

.sb-cta-btn:hover {
  background: #f0effe !important;
}

/* ── 21. Responsive: All Pages ────────────────────────────── */
@media (max-width: 1023px) {
  /* Marketplace */
  .sb-sidebar { display: none; }
  .sb-marketplace-layout { flex-direction: column; }
  .sb-mobile-filter-btn { display: inline-flex !important; }
  .sb-product-detail { grid-template-columns: 1fr; }

  /* Cart */
  .sb-cart-wrap { grid-template-columns: 1fr; }
  .sb-cart-summary { position: static; }

  /* Checkout */
  .sb-checkout-layout { grid-template-columns: 1fr; }
  .sb-checkout-review-card { position: static; }

  /* Account */
  .sb-account-wrap { grid-template-columns: 1fr; }
  .sb-account-nav-card { position: static; }

  /* Landing page */
  .sb-values-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-category-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-landing-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767px) {
  /* Category dropdown replaces tabs */
  .sb-cat-tabs { display: none; }
  .sb-cat-dropdown { display: block; }

  /* Checkout fields single column */
  .sb-checkout-form .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .sb-checkout-form .form-row-first,
  .sb-checkout-form .form-row-last { grid-column: 1; }

  /* Auth forms stack */
  .sb-auth-forms.sb-auth-two-col { grid-template-columns: 1fr; }

  /* Dashboard cards */
  .sb-dashboard-cards { grid-template-columns: 1fr; }

  /* Cart item layout */
  .sb-cart-item { flex-wrap: wrap; }
  .sb-cart-item-price { min-width: auto; }

  /* Order card tweaks */
  .sb-order-card-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .sb-order-header-left { flex-direction: column; gap: 0.25rem; }

  /* Landing page */
  .sb-hero { padding: 3rem 0 2.5rem; }
  .sb-hero-title { font-size: 2rem; }
  .sb-section-header { flex-direction: column; align-items: flex-start; }
  .sb-section-cta { align-self: flex-start; }
  .sb-cta-card { padding: 2.5rem 1.5rem; }
  .sb-cta-title { font-size: 1.375rem; }
}

@media (max-width: 639px) {
  .sb-nav-icon-label { display: none; }
  .sb-logo-tagline { display: none; }
  .sb-page-title { font-size: 1.25rem; }

  /* Tighter padding on cards */
  .sb-checkout-card { padding: 1rem; }
  .sb-cart-summary { padding: 1rem; }
  .sb-auth-card { padding: 1.25rem; }
  .sb-account-nav-card { padding: 1rem; }
  .sb-cart-item { padding: 0.75rem 1rem; }

  /* Checkout title */
  .sb-checkout-title { font-size: 1.25rem; }

  /* Product grid 2 columns on small screens */
  .sb-product-grid { grid-template-columns: 1fr 1fr; }

  /* Landing page */
  .sb-values-grid { grid-template-columns: 1fr; }
  .sb-category-grid { grid-template-columns: 1fr; }
  .sb-landing-grid { grid-template-columns: 1fr !important; }
  .sb-hero-title { font-size: 1.625rem; }
  .sb-hero-actions { flex-direction: column; align-items: center; }
  .sb-hero-stats { flex-direction: column; gap: 1rem; }
  .sb-hero-stat-sep { width: 3rem; height: 1px; }
  .sb-trust-grid { gap: 1.5rem; }
}

@media (max-width: 479px) {
  /* Product grid single column on very small */
  .sb-product-grid { grid-template-columns: 1fr; }

  /* Stack order items */
  .sb-order-item { flex-wrap: wrap; }

  /* Recent order compact */
  .sb-recent-order-row { flex-wrap: wrap; gap: 0.5rem; }
}

/* ── 22. My Account / Orders page ──────────────────────────── */
.sb-orders-wrap { padding: 2rem 0 4rem; }
.sb-orders-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }

.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.woocommerce-orders-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--sb-muted);
  border-bottom: 2px solid var(--sb-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce-orders-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--sb-border);
  color: var(--sb-fg);
}

.woocommerce-orders-table tr:hover td { background: var(--sb-surface); }

/* ── 23. Search results page ───────────────────────────────── */
.sb-search-wrap-page { padding: 2rem 0 4rem; }
.sb-search-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }

/* ── 24. 404 page ──────────────────────────────────────────── */
.sb-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
}

.sb-404-code {
  font-family: 'Syne', sans-serif;
  font-size: 6rem;
  font-weight: 800;
  color: var(--sb-brand-light);
  line-height: 1;
}

.sb-404-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-top: 0.5rem;
}

.sb-404-desc {
  color: var(--sb-muted);
  margin-top: 0.5rem;
  margin-bottom: 2rem;
}

/* ── 25. Loading / Skeleton ────────────────────────────────── */
.sb-skeleton {
  background: linear-gradient(90deg, #f0effe 25%, #e8e5f8 50%, #f0effe 75%);
  background-size: 200% 100%;
  animation: sb-shimmer 1.5s infinite;
  border-radius: var(--sb-radius);
}

@keyframes sb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 26. Utilities ─────────────────────────────────────────── */
.sb-text-brand  { color: var(--sb-brand); }
.sb-text-muted  { color: var(--sb-muted); }
.sb-text-subtle { color: var(--sb-subtle); }
.sb-font-heading { font-family: 'Syne', sans-serif; }
.sb-font-sans    { font-family: 'DM Sans', sans-serif; }
.sb-fw-bold { font-weight: 700; }
.sb-fw-semi { font-weight: 600; }

.sb-divider {
  border: none;
  border-top: 1px solid var(--sb-border);
  margin: 1.5rem 0;
}

.sb-icon-lg { width: 3rem; height: 3rem; }

/* Wishlist active state */
.sb-wishlist-btn.sb-wishlisted svg {
  fill: var(--sb-error);
  stroke: var(--sb-error);
}

/* ── 27. Orders Page ──────────────────────────────────────── */
.sb-orders-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sb-order-card {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
}

.sb-order-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--sb-surface);
  border-bottom: 1px solid var(--sb-border);
}

.sb-order-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sb-order-number {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sb-fg);
}

.sb-order-date {
  font-size: 0.8125rem;
  color: var(--sb-muted);
}

.sb-order-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--sb-radius-full);
  text-transform: capitalize;
}

.sb-status-success {
  background: #ecfdf5;
  color: #059669;
}

.sb-status-warning {
  background: #fffbeb;
  color: #d97706;
}

.sb-status-error {
  background: #fef2f2;
  color: #dc2626;
}

.sb-order-card-items {
  padding: 0.75rem 1.25rem;
}

.sb-order-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.sb-order-item + .sb-order-item {
  border-top: 1px solid var(--sb-border);
}

.sb-order-item-thumb,
.sb-order-item-icon {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-order-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-order-item-name {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-fg);
}

.sb-order-item-qty {
  font-size: 0.8125rem;
  color: var(--sb-muted);
  flex-shrink: 0;
}

.sb-order-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: var(--sb-surface);
  border-top: 1px solid var(--sb-border);
}

.sb-order-total {
  font-size: 0.875rem;
  color: var(--sb-muted);
}

.sb-order-total strong {
  color: var(--sb-fg);
  font-family: 'Syne', sans-serif;
}

.sb-orders-pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ── 28. Account / Auth Pages ─────────────────────────────── */

/* Auth wrapper (login/register) */
.sb-auth-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.sb-auth-forms {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.sb-auth-forms.sb-auth-two-col {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 767px) {
  .sb-auth-forms.sb-auth-two-col {
    grid-template-columns: 1fr;
  }
}

.sb-auth-card {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 2rem;
}

.sb-auth-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--sb-fg);
}

.sb-auth-card-desc {
  font-size: 0.875rem;
  color: var(--sb-muted);
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}

/* Form elements (scoped to auth + account) */
.sb-form-group {
  margin-bottom: 1rem;
}

.sb-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-fg);
  margin-bottom: 0.375rem;
}

.sb-form-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  color: var(--sb-fg);
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sb-form-input:focus {
  border-color: var(--sb-brand);
  box-shadow: 0 0 0 3px rgba(91,76,245,0.1);
}

.sb-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.sb-form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sb-muted);
  cursor: pointer;
}

.sb-form-checkbox input[type="checkbox"] {
  accent-color: var(--sb-brand);
}

.sb-auth-link {
  font-size: 0.8125rem;
  color: var(--sb-brand);
  text-decoration: none;
}

.sb-auth-link:hover {
  text-decoration: underline;
}

/* Account wrapper (sidebar + content) */
.sb-account-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  padding: 2rem 0 4rem;
  align-items: flex-start;
}

@media (max-width: 767px) {
  .sb-account-wrap {
    grid-template-columns: 1fr;
  }
}

.sb-account-nav-card {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 5.5rem;
}

.sb-account-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--sb-border);
  margin-bottom: 1rem;
}

.sb-account-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sb-radius-full);
  background: var(--sb-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sb-brand);
}

.sb-account-avatar svg { width: 1.5rem; height: 1.5rem; }

.sb-account-user-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sb-fg);
}

.sb-account-user-email {
  font-size: 0.75rem;
  color: var(--sb-muted);
  word-break: break-all;
}

.sb-account-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sb-account-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--sb-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sb-muted);
  text-decoration: none;
  transition: all 0.15s;
}

.sb-account-nav-item:hover {
  background: var(--sb-surface);
  color: var(--sb-fg);
}

.sb-account-nav-item.active {
  background: var(--sb-brand-light);
  color: var(--sb-brand);
  font-weight: 600;
}

.sb-account-nav-item svg {
  width: 1.125rem;
  height: 1.125rem;
}

.sb-account-nav-logout {
  margin-top: 0.5rem;
  border-top: 1px solid var(--sb-border);
  padding-top: 0.875rem;
}

.sb-account-content {
  min-width: 0;
}

/* Dashboard */
.sb-dashboard-greeting {
  margin-bottom: 2rem;
}

.sb-dashboard-hello {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 0.25rem;
}

.sb-dashboard-desc {
  font-size: 0.9375rem;
  color: var(--sb-muted);
}

.sb-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 639px) {
  .sb-dashboard-cards {
    grid-template-columns: 1fr;
  }
}

.sb-dash-card {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.sb-dash-card:hover {
  box-shadow: var(--sb-shadow-lg);
  transform: translateY(-2px);
}

.sb-dash-card-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sb-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.sb-dash-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sb-dash-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sb-fg);
  margin-bottom: 0.25rem;
}

.sb-dash-card-desc {
  font-size: 0.8125rem;
  color: var(--sb-muted);
}

/* Recent Orders */
.sb-recent-orders {
  margin-top: 0.5rem;
}

.sb-recent-orders-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--sb-fg);
}

.sb-recent-orders-list {
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
}

.sb-recent-order-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  text-decoration: none;
  transition: background 0.15s;
}

.sb-recent-order-row:hover {
  background: var(--sb-surface);
}

.sb-recent-order-row + .sb-recent-order-row {
  border-top: 1px solid var(--sb-border);
}

.sb-recent-order-number {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sb-fg);
  min-width: 4rem;
}

.sb-recent-order-date {
  font-size: 0.8125rem;
  color: var(--sb-muted);
  flex: 1;
}

.sb-recent-order-total {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--sb-fg);
}

/* Per-product inline SVG placeholders */
.sb-product-svg-placeholder svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-gallery-main-svg {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--sb-radius-lg);
}

.sb-gallery-main-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Skeleton card for wishlist loading */
.sb-skeleton-card {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
}

/* ============================================================
   Contact Us Page
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.sb-contact-hero {
  background: linear-gradient(135deg, var(--sb-brand) 0%, #7c6ff8 50%, #9b8afb 100%);
  padding: 5rem 0 4rem;
  text-align: center;
  color: #fff;
}

.sb-contact-hero-content {
  max-width: 40rem;
  margin: 0 auto;
}

.sb-contact-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  margin: 1rem 0 0.75rem;
  color: #fff;
}

.sb-contact-hero-subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  line-height: 1.7;
}

/* ── Contact Cards ────────────────────────────────────────── */
.sb-contact-cards-section {
  padding: 4rem 0;
  margin-top: -2rem;
}

.sb-contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 28rem;
  margin: 0 auto;
}

.sb-contact-card {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-top: 3px solid var(--sb-brand);
  border-radius: var(--sb-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--sb-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
}

.sb-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-lg);
}

.sb-contact-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--sb-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.sb-contact-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.sb-contact-card-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--sb-fg);
}

.sb-contact-card-detail {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sb-brand);
  margin-bottom: 0.25rem;
}

.sb-contact-card-note {
  font-size: 0.8125rem;
  color: var(--sb-muted);
}

/* ── Why SoftBazaar + Form Placeholder ────────────────────── */
.sb-contact-body-section {
  padding: 2rem 0 4rem;
}

.sb-contact-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.sb-contact-why-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--sb-fg);
}

.sb-contact-why-text {
  color: var(--sb-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

.sb-contact-why-points {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sb-contact-why-point {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.sb-contact-why-point-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: var(--sb-radius-full);
  background: var(--sb-brand-light);
  color: var(--sb-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

.sb-contact-why-point-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

.sb-contact-why-point strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
  color: var(--sb-fg);
}

.sb-contact-why-point p {
  font-size: 0.8125rem;
  color: var(--sb-muted);
  line-height: 1.5;
}

/* Form placeholder card */
.sb-contact-form-card {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-xl);
  overflow: hidden;
}

.sb-contact-form-inner {
  padding: 3rem 2rem;
  text-align: center;
}

.sb-contact-form-icon-wrap {
  width: 4rem;
  height: 4rem;
  border-radius: var(--sb-radius-full);
  background: var(--sb-brand-light);
  color: var(--sb-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.sb-contact-form-icon-wrap svg {
  width: 1.75rem;
  height: 1.75rem;
}

.sb-contact-form-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--sb-fg);
}

.sb-contact-form-desc {
  color: var(--sb-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

.sb-contact-form-inner .sb-btn {
  display: inline-flex;
  gap: 0.5rem;
}

.sb-contact-form-inner .sb-btn svg {
  width: 1rem;
  height: 1rem;
}

/* ── FAQ Section ──────────────────────────────────────────── */
.sb-contact-faq-section {
  padding: 4rem 0;
  background: var(--sb-surface);
}

.sb-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}

.sb-faq-item {
  background: var(--sb-bg);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 1.5rem;
}

.sb-faq-question {
  font-family: 'Syne', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sb-fg);
  margin-bottom: 0.5rem;
}

.sb-faq-answer {
  font-size: 0.875rem;
  color: var(--sb-muted);
  line-height: 1.7;
}

/* ── Contact Page Responsive ──────────────────────────────── */
@media (max-width: 767px) {
  .sb-contact-hero {
    padding: 3.5rem 0 3rem;
  }

  .sb-contact-hero-title {
    font-size: 2rem;
  }

  .sb-contact-hero-subtitle {
    font-size: 1rem;
  }

  .sb-contact-cards-grid {
    grid-template-columns: 1fr;
  }

  .sb-contact-body-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .sb-faq-grid {
    grid-template-columns: 1fr;
  }

  .sb-contact-form-inner {
    padding: 2rem 1.5rem;
  }
}