@media screen and (min-width: 768px) {

	body .navigation .megamenu.level-top-fullwidth .level0.submenu.fullwidth .fullwidth-wrapper .fullwidth-wrapper-inner .columns-group-block .right-block{
		padding: 0px 0 15px 0;
	}
  /* ---- Nav bar container -------------------------------- */
  body .nav-sections,
  body .nav-sections .navigation {
    background: #fff;
  }
  /* The nav bar is the box every dropdown is measured against, so its
     `position` must not be left to chance: WeltPixel's own
     navigation_desktop.css ships `.navigation { position: static !important }`,
     which hands the panels off to `.page-wrapper` and lets their width drift
     away from the menu they belong to. `!important` is the only way to beat
     an `!important`, so it is used deliberately here.
     `z-index` is intentionally left at 5 — it is what the panel has always
     stacked inside, and raising it would push the nav over the header's own
     search/minicart dropdowns. */
  body .nav-sections .navigation {
    position: relative !important;
    padding: 0 !important;
    border-bottom: 1px solid #ececec;
    text-align: center;
    z-index: 5;
  }

  /* Candy-stripe accent bar (design .cw-stripe) */
  body .nav-sections .navigation::before {
    content: "";
    display: block;
    height: 6px;
    background: repeating-linear-gradient(45deg,
      #cf2b2b 0 12px, #fff 12px 24px, #17803f 24px 36px, #fff 36px 48px);
  }

  /* Top-level list = flush edge-to-edge flex row, no side padding.
     `space-between` spreads the leftover width evenly between items so
     the row starts and ends flush with the container, and the gaps
     adapt on their own as the viewport changes.
     `wrap` is a safety valve only: it never triggers while the items
     fit, and prevents overflow off-page on narrower screens. */
  body .nav-sections .navigation > ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Poppins', sans-serif;
  }

  /* static positioning so the mega panel can center under the whole nav */
  body .nav-sections .navigation li.megamenu.level0,
  body .nav-sections .navigation li.level0 {
    position: static;
    margin: 0;
    border: 0;
    background: transparent;
  }

  /* ---- Top-level links --------------------------------- */
  body .nav-sections .navigation li.level0 > a.level-top {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Side padding is deliberately small because the hover icon's slot
       (4px gap + 14px icon) is reserved inside every item at all times.
       3 + 3 + 4 + 14 = 24px — exactly the 12px + 12px this used to be,
       so the row's total width is unchanged and nothing reflows on hover.
       The hover tint is widened visually with box-shadow instead (below),
       which costs no layout. */
    padding: 17px 3px !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    color: #1c1c1c;
    text-decoration: none;
    text-transform: none !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    background: transparent !important;
  }
  /* inherit so the responsive size above actually applies */
  body .nav-sections .navigation li.level0 > a.level-top span,
  body .nav-sections .navigation li.level0 > a.level-top span.mm-subcategory-title {
    font-size: inherit !important;
    font-weight: 600 !important;
    color: inherit !important;
    text-shadow: none !important;
  }

  /* First / last item sit flush with the container edges.
     `*-of-type` (not `:first-child`/`:last-child`) because WeltPixel
     injects <style> tags inside this <ul>, which would otherwise steal
     the match. `.mm-first-item` is WeltPixel's own class — targeted here
     to override its `padding-left: 15px !important` rule in customx1.css. */
  body .nav-sections .navigation li.level0:first-of-type,
  body .page-wrapper .nav-sections .navigation ul li.megamenu.level0.mm-first-item {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  body .nav-sections .navigation li.level0:first-of-type > a.level-top,
  body .page-wrapper .nav-sections .navigation ul li.megamenu.level0.mm-first-item > a.level-top {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  body .nav-sections .navigation li.level0:last-of-type {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  body .nav-sections .navigation li.level0:last-of-type > a.level-top {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* hover / active — red text + red underline */
  body .nav-sections .navigation li.level0:hover > a.level-top,
  body .nav-sections .navigation li.level0:hover > a.level-top span,
  body .nav-sections .navigation li.level0.active > a.level-top,
  body .nav-sections .navigation li.level0.active > a.level-top span,
  body .nav-sections .navigation li.level0.has-active > a.level-top,
  body .nav-sections .navigation li.level0.has-active > a.level-top span {
    color: #cf2b2b !important;
  }
  /* 3px red underline — persists on the active category, not just hover */
  body .nav-sections .navigation li.level0:hover > a.level-top,
  body .nav-sections .navigation li.level0.active > a.level-top,
  body .nav-sections .navigation li.level0.has-active > a.level-top,
  body .page-wrapper .nav-sections .navigation ul li.megamenu.level0.active > a.level-top,
  body .page-wrapper .nav-sections .navigation ul li.megamenu.level0.has-active > a.level-top {
    border-bottom: 4px solid #cf2b2b !important;
  }
  /* Hovered tab gets the panel's tint so it reads as one surface.
     The box-shadow paints two offset copies of the tab, widening the
     tint by 9px on each side. box-shadow is not part of layout, so the
     tab looks generously padded without adding any width. */
  body .nav-sections .navigation li.level0:hover > a.level-top {
    background: #fbfafa !important;
    box-shadow: -9px 0 0 #fbfafa, 9px 0 0 #fbfafa;
  }

  /* Visible keyboard-focus states (spec: focus must be clearly visible).
     Scoped to :focus-visible so mouse users don't see outlines. */
  body .nav-sections .navigation li.level0 > a.level-top:focus-visible,
  body .nav-sections .navigation ul.level0.submenu li a:focus-visible {
    outline: 2px solid #cf2b2b;
    outline-offset: 2px;
    color: #cf2b2b !important;
  }

  /* =========================================================
     CATEGORY ICONS — revealed on HOVER, one per category.
     ---------------------------------------------------------
     The icon is painted with `mask` + `currentColor`, so it picks up
     the hovered link's red automatically — no coloured duplicates.

     Its slot is reserved in every item at all times and it is merely
     transparent until hover. Generating it on hover instead would grow
     the item by ~18px, and `space-between` would redistribute the whole
     row — which is what made the labels jump.

     Icons are keyed to WeltPixel's positional class
     (li.level0.nav-1 … nav-N, left → right). The gift box is the
     fallback, so any category without a mapping still gets an icon.

     ⚠ Positional: if categories are re-ordered or added in admin,
     remap the nav-N numbers below to match the new order.
     ========================================================= */
  body .nav-sections .navigation li.level0 > a.level-top {
    /* fallback icon — gift box */
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1'/%3E%3Cline x1='12' y1='8' x2='12' y2='21'/%3E%3Cpath d='M3 8h18M12 8c-2-4-6-4-6-1.5S10 8 12 8zm0 0c2-4 6-4 6-1.5S14 8 12 8z'/%3E%3C/svg%3E");
  }
  /* slot always present — transparent by default, so no reflow on hover */
  body .nav-sections .navigation li.level0 > a.level-top::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0;
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask: var(--cw-icon) no-repeat center / contain;
    mask: var(--cw-icon) no-repeat center / contain;
    transition: opacity .12s ease;
  }
  body .nav-sections .navigation li.level0:hover > a.level-top::after {
    opacity: 1;
  }

  /* 1 · New Arrivals — sparkle */
  body .nav-sections .navigation li.level0.nav-1 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 6.2L20 11l-5.8 1.8L12 19l-2.2-6.2L4 11l5.8-1.8z'/%3E%3C/svg%3E");
  }
  /* 2 · Stockings — stocking */
  body .nav-sections .navigation li.level0.nav-2 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v8c0 2 4 3 4 6a4 4 0 0 1-8 0V3z'/%3E%3Cline x1='9' y1='7' x2='15' y2='7'/%3E%3C/svg%3E");
  }
  /* 3 · Sacks — sack */
  body .nav-sections .navigation li.level0.nav-3 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l-1 3c3 1 5 4 5 8a6 6 0 0 1-12 0c0-4 2-7 5-8z'/%3E%3C/svg%3E");
  }
  /* 4 · Elf — hat */
  body .nav-sections .navigation li.level0.nav-4 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4C8 7 6 11 5 16h14c-1-5-3-9-7-12z'/%3E%3Cline x1='4' y1='19' x2='20' y2='19'/%3E%3Ccircle cx='12' cy='3' r='1.4'/%3E%3C/svg%3E");
  }
  /* 5 · Seasonal — snowflake */
  body .nav-sections .navigation li.level0.nav-5 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='5.6' y1='5.6' x2='18.4' y2='18.4'/%3E%3Cline x1='18.4' y1='5.6' x2='5.6' y2='18.4'/%3E%3C/svg%3E");
  }
  /* 6 · Cards — envelope */
  body .nav-sections .navigation li.level0.nav-6 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  }
  /* 7 · Party — party popper */
  body .nav-sections .navigation li.level0.nav-7 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l6-14 8 8z'/%3E%3Ccircle cx='17' cy='5' r='1'/%3E%3Ccircle cx='20' cy='9' r='1'/%3E%3Ccircle cx='14' cy='3' r='1'/%3E%3C/svg%3E");
  }
  /* 8 · Gifts — gift box (default, listed for clarity) */
  body .nav-sections .navigation li.level0.nav-8 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1'/%3E%3Cline x1='12' y1='8' x2='12' y2='21'/%3E%3Cpath d='M3 8h18M12 8c-2-4-6-4-6-1.5S10 8 12 8zm0 0c2-4 6-4 6-1.5S14 8 12 8z'/%3E%3C/svg%3E");
  }
  /* 9 · Toys & Stationery — pencil */
  body .nav-sections .navigation li.level0.nav-9 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l3-1 11-11-2-2L5 17z'/%3E%3Cpath d='M15 5l4 4'/%3E%3C/svg%3E");
  }
  /* 10 · Decorations — bauble */
  body .nav-sections .navigation li.level0.nav-10 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='7'/%3E%3Cpath d='M10 6h4M12 3v3'/%3E%3C/svg%3E");
  }
  /* 11 · Fancy Dress — crown */
  body .nav-sections .navigation li.level0.nav-11 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18M4 8l4 4 4-8 4 8 4-4v10H4z'/%3E%3C/svg%3E");
  }
  /* 12 · Gift Wrap & Boxes — package */
  body .nav-sections .navigation li.level0.nav-12 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
  }
  /* 13 · Pets — paw */
  body .nav-sections .navigation li.level0.nav-13 > a.level-top {
    --cw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='9' r='2'/%3E%3Ccircle cx='12' cy='7' r='2'/%3E%3Ccircle cx='17' cy='9' r='2'/%3E%3Cpath d='M12 12c-3 0-5 2-5 4.5S9 21 12 21s5-2 5-4.5S15 12 12 12z'/%3E%3C/svg%3E");
  }

  /* =========================================================
     MEGA PANEL
     ---------------------------------------------------------
     ONE geometry for every dropdown. The panel is pinned to the nav
     bar's own box — `.navigation` is the positioning context, so
     `left/right: 0` + `width: 100%` makes the panel exactly as wide as
     the menu row above it, by construction.

     This used to vary per category, which is what made neighbouring
     dropdowns open at different widths:
       • `.fullwidth` panels stretched edge-to-edge,
       • `.sectioned` / `.boxed` / `.default` panels were right-aligned
         (`left: auto; right: 0`) and sized to their own content,
       • `.has-menu-block` panels were pinned to a hard-coded 1000px.
     None of those hooks decide the width any more.
     ========================================================= */
  body .nav-sections .navigation li.level0 ul.level0.submenu,
  body .nav-sections .navigation .megamenu .submenu {
    display: flex !important;      /* beat inline style="display:none" */
    flex-wrap: wrap;               /* lets the banner strip drop below the links */
    align-items: flex-start;       /* regions size to content — no stretching */
    gap: 0 34px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    transform: none;
    margin: 0;
    background: #fbfafa !important;
    border: 1px solid #ececec;
    border-top: 5px solid #eee;
	border-bottom: 5px solid #eee;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .10);
    /* Vertical padding only. Horizontal padding here would inset the
       content region from the panel edge, and the content region is what
       has to line up with the menu line — so the inset belongs on the
       inner container below, not on the panel. */
    padding: 26px 0 15px !important;
    z-index: 100;

    /* hidden until hover / focus */
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
  }

  /* Re-state the same geometry against every layout-mode hook WeltPixel
     puts on the panel, so a category switched between fullwidth /
     sectioned / boxed / default in admin — or given an image block —
     still opens at the menu width instead of falling back to the
     module's own per-mode sizing. */
  body .nav-sections .navigation ul.level0.submenu.fullwidth,
  body .nav-sections .navigation ul.level0.submenu.level-top-fullwidth,
  body .nav-sections .navigation ul.level0.submenu.sectioned,
  body .nav-sections .navigation ul.level0.submenu.boxed,
  body .nav-sections .navigation ul.level0.submenu.default,
  body .nav-sections .navigation ul.level0.submenu.has-menu-block,
  body .nav-sections .navigation .megamenu .submenu.fullwidth {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  body .nav-sections .navigation li.level0.parent:hover > ul.level0.submenu,
  body .nav-sections .navigation li.level0.parent.focus > ul.level0.submenu,
  body .nav-sections .navigation li.level0.parent:focus-within > ul.level0.submenu {
    opacity: 1;
    visibility: visible;
  }

  /* `.fullwidth-wrapper` is a pure shell: WeltPixel positions it absolutely
     and navigation_js.js writes the `.page-wrapper` width onto it inline
     (the 1536px in the source markup). It has no job here — the panel
     itself is the band — so it generates no box at all. */
  body .nav-sections .navigation ul.level0.submenu .fullwidth-wrapper {
    display: contents !important;
  }

  /* INNER CONTENT CONTAINER — this is the one that has to match the menu
     line. `.fullwidth-wrapper-inner` stays a real box (customx1.css styles
     it as the bordered flex row that holds the column groups); only its
     width is taken back.

     navigation_js.js sizes it inline to `.header.content` (the 1340px in
     the source markup) and centres it with `margin: 0 auto`, so it opened
     at the header's container width rather than the navigation's — that is
     why the subcategories did not line up under the menu labels. An inline
     width only yields to `!important`, hence the flags.

     `width: 100%` here means 100% of the panel, and the panel is pinned to
     `.navigation` with no horizontal padding — so this box now starts and
     ends exactly where the menu line does, whatever width the nav is. */
  body .nav-sections .navigation ul.level0.submenu .fullwidth-wrapper-inner {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* customx1.css frames this box (1px #ccc, plus 5px #eee top and bottom).
       That frame made sense while the box was a narrow centred island; now
       that its edges coincide with the panel's, it just doubles the panel
       border — so the panel stays the single surface. */
    border: 0 !important;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* CONTENT INSET — one value, applied to whichever element is the content
     container in each mode: `.fullwidth-wrapper-inner` for fullwidth panels,
     `li.submenu-child` for the rest (which have no inner wrapper). Both
     therefore indent identically from the menu line. */
  body .nav-sections .navigation ul.level0.submenu .fullwidth-wrapper-inner,
  body .nav-sections .navigation ul.level0.submenu:not(.fullwidth) > li.submenu-child {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* TWO-ROW LAYOUT
     WeltPixel renders the panel as sibling `li.submenu-child` wrappers:
       • the main one holds the category columns  → TOP row (grows)
       • `.right-block-child` holds the CMS images → BOTTOM banner strip
     When a category has no image block there is only the main wrapper,
     so it fills the panel and no empty space is reserved. */
  body .nav-sections .navigation ul.level0.submenu > li.submenu-child {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 22px 34px;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
  }
  /* BOTTOM banner strip — `flex: 0 0 100%` forces this wrapper onto its
     own flex line, so it sits full-width beneath the category columns.
     `order` keeps it last even if a top/left block is ever configured. */
  body .nav-sections .navigation ul.level0.submenu > li.submenu-child.right-block-child,
  body .nav-sections .navigation ul.level0.submenu > li.submenu-child.bottom-block-child {
    display: block;
    order: 2;
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0;
    margin: 4px 0 0 !important;
    /* Same side inset as the category columns above it. This wrapper is a
       direct panel child only in the non-fullwidth modes, where the panel
       itself carries no horizontal padding — in fullwidth the banners live
       inside `.fullwidth-wrapper-inner`, which already provides the inset. */
    padding: 22px 30px 0 !important;
    border-top: 0;   /* separates images from the categories */
  }
  /* The image block itself: one row of equal-width banners spanning the
     strip. `display` needs `!important` here because customx1.css carries
     `body .has-menu-block .menu-block { display: block !important }`.
     `width` needs it too: on a sectioned/boxed category WeltPixel's
     navigation_js.js (adjustMenuBlockSize) measures a hidden clone and
     writes an inline pixel width onto this block, which would otherwise
     leave the banner strip narrower than the panel holding it. */
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    width: 100% !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
  }
  /* Each banner takes an equal share of the row. WeltPixel outputs bare
     <img>s, but a CMS block may wrap them in <a> — or group them all in
     one <p> — so the block's children and a <p>'s children are both laid
     out. The 200px basis is a wrap threshold rather than a width: the
     banners only drop onto a second line if the panel is too narrow to
     hold them side by side. */
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block > *,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block > *,
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block > p > *,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block > p > * {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block > p,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block > p {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }
  /* Banner images (WeltPixel outputs them as `img.megamenu-img`).
     Fixed 600/195 aspect ratio + object-fit:cover => uniform banners that
     never distort and reserve their height before load (no layout shift). */
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block img,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block img,
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block img.megamenu-img,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block img.megamenu-img,
  body .nav-sections .navigation ul.level0.submenu .right-group img.megamenu-img,
  body .nav-sections .navigation ul.level0.submenu .bottom-group img.megamenu-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 195;
    object-fit: cover;
    border-radius: 6px;
  }

  /* Each WeltPixel `columns-group` IS a column.
     Previously these were flattened and the level1 items were laid out
     on a fixed 3-track grid, so a 4th group wrapped onto a second row
     and left a large empty gap. Treating the groups as equal flex
     columns keeps them all on one row, evenly spaced. */
  body .nav-sections .navigation ul.level0.submenu .columns-group {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    flex: 1 1 140px;
    min-width: 0;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: transparent !important;
  }

  /* Fullwidth mode wraps the banner block in its own `.right-group`
     column-group. Override the generic `.columns-group` sizing so that
     rather than being a reserved column beside the links, it becomes a
     full-width strip on its own row underneath them: `flex: 0 0 100%`
     fills the line so nothing can sit next to it, and `order` keeps it
     after the category columns.
     The module's native `.bottom-group` (block position "Bottom" on the
     category in admin) gets the same treatment, so moving the block
     there later needs no further CSS. */
  body .nav-sections .navigation ul.level0.submenu .columns-group.right-group,
  body .nav-sections .navigation ul.level0.submenu .columns-group-block.right-group,
  body .nav-sections .navigation ul.level0.submenu .columns-group.bottom-group,
  body .nav-sections .navigation ul.level0.submenu .columns-group-block.bottom-group {
    order: 2;
    flex: 0 0 100%;
    width: 100% !important;          /* beats WeltPixel's inline column width */
    min-width: 0;
    max-width: none;
    margin: 4px 0 0 !important;
    padding: 22px 0 0 !important;
    border-top: 0;   /* separates images from the categories */
  }
  /* In fullwidth the category columns must not stretch to enormous
     widths — cap them so labels stay readable and evenly spread.
     `:not(.columns-group-block)` excludes every CMS-block group (top /
     left / right / bottom), which the rule above sizes instead.

     The small flex-basis is deliberate: the row above is now allowed to
     wrap (so the banner strip can reach its own line), and the basis is
     what decides when a column wraps too. Equal bases mean the grow
     factor still spreads the columns evenly, but 80px keeps even a
     7-column menu on a single row down to the 768px breakpoint — i.e.
     the columns behave exactly as they did before the banners moved,
     and only the banner group ever wraps. */
  body .nav-sections .navigation ul.level0.submenu.fullwidth .columns-group:not(.columns-group-block),
  body .nav-sections .navigation ul.level0.submenu.level-top-fullwidth .columns-group:not(.columns-group-block) {
    flex: 1 1 80px;
    max-width: 300px;
  }

  /* group = a level1 category */
  body .nav-sections .navigation ul.level0.submenu li.level1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    float: none !important;
  }

  /* group title */
  body .nav-sections .navigation ul.level0.submenu li.level1 > a,
  body .nav-sections .navigation ul.level0.submenu li.level1 > a.mm-category-title {
    padding: 0 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1c1c1c !important;
    background: transparent !important;
    text-transform: none !important;
  }
  body .nav-sections .navigation ul.level0.submenu li.level1 > a span {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1c1c1c !important;
  }

  /* level2 = the link list under each group */
  body .nav-sections .navigation ul.level0.submenu li.level1 > ul.submenu {
    display: flex !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: none !important;
    flex-direction: column;
    flex-wrap: nowrap !important;   /* don't inherit the panel's wrapping */
    align-items: stretch !important;
    flex: 0 0 auto;
    gap: 9px;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body .nav-sections .navigation ul.level0.submenu li.level2 {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  body .nav-sections .navigation ul.level0.submenu li.level2 > a {
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #333 !important;
    background: transparent !important;
    text-transform: none !important;
  }
  body .nav-sections .navigation ul.level0.submenu li.level2 > a span {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  body .nav-sections .navigation ul.level0.submenu li a:hover,
  body .nav-sections .navigation ul.level0.submenu li a:hover span {
    color: #cf2b2b !important;
  }

  /* strip WeltPixel arrow markers / promo pills inside the panel */
  body .nav-sections .navigation ul.level0.submenu [data-has-children] > a span:before,
  body .nav-sections .navigation ul.level0.submenu .ui-menu-icon,
  body .nav-sections .navigation ul.level0.submenu span.close.columns-group {
    display: none !important;
  }

  /* WeltPixel emits empty column groups / list items when the category
     tree doesn't divide evenly into its configured column count. As flex
     children they became blank columns and stray vertical gaps. */
  body .nav-sections .navigation ul.level0.submenu ul.columns-group:empty,
  body .nav-sections .navigation ul.level0.submenu li:empty,
  body .nav-sections .navigation ul.level0.submenu .menu-block:empty {
    display: none !important;
  }
}

/* ==========================================================
   TABLET — nav row (768–1199px)
   The full category list cannot fit on one line at these widths, so
   the row wraps. `space-between` would fling a short last row out to
   both edges, so rows are centred, tightened and given a little
   vertical rhythm to read as a tidy block.
   ========================================================== */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  body .nav-sections .navigation > ul {
    justify-content: center;
    row-gap: 2px;
    padding: 5px 0;
  }
  body .nav-sections .navigation li.level0 > a.level-top {
    padding: 11px 10px !important;
  }
  /* Flush edges only mean something on a single unwrapped line. Once
     the row wraps and centres, even padding on every item is what
     looks balanced — so the first/last overrides are relaxed here. */
  body .nav-sections .navigation li.level0:first-of-type > a.level-top,
  body .page-wrapper .nav-sections .navigation ul li.megamenu.level0.mm-first-item > a.level-top,
  body .nav-sections .navigation li.level0:last-of-type > a.level-top {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ==========================================================
   TABLET — mega panel (768–1023px)
   Two columns rather than three, across the full available width:
   three columns at this size squeezes the links into narrow strips
   and wraps almost every label onto two lines.
   ========================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* Width is inherited from the desktop rule (100% of the nav) and the
     horizontal padding stays at zero, so the content container still lines
     up with the menu line here — only the internal spacing tightens. */
  body .nav-sections .navigation li.level0 ul.level0.submenu,
  body .nav-sections .navigation .megamenu .submenu {
    gap: 0 24px;
    padding: 22px 0 26px !important;
  }
  body .nav-sections .navigation ul.level0.submenu .fullwidth-wrapper-inner,
  body .nav-sections .navigation ul.level0.submenu:not(.fullwidth) > li.submenu-child,
  body .nav-sections .navigation ul.level0.submenu > li.submenu-child.right-block-child,
  body .nav-sections .navigation ul.level0.submenu > li.submenu-child.bottom-block-child {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* wider basis => the columns fall into two per row at tablet widths */
  body .nav-sections .navigation ul.level0.submenu > li.submenu-child {
    gap: 18px 24px;
  }
  body .nav-sections .navigation ul.level0.submenu .columns-group {
    flex: 1 1 40%;
  }
  /* The banner strip stays full width here — only its internals tighten,
     so three banners still fit across the narrower panel instead of
     wrapping one onto a second line. */
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block,
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block > p,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block > p {
    gap: 12px;
  }
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block > *,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block > *,
  body .nav-sections .navigation ul.level0.submenu .menu-block.right-block > p > *,
  body .nav-sections .navigation ul.level0.submenu .menu-block.bottom-block > p > * {
    flex-basis: 140px;
  }
}

@media screen and (max-width: 767px) {
	body .nav-sections .navigation ul li.megamenu.level0 .submenu-child.ui-menu-item .fullwidth-wrapper .fullwidth-wrapper-inner,
	body .nav-sections .navigation ul li.megamenu.level0 .submenu-child.ui-menu-item .fullwidth-wrapper {
		width: 100% !important;
	}

	/* Banner images: fit the drawer, keep the 600/195 ratio, never distort. */
	body .nav-sections .navigation .menu-block.right-block img,
	body .nav-sections .navigation .menu-block.right-block img.megamenu-img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		margin-bottom: 10px;
	}
}
.nav-sections:not(.nav-mobile) .navigation ul li.level0 > a span:first-child,
.nav-sections .navigation .megamenu.level0 > .level-top, .nav-sections .navigation .megamenu a{
	text-transform: uppercase !important;
}