:root {
      --bg: #fafafa;
      --text: #0a0a0a;
      --primary: #2563eb;
      --border: #e4e4e7;
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui;
      background: var(--bg);
      color: var(--text);
    } 

    .btn { transition: transform 0.05s ease, box-shadow 0.15s ease; }
    .btn:active { transform: translateY(1px); }
    .theme-border { border-color: var(--border); }

    /* Card styles */
    .theme-card {
      background: #ffffff;
      border-radius: 1.25rem;
      border: 1px solid rgba(148, 163, 184, 0.55);
      box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.06),
        0 1px 0 rgba(148, 163, 184, 0.25);
      overflow: hidden;
      position: relative;
      transition:
        transform 0.18s ease,
        box-shadow 0.22s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
    }
    .theme-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      border: 1px solid rgba(255, 255, 255, 0.6);
      mix-blend-mode: soft-light;
    }
    .theme-card:hover {
      transform: translateY(-4px);
      box-shadow:
        0 26px 60px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(37, 99, 235, 0.35);
      border-color: rgba(37, 99, 235, 0.55);
      background-color: #f9fafb;
    }

    .icon-btn {
      width: 38px; height: 38px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 0.75rem;
    }

    .theme-cta { background: var(--primary); border-color: var(--primary); color: #fff; }
    .theme-cta:hover { filter: brightness(0.95); }
    .theme-cta-outline { background: #fff; border-color: var(--border); color: var(--text); }
    .theme-cta-outline:hover { background: #f6f6f6; }

    .theme-title { color: var(--text); }
    .theme-muted { color: color-mix(in oklab, var(--text), #ffffff 60%); }

    /* Product grid */
    .product-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 768px) {
      .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
      .product-grid { grid-template-columns: repeat(var(--cols-desktop, 4), minmax(0, 1fr)); }
    }

    .prod-img-wrap {
      aspect-ratio: 4 / 3;
      padding: 14px 18px;
      box-sizing: border-box;
      background: #f7f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .prod-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: 55% 50%;
      background: transparent;
      border-bottom: 0;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .2rem .55rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.45);
      background: rgba(241,245,249,.65);
      font-size: .75rem;
      line-height: 1;
      white-space: nowrap;
    }

    /* ✅ Mobile text fix helpers */
    .prod-top { display: flex; flex-direction: column; gap: .35rem; }
    @media (min-width: 640px) {
      .prod-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: .75rem; }
    }
    .prod-title {
      font-weight: 800;
      font-size: .95rem;
      line-height: 1.15;
      letter-spacing: -0.01em;
      overflow-wrap: anywhere;
      word-break: normal;
    }
    .prod-price {
      font-weight: 800;
      font-size: .95rem;
      line-height: 1.15;
      white-space: nowrap;
      align-self: flex-start;
    }
    @media (min-width: 640px) {
      .prod-price { text-align: right; }
    }

    /* Title style */
    #pageTitle { letter-spacing: -0.02em; }
    .title-style-a {
      background: linear-gradient(90deg,
        color-mix(in srgb, var(--text) 92%, #ffffff 8%),
        color-mix(in srgb, var(--primary) 80%, #000000 20%),
        color-mix(in srgb, var(--text) 92%, #ffffff 8%)
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 1px 0 rgba(255,255,255,0.75);
    }
    .title-style-b {
      color: var(--text);
      text-shadow:
        -1px -1px 0 rgba(255,255,255,0.85),
        1px -1px 0 rgba(255,255,255,0.85),
        -1px  1px 0 rgba(255,255,255,0.85),
        1px  1px 0 rgba(255,255,255,0.85),
        0 10px 24px rgba(2, 6, 23, 0.20);
    }
    .title-glow { filter: drop-shadow(0 10px 22px rgba(37,99,235,0.18)); }

    /* ✅ NEW: admin number badges */
    .admin-num-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .25rem .55rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
      font-size: .75rem;
      font-weight: 800;
      color: #0f172a;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
      pointer-events: none;
    }

    /* ✅ QC button on product cards */
    .qc-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .25rem .55rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(10px);
      font-size: .75rem;
      font-weight: 800;
      color: #0f172a;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
      cursor: pointer;
    }
    .qc-btn:hover { background: rgba(255,255,255,.95); }

    /* ✅ Favorites button */
    .fav-btn {
      position: absolute;
      top: 48px;
      right: 10px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      background: rgba(255,255,255,.92);
      font-size: .9rem;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
    }

    .fav-btn.active {
      color: #dc2626;
    }

    /* ✅ Share button under heart */
    .share-btn {
      position: absolute;
      top: 88px;
      right: 10px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.55);
      background: rgba(255,255,255,.92);
      font-size: .9rem;
      color: #0f172a;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
    }

    /* ✅ Hide share button on desktop browsers */
    @media (pointer: fine) {
      .share-btn {
        display: none !important;
      }
    }

    .fav-filter-active {
      background: #0f172a !important;
      color: #ffffff !important;
      border-color: #0f172a !important;
    }

    /* ✅ Floating favorites button */
    .floating-fav-btn {
      position: fixed;
      right: 14px;
      bottom: 18px;
      z-index: 50;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      padding: .7rem .95rem;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.18);
      background: #ffffff;
      color: #0f172a;
      font-size: .9rem;
      font-weight: 800;
      box-shadow: 0 12px 35px rgba(15,23,42,.22);
      cursor: pointer;
    }

    .floating-fav-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }

    @media (min-width: 768px) {
      .floating-fav-btn {
        bottom: 24px;
        right: 24px;
      }
    }


    .admin-num-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .12rem .5rem;
      border-radius: 999px;
      border: 1px solid rgba(37,99,235,.35);
      background: rgba(37,99,235,.08);
      color: rgba(15,23,42,.9);
      font-size: .75rem;
      font-weight: 800;
      line-height: 1;
    }
  
/* ===== CLEAN NIGHT MODE ===== */

body.dark-mode,
body.dark-mode main,
body.dark-mode header,
body.dark-mode footer {
  background: #0b1120 !important;
  color: #f8fafc !important;
}

body.dark-mode .theme-card,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .icon-btn,
body.dark-mode .theme-cta-outline,
body.dark-mode .floating-fav-btn,
body.dark-mode #darkModeBtn,
body.dark-mode #favFilterBtn,
body.dark-mode #clearBtn,
body.dark-mode a.bg-white,
body.dark-mode button.bg-white {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.dark-mode .prod-img {
  background: #0f172a !important;
}

body.dark-mode .pill {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

body.dark-mode .theme-muted {
  color: #94a3b8 !important;
}

body.dark-mode .theme-title,
body.dark-mode #pageTitle {
  color: #f8fafc !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow: none !important;
  filter: none !important;
}

body.dark-mode .qc-btn,
body.dark-mode .fav-btn,
body.dark-mode .share-btn {
  background: rgba(15,23,42,.96) !important;
  color: #f8fafc !important;
  border-color: #475569 !important;
}

body.dark-mode i,
body.dark-mode .icon-btn i,
body.dark-mode #socials i {
  color: #f8fafc !important;
}

body.dark-mode .fav-filter-active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

#darkModeBtn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #0f172a;
  font-size: 1rem;
  cursor: pointer;
}

body.dark-mode #darkModeBtn {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}


/* Fix favorite heart active color in night mode */
body.dark-mode .fav-btn.active,
body.dark-mode .fav-btn.active i {
  color: #ef4444 !important;
}

body.dark-mode .fav-btn {
  background: rgba(15,23,42,.96) !important;
  border-color: #475569 !important;
}


/* Search button beside search input */
#searchGoBtn{
  min-width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Search icon dark mode fix */
body.dark-mode #searchGoBtn{
  background: rgba(15,23,42,.96) !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

body.dark-mode #searchGoBtn i{
  color: #f8fafc !important;
}


#backTopBtn {
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .7rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.18);
  background: #ffffff;
  color: #0f172a;
  font-size: .9rem;
  font-weight: 800;
  box-shadow: 0 12px 35px rgba(15,23,42,.22);
  cursor: pointer;
}

body.dark-mode #backTopBtn,
body.dark-mode #emptyState {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.dark-mode #emptyState .font-semibold {
  color: #f8fafc !important;
}

body.admin-mode #adminPanel {
  display: block !important;
}