/* GENERATED by build-header-css.py - do not hand-edit. * Header component dependency closure: 16 classes taken from the markup. */ /* --- design tokens --- */ :root{--gd-blue:#0672ce;--gd-blue-dark:#00468b;--gd-navy:#0e2841;--gd-pale:#d9f1fb;--gd-gray:#f5f6f7;--gd-line:#d2d8de;--gd-text:#0e0e0e;--gd-muted:#4f5b62;--gd-white:#fff} .gd-global-header, .gd-global-header *{box-sizing:border-box} .gd-global-header{width:100%!important;max-width:none!important;margin:0!important} .gd-global-header{font-family:Arial,"Helvetica Neue",sans-serif} .gd-shell{width:min(1320px,calc(100% - 48px));margin-inline:auto} .gd-global-header a{text-decoration:none!important} .gd-global-header__main{min-height:72px;display:grid;grid-template-columns:auto minmax(300px,690px) auto;align-items:center;gap:28px} .gd-global-brand{display:inline-flex;align-items:center;color:#202124!important;font-size:28px;font-weight:700;letter-spacing:-1.2px} .gd-global-brand strong{color:#d71920} .gd-global-search{height:44px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;margin:0!important;padding:0!important;border:1px solid #8c9aa5!important;border-radius:0!important;background:#fff!important;box-shadow:none!important} .gd-global-search input{width:100%!important;min-width:0!important;height:42px!important;margin:0!important;padding:0 15px!important;border:0!important;border-radius:0!important;outline:0!important;background:#fff!important;box-shadow:none!important;color:#222!important;font:14px Arial,"Helvetica Neue",sans-serif!important} .gd-global-search button{width:48px!important;min-width:48px!important;height:42px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-left:1px solid #8c9aa5!important;border-radius:0!important;background:#fff!important;color:#31414d!important;display:grid!important;place-items:center;cursor:pointer} .gd-global-search button:hover{background:#f4f7f9!important;color:var(--gd-blue)!important} .gd-global-icon{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .gd-global-actions{display:flex;align-items:center;gap:12px} .gd-language{position:relative;display:flex;align-items:center;min-width:138px;height:44px} .gd-language>.gd-global-icon{position:absolute;z-index:2;left:11px;width:18px;height:18px;color:#31414d;pointer-events:none} .gd-language .gtranslate_wrapper{width:100%} .gd-language select{display:block!important;width:100%!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0 28px 0 36px!important;border:1px solid #8c9aa5!important;border-radius:0!important;background:#fff!important;color:#263844!important;box-shadow:none!important;font:13px Arial,"Helvetica Neue",sans-serif!important;cursor:pointer} .gd-language select:focus{outline:2px solid var(--gd-blue)!important;outline-offset:1px} .gd-global-menu-toggle{display:none;width:44px;height:44px;margin:0;padding:0;border:1px solid #8c9aa5;background:#fff;color:var(--gd-navy);align-items:center;justify-content:center} .gd-global-menu-toggle svg{width:22px;height:22px} .gd-global-nav{position:relative;z-index:50;border-top:1px solid #eef1f3;border-bottom:1px solid #ccd5db;background:#fff} .gd-global-nav .gd-shell{min-height:52px;display:flex;align-items:center;gap:34px} .gd-global-nav a, .gd-global-nav button{display:inline-flex;align-items:center;gap:7px;color:#1d2d35!important;font:14px Arial,"Helvetica Neue",sans-serif!important;text-decoration:none!important} .gd-global-nav a:hover, .gd-global-nav button:hover{color:var(--gd-blue)!important} .gd-global-nav-item{position:relative;display:flex;align-items:stretch;min-height:52px} .gd-global-nav-trigger{height:52px;margin:0;padding:0;border:0;background:transparent;cursor:pointer} .gd-global-nav-trigger .gd-global-icon{width:14px;height:14px;transition:transform .16s ease} .gd-global-dropdown{position:absolute;z-index:60;top:100%;left:0;width:290px;padding:8px 0;border:1px solid #cbd5dc;border-top:3px solid var(--gd-blue);background:#fff;box-shadow:0 12px 28px rgba(14,40,65,.16);opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .16s ease,transform .16s ease,visibility .16s} .gd-global-dropdown a{display:flex!important;align-items:center!important;min-height:42px!important;padding:9px 18px!important;color:#243946!important;font-size:13px!important;line-height:1.3!important} .gd-global-dropdown a[hidden]{display:none!important} .gd-global-dropdown a:hover, .gd-global-dropdown a:focus{background:#eef6fa!important;color:var(--gd-blue)!important;outline:0} .gd-global-nav-item:hover>.gd-global-dropdown, .gd-global-nav-item:focus-within>.gd-global-dropdown, .gd-global-nav-item.is-open>.gd-global-dropdown{opacity:1;visibility:visible;transform:translateY(0)} .gd-global-nav-item:hover>.gd-global-nav-trigger .gd-global-icon, .gd-global-nav-item:focus-within>.gd-global-nav-trigger .gd-global-icon, .gd-global-nav-item.is-open>.gd-global-nav-trigger .gd-global-icon{transform:rotate(180deg)} .gd-global-nav-cta{min-height:36px;padding:0 17px!important;border:1px solid var(--gd-blue);border-radius:2px;background:var(--gd-blue);color:#fff!important;font-weight:700!important} .gd-global-nav-cta:hover{background:#0063b4!important;color:#fff!important} @media(max-width:1020px){.gd-global-header__main{grid-template-columns:auto 1fr auto;gap:20px}.gd-global-nav .gd-shell{gap:24px}} @media(max-width:700px){.gd-shell{width:min(100% - 28px,1320px)}.gd-global-header__main{min-height:64px;grid-template-columns:1fr auto auto;gap:12px;padding:12px 0}.gd-global-brand{font-size:24px}.gd-global-actions{grid-column:2;grid-row:1}.gd-language{min-width:118px}.gd-global-menu-toggle{display:flex;grid-column:3;grid-row:1}.gd-global-search{width:100%;grid-column:1/-1;grid-row:2}.gd-global-nav{display:none}.gd-global-header.is-menu-open .gd-global-nav{display:block}.gd-global-nav .gd-shell{width:100%;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0}.gd-global-nav-item{display:block;min-height:0;border-bottom:1px solid #e2e7ea}.gd-global-nav-trigger, .gd-global-nav>div>a{width:100%;height:48px;padding:0 20px!important;justify-content:space-between}.gd-global-nav-cta{height:48px!important;border:0!important;border-radius:0!important;justify-content:flex-start!important}.gd-global-dropdown{position:static;width:100%;display:none;padding:0;border:0;border-top:1px solid #d6e4ec;box-shadow:none;opacity:1;visibility:visible;transform:none}.gd-global-nav-item.is-open>.gd-global-dropdown{display:block}.gd-global-dropdown a{min-height:44px!important;padding-left:36px!important}} /* --- brand logo (whole file: same dependency set) --- */ .gd-brand-logo{display:flex!important;width:190px!important;height:48px!important;align-items:center!important;overflow:visible!important;position:relative!important;flex:0 0 190px}.gd-brand-logo img{display:block!important;width:190px!important;max-width:100%!important;height:auto!important;margin:0!important;transform:none!important}@media(max-width:700px){.gd-brand-logo{width:150px!important;height:40px!important;flex-basis:150px}.gd-brand-logo img{width:150px!important;transform:none!important}} /* --- header stacking (see build-header-css.py note) --- */ .gd-global-header{position:relative;z-index:9999;isolation:isolate;transform:translateZ(0)} .gd-global-header__main{position:relative;z-index:2} .gd-global-nav{position:relative;z-index:3} .gd-global-nav-item{position:relative;z-index:1} .gd-global-dropdown{z-index:10000} /* The home hero is a slider: .gd-story__track/__slide carry transforms and * are promoted to compositor layers, which intermittently painted ABOVE the * open dropdown (measured 2 of 3 runs: panel pixels (229,241,253) tinted * instead of (255,255,255) pure white). Giving the hero an explicit * z-index:0 turns it into a level-0 stacking context, so its internal * layers can no longer escape above the header. It is already * position:relative, so this changes stacking only - no layout. */ .gd-story{position:relative;z-index:0} /* --- Products mega menu: three-level cascade --------------------------------- * Visual language = the /catalog/ page (gpc-*): square corners, 1px #d7dde1 / * #e4e8eb hairlines, #0672ce accent, #0e2841 headings. Desktop = hover cascade * (category -> its brands -> that brand's models). Mobile = accordion driven by * the toggles (.gd-mega__cat-toggle / .gd-mega__brand-toggle + .is-open). * Placed last so `.gd-global-nav-item--mega{position:static}` beats the earlier * `.gd-global-nav-item{position:relative}` (equal specificity, order decides) * and the panel anchors to the full-width nav row. * * =========================================================================== * 3.0.4 rewrite. Four MEASURED defects (Chrome 153 @1440, gpuloom.com). * (第一版 3.0.3 只修好了 (2)(3)，(1) 仍然劫持 —— 见 shell-nav.js 里 * 关于「为什么纯延迟不够 / 尾区走廊」的说明。) * * (1) HOVER HIJACK / 长间距 - "从分类滑往品牌会划到另外一个分类上". * `.gd-global-nav a{display:inline-flex}` (0,1,1) outranked * `.gd-mega__cat-link{display:flex}` (0,1,0) so the row links were * shrink-to-fit inside a FIXED 300px column, leaving ~180px of dead space * and pushing the brand column to x=360. Measured: going from "Servers" to * its brands meant ~235px of horizontal drift; the straight line crossed * the column edge at y=211 - the exact top of row 2 (Workstations, * 210.4-252.4) - and that is what switched the panel. * Fixed twice over: the selector is now `.gd-mega .gd-mega__cat-link` * (0,2,0) so a row fills the whole column (there is no dead strip inside the * row at all) and the column itself is only as wide as the widest label * (`--gd-col1`, 170px fallback), so the brand column starts right next to * the labels and the drift is ~100px instead of 235px. The remaining * "empty tail" right of a label is a NEUTRAL CORRIDOR handled in JS. * * (2) THREE COLUMN HEADS AT THREE HEIGHTS - "三列抬头同一水平高度". * `.gd-mega__brands` was `left:100%;top:0` of the HOVERING * `.gd-mega__cat`, and `.gd-mega__models` `left:100%;top:0` of the HOVERING * `.gd-mega__brand` (measured: head y=144, subhead2 y=168.4, * subhead3 y=272.2). Fixed by taking the rows out of the positioning chain * (`position:static`) so BOTH panels start on the SAME line as * `.gd-mega__head` (measured after: all three at y=144). * * (3) HEIGHT / SCROLL - "以分类的高度为限做整体限高，多的能滚，右侧要见滑动条". * Both panels get a FIXED height of `heading block + category list height` * (`--gd-mega-listh`, written by shell-nav.js from the measured category * column; 252px fallback = the 6-row list) with `overflow-y:auto` and a * styled, always-visible scrollbar. Fixed height rather than max-height on * purpose: it makes the panel's hit area a STABLE rectangle covering the * whole column, so a diagonal pointer never lands in a dead gap between * columns (measured: with max-height, a 2-brand column ended at y=247 and * the pointer at y=251 fell through to the bare inner div, which closed the * entire menu). * * (4) WHY `.gd-mega--js` EXISTS - the model column must leave the scroll box. * `.gd-mega__models` is nested inside `.gd-mega__brands` in the markup * (that is what lets :hover / .is-open drive it with no JS), but * `.gd-mega__brands` is `position:absolute` AND a scroll container, so it is * the model column's containing block - and an absolutely positioned box IS * clipped by the scroll container that is its containing block. Measured: * turning the scroll on made the whole model column disappear. * shell-nav.js therefore re-parents every `.gd-mega__models` to * `.gd-mega__inner` and adds `.gd-mega--js`; the two `left` bases below are * NOT interchangeable - one is measured from `.gd-mega__inner`, the other * from the brand panel's padding box. */ .gd-global-header .gd-global-nav-item--mega{position:static} .gd-global-header .gd-mega{position:absolute;z-index:10000;top:100%;left:0;right:0;background:#fff;border-top:1px solid #d2d8de;border-bottom:1px solid #d2d8de;box-shadow:0 16px 28px rgba(14,40,65,.07);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),visibility .18s} .gd-global-header .gd-global-nav-item--mega:hover>.gd-mega,.gd-global-header .gd-global-nav-item--mega:focus-within>.gd-mega,.gd-global-header .gd-global-nav-item--mega.is-open>.gd-mega{opacity:1;visibility:visible;transform:translateY(0)} /* --------------------------------------------------------------------------- * 3.0.6：把上面两条的权重从 (0,1,0) 提到 (0,2,0)。 * * 实测（2026-09-29，用户截图）：只要晚于本文件出现一份 `.gd-global-nav-item * {position:relative}`（权重同 0,1,0，后者胜），`--mega{position:static}` 就被顶掉， * 面板包含块从 `.gd-global-nav`（通栏）掉成 item（只有 Products 按钮宽 ≈75px）， * 内层塌到 26.8px、抬头折三行、分类列溢出、页面内容从面板两侧透出来。 * 项目里就有一份这样的重复表（shell-subpage.css，已在本轮一并去重）， * 但用户浏览器里可能还缓存着一年的 LiteSpeed 合并包 —— 权重提上去以后， * 任何 (0,1,0) 的重复规则都无法再顶掉它（同权重才比顺序）。 * shell-nav.js 里另有一道 healLayout() 兜底：万一还是塌了，用行内样式就地修。 * --------------------------------------------------------------------------- */ /* Q2-a：Products 按钮"选中/悬停变蓝"要去掉。 * 根因不是我们的样式：是主题 Astra 的 `button:hover{background-color: * var(--ast-global-color-1)}`（= #045cb4，权重 0,1,1）压过了 * `.gd-global-nav-trigger{background:transparent}`（0,1,0）。 * 用 (0,3,1)+!important 把按钮的填充色锁死为透明（文字色仍按 :hover 变蓝）。 */ body .gd-global-header .gd-global-nav-item--mega>.gd-global-nav-trigger, body .gd-global-header .gd-global-nav-item--mega>.gd-global-nav-trigger:hover, body .gd-global-header .gd-global-nav-item--mega>.gd-global-nav-trigger:focus, body .gd-global-header .gd-global-nav-item--mega>.gd-global-nav-trigger:focus-visible, body .gd-global-header .gd-global-nav-item--mega>.gd-global-nav-trigger:active, body .gd-global-header .gd-global-nav-item--mega>.gd-global-nav-trigger[aria-expanded="true"]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important} /* Q2-b：把导航条"上方"那条横线移到下方 —— 即去掉 border-top，只留 border-bottom * （打开超级菜单时，底边线正好成为面板的上沿）。 */ body .gd-global-header .gd-global-nav{border-top:0!important} /* 抬头：三列共用同一套度量（行盒 + 下边距完全一致），用类选择器压过主题的 * `p{line-height:1.6}`（元素选择器），否则三个抬头的行盒高度各不相同。 */ .gd-mega__head,.gd-mega__subhead{margin:0 0 12px;color:#61717b;font:600 12px/15px Arial,"Helvetica Neue",sans-serif;letter-spacing:.06em;text-transform:uppercase} /* 行链接铺满可用宽、不换行 —— nowrap 才能让 shell-nav.js 量到真实的内容宽 * （窄于内容时收缩会折行，量出来就偏小）。 */ .gd-mega .gd-mega__cat-link,.gd-mega .gd-mega__brand-link{display:flex;box-sizing:border-box;white-space:nowrap} .gd-mega__cat-link{align-items:center;gap:10px;padding:11px 10px;border-bottom:1px solid #e4e8eb;color:#314652!important;font-size:14px;text-decoration:none!important} /* 高亮跟着"行本身"而不是"整列的块"：指针在行尾空白区时不高亮，与"不切换"一致， * 不会出现"高亮在 A、面板是 B"。 */ .gd-mega .gd-mega__cat-link:hover,.gd-mega__cat:focus-within>.gd-mega__cat-link,.gd-mega__cat.is-open>.gd-mega__cat-link{background:#eef6fa;color:#0672ce!important;font-weight:700} .gd-mega__n{color:#8b9aa5;font-size:12px} .gd-mega .gd-mega__cat-link:hover .gd-mega__n,.gd-mega__cat.is-open>.gd-mega__cat-link .gd-mega__n{color:#0672ce} .gd-mega__cat{position:static} .gd-mega__brand{position:static} .gd-mega__brand-link{align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid #eef1f3;color:#314652!important;font-size:14px;text-decoration:none!important} .gd-mega .gd-mega__brand-link:hover,.gd-mega__brand:focus-within>.gd-mega__brand-link,.gd-mega__brand.is-open>.gd-mega__brand-link{background:#eef6fa;color:#0672ce!important;font-weight:700} .gd-mega__models a{display:block;padding:8px 10px;border-bottom:1px solid #eef1f3;color:#0e2841!important;font-size:13px;line-height:1.35;text-decoration:none!important} .gd-mega__models a:hover,.gd-mega__models a:focus{background:#eef6fa;color:#0672ce!important} .gd-mega__models .gd-mega__all{border-bottom:0;margin-top:4px;color:#0672ce!important;font-weight:700} /* ===================== 桌面：三列同顶 + 限高滚动 ===================== */ @media(min-width:701px){ /* --gd-col1 由 shell-nav.js 按最宽的行的实测宽度覆写（这里只是兜底）。 * --gd-mega-head 是抬头块的实测高度（line-height 15px + margin 12px）； * --gd-mega-listh 是分类列的实测高度。 */ .gd-mega__inner{--gd-col1:170px;--gd-col2:220px;--gd-col3:340px;--gd-mega-gap:16px;--gd-mega-head:27px;--gd-mega-listh:252px;position:relative;width:min(100% - 48px,1320px);margin:0 auto;padding:18px 0 24px} .gd-mega__cats{width:var(--gd-col1)} /* 列 2：品牌。top 与 .gd-mega__head 同行 -> 抬头齐平；高度 = 抬头块 + 分类列， * 固定高度让命中区成为覆盖整列的稳定矩形（用 max-height 会留出"掉下去"的空隙）。 */ .gd-mega__brands{position:absolute;left:var(--gd-col1);top:18px;width:var(--gd-col2);display:none;padding:0 0 0 var(--gd-mega-gap);border-left:1px solid #e4e8eb;height:calc(var(--gd-mega-listh) + var(--gd-mega-head));overflow-y:auto;overscroll-behavior:contain} .gd-mega__cat:hover>.gd-mega__brands,.gd-mega__cat:focus-within>.gd-mega__brands,.gd-mega__cat.is-open>.gd-mega__brands{display:block} /* 列 3：型号。包含块 = .gd-mega__inner（JS 已把它搬出滚动容器）。 */ .gd-mega--js .gd-mega__models{position:absolute;left:calc(var(--gd-col1) + var(--gd-col2));top:18px;width:var(--gd-col3);display:none;padding:0 0 0 var(--gd-mega-gap);border-left:1px solid #e4e8eb;height:calc(var(--gd-mega-listh) + var(--gd-mega-head));overflow-y:auto;overscroll-behavior:contain} .gd-mega--js .gd-mega__models.is-open{display:block} /* 无 JS 兜底：列 3 还嵌在 .gd-mega__brands 里，包含块是那个面板，left 要按它的 * padding box 量（面板有 1px 左边框，故 -1px）。这一条与上一条左侧基准不同， * 不要合并。此时也不能有 overflow，否则列 3 会被裁没。 */ .gd-mega:not(.gd-mega--js) .gd-mega__models{position:absolute;left:calc(var(--gd-col2) - 1px);top:0;width:var(--gd-col3);display:none;padding:0 0 0 var(--gd-mega-gap);border-left:1px solid #e4e8eb} .gd-mega:not(.gd-mega--js) .gd-mega__brand:hover>.gd-mega__models,.gd-mega:not(.gd-mega--js) .gd-mega__brand:focus-within>.gd-mega__models,.gd-mega:not(.gd-mega--js) .gd-mega__brand.is-open>.gd-mega__models{display:block} /* 有 JS 时级联只认 .is-open（悬停意图），中和 :hover 让"路过"不再能赢。 * ⚠️ 这个"中和"只在 JS **真的接管**了悬停意图时才允许出现 —— 也就是 * `gd-mega--intent`。布局搬迁（gd-mega--js）按宽度生效，而意图逻辑需要 * "精细指针"；两者混用会出这个 bug：触屏本/粗指针下 CSS 已是桌面布局 * （品牌面板成了 overflow 滚动容器），JS 却不接管，中和规则又把 :hover 关掉 * —— 品牌能显示、型号列永远不出来，用户说"鼠标放上去没反应"。 * 粗指针下由 shell-nav.js 的 switchNow() 用 .is-open 即时驱动级联 * （因为列 3 已被搬到 .gd-mega__inner，:hover 选择器再也匹配不上）。 */ .gd-mega--intent .gd-mega__cat:hover:not(.is-open)>.gd-mega__brands{display:none} .gd-mega--js .gd-mega__cat.is-open>.gd-mega__brands{display:block} /* 无 JS 兜底：品牌面板不能当滚动容器，否则挪不出位置的列 3 会被它裁没。 */ .gd-mega:not(.gd-mega--js) .gd-mega__brands{overflow:visible} /* 滑动条：显式画出来。Windows 常显，macOS 的 overlay 条默认藏起来， * 而这里要的正是"看得见当前滚动位置"。 */ .gd-mega__brands,.gd-mega--js .gd-mega__models{scrollbar-width:thin;scrollbar-color:#c3ccd3 #f5f6f7} .gd-mega__brands::-webkit-scrollbar,.gd-mega--js .gd-mega__models::-webkit-scrollbar{width:8px} .gd-mega__brands::-webkit-scrollbar-track,.gd-mega--js .gd-mega__models::-webkit-scrollbar-track{background:#f5f6f7} .gd-mega__brands::-webkit-scrollbar-thumb,.gd-mega--js .gd-mega__models::-webkit-scrollbar-thumb{background:#c3ccd3;border-radius:4px;border:1px solid #f5f6f7} .gd-mega__brands::-webkit-scrollbar-thumb:hover,.gd-mega--js .gd-mega__models::-webkit-scrollbar-thumb:hover{background:#9aa8b3} .gd-global-nav-cta{margin-left:auto} } @media(max-width:1020px){.gd-mega__inner{--gd-col1:160px;--gd-col2:200px;--gd-col3:300px}} /* 移动端 accordion 的切换按钮，桌面隐藏 */ .gd-mega .gd-mega__cat-toggle,.gd-mega .gd-mega__brand-toggle{display:none} @media(max-width:700px){ /* 移动端要把权重提到与桌面基线同级的 (0,2,0)，否则压不过上面那条 (0,2,0) 基线规则 */ .gd-global-header .gd-global-nav-item--mega{position:relative} .gd-global-header .gd-mega{position:static;display:none;width:100%;border:0;border-top:1px solid #d6e4ec;box-shadow:none;opacity:1;visibility:visible;transform:none} .gd-global-nav-item--mega.is-open>.gd-mega{display:block} .gd-mega__inner{display:block;width:100%;padding:4px 0 8px} .gd-mega__head{padding:8px 20px 2px;margin:0} .gd-mega__cats{width:100%} /* 移动端恢复定位上下文：切换按钮要挂在行上，面板回到文档流。 */ .gd-mega__cat,.gd-mega__brand{display:block;position:relative} .gd-mega .gd-mega__cat-link,.gd-mega .gd-mega__brand-link{white-space:normal} .gd-mega__cat-link,.gd-mega__brand-link{min-height:48px;padding:12px 64px 12px 20px;border-bottom:1px solid #e4e8eb} .gd-mega .gd-mega__cat-toggle,.gd-mega .gd-mega__brand-toggle{display:inline-flex;position:absolute;right:0;top:0;width:52px;height:48px;align-items:center;justify-content:center;border:0;border-left:1px solid #e4e8eb;background:#fff;color:#314652;cursor:pointer;padding:0} .gd-mega__cat-toggle .gd-global-icon,.gd-mega__brand-toggle .gd-global-icon{width:16px;height:16px;transition:transform .18s cubic-bezier(.23,1,.32,1)} .gd-mega__cat.is-open>.gd-mega__cat-toggle .gd-global-icon,.gd-mega__brand.is-open>.gd-mega__brand-toggle .gd-global-icon{transform:rotate(180deg)} .gd-mega__brands,.gd-mega__models{position:static;left:auto;top:auto;width:auto;display:none;padding:0;border-left:0;height:auto;overflow:visible} .gd-mega__cat.is-open>.gd-mega__brands,.gd-mega__brand.is-open>.gd-mega__models{display:block} .gd-mega__subhead{padding:8px 20px 4px;margin:0} .gd-mega__brand{padding-left:12px} .gd-mega__brand-link{min-height:44px;padding:10px 64px 10px 32px} .gd-mega__models a{min-height:44px;padding:10px 20px 10px 44px} }