/* ==========================================================
   Ampy header: mega menu, matched to prototype v5
   Requires the "Inner 1200" wrapper inside each dropdown.
   Order matters: later blocks rely on document order to beat
   equally specific !important rules above them.
   ========================================================== */

.mega-anchor {
    --mega-max: 1280px;
    --mega-max-products: 1040px;
    --mega-gutter: 28px;
    --mega-rule: rgba(15, 18, 60, 0.1);
}

/* ----------------------------------------------------------
   Panel: full bleed backdrop
   ---------------------------------------------------------- */
.mega-anchor .brx-dropdown-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    left: 0;
    right: 0;
    margin-top: 0;
    padding: 36px 0 !important;
    border-radius: 0 !important;
    background: #f5f9ff !important;
    border-bottom: 1px solid #dbe4f0;
    box-shadow: 0 22px 36px -28px rgba(15, 18, 60, 0.2);
}

/* Wrapper: the centred content column */
.mega-anchor .brx-dropdown-content > * {
    width: 100% !important;
    max-width: var(--mega-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: var(--mega-gutter) !important;
}

.mega-anchor .brx-dropdown-content figure.caption figcaption {
    display: none;
}

/* ----------------------------------------------------------
   Tjanster (1) and Ovrigt (4): four ruled columns
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(1) .brx-dropdown-content > *,
.mega-anchor .brx-nav-nested-items > li:nth-child(4) .brx-dropdown-content > * {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px 0 !important;
    align-items: start !important;
    align-content: start !important;
    justify-items: stretch !important;
    justify-content: stretch !important;
    padding-block: 0 !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(1) .brx-dropdown-content > * > .brxe-div,
.mega-anchor .brx-nav-nested-items > li:nth-child(4) .brx-dropdown-content > * > .brxe-div {
    width: 100% !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    padding: 0 24px !important;
    border-left: 1px solid var(--mega-rule) !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(1) .brx-dropdown-content > * > .brxe-div:first-child,
.mega-anchor .brx-nav-nested-items > li:nth-child(4) .brx-dropdown-content > * > .brxe-div:first-child {
    padding-left: 0 !important;
    border-left: 0 !important;
}

/* ----------------------------------------------------------
   Produkter (2): tile zone plus guide rail
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * {
    max-width: var(--mega-max-products) !important;
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    padding-block: 0 !important;
}

/* Tile zone: column, both tiles stretched to equal width */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:first-child {
    flex: 1 1 60% !important;
    max-width: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
}

/* The prototype separates the zones with a border, not a divider element */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-divider {
    display: none !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:last-child {
    flex: 0 0 260px !important;
    min-width: 0 !important;
    padding: 0 0 0 30px !important;
    border-left: 1px solid var(--mega-rule) !important;
}

/* Each tile fills the zone */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a {
    width: 100% !important;
    align-self: stretch !important;
    padding: 14px !important;
    gap: 20px !important;
    border-radius: 20px !important;
    align-items: center !important;
}

/* Text block takes the slack */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a > .brxe-div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* White image plate. Prototype: 170x124, padding 0, image covers.
   Caption "none" makes Bricks emit a bare <img class="brxe-image">,
   so this must not be scoped to figure. */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-image {
    flex: 0 0 170px !important;
    width: 170px !important;
    max-width: 170px !important;
    height: 124px !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    overflow: hidden !important;
}

/* Kept in case a caption is re-enabled and the figure returns */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content figure.brxe-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Arrow pinned right, never shrinks */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a > .brxe-icon {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Arrow shape: masked SVG, immune to icon fonts and font fallback */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a > .brxe-icon::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 12px !important;
    background-color: #00a991 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0.6 6h16M11.9 1.5 16.4 6 11.9 10.5' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0.6 6h16M11.9 1.5 16.4 6 11.9 10.5' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ----------------------------------------------------------
   Losningar (3): four cards
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content {
    padding-block: 40px !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding-block: 0 !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div {
    min-height: 230px !important;
    border-radius: 20px !important;
    padding: 20px !important;
    overflow: hidden !important;
}

/* ==========================================================
   Typography, measured from prototype v5.
   Overrides Bricks element settings and theme classes,
   including the gradient text treatment, inside the mega menu.
   ========================================================== */

/* Column headings: flat navy, no gradient fill */
.mega-anchor .brx-dropdown-content .brxe-icon-box,
.mega-anchor .brx-dropdown-content .brxe-icon-box * {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 27px !important;
    color: #0f123c !important;
    background: none !important;
    -webkit-text-fill-color: #0f123c !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
}

.mega-anchor .brx-dropdown-content .brxe-icon-box {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.mega-anchor .brx-dropdown-content .brxe-icon-box svg,
.mega-anchor .brx-dropdown-content .brxe-icon-box img {
    width: 22px !important;
    height: 22px !important;
}

/* Column menu links */
.mega-anchor .brx-dropdown-content .brxe-nav-menu a {
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 23.25px !important;
    color: #565e82 !important;
    padding: 7px 11px !important;
    border-radius: 8px !important;
}

/* Produkter tile text */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a h3 {
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 31.5px !important;
    color: #0f123c !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a p {
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    color: #565e82 !important;
}

/* Guide rail label and links */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:last-child > span:first-child {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 18.75px !important;
    letter-spacing: 1.75px !important;
    text-transform: uppercase !important;
    color: #6a7190 !important;
    margin-bottom: 12px !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:last-child > a {
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    color: #565e82 !important;
    padding: 9px 0 !important;
}

/* Losningar card text */
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div h3 {
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    color: #fff !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18.9px !important;
    color: #fff !important;
    max-width: none !important;
}

/* ----------------------------------------------------------
   Populart descriptions (menu 32)
   ---------------------------------------------------------- */
.mega-anchor .menu-item-desc {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 20.25px !important;
    color: #6a7190 !important;
    margin-top: 1px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Title above, description below. Bricks makes these links flex. */
.mega-anchor .brx-dropdown-content .brxe-nav-menu a:has(.menu-item-desc) {
    display: block !important;
    padding: 7px 11px !important;
    line-height: 23.25px !important;
    border-radius: 8px !important;
}

/* The drawer keeps plain titles, as in the prototype */
.brx-offcanvas-inner .menu-item-desc {
    display: none !important;
}

/* ----------------------------------------------------------
   CTA pulse dot. Requires class ampy-cta on the button.
   Prototype (root font-size 10px, so 1rem = 10px):
     .cta::after { width:1rem; height:1rem; border-radius:50%;
                   background:var(--ap-mint); position:absolute;
                   bottom:-.5rem; left:calc(50% - .5rem);
                   animation:cta_dot 1.6s ease-in-out infinite }
   ---------------------------------------------------------- */
.mega-anchor .brxe-button.ampy-cta {
    position: relative;
}

.mega-anchor .brxe-button.ampy-cta::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: -5px;
    left: calc(50% - 5px);
    border-radius: 50%;
    background: #55ff9a;
    animation: cta_dot 1.6s ease-in-out infinite;
}

@keyframes cta_dot {
    0%   { box-shadow: 0 0 rgba(85, 255, 154, 0.4); }
    50%  { box-shadow: 0 0 3px 6px rgba(85, 255, 154, 0.55); }
    100% { box-shadow: 0 0 6px 9px rgba(85, 255, 154, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mega-anchor .brxe-button.ampy-cta::after {
        animation: none;
    }
}

/* ----------------------------------------------------------
   Losningar cards: hover lift and arrow chip fill
   Prototype:
     .lcard:hover     { transform:translateY(-.4rem);
                        box-shadow:0 1.6rem 3.6rem -1.2rem rgba(15,18,60,.35) }
     .lcard:hover .go { background:var(--ap-teal);
                        border-color:transparent;
                        transform:translateX(.3rem) }
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px -12px rgba(15, 18, 60, 0.35) !important;
}

/* The chip is an inline <i>, so it needs flex sizing to hold 36px */
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div .brxe-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 17px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    transition: background 0.2s ease-out, transform 0.2s ease-out !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div:hover .brxe-icon {
    background: #00a991 !important;
    border-color: transparent !important;
    transform: translateX(3px) !important;
}

/* ----------------------------------------------------------
   Produkter tiles: tint the row, nudge the arrow
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a {
    transition: background 0.2s ease-out !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a:hover {
    background: rgba(0, 169, 145, 0.06) !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a > .brxe-icon {
    opacity: 0.75;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a:hover > .brxe-icon {
    opacity: 1 !important;
    transform: translateX(3px) !important;
}

/* ----------------------------------------------------------
   Guide rail links (Produkter): the word changes colour.
   Prototype: .gitem:hover { color: var(--ap-teal) }
   Bricks emits #brxe-xxxxxx:hover { background-color:
   rgba(129,212,250,.5) }, which reads as a button.
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:last-child > a {
    transition: color 0.2s ease-out !important;
}

.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:last-child > a:hover {
    color: #00a991 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ----------------------------------------------------------
   Column menu links: teal text on a faint teal wash.
   Prototype: .mitem:hover { color:var(--ap-teal);
                             background:rgba(0,169,145,.06) }
              .mitem:hover span { color:var(--ink-muted) }
   Bricks fires hover on the li, not the a.
   ---------------------------------------------------------- */
.mega-anchor .brx-dropdown-content .brxe-nav-menu a {
    transition: color 0.2s ease-out, background-color 0.2s ease-out !important;
}

.mega-anchor .brx-dropdown-content .brxe-nav-menu .bricks-nav-menu > li:hover > a,
.mega-anchor .brx-dropdown-content .brxe-nav-menu li:hover > a,
.mega-anchor .brx-dropdown-content .brxe-nav-menu a:hover {
    color: #00a991 !important;
    background: rgba(0, 169, 145, 0.06) !important;
    background-color: rgba(0, 169, 145, 0.06) !important;
    border-radius: 8px !important;
}

/* Description stays muted while the title goes teal */
.mega-anchor .brx-dropdown-content .brxe-nav-menu .bricks-nav-menu > li:hover > a .menu-item-desc,
.mega-anchor .brx-dropdown-content .brxe-nav-menu li:hover > a .menu-item-desc,
.mega-anchor .brx-dropdown-content .brxe-nav-menu a:hover .menu-item-desc {
    color: #565e82 !important;
}

/* ----------------------------------------------------------
   Small screens: the drawer takes over
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    .mega-anchor .brx-dropdown-content > * {
        padding-inline: 20px !important;
    }
}

/* ----------------------------------------------------------
   Wide screens: cap and round the panel.
   Prototype: @media (min-width:1700px) { .mega {
     width:min(100vw,148rem); border:1px solid var(--hairline);
     border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg) } }
   Root font-size is 10px there, so 148rem = 1480px, --r-lg = 20px.
   Every dropdown gets the same 1480 card; only the inner
   padding differs, which is what varies the content width.
   The 1px subtraction compensates for the side borders.
   ---------------------------------------------------------- */
@media (min-width: 1700px) {

    /* Panel drops back to a transparent shell. Listed per
       dropdown because the rules above set padding-block with
       higher specificity. */
    .mega-anchor .brx-dropdown-content,
    .mega-anchor .brx-nav-nested-items > li:nth-child(1) .brx-dropdown-content,
    .mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content,
    .mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content,
    .mega-anchor .brx-nav-nested-items > li:nth-child(4) .brx-dropdown-content {
        background: transparent !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Wrapper is the visible card, flush with the bar's lower edge */
    .mega-anchor .brx-dropdown-content > * {
        max-width: 1480px !important;
        margin-top: calc(var(--apspace-3xs) * 2 + 1px) !important;
        background: #f5f9ff !important;
        border: 1px solid #dbe4f0 !important;
        border-top: 0 !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 22px 36px -28px rgba(15, 18, 60, 0.2) !important;
        padding-inline: calc((1480px - var(--mega-max)) / 2 + var(--mega-gutter) - 1px) !important;
    }

    .mega-anchor .brx-nav-nested-items > li:nth-child(1) .brx-dropdown-content > *,
    .mega-anchor .brx-nav-nested-items > li:nth-child(4) .brx-dropdown-content > * {
        padding-block: 36px !important;
    }

    /* Produkter: same 1480 card, narrower content via more padding */
    .mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * {
        max-width: 1480px !important;
        padding-block: 36px !important;
        padding-inline: calc((1480px - var(--mega-max-products)) / 2 + var(--mega-gutter) - 1px) !important;
    }

    .mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * {
        padding-block: 40px !important;
    }
}

/* ----------------------------------------------------------
   Page dim while a dropdown is open, and the header hairline
   vanishing, both as the prototype does it.
     .dim { position:fixed; inset:0; background:rgba(9,11,50,.20);
            opacity:0; z-index:60 }
     body.menu-open .dim { opacity:1; pointer-events:auto }
   Prototype z-order: .hdr 100 > .mega 90 > .dim 60, and on open
   the header's border-bottom becomes 1px rgba(0,0,0,0).
   The dim starts at the section's lower edge rather than
   inset:0, because a ::before with a positive z-index paints
   over its own element's background and would tint the bar.
   ---------------------------------------------------------- */
.mega-anchor {
    position: relative !important;
    z-index: 100 !important;
}

/* Bar and panel above the dim */
.mega-anchor > * {
    position: relative;
    z-index: 2;
}

.mega-anchor::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    background: rgba(9, 11, 50, 0.20);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    z-index: 1;
}

.mega-anchor:has(.brx-nav-nested-items > li.open)::before {
    opacity: 1;
    pointer-events: auto;
}

/* Hairline disappears while a dropdown is open */
.mega-anchor:has(.brx-nav-nested-items > li.open) {
    border-bottom-color: transparent !important;
}

/* ----------------------------------------------------------
   Active page in the dropdown menus: white text on the dark
   highlight. The :is(#ampy, ...) wrapper is a specificity
   lift, not a real id. Bricks paints the active colour from
   an id-scoped rule, which outranks any class selector, so
   :is() borrows id-level weight while still matching on the
   WordPress current-menu classes.
   ---------------------------------------------------------- */
.mega-anchor .brx-dropdown-content .brxe-nav-menu :is(#ampy, .current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent) > a {
    color: #fff !important;
}

.mega-anchor .brx-dropdown-content .brxe-nav-menu :is(#ampy, .current-menu-item, .current_page_item, .current-menu-ancestor, .current-menu-parent) > a .menu-item-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Keep it white on hover too, so it doesn't flip to teal */
.mega-anchor .brx-dropdown-content .brxe-nav-menu :is(#ampy, .current-menu-item, .current_page_item) > a:hover,
.mega-anchor .brx-dropdown-content .brxe-nav-menu :is(#ampy, .current-menu-item, .current_page_item):hover > a {
    color: #fff !important;
}

.mega-anchor .brx-dropdown-content .brxe-nav-menu :is(#ampy, .current-menu-item, .current_page_item) > a:hover .menu-item-desc,
.mega-anchor .brx-dropdown-content .brxe-nav-menu :is(#ampy, .current-menu-item, .current_page_item):hover > a .menu-item-desc {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================
   MOBILE DRAWER, matched to prototype v5 at 428px
   Prototype:
     .drawer { position:fixed; top:var(--header-h); right:0;
               width:min(100%,44rem); height:calc(100dvh - var(--header-h));
               background:#fff; z-index:95; overflow-y:auto }
     .drawer__eyebrow { font-size:1.1rem; font-weight:400;
                        letter-spacing:.1em; text-transform:uppercase;
                        color:#73757d; padding:3.2rem 2rem .8rem }
     .drawer__list { padding:0 2rem }
     .acc__head { display:flex; justify-content:space-between;
                  padding:1.5rem 0; font-size:1.9rem; font-weight:400;
                  color:#14151a; border-bottom:1px solid #d5d5dc }
     .drawer__foot { margin-top:1.2rem; padding:2rem 2rem 2.4rem }
     .drawer__cta { height:5.6rem; border-radius:1.5rem;
                    background:var(--ap-teal); font-size:1.8rem;
                    font-weight:600; icon before label }
   Prototype root font-size is 10px, so 44rem = 440px, 1.1rem = 11px.
   ========================================================== */

/* Panel: slides in below the bar, white, not full screen */
.brxe-offcanvas .brx-offcanvas-inner {
    position: fixed !important;
    top: 66px !important;
    right: 0 !important;
    left: auto !important;
    width: min(100%, 440px) !important;
    height: calc(100dvh - 66px) !important;
    background: #fff !important;
    padding: 0 !important;
    row-gap: 0 !important;
    overflow-y: auto !important;
}

.brxe-offcanvas .brx-offcanvas-inner > .brxe-block {
    padding: 0 !important;
    background: transparent !important;
    row-gap: 0 !important;
    border-radius: 0 !important;
}

/* No logo or close row inside the drawer: the bar toggle closes it */
.brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div:first-child {
    display: none !important;
}

/* MENY eyebrow */
.brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-text-basic {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #73757d !important;
    padding: 32px 20px 8px !important;
    margin: 0 !important;
}

/* List inset */
.brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div:nth-child(3) {
    padding: 0 20px !important;
}

/* Rows: contiguous 55px, hairline separated, no white cards */
.brxe-offcanvas .brxe-accordion-nested > .brxe-block {
    margin: 0 !important;
}

.brxe-offcanvas .accordion-title-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #d5d5dc !important;
    min-height: 0 !important;
}

.brxe-offcanvas .accordion-title-wrapper h3,
.brxe-offcanvas .accordion-title-wrapper .brxe-heading {
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #14151a !important;
}

/* Footer and CTA. row-reverse puts the phone icon before the label. */
.brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div:nth-child(4) {
    margin-top: 12px !important;
    padding: 20px 20px 24px !important;
    row-gap: 0 !important;
}

.brxe-offcanvas .brxe-button {
    height: 56px !important;
    border-radius: 15px !important;
    background: #00a991 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    justify-content: center !important;
    flex-direction: row-reverse !important;
}

/* Rating row: not present in the prototype. Delete this rule to keep it. */
.brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div:nth-child(4) > .brxe-block {
    display: none !important;
}

/* ----------------------------------------------------------
   Header toggle: burger, then a plated close mark.
   Prototype:
     .burger        { width:46px; height:46px; display:flex;
                      align-items:center; justify-content:center; gap:5px }
     .burger span   { width:24px; height:3px; background:#090b32;
                      border-radius:3px }
     .burger__close { position:absolute; width:46px; height:46px;
                      background:#e7ecf4; border-radius:14px }
     .burger__close svg { viewBox 0 0 24 24, path M18 6L6 18M6 6l12 12,
                          so the X spans 50% of the box: about 8px visible.
                          toggle-close.svg spans 83% of a 17x17 box, so its
                          mask box is 10px to land on the same visible size. }
   The plate and mark are pseudo-elements because Bricks paints the
   toggle's own background from an id-scoped rule that outranks
   class selectors even with !important.
   ---------------------------------------------------------- */
.mega-anchor .brxe-toggle {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
}

.mega-anchor .brxe-toggle > svg {
    width: 24px !important;
    height: auto !important;
    position: relative;
    z-index: 1;
}

.mega-anchor .brxe-toggle > svg * {
    fill: #090b32 !important;
    stroke: #090b32 !important;
}

.mega-anchor .brxe-toggle.is-active > svg,
.mega-anchor .brxe-toggle.is-active > img,
.mega-anchor .brxe-toggle.is-active > i {
    display: none !important;
}

.mega-anchor .brxe-toggle.is-active::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 46px !important;
    height: 46px !important;
    background-color: #e7ecf4 !important;
    border-radius: 14px !important;
}

.mega-anchor .brxe-toggle.is-active::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #3c4260 !important;
    -webkit-mask: url(https://ampy.se/wp-content/uploads/toggle-close.svg) no-repeat center / contain;
    mask: url(https://ampy.se/wp-content/uploads/toggle-close.svg) no-repeat center / contain;
}

/* ----------------------------------------------------------
   Mobile bar: 66px, matching the prototype.
   Prototype: @media (max-width:992px){ :root{--header-h:6.6rem} }
     .hdr      { height:66px; padding:0; background:#f5f9ff }
     .hdr__in  { padding:0 16px; max-width:1280px }
     .cta      { height:4.2rem; padding:0 1.9rem; font-size:1.5rem }
   This is what the drawer's top:66px offset depends on. Without
   it the Bricks bar measures 87px and the drawer sits 21px up
   behind it. The inner container is 65px so the section's 1px
   border-bottom brings the total to exactly 66.
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    .mega-anchor {
        padding: 0 !important;
    }

    .mega-anchor > .brxe-container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .mega-anchor > .brxe-container > .brxe-container {
        padding: 0 16px !important;
        height: 65px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------
   CTA icons: the SVG root inherits the button colour, but the
   inner paths ship a hardcoded stroke="#1e1e1e" that wins.
   ---------------------------------------------------------- */
.mega-anchor .brxe-button svg,
.mega-anchor .brxe-button svg *,
.brxe-offcanvas .brxe-button svg,
.brxe-offcanvas .brxe-button svg * {
    stroke: #fff !important;
}

.mega-anchor .brxe-button svg [fill]:not([fill="none"]),
.brxe-offcanvas .brxe-button svg [fill]:not([fill="none"]) {
    fill: #fff !important;
}

/* ==========================================================================
   AMPY HEADER — v6 corrections  (append AFTER the existing mega-menu CSS)
   Verified live on ampy.se/batterilagring/ against prototype v5.
   Prototype root is 62.5% => 1rem = 10px; all values below are prototype rem*10.
   Equal or higher-specificity rules placed later win, so this patches the base
   sheet without editing it.

   NOTE ON THE DRAWER: the mobile burger does NOT open because BOTH toggles
   render with data-interactions="[]" — the toggleOffCanvas interaction is
   missing on the live element (not just a stale selector). That is a Bricks
   editor fix, not CSS. See the chat for the two-toggle rewire steps.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOP-LEVEL BAR LINKS  (Tjanster / Produkter / Losningar / Ovrigt)
   1:1 with prototype .nav__link. IMPORTANT: in this Bricks build the label
   node DIV.brx-submenu-toggle does NOT paint a background (an inline
   !important background is ignored on it), so the teal wash + 2px teal
   underline go on the LI, which does paint. Label weight/colour stay on the
   toggle. The dropdown is nudged down 2px so it opens at the underline, not
   over it. (Verified live: wash + underline render, underline sits at the
   panel seam, wash fills to the bar top, radius 0.)
   -------------------------------------------------------------------------- */
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li > .brx-submenu-toggle {
    font-weight: 500 !important;
    color: #0f123c !important;
}
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li {
    box-sizing: border-box !important;
    padding-top: 7px !important;
    margin-top: -7px !important;
    border-bottom: 2px solid transparent !important;
    transition: background .2s ease-out, border-color .2s ease-out !important;
}
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li:hover,
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li.open,
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li.active,
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li.brx-open {
    background: rgba(0, 169, 145, .09) !important;
    border-bottom-color: #00a991 !important;
}
:is(#ampy, .mega-anchor) .brx-nav-nested-items > li > .brx-dropdown-content {
    margin-top: 2px !important;
}

/* --------------------------------------------------------------------------
   2. CTA BUTTON (.ampy-cta) — prototype .cta: 16/600, radius 15px, height 48px,
   padding 0 26px. Bricks element ships 500 + a radius token. (Verified live.)
   -------------------------------------------------------------------------- */
:is(#ampy, .mega-anchor) .brxe-button.ampy-cta {
    font-weight: 600 !important;
    border-radius: 15px !important;
    height: 48px !important;
    padding: 0 26px !important;
}

/* --------------------------------------------------------------------------
   3. LÖSNINGAR CARD TITLE — base sheet wrongly pins 16/300; prototype .lcard h4
   is 20/600, tracking -.01em, text-shadow. (Verified live.)
   -------------------------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    text-shadow: 0 1px 6px rgba(9, 11, 50, .5) !important;
}
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div p {
    text-shadow: 0 1px 5px rgba(9, 11, 50, .55) !important;
}
.mega-anchor .brx-nav-nested-items > li:nth-child(3) .brx-dropdown-content > * > .brxe-div .brxe-icon {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
}

/* --------------------------------------------------------------------------
   4. PRODUKTER TILES — prototype .ptile__img has a 1px line-soft border + soft
   shadow; the .go arrow rests at opacity .35 (base sheet uses .75). Guide rail
   sits 24px off the tiles, not 32px. (Verified live; plates render correctly.)
   -------------------------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-image {
    border: 1px solid rgba(15, 18, 60, .06) !important;
    box-shadow: 0 4px 12px -6px rgba(15, 18, 60, .14) !important;
}
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content .brxe-block:first-child > a > .brxe-icon {
    opacity: .35 !important;
}
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * {
    gap: 24px !important;
}

/* ==========================================================================
   DRAWER FIX — mobile off-canvas open reveal + slide.
   Close is handled by the header burger (flips to X, same data-selector).
   ========================================================================== */
.mega-anchor .brxe-offcanvas.brx-open,
.mega-anchor .brxe-offcanvas.brx-open .brx-offcanvas-inner { visibility: visible !important; }

.mega-anchor .brxe-offcanvas .brx-offcanvas-inner { transform: translateX(100%); transition: transform .22s ease-out; }
.mega-anchor .brxe-offcanvas.brx-open .brx-offcanvas-inner { transform: translateX(0) !important; }

/* ==========================================================================
   HEADER FIXES — desktop CTA alignment + mobile drawer Produkter/Lösningar
   ========================================================================== */

/* Desktop: the burger is visibility:collapse but still reserves flex space,
   pushing the CTA off the right edge. Hide it above mobile so the CTA sits
   flush with the container content edge. :is() lift beats the id-scoped rule. */
@media (min-width: 768px) {
    :is(#ampy, .mega-anchor) .brxe-toggle { display: none !important; }
}

/* Mobile drawer — Produkter: make the product tiles full-width of their column */
.brxe-offcanvas .brxe-accordion-nested a.brxe-div { width: 100% !important; }

/* Mobile drawer — Lösningar: full-width row dividers (Lösningar panel only) */
.brxe-offcanvas .brxe-accordion-nested > *:nth-child(3) a.brxe-text-basic {
    display: block !important;
    width: 100% !important;
    align-self: stretch !important;
    border-bottom: 1px solid #d5d5dc !important;
    padding: 12px 0 !important;
}

/* Dropdown lists must not expand on hover. Bricks auto-adds
   .bricks-nav-menu:hover{gap:1px}; the prototype has no hover gap. */
.mega-anchor .bricks-nav-menu:hover { gap: 0 !important; }

/* ==========================================================================
   CTA (.ampy-cta) mobile: 1:1 with prototype v5 at iPhone 13 mini (375px).
   The base v6 rule pins padding 0 26px and height 48px at every width, and the
   Bricks button theme adds letter-spacing, a fluid font, and its own shadow, so
   the button renders larger than the prototype on phones. This resets the box
   to the prototype's measured values. Same specificity as the base rule and
   placed later, so it wins on source order. Verified live: width 136.98px,
   identical to the prototype. Append AFTER the v6 block.
   ========================================================================== */
@media (max-width: 992px) {
    :is(#ampy, .mega-anchor) .brxe-button.ampy-cta {
        padding: 0 15px !important;
        height: 44px !important;
        font-size: 13.5px !important;
        line-height: 20.25px !important;
        letter-spacing: normal !important;
        box-shadow: 0 4px 12px -5px rgba(0, 169, 145, 0.5) !important;
    }
}

/* ==========================================================================
   Mobile drawer: match prototype nested levels (append AFTER the v6 block).
   The existing drawer CSS styles only the top-level accordion titles, so the
   nested sub-accordion titles and leaf links fall back to Bricks defaults
   (fluid 14px, weight 300, grey, a navy-gradient sub-heading, rounded links,
   no dividers). These rules bring every level below the first to the
   prototype's spec. Verified at 375px (iPhone 13 mini).
   ========================================================================== */
@media (max-width: 992px) {

    /* L2 sub-accordion headings (Tjanster > Elinstallationer, Belysning, ...).
       Live renders these as an icon-box with a navy-gradient span; the
       prototype is a solid 18 / 500 / #14151a, so the gradient fill is killed. */
    .brxe-offcanvas .accordion-content-wrapper .accordion-title-wrapper .brxe-icon-box span {
        font-size: 18px !important;
        font-weight: 500 !important;
        color: #14151a !important;
        background: none !important;
        -webkit-text-fill-color: #14151a !important;
    }
    .brxe-offcanvas .accordion-content-wrapper .accordion-title-wrapper {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
        border-radius: 0 !important;
    }

    /* Leaf links (Tjanster items, Produkter guide links, Losningar links):
       16 / 400 / #14151a, light divider, square corners so the divider is
       flat instead of curled by the Bricks radius. */
    .brxe-offcanvas .accordion-content-wrapper a {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #14151a !important;
        border-bottom: 1px solid #d5d5dc !important;
        border-radius: 0 !important;
    }

    /* Produkter product-name links (Laddboxar, Solcellsbatteri) are a level up:
       16 / 300, navy #0f123c, with the heavier divider. */
    .brxe-offcanvas .accordion-content-wrapper a.brxe-div {
        font-weight: 300 !important;
        color: #0f123c !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    }
}

/* ==========================================================================
   Mobile drawer: submenu, matched to prototype v5 at 375px.
   Use this INSTEAD of the earlier geometry-only block. Append AFTER the
   "match prototype nested levels" block. Verified at 375px (iPhone 13 mini).
   ========================================================================== */
@media (max-width: 992px) {

    /* L2 leading icon (Elinstallationer, Belysning, ...): size to the
       prototype's 24px. Without this it collapses to 0 and disappears. */
    .brxe-offcanvas .accordion-content-wrapper .accordion-title-wrapper .brxe-icon-box .icon {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
    }
    .brxe-offcanvas .accordion-content-wrapper .accordion-title-wrapper .brxe-icon-box .icon svg,
    .brxe-offcanvas .accordion-content-wrapper .accordion-title-wrapper .brxe-icon-box .icon img {
        width: 24px !important;
        height: 24px !important;
    }
    .brxe-offcanvas .accordion-content-wrapper .accordion-title-wrapper .brxe-icon-box {
        gap: 10px !important;
    }

    /* Neutralise the Bricks nested insets so every level shares the list
       frame. Horizontal only: row heights are left untouched. */
    .brxe-offcanvas .accordion-content-wrapper,
    .brxe-offcanvas .accordion-content-wrapper > *,
    .brxe-offcanvas .accordion-content-wrapper .brxe-accordion-nested,
    .brxe-offcanvas .accordion-content-wrapper .brxe-accordion-nested > .brxe-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Leaf links span the full width so dividers reach the list edge. */
    .brxe-offcanvas .accordion-content-wrapper a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Section indents: Tjanster (1) and Produkter (2) run their sub-content
       in to 34; Losningar (3) stays at the list edge. */
    .brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div > .brxe-accordion-nested > .brxe-block:nth-child(1) > .accordion-content-wrapper,
    .brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div > .brxe-accordion-nested > .brxe-block:nth-child(2) > .accordion-content-wrapper {
        padding-left: 14px !important;
    }
    .brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div > .brxe-accordion-nested > .brxe-block:nth-child(1) .accordion-content-wrapper a,
    .brxe-offcanvas .brx-offcanvas-inner > .brxe-block > .brxe-div > .brxe-accordion-nested > .brxe-block:nth-child(3) .accordion-content-wrapper a {
        padding-left: 38px !important;
    }

    /* Produkter tiles (Laddboxar, Solcellsbatteri): transparent row, 50px
       white thumbnail plate, name, arrow pinned right. Matches .m-prod. */
    .brxe-offcanvas .accordion-content-wrapper a.brxe-div {
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .brxe-offcanvas .accordion-content-wrapper a.brxe-div img.brxe-image {
        flex: 0 0 50px !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        background: #fff !important;
        border-radius: 10px !important;
        object-fit: contain !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        filter: none !important;
    }
    .brxe-offcanvas .accordion-content-wrapper a.brxe-div span.brxe-text-basic {
        color: #14151a !important;
    }
    .brxe-offcanvas .accordion-content-wrapper a.brxe-div .brxe-icon {
        margin-left: auto !important;
        color: #9a9aa0 !important;
        font-size: 15px !important;
    }

    /* Guide-rail eyebrow label (Guider & verktyg): small, regular, uppercase. */
    .brxe-offcanvas .accordion-content-wrapper .brxe-block > span.brxe-text-basic {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #73757d !important;
        letter-spacing: 1.1px !important;
        text-transform: uppercase !important;
    }

    /* Tap / hover wash on the leaf rows (prototype .m-item:active). */
    .brxe-offcanvas .accordion-content-wrapper a:hover,
    .brxe-offcanvas .accordion-content-wrapper a:active {
        background: rgba(0, 169, 145, 0.06) !important;
        color: #00a991 !important;
    }
}

@media (max-width: 1024px) {
  #brx-header :is(#ampy, .mega-anchor) .brxe-toggle {
    display: flex !important;
  }
}

/* ==========================================================================
   PARITY PASS 2026-07-26 — append, keep last in this file.
   Verifierat live mot prototyp v5 vid 1879px (desktop) och 390px (drawer).
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP BAR: prototypen ar 76px hog och innehallet 1224px brett
   (1280 container minus 2x28 padding). Live matte 84px / 1245px.
   De tva nastlade containrarna lade pa 14px + 7px extra i vanster,
   och logotypen renderades 140px istallet for 130px.
   Matning efter: 76 / logo x 328 / CTA hoger 1552 / span 1224 = prototyp.
   -------------------------------------------------------------------------- */
.brx-sticky .mega-anchor{
  padding-top:3px !important;
  padding-bottom:3px !important;
}
.brx-sticky .mega-anchor > .brxe-container{
  padding-left:28px !important;
  padding-right:28px !important;
  align-items:center !important;
}
.brx-sticky .mega-anchor > .brxe-container > .brxe-container{
  width:100% !important;
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.brx-sticky .mega-anchor .brxe-block:has(> .brxe-logo){ padding-left:0 !important; }
.brx-sticky .mega-anchor .brxe-logo{ margin-bottom:0 !important; }
.brx-sticky .mega-anchor img.bricks-site-logo{
  width:130px !important;
  height:40px !important;
  object-fit:contain !important;
}

/* --------------------------------------------------------------------------
   MOBIL DRAWER
   -------------------------------------------------------------------------- */
@media (max-width:992px){

  /* Produktraderna: prototypen har 18px namn, 16px gap, och en bild som
     FYLLER plattan. "contain" pa en 4:3-bild i en 50x50-ruta ger brevlada,
     darfor sag den bade mindre och suddigare ut an prototypen.
     Selektorn matchar den befintliga regeln exakt sa denna vinner pa
     kallordning. */
  .brxe-offcanvas .accordion-content-wrapper a.brxe-div{
    gap:16px !important;
  }
  .brxe-offcanvas .accordion-content-wrapper a.brxe-div img.brxe-image{
    object-fit:cover !important;
    padding:1px !important;            /* prototyp: 48px bild i 50px platta */
  }
  .brxe-offcanvas .accordion-content-wrapper a.brxe-div span.brxe-text-basic{
    font-size:18px !important;
    line-height:1.5 !important;
    font-weight:500 !important;
  }

  /* Panelen: Bricks lagger 8.3px padding pa tva nastlade block, vilket ger
     16px extra luft over forsta produktbilden, plus 8.3px gap mellan
     raderna. Prototypen har 0 och 0 — raderna ligger kant i kant.
     Matning efter: rad1 0 / bild 16 / rad2 83 = prototyp. */
  .brxe-offcanvas .accordion-content-wrapper > .brxe-block{
    padding-top:0 !important;
  }
  .brxe-offcanvas .accordion-content-wrapper > .brxe-block > .brxe-block{
    padding-top:0 !important;
    padding-bottom:0 !important;
    row-gap:0 !important;
  }

  /* ...men "Guider & verktyg" behaller sin luft.
     Prototypens .m-sub-label: margin 32px 8px. Ger etiketten pa 198. */
  .brxe-offcanvas .accordion-content-wrapper .brxe-block > span.brxe-text-basic{
    margin-top:32px !important;
    margin-bottom:8px !important;
  }

  /* CTA:n far inte radbrytas. Etiketten ar 107px + 30px padding = 137px och
     knappen far exakt 137px i baren vid 390px. Noll marginal: allt smalare,
     eller minsta layout-ryck nar ladan oppnas, och texten gar i tva rader
     inuti en pill med last hojd. */
  :is(#ampy, .mega-anchor) .brxe-button.ampy-cta{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
  :is(#ampy, .mega-anchor) .brxe-button.ampy-cta *{
    white-space:nowrap !important;
  }
}

@media (max-width:389px){
  :is(#ampy, .mega-anchor) .brxe-button.ampy-cta{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* Panelen ska mota barens underkant. Kortets margin-top var 15px, avstamd
   mot den gamla 84px-baren (li-underkant 69 + 15 = 84). Baren ar nu 76px och
   li-underkanten 65, sa 15px blev 4px for langt och lamnade en glipa.
   11px = 76 - 65. Galler bara >=1700 dar wrappern ar det synliga kortet;
   under 1700 ar panelen sjalv ytan och den ligger redan kant i kant. */
@media (min-width:1700px){
  .mega-anchor .brx-dropdown-content > *{ margin-top:10px !important; }
}

/* ==========================================================================
   MOBILPASS 2026-07-26 — append, keep last in this file.

   Desktop-blocket ovan ar oscopat och lacker in i mobilbaren. Fyra saker:
   3+3px padding, 28px sidopadding pa yttre containern, den inre containerns
   16px nollstalld, och logotypen last till 130px. Detta aterstaller
   mobilvardena. (Alternativet: lagga hela desktop-blocket i
   @media (min-width:993px) — samma resultat, men da rors ett block du
   redan verifierat pa desktop.)

   Uppmatt vid 390px mot prototyp v5:
   bar 66 / logo x16 w100 / CTA hoger 312 / burgare hoger 374 / gap 16.
   Hero-stacken foljer med: banner y76, h1 y175, CTA y403.
   ========================================================================== */
@media (max-width:992px){

  /* Baren ar 66px: inre container 65 + 1px border. De 3+3px fran
     desktop-blocket gjorde den 72, vilket ocksa slog ut ladans top:66px. */
  .brx-sticky .mega-anchor{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  /* Prototypens .hdr__in har 16px sidopadding, inte 28. */
  .brx-sticky .mega-anchor > .brxe-container{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .brx-sticky .mega-anchor > .brxe-container > .brxe-container{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Logotypen ar 130x40 pa desktop men 100x31 i prototypens mobilbar. */
  .brx-sticky .mega-anchor img.bricks-site-logo{
    width:100px !important;
    height:31px !important;
  }

  /* CTA -> burgare: prototypen har 16px. Bricks gap ar 5.2px, och en
     nollbred offcanvas EFTER burgaren ater ytterligare ett gap, sa
     burgaren hamnade 5px innanfor hogerkanten. Marginal i stallet for
     gap ger exakt avstand utan att rora offcanvas-elementet. */
  .brx-sticky .mega-anchor .brxe-block:has(> .ampy-cta){
    column-gap:0 !important;
  }
  .brx-sticky .mega-anchor .brxe-block:has(> .ampy-cta) > .brxe-toggle{
    margin-left:16px !important;
  }
}

/* ----------------------------------------------------------
   Current page in the Produkter guide rail (the four
   kalkylator links). Bricks' nav-nested Active style paints a
   solid #5EB1BF slab with a radius; the design only ever
   changes the word's colour. Reuse the hover look as the
   active look, desktop and drawer.
   ---------------------------------------------------------- */
.mega-anchor .brx-nav-nested-items > li:nth-child(2) .brx-dropdown-content > * > .brxe-block:last-child > a[aria-current="page"] {
    color: #00a991 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* The drawer has no active state at all — Bricks' rule is
   scoped to .brx-dropdown-content, which the offcanvas isn't
   inside. Give it the same wash the tap/hover state uses. */
@media (max-width: 992px) {
    .brxe-offcanvas .accordion-content-wrapper a[aria-current="page"] {
        background: rgba(0, 169, 145, 0.06) !important;
        color: #00a991 !important;
    }
}