:root { --shop-accent: #ff4d3d; /* marketplace red-orange, distinct from the admin navy/teal */ --shop-accent-dark: #e13a2b; --shop-accent-light: #fff1ee; --shop-ink: #1c1c22; --shop-ink-soft: #5b5f66; --shop-chrome: #1c1c22; /* fixed dark surface for header/buttons/toasts — intentionally NOT overridden in dark mode below */ --shop-line: #ecebe9; --shop-bg: #f6f5f3; --shop-card: #ffffff; --shop-whatsapp: #25d366; --shop-whatsapp-dark: #1ebc59; --shop-radius: 12px; --shop-font-display: 'Poppins', 'Segoe UI', sans-serif; --shop-font-body: 'Inter', 'Segoe UI', sans-serif; } /* ---------- Dark mode ---------- Toggled by setting data-bs-theme="dark" on (shared with the admin pages via the same 'sellme-standed-theme' localStorage key). Bootstrap re-themes its own components automatically; we only need to override our custom --shop-* variables so the rest of this page follows along. */ [data-bs-theme="dark"] { --shop-accent-dark: #ff7a68; /* brighter than the light-mode value, which was tuned for white cards */ --shop-accent-light: #40241f; --shop-ink: #f3f4f6; --shop-ink-soft: #b7bac1; --shop-line: #42454d; --shop-bg: #16171b; --shop-card: #1f2126; } [data-bs-theme="dark"] .shop-search input { background: #26282e; color: #eef0f2; } [data-bs-theme="dark"] .shop-search input::placeholder { color: #9599a1; } [data-bs-theme="dark"] .cat-strip { background: var(--shop-card); border-color: var(--shop-line); } [data-bs-theme="dark"] .cat-chip { background: var(--shop-card); border-color: var(--shop-line); color: var(--shop-ink-soft); } [data-bs-theme="dark"] .cat-chip:hover { color: var(--shop-accent-dark); } [data-bs-theme="dark"] .sort-select, [data-bs-theme="dark"] .btn-clear-filters, [data-bs-theme="dark"] .btn-load-more { background: var(--shop-card); color: var(--shop-ink); border-color: var(--shop-line); } [data-bs-theme="dark"] .product-thumb, [data-bs-theme="dark"] .pm-image, [data-bs-theme="dark"] .cart-line-thumb { background: #16171b; } [data-bs-theme="dark"] .product-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,0.4); } [data-bs-theme="dark"] .qty-stepper, [data-bs-theme="dark"] .cart-qty-stepper { border-color: var(--shop-line); } [data-bs-theme="dark"] .qty-stepper input { background: transparent; color: var(--shop-ink); } [data-bs-theme="dark"] .pm-qty-row button, [data-bs-theme="dark"] .cart-qty-stepper button { color: var(--shop-ink); } [data-bs-theme="dark"] .skeleton-line { background: linear-gradient(90deg, #26282e 25%, #303338 37%, #26282e 63%); background-size: 400% 100%; } /* ---------- Theme toggle button ---------- */ .theme-toggle-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 34px; height: 34px; border-radius: 999px; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; } .theme-toggle-btn:hover { background: var(--shop-accent); border-color: var(--shop-accent); color: #fff; } * { box-sizing: border-box; } body { background: var(--shop-bg); color: var(--shop-ink); font-family: var(--shop-font-body); margin: 0; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } /* ---------- Top bar ---------- */ .shop-topbar { position: sticky; top: 0; z-index: 1030; background: var(--shop-chrome); border-bottom: 3px solid var(--shop-accent); } .shop-topbar-inner { max-width: 1320px; margin: 0 auto; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 1rem; } .cat-toggle-btn { background: none; border: none; color: #fff; font-size: 1.4rem; padding: 0 0.25rem; } .shop-logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--shop-font-display); font-weight: 700; font-size: 1.3rem; color: #fff; white-space: nowrap; } .shop-logo-mark { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .shop-logo-accent { color: var(--shop-accent); font-weight: 500; } .shop-search { flex: 1 1 auto; max-width: 640px; display: flex; background: #fff; border-radius: 999px; overflow: hidden; } .shop-search input { flex: 1; border: none; outline: none; padding: 0.6rem 1.1rem; font-size: 0.92rem; font-family: var(--shop-font-body); } .shop-search button { border: none; background: var(--shop-accent); color: #fff; padding: 0 1.15rem; font-size: 1rem; } .shop-search button:hover { background: var(--shop-accent-dark); } .shop-topbar-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .staff-link { color: #e3e5e9; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.35rem; } .staff-link:hover { color: #fff; } .cart-btn { position: relative; background: none; border: none; color: #fff; font-size: 1.35rem; } .cart-count { position: absolute; top: -6px; right: -10px; background: var(--shop-accent); color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ---------- Category strip (mobile-visible quick filter) ---------- */ .cat-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem 1rem; background: #fff; border-bottom: 1px solid var(--shop-line); position: sticky; top: 51px; z-index: 1020; scrollbar-width: none; } .cat-strip::-webkit-scrollbar { display: none; } .cat-chip { flex: none; border: 1px solid var(--shop-line); background: #fff; color: var(--shop-ink-soft); padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; white-space: nowrap; } .cat-chip.active, .cat-chip:hover { border-color: var(--shop-accent); color: var(--shop-accent-dark); background: var(--shop-accent-light); } .cat-chip.active { background: var(--shop-accent); color: #fff; } /* ---------- Hero slideshow (16:9) ---------- */ .shop-hero-wrap { max-width: 1320px; margin: 1rem auto 0; padding: 0 1rem; } .shop-hero-carousel { aspect-ratio: 12 / 2; border-radius: var(--shop-radius); overflow: hidden; background: var(--shop-line); } .shop-hero-carousel .carousel-inner, .shop-hero-carousel .carousel-item { height: 100%; } .shop-hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; } .shop-hero-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 999px; background-color: #fff; opacity: 0.6; margin: 0 4px; } .shop-hero-carousel .carousel-indicators .active { opacity: 1; } @media (max-width: 575.98px) { .shop-hero-wrap { margin-top: 0.5rem; padding: 0 0.75rem; } } /* ---------- Layout ---------- */ .shop-layout { max-width: 1320px; margin: 0 auto; padding: 1.25rem 1rem 3rem; display: grid; grid-template-columns: 250px 1fr; gap: 1.25rem; align-items: start; } @media (max-width: 991.98px) { .shop-layout { grid-template-columns: 1fr; } } /* ---------- Sidebar ---------- */ .shop-sidebar { background: var(--shop-card); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); padding: 1.1rem; position: sticky; top: 100px; } .sidebar-close { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; } .sidebar-close button { background: none; border: none; font-size: 1.2rem; } .sidebar-title { font-family: var(--shop-font-display); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--shop-ink-soft); margin-bottom: 0.6rem; } .sidebar-block { margin-bottom: 1.4rem; } .sidebar-block:last-of-type { margin-bottom: 1rem; } .category-tree { font-size: 0.9rem; } .cat-node { margin-bottom: 0.15rem; } .cat-node-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; border-radius: 8px; cursor: pointer; color: var(--shop-ink); } .cat-node-row:hover { background: var(--shop-accent-light); } .cat-node-row.active { background: var(--shop-accent); color: #fff; font-weight: 600; } .cat-node-row.active .cat-caret { color: #fff; } .cat-node-row .cat-caret { margin-left: auto; font-size: 0.7rem; color: var(--shop-ink-soft); transition: transform .15s ease; } .cat-node-row .cat-caret.open { transform: rotate(90deg); } .cat-sub-list { padding-left: 1.15rem; display: none; } .cat-sub-list.open { display: block; } .cat-sub-row { padding: 0.32rem 0.5rem; border-radius: 8px; font-size: 0.85rem; color: var(--shop-ink-soft); cursor: pointer; } .cat-sub-row:hover { background: var(--shop-accent-light); color: var(--shop-accent-dark); } .cat-sub-row.active { background: var(--shop-accent); color: #fff; } .brand-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 220px; overflow-y: auto; } .brand-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.87rem; cursor: pointer; } .brand-check input { accent-color: var(--shop-accent); } .btn-clear-filters { width: 100%; border: 1px solid var(--shop-line); background: #fff; color: var(--shop-ink-soft); border-radius: 8px; padding: 0.5rem; font-size: 0.85rem; } .btn-clear-filters:hover { border-color: var(--shop-accent); color: var(--shop-accent-dark); } .sidebar-backdrop { display: none; } @media (max-width: 991.98px) { .shop-sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 300px; max-width: 85vw; z-index: 1060; border-radius: 0; overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; } .shop-sidebar.open { transform: translateX(0); } .sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1055; } } /* ---------- Results / grid ---------- */ .results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; flex-wrap: wrap; gap: 0.5rem; } .results-count { font-size: 0.88rem; color: var(--shop-ink-soft); } .sort-select { border: 1px solid var(--shop-line); border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.85rem; background: #fff; color: var(--shop-ink); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; } .product-card { background: var(--shop-card); border: 1px solid var(--shop-line); border-radius: var(--shop-radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; } .product-card:hover { box-shadow: 0 10px 24px rgba(28,28,34,0.08); transform: translateY(-2px); } .product-thumb { aspect-ratio: 1 / 1; background: #fafafa; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .product-thumb img { width: 100%; height: 100%; object-fit: cover; } .product-thumb .placeholder-icon { font-size: 2.2rem; color: #d8d6d2; } .stock-badge { position: absolute; top: 8px; left: 8px; background: var(--shop-accent); color: #fff; font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; } .product-info { padding: 0.65rem 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.25rem; flex-grow: 1; } .product-name { font-size: 0.86rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; } .product-brand { font-size: 0.72rem; color: var(--shop-ink-soft); } .product-price-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; } /* Koko Pay line — the koko1.png logo carries the brand colour already, so this stays plain text with no extra background/colour highlight. */ .koko-pay-line { margin-top: 4px; font-family: var(--shop-font-body); font-size: 0.75rem; font-weight: 600; color: var(--shop-ink-soft); display: inline-flex; align-items: center; gap: 5px; width: fit-content; } .koko-pay-line img { height: 14px; width: auto; display: block; } .pm-koko-line { margin-top: 6px; margin-bottom: 10px; font-size: 0.85rem; } .pm-koko-line img { height: 18px; } .product-price { font-family: var(--shop-font-display); font-weight: 600; color: var(--shop-accent-dark); font-size: 1rem; } .add-cart-mini { border: none; background: var(--shop-chrome); color: #fff; width: 30px; height: 30px; border-radius: 999px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .add-cart-mini:hover { background: var(--shop-accent); } .empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--shop-ink-soft); } .empty-state i { font-size: 2.4rem; margin-bottom: 0.75rem; display: block; } .load-more-wrap { text-align: center; margin-top: 1.75rem; } .btn-load-more { border: 1px solid var(--shop-accent); color: var(--shop-accent-dark); background: #fff; padding: 0.55rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; } .btn-load-more:hover { background: var(--shop-accent); color: #fff; } .skeleton-line { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; margin-bottom: 0.5rem; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ---------- Product modal ---------- */ .shop-modal-content { border-radius: var(--shop-radius); border: none; overflow: hidden; } .pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (max-width: 575.98px) { .pm-grid { grid-template-columns: 1fr; } } .pm-image { background: #fafafa; display: flex; align-items: center; justify-content: center; min-height: 260px; } .pm-image img { width: 100%; height: 100%; object-fit: cover; } .pm-image .placeholder-icon { font-size: 3.5rem; color: #d8d6d2; } .pm-body { padding: 1.4rem; display: flex; flex-direction: column; } .pm-brand { font-size: 0.78rem; color: var(--shop-ink-soft); text-transform: uppercase; letter-spacing: .04em; } .pm-name { font-family: var(--shop-font-display); font-size: 1.2rem; font-weight: 600; margin: 0.2rem 0 0.5rem; } .pm-price { font-family: var(--shop-font-display); font-size: 1.5rem; font-weight: 700; color: var(--shop-accent-dark); } .pm-meta { font-size: 0.8rem; color: var(--shop-ink-soft); margin: 0.5rem 0 0.8rem; } .pm-desc { font-size: 0.87rem; color: var(--shop-ink); line-height: 1.5; margin-bottom: 1rem; } .pm-qty-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; } .qty-stepper { display: flex; align-items: center; border: 1px solid var(--shop-line); border-radius: 8px; } .qty-stepper button { border: none; background: none; width: 32px; height: 32px; font-size: 1rem; } .qty-stepper input { width: 42px; border: none; text-align: center; font-size: 0.9rem; } .pm-actions { margin-top: auto; display: flex; gap: 0.6rem; } .btn-add-cart { flex: 1; background: var(--shop-chrome); color: #fff; border: none; border-radius: 999px; padding: 0.65rem; font-weight: 600; font-size: 0.9rem; } .btn-add-cart:hover { background: var(--shop-accent); } /* ---------- Cart offcanvas ---------- */ .shop-cart-offcanvas { width: 380px; max-width: 92vw; } .cart-items { overflow-y: auto; } .cart-line { display: flex; gap: 0.7rem; padding: 0.75rem 0; border-bottom: 1px solid var(--shop-line); } .cart-line-thumb { width: 56px; height: 56px; border-radius: 8px; background: #fafafa; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .cart-line-thumb img { width: 100%; height: 100%; object-fit: cover; } .cart-line-thumb i { color: #d8d6d2; font-size: 1.3rem; } .cart-line-body { flex: 1; min-width: 0; } .cart-line-name { font-size: 0.85rem; font-weight: 500; line-height: 1.3; } .cart-line-brand { font-size: 0.72rem; color: var(--shop-ink-soft); } .cart-line-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 0.35rem; } .cart-line-price { font-size: 0.85rem; font-weight: 600; color: var(--shop-accent-dark); } .cart-qty-stepper { display: flex; align-items: center; border: 1px solid var(--shop-line); border-radius: 6px; } .cart-qty-stepper button { border: none; background: none; width: 24px; height: 24px; font-size: 0.8rem; line-height: 1; } .cart-qty-stepper span { width: 26px; text-align: center; font-size: 0.8rem; display: inline-block; } .cart-line-remove { background: none; border: none; color: var(--shop-ink-soft); font-size: 0.95rem; } .cart-line-remove:hover { color: var(--shop-accent); } .cart-empty { text-align: center; padding: 3rem 1rem; color: var(--shop-ink-soft); } .cart-empty i { font-size: 2.2rem; margin-bottom: 0.6rem; display: block; } .cart-summary { padding-top: 0.9rem; border-top: 1px solid var(--shop-line); } .cart-total-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--shop-font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.6rem; } .cart-note { font-size: 0.76rem; color: var(--shop-ink-soft); line-height: 1.4; margin-bottom: 0.8rem; } .btn-whatsapp-checkout { width: 100%; border: none; background: var(--shop-whatsapp); color: #fff; padding: 0.75rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-whatsapp-checkout:hover { background: var(--shop-whatsapp-dark); } /* ---------- Checkout: Koko Pay question ---------- */ .checkout-koko-block { border: 1px solid var(--shop-line); border-radius: 10px; padding: 0.75rem 0.85rem; margin-top: 0.25rem; } .checkout-koko-logo { height: 16px; width: auto; display: inline-block; } /* ---------- Toasts ---------- */ .toast-stack { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.5rem; } .shop-toast { background: var(--shop-chrome); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.85rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); display: flex; align-items: center; gap: 0.5rem; animation: toastIn .18s ease; } .shop-toast i { color: var(--shop-accent); } @keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }