/* ═══════════════════════════════════════════════════════════════ MEGA MENU — Premium Enterprise 2-column (category + subcategory) gastroline-may-2025 theme ════════════════════════════════════════════════════════════════ */ /* * header-b2b.css defines --hdr-gray-bg and --hdr-gray-brd instead of * the workspace-rule aliases --hdr-bg / --hdr-border / --hdr-shadow. * We resolve them here so the rest of this file can use the canonical names. */ :root { --hdr-bg: var(--hdr-gray-bg, #f5f6f7); --hdr-border: var(--hdr-gray-brd, #e2e4e7); --hdr-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); --mega-ease: cubic-bezier(0.22, 1, 0.36, 1); --mega-radius: 12px; --mega-red: var(--hdr-red, #b80000); /* L1 + L2 share one column width (equal panels). */ --mega-col-w: 360px; --mega-rail-w: var(--mega-col-w); --mega-tier2-min: var(--mega-col-w); /* Cap column height; shorter column stretches (grey fill + footer), taller scrolls. */ --mega-col-max-h: min(70vh, 560px); } /* Typography — homepage scale (header-b2b) */ .mega-panel, .mega-drawer__panel { font-family: var(--hdr-font, "Inter", system-ui, sans-serif); color: var(--hdr-body, #1a2333); font-size: 15px; line-height: 1.5; } /* ── Shared thumbnails (reference sizes) ─────────────────────── */ .mega-cat-thumb { border-radius: 8px; border: 1px solid rgba(226, 230, 234, 0.9); object-fit: cover; background: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(12, 28, 46, 0.06); transition: transform 0.25s var(--mega-ease), box-shadow 0.25s var(--mega-ease); } /* Parent categories — icons */ .mega-rail__link .mega-cat-thumb, .mega-rail__link .mega-thumb-placeholder { width: 30px !important; height: 30px !important; min-width: 30px; min-height: 30px; } /* Subcategories */ .mega-sub-link .mega-cat-thumb { width: 26px !important; height: 26px !important; min-width: 26px; min-height: 26px; } .mega-thumb-placeholder { display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--hdr-border); background: linear-gradient(145deg, #fff, var(--hdr-bg)); flex-shrink: 0; color: var(--hdr-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .mega-thumb-placeholder svg { width: 16px; height: 16px; } .mega-icon-arrow { width: 14px; height: 14px; flex-shrink: 0; color: #c5ccd5; transition: color 0.15s ease; } /* Give the desktop mega-menu trigger a visible dropdown cue. */ .has-mega-menu > a { gap: 8px; } .has-mega-menu > a::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-top: -2px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: 0.9; transform: rotate(45deg); transition: transform 0.18s ease, opacity 0.18s ease; } .has-mega-menu:hover > a::after, .has-mega-menu:focus-within > a::after, .has-mega-menu[aria-expanded='true'] > a::after { opacity: 1; transform: rotate(-135deg); } /* ═══════════════════════════════════════════════════════════════ BACKDROP — disabled on desktop (simple dropdown, no dim/blur) ════════════════════════════════════════════════════════════════ */ .mega-backdrop { display: none !important; } /* ═══════════════════════════════════════════════════════════════ DESKTOP PANEL (fixed; JS sets top, left, width — site .wrapper width) ════════════════════════════════════════════════════════════════ */ .mega-panel { position: fixed; left: 0; right: auto; /* Two equal columns by default; single-col when active L1 has no children. */ width: calc(var(--mega-col-w) * 2); min-width: 0; max-width: calc(100vw - 24px); box-sizing: border-box; /* * Above home hero slides (≈998/999) and page content. Sticky header rows * also use 1000 — panel is positioned flush under the nav (no overlap), * and is appended to after the header so equal-z stacking is safe. */ z-index: 1000; background: #fff; border: 1px solid #d8dce2; border-top: 3px solid var(--mega-red); border-radius: 0 0 var(--mega-radius) var(--mega-radius); box-shadow: 0 12px 32px rgba(12, 28, 46, 0.13); overflow: hidden; margin-top: 0; padding-top: 0; opacity: 0; visibility: hidden; transition: none; pointer-events: none; } .mega-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .mega-panel.is-single-col { width: var(--mega-col-w); } .mega-panel.is-single-col .mega-col--rail { border-right: none; } /* Top accent bar removed per design */ .mega-panel__accent { display: none; } /* Decorative background — off for simple dropdown */ .mega-panel__bg { display: none; } .mega-panel__bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.94) 28%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0.35) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 55%); } .mega-panel__bg::after { content: none; } .mega-panel > :not(.mega-panel__bg) { position: relative; z-index: 1; } /* Optional promo banner */ .mega-promo { background: linear-gradient(90deg, rgba(255, 248, 225, 0.95), rgba(255, 243, 224, 0.95)); border-bottom: 1px solid #ffe0b2; padding: 9px clamp(16px, 3vw, 40px); text-align: center; font-size: 14px; font-weight: 500; color: #5d3a00; } /* ═══════════════════════════════════════════════════════════════ 2-COLUMN BODY — level 1 | level 2 (desktop only) ════════════════════════════════════════════════════════════════ */ .mega-body { display: grid; /* L1 and L2 are the same width when L2 is shown. */ grid-template-columns: var(--mega-col-w) var(--mega-col-w); /* Height follows the taller column (each column self-caps via --mega-col-max-h). */ height: auto; align-items: stretch; position: relative; z-index: 1; box-sizing: border-box; } /* Single-column mode: active L1 has no children — hide L2 entirely. */ .mega-panel.is-single-col .mega-body { grid-template-columns: var(--mega-col-w); } .mega-panel.is-single-col .mega-col--tier2 { display: none; } /* Scroll works; scrollbar hidden (reference) */ .mega-col { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; min-height: 0; } .mega-col::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ── Column 1 : Category Rail (solid grey — reference) ─────────── */ .mega-col--rail { position: relative; z-index: 2; display: flex; flex-direction: column; width: var(--mega-col-w); min-width: 0; max-width: var(--mega-col-w); max-height: var(--mega-col-max-h); background: #f4f5f7; border-right: 1px solid #e2e6ea; box-sizing: border-box; /* List scrolls inside; footer stays pinned to the bottom of the rail. */ overflow: hidden; } .mega-rail__scroll { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; padding: 10px 10px 8px; box-sizing: border-box; /* Same fill as rail so stretched space under a short list is never bare white. */ background: #f4f5f7; } .mega-rail__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } .mega-rail__label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mega-red); padding: 0 4px 16px; } /* Indicator bar container — position:relative so indicator can be absolute */ .mega-rail__list-wrap { position: relative; } .mega-rail__indicator { position: absolute; left: 0; width: 3px; border-radius: 0; background: var(--mega-red); box-shadow: none; opacity: 0; pointer-events: none; transition: top 0.2s var(--mega-ease), height 0.2s var(--mega-ease), opacity 0.15s ease; } .mega-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; } .mega-rail__item { margin: 0; } .mega-rail__link { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #2d3748; text-decoration: none; cursor: pointer; border: none; border-left: 2px solid transparent; transition: background 0.14s var(--mega-ease), color 0.14s var(--mega-ease), border-color 0.14s var(--mega-ease); outline: none; } .mega-rail__link:hover { background: #ebedf0; color: #1a2333; border-left-color: #c5ccd5; } .mega-rail__link.is-active { background: #fff; color: var(--mega-red); border-left-color: var(--mega-red); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .mega-rail__link:hover .mega-icon-arrow { color: #9aa3ad; } .mega-rail__link.is-active .mega-icon-arrow { color: var(--mega-red); } .mega-rail__link:focus-visible { outline: 2px solid var(--hdr-red); outline-offset: 2px; } .mega-rail__name { flex: 1; min-width: 0; overflow: visible; text-overflow: unset; white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } /* ── Column 2 — subcategories (fills remaining panel width) ──── */ .mega-col--tier2 { position: relative; z-index: 1; width: var(--mega-col-w); min-width: 0; max-width: var(--mega-col-w); max-height: var(--mega-col-max-h); padding: 10px; border-right: none; background: #fff; box-sizing: border-box; overflow-y: auto; } /* Never show a third mega-menu level (taxonomy grandchildren / nested flyouts). */ .mega-panel .mega-sub-list .sub-menu, .mega-panel .mega-sub-list ul, .mega-panel [data-mega-tier3], .mega-drawer .mega-subacc-direct-link + ul, .mega-drawer .mega-acc-body__inner .sub-menu { display: none !important; } /* Reference: middle column = sub list only (no header block) */ @media (min-width: 768px) { .mega-tier2__head { display: none !important; } } /* ── Column 2 : Subcategory header (mobile drawer only) ─────── */ .mega-tier2__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(226, 230, 234, 0.75); background: rgba(255, 255, 255, 0.5); border-radius: 8px; } .mega-tier2__head-text { min-width: 0; flex: 1; } .mega-tier2__title { display: block; font-size: 18px; font-weight: 800; color: var(--hdr-navy, #003b6b); text-decoration: none; line-height: 1.25; transition: color 0.2s var(--mega-ease); } .mega-tier2__title:hover { color: var(--hdr-red, #b80000); } .mega-tier2__count { display: block; font-size: 13px; color: var(--hdr-muted); margin-top: 4px; } .mega-tier2__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--hdr-red); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 14px rgba(184, 0, 0, 0.28); transition: background 0.22s var(--mega-ease), transform 0.22s var(--mega-ease), box-shadow 0.22s var(--mega-ease); } .mega-tier2__cta:hover { background: #9a0000; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184, 0, 0, 0.35); } .mega-tier2__cta .mega-icon-arrow { color: rgba(255,255,255,0.8); width: 12px; height: 12px; } /* Subcategory list */ .mega-sub-list { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 1px; } .mega-sub-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #2d3748; text-decoration: none; cursor: pointer; border: none; border-left: 2px solid transparent; transition: background 0.14s var(--mega-ease), color 0.14s var(--mega-ease), border-color 0.14s var(--mega-ease); outline: none; } .mega-sub-link::before { content: none; } .mega-sub-link:hover, .mega-sub-link:focus-visible { background: #f4f5f7; color: var(--mega-red); border-left-color: var(--mega-red); } .mega-sub-link:hover .mega-icon-arrow, .mega-sub-link:focus-visible .mega-icon-arrow { color: var(--mega-red); } .mega-sub-link:focus-visible { outline: 2px solid var(--hdr-red); outline-offset: 2px; } .mega-sub__name { flex: 1; min-width: 0; overflow: visible; text-overflow: unset; white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .mega-sub-thumb-placeholder { width: 26px; height: 26px; min-width: 26px; min-height: 26px; border-radius: 6px; border: 1px solid var(--hdr-border); background: linear-gradient(145deg, #fff, var(--hdr-bg)); flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* ── Empty state (no subcategories) ──────────────────────────── */ .mega-empty { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; border: 1px dashed #c5ccd5; border-radius: 10px; background: rgba(255, 255, 255, 0.45); padding: 36px 24px; text-align: center; font-size: 14px; line-height: 1.6; color: #5d6b7a; } .mega-empty::before { content: ''; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239aa3ad'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'/%3E%3C/svg%3E") center / 40px no-repeat; border: none; box-shadow: none; } .mega-empty p { margin: 0; font-weight: 500; } .mega-empty a { display: inline-block; margin-top: 10px; padding: 0; font-size: 14px; font-weight: 700; color: var(--hdr-red, #b80000); background: none; border: none; border-radius: 0; text-decoration: none; transition: color 0.18s ease; } .mega-empty a::after { content: ' →'; } .mega-empty a:hover { color: #9a0000; background: none; transform: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; } .mega-empty--compact { padding: 24px 18px; font-size: 13px; } .mega-empty--compact::before { width: 40px; height: 40px; margin-bottom: 10px; } .mega-empty--compact a { font-size: 13px; padding: 8px 14px; } /* ── Column visibility — JS adds/removes .is-visible ──────────── */ [data-mega-tier2] { display: none; } [data-mega-tier2].is-visible { display: block; /* No enter animation — rail hover was re-running keyframes and looked like a blink */ } /* ═══════════════════════════════════════════════════════════════ FOOTER STRIP — pinned to bottom of L1 rail (no absolute gap) ════════════════════════════════════════════════════════════════ */ .mega-footer { position: relative; z-index: 3; flex: 0 0 auto; width: 100%; margin-top: auto; border-top: 1px solid #e2e6ea; background: #f4f5f7; } .mega-footer__inner { display: flex; align-items: center; justify-content: stretch; padding: 10px 10px; } .mega-footer__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--hdr-navy, #003b6b); color: #fff; padding: 9px 14px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: none; transition: background 0.16s ease; } .mega-footer__cta svg { width: 15px; height: 15px; color: rgba(255,255,255,0.9); } .mega-footer__cta:hover { background: #002a4f; transform: none; } /* ═══════════════════════════════════════════════════════════════ MOBILE TOGGLE BUTTON Shows inside the red hamburger dropdown menu (≤768px). Must visually match the nav link style. ════════════════════════════════════════════════════════════════ */ .mega-mobile-toggle { display: none; /* hidden on desktop, shown via media query below */ align-items: center; gap: 6px; width: 100%; height: 48px; padding: 0 24px; background: none; border: none; border-left: 3px solid transparent; cursor: pointer; font-size: 13.5px; font-weight: 700; font-family: var(--hdr-font); color: #fff; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; line-height: 1; transition: background var(--hdr-transition), border-left-color var(--hdr-transition); } .mega-mobile-toggle:hover, .mega-mobile-toggle.is-open { background: rgba(0, 0, 0, 0.14); border-left-color: #fff; } .mega-mobile-toggle__chevron { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; transition: transform 0.2s ease; } .mega-mobile-toggle.is-open .mega-mobile-toggle__chevron { transform: rotate(180deg); } /* ═══════════════════════════════════════════════════════════════ MOBILE BOTTOM-SHEET DRAWER z-index 8000 — sits above mobile nav dropdown (z-index 100) ════════════════════════════════════════════════════════════════ */ .mega-drawer { position: fixed; inset: 0; z-index: 8000; pointer-events: none; } .mega-drawer.is-open { pointer-events: auto; } .mega-drawer__backdrop { position: absolute; inset: 0; background: rgba(12, 28, 46, 0.50); opacity: 0; transition: opacity 0.25s ease; } .mega-drawer.is-open .mega-drawer__backdrop { opacity: 1; } .mega-drawer__panel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; max-height: 88dvh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--hdr-border) transparent; transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); -webkit-overflow-scrolling: touch; } .mega-drawer.is-open .mega-drawer__panel { transform: translateY(0); } .mega-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 13px; border-bottom: 1px solid var(--hdr-border); position: sticky; top: 0; background: #fff; z-index: 2; } /* Drag handle */ .mega-drawer__header::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; background: var(--hdr-border); border-radius: 4px; } .mega-drawer__title { font-size: 15px; font-weight: 700; color: var(--hdr-body, #1a2333); margin: 0; } .mega-drawer__close { border: 1px solid var(--hdr-border); background: none; border-radius: 50px; padding: 5px 14px; font-size: 15px; font-weight: 600; color: var(--hdr-muted); cursor: pointer; font-family: var(--hdr-font); transition: background 0.13s ease, color 0.13s ease; } .mega-drawer__close:hover { background: var(--hdr-bg); color: var(--hdr-body, #1a2333); } .mega-drawer__body { padding: 16px 16px 32px; } /* Mobile accordion */ .mega-acc { display: flex; flex-direction: column; gap: 8px; } .mega-acc-item { border: 1px solid var(--hdr-border); border-radius: 10px; background: #fff; overflow: hidden; transition: box-shadow 0.2s ease; } .mega-acc-item.is-open { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09); } .mega-acc-trigger { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 14px; background: none; border: none; cursor: pointer; text-align: left; font-size: 15px; font-weight: 700; color: var(--hdr-body, #1a2333); font-family: var(--hdr-font); outline: none; } .mega-acc-trigger:focus-visible { outline: 2px solid var(--hdr-red); outline-offset: -2px; } .mega-acc-trigger .mega-cat-thumb { width: 30px; height: 30px; } .mega-acc-trigger span { flex: 1; text-align: left; } .mega-acc-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--hdr-muted); transition: transform 0.2s ease; } .mega-acc-item.is-open .mega-acc-chevron { transform: rotate(180deg); } /* JS drives max-height via .is-open */ .mega-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.26s ease; } .mega-acc-item.is-open .mega-acc-body { max-height: 2400px; } .mega-acc-body__inner { border-top: 1px solid var(--hdr-border); padding: 10px; display: flex; flex-direction: column; gap: 3px; } .mega-acc-see-all { display: block; text-align: center; background: var(--hdr-red); color: #fff; font-size: 15px; font-weight: 700; padding: 9px 12px; border-radius: 7px; text-decoration: none; margin-bottom: 8px; transition: background 0.13s ease; } .mega-acc-see-all:hover { background: #9a0000; } .mega-subacc-direct-link { display: block; padding: 9px 12px; font-size: 15px; color: var(--hdr-body, #1a2333); text-decoration: none; border-radius: 7px; transition: background 0.12s ease, color 0.12s ease; } .mega-subacc-direct-link:hover { background: var(--hdr-bg); color: var(--hdr-navy); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — mobile only (≤768px; tablet uses desktop flyout) ════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Never show desktop flyout on touch layouts */ .mega-panel, .mega-backdrop, .has-mega-menu > #gl-mega-panel, .has-mega-menu > #gl-mega-backdrop { display: none !important; visibility: hidden !important; pointer-events: none !important; } .has-mega-menu { display: flex !important; flex-flow: row wrap; align-items: stretch; width: 100%; flex-basis: 100%; } .has-mega-menu > a { display: flex !important; flex: 1 1 calc(100% - 48px); max-width: calc(100% - 48px); min-width: 0; width: auto !important; white-space: nowrap; box-sizing: border-box; } .has-mega-menu > a::after { display: none; } .mega-mobile-toggle { display: flex !important; flex: 0 0 48px; width: 48px !important; min-width: 48px; max-width: 48px; height: 48px; padding: 0; margin: 0; justify-content: center; align-items: center; align-self: stretch; box-sizing: border-box; } .mega-mobile-toggle__chevron { margin-left: 0; } /* Inline category panel — expands below PRODUKTER inside red nav */ .has-mega-menu .mega-drawer { display: none; flex: 0 0 100%; position: relative; inset: auto; width: 100%; max-width: 100%; z-index: 2; pointer-events: auto; margin: 0; padding: 0; } .has-mega-menu.is-mega-inline-open .mega-drawer { display: block; } .has-mega-menu .mega-drawer__backdrop { display: none !important; } .has-mega-menu .mega-drawer__panel { position: relative; left: auto; right: auto; bottom: auto; transform: none !important; width: 100%; max-width: 100%; max-height: min(52vh, 420px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 0; box-shadow: none; background: #fff; box-sizing: border-box; } .has-mega-menu .mega-drawer__header { display: none; } .has-mega-menu .mega-drawer__body { padding: 10px 12px 14px; max-width: 100%; box-sizing: border-box; } .has-mega-menu .mega-acc { gap: 6px; max-width: 100%; } .has-mega-menu .mega-acc-item { max-width: 100%; box-sizing: border-box; } .has-mega-menu .mega-acc-trigger { display: flex; flex-wrap: nowrap; align-items: center; min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .has-mega-menu .mega-acc-trigger span { flex: 1 1 auto; min-width: 0; overflow: visible; text-overflow: unset; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .has-mega-menu .mega-acc-chevron { flex: 0 0 auto; flex-shrink: 0; margin-left: 8px; } .has-mega-menu .mega-subacc-direct-link { min-height: 44px; display: flex; align-items: center; word-break: break-word; } /* Submenu sits on white panel inside red nav — override inherited white link color */ .has-mega-menu .mega-drawer, .has-mega-menu .mega-drawer__panel, .has-mega-menu .mega-drawer__body { color: var(--hdr-navy, #003b6b); } .has-mega-menu .mega-acc-trigger { color: var(--hdr-navy, #003b6b); } .has-mega-menu .mega-acc-chevron { color: var(--hdr-navy, #003b6b); opacity: 0.75; } .has-mega-menu .mega-acc-item { background: #fff; border-color: rgba(0, 59, 107, 0.18); } .has-mega-menu .mega-acc-body__inner { background: rgba(0, 59, 107, 0.04); border-top-color: rgba(0, 59, 107, 0.12); } .has-mega-menu .mega-subacc-direct-link { color: var(--hdr-navy, #003b6b); } .has-mega-menu .mega-subacc-direct-link:hover { background: rgba(0, 59, 107, 0.08); color: var(--hdr-navy-dk, #002a4f); } .has-mega-menu .mega-acc-see-all { color: #fff; } } @media (min-width: 768px) { /* Nav trigger stays above the dropdown panel so PRODUKTER stays clickable */ .site-header { position: relative; z-index: 1001; } .has-mega-menu { position: relative; z-index: 1003; } .has-mega-menu > a { display: flex !important; position: relative; z-index: 2; } .mega-panel { z-index: 1000; } .mega-mobile-toggle, .has-mega-menu .mega-drawer { display: none !important; } .has-mega-menu.is-mega-inline-open .mega-drawer { display: none !important; } } /* Narrower equal columns on small desktops */ @media (min-width: 768px) and (max-width: 1100px) { :root { --mega-col-w: 300px; --mega-col-max-h: min(65vh, 500px); } .mega-body { grid-template-columns: var(--mega-col-w) var(--mega-col-w); } .mega-panel.is-single-col .mega-body { grid-template-columns: var(--mega-col-w); } } @media (min-width: 768px) and (max-width: 900px) { :root { --mega-col-w: 260px; --mega-col-max-h: min(60vh, 460px); } .mega-rail__link, .mega-sub-link { font-size: 13px; padding: 6px 10px; } .mega-body { grid-template-columns: var(--mega-col-w) var(--mega-col-w); } .mega-panel.is-single-col .mega-body { grid-template-columns: var(--mega-col-w); } } /* Keep equal columns when viewport is tight */ @media (min-width: 768px) and (max-width: 1200px) { .mega-panel { width: calc(var(--mega-col-w) * 2); max-width: calc(100vw - 24px); } .mega-panel.is-single-col { width: var(--mega-col-w); } .mega-body { grid-template-columns: var(--mega-col-w) var(--mega-col-w); } .mega-panel.is-single-col .mega-body { grid-template-columns: var(--mega-col-w); } } /* ═══════════════════════════════════════════════════════════════ REDUCED MOTION ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .mega-panel, .mega-backdrop, .mega-drawer__panel, .mega-rail__indicator, [data-mega-tier2], .mega-acc-body { transition: none !important; animation: none !important; } }