/*! * CE Off-Canvas Category Menu — Frontend Styles * * All selectors are prefixed with .ce-occm- / #ce-occm-panel to guarantee * zero collision with Woodmart, WooCommerce, or any other plugin and to * maintain specificity above common theme overrides. * * Section index * ───────────── * 1. Design Tokens * 2. Scroll Lock * 3. Trigger Button (pill with orange hamburger icon) * 4. Overlay * 5. Panel Shell * 6. Panel Base Reset (neutralises Woodmart link/list/typography inside panel) * 7. Panel Header * 8. Back Button (inside drilldown level nav row) * 9. Panel Title * 10. Panel Body & Level Stack * 11. Level Nav Row (Back + View All utility row) * 12. Items List * 13. Item Row * 14. Item Thumbnail * 15. Item Icon * 16. Item Name * 17. Item Count * 18. Item Arrow * 19. Item Types (label, link, category) * 20. Section Headings * 21. Error Message * 22. Reduced Motion * 23. Mobile (≤ 480 px) * 24. Tablet (481 px – 768 px) * 25. High-contrast / Dark-mode hints * * @package CE_OCCM * @since 1.0.0 */ /* ============================================================================= * 1. Design Tokens * ========================================================================== */ :root { /* Panel */ --ce-occm-panel-width: 320px; --ce-occm-panel-bg: #ffffff; --ce-occm-panel-z: 100000; /* above Woodmart header (~9999) */ --ce-occm-panel-shadow: -4px 0 24px rgba(0, 0, 0, 0.18); --ce-occm-panel-radius: 0; --ce-occm-transition-speed: 0.32s; --ce-occm-transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Overlay */ --ce-occm-overlay-bg: rgba(0, 0, 0, 0.52); --ce-occm-overlay-z: 99999; /* Header */ --ce-occm-header-height: 56px; --ce-occm-header-bg: rgba(230, 239, 253, 1); --ce-occm-header-color: #000; --ce-occm-header-pad-x: 16px; /* Items */ --ce-occm-item-min-height: 52px; --ce-occm-item-pad-x: 16px; --ce-occm-item-pad-y: 10px; --ce-occm-item-color: #222222; --ce-occm-item-color-hover: #000000; --ce-occm-item-bg-hover: #f4f4f4; --ce-occm-item-border: rgba(0, 0, 0, 0.07); --ce-occm-item-font-size: 15px; --ce-occm-item-font-weight: 400; --ce-occm-item-gap: 10px; /* Thumbnail */ --ce-occm-thumb-size: 25px; --ce-occm-thumb-radius: 4px; /* Count badge */ --ce-occm-count-color: #888888; --ce-occm-count-font-size: 12px; /* Arrow */ --ce-occm-arrow-color: #303030; --ce-occm-arrow-color-hover: #e87722; /* Section heading */ --ce-occm-heading-color: #888888; --ce-occm-heading-font-size: 11px; --ce-occm-heading-pad-x: 16px; --ce-occm-heading-pad-y: 8px; /* View-all */ --ce-occm-view-all-color: #0073aa; --ce-occm-view-all-bg-hover: #f0f7fb; /* Trigger */ --ce-occm-trigger-font-size: 14px; /* Focus ring colour */ --ce-occm-focus-color: #0073aa; } /* ============================================================================= * 2. Scroll Lock * Applied to by JS when the panel is open. * ========================================================================== */ html.ce-occm-no-scroll, html.ce-occm-no-scroll body { overflow: hidden !important; touch-action: none; } /* ============================================================================= * 3. Trigger Button (pill with orange hamburger icon) * .ce-occm-trigger — output by templates/trigger.php * Uses !important on layout-critical properties because the trigger is * placed inside the Woodmart header which aggressively resets button styles. * ========================================================================== */ .ce-occm-trigger { display: inline-flex !important; align-items: center !important; gap: 0 !important; background: #ffffff !important; color: #222222 !important; font-size: 14px !important; font-weight: 500 !important; font-family: inherit !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 50px !important; padding: 4px 14px 4px 4px !important; cursor: pointer !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; vertical-align: middle; box-sizing: border-box !important; transition: box-shadow 0.18s ease, border-color 0.18s ease; } .ce-occm-trigger:hover, .ce-occm-trigger:focus-visible { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important; border-color: rgba(0, 0, 0, 0.22) !important; color: #222222 !important; text-decoration: none !important; outline: none; opacity: 1; } .ce-occm-trigger:focus-visible { outline: 2px solid #e87722; outline-offset: 2px; } /* ── Orange circle housing the hamburger ────────────────────── */ .ce-occm-trigger-icon-wrap { display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; background: #e87722 !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-right: 10px !important; padding: 0 !important; box-sizing: border-box !important; } /* ── Three white horizontal bars ────────────────────────────── */ .ce-occm-trigger-hamburger { display: flex !important; flex-direction: column !important; gap: 4px !important; width: 16px !important; } .ce-occm-trigger-hamburger span { display: block !important; width: 100% !important; height: 2px !important; background: #ffffff !important; border-radius: 2px !important; padding: 0 !important; margin: 0 !important; } /* ── Text label ─────────────────────────────────────────────── */ .ce-occm-trigger-label { white-space: nowrap; } /* ============================================================================= * 4. Overlay * #ce-occm-overlay — always in the DOM, visible via CSS class. * ========================================================================== */ .ce-occm-overlay { position: fixed !important; inset: 0; background: var(--ce-occm-overlay-bg); z-index: var(--ce-occm-overlay-z); opacity: 0; pointer-events: none; transition: opacity var(--ce-occm-transition-speed) var(--ce-occm-transition-ease); cursor: default; } .ce-occm-overlay--visible { opacity: 1; pointer-events: auto; cursor: pointer; } /* ============================================================================= * 5. Panel Shell * #ce-occm-panel — slides in from the left. * ========================================================================== */ .ce-occm-panel { position: fixed !important; top: 0 !important; left: 0 !important; width: var(--ce-occm-panel-width) !important; max-width: 100vw !important; height: 100% !important; height: 100dvh !important; background: var(--ce-occm-panel-bg) !important; z-index: var(--ce-occm-panel-z) !important; display: flex !important; flex-direction: column !important; transform: translateX(-100%); transition: transform var(--ce-occm-transition-speed) var(--ce-occm-transition-ease), box-shadow var(--ce-occm-transition-speed) var(--ce-occm-transition-ease); box-shadow: none; border-radius: var(--ce-occm-panel-radius) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .ce-occm-panel--open { transform: translateX(0); box-shadow: var(--ce-occm-panel-shadow); } #ce-occm-panel .ce-occm-panel-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; box-sizing: border-box; } /* ============================================================================= * 6. Panel Base Reset * Neutralises Woodmart's global link, list, button, and typography rules * inside the panel so plugin styles are not overridden. * Scoped exclusively to #ce-occm-panel — does not affect the rest of the page. * ========================================================================== */ /* Links — reset Woodmart's global anchor colour and decoration */ #ce-occm-panel a, #ce-occm-panel a:hover, #ce-occm-panel a:visited, #ce-occm-panel a:focus { text-decoration: none; box-shadow: none; } /* Lists — reset Woodmart's ul/ol/li default margins and bullets */ #ce-occm-panel ul, #ce-occm-panel ol { list-style: none !important; margin: 0 !important; padding: 0 !important; } #ce-occm-panel li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none; border: none; } /* Buttons inside panel — reset Woodmart's global button resets */ #ce-occm-panel button { font-family: inherit; line-height: inherit; } /* Box-sizing baseline for everything inside panel */ #ce-occm-panel *, #ce-occm-panel *::before, #ce-occm-panel *::after { box-sizing: border-box; } /* ============================================================================= * 7. Panel Header * ========================================================================== */ #ce-occm-panel .ce-occm-panel-header { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: var(--ce-occm-header-height); padding: 0 var(--ce-occm-header-pad-x); background: var(--ce-occm-header-bg) !important; color: var(--ce-occm-header-color) !important; user-select: none; margin: 0; border: none; } /* ============================================================================= * 8. Back Button * Rendered inside .ce-occm-level-nav on every drilldown level (by JS). * ========================================================================== */ #ce-occm-panel .ce-occm-back { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: none !important; border: none !important; color: var(--ce-occm-item-color) !important; font-size: 13px !important; font-family: inherit; cursor: pointer; padding: 6px 8px; margin: 0; line-height: 1; border-radius: 3px; text-transform: none; letter-spacing: normal; transition: color 0.18s ease, background 0.18s ease; white-space: nowrap; } #ce-occm-panel .ce-occm-back:hover, #ce-occm-panel .ce-occm-back:focus-visible { color: var(--ce-occm-item-color-hover) !important; background: var(--ce-occm-item-bg-hover) !important; outline: none; } #ce-occm-panel .ce-occm-back:focus-visible { outline: 2px solid var(--ce-occm-focus-color); outline-offset: 2px; } #ce-occm-panel .ce-occm-back .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 1; } #ce-occm-panel .ce-occm-back-label { font-size: 13px; } /* ============================================================================= * 9. Panel Title * ========================================================================== */ #ce-occm-panel .ce-occm-panel-title { flex: 1; font-size: 15px !important; font-weight: 600 !important; color: var(--ce-occm-header-color) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1; min-width: 0; text-transform: none !important; letter-spacing: normal !important; } /* ============================================================================= * 10. Panel Body & Level Stack * ========================================================================== */ #ce-occm-panel .ce-occm-panel-body { position: relative; flex: 1; overflow: hidden; min-height: 0; } /* Every level — default: off to the right, waiting to be pushed in. */ #ce-occm-panel .ce-occm-level { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(100%); transition: transform var(--ce-occm-transition-speed) var(--ce-occm-transition-ease); background: var(--ce-occm-panel-bg) !important; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; } #ce-occm-panel .ce-occm-level::-webkit-scrollbar { width: 4px; } #ce-occm-panel .ce-occm-level::-webkit-scrollbar-track { background: transparent; } #ce-occm-panel .ce-occm-level::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 2px; } #ce-occm-panel .ce-occm-level--active { transform: translateX(0); } #ce-occm-panel .ce-occm-level--behind { transform: translateX(-100%); } /* ============================================================================= * 11. Level Nav Row * Back button on the LEFT, View All link on the RIGHT. * ========================================================================== */ #ce-occm-panel .ce-occm-level-nav { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: #fafafa !important; border-bottom: 1px solid var(--ce-occm-item-border); flex-shrink: 0; margin: 0; } #ce-occm-panel .ce-occm-view-all-link { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ce-occm-view-all-color) !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; padding: 6px 8px; border-radius: 3px; white-space: nowrap; text-transform: none; letter-spacing: normal; transition: background 0.18s ease, color 0.18s ease; } #ce-occm-panel .ce-occm-view-all-link:hover, #ce-occm-panel .ce-occm-view-all-link:focus-visible { background: var(--ce-occm-view-all-bg-hover) !important; color: var(--ce-occm-view-all-color) !important; outline: none; text-decoration: none !important; } #ce-occm-panel .ce-occm-view-all-link:focus-visible { outline: 2px solid var(--ce-occm-focus-color); outline-offset: 2px; } /* ============================================================================= * 12. Items List * ========================================================================== */ #ce-occm-panel .ce-occm-items { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* ============================================================================= * 13. Item Row * ========================================================================== */ #ce-occm-panel .ce-occm-item { display: block !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--ce-occm-item-border); background: none; list-style: none !important; } #ce-occm-panel .ce-occm-item:last-child { border-bottom: none; } /* Anchor & label share the same inner layout */ #ce-occm-panel .ce-occm-item-link, #ce-occm-panel .ce-occm-item-label { display: flex !important; align-items: center !important; gap: var(--ce-occm-item-gap); width: 100%; min-height: var(--ce-occm-item-min-height); padding: var(--ce-occm-item-pad-y) var(--ce-occm-item-pad-x) !important; color: var(--ce-occm-item-color) !important; font-size: var(--ce-occm-item-font-size) !important; font-weight: var(--ce-occm-item-font-weight) !important; font-family: inherit; text-decoration: none !important; background: transparent !important; transition: background 0.18s ease, color 0.18s ease; cursor: pointer; line-height: 1.3 !important; box-sizing: border-box; outline-offset: -2px; text-transform: none !important; letter-spacing: normal !important; border: none; border-radius: 0; box-shadow: none !important; } #ce-occm-panel .ce-occm-item-link:hover, #ce-occm-panel .ce-occm-item-link:focus-visible { background: var(--ce-occm-item-bg-hover) !important; color: var(--ce-occm-item-color-hover) !important; text-decoration: none !important; outline: none; box-shadow: none !important; } #ce-occm-panel .ce-occm-item-link:focus-visible { outline: 2px solid var(--ce-occm-focus-color); outline-offset: -2px; } /* Static label — not interactive */ #ce-occm-panel .ce-occm-item-label { cursor: default; opacity: 0.65; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; min-height: 38px; color: var(--ce-occm-heading-color) !important; } #ce-occm-panel .ce-occm-item--no-link { pointer-events: none; } /* ============================================================================= * 14. Item Thumbnail * ========================================================================== */ #ce-occm-panel .ce-occm-item-thumb { display: block !important; flex-shrink: 0; width: var(--ce-occm-thumb-size) !important; height: var(--ce-occm-thumb-size) !important; object-fit: cover; border-radius: var(--ce-occm-thumb-radius); background: #f0f0f0; margin: 0 10px 0 0; padding: 0; border: none; } /* ============================================================================= * 15. Item Icon * ========================================================================== */ #ce-occm-panel .ce-occm-item-icon { flex-shrink: 0; font-size: 18px; width: 18px; height: 18px; line-height: 1; color: var(--ce-occm-arrow-color); } #ce-occm-panel .ce-occm-item-link:hover .ce-occm-item-icon, #ce-occm-panel .ce-occm-item-link:focus-visible .ce-occm-item-icon { color: var(--ce-occm-arrow-color-hover); } /* Ensure dashicons render correctly even with Woodmart overrides */ #ce-occm-panel .ce-occm-item-icon.dashicons { font-family: dashicons !important; font-size: 25px; line-height: 1; width: 25px; height: 25px; margin: 0 10px 0 0; } /* ============================================================================= * 16. Item Name * ========================================================================== */ #ce-occm-panel .ce-occm-item-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ============================================================================= * 17. Item Count * ========================================================================== */ #ce-occm-panel .ce-occm-item-count { flex-shrink: 0; font-size: var(--ce-occm-count-font-size); color: var(--ce-occm-count-color); white-space: nowrap; line-height: 1; } /* ============================================================================= * 18. Item Arrow (chevron → indicating drilldown) * ========================================================================== */ #ce-occm-panel .ce-occm-item-arrow { flex-shrink: 0; font-size: 16px; width: 16px; height: 16px; line-height: 1; color: var(--ce-occm-arrow-color); margin-left: auto; transition: transform 0.18s ease, color 0.18s ease; } #ce-occm-panel .ce-occm-item-link:hover .ce-occm-item-arrow, #ce-occm-panel .ce-occm-item-link:focus-visible .ce-occm-item-arrow { transform: translateX(3px); color: var(--ce-occm-arrow-color-hover); } /* ============================================================================= * 19. Item Types * ========================================================================== */ #ce-occm-panel .ce-occm-item--empty .ce-occm-item-label { opacity: 0.5; font-size: 14px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; } /* ============================================================================= * 20. Section Headings * ========================================================================== */ #ce-occm-panel .ce-occm-section + .ce-occm-section { border-top: 6px solid var(--ce-occm-item-border); } #ce-occm-panel .ce-occm-section-heading { margin: 0 !important; padding: var(--ce-occm-heading-pad-y) var(--ce-occm-heading-pad-x) !important; font-size: var(--ce-occm-heading-font-size) !important; font-weight: 700 !important; color: var(--ce-occm-heading-color) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; line-height: 1.4 !important; background: #fafafa !important; border-bottom: 1px solid var(--ce-occm-item-border); border-top: none; border-left: none; border-right: none; -webkit-font-smoothing: antialiased; } /* ============================================================================= * 21. Error Message * ========================================================================== */ #ce-occm-panel .ce-occm-error { margin: 0; padding: 12px var(--ce-occm-item-pad-x); font-size: 13px; color: #b32d2e !important; background: #fdf2f2 !important; border-bottom: 1px solid #f5c6c6; line-height: 1.4; } #ce-occm-panel .ce-occm-empty { padding: 24px var(--ce-occm-item-pad-x); margin: 0; font-size: 14px; color: var(--ce-occm-count-color); text-align: center; } /* ============================================================================= * 22. Reduced Motion * ========================================================================== */ @media (prefers-reduced-motion: reduce) { .ce-occm-panel, .ce-occm-overlay, #ce-occm-panel .ce-occm-level, #ce-occm-panel .ce-occm-item-link, #ce-occm-panel .ce-occm-item-label, #ce-occm-panel .ce-occm-back, #ce-occm-panel .ce-occm-view-all-link, #ce-occm-panel .ce-occm-item-arrow, #ce-occm-panel .ce-occm-item-icon { transition: none !important; animation: none !important; } } /* ============================================================================= * 23. Mobile (≤ 480 px) * ========================================================================== */ @media screen and (max-width: 480px) { :root { --ce-occm-panel-width: 90vw; --ce-occm-item-min-height: 48px; --ce-occm-item-font-size: 14px; --ce-occm-header-height: 52px; } .ce-occm-panel { max-width: 90vw !important; } } /* ============================================================================= * 24. Tablet (481 px – 768 px) * ========================================================================== */ @media screen and (min-width: 481px) and (max-width: 768px) { :root { --ce-occm-panel-width: 340px; } } /* ============================================================================= * 25. High-contrast & Dark-mode hints * ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --ce-occm-panel-bg: #1e1e1e; --ce-occm-header-bg: rgba(230, 239, 253, 1); --ce-occm-item-color: #e0e0e0; --ce-occm-item-color-hover: #ffffff; --ce-occm-item-bg-hover: #2a2a2a; --ce-occm-item-border: rgba(255, 255, 255, 0.08); --ce-occm-heading-color: #888888; --ce-occm-count-color: #777777; --ce-occm-arrow-color: #666666; --ce-occm-arrow-color-hover: #cccccc; --ce-occm-view-all-color: #58a6d8; --ce-occm-view-all-bg-hover: #1a2a33; } #ce-occm-panel .ce-occm-section-heading, #ce-occm-panel .ce-occm-level-nav { background: #242424 !important; } #ce-occm-panel .ce-occm-error { background: #2a1515 !important; color: #f08080 !important; border-color: #5a2020; } } /* ============================================================================= * 26. Multi-Panel Layout * Activated when the admin selects Layout = multi_panel. * On first open the panel shows only the root/left column. * When a main category is clicked the panel expands to reveal the * right/details column which contains a responsive grid of L2 groups * (up to 5 columns, sized naturally to content height). * ========================================================================== */ :root { /* Full width once details column is open — root (280) + details (820) */ --ce-occm-panel-width-multi-panel: 1100px; /* Root/left column width — also the collapsed panel width */ --ce-occm-col-root-width: 280px; --ce-occm-mp-active-accent: #e87722; --ce-occm-mp-active-bg: #fff8f3; --ce-occm-mp-group-title-weight: 700; /* Maximum columns in the details grid — overridable from Style tab */ --ce-occm-mp-max-columns: 5; } /* ── Panel shell: starts at root-column width, expands when details open ── */ .ce-occm-panel--multi-panel { width: var(--ce-occm-col-root-width) !important; transition: transform var(--ce-occm-transition-speed) var(--ce-occm-transition-ease), box-shadow var(--ce-occm-transition-speed) var(--ce-occm-transition-ease), width var(--ce-occm-transition-speed) var(--ce-occm-transition-ease) !important; } .ce-occm-panel--multi-panel.ce-occm-mp-details-open { width: var(--ce-occm-panel-width-multi-panel) !important; } /* ── Two-column body ─────────────────────────────────────────────────────── */ #ce-occm-panel .ce-occm-panel-body--multi-panel { display: flex; flex-direction: row; align-items: flex-start; /* columns take their natural content height */ overflow: hidden; min-height: 100%; } /* ── Root column (left) ──────────────────────────────────────────────────── */ #ce-occm-panel .ce-occm-col-root { width: var(--ce-occm-col-root-width); flex-shrink: 0; align-self: stretch; /* always full height for visual border */ overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--ce-occm-item-border); background: var(--ce-occm-panel-bg) !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; } #ce-occm-panel .ce-occm-col-root::-webkit-scrollbar { width: 4px; } #ce-occm-panel .ce-occm-col-root::-webkit-scrollbar-track { background: transparent; } #ce-occm-panel .ce-occm-col-root::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 2px; } /* In multi-panel mode the root .ce-occm-level is a normal block — not absolute-positioned. Override the default level positioning. */ #ce-occm-panel .ce-occm-panel-body--multi-panel .ce-occm-level { position: static !important; transform: none !important; transition: none !important; inset: auto !important; overflow: visible; height: auto; background: transparent !important; } /* Root-column item overrides: slightly compact to reduce truncation */ #ce-occm-panel .ce-occm-col-root .ce-occm-item-link, #ce-occm-panel .ce-occm-col-root .ce-occm-item-label { font-size: 14px !important; min-height: 46px; padding: 9px 12px !important; } /* ── Active state on selected root item ─────────────────────────────────── */ #ce-occm-panel .ce-occm-col-root .ce-occm-item-link--active { background: var(--ce-occm-mp-active-bg) !important; color: var(--ce-occm-item-color-hover) !important; font-weight: 600 !important; border-left: 3px solid var(--ce-occm-mp-active-accent); padding-left: 9px !important; /* 12px - 3px border */ } /* ── Details column (right) ──────────────────────────────────────────────── */ #ce-occm-panel .ce-occm-col-details { flex: 1; min-width: 0; /* Natural content height — does NOT force full viewport height */ align-self: flex-start; max-height: 100%; /* cap at panel height so it never overflows */ overflow-y: auto; /* scroll only when content actually exceeds max-height */ overflow-x: hidden; background: var(--ce-occm-panel-bg) !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; border-left: 1px solid var(--ce-occm-item-border); } #ce-occm-panel .ce-occm-col-details::-webkit-scrollbar { width: 4px; } #ce-occm-panel .ce-occm-col-details::-webkit-scrollbar-track { background: transparent; } #ce-occm-panel .ce-occm-col-details::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 2px; } /* ── Details header: category title (left) + View All (right) ───────────── */ #ce-occm-panel .ce-occm-mp-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px 12px; background: #fafafa !important; border-bottom: 1px solid var(--ce-occm-item-border); flex-shrink: 0; position: sticky; top: 0; z-index: 1; } #ce-occm-panel .ce-occm-mp-header-title { font-size: 16px !important; font-weight: 700 !important; color: var(--ce-occm-item-color) !important; line-height: 1.2 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } #ce-occm-panel .ce-occm-mp-header-view-all { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 13px !important; font-weight: 600 !important; color: var(--ce-occm-view-all-color) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; padding: 4px 10px; border-radius: 4px; border: 1px solid currentColor; line-height: 1.4; transition: background 0.18s ease, color 0.18s ease; } #ce-occm-panel .ce-occm-mp-header-view-all:hover, #ce-occm-panel .ce-occm-mp-header-view-all:focus-visible { background: var(--ce-occm-view-all-bg-hover) !important; color: var(--ce-occm-view-all-color) !important; text-decoration: none !important; outline: none; } #ce-occm-panel .ce-occm-mp-header-view-all:focus-visible { outline: 2px solid var(--ce-occm-focus-color); outline-offset: 2px; } /* ── Responsive grid of L2 group blocks — column cap from --ce-occm-mp-max-columns ── */ #ce-occm-panel .ce-occm-mp-grid { display: grid; /* Enforce max-columns cap: each column is at least 155px, but also at least 1/N of the container so auto-fill never places more than N columns. */ grid-template-columns: repeat(auto-fill, minmax(max(155px, calc(100% / var(--ce-occm-mp-max-columns))), 1fr)); align-content: start; gap: 0; /* No background trick — per-cell borders avoid gray filler on empty cells */ background: var(--ce-occm-panel-bg); } /* ── Group block ─────────────────────────────────────────────────────────── */ #ce-occm-panel .ce-occm-mp-group { background: var(--ce-occm-panel-bg) !important; border-right: 1px solid var(--ce-occm-item-border); border-bottom: 1px solid var(--ce-occm-item-border); } /* ── L2 group title (clickable heading) ─────────────────────────────────── */ #ce-occm-panel .ce-occm-mp-group-title { display: block !important; padding: 12px 12px 8px !important; font-size: 14px !important; font-weight: var(--ce-occm-mp-group-title-weight) !important; color: var(--ce-occm-item-color) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.3 !important; transition: color 0.18s ease, background 0.18s ease; } #ce-occm-panel .ce-occm-mp-group-title:hover, #ce-occm-panel .ce-occm-mp-group-title:focus-visible { color: var(--ce-occm-mp-active-accent) !important; background: var(--ce-occm-item-bg-hover) !important; text-decoration: none !important; outline: none; } #ce-occm-panel .ce-occm-mp-group-title:focus-visible { outline: 2px solid var(--ce-occm-focus-color); outline-offset: -2px; } /* Standalone (no-children) item: taller click target, subtle style */ #ce-occm-panel .ce-occm-mp-group-title--standalone { padding-bottom: 14px !important; font-style: italic; opacity: 0.85; } /* ── L3 children list ────────────────────────────────────────────────────── */ #ce-occm-panel .ce-occm-mp-children { list-style: none !important; margin: 0 !important; padding: 0 0 10px !important; } #ce-occm-panel .ce-occm-mp-child { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none; } #ce-occm-panel .ce-occm-mp-child-link { display: block !important; padding: 5px 12px 5px 18px !important; font-size: 13px !important; font-weight: 400 !important; color: var(--ce-occm-item-color) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.4 !important; transition: color 0.18s ease, background 0.18s ease; } #ce-occm-panel .ce-occm-mp-child-link:hover, #ce-occm-panel .ce-occm-mp-child-link:focus-visible { color: var(--ce-occm-mp-active-accent) !important; background: var(--ce-occm-item-bg-hover) !important; text-decoration: none !important; outline: none; } #ce-occm-panel .ce-occm-mp-child-link:focus-visible { outline: 2px solid var(--ce-occm-focus-color); outline-offset: -2px; } /* ── Loading indicator (inside details column) ───────────────────────────── */ #ce-occm-panel .ce-occm-mp-loading { padding: 24px 16px; font-size: 14px; color: var(--ce-occm-count-color); text-align: center; margin: 0; } /* ── Mobile: root-only start, full-width when details open ──────────────── */ @media screen and (max-width: 480px) { :root { --ce-occm-panel-width-multi-panel: 100vw; --ce-occm-col-root-width: 150px; } .ce-occm-panel--multi-panel { max-width: 100vw !important; } #ce-occm-panel .ce-occm-col-root .ce-occm-item-link, #ce-occm-panel .ce-occm-col-root .ce-occm-item-label { font-size: 13px !important; padding: 8px 10px !important; } #ce-occm-panel .ce-occm-mp-grid { grid-template-columns: repeat(auto-fill, minmax(max(120px, calc(100% / var(--ce-occm-mp-max-columns))), 1fr)); } #ce-occm-panel .ce-occm-mp-header-title { font-size: 14px !important; } #ce-occm-panel .ce-occm-mp-group-title { font-size: 13px !important; } #ce-occm-panel .ce-occm-mp-child-link { font-size: 12px !important; } } /* ── Tablet: proportional columns ───────────────────────────────────────── */ @media screen and (min-width: 481px) and (max-width: 768px) { :root { --ce-occm-panel-width-multi-panel: 680px; --ce-occm-col-root-width: 210px; } #ce-occm-panel .ce-occm-mp-grid { /* column cap still respected; min size 140px on tablet */ grid-template-columns: repeat(auto-fill, minmax(max(140px, calc(100% / var(--ce-occm-mp-max-columns))), 1fr)); } #ce-occm-panel .ce-occm-mp-header-title { font-size: 15px !important; } } /* ── Reduced motion: disable multi-panel transitions ────────────────────── */ @media (prefers-reduced-motion: reduce) { .ce-occm-panel--multi-panel { transition: none !important; } #ce-occm-panel .ce-occm-mp-group-title, #ce-occm-panel .ce-occm-mp-child-link, #ce-occm-panel .ce-occm-mp-header-view-all { transition: none !important; } } /* ── Mobile drilldown override (desktop=multi_panel, mobile=drilldown) ───── * * When `.ce-occm-panel--active-drilldown` is stamped by JS on a panel whose * HTML was server-rendered as multi_panel, these rules revert the two-column * layout to a single-column drilldown experience: * * - Panel collapses back to standard width (no multi-panel expansion). * - Details column is hidden. * - Root column fills the full panel width and becomes the scrollable root. * - Drilldown levels appended by JS directly to panelBody are positioned * absolutely (covering the root column) exactly as in normal drilldown mode. * ────────────────────────────────────────────────────────────────────────── */ /* Collapse panel to standard drilldown width */ #ce-occm-panel.ce-occm-panel--multi-panel.ce-occm-panel--active-drilldown { width: var(--ce-occm-panel-width) !important; } #ce-occm-panel.ce-occm-panel--multi-panel.ce-occm-panel--active-drilldown.ce-occm-mp-details-open { width: var(--ce-occm-panel-width) !important; } /* Panel body: switch from flex-row back to a positioned block */ #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-panel-body--multi-panel { display: block; position: relative; overflow: hidden; height: 100%; } /* Root column: full width, fills the block */ #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-col-root { width: 100% !important; height: 100%; border-right: none; align-self: auto; } /* Details column: always hidden in drilldown mode */ #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-col-details { display: none !important; } /* Root level inside col-root keeps its static positioning */ #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-col-root .ce-occm-level { position: static !important; transform: none !important; transition: none !important; inset: auto !important; height: auto; overflow: visible; background: transparent !important; } /* Drilldown levels appended as direct children of panelBody overlay the root */ #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-panel-body--multi-panel > .ce-occm-level { position: absolute !important; inset: 0 !important; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(100%) !important; transition: transform var(--ce-occm-transition-speed) var(--ce-occm-transition-ease) !important; background: var(--ce-occm-panel-bg) !important; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; } #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-panel-body--multi-panel > .ce-occm-level--active { transform: translateX(0) !important; } #ce-occm-panel.ce-occm-panel--active-drilldown .ce-occm-panel-body--multi-panel > .ce-occm-level--behind { transform: translateX(-100%) !important; } /* ── Dark mode: multi-panel elements ─────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --ce-occm-mp-active-bg: #2a1a0a; } #ce-occm-panel .ce-occm-col-root .ce-occm-item-link--active { border-left-color: var(--ce-occm-mp-active-accent); } #ce-occm-panel .ce-occm-mp-header { background: #242424 !important; } } /* ============================================================================= * 27. Color Scheme — Force Light / Force Dark * Applied via ce-occm-scheme-{inherit|light|dark} classes stamped on the * trigger button, overlay, and panel by CE_OCCM_Render. * "inherit" adds the class but has no rules — existing media-query behavior * is unchanged. "light" and "dark" override regardless of OS preference. * ========================================================================== */ /* ── Force Light ─────────────────────────────────────────────────────────── */ .ce-occm-trigger.ce-occm-scheme-light { color-scheme: light; } #ce-occm-panel.ce-occm-scheme-light { color-scheme: light; /* Reset every token that the dark media-query overrides on :root */ --ce-occm-panel-bg: #ffffff; --ce-occm-header-bg: rgba(230, 239, 253, 1); --ce-occm-item-color: #222222; --ce-occm-item-color-hover: #000000; --ce-occm-item-bg-hover: #f4f4f4; --ce-occm-item-border: rgba(0, 0, 0, 0.07); --ce-occm-heading-color: #888888; --ce-occm-count-color: #888888; --ce-occm-arrow-color: #303030; --ce-occm-arrow-color-hover: #e87722; --ce-occm-view-all-color: #0073aa; --ce-occm-view-all-bg-hover: #f0f7fb; --ce-occm-mp-active-bg: #fff8f3; } /* Override hardcoded backgrounds set with !important inside dark media-query. Specificity of #ce-occm-panel.ce-occm-scheme-light .child (1,2,0) beats #ce-occm-panel .child (1,1,0), so !important here wins. */ #ce-occm-panel.ce-occm-scheme-light .ce-occm-section-heading, #ce-occm-panel.ce-occm-scheme-light .ce-occm-level-nav { background: #fafafa !important; } #ce-occm-panel.ce-occm-scheme-light .ce-occm-mp-header { background: #fafafa !important; } #ce-occm-panel.ce-occm-scheme-light .ce-occm-error { background: #fdf2f2 !important; color: #b32d2e !important; border-color: #f5c6c6 !important; } /* ── Force Dark ──────────────────────────────────────────────────────────── */ /* Trigger: override the hardcoded light colors */ .ce-occm-trigger.ce-occm-scheme-dark { color-scheme: dark; background: #1e1e1e !important; color: #e0e0e0 !important; border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important; } .ce-occm-trigger.ce-occm-scheme-dark:hover, .ce-occm-trigger.ce-occm-scheme-dark:focus-visible { background: #2a2a2a !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; } /* Panel: apply dark tokens unconditionally (mirrors the dark media-query) */ #ce-occm-panel.ce-occm-scheme-dark { color-scheme: dark; --ce-occm-panel-bg: #1e1e1e; --ce-occm-header-bg: rgba(230, 239, 253, 1); --ce-occm-item-color: #e0e0e0; --ce-occm-item-color-hover: #ffffff; --ce-occm-item-bg-hover: #2a2a2a; --ce-occm-item-border: rgba(255, 255, 255, 0.08); --ce-occm-heading-color: #888888; --ce-occm-count-color: #777777; --ce-occm-arrow-color: #666666; --ce-occm-arrow-color-hover: #cccccc; --ce-occm-view-all-color: #58a6d8; --ce-occm-view-all-bg-hover: #1a2a33; --ce-occm-mp-active-bg: #2a1a0a; } #ce-occm-panel.ce-occm-scheme-dark .ce-occm-section-heading, #ce-occm-panel.ce-occm-scheme-dark .ce-occm-level-nav { background: #242424 !important; } #ce-occm-panel.ce-occm-scheme-dark .ce-occm-mp-header { background: #242424 !important; } #ce-occm-panel.ce-occm-scheme-dark .ce-occm-error { background: #2a1515 !important; color: #f08080 !important; border-color: #5a2020 !important; }