/* ========================================================================== THEME: Cibazaar (SL-Computers blueprint, Step 6 Phase B) -------------------------------------------------------------------------- Visual port of slcomputers.nl. Loaded by shop/includes/header.php only when the active shop theme is "cibazaar" — non-cibazaar shops never download it. Why a separate file? - Keeps `input.css` (Tailwind) lean: ~180 lines fewer. - Themes are interchangeable: switching theme reloads a different stylesheet instead of carrying every theme's overrides in one big bundle. - Self-hosted webfonts (Lexend + Jost) only ship to visitors who actually see the cibazaar look. Self-hosted Lexend + Jost - Files must live under `/assets/fonts/lexend/` and `/assets/fonts/jost/`. - See `/assets/fonts/cibazaar.README.md` for download instructions. - When the woff2 files are absent the @font-face simply falls through to the next font in the stack (Inter → system-ui), so the theme stays usable even before fonts are deployed. Tailwind variables we reuse - `var(--color-blue-600)` etc. are emitted by Tailwind into the global `:root` so they remain reachable from this static stylesheet. - The `--shop-*` variables are declared by the base `[data-shop-theme]` block in input.css; we override the ones that need a Cibazaar value here. ========================================================================== */ /* --- Self-hosted webfonts ----------------------------------------------- */ @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/lexend/Lexend-Regular.woff2') format('woff2'); } @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/lexend/Lexend-Medium.woff2') format('woff2'); } @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/lexend/Lexend-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/lexend/Lexend-Bold.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jost/Jost-Medium.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jost/Jost-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/jost/Jost-Bold.woff2') format('woff2'); } /* --- Token block (light) ------------------------------------------------ We override BOTH `--shop-*` tokens (used by the small set of `.shop-*` utilities) AND the global `--app-*` tokens (used by *every* Tailwind utility on the storefront — `bg-app-surface`, `text-app-text`, `border-app-border`, `bg-app-primary`, …). Overriding only the shop tokens would not be enough because most existing pages use the app-token utilities. Because `data-shop-theme` only ever lives on shop ``, re-mapping app-tokens here cannot bleed into admin/portal pages. */ [data-shop-theme="cibazaar"] { /* shop tokens (used by .shop-spec-table, .btn-primary overrides, etc.) */ --shop-primary: #3a7af5; --shop-primary-hover: #285ec7; --shop-primary-soft-bg: #f8fafd; --shop-accent: #3a7af5; --shop-link: #3a7af5; --shop-link-hover: #285ec7; --shop-text: #212121; --shop-text-secondary: #454545; --shop-text-muted: #666666; --shop-divider-light: #f5f5f5; --shop-border: #eeeeee; --shop-border-soft: #eaeaea; --shop-surface: #ffffff; --shop-surface-alt: #f8f9fa; --shop-surface-hover: #eef5ff; --shop-danger: #dc3545; --shop-danger-hover: #bd2130; --shop-card-radius: 12px; --shop-control-radius: 8px; --shop-card-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); --shop-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.06); --shop-button-glow: 0 4px 12px rgba(58, 122, 245, 0.3); /* Sale-badge (Spotlight deals tab + future smartproducts_tabs sale icon). */ --shop-sale-from: #8549e3; --shop-sale-to: #6935b8; /* Cibazaar signature dark CTA (used on auth-card submit, see below). */ --cibazaar-cta-bg: #212121; --cibazaar-cta-bg-hover: #000000; --shop-hero-from: #f8fafd; --shop-hero-via: #ffffff; --shop-hero-to: #eef5ff; --shop-effect-emoji: ''; /* App-tokens — these power EVERY `bg-app-*`, `text-app-*`, `border-app-*` Tailwind utility on the storefront. Rewriting them here gives the whole page the Cibazaar palette without touching individual templates. */ --app-bg: #ffffff; --app-surface: #ffffff; --app-surface-alt: #f8f9fa; --app-text: #212121; --app-text-secondary: #454545; --app-text-muted: #666666; --app-text-label: #888888; --app-border: #eeeeee; --app-border-light: #f5f5f5; --app-primary: #3a7af5; --app-primary-hover: #285ec7; --app-hover-row: #f8fafd; --app-input-bg: #ffffff; --app-header-bg: #ffffff; --app-header-border: #eeeeee; } /* --- Token block (dark) ------------------------------------------------- */ html.dark[data-shop-theme="cibazaar"] { --shop-primary: #5a93ff; --shop-primary-hover: #3a7af5; --shop-primary-soft-bg: oklch(0.27 0.05 250); --shop-text: #f1f5f9; --shop-text-secondary: #cbd5e1; --shop-text-muted: #94a3b8; --shop-divider-light: oklch(0.25 0.02 250); --shop-border: oklch(0.30 0.02 250); --shop-border-soft: oklch(0.28 0.02 250); --shop-surface: oklch(0.20 0.02 250); --shop-surface-alt: oklch(0.17 0.02 250); --shop-surface-hover: oklch(0.27 0.06 250); --shop-card-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); --shop-card-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.35); --shop-button-glow: 0 4px 12px rgba(90, 147, 255, 0.4); --cibazaar-cta-bg: #0f172a; --cibazaar-cta-bg-hover: #1e293b; --shop-hero-from: oklch(0.20 0.04 250); --shop-hero-via: oklch(0.17 0.02 250); --shop-hero-to: oklch(0.22 0.06 250); /* App-token dark overrides — slate-tinted blue surfaces, brighter blue primary so contrast against the dark surface stays accessible. */ --app-bg: oklch(0.18 0.02 250); --app-surface: oklch(0.20 0.02 250); --app-surface-alt: oklch(0.17 0.02 250); --app-text: #f1f5f9; --app-text-secondary: #cbd5e1; --app-text-muted: #94a3b8; --app-text-label: #64748b; --app-border: oklch(0.30 0.02 250); --app-border-light: oklch(0.25 0.02 250); --app-primary: #5a93ff; --app-primary-hover: #3a7af5; --app-hover-row: oklch(0.27 0.06 250); --app-input-bg: oklch(0.17 0.02 250); --app-header-bg: oklch(0.20 0.02 250); --app-header-border: oklch(0.28 0.02 250); } /* --- Font assignment via body class ------------------------------------- We previously expressed this as a Tailwind `@utility font-cibazaar`. With the per-theme split that is no longer needed: the body simply gets the class `.shop-theme-cibazaar` and we apply the font here. Falls back through Inter → system-ui so pages stay readable even when the woff2 files have not been uploaded yet. */ body.shop-theme-cibazaar, .shop-theme-cibazaar { font-family: 'Lexend', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Optional accent font for headings/numerics. Apply via class `.font-cibazaar-accent` (kept compatible with the previous utility name). */ .shop-theme-cibazaar .font-cibazaar-accent, [data-shop-theme="cibazaar"] .font-cibazaar-accent { font-family: 'Jost', 'Inter', system-ui, -apple-system, sans-serif; } /* The site-wide display font (Manrope) is assigned centrally in input.css to the `text-display` helper and to every heading utility (FONT-ROLE MAPPING block). On Cibazaar we re-point those same heading classes to the theme's own Jost accent so the SL-Computers identity is preserved. Data/mono values are intentionally left on JetBrains Mono (monospace codes are theme-neutral). Keep this list in sync with the headings group in input.css. */ [data-shop-theme="cibazaar"] .text-display, [data-shop-theme="cibazaar"] .page-title, [data-shop-theme="cibazaar"] .section-title, [data-shop-theme="cibazaar"] .app-info-hero-title, [data-shop-theme="cibazaar"] .app-info-section-title, [data-shop-theme="cibazaar"] .app-info-service-title, [data-shop-theme="cibazaar"] .app-info-b2b-title, [data-shop-theme="cibazaar"] .app-info-footer-heading, [data-shop-theme="cibazaar"] .shop-megamenu-pane-title, [data-shop-theme="cibazaar"] .shop-megamenu-pane-title-wide, [data-shop-theme="cibazaar"] .shop-account-maintenance-title, [data-shop-theme="cibazaar"] .shop-mobile-nav-summary-title, [data-shop-theme="cibazaar"] .shop-cart-accordion-title, [data-shop-theme="cibazaar"] .shop-checkout-account-option-title, [data-shop-theme="cibazaar"] .shop-home-slideshow-caption-title, [data-shop-theme="cibazaar"] .shop-home-section-title, [data-shop-theme="cibazaar"] .shop-google-reviews-title, [data-shop-theme="cibazaar"] .shop-addresses-edit-title, [data-shop-theme="cibazaar"] .shop-repair-track-title, [data-shop-theme="cibazaar"] .shop-repair-track-detail-title, [data-shop-theme="cibazaar"] .shop-repair-track-section-title, [data-shop-theme="cibazaar"] .shop-footer-heading-body, [data-shop-theme="cibazaar"] .shop-cookie-banner-title { font-family: 'Jost', 'Lexend', 'Inter', system-ui, -apple-system, sans-serif; } /* --- Buttons ------------------------------------------------------------ */ [data-shop-theme="cibazaar"] .btn-primary, [data-shop-theme="cibazaar"] button[type="submit"]:not(.btn-secondary):not(.btn-row-action-blue):not(.btn-row-action-red):not(.btn-row-action-amber):not(.btn-link):not(.shop-btn-not-primary) { background-color: var(--shop-primary); border-color: var(--shop-primary); color: #ffffff; border-radius: var(--shop-control-radius); transition: background-color .15s ease, box-shadow .2s ease, transform .15s ease; } [data-shop-theme="cibazaar"] .btn-primary:hover, [data-shop-theme="cibazaar"] button[type="submit"]:not(.btn-secondary):not(.btn-row-action-blue):not(.btn-row-action-red):not(.btn-row-action-amber):not(.btn-link):not(.shop-btn-not-primary):hover { background-color: var(--shop-primary-hover); border-color: var(--shop-primary-hover); box-shadow: var(--shop-button-glow); transform: translateY(-1px); } /* --- Cards -------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .card { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); transition: box-shadow .25s ease, transform .15s ease; } [data-shop-theme="cibazaar"] .card:hover { box-shadow: var(--shop-card-shadow-hover); } /* --- Auth pages (login / register / forgot / reset / verify / pending) The wrapper is `.shop-auth-card` (added on those pages). On Cibazaar we override the base submit-button to the signature dark CTA. */ [data-shop-theme="cibazaar"] .shop-auth-card { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-auth-card button.shop-account-auth-submit { background-color: var(--cibazaar-cta-bg); border-color: var(--cibazaar-cta-bg); color: #ffffff; } [data-shop-theme="cibazaar"] .shop-auth-card button.shop-account-auth-submit:hover { background-color: var(--cibazaar-cta-bg-hover); border-color: var(--cibazaar-cta-bg-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); transform: translateY(-1px); } /* --- Modern spec-table look (used on /shop/product.php) Hooks added to product.php: .shop-spec-card → outer wrapper .shop-spec-table → .shop-spec-row → .shop-spec-attr →
attribute cell .shop-spec-val → value cell */ [data-shop-theme="cibazaar"] .shop-spec-card { border-radius: var(--shop-control-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-spec-table .shop-spec-attr { width: 35%; background-color: var(--shop-surface-alt); color: var(--shop-text-secondary); font-weight: 600; } [data-shop-theme="cibazaar"] .shop-spec-table .shop-spec-row:hover { background-color: var(--shop-surface-hover); } [data-shop-theme="cibazaar"] .shop-spec-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.45rem 0.75rem; margin: 0; } [data-shop-theme="cibazaar"] .shop-spec-value-item { display: grid; gap: 0.1rem; min-width: 0; padding: 0.35rem 0.55rem; border: 1px solid var(--shop-border); border-radius: 0.75rem; background: color-mix(in srgb, var(--shop-surface) 88%, var(--shop-surface-alt)); } [data-shop-theme="cibazaar"] .shop-spec-value-item dt { color: var(--shop-text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } [data-shop-theme="cibazaar"] .shop-spec-value-item dd { margin: 0; color: var(--shop-text); font-size: 0.86rem; font-weight: 700; line-height: 1.35; } @media (max-width: 640px) { [data-shop-theme="cibazaar"] .shop-spec-table, [data-shop-theme="cibazaar"] .shop-spec-table tbody, [data-shop-theme="cibazaar"] .shop-spec-table tr, [data-shop-theme="cibazaar"] .shop-spec-table th, [data-shop-theme="cibazaar"] .shop-spec-table td { display: block; width: 100%; } [data-shop-theme="cibazaar"] .shop-spec-table .shop-spec-attr { width: 100%; padding-bottom: 0.35rem; } [data-shop-theme="cibazaar"] .shop-spec-table .shop-spec-val { padding-top: 0.35rem; } } /* Backwards-compatible selectors for older spec-table markup. */ [data-shop-theme="cibazaar"] .spec-table tbody tr:hover, [data-shop-theme="cibazaar"] table.spec-table tbody tr:hover, [data-shop-theme="cibazaar"] .product-specs tr:hover { background-color: var(--shop-surface-hover); } /* --- Subtle hover-bg on links + nav items inside the shop --------------- */ [data-shop-theme="cibazaar"] .shop-nav-item:hover, [data-shop-theme="cibazaar"] a.shop-link:hover { background-color: var(--shop-primary-soft-bg); color: var(--shop-primary-hover); } /* --- Hero gradient ------------------------------------------------------ */ [data-shop-theme="cibazaar"] .shop-hero-bg { background: linear-gradient(135deg, var(--shop-hero-from), var(--shop-hero-via), var(--shop-hero-to)); } /* --- Spotlight block (tabs + cards) Hooks added in shop/index.php and shop/includes/productCard.php: [data-shop-spotlight] → outer section .shop-spotlight-tabs → tab-bar container .shop-spotlight-tab.is-active → active tab .shop-product-card → reusable card .shop-product-card-badge → top-left discount pill */ [data-shop-theme="cibazaar"] .shop-spotlight-tab { border-radius: var(--shop-control-radius) var(--shop-control-radius) 0 0; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } [data-shop-theme="cibazaar"] .shop-spotlight-tab:hover { background-color: var(--shop-primary-soft-bg); color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-spotlight-tab.is-active { color: var(--shop-primary); border-color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-product-card > a { border-radius: var(--shop-card-radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } [data-shop-theme="cibazaar"] .shop-product-card:hover > a { transform: translateY(-4px); box-shadow: var(--shop-button-glow); border-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-product-card-badge { background: linear-gradient(135deg, var(--shop-sale-from, #8549e3), var(--shop-sale-to, #6935b8)); box-shadow: 0 4px 10px rgba(133, 73, 227, 0.35); } /* --- Mega-menu (Cibazaar fly-out) Hooks added in shop/includes/header.php: [data-shop-megamenu] → outer nav .shop-megamenu-trigger → top-level button with caret .shop-megamenu-pane → flyout panel .shop-megamenu-pane-title → "View all X" header link .shop-megamenu-pane-link → child-category links Hover/click open is handled by inline JS; this CSS just polishes the look on Cibazaar (rounder pane, primary-blue accent, soft fade-in). */ [data-shop-theme="cibazaar"] .shop-megamenu-pane { border-radius: var(--shop-card-radius); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); animation: shop-megamenu-fade .15s ease-out; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-title { color: var(--shop-primary); letter-spacing: 0.18em; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-link:hover { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-megamenu-trigger[aria-expanded="true"] { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-megamenu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } @keyframes shop-megamenu-fade { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-megamenu-pane { animation: none; } } /* --- SmartProducts carousels (Cibazaar arrow + kicker styling) Hooks added in shop/index.php: [data-shop-smartproducts] → outer section .shop-smartproducts-kicker → category label kicker .shop-smartproducts-arrow → both prev/next buttons .shop-smartproducts-scroller → horizontal scroll container .shop-smartproducts-cell → each card cell */ [data-shop-theme="cibazaar"] .shop-smartproducts-kicker { color: var(--shop-primary); letter-spacing: 0.18em; } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow { border-radius: 9999px; box-shadow: var(--shop-card-shadow); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow:hover { box-shadow: var(--shop-button-glow); background-color: var(--shop-primary-soft-bg); border-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow-prev:hover { transform: translateY(-50%) translateX(-0.75rem) scale(1.05); } [data-shop-theme="cibazaar"] .shop-smartproducts-arrow-next:hover { transform: translateY(-50%) translateX(0.75rem) scale(1.05); } /* --- Newsletter popup (Cibazaar entrance animation) Hooks added in shop/includes/newsletterPopup.php: .shop-newsletter-popup → backdrop .shop-newsletter-popup-card → modal card .shop-newsletter-popup-icon → top-left envelope icon */ [data-shop-theme="cibazaar"] .shop-newsletter-popup-card { border-radius: var(--shop-card-radius); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25); animation: shop-newsletter-pop .35s cubic-bezier(.2, .9, .25, 1.05); } [data-shop-theme="cibazaar"] .shop-newsletter-popup-icon { background: linear-gradient(135deg, var(--shop-primary), #285ec7); color: #ffffff; } @keyframes shop-newsletter-pop { 0% { transform: translateY(20px) scale(.96); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-newsletter-popup-card { animation: none; } } /* --- WhatsApp bubble (Cibazaar pulse-ring) The base bubble lives in input.css; on Cibazaar we layer a soft double-ring pulse so the chat catches the eye without being noisy. Legacy single-link bubble stays fixed; multi-agent host keeps bubble in-flow so the panel anchors above it (see input.css § shop-whatsapp). */ [data-shop-theme="cibazaar"] a.shop-whatsapp-bubble { position: fixed; } [data-shop-theme="cibazaar"] .shop-whatsapp .shop-whatsapp-bubble { position: static; } [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::before, [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid rgba(37, 211, 102, 0.5); animation: shop-whatsapp-pulse 2.4s ease-out infinite; pointer-events: none; } [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::after { animation-delay: 1.2s; } @keyframes shop-whatsapp-pulse { 0% { transform: scale(1); opacity: 0.7; } 80% { transform: scale(1.45); opacity: 0; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::before, [data-shop-theme="cibazaar"] .shop-whatsapp-bubble::after { animation: none; opacity: 0; } } /* --- Account sidebar (Cibazaar list-group) Hooks added in shop/includes/accountSidebar.php: .shop-account-sidebar → outer aside .shop-account-sidebar-link → each link .is-active → active link (also has aria-current) Default styling lives in `input.css` (SECTION: SHOP CHROME) using `--shop-primary` / `--shop-primary-soft-bg` on `.is-active`. On Cibazaar we strengthen it with the brand blue + a subtle right-arrow indicator on hover, matching the SL-Computers list-group blueprint. */ [data-shop-theme="cibazaar"] .shop-account-sidebar > div { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-account-sidebar-link { position: relative; } [data-shop-theme="cibazaar"] .shop-account-sidebar-link:hover { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); } [data-shop-theme="cibazaar"] .shop-account-sidebar-link.is-active { color: var(--shop-primary); background-color: var(--shop-primary-soft-bg); border-left-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-account-sidebar-link.is-active::after { content: '›'; position: absolute; right: 1rem; color: var(--shop-primary); font-weight: 700; font-size: 1.25rem; line-height: 1; } /* --- Dashboard tiles (Cibazaar lift-on-hover) Hooks added in shop/account/dashboard.php: .shop-dashboard-tile → all tiles .shop-dashboard-tile-wishlist → wishlist variant (rose accent) */ [data-shop-theme="cibazaar"] .shop-dashboard-tile { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-dashboard-tile:hover { transform: translateY(-5px); box-shadow: var(--shop-button-glow); border-color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-dashboard-tile-wishlist:hover { /* Pink-tinted glow on the wishlist tile, matching the heart icon. */ box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25); border-color: #fb7185; } /* --- Footer (Cibazaar 4-column blueprint) The footer markup in `shop/includes/footer.php` ships a deep-slate look as default. On Cibazaar we use a softer, brand-blue tinted dark footer that matches the SL-Computers blueprint without breaking the default theme. Hooks added in footer.php: .shop-footer → outer footer .shop-footer-brand → brand name .shop-footer-heading → column titles .shop-footer-link → list anchors .shop-footer-bottom → copyright row */ [data-shop-theme="cibazaar"] .shop-footer { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); color: #cbd5e1; } [data-shop-theme="cibazaar"] .shop-footer-brand { /* Bigger, the Lexend stack carries the Cibazaar identity. */ letter-spacing: -0.01em; } [data-shop-theme="cibazaar"] .shop-footer-heading { color: var(--shop-primary); letter-spacing: 0.18em; position: relative; padding-bottom: 0.5rem; } [data-shop-theme="cibazaar"] .shop-footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--shop-primary); border-radius: 2px; } [data-shop-theme="cibazaar"] .shop-footer-link { color: #94a3b8; transition: color .15s ease, transform .15s ease; } [data-shop-theme="cibazaar"] .shop-footer-link:hover { color: #ffffff; transform: translateX(2px); } [data-shop-theme="cibazaar"] .shop-footer-bottom { border-top-color: rgba(148, 163, 184, 0.12); } /* ========================================== Cibazaar — Collage banners Hero/cards op homepage krijgen primary-tinted CTA-pill, zachte glow op hover en een iets prominenter gradient zodat tekst altijd leesbaar blijft. ========================================== */ [data-shop-theme="cibazaar"] .shop-collage-hero, [data-shop-theme="cibazaar"] .shop-collage-card { border: 1px solid rgba(99, 102, 241, 0.08); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } [data-shop-theme="cibazaar"] .shop-collage-hero:hover, [data-shop-theme="cibazaar"] .shop-collage-card:hover { transform: translateY(-3px); box-shadow: var(--shop-button-glow, 0 12px 28px rgba(37, 99, 235, 0.18)); } [data-shop-theme="cibazaar"] .shop-collage-overlay { background: linear-gradient(135deg, rgba(15, 23, 42, 0.62) 0%, rgba(37, 99, 235, 0.18) 70%, rgba(37, 99, 235, 0.05) 100%); } [data-shop-theme="cibazaar"] .shop-collage-cta { background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%); color: var(--shop-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18); } [data-shop-theme="cibazaar"] .shop-collage-hero:hover .shop-collage-cta, [data-shop-theme="cibazaar"] .shop-collage-card:hover .shop-collage-cta { box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } /* ========================================== Cibazaar — WhatsApp panel (Fase D-3) Multi-agent flyout matcht de blauwe accenten van het thema. De avatar krijgt een primary-blauwe ring, de online-pip blijft groen voor herkenbaarheid. ========================================== */ [data-shop-theme="cibazaar"] .shop-whatsapp-panel { border-radius: var(--shop-card-radius, 1rem); border-color: rgba(37, 99, 235, 0.12); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(37, 99, 235, 0.06); } [data-shop-theme="cibazaar"] .shop-whatsapp-panel-title { color: var(--shop-primary); letter-spacing: -0.005em; } [data-shop-theme="cibazaar"] .shop-whatsapp-agent a:hover { background: var(--shop-primary-soft-bg, rgba(37, 99, 235, 0.08)); } [data-shop-theme="cibazaar"] .shop-whatsapp-avatar { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); } [data-shop-theme="cibazaar"] .shop-whatsapp-status.is-online { color: #16a34a; } /* ========================================================================== Extended (3-row) header & blue category strip — Cibazaar look -------------------------------------------------------------------------- Hooks added in shop/includes/header.php (theme-agnostic, Cibazaar styles them with this brand colour set): [data-shop-header-layout="extended_3rows"] .shop-utility-bar .shop-cat-strip → outer blue band .shop-cat-strip-link → admin-curated shortcuts .shop-megamenu-pane-grouped → grouped pane variant .shop-megamenu-sidebar → 250px left list .shop-megamenu-sidebar-link → each top-level cat link .shop-megamenu-content[*] → the right-hand kicker grid .shop-megamenu-lvl2-header / .grandchildren → kicker title + sub list ========================================================================== */ /* 1. Blue category strip (extended_3rows). Markup in shop/includes/header.php places .shop-cat-strip as a full-width block under
(outside the max-w-7xl row), so the bar is already edge-to-edge — no ::before bleed (left/right -5000px) which would widen the document and cause horizontal scrollbars. */ [data-shop-theme="cibazaar"] .shop-site-header[data-shop-header-layout="extended_3rows"] .shop-cat-strip { background: #3a7af5; color: #ffffff; position: relative; z-index: 10; min-height: 45px; } /* 2. Make sure the cat-strip nav links are crisp white on the blue band. */ [data-shop-theme="cibazaar"] .shop-cat-strip .shop-megamenu-trigger, [data-shop-theme="cibazaar"] .shop-cat-strip .shop-cat-strip-link { color: #ffffff; font-weight: 500; letter-spacing: 0; text-transform: none; } [data-shop-theme="cibazaar"] .shop-cat-strip .shop-megamenu-trigger:hover, [data-shop-theme="cibazaar"] .shop-cat-strip .shop-cat-strip-link:hover { background: rgba(255, 255, 255, 0.18); } /* Open mega-menu on blue strip: the generic trigger rule uses --shop-primary-soft-bg (#f8fafc in light mode). Cat-strip still forces white text → unreadable. Use a translucent pill on the blue bar instead (same family as :hover above). */ [data-shop-theme="cibazaar"] .shop-cat-strip .shop-megamenu-trigger[aria-expanded="true"] { color: #ffffff; background-color: rgba(255, 255, 255, 0.18); } /* 3. Mega-menu pane (grouped Cibazaar variant). Pane sits right under the blue strip with a soft shadow, same border-radius family as the rest. */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped { border: 1px solid #ddd; border-top: 0; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); background: #ffffff; color: #333; } /* 4. Left sidebar in the grouped pane: light grey background, hover swaps to white so it visually merges with the right content area. */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar { background: #f4f4f4; border-right: 1px solid #eee; } [data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link { color: #333; border-bottom: 1px solid #eee; transition: background .15s ease, color .15s ease, font-weight .15s ease; } [data-shop-theme="cibazaar"] .shop-megamenu-sidebar-item:hover .shop-megamenu-sidebar-link, [data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link:focus { background: #ffffff; color: #3a7af5; font-weight: 700; } /* 5. Kicker headings inside the right pane — blue title with blue underline. */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-lvl2-header, [data-shop-theme="cibazaar"] .shop-megamenu-pane:not(.shop-megamenu-pane-grouped) .shop-megamenu-lvl2-header { color: #3a7af5; border-color: #3a7af5; font-weight: 800; } /* 6. Branded scrollbar on sidebar + content — auto-hide unless hovered. Mirrors the original Cibazaar stylesheet (lines 1932-1980). */ [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host] { scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .3s ease; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar:hover, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]:hover { scrollbar-color: #3a7af5 #f1f1f1; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar::-webkit-scrollbar, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]::-webkit-scrollbar { width: 6px; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar::-webkit-scrollbar-track, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]::-webkit-scrollbar-track { background: transparent; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar::-webkit-scrollbar-thumb, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; transition: background .3s ease-in-out; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar:hover::-webkit-scrollbar-thumb, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]:hover::-webkit-scrollbar-thumb { background: #3a7af5; border: 1px solid #f1f1f1; } [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar:hover::-webkit-scrollbar-track, [data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped [data-shop-megamenu-content-host]:hover::-webkit-scrollbar-track { background: #f1f1f1; } /* 7. Hide the blue strip below lg — mobile drawer covers categories (incl. landscape phones). */ @media (max-width: 1023px) { [data-shop-theme="cibazaar"] .shop-site-header[data-shop-header-layout="extended_3rows"] .shop-cat-strip { display: none; } [data-shop-theme="cibazaar"] .shop-catalog-category-filter-card { display: none; } } /* 8. Utility-bar (telefoon-balk) op alle thema's iets compacter; Cibazaar gebruikt een wat lichtere tint zodat het past bij de blauwe strip. */ [data-shop-theme="cibazaar"] .shop-utility-bar { background: #f8f8f8; color: #61616c; border-bottom-color: #eee; font-family: 'Jost', 'Lexend', sans-serif; text-transform: none; letter-spacing: 0; } [data-shop-theme="cibazaar"] .shop-utility-bar a { color: #212121; font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; } [data-shop-theme="cibazaar"] .shop-utility-bar a:hover, [data-shop-theme="cibazaar"] .shop-utility-bar .shop-utility-link:hover { color: #3a7af5; } /* Theme-toggle iconen (zon/scherm/maan) zitten in een groep met aparte styling. We schalen ze iets en kleuren ze grijs zodat ze niet domineren in de bar. */ [data-shop-theme="cibazaar"] .shop-utility-theme { display: inline-flex; align-items: center; gap: 4px; } [data-shop-theme="cibazaar"] .shop-utility-theme button, [data-shop-theme="cibazaar"] .shop-utility-theme [role="button"] { color: #61616c; } [data-shop-theme="cibazaar"] .shop-utility-theme button:hover { color: #3a7af5; } [data-shop-theme="cibazaar"] .shop-utility-select { color: #61616c; background: transparent; border-color: transparent; } [data-shop-theme="cibazaar"] .shop-utility-select:hover { border-color: #ddd; color: #3a7af5; } /* --- Dark mode: utility bar + grouped mega-menu (hard-coded light greys above would stay white while --app-* on the rest of the shop switches under html.dark[data-shop-theme="cibazaar"]). */ html.dark[data-shop-theme="cibazaar"] .shop-utility-bar { background: var(--app-surface-alt); color: var(--app-text-muted); border-bottom-color: var(--app-border); } html.dark[data-shop-theme="cibazaar"] .shop-utility-bar a { color: var(--app-text-secondary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-bar a:hover, html.dark[data-shop-theme="cibazaar"] .shop-utility-bar .shop-utility-link:hover { color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-theme button, html.dark[data-shop-theme="cibazaar"] .shop-utility-theme [role="button"] { color: var(--app-text-label); } html.dark[data-shop-theme="cibazaar"] .shop-utility-theme button:hover { color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-select { color: var(--app-text-secondary); } html.dark[data-shop-theme="cibazaar"] .shop-utility-select:hover { border-color: var(--app-border); color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped { border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-pane-grouped .shop-megamenu-sidebar { background: var(--app-surface-alt); border-right-color: var(--app-border); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link { color: var(--app-text-secondary); border-bottom-color: var(--app-border); } html.dark[data-shop-theme="cibazaar"] .shop-megamenu-sidebar-item:hover .shop-megamenu-sidebar-link, html.dark[data-shop-theme="cibazaar"] .shop-megamenu-sidebar-link:focus { background: var(--app-surface); color: var(--shop-primary); } /* ============================================================================ 9. CIBAZAAR ICON-PILL ROW (account / wishlist / cart) ============================================================================ Donkere ronde pills met witte iconen + gele badge rechts-bovenaan, exact zoals slcomputers.nl. Account-pill toont in twee states: "in" (donker, user ingelogd) en "out" (lichtgrijs, uitgelogd). Alleen actief op Cibazaar; andere thema's behouden de standaard "soft border" pillen uit /shop/includes/header.php. */ [data-shop-theme="cibazaar"] .shop-icon-pill { width: 40px; height: 40px; border-radius: 50%; background: #212121; color: #fff; border: none !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } [data-shop-theme="cibazaar"] .shop-icon-pill:hover { background: #000; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } [data-shop-theme="cibazaar"] .shop-icon-pill .shop-icon-pill-svg { color: #fff !important; width: 18px; height: 18px; stroke-width: 2; } /* Account-pill in 'out' state: lichtgrijs met donker icoon (zoals Cibazaar wanneer er geen sessie actief is). */ [data-shop-theme="cibazaar"] .shop-icon-pill-account-out { background: #e9e9e9; box-shadow: none; } [data-shop-theme="cibazaar"] .shop-icon-pill-account-out:hover { background: #d8d8d8; } [data-shop-theme="cibazaar"] .shop-icon-pill-account-out .shop-icon-pill-svg { color: #61616c !important; } /* Gele Cibazaar-badge ipv blauw/rose default. We overrulen kleur+positionering maar laten de min-width logic uit Tailwind staan zodat 1-3 cijfers passen. */ [data-shop-theme="cibazaar"] .shop-icon-pill-badge { background: #fada4a !important; color: #212121 !important; font-family: 'Jost', sans-serif; font-weight: 500; height: 18px; min-width: 18px; padding: 0 4px; border-radius: 50%; top: -4px; right: -4px; line-height: 18px; font-size: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* Cibazaar Portal-knop: gele "B2B Portal"-pill (matcht badge-kleur en springt eruit als CTA). Tekst donker zodat contrast op geel ok blijft. */ [data-shop-theme="cibazaar"] .shop-portal-btn { background: #fada4a !important; color: #212121 !important; font-family: 'Jost', sans-serif; font-weight: 600; border-radius: 24px; padding: 9px 18px; box-shadow: 0 2px 6px rgba(250, 218, 74, 0.35); text-transform: none; letter-spacing: 0; } [data-shop-theme="cibazaar"] .shop-portal-btn:hover { background: #f5cc1a !important; color: #000 !important; box-shadow: 0 4px 12px rgba(250, 218, 74, 0.45); } /* 10. Sticky-scrolled state: subtiele schaduw onder de header zodra de pagina een paar pixels naar beneden is gescrolld — helpt het 3-rij design te laten 'detachen' van de content. */ [data-shop-theme="cibazaar"] .shop-site-header { transition: box-shadow 0.2s ease; } [data-shop-theme="cibazaar"] .shop-site-header.is-scrolled { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); } /* ========================================================================== Product page + cart + checkout (OpenCart modern block ~2504–2718, cart ~3239) Hooks: .shop-product-page, .shop-product-breadcrumb, .shop-product-gallery-main, .shop-product-buy-box, .shop-cart-page, .shop-cart-line, .shop-checkout-* ========================================================================== */ [data-shop-theme="cibazaar"] .shop-product-breadcrumb a, [data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a, [data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a { color: #999999; transition: color 0.15s ease; } [data-shop-theme="cibazaar"] .shop-product-breadcrumb a:hover, [data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a:hover, [data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a:hover { color: var(--shop-primary); } /* Product meta (merk / model / SKU / EAN) — OpenCart #product vertical list */ [data-shop-theme="cibazaar"] .shop-product-meta { margin-bottom: 1rem; gap: 0.35rem; } [data-shop-theme="cibazaar"] .shop-product-meta-row { font-size: 0.875rem; line-height: 1.45; color: #666666; } html.dark[data-shop-theme="cibazaar"] .shop-product-meta-row { color: var(--app-text-muted); } [data-shop-theme="cibazaar"] .shop-product-meta-label { color: inherit; } [data-shop-theme="cibazaar"] .shop-product-meta-value { color: #333333; font-weight: 600; } html.dark[data-shop-theme="cibazaar"] .shop-product-meta-value { color: var(--app-text); } [data-shop-theme="cibazaar"] .shop-product-meta-link { color: var(--shop-primary); font-weight: 600; } [data-shop-theme="cibazaar"] .shop-product-meta-link:hover { color: var(--shop-primary-hover); } /* Product fulfillment cards — parity slc_suppliers renderFulfillmentAssets (.slc-f-card) */ [data-shop-theme="cibazaar"] .shop-product-channels { margin-top: 1.25rem; margin-bottom: 1.25rem; gap: 0.75rem; } [data-shop-theme="cibazaar"] .shop-product-channel { border-radius: 12px; border: 2px solid transparent; box-shadow: none; } [data-shop-theme="cibazaar"] .shop-product-channel--pickup { background-color: #f8fbf9; border-color: #e1eee5; } [data-shop-theme="cibazaar"] .shop-product-channel--ship_store { background-color: #f0f9ff; border-color: #dbeafe; } [data-shop-theme="cibazaar"] .shop-product-channel--dropship { background-color: #f5f3ff; border-color: #e9e5ff; } [data-shop-theme="cibazaar"] .shop-product-channel--pickup.is-active { border-color: #10a37f; box-shadow: 0 4px 12px rgba(16, 163, 127, 0.1); } [data-shop-theme="cibazaar"] .shop-product-channel--ship_store.is-active { border-color: #0284c7; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12); } [data-shop-theme="cibazaar"] .shop-product-channel--dropship.is-active { border-color: #6366f1; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15); } [data-shop-theme="cibazaar"] .shop-product-channel.is-active::after { content: "\2713"; position: absolute; top: -10px; right: -10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 9999px; background: #fff; font-size: 0.85rem; font-weight: 900; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } [data-shop-theme="cibazaar"] .shop-product-channel--pickup.is-active::after { color: #10a37f; } [data-shop-theme="cibazaar"] .shop-product-channel--ship_store.is-active::after { color: #0284c7; } [data-shop-theme="cibazaar"] .shop-product-channel--dropship.is-active::after { color: #6366f1; } [data-shop-theme="cibazaar"] .shop-product-channel--pickup .shop-product-channel-tag { color: #10a37f; } [data-shop-theme="cibazaar"] .shop-product-channel--ship_store .shop-product-channel-tag { color: #0284c7; } [data-shop-theme="cibazaar"] .shop-product-channel--dropship .shop-product-channel-tag { color: #6366f1; } [data-shop-theme="cibazaar"] .shop-product-channel-title { font-size: 0.875rem; font-weight: 700; color: #333333; } html.dark[data-shop-theme="cibazaar"] .shop-product-channel-title { color: var(--app-text); } [data-shop-theme="cibazaar"] .shop-product-channel--pickup .shop-product-channel-stock { color: #10a37f; } [data-shop-theme="cibazaar"] .shop-product-channel--ship_store .shop-product-channel-stock { color: #64748b; } [data-shop-theme="cibazaar"] .shop-product-channel--dropship .shop-product-channel-stock { color: #6b7280; } html.dark[data-shop-theme="cibazaar"] .shop-product-channel--pickup .shop-product-channel-stock { color: #34d399; } [data-shop-theme="cibazaar"] .shop-product-channel-stock { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; } [data-shop-theme="cibazaar"] .shop-product-channel--pickup .shop-product-channel-price-value { background-color: #10a37f; } [data-shop-theme="cibazaar"] .shop-product-channel--ship_store .shop-product-channel-price-value { background-color: #0284c7; } [data-shop-theme="cibazaar"] .shop-product-channel--dropship .shop-product-channel-price-value { background-color: #6366f1; } [data-shop-theme="cibazaar"] .shop-product-channel-price-tax { font-size: 0.625rem; color: #777777; width: 100%; text-align: center; } [data-shop-theme="cibazaar"] .shop-product-channels-fee { margin-top: 0.875rem; margin-bottom: 0.25rem; border: 1px solid #c7d2fe; border-radius: 12px; background: linear-gradient(145deg, #faf8ff 0%, #f5f3ff 45%, #eef2ff 100%); box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12); color: #312e81; } html.dark[data-shop-theme="cibazaar"] .shop-product-channels-fee { color: #c7d2fe; } html.dark[data-shop-theme="cibazaar"] .shop-product-breadcrumb a, html.dark[data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a, html.dark[data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a { color: var(--app-text-muted); } html.dark[data-shop-theme="cibazaar"] .shop-product-breadcrumb a:hover, html.dark[data-shop-theme="cibazaar"] .shop-catalog-breadcrumb a:hover, html.dark[data-shop-theme="cibazaar"] .shop-checkout-breadcrumb a:hover { color: var(--shop-primary); } /* -------------------------------------------------------------------------- Catalog listing (category / filters / grid) Hooks: .shop-catalog-page, .shop-catalog-breadcrumb, .shop-catalog-sidebar, .shop-catalog-nav-root / .shop-catalog-nav-branch / .shop-catalog-nav-children / .shop-catalog-nav-children--rail-from-parent / .shop-catalog-nav-link--nested, .shop-catalog-filter-card, .shop-catalog-toolbar, .shop-catalog-grid, .shop-catalog-pagination, .shop-catalog-pagination-link, .shop-catalog-pagination-link--active, .shop-catalog-filter-submit -------------------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .shop-catalog-filter-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-catalog-price-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; } [data-shop-theme="cibazaar"] .shop-catalog-price-preset { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0.35rem 0.55rem; border: 1px solid var(--shop-border); border-radius: 9999px; background: var(--shop-surface); color: var(--shop-text-secondary); font-family: 'Jost', 'Lexend', sans-serif; font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } [data-shop-theme="cibazaar"] .shop-catalog-price-preset:hover, [data-shop-theme="cibazaar"] .shop-catalog-price-preset.is-active { border-color: color-mix(in srgb, var(--shop-primary) 40%, var(--shop-border)); background: var(--shop-primary-soft-bg); color: var(--shop-primary); } @media (min-width: 1024px) { [data-shop-theme="cibazaar"] .shop-catalog-active-filters { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid var(--shop-border); border-radius: var(--shop-card-radius); background: var(--shop-surface-alt); } [data-shop-theme="cibazaar"] .shop-catalog-active-filter-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } [data-shop-theme="cibazaar"] .shop-catalog-active-filter-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 30px; padding: 0.25rem 0.7rem; border: 1px solid color-mix(in srgb, var(--shop-primary) 25%, var(--shop-border)); border-radius: 9999px; background: var(--shop-primary-soft-bg); color: var(--shop-primary); font-family: 'Jost', 'Lexend', sans-serif; font-size: 0.78rem; font-weight: 700; text-decoration: none; } [data-shop-theme="cibazaar"] .shop-catalog-active-filter-clear { white-space: nowrap; color: var(--shop-text-muted); font-size: 0.75rem; font-weight: 800; text-decoration: none; } [data-shop-theme="cibazaar"] .shop-catalog-active-filter-clear:hover { color: var(--shop-primary); } } [data-shop-theme="cibazaar"] .shop-catalog-spec-filter-stack { display: grid; gap: 0.85rem; } [data-shop-theme="cibazaar"] .shop-catalog-spec-filter-group { display: grid; gap: 0.45rem; min-width: 0; } [data-shop-theme="cibazaar"] .shop-catalog-spec-filter-group legend { color: var(--shop-text); font-family: 'Jost', 'Lexend', sans-serif; font-size: 0.78rem; font-weight: 800; line-height: 1.25; } [data-shop-theme="cibazaar"] .shop-catalog-spec-filter-options { display: grid; gap: 0.4rem; } [data-shop-theme="cibazaar"] .shop-catalog-spec-filter-option { min-width: 0; } [data-shop-theme="cibazaar"] .shop-catalog-spec-more { border-top: 1px solid var(--shop-border); padding-top: 0.75rem; } [data-shop-theme="cibazaar"] .shop-catalog-spec-more > summary { cursor: pointer; color: var(--shop-primary); font-family: 'Jost', 'Lexend', sans-serif; font-size: 0.78rem; font-weight: 900; list-style: none; } [data-shop-theme="cibazaar"] .shop-catalog-spec-more > summary::-webkit-details-marker { display: none; } [data-shop-theme="cibazaar"] .shop-catalog-spec-more > summary::after { content: '+'; float: right; color: var(--shop-text-muted); } [data-shop-theme="cibazaar"] .shop-catalog-spec-more[open] > summary::after { content: '-'; } [data-shop-theme="cibazaar"] .shop-catalog-spec-more > .shop-catalog-spec-filter-stack { margin-top: 0.75rem; } @media (max-width: 1023px) { body.shop-catalog-filter-open { overflow: hidden; } [data-shop-theme="cibazaar"] .shop-catalog-active-filters { display: none; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filters { display: flex; align-items: center; gap: 0.5rem; position: sticky; top: calc(var(--shop-header-offset, 5rem) - 1px); z-index: 20; margin: -0.25rem 0 1rem; padding: 0.75rem 0; background: color-mix(in srgb, var(--shop-surface) 94%, transparent); backdrop-filter: blur(12px); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-actions { flex: 0 0 auto; justify-content: flex-start; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-chips::-webkit-scrollbar { display: none; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-btn, [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 38px; white-space: nowrap; border-radius: 9999px; font-family: 'Jost', 'Lexend', sans-serif; font-size: 0.8125rem; font-weight: 700; text-decoration: none; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-btn { gap: 0.4rem; padding: 0 1rem; border: 1px solid var(--shop-border); background: var(--shop-surface); color: var(--shop-text); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-btn-primary { min-width: 132px; border-color: var(--shop-primary); background: var(--shop-primary); color: #ffffff; box-shadow: var(--shop-button-glow); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-icon { width: 1rem; height: 1rem; stroke-width: 2.4; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-count { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 9999px; background: #fada4a; color: #212121; font-size: 0.7rem; line-height: 1; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-chip { min-height: 30px; padding: 0.25rem 0.7rem; background: var(--shop-primary-soft-bg); color: var(--shop-primary); border: 1px solid color-mix(in srgb, var(--shop-primary) 25%, var(--shop-border)); font-size: 0.75rem; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-drawer { position: fixed; inset: 0; z-index: 90; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(15, 23, 42, 0.46); cursor: pointer; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: min(82dvh, 720px); padding: 0.5rem 1rem 1rem; border-radius: 24px 24px 0 0; background: var(--shop-surface); box-shadow: 0 -18px 44px rgba(15, 23, 42, 0.22); animation: shop-catalog-filter-sheet-in 0.18s ease-out; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-handle { width: 44px; height: 4px; margin: 0.35rem auto 0.75rem; border-radius: 9999px; background: var(--shop-border); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-head, [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-head { padding-bottom: 0.75rem; border-bottom: 1px solid var(--shop-border); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-title { font-size: 1.05rem; font-weight: 800; color: var(--shop-text); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-subtitle, [data-shop-theme="cibazaar"] .shop-catalog-mobile-brand-count { font-size: 0.75rem; color: var(--shop-text-muted); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-close { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border: 1px solid var(--shop-border); border-radius: 9999px; background: var(--shop-surface-alt); color: var(--shop-text); font-size: 1.45rem; line-height: 1; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-form { overflow-y: auto; padding: 0.25rem 0 0; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-section { padding: 1rem 0; border-bottom: 1px solid var(--shop-border); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-section-title { margin-bottom: 0.65rem; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-brand-list { display: grid; gap: 0.45rem; max-height: 34dvh; overflow-y: auto; padding-right: 0.2rem; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-brand-option, [data-shop-theme="cibazaar"] .shop-catalog-mobile-condition-option { display: flex; align-items: center; gap: 0.65rem; min-height: 42px; padding: 0.65rem 0.75rem; border: 1px solid var(--shop-border); border-radius: 14px; background: var(--shop-surface); color: var(--shop-text-secondary); font-size: 0.875rem; font-weight: 600; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-brand-option:has(input:checked), [data-shop-theme="cibazaar"] .shop-catalog-mobile-condition-option:has(input:checked) { border-color: color-mix(in srgb, var(--shop-primary) 40%, var(--shop-border)); background: var(--shop-primary-soft-bg); color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-price-grid, [data-shop-theme="cibazaar"] .shop-catalog-mobile-condition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-section .shop-catalog-price-preset-grid { margin-bottom: 0.65rem; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-section .shop-catalog-spec-filter-stack { gap: 0.75rem; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-footer { position: sticky; bottom: 0; margin: 0 -1rem -1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--shop-border); background: var(--shop-surface); } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-reset { color: var(--shop-text-muted); font-size: 0.82rem; font-weight: 800; text-decoration: none; } [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-submit { min-height: 44px; min-width: 150px; border-radius: 9999px; } } @keyframes shop-catalog-filter-sheet-in { 0% { transform: translateY(18px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { [data-shop-theme="cibazaar"] .shop-catalog-mobile-filter-panel { animation: none; } } /* Category column — OpenCart Cibazaar category sidebar (niet het account-list-group ~3191): uitgeklapte topouder = lichtblauwe rij + min; open tussenliggende ouder = vet primary; actieve blad-categorie (nested) = donkere tekst + dikke primary-balk; "Alle" + L1 zonder kids = volle primary-rij. Referentie: extension/cibazaar/.../stylesheet.css o.a. mega `.lvl-2-header` (~1989), `.sidebar-link.active-shield` (~2009). */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type { padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid #eeeeee; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); background: #ffffff; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type > p { margin: 0; padding: 14px 20px 10px; font-weight: 800; color: var(--shop-primary); border-bottom: 2px solid var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root { padding: 0; margin: 0; font-size: 14px; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root.space-y-1 > li + li { margin-top: 0 !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > li { border-bottom: 1px solid #f5f5f5; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > li:last-child { border-bottom: none; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children { margin: 0; padding: 0 0 4px; border-top: 1px solid #f5f5f5; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children .shop-catalog-nav-children { border-left: none; padding-left: 0.5rem; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='1'] { padding-left: 14px; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='2'] { padding-left: 10px; } /* Linker primary-balk op elke rij onder L2-rail (OpenCart: elke L3/L4-regel, geen dubbele ul-rand) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type ul.shop-catalog-nav-children.shop-catalog-nav-children--rail-from-parent[data-depth='2'] { margin-top: 10px; margin-bottom: 2px; margin-left: 0; padding-top: 2px; padding-bottom: 2px; padding-left: 0; border-left: none; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='3'], [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='4'], [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='5'] { padding-left: 10px; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link { display: block; border-radius: 0; margin: 0; border: none; font-size: 14px; font-weight: 500; line-height: 1.45; color: #444444; background-color: transparent; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link:not(.shop-catalog-nav-link--nested) { padding: 12px 20px; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link--nested { font-size: 13px; font-weight: 500; padding: 10px 20px 10px 12px; border-left: none; margin-left: 0; } /* input.css: [data-shop-theme] a…nested.active zet border-left-color op primary boven 2px rand — wint van bovenstaande nested zonder .active */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active { border-left: none !important; border-left-width: 0 !important; border-left-style: none !important; border-left-color: transparent !important; } /* Rail (L3/L4 onder actieve L2): na bovenstaande reset — linkse balk op elke rij, ook actieve links */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type ul.shop-catalog-nav-children--rail-from-parent[data-depth='2'] a.shop-catalog-nav-link--nested { border-left: 3px solid var(--shop-primary) !important; padding-left: 11px !important; padding-right: 20px !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type ul.shop-catalog-nav-children--rail-from-parent[data-depth='2'] a.shop-catalog-nav-link--nested:not(.shop-catalog-nav-link--active):hover { padding-left: 13px !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active.shop-catalog-nav-link--active-branch { background-color: transparent !important; color: var(--shop-primary) !important; font-weight: 700 !important; } /* Top-level expanded ancestor (pad naar actieve categorie) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > .shop-catalog-nav-branch.shop-catalog-nav-branch--open > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active) { position: relative; padding-right: 2.25rem; background-color: #f0f7ff; color: var(--shop-primary); font-weight: 700; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > .shop-catalog-nav-branch.shop-catalog-nav-branch--open:has(> ul) > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active)::after { content: '\2212'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--shop-primary) 72%, #94a3b8); pointer-events: none; } /* L1 (root) actief + uitgeklapt: lichte band + min (OpenCart: Geheugen) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > .shop-catalog-nav-branch.shop-catalog-nav-branch--open:has(> ul) > a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch:not(.shop-catalog-nav-link--nested) { position: relative; padding-right: 2.25rem; background-color: #f0f7ff !important; color: var(--shop-primary) !important; font-weight: 700 !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > .shop-catalog-nav-branch.shop-catalog-nav-branch--open:has(> ul) > a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch:not(.shop-catalog-nav-link--nested)::after { content: '\2212'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--shop-primary) 72%, #94a3b8); pointer-events: none; } /* Dieper geneste open takken: vet primary, géén volle lichte band (OpenCart-foto 2) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children .shop-catalog-nav-branch.shop-catalog-nav-branch--open > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active) { position: relative; padding-right: 2.25rem; background-color: transparent; color: var(--shop-primary); font-weight: 700; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children .shop-catalog-nav-branch.shop-catalog-nav-branch--open:has(> ul) > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active)::after { content: '\2212'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--shop-primary) 72%, #94a3b8); pointer-events: none; } /* Geneste ouder actief + uitgeklapt (DDR-4 op eigen pagina): géén lichte band, wel min */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children .shop-catalog-nav-branch.shop-catalog-nav-branch--open:has(> ul) > a.shop-catalog-nav-link.shop-catalog-nav-link--active.shop-catalog-nav-link--active-branch { position: relative; padding-right: 2.25rem; background-color: transparent !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children .shop-catalog-nav-branch.shop-catalog-nav-branch--open:has(> ul) > a.shop-catalog-nav-link.shop-catalog-nav-link--active.shop-catalog-nav-link--active-branch::after { content: '\2212'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--shop-primary) 72%, #94a3b8); pointer-events: none; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active):hover { background-color: #f8fafd; color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link:not(.shop-catalog-nav-link--nested):not(.shop-catalog-nav-link--active):hover { padding-left: 25px; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link--nested:not(.shop-catalog-nav-link--active):hover { padding-left: 17px; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > .shop-catalog-nav-branch.shop-catalog-nav-branch--open > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active):hover { background-color: color-mix(in srgb, var(--shop-primary) 14%, #ffffff); color: var(--shop-primary-hover); } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children .shop-catalog-nav-branch.shop-catalog-nav-branch--open > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active):hover { background-color: transparent; color: var(--shop-primary-hover); } /* Actieve categorie met subcategories: L1 = lichte band; dieper genest = transparant (OpenCart) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch { color: var(--shop-primary) !important; font-weight: 700 !important; border-left: none !important; box-shadow: none; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch:not(.shop-catalog-nav-link--nested) { background-color: #f0f7ff !important; padding-left: 20px !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch.shop-catalog-nav-link--nested { background-color: transparent !important; padding-left: 12px !important; } /* L2 blad: alleen primary-tekst (OpenCart-ref), géén achtergrond */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='1'] > li > a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { border-left: none !important; padding-left: 12px !important; color: var(--shop-primary) !important; font-weight: 700 !important; background-color: transparent !important; } /* L3 blad onder depth=2 zónder rail: geen extra balk — alleen primary-tekst */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='2']:not(.shop-catalog-nav-children--rail-from-parent) a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { background-color: transparent !important; color: var(--shop-primary) !important; font-weight: 700 !important; border-left: none !important; padding-left: 12px !important; } /* "Alle categorieën" + L1 zonder subcategories: zelfde lichte selectie als actieve L1-branch (geen volle primary-rij) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--all.shop-catalog-nav-link--active, [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-leaf:not(.shop-catalog-nav-link--nested):not(.shop-catalog-nav-link--all) { background-color: #f0f7ff !important; color: var(--shop-primary) !important; font-weight: 700 !important; border-left: none !important; padding-left: 20px !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--all.shop-catalog-nav-link--active:hover, [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-leaf:not(.shop-catalog-nav-link--nested):not(.shop-catalog-nav-link--all):hover { background-color: color-mix(in srgb, var(--shop-primary) 12%, #ffffff) !important; color: var(--shop-primary-hover) !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch:hover { background-color: color-mix(in srgb, var(--shop-primary) 12%, #ffffff) !important; color: var(--shop-primary-hover) !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch.shop-catalog-nav-link--nested:hover { background-color: transparent !important; color: var(--shop-primary-hover) !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf:hover { background-color: color-mix(in srgb, var(--shop-primary) 12%, #ffffff) !important; color: var(--shop-primary-hover) !important; } /* L2 actief: geen hover-achtergrond (alleen tekst) */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='1'] > li > a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf:hover { background-color: transparent !important; color: var(--shop-primary-hover) !important; } /* Rail L3 actief: zelfde 3px-lijn als siblings (regel ~1098); géén tweede/dikkere balk */ [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type ul.shop-catalog-nav-children--rail-from-parent[data-depth='2'] a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { color: var(--shop-primary) !important; font-weight: 700 !important; background-color: transparent !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type ul.shop-catalog-nav-children--rail-from-parent[data-depth='2'] a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf:hover { background-color: transparent !important; color: var(--shop-primary-hover) !important; } [data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='2']:not(.shop-catalog-nav-children--rail-from-parent) a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf:hover { background-color: transparent !important; color: var(--shop-primary-hover) !important; } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type { background: var(--shop-surface); border-color: var(--shop-border); box-shadow: 0 5px 22px rgba(0, 0, 0, 0.22); } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type > p { border-bottom-color: var(--shop-primary); color: var(--shop-primary); } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > li { border-bottom-color: rgba(148, 163, 184, 0.16); } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children { border-top-color: rgba(148, 163, 184, 0.16); } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active) { color: var(--shop-text-muted); } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-root > .shop-catalog-nav-branch.shop-catalog-nav-branch--open > a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active) { background-color: var(--shop-primary-soft-bg); } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-branch { background-color: var(--shop-primary-soft-bg) !important; } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { color: var(--shop-text) !important; } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type ul.shop-catalog-nav-children--rail-from-parent[data-depth='2'] a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { color: var(--shop-primary) !important; } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='2']:not(.shop-catalog-nav-children--rail-from-parent) a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { color: var(--shop-primary) !important; background-color: transparent !important; } /* Dark: L2-selectie moet boven algemene nested active-leaf (shop-text) uitkomen */ html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type .shop-catalog-nav-children[data-depth='1'] > li > a.shop-catalog-nav-link--nested.shop-catalog-nav-link--active-leaf { color: var(--shop-primary) !important; background-color: transparent !important; } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--all.shop-catalog-nav-link--active, html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link.shop-catalog-nav-link--active-leaf:not(.shop-catalog-nav-link--nested):not(.shop-catalog-nav-link--all) { background-color: var(--shop-primary-soft-bg) !important; color: var(--shop-primary) !important; } html.dark[data-shop-theme="cibazaar"] .shop-catalog-sidebar > div.shop-catalog-filter-card:first-of-type a.shop-catalog-nav-link:not(.shop-catalog-nav-link--active):hover { background-color: var(--shop-primary-soft-bg); color: var(--shop-primary); } [data-shop-theme="cibazaar"] .shop-catalog-toolbar .form-select { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); background: var(--shop-surface); font-weight: 600; color: var(--shop-text); } [data-shop-theme="cibazaar"] .shop-catalog-pagination a { border-radius: var(--shop-control-radius); transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease; } [data-shop-theme="cibazaar"] .shop-catalog-pagination a:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(58, 122, 245, 0.12); } [data-shop-theme="cibazaar"] .shop-catalog-pagination a.shop-catalog-pagination-link--active { background-color: var(--shop-primary); border-color: var(--shop-primary); color: #ffffff; box-shadow: var(--shop-button-glow); } [data-shop-theme="cibazaar"] .shop-catalog-pagination a.shop-catalog-pagination-link--active:hover { background-color: var(--shop-primary-hover); border-color: var(--shop-primary-hover); box-shadow: 0 6px 15px rgba(58, 122, 245, 0.35); } /* -------------------------------------------------------------------------- Checkout + shared shop CTAs (place order, compare, wishlist, order complete) Hooks: .shop-checkout-page, .shop-checkout-breadcrumb, .shop-checkout-header, .shop-checkout-errors, .shop-checkout-form, .shop-checkout-main, .shop-checkout-section, .shop-checkout-option, .shop-checkout-summary-aside, .shop-checkout-summary-card, .shop-checkout-place-order, .shop-compare-cta, .shop-wishlist-cta-primary, .shop-order-complete-cta-primary, .shop-cart-cta-primary, .shop-cart-cta-checkout, .shop-home-cta-primary, .shop-verify-cta-primary, .shop-reviews-cta, .shop-product-notfound-cta, button.shop-reviews-submit, button.shop-catalog-filter-submit, button.shop-cookie-banner-accept, button.shop-newsletter-popup-submit, button.shop-profile-password-submit, button.shop-profile-2fa-verify-submit, a.shop-addresses-add-cta, button.shop-address-form-submit -------------------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .shop-checkout-section { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-checkout-summary-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); background: var(--shop-surface-alt); } [data-shop-theme="cibazaar"] .shop-checkout-option { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); background: var(--shop-surface); } [data-shop-theme="cibazaar"] .shop-checkout-option:hover { border-color: rgba(58, 122, 245, 0.35); } [data-shop-theme="cibazaar"] .shop-checkout-place-order:not(:disabled), [data-shop-theme="cibazaar"] a.shop-compare-cta, [data-shop-theme="cibazaar"] a.shop-wishlist-cta-primary, [data-shop-theme="cibazaar"] a.shop-order-complete-cta-primary, [data-shop-theme="cibazaar"] a.shop-cart-cta-primary, [data-shop-theme="cibazaar"] a.shop-cart-cta-checkout, [data-shop-theme="cibazaar"] a.shop-home-cta-primary, [data-shop-theme="cibazaar"] a.shop-verify-cta-primary, [data-shop-theme="cibazaar"] a.shop-reviews-cta, [data-shop-theme="cibazaar"] a.shop-product-notfound-cta, [data-shop-theme="cibazaar"] button.shop-reviews-submit, [data-shop-theme="cibazaar"] button.shop-catalog-filter-submit, [data-shop-theme="cibazaar"] button.shop-cookie-banner-accept, [data-shop-theme="cibazaar"] button.shop-newsletter-popup-submit, [data-shop-theme="cibazaar"] button.shop-profile-password-submit, [data-shop-theme="cibazaar"] button.shop-profile-2fa-verify-submit, [data-shop-theme="cibazaar"] a.shop-addresses-add-cta, [data-shop-theme="cibazaar"] button.shop-address-form-submit { min-height: 50px; border-radius: var(--shop-control-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.75rem, 1.2vw, 1rem); box-shadow: var(--shop-button-glow); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; background-color: var(--shop-primary); border-color: var(--shop-primary); color: #ffffff; } [data-shop-theme="cibazaar"] .shop-checkout-place-order:not(:disabled):hover, [data-shop-theme="cibazaar"] a.shop-compare-cta:hover, [data-shop-theme="cibazaar"] a.shop-wishlist-cta-primary:hover, [data-shop-theme="cibazaar"] a.shop-order-complete-cta-primary:hover, [data-shop-theme="cibazaar"] a.shop-cart-cta-primary:hover, [data-shop-theme="cibazaar"] a.shop-cart-cta-checkout:hover, [data-shop-theme="cibazaar"] a.shop-home-cta-primary:hover, [data-shop-theme="cibazaar"] a.shop-verify-cta-primary:hover, [data-shop-theme="cibazaar"] a.shop-reviews-cta:hover, [data-shop-theme="cibazaar"] a.shop-product-notfound-cta:hover, [data-shop-theme="cibazaar"] button.shop-reviews-submit:hover, [data-shop-theme="cibazaar"] button.shop-catalog-filter-submit:hover, [data-shop-theme="cibazaar"] button.shop-cookie-banner-accept:hover, [data-shop-theme="cibazaar"] button.shop-newsletter-popup-submit:hover, [data-shop-theme="cibazaar"] button.shop-profile-password-submit:hover, [data-shop-theme="cibazaar"] button.shop-profile-2fa-verify-submit:hover, [data-shop-theme="cibazaar"] a.shop-addresses-add-cta:hover, [data-shop-theme="cibazaar"] button.shop-address-form-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(58, 122, 245, 0.4); background-color: var(--shop-primary-hover); border-color: var(--shop-primary-hover); } @media (max-width: 1023px) { [data-shop-theme="cibazaar"] button.shop-catalog-mobile-filter-submit { min-height: 44px; min-width: 150px; border-radius: 9999px; font-size: 0.875rem; text-transform: none; letter-spacing: 0; } } [data-shop-theme="cibazaar"] a.shop-compare-cta--compact, [data-shop-theme="cibazaar"] button.shop-compare-cta--compact { min-height: 0; text-transform: none; letter-spacing: 0.03em; font-size: 0.75rem; } [data-shop-theme="cibazaar"] button.shop-reviews-submit { font-size: clamp(0.75rem, 1.2vw, 0.9375rem); } [data-shop-theme="cibazaar"] a.shop-wishlist-cta-secondary, [data-shop-theme="cibazaar"] a.shop-order-complete-cta-secondary, [data-shop-theme="cibazaar"] a.shop-home-cta-secondary { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); background: var(--shop-surface); transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } [data-shop-theme="cibazaar"] a.shop-wishlist-cta-secondary:hover, [data-shop-theme="cibazaar"] a.shop-order-complete-cta-secondary:hover, [data-shop-theme="cibazaar"] a.shop-home-cta-secondary:hover { border-color: rgba(58, 122, 245, 0.35); background: var(--shop-primary-soft-bg); transform: translateY(-1px); } [data-shop-theme="cibazaar"] .shop-order-complete-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); background: var(--shop-surface-alt); } [data-shop-theme="cibazaar"] .shop-compare-table-wrap { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); background: var(--shop-surface); } [data-shop-theme="cibazaar"] .shop-compare-page .sticky.left-0 { background: var(--shop-surface); } [data-shop-theme="cibazaar"] button.shop-order-complete-retry { border-radius: var(--shop-control-radius); font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 4px 14px rgba(225, 29, 72, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } [data-shop-theme="cibazaar"] button.shop-order-complete-retry:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35); } /* Return request (shop/return.php) */ [data-shop-theme="cibazaar"] .shop-return-items-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); background: var(--shop-surface); } [data-shop-theme="cibazaar"] .shop-cart-empty-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-home-hero { background: linear-gradient(135deg, var(--shop-primary-soft-bg) 0%, var(--shop-surface) 42%, var(--shop-surface-alt) 100%); border-color: var(--shop-border-soft); } html.dark[data-shop-theme="cibazaar"] .shop-home-hero { background: linear-gradient(135deg, oklch(0.22 0.04 250) 0%, oklch(0.17 0.02 250) 55%, oklch(0.15 0.02 250) 100%); border-color: var(--shop-border); } /* Homepage hero slideshow — OC carousel feel */ [data-shop-theme="cibazaar"] .shop-home-slideshow { border-color: var(--shop-border); } [data-shop-theme="cibazaar"] .shop-home-slideshow-prev, [data-shop-theme="cibazaar"] .shop-home-slideshow-next { background: rgba(255, 255, 255, 0.92); border-color: var(--shop-border-soft); color: var(--shop-primary); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); } [data-shop-theme="cibazaar"] .shop-home-slideshow-prev:hover, [data-shop-theme="cibazaar"] .shop-home-slideshow-next:hover { background: #ffffff; box-shadow: var(--shop-button-glow); } [data-shop-theme="cibazaar"] .shop-home-slideshow-dots { background: color-mix(in srgb, var(--shop-surface) 94%, transparent); border-color: var(--shop-border-soft); } [data-shop-theme="cibazaar"] .shop-newsletter-popup-card { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } [data-shop-theme="cibazaar"] .shop-cookie-banner { border-color: var(--shop-border); } [data-shop-theme="cibazaar"] .shop-account-auth-page .shop-auth-card a.shop-verify-cta-primary { display: inline-flex; align-items: center; justify-content: center; } [data-shop-theme="cibazaar"] .shop-account-auth-page .shop-auth-card .form-input, [data-shop-theme="cibazaar"] .shop-account-auth-page .shop-auth-card .form-select { border-radius: var(--shop-control-radius); border-color: var(--shop-border-soft); } [data-shop-theme="cibazaar"] .shop-product-gallery-main { border-radius: var(--shop-card-radius); border-color: var(--shop-border); box-shadow: var(--shop-card-shadow); } /* Buy box ≈ .buy-box-area (OC 2604–2610) */ [data-shop-theme="cibazaar"] .shop-product-buy-box { background: var(--shop-surface-alt); border-color: var(--shop-border); border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); } /* Primary add-to-cart ≈ #button-cart (OC 2664–2690) */ [data-shop-theme="cibazaar"] .shop-product-buy-box button[type="submit"]:not(:disabled) { min-height: 50px; border-radius: var(--shop-control-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(0.75rem, 1.2vw, 1rem); box-shadow: var(--shop-button-glow); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; background-color: var(--shop-primary); border-color: var(--shop-primary); color: #ffffff; } [data-shop-theme="cibazaar"] .shop-product-buy-box button[type="submit"]:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(58, 122, 245, 0.4); background-color: var(--shop-primary-hover); border-color: var(--shop-primary-hover); } /* Quantity field ≈ .quantity-wrapper inner (OC 2620–2643) */ [data-shop-theme="cibazaar"] .shop-product-buy-box input[type="number"] { background: var(--shop-surface); border-color: var(--shop-border-soft); border-radius: var(--shop-control-radius); font-weight: 700; font-size: 1.125rem; color: var(--shop-text); } /* Cart line cards — cleaner edges + hover lift (OC cart polish family) */ [data-shop-theme="cibazaar"] .shop-cart-line { border-radius: var(--shop-card-radius); box-shadow: var(--shop-card-shadow); transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease; } [data-shop-theme="cibazaar"] .shop-cart-line:hover { border-color: rgba(58, 122, 245, 0.28); box-shadow: var(--shop-card-shadow-hover); } /* Slight OC-style card shadow on stacked order rows (input.css <768px) */ @media (max-width: 767px) { [data-shop-theme="cibazaar"] table.shop-stacked-table tr { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); border-color: var(--shop-border); } } /* -------------------------------------------------------------------------- Product detail — description / specs / reviews tabs (OC-style nav) -------------------------------------------------------------------------- */ [data-shop-theme="cibazaar"] .shop-product-tabs-nav { border-bottom-color: var(--shop-border); gap: 0; } [data-shop-theme="cibazaar"] .shop-product-tab { font-weight: 700; text-transform: none; letter-spacing: normal; border-radius: 0; padding: 0.65rem 1rem; } [data-shop-theme="cibazaar"] .shop-product-tab-active { color: var(--shop-primary) !important; border-bottom-color: var(--shop-primary) !important; } @media (max-width: 767px) { [data-shop-theme="cibazaar"] .shop-product-tabs-nav { flex-wrap: wrap; gap: 0.35rem; border-bottom: none; margin-bottom: 0.35rem; } [data-shop-theme="cibazaar"] .shop-product-tabs-nav .shop-product-tab { flex: 1 1 auto; min-width: calc(50% - 0.2rem); justify-content: center; border: 1px solid var(--shop-border); border-radius: var(--shop-control-radius); margin-bottom: 0; border-bottom-width: 1px; } [data-shop-theme="cibazaar"] .shop-product-tabs-nav .shop-product-tab-active { background: var(--shop-primary-soft-bg); border-color: var(--shop-primary) !important; border-bottom-color: var(--shop-primary) !important; } } /* ========================================================================== Cart — secundaire submits (niet de globale blauwe primary-regel) `shop-btn-not-primary` uitsluiten van de brede submit-selector hierboven; anders krijgen “Verwijderen” / “Leegmaken” blauwe achtergrond + gekleurde tekst. ========================================================================== */ [data-shop-theme="cibazaar"] button.shop-btn-not-primary[type="submit"] { background-color: var(--shop-surface-alt); border: 1px solid var(--shop-border); color: var(--shop-text-secondary); box-shadow: none; transform: none; text-transform: none; letter-spacing: normal; min-height: auto; } [data-shop-theme="cibazaar"] button.shop-btn-not-primary[type="submit"]:hover { background-color: var(--shop-surface-hover); border-color: var(--shop-primary); color: var(--shop-primary); box-shadow: none; transform: none; } [data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"] { background: transparent; border: 1px solid var(--shop-border); color: var(--shop-danger); padding: 0; text-decoration: none; } [data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"]:hover { color: var(--shop-danger-hover); border-color: color-mix(in srgb, var(--shop-danger) 35%, var(--shop-border)); background: color-mix(in srgb, var(--shop-danger) 8%, transparent); text-decoration: none; } [data-shop-theme="cibazaar"] button.shop-cart-btn-clear.shop-btn-not-primary[type="submit"] { background: transparent; border: 1px solid var(--shop-border); color: var(--shop-text-secondary); padding: 0.5rem 0.85rem; } [data-shop-theme="cibazaar"] button.shop-cart-btn-clear.shop-btn-not-primary[type="submit"]:hover { border-color: var(--shop-danger); color: var(--shop-danger); background: var(--shop-primary-soft-bg); } html.dark[data-shop-theme="cibazaar"] button.shop-btn-not-primary[type="submit"] { background-color: var(--app-surface-alt); border-color: var(--app-border); color: var(--app-text-secondary); } html.dark[data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"] { background: transparent; border-color: var(--app-border); color: #f87171; } html.dark[data-shop-theme="cibazaar"] button.shop-cart-btn-remove.shop-btn-not-primary[type="submit"]:hover { color: #fca5a5; background: color-mix(in srgb, #f87171 12%, transparent); border-color: color-mix(in srgb, #f87171 35%, var(--app-border)); } html.dark[data-shop-theme="cibazaar"] button.shop-cart-btn-clear.shop-btn-not-primary[type="submit"] { background: transparent; color: var(--app-text-muted); }