/* ============================================================================= * Floating sub-category quick-nav (left side of product category archives). * * Markup is in `template-parts/products/section-side-nav.php`. The component * lives in two states: * * - Expanded (default): full panel visible on the left, content shifts to * its right via `padding-left` on so the panel * never overlaps the page content. * - Collapsed: panel slides off-screen to the left, only a slim * vertical "tab" sticks out so the user can re-open. * * The toggle is animated with a `transform`/`width` transition so the move * feels physical. * ========================================================================== */ :root { --sg-cat-sidenav-width: 240px; --sg-cat-sidenav-tab-width: 28px; --sg-cat-sidenav-top: 180px; --sg-cat-sidenav-z: 90; --sg-cat-sidenav-bg: #fff; --sg-cat-sidenav-border: #e8e8e8; --sg-cat-sidenav-text: #333; --sg-cat-sidenav-muted: #888; --sg-cat-sidenav-accent: #c00; --sg-cat-sidenav-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .sg-cat-sidenav { position: fixed; top: var(--sg-cat-sidenav-top); left: 0; width: calc(var(--sg-cat-sidenav-width) + var(--sg-cat-sidenav-tab-width)); max-width: 100vw; max-height: calc(100vh - var(--sg-cat-sidenav-top) - 40px); display: flex; flex-direction: row; align-items: flex-start; z-index: var(--sg-cat-sidenav-z); font-family: inherit; color: var(--sg-cat-sidenav-text); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; pointer-events: none; /* let only the inner panel + toggle take clicks */ } .sg-cat-sidenav > * { pointer-events: auto; } /* When collapsed the whole component slides left until only the toggle tab * (anchored to the right edge of the wrapper) remains visible. */ .sg-cat-sidenav.is-collapsed { transform: translateX(calc(-1 * var(--sg-cat-sidenav-width))); } /* ------------------------- Panel ------------------------- */ .sg-cat-sidenav__panel { flex: 0 0 var(--sg-cat-sidenav-width); width: var(--sg-cat-sidenav-width); max-width: var(--sg-cat-sidenav-width); max-height: calc(100vh - var(--sg-cat-sidenav-top) - 40px); background: var(--sg-cat-sidenav-bg); border: 1px solid var(--sg-cat-sidenav-border); border-left: none; border-radius: 0 8px 8px 0; box-shadow: var(--sg-cat-sidenav-shadow); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .sg-cat-sidenav__panel::-webkit-scrollbar { width: 6px; } .sg-cat-sidenav__panel::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } /* ------------------------- Accordion group ------------------------- */ .sg-cat-sidenav__group + .sg-cat-sidenav__group { border-top: 1px solid #f0f0f0; } .sg-cat-sidenav__group-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; margin: 0; border: 0; background: linear-gradient(135deg, #c00 0%, #a00 100%); color: #fff; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.2px; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; } .sg-cat-sidenav__group-header:hover, .sg-cat-sidenav__group-header:focus-visible { background: linear-gradient(135deg, #a00 0%, #800 100%); outline: none; } .sg-cat-sidenav__group-header--leaf { color: #fff; } .sg-cat-sidenav__group-header--leaf.is-active { background: linear-gradient(135deg, #800 0%, #600 100%); } .sg-cat-sidenav__group-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-cat-sidenav__group-count { flex: 0 0 auto; min-width: 22px; padding: 2px 6px; font-size: 11px; line-height: 1; text-align: center; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; } .sg-cat-sidenav__group-chevron { flex: 0 0 auto; color: rgba(255, 255, 255, 0.85); transition: transform 0.25s ease; } .sg-cat-sidenav__group.is-open .sg-cat-sidenav__group-chevron { transform: rotate(180deg); } /* Collapsible list — animated via max-height. The fixed upper bound is * generous enough for any sensible category tree; if a group ever has more * than ~25 children, just bump the value below. We pair it with opacity so * the items don't visually flicker through the chevron animation. */ .sg-cat-sidenav__list { margin: 0; padding: 0; list-style: none; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.2s ease; } .sg-cat-sidenav__group.is-open .sg-cat-sidenav__list { max-height: 1200px; opacity: 1; padding: 6px 0; } .sg-cat-sidenav__item { margin: 0; } .sg-cat-sidenav__link { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; line-height: 1.35; color: var(--sg-cat-sidenav-text); text-decoration: none; border-left: 3px solid transparent; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .sg-cat-sidenav__link:hover, .sg-cat-sidenav__link:focus-visible { background: #faf3f3; color: var(--sg-cat-sidenav-accent); outline: none; } .sg-cat-sidenav__item.is-active > .sg-cat-sidenav__link { color: var(--sg-cat-sidenav-accent); font-weight: 600; background: #fef6f6; border-left-color: var(--sg-cat-sidenav-accent); } .sg-cat-sidenav__bullet { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #ccc; transition: background-color 0.15s; } .sg-cat-sidenav__link:hover .sg-cat-sidenav__bullet, .sg-cat-sidenav__item.is-active > .sg-cat-sidenav__link .sg-cat-sidenav__bullet { background: var(--sg-cat-sidenav-accent); } .sg-cat-sidenav__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-cat-sidenav__chevron { flex: 0 0 auto; color: var(--sg-cat-sidenav-muted); } /* ------------------------- Toggle (right edge tab) ------------------------- */ .sg-cat-sidenav__toggle { flex: 0 0 var(--sg-cat-sidenav-tab-width); width: var(--sg-cat-sidenav-tab-width); min-width: var(--sg-cat-sidenav-tab-width); min-height: 96px; padding: 12px 4px; margin: 0; border: 1px solid var(--sg-cat-sidenav-border); border-left: none; border-radius: 0 6px 6px 0; background: linear-gradient(135deg, #c00 0%, #a00 100%); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 4px 0 10px rgba(0, 0, 0, 0.08); align-self: flex-start; transition: background-color 0.2s; font: inherit; } .sg-cat-sidenav__toggle:hover, .sg-cat-sidenav__toggle:focus-visible { background: linear-gradient(135deg, #a00 0%, #800 100%); outline: none; } .sg-cat-sidenav__toggle-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 140px; overflow: hidden; text-overflow: ellipsis; opacity: 0; visibility: hidden; transition: opacity 0.2s 0.15s; } .sg-cat-sidenav__toggle-icon { display: block; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* When collapsed: * - the chevron points right (open direction) * - the vertical label is shown so the tab tells visitors what's hidden. */ .sg-cat-sidenav.is-collapsed .sg-cat-sidenav__toggle-icon { transform: rotate(180deg); } .sg-cat-sidenav.is-collapsed .sg-cat-sidenav__toggle-label { opacity: 1; visibility: visible; } /* ------------------------- Responsive ------------------------- */ @media (max-width: 1280px) { :root { --sg-cat-sidenav-width: 220px; } } @media (max-width: 992px) { :root { --sg-cat-sidenav-width: 240px; --sg-cat-sidenav-top: 140px; } /* On tablets / phones the panel covers content when open, so we default * to collapsed and let users opt-in. JS handles the persisted state but * if the user has never toggled, we want it tucked away. */ .sg-cat-sidenav:not(.is-user-toggled) { transform: translateX(calc(-1 * var(--sg-cat-sidenav-width))); } .sg-cat-sidenav:not(.is-user-toggled) .sg-cat-sidenav__toggle-label { opacity: 1; visibility: visible; } .sg-cat-sidenav:not(.is-user-toggled) .sg-cat-sidenav__toggle-icon { transform: rotate(180deg); } } @media (max-width: 480px) { :root { --sg-cat-sidenav-width: 78vw; --sg-cat-sidenav-top: 120px; } } /* Print: hide entirely. */ @media print { .sg-cat-sidenav { display: none !important; } }