/* cm-a11y 20260916. Keyboard focus is visible on dark and light backgrounds. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.notification[data-cm-feedback]:focus { outline: 3px solid #0876db !important; outline-offset: 3px !important; box-shadow: 0 0 0 2px #fff !important; }
.cm-menu-parent { position: relative; }
.cm-menu-parent > a { padding-inline-end: var(--cm-toggle-pad, 28px) !important; } /* JS repeats this inline: theme per-item rules use higher-specificity !important */
/* Porto top level: any extra padding wraps the header menu at 1280px. Keep the native padding (JS stores it in
   --cm-native-pad) and let the 16px toggle sit in the gap between this item and the next one. */
.mega-menu > li.cm-menu-parent { --cm-toggle-pad: var(--cm-native-pad, 8px); }
.mega-menu > li.cm-menu-parent > .cm-submenu-toggle { inset-inline-end:calc(-1 * var(--cm-native-pad, 8px)); width:16px; min-width:16px; }
.mega-menu .popup li.cm-menu-parent { --cm-toggle-pad: 28px; }
/* Hiding Porto's arrow made every parent item 12px narrower: the header re-wrapped when the web font loaded (CLS 0.65).
   Keep the arrow's box, invisible, and put the toggle over it. */
.mega-menu.show-arrow > li.cm-menu-parent > a::after { display:inline-block !important; visibility:hidden; }
.mega-menu.show-arrow > li.cm-menu-parent > .cm-submenu-toggle { inset-inline-end:2px; }
/* Journal3 desktop flyout rows natively reserve 16px padding + 8px arrow; 28px wrapped 'Desktop PCs and monitors' on /en/. */
.flyout > .dropdown-menu > .flyout-menu .cm-menu-parent { --cm-toggle-pad: 24px; }
.cm-menu-parent > a::after, .cm-menu-parent > a > .open-menu { display: none !important; }
/* Porto draws its nested-level arrow in a::before; our toggle replaces it. */
.porto-narrow-sub-menu li.cm-menu-parent > a::before { display:none !important; }
/* Toggle: borderless 24x24 hit area, vertically centred on the link (JS sets exact top/colour; 50% is the fallback). */
.cm-menu-parent > .cm-submenu-toggle { position:absolute; inset-inline-end:2px; top:50%; transform:translateY(-50%); z-index:5; display:flex; align-items:center; justify-content:center; width:24px; min-width:24px; height:24px; min-height:24px; margin:0; padding:0; border:0 !important; border-radius:4px; background:transparent !important; box-shadow:none; color:inherit; font-size:0 !important; line-height:1; cursor:pointer; }
.cm-menu-parent > .cm-submenu-toggle.cm-placed { transform:none; }
/* li forced to position:static by the theme (desktop flyout rows inside a scrolling list): toggle stays in flow, JS sets the margins. */
.cm-menu-parent > .cm-submenu-toggle.cm-inflow { position:relative; top:auto; inset-inline-end:auto; transform:none; margin-inline:auto 2px; }
.cm-menu-parent > .cm-submenu-toggle::before { content:""; display:block; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.cm-menu-parent > .cm-submenu-toggle[aria-expanded="true"]::before { transform:translateY(2px) rotate(225deg); }
/* Panels that open sideways (desktop flyout rows, Porto nested levels): chevron points to the inline end, no flip. */
.cm-menu-parent > .cm-submenu-toggle.cm-inflow::before, .porto-narrow-sub-menu li.cm-menu-parent > .cm-submenu-toggle::before,
.cm-menu-parent > .cm-submenu-toggle.cm-inflow[aria-expanded="true"]::before, .porto-narrow-sub-menu li.cm-menu-parent > .cm-submenu-toggle[aria-expanded="true"]::before { transform:translateX(-2px) rotate(-45deg); }
html[dir="rtl"] .cm-menu-parent > .cm-submenu-toggle.cm-inflow::before, html[dir="rtl"] .porto-narrow-sub-menu li.cm-menu-parent > .cm-submenu-toggle::before,
html[dir="rtl"] .cm-menu-parent > .cm-submenu-toggle.cm-inflow[aria-expanded="true"]::before, html[dir="rtl"] .porto-narrow-sub-menu li.cm-menu-parent > .cm-submenu-toggle[aria-expanded="true"]::before { transform:translateX(2px) rotate(135deg); }
.cm-menu-open > .dropdown-menu, .cm-menu-open > .popup, .cm-menu-open > .sub-menu, .cm-menu-open > .collapse { display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; }
.cm-menu-closed > .dropdown-menu, .cm-menu-closed > .popup, .cm-menu-closed > .sub-menu, .cm-menu-closed > .collapse { display:none !important; }
.notification[data-cm-feedback] .notification-close { min-width:32px; min-height:32px; }
.cm-sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
/* Porto hides popups at top:-3000px and shows them only on :hover — mirror that for keyboard. */
.mega-menu > li.cm-menu-open > .popup, .mega-menu > li.menu-item:focus-within > .popup { top:100% !important; }
.mega-menu li.cm-menu-open > .sub-menu, .mega-menu li:focus-within > .sub-menu { display:block !important; visibility:visible !important; opacity:1 !important; }
.mega-menu li.cm-menu-closed > .sub-menu { display:none !important; } /* keyboard close beats :focus-within above */
/* Porto keeps the popup and its links shifted up 5px (translate3d) until :hover; mirror the hover end state. */
.mega-menu > li.cm-menu-open .popup, .mega-menu > li.menu-item:focus-within .popup,
.mega-menu > li.cm-menu-open li.menu-item > a, .mega-menu > li.menu-item:focus-within li.menu-item > a { transform:translate3d(0,0,0) !important; }
/* cm-a11y-ddcontrast: Journal3 header sets main-menu dropdown links to #fff while the scheme background is #fff (white on white). */
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu { background:#1c2024 !important; }
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu > li > a,
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu > li > a > .links-text { color:#fff !important; }
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu > li:hover > a { background:#f0f0f0 !important; color:#1a1a1a !important; }
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu > li > a:focus-visible { background:#f0f0f0 !important; color:#1a1a1a !important; }
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu > li:hover > a > .links-text { color:#1a1a1a !important; }
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown .j-dropdown > .j-menu > li > a:focus-visible > .links-text { color:#1a1a1a !important; }
.desktop-main-menu-wrapper .main-menu-item.multi-level.dropdown > .j-dropdown::before { border-bottom-color:#1c2024 !important; }

/* Porto mobile accordion arrow is made focusable by JS: give it the same visible focus ring. */
.accordion-menu li > .arrow[role="button"]:focus-visible { outline:3px solid #0876db !important; outline-offset:-3px !important; }
/* cm-a11y-item2open: compshop paints main-menu item 2 blue only on :hover; when opened by keyboard/touch it fell back to
   #f1f1f4 under forced-white text and chevron (1.13:1). Mirror the hover background for the open state. */
.desktop-main-menu-wrapper div.main-menu.main-menu-3 > .j-menu > li.main-menu-item-2.dropdown.open > a,
.desktop-main-menu-wrapper div.main-menu.main-menu-3 > .j-menu > li.main-menu-item-2.dropdown.cm-menu-open > a { background-color:rgba(0,80,204,1) !important; }
/* Menu lists clip overflow: draw the focus ring inside the row instead of 3px outside it. */
.j-menu a:focus-visible, .j-menu button:focus-visible, .mega-menu a:focus-visible, .mega-menu button:focus-visible,
.accordion-menu a:focus-visible { outline-offset:-3px !important; box-shadow:inset 0 0 0 5px #fff !important; }
/* Porto only slides the closed off-canvas panel out of view (transform), so its links stayed in the Tab order on every page. */
html:not(.panel-opened) #side-nav-panel { visibility:hidden; transition:transform .3s, visibility 0s .3s; }
html.panel-opened #side-nav-panel { visibility:visible; transition:transform .3s; }
/* The 16px Porto top-level toggle has no room for the white inset ring: keep only the blue inset outline. */
.mega-menu > li.cm-menu-parent > .cm-submenu-toggle:focus-visible { box-shadow:none !important; }
/* comp-parts header cart link: the outset ring was clipped at the top. */
#cart > a:focus-visible { outline-offset:-3px !important; box-shadow:inset 0 0 0 5px #fff !important; }