/* ============================================================================
   BENZ HEADER 2026 — centred-logo, ivory/navy restyle
   ----------------------------------------------------------------------------
   DESIGN GOAL (from client reference): a warm ivory header with a centred logo,
   navy typography and a gold accent rule; nav split left/right of the logo; a
   slim utility strip above; and a mega panel that reads as ONE continuous sheet
   with the header (no seam, no floating card, no hero bleeding through).

   ENGINEERING CONSTRAINT — READ BEFORE EDITING:
   The Products mega menu is DATABASE-DRIVEN. Its markup comes from
   <asp:Repeater ID="rptrProductCategoryMenu"> and <asp:Repeater ID="rptrSubCategroyData">
   in BenzPackageMasterPage.Master, and main.js drives the category tab switching
   via the .menu_li / .sub-wrap / [data-tab] / .active contract.
   Therefore this file RESTYLES THE EXISTING DOM. It does not introduce new
   markup for the nav, and it must never rename or restructure those classes.
   Doing so silently breaks the product menu and every product link in it.

   The centred logo is achieved with flex `order` alone — zero markup change —
   because the master page already tags Services/About/Contact in the left <ul>
   with .hdr-right-item, so the desktop left/right split already exists.

   Loaded AFTER style.css, so plain specificity wins; !important is used only
   where the legacy sheet already uses it.
   ========================================================================== */

:root{
  --bz2-ivory:#faf7f1;
  --bz2-ivory-2:#f3eee4;
  --bz2-navy:#0f2a44;
  --bz2-navy-2:#17395c;
  --bz2-gold:#b4894f;
  --bz2-gold-soft:#d8c09a;
  --bz2-ink:#2c3e4f;
  --bz2-muted:#6b7b8a;
  --bz2-line:#e4dbcb;
  --bz2-white:#fff;
  --bz2-h:92px;
  --bz2-strip:40px;
  --bz2-ease:cubic-bezier(.22,1,.36,1);
}

/* ===========================================================================
   1. KILL THE LEGACY BLACK HEADER
   The old header painted a black bar via header::before (height:0 at rest,
   full height on scroll) which is what caused every "gap" bug. The ivory
   header is opaque at all times, so that whole mechanism is removed.
   ========================================================================= */
html.bz2 header::before{display:none !important;content:none !important}

html.bz2 header{
  position:sticky;top:0;left:0;right:0;
  background:var(--bz2-ivory) !important;
  border-bottom:1px solid var(--bz2-line);
  z-index:900;
  transition:box-shadow .3s var(--bz2-ease);
}
html.bz2 header.header-fixed{box-shadow:0 6px 26px -14px rgba(15,42,68,.35)}
/* when a mega panel is open the divider is removed so header + panel merge */
html.bz2 header.js-nav-open,
html.bz2 header:has(.menubar-bg > li:hover > .nav-dropdown){border-bottom-color:transparent}

/* ===========================================================================
   2. UTILITY STRIP (the only new markup — a static bar, no server controls)
   ========================================================================= */
/* hidden by default so the markup is inert on production */
.bz2-strip{display:none}
html.bz2 .bz2-strip{
  background:var(--bz2-navy);
  color:#cfdce8;
  height:var(--bz2-strip);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 46px;
  font-size:12.5px;letter-spacing:.3px;
  position:relative;z-index:901;
}
html.bz2 .bz2-strip a{color:#cfdce8;text-decoration:none;transition:color .2s}
html.bz2 .bz2-strip a:hover{color:#fff}
html.bz2 .bz2-strip-r{display:flex;align-items:center;gap:14px}
html.bz2 .bz2-strip-sep{color:rgba(207,220,232,.4)}
@media (max-width:900px){html.bz2 .bz2-strip{display:none}}

/* ===========================================================================
   3. CENTRED LOGO — pure flex `order`, no markup moved
   ========================================================================= */
html.bz2 header .header-wrapper{
  max-width:1740px;margin:0 auto;padding:0 46px;
  height:var(--bz2-h);
}
/* A 3-column grid, not flex. Flex let the legacy margins/positioning on
   .brand-iden-box overlap its neighbours once the row exceeded the viewport
   (814+180+814+margins = ~1992px at 1920px wide). Grid tracks cannot overlap:
   the two 1fr rails shrink and the centre track hugs the logo. */
html.bz2 header .header-wrapper > .flex{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;height:var(--bz2-h);gap:16px;
}
/* grid-row:1 is essential — the logo is FIRST in the DOM but belongs in column 2,
   and without an explicit row the auto-placement algorithm pushes the nav that
   wants column 1 onto a second row. */
html.bz2 .brand-iden-box{
  grid-column:2;grid-row:1;order:0;
  margin:0 !important;padding:0 !important;
  position:static !important;transform:none !important;left:auto !important;
  float:none !important;width:auto !important;
}
/* legacy ships .box-navigation with `flex:1 1 50%` plus width/max-width caps that
   squeezed both rails to 359px inside the grid track — all neutralised here */
html.bz2 .box-navigation.aside-center,
html.bz2 .box-navigation.aside-right{
  grid-row:1;order:0;
  flex:none !important;
  width:auto !important;max-width:none !important;min-width:0 !important;
  padding:0 !important;margin:0 !important;
}
html.bz2 .box-navigation.aside-center{grid-column:1}
html.bz2 .box-navigation.aside-right{grid-column:3}
html.bz2 .box-navigation.aside-center .box-navigation-inner,
html.bz2 .box-navigation.aside-right .box-navigation-inner,
html.bz2 .box-navigation.aside-center .custom-navigation,
html.bz2 .box-navigation.aside-right .custom-navigation{
  flex:none !important;max-width:none !important;
}
/* FULL-HEIGHT CHAIN — this is what was broken.
   The nav sat at y50 and the phone/CTA at y40 inside a 92px row because these
   intermediate wrappers never inherited height, so nothing could centre against
   the header. Every link in the chain must be 100% tall for align-items to work. */
html.bz2 .box-navigation.aside-center,
html.bz2 .box-navigation.aside-right,
html.bz2 .box-navigation.aside-center .box-navigation-inner,
html.bz2 .box-navigation.aside-right .box-navigation-inner,
html.bz2 .box-navigation.aside-center .custom-navigation,
html.bz2 .box-navigation.aside-right .custom-navigation,
html.bz2 .box-navigation.aside-center .nav.bg-chage{
  height:100% !important;
}
html.bz2 .box-navigation.aside-center .box-navigation-inner,
html.bz2 .box-navigation.aside-right .box-navigation-inner{
  display:flex !important;align-items:center !important;width:100% !important;min-width:0;
}
html.bz2 .box-navigation.aside-center .custom-navigation,
html.bz2 .box-navigation.aside-right .custom-navigation{
  display:flex !important;align-items:center !important;
}
html.bz2 .box-navigation.aside-center .nav.bg-chage{
  display:flex !important;align-items:center !important;width:100% !important;
  justify-content:flex-end !important;background:transparent !important;
}
/* zero every source of vertical padding in the chain — this is what pushed the
   nav row 10px below the logo/CTA baseline */
html.bz2 .box-navigation.aside-center .box-navigation-inner,
html.bz2 .box-navigation.aside-right .box-navigation-inner,
html.bz2 .box-navigation.aside-center .custom-navigation,
html.bz2 .box-navigation.aside-right .custom-navigation,
html.bz2 .box-navigation.aside-center .nav.bg-chage,
html.bz2 ul.menubar-bg,
html.bz2 ul.right-header{padding:0 !important;margin:0 !important}
html.bz2 ul.menubar-bg > li.pl-10{padding-left:0 !important}
/* the right-hand <li>s were display:block, so their contents stuck to the top */
html.bz2 ul.right-header > li{
  display:flex !important;align-items:center !important;height:100% !important;
  float:none !important;
}
html.bz2 .box-navigation.aside-center .box-navigation-inner{justify-content:flex-end}
html.bz2 .box-navigation.aside-right .box-navigation-inner{justify-content:flex-start}
html.bz2 .box-navigation.aside-center .custom-navigation,
html.bz2 .box-navigation.aside-right .custom-navigation{width:100% !important;min-width:0}
html.bz2 ul.right-header{width:100% !important;min-width:0}

/* Logo: swap the white mark for the navy one and lock its size.
   !important is required here — the legacy sheet sizes .bma-logos and its
   images with higher-specificity rules that otherwise collapse it to ~52x16px. */
html.bz2 .brand-iden-box .logo,
html.bz2 .brand-iden-box .hdr-logo-anim{
  display:block !important;width:auto !important;height:auto !important;
  min-width:0 !important;min-height:0 !important;
}
/* ASSET LIMITATION — READ THIS BEFORE ENLARGING THE LOGO.
   The only horizontal navy wordmark on the server is logo-bluee.png at a native
   199x61px. It is rendered here at 1:1 so it stays crisp. It CANNOT be scaled up
   to the size in the design reference without going soft, and it will already be
   soft on 2x/retina displays. To match the reference properly the client needs to
   supply a vector (SVG) or a 2x/3x PNG of the horizontal lockup.
   blue-logo.png (353x332) is the square icon mark, not the wordmark. */
html.bz2 .brand-iden-box .bma-logos{
  display:block !important;
  width:199px !important;height:61px !important;
  background:url('/assets/images/logo/logo-bluee.png') center/199px 61px no-repeat !important;
  position:relative !important;inset:auto !important;transform:none !important;
  /* the legacy logo animation parks .bma-logos at opacity:0 until its keyframes
     run; with .bma-stage removed those never fire, so it must be forced visible */
  opacity:1 !important;visibility:visible !important;animation:none !important;
  image-rendering:auto;
}
html.bz2 .brand-iden-box .bma-logos img{
  opacity:0 !important;visibility:hidden !important;
  width:199px !important;height:61px !important;display:block !important;
}
/* The "45+ Years of / Protection Before Perfection" animated caption was built
   for the black header and overlaps the centred logo here. The reference has a
   clean logo lockup, so it is removed in this treatment. */
html.bz2 .bma-stage{display:none !important}
html.bz2 .shape-log{display:none !important}

/* ===========================================================================
   4. PRIMARY NAV
   ========================================================================= */
html.bz2 ul.menubar-bg{
  display:flex !important;align-items:center !important;justify-content:flex-end;
  gap:10px;margin:0 !important;padding:0 !important;list-style:none;height:100% !important;
  background:transparent !important;
}
html.bz2 ul.menubar-bg > li{
  position:static !important;display:flex !important;align-items:center !important;
  height:100% !important;float:none !important;margin:0 !important;
}
/* legacy renders these as inline-block with its own padding, which left the
   labels stuck to the top of a 92px box — display/height/padding must be forced */
html.bz2 ul.menubar-bg > li > a,
html.bz2 ul.right-header .hdr-sup-nav > a,
html.bz2 ul.right-header .hdr-svc-toggle{
  display:inline-flex !important;align-items:center !important;gap:6px;
  /* height:100%, NOT a fixed 92px — a fixed height combined with padding further
     up the chain left the whole nav row sitting 10px below the logo/CTA baseline */
  padding:0 17px !important;height:100% !important;line-height:1 !important;
  font-size:13.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--bz2-navy) !important;text-decoration:none;white-space:nowrap;
  position:relative;transition:color .22s var(--bz2-ease);
}
html.bz2 ul.menubar-bg > li > a:hover,
html.bz2 ul.right-header .hdr-sup-nav > a:hover,
html.bz2 ul.right-header .hdr-svc-toggle:hover{color:var(--bz2-gold) !important}

/* gold underline that sits ON the header's bottom edge, stitching the
   header to the panel below — this is the effect in the reference */
html.bz2 ul.menubar-bg > li > a::after,
html.bz2 ul.right-header .hdr-svc-toggle::after{
  content:'';position:absolute;left:17px;right:17px;bottom:0;height:2px;
  background:var(--bz2-gold);
  transform:scaleX(0);transform-origin:50% 100%;
  transition:transform .3s var(--bz2-ease);
}
html.bz2 ul.menubar-bg > li:hover > a::after,
html.bz2 ul.menubar-bg > li.active > a::after,
html.bz2 ul.right-header .hdr-svc-wrap:hover .hdr-svc-toggle::after{transform:scaleX(1)}
html.bz2 ul.menubar-bg > li > a .plus,
html.bz2 ul.menubar-bg > li > span.plus{display:none}

/* Services / About / Contact are duplicated in the left <ul> for the mobile
   drawer; keep them out of the desktop left rail (legacy behaviour retained) */
@media (min-width:1025px){
  html.bz2 ul.menubar-bg > li.hdr-right-item{display:none}
}

/* ===========================================================================
   5. RIGHT CLUSTER
   ========================================================================= */
html.bz2 ul.right-header{
  display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;
  height:var(--bz2-h);width:100%;
}
html.bz2 ul.right-header > li{display:flex;align-items:center;height:100%}
html.bz2 ul.right-header .hdr-sup-nav{display:flex;align-items:center;height:100%}
html.bz2 ul.right-header .searchli{margin-left:auto}

html.bz2 .btn-search{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--bz2-line);background:var(--bz2-white);
  display:grid;place-items:center;cursor:pointer;transition:.22s var(--bz2-ease);
}
html.bz2 .btn-search:hover{border-color:var(--bz2-gold);box-shadow:0 0 0 4px rgba(180,137,79,.12)}
html.bz2 .btn-search img{width:16px;height:16px}

html.bz2 .bor-right .head-cont,
html.bz2 a.contac-hid{
  font-size:14.5px;font-weight:600;color:var(--bz2-navy) !important;
  letter-spacing:.2px;padding:0 14px;white-space:nowrap;text-decoration:none;
  border-left:1px solid var(--bz2-line);
}
html.bz2 .bor-right .head-cont:hover{color:var(--bz2-gold) !important}

/* .button--nina ships its own transparent background + per-letter span animation;
   both are overridden here or the CTA renders as white text on ivory (invisible). */
html.bz2 .inquire-btn{
  height:44px !important;padding:0 26px !important;border-radius:2px !important;border:0 !important;
  background:var(--bz2-navy) !important;color:#fff !important;cursor:pointer;
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  display:inline-flex !important;align-items:center;justify-content:center;
  white-space:nowrap !important;min-width:max-content;
  overflow:visible !important;transition:background .24s var(--bz2-ease),transform .24s var(--bz2-ease);
}
html.bz2 .inquire-btn:hover{background:var(--bz2-gold) !important;transform:translateY(-1px)}
html.bz2 .inquire-btn span{
  color:#fff !important;opacity:1 !important;transform:none !important;
  display:inline !important;transition:none !important;
}
html.bz2 .inquire-btn::before,
html.bz2 .inquire-btn::after{display:none !important;content:none !important}

/* ===========================================================================
   6. MEGA PANEL — one continuous sheet with the header
   Anchored to the header row (li is position:static, header-wrapper is the
   containing block) and full-bleed, so there is no card edge and nothing
   from the hero can show through.
   ========================================================================= */
html.bz2 .nav-dropdown{
  position:absolute;top:100%;left:0;right:0;width:auto !important;
  max-width:none !important;
  background:var(--bz2-ivory) !important;
  border-top:1px solid var(--bz2-line);
  border-radius:0 !important;
  box-shadow:0 26px 48px -22px rgba(15,42,68,.3);
  padding:0;margin:0;
}
/* upward-pointing notch on the panel, as in the reference. Sits on the seam and
   is painted in the panel's own ivory so it reads as part of the same sheet. */
html.bz2 .menubar-bg > li > .nav-dropdown::before{
  content:'';position:absolute;top:-9px;left:var(--bz2-notch,120px);
  width:18px;height:18px;background:var(--bz2-ivory);
  border-left:1px solid var(--bz2-line);border-top:1px solid var(--bz2-line);
  transform:rotate(45deg);
}
html.bz2 .nav-dropdown .dropdown-wrapper{
  max-width:1740px;margin:0 auto;padding:34px 46px 38px;
}
html.bz2 .nav-dropdown .dropdown-wrapper > .flex{display:block}

/* IMPORTANT: the panel's opaque background is painted by .dropdown-wrapper, NOT by
   .nav-dropdown. Making the wrapper transparent lets the hero image show straight
   through the menu — it must stay opaque ivory. Only the INNER blocks are cleared. */
html.bz2 .nav-dropdown .dropdown-wrapper{
  background:var(--bz2-ivory) !important;box-shadow:none !important;border-radius:0 !important;
}
html.bz2 .nav-dropdown .left-side,
html.bz2 .nav-dropdown .left-side > .grid,
html.bz2 .nav-dropdown .sub-wrap,
html.bz2 .nav-dropdown .sub-wrap-inner{
  background:transparent !important;box-shadow:none !important;border-radius:0 !important;
}

/* left category rail */
html.bz2 .nav-dropdown .left-side{display:block}
html.bz2 .nav-dropdown .left-side > .grid{
  display:grid !important;grid-template-columns:320px 1fr;gap:0;align-items:start;
}
html.bz2 .menu_li{grid-column:1;border-radius:4px;transition:background .22s var(--bz2-ease)}
html.bz2 .menu_li_ttl{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;cursor:pointer;position:relative;
}
html.bz2 .menu_li_ttl::before{
  content:'';position:absolute;left:0;top:11px;bottom:11px;width:3px;
  background:var(--bz2-gold);opacity:0;transition:opacity .22s var(--bz2-ease);
}
/* legacy paints the active category pill BENZ-blue with white text; the ivory
   treatment uses a warm tint plus a gold edge instead */
html.bz2 .menu_li,
html.bz2 .menu_li.active,
html.bz2 .menu_li:hover{background:transparent !important}
html.bz2 .menu_li:hover .menu_li_ttl,
html.bz2 .menu_li.active .menu_li_ttl{background:var(--bz2-ivory-2) !important}
html.bz2 .menu_li.active .menu_li_ttl::before{opacity:1}
html.bz2 .menu_li.active .menu_li_ttl .arr,
html.bz2 .menu_li:hover .menu_li_ttl .arr{color:var(--bz2-navy) !important}
html.bz2 .menu_li_ttl figure{margin:0;width:30px;height:30px;flex:0 0 auto}
html.bz2 .menu_li_ttl figure img{width:100%;height:100%;object-fit:contain}
html.bz2 .menu_li_ttl .arr{
  font-size:15px;font-weight:600;color:var(--bz2-navy);
  display:flex;align-items:center;justify-content:space-between;flex:1;gap:10px;
}
html.bz2 .menu_li_ttl .arr-img{width:13px;opacity:.45}

/* the product list panel for the active category */
html.bz2 .sub-wrap{
  grid-column:2;grid-row:1 / span 99;
  display:none;
  padding-left:44px;border-left:1px solid var(--bz2-line);
}
html.bz2 .sub-wrap.active{display:grid !important;grid-template-columns:1fr 400px;gap:38px}
html.bz2 .sub-wrap-inner{
  grid-column:1;display:grid !important;grid-template-columns:1fr;gap:0;align-content:start;
  width:auto !important;max-width:none !important;float:none !important;
}
/* TWO product columns, as in the reference. Legacy renders this <ul> as a single
   block column, so display + template must both be forced. */
html.bz2 .sub-wrap-inner > ul{
  display:grid !important;grid-template-columns:1fr 1fr !important;
  gap:0 40px !important;
  margin:0 !important;padding:0 !important;list-style:none !important;
  width:auto !important;float:none !important;
}
html.bz2 .sub-wrap-inner > ul > li{
  border-bottom:1px solid var(--bz2-line) !important;
  width:auto !important;float:none !important;list-style:none !important;margin:0 !important;
}
html.bz2 .sub-wrap-inner > ul > li > a{
  display:block !important;padding:12px 0 !important;
  font-size:14.5px;font-weight:500;color:var(--bz2-ink) !important;text-decoration:none;
  position:relative;
  transition:color .2s var(--bz2-ease),padding-left .24s var(--bz2-ease);
}
html.bz2 .sub-wrap-inner > ul > li > a::after{
  content:'›';position:absolute;right:4px;top:50%;translate:0 -50%;
  color:var(--bz2-gold);opacity:0;transition:opacity .2s,right .2s var(--bz2-ease);
}
html.bz2 .sub-wrap-inner > ul > li > a:hover{color:var(--bz2-gold) !important;padding-left:6px !important}
html.bz2 .sub-wrap-inner > ul > li > a:hover::after{opacity:1;right:0}
html.bz2 .menu-view-btn{margin-top:24px}
html.bz2 .menu-view-btn .menu__link{
  display:inline-flex !important;align-items:center;gap:10px;
  height:42px;padding:0 22px !important;border-radius:0 !important;
  border:1px solid var(--bz2-navy) !important;color:var(--bz2-navy) !important;
  background:transparent !important;
  font-size:12px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  text-decoration:none;transition:.24s var(--bz2-ease);
}
html.bz2 .menu-view-btn .menu__link:hover{background:var(--bz2-navy) !important;color:#fff !important}
html.bz2 .menu-view-btn .menu__label{color:inherit !important}

/* right-hand image card */
/* Dark navy feature card, as in the reference. The Repeater only supplies a
   category image — no heading or body copy exists in the database — so the card
   is built from the image plus a navy wash and a gold rule. NO invented copy. */
html.bz2 .sub-product-list{
  grid-column:2;grid-row:1;align-self:stretch;
  background:var(--bz2-navy) !important;overflow:hidden;position:relative;
  min-height:330px;float:none !important;
  /* must be forced to fill its 400px track — the legacy rule sizes this box to the
     image's intrinsic width, which collapsed the card to ~160px */
  width:100% !important;max-width:none !important;min-width:0 !important;
  border:0 !important;padding:0 !important;border-radius:0 !important;
  display:block !important;
}
html.bz2 .sub-product-list figure{
  margin:0 !important;height:100% !important;border:0 !important;padding:0 !important;
  position:absolute;inset:0;
}
html.bz2 .sub-product-list figure img{
  width:100% !important;height:100% !important;object-fit:cover;
  border:0 !important;border-radius:0 !important;
  filter:saturate(.85) contrast(1.05);
}
/* navy wash so the card reads as a designed panel rather than a bare photo */
html.bz2 .sub-product-list::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(15,42,68,.30) 0%,rgba(15,42,68,.72) 58%,rgba(15,42,68,.94) 100%);
}
/* gold rule anchored bottom-left, matching the reference's accent */
html.bz2 .sub-product-list::after{
  content:'';position:absolute;left:28px;bottom:34px;z-index:3;
  width:54px;height:2px;background:var(--bz2-gold);
}
html.bz2 .menu-logosec{display:none}

/* ---- Sustainability + Services panels inherit the same sheet treatment ---- */
html.bz2 .Sustainab-box{
  max-width:1740px;margin:0 auto;padding:34px 46px 38px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
html.bz2 .Sustainab-box > a{text-decoration:none}
html.bz2 .Sustainab-box .box{
  background:var(--bz2-white);border:1px solid var(--bz2-line);
  padding:24px 22px;height:100%;transition:.24s var(--bz2-ease);
}
html.bz2 .Sustainab-box .box:hover{border-color:var(--bz2-gold);transform:translateY(-3px)}
html.bz2 .Sustainab-box h6{font-size:16px;font-weight:700;color:var(--bz2-navy);margin:12px 0 8px}
html.bz2 .Sustainab-box p{font-size:13px;line-height:1.6;color:var(--bz2-muted)}

html.bz2 .hdr-svc-drop{background:var(--bz2-ivory);border:1px solid var(--bz2-line);border-radius:0}
html.bz2 .hdr-svc-drop a{color:var(--bz2-ink) !important;font-size:13.5px;padding:9px 16px}
html.bz2 .hdr-svc-drop a:hover{background:var(--bz2-ivory-2);color:var(--bz2-gold) !important}
html.bz2 .hdr-svc-featured{color:var(--bz2-gold) !important;font-weight:700 !important}

/* ===========================================================================
   7. RESPONSIVE — below 1024 the legacy hamburger drawer takes over untouched
   ========================================================================= */
@media (max-width:1024px){
  html.bz2 header .header-wrapper,
  html.bz2 header .header-wrapper > .flex{height:70px}
  html.bz2 .brand-iden-box{order:1;margin:0}
  html.bz2 .box-navigation.aside-right{order:2}
  html.bz2 .brand-iden-box .bma-logos,
  html.bz2 .brand-iden-box .bma-logos img{width:130px;height:40px}
  html.bz2 .nav-dropdown{position:static;box-shadow:none;border-top:0}
  html.bz2 .nav-dropdown .left-side > .grid{grid-template-columns:1fr}
  html.bz2 .sub-wrap.active{grid-template-columns:1fr;padding-left:0;border-left:0}
  html.bz2 .sub-wrap-inner > ul{grid-template-columns:1fr}
  html.bz2 .sub-product-list{display:none}
  html.bz2 .Sustainab-box{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html.bz2 *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}