/* Momo Jord — editorial chrome.
   The utility bar + the full single-row prototype nav are rendered inside .mj-scope
   (styled by momojord-editorial.css: .utility / .nav / .brand / .nav-links / .cart-btn …).
   This file: hides Shoptimizer's width-constrained header, makes our chrome span the
   full viewport, lays out the wp_nav_menu inside .nav-links, and adds the mobile
   hamburger + slide-in drawer (the prototype had no mobile menu). */

/* ---- Footer brand mark + utility links ---- */
.mj-scope .foot-brand{ display:flex; align-items:center; gap:10px; }
.mj-scope .foot-brand svg{ width:30px; height:30px; color:var(--brand); flex:none; }
.mj-scope .utility a:hover{ opacity:1; }
.mj-scope .utility .group a{ display:inline-flex; align-items:center; gap:6px; }

/* ============================================================================
   Hide Shoptimizer's own header. It was constrained to ~939/969px (offset x=30),
   which produced the beige box behind the logo + streaks of another background
   against white. Our .mj-nav (rendered just above it) replaces it edge-to-edge.
   ============================================================================ */
/* The whole Shoptimizer header-4 chrome lives as #page > #masthead +
   #page > .header-4-container > .header-4-inner > .col-full-nav. Scope the hide
   with the #page ID (specificity 1,1,x) so it beats the parent theme's own
   `header.site-header .col-full-nav` / `body.header-4 .col-full-nav`
   (0,2,1) `display:flex !important` rules that otherwise force the old nav back. */
#page #masthead.site-header,
#page .header-4-container,
#page .col-full-nav,
#page #site-navigation .menu-toggle,
.shoptimizer-svg-icons-defs{ display:none !important; }
/* keep WooCommerce's body-scroll-lock class from doing anything once the native
   mobile menu is gone */
body.menu-overlay-active{ overflow:auto !important; }

/* ============================================================================
   Editorial header wrapper — full viewport width, no gutters.
   The dark utility bar and the translucent sticky nav each carry their own bg
   from the scoped editorial CSS; here we only guarantee full-bleed + brand mark.
   ============================================================================ */
.mj-scope.mj-headerwrap{ width:100%; }
.mj-scope .nav-inner{ max-width:1400px; margin:0 auto; width:100%; }
.mj-scope .nav .brand-mark{ width:28px; height:28px; color:var(--brand); display:inline-flex; flex:none; }
.mj-scope .nav .brand-mark svg{ width:100%; height:100%; display:block; }
.mj-scope .nav .brand-name{ font-family:var(--ff-display); font-weight:500; white-space:nowrap; }
.mj-scope .nav .brand{ white-space:nowrap; }
.mj-scope .nav .brand,
.mj-scope .nav .brand:hover{ color:var(--ink); }
.mj-scope .utility-inner{ max-width:1400px; margin:0 auto; width:100%; }

/* wp_nav_menu renders <ul class="mj-menu"><li><a> inside .nav-links — lay the row
   out and let the scoped .nav-links a (underline-grow) styling apply to each link */
.mj-scope .nav-links ul.mj-menu{
  display:flex; align-items:center; gap:22px;
  list-style:none; margin:0; padding:0;
}
.mj-scope .nav-links ul.mj-menu li{ position:relative; margin:0; }
.mj-scope .nav-links ul.mj-menu .sub-menu{ display:none; }
.mj-scope .nav-links a{ font-family:var(--ff-sans); white-space:nowrap; }
.mj-scope .nav-links .current-menu-item > a{ color:var(--brand); }
.mj-scope .nav-links .current-menu-item > a::after{ right:0; }
.mj-scope .cart-btn{ color:var(--ink); }
.mj-scope .cart-btn:hover{ background:var(--paper-2); }
.mj-scope .cart-btn svg{ width:18px; height:18px; flex:none; }
.mj-scope .icon-btn svg{ width:18px; height:18px; }
/* never show a "0" badge — only show the count once there's something in the cart */
.mj-scope .mj-cart-count.is-empty{ display:none; }

/* ---- Hamburger button (hidden on desktop, shown ≤980 where .nav-links hides) ---- */
.mj-scope .mj-burger{
  display:none; width:42px; height:42px; padding:0; border:0; background:transparent;
  align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer;
  border-radius:999px; color:var(--ink);
}
.mj-scope .mj-burger span{
  display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.mj-scope .mj-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mj-scope .mj-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mj-scope .mj-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Mobile drawer (slide-in from the right) ---- */
.mj-scope .mj-drawer{
  position:fixed; inset:0; z-index:200;
  background:color-mix(in oklab, var(--ink) 42%, transparent);
  opacity:0; transition:opacity .26s ease;
}
.mj-scope .mj-drawer.is-open{ opacity:1; }
.mj-scope .mj-drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(82vw,340px); background:var(--bg); color:var(--ink);
  box-shadow:-18px 0 50px rgba(0,0,0,.18);
  padding:74px 26px 28px; overflow-y:auto;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,.0,.2,1);
}
.mj-scope .mj-drawer.is-open .mj-drawer-panel{ transform:translateX(0); }
.mj-scope .mj-drawer-close{
  position:absolute; top:18px; right:18px; width:40px; height:40px; padding:0;
  border:0; background:transparent; font-size:30px; line-height:1; color:var(--ink); cursor:pointer; border-radius:999px;
}
.mj-scope .mj-drawer-close:hover{ background:var(--paper-2); }
.mj-scope .mj-drawer-menu{ list-style:none; margin:0; padding:0; }
.mj-scope .mj-drawer-menu li{ margin:0; border-bottom:1px solid var(--hairline); }
.mj-scope .mj-drawer-menu .sub-menu{ display:none; }
.mj-scope .mj-drawer-menu a{
  display:block; padding:15px 2px; font-family:var(--ff-display); font-weight:500;
  font-size:21px; letter-spacing:-.01em; color:var(--ink);
}
.mj-scope .mj-drawer-menu .current-menu-item > a{ color:var(--brand); }
.mj-scope .mj-drawer-utils{ margin-top:24px; display:flex; flex-direction:column; gap:2px; }
.mj-scope .mj-drawer-utils a{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 2px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); border-top:1px solid var(--hairline);
}
.mj-scope .mj-drawer-utils .mj-cart-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 6px; border-radius:999px; background:var(--brand); color:#fff; font-size:10px; font-weight:600;
}

/* The live primary menu has 9 items — it only sits comfortably on one row at
   ~1200px+. Below that, collapse to the hamburger drawer. (The scoped editorial
   CSS already hides .nav-links at ≤980; we extend that up to 1200 here so the
   row never overflows / pushes the cart off-screen on small laptops & tablets.) */
@media (max-width:1240px){
  .mj-scope .nav-links{ display:none !important; }
  .mj-scope .mj-burger{ display:inline-flex; }
  /* brand left · [search · cart · burger] grouped right (burger sits next to the
     right-sliding drawer so the gesture/placement is cohesive) */
  .mj-scope .nav-inner{ display:flex; align-items:center; gap:6px; }
  .mj-scope .nav .brand{ order:1; margin-right:auto; }
  .mj-scope .nav-utils{ order:2; }
  .mj-scope .mj-burger{ order:3; }
  /* cart becomes a clean icon with an overlapping count badge (no pill, no "Korg") */
  .mj-scope .nav .cart-btn{ position:relative; border:0; padding:8px; margin:0; background:transparent; }
  .mj-scope .nav .cart-btn .cart-label{ display:none; }
  .mj-scope .nav .cart-btn svg{ width:23px; height:23px; }
  .mj-scope .nav .cart-btn .count{
    position:absolute; top:0; right:0; min-width:17px; height:17px; padding:0 4px;
    font-size:10px; line-height:17px; text-align:center;
  }
  .mj-scope .nav .icon-btn{ width:40px; height:40px; }
}
@media (min-width:1241px){
  /* never show the drawer / its backdrop on desktop, even if JS left it open */
  .mj-scope .mj-drawer{ display:none !important; }
}
@media (max-width:600px){
  .mj-scope .nav-inner{ padding:12px 16px; gap:10px; }
  .mj-scope .nav .brand{ font-size:21px; }
  .mj-scope .nav-utils{ gap:4px; }
}
@media (max-width:430px){
  .mj-scope .cart-btn .cart-label{ display:none; }
  .mj-scope .cart-btn{ padding:8px 10px; }
}

/* ---- Header → hero: no white gap. Kill Shoptimizer's content-area top spacing on
   the bespoke editorial templates so the hero/page-head butt against the sticky nav,
   and suppress the breadcrumb row on the homepage (it created the white band). ---- */
body.page-template-template-mj-home #content,
body.page-template-template-mj-home .site-content,
body.page-template-template-mj-home #primary,
body.page-template-template-mj-home .content-area,
body.page-template-template-mj-home main#main,
body.page-template-template-mj-page #content,
body.page-template-template-mj-page .site-content,
body.page-template-template-mj-page #primary,
body.page-template-template-mj-page .content-area,
body.page-template-template-mj-page main#main,
body.page-template-template-mj-om #content,
body.page-template-template-mj-om .site-content,
body.page-template-template-mj-om #primary,
body.page-template-template-mj-om .content-area,
body.page-template-template-mj-om main#main,
body.page-template-template-mj-kontakt #content,
body.page-template-template-mj-kontakt .site-content,
body.page-template-template-mj-kontakt #primary,
body.page-template-template-mj-kontakt .content-area,
body.page-template-template-mj-kontakt main#main,
body.page-template-template-mj-aterforsaljare #content,
body.page-template-template-mj-aterforsaljare .site-content,
body.page-template-template-mj-aterforsaljare #primary,
body.page-template-template-mj-aterforsaljare .content-area,
body.page-template-template-mj-aterforsaljare main#main{
  padding-top:0 !important; margin-top:0 !important;
}
body.page-template-template-mj-home .shoptimizer-breadcrumb,
body.page-template-template-mj-home .woocommerce-breadcrumb,
body.page-template-template-mj-home nav.woocommerce-breadcrumb,
body.page-template-template-mj-home .breadcrumbs,
body.page-template-template-mj-home #breadcrumbs,
body.page-template-template-mj-home .rank-math-breadcrumb,
body.page-template-template-mj-om .shoptimizer-breadcrumb,
body.page-template-template-mj-om .woocommerce-breadcrumb,
body.page-template-template-mj-om nav.woocommerce-breadcrumb,
body.page-template-template-mj-om .breadcrumbs,
body.page-template-template-mj-om #breadcrumbs,
body.page-template-template-mj-om .rank-math-breadcrumb,
body.page-template-template-mj-kontakt .shoptimizer-breadcrumb,
body.page-template-template-mj-kontakt .woocommerce-breadcrumb,
body.page-template-template-mj-kontakt nav.woocommerce-breadcrumb,
body.page-template-template-mj-kontakt .breadcrumbs,
body.page-template-template-mj-kontakt #breadcrumbs,
body.page-template-template-mj-kontakt .rank-math-breadcrumb,
body.page-template-template-mj-aterforsaljare .shoptimizer-breadcrumb,
body.page-template-template-mj-aterforsaljare .woocommerce-breadcrumb,
body.page-template-template-mj-aterforsaljare nav.woocommerce-breadcrumb,
body.page-template-template-mj-aterforsaljare .breadcrumbs,
body.page-template-template-mj-aterforsaljare #breadcrumbs,
body.page-template-template-mj-aterforsaljare .rank-math-breadcrumb{ display:none !important; }

/* ---- Editorial blog (home.php / archive.php / single.php). The bespoke
   templates render their own full-bleed hero + breadcrumbs, so zero the
   Shoptimizer content padding and hide its breadcrumb. Scoped to post-context
   body classes (.blog/.single-post/.category/.tag/.author/.date) so the
   WooCommerce shop archives (.post-type-archive-product / .tax-product_cat)
   are never affected. ---- */
body.blog #content, body.blog .site-content, body.blog #primary, body.blog .content-area, body.blog main#main,
body.single-post #content, body.single-post .site-content, body.single-post #primary, body.single-post .content-area, body.single-post main#main,
body.category #content, body.category .site-content, body.category #primary, body.category .content-area, body.category main#main,
body.tag #content, body.tag .site-content, body.tag #primary, body.tag .content-area, body.tag main#main,
body.author #content, body.author .site-content, body.author #primary, body.author .content-area, body.author main#main,
body.date #content, body.date .site-content, body.date #primary, body.date .content-area, body.date main#main{
  padding-top:0 !important; margin-top:0 !important;
}
body.blog .shoptimizer-breadcrumb, body.blog .woocommerce-breadcrumb, body.blog .breadcrumbs, body.blog #breadcrumbs, body.blog .rank-math-breadcrumb, body.blog .page-header,
body.single-post .shoptimizer-breadcrumb, body.single-post .woocommerce-breadcrumb, body.single-post .breadcrumbs, body.single-post #breadcrumbs, body.single-post .rank-math-breadcrumb, body.single-post .entry-header,
body.category .shoptimizer-breadcrumb, body.category .woocommerce-breadcrumb, body.category .breadcrumbs, body.category #breadcrumbs, body.category .rank-math-breadcrumb, body.category .page-header,
body.tag .shoptimizer-breadcrumb, body.tag .woocommerce-breadcrumb, body.tag .breadcrumbs, body.tag #breadcrumbs, body.tag .rank-math-breadcrumb, body.tag .page-header,
body.author .shoptimizer-breadcrumb, body.author .woocommerce-breadcrumb, body.author .breadcrumbs, body.author #breadcrumbs, body.author .rank-math-breadcrumb, body.author .page-header,
body.date .shoptimizer-breadcrumb, body.date .woocommerce-breadcrumb, body.date .breadcrumbs, body.date #breadcrumbs, body.date .rank-math-breadcrumb, body.date .page-header{ display:none !important; }

/* ---- Editorial 404 ---- */
body.error404 #content, body.error404 .site-content, body.error404 #primary, body.error404 .content-area, body.error404 main#main{ padding-top:0 !important; margin-top:0 !important; }
body.error404 .shoptimizer-breadcrumb, body.error404 .woocommerce-breadcrumb, body.error404 .breadcrumbs, body.error404 #breadcrumbs, body.error404 .rank-math-breadcrumb, body.error404 .page-header{ display:none !important; }
.mj-scope .mj-404{ max-width:760px; margin:0 auto; padding:104px 0 120px; text-align:center; position:relative; }
.mj-scope .mj-404::before{ content:""; position:absolute; inset:-40px 0 auto; height:420px; background:radial-gradient(60% 80% at 50% 0,color-mix(in oklab,var(--brand) 8%,transparent),transparent 70%); pointer-events:none; z-index:0; }
.mj-scope .mj-404 .wrap{ position:relative; z-index:1; }
.mj-scope .mj-404 .eyebrow{ display:block; margin-bottom:16px; }
.mj-scope .mj-404 h1{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(52px,8vw,120px); line-height:.98; letter-spacing:-.025em; margin:0; }
.mj-scope .mj-404 h1 em{ font-style:italic; color:var(--brand); }
.mj-scope .mj-404 .sub{ margin:20px auto 0; max-width:52ch; color:var(--ink-soft); font-size:17px; line-height:1.6; }
.mj-scope .mj-404-search{ display:flex; gap:8px; max-width:480px; margin:32px auto 0; }
.mj-scope .mj-404-search input{ flex:1; height:50px; padding:0 18px; border:1px solid var(--hairline-strong); border-radius:999px; background:var(--card); font-family:var(--ff-sans); font-size:15px; color:var(--ink); }
.mj-scope .mj-404-search input:focus{ outline:none; border-color:var(--brand); }
.mj-scope .mj-404-search button{ height:50px; white-space:nowrap; }
.mj-scope .mj-404-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.mj-scope .mj-404-links{ margin-top:40px; padding-top:28px; border-top:1px solid var(--hairline); display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center; align-items:center; font-size:14px; }
.mj-scope .mj-404-links .lbl{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); }
.mj-scope .mj-404-links a{ color:var(--brand); border-bottom:1px solid color-mix(in oklab,var(--brand) 35%,transparent); }
.mj-scope .mj-404-links a:hover{ border-bottom-color:var(--brand); }
@media (max-width:600px){ .mj-scope .mj-404{ padding:64px 0 80px; } .mj-scope .mj-404-search{ flex-direction:column; } .mj-scope .mj-404-search input, .mj-scope .mj-404-search button{ width:100%; } }

/* ---- Homepage: break .mj-home out of Shoptimizer's .col-full to full viewport ---- */
/* Paint the paper bg on the 100vw container so the body never shows white gutters at
   the far L/R edges (same fix .mj-page already has below). */
.mj-scope .mj-home{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); overflow-x:clip; background:var(--bg); }
.mj-scope .mj-home .wrap{ width:100%; }
/* cat-card: protect price from colliding with title */
.mj-scope .cat-card .cat-body{ gap:18px; }
.mj-scope .cat-card .cat-price{ flex:none; white-space:nowrap; }

/* Hero: background layer must never capture clicks; lift content + CTAs above it */
.mj-scope .home-hero .bg,
.mj-scope .home-hero .bg::after{ pointer-events:none; }
.mj-scope .home-hero .inner{ position:relative; z-index:2; }
.mj-scope .home-hero .ctas .btn{ position:relative; z-index:3; }

/* ---- Editorial content pages (template-mj-page.php) ---- */
/* The full-bleed .mj-page is 100vw but Shoptimizer constrains its .mj-scope
   parent (which carries the paper bg) to the content column — so on wide
   viewports the page bg only painted in the middle, leaving white gutters.
   Paint the paper bg on the full-bleed .mj-page itself so it's edge-to-edge. */
.mj-scope .mj-page{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); overflow-x:clip; background:var(--bg); }
.mj-scope .mj-page .page-head{ background:var(--paper-2); }
.mj-scope .mj-page-body{ padding:56px 0 84px; }
.mj-scope .mj-prose{ max-width:760px; margin:0 auto; }
.mj-scope .mj-prose h2{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(28px,3.2vw,44px); letter-spacing:-.02em; line-height:1.06; margin:42px 0 14px; }
.mj-scope .mj-prose h3{ font-family:var(--ff-display); font-weight:var(--display-weight); font-size:clamp(21px,2.4vw,30px); letter-spacing:-.01em; margin:32px 0 12px; }
.mj-scope .mj-prose h2 em,.mj-scope .mj-prose h3 em{ font-style:italic; color:var(--brand); }
.mj-scope .mj-prose p{ font-size:17px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.mj-scope .mj-prose p:first-of-type{ font-size:20px; line-height:1.55; color:var(--ink); }
.mj-scope .mj-prose a{ color:var(--brand); border-bottom:1px solid color-mix(in oklab,var(--brand) 40%, transparent); }
.mj-scope .mj-prose a:hover{ border-bottom-color:var(--brand); }
.mj-scope .mj-prose ul,.mj-scope .mj-prose ol{ font-size:17px; line-height:1.7; color:var(--ink-soft); padding-left:1.25em; margin:0 0 20px; }
.mj-scope .mj-prose li{ margin:0 0 8px; }
.mj-scope .mj-prose blockquote{ border-left:3px solid var(--brand); padding-left:22px; margin:26px 0; font-family:var(--ff-display); font-weight:var(--display-weight); font-style:italic; font-size:24px; line-height:1.3; color:var(--ink); }
.mj-scope .mj-prose img{ border-radius:8px; height:auto; }
.mj-scope .mj-prose strong{ color:var(--ink); font-weight:600; }
.mj-scope .mj-prose hr{ border:0; border-top:1px solid var(--hairline); margin:36px 0; }

/* ---- Produktinfo hub (template-mj-produktinfo.php): safety-sheet directory as cards ---- */
.mj-scope .mj-produktinfo .pi-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px; margin:0 0 28px;
}
.mj-scope .mj-produktinfo .pi-card{
  background:var(--card); border:1px solid var(--hairline); border-radius:14px;
  padding:24px 26px; display:flex; flex-direction:column;
}
.mj-scope .mj-produktinfo .pi-card h2{
  font-family:var(--ff-display); font-weight:var(--display-weight);
  font-size:22px; line-height:1.1; letter-spacing:-.01em; color:var(--ink);
  margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--hairline);
}
.mj-scope .mj-produktinfo .pi-card-body ul{ list-style:none; margin:0; padding:0; }
.mj-scope .mj-produktinfo .pi-card-body li{
  margin:0; padding:9px 0; border-bottom:1px solid color-mix(in oklab,var(--hairline) 55%,transparent);
  font-size:15px; line-height:1.5; color:var(--ink-mute);
}
.mj-scope .mj-produktinfo .pi-card-body li:last-child{ border-bottom:0; padding-bottom:0; }
.mj-scope .mj-produktinfo .pi-card-body li a{
  color:var(--brand); font-weight:500;
  border-bottom:1px solid color-mix(in oklab,var(--brand) 30%,transparent);
}
.mj-scope .mj-produktinfo .pi-card-body li a:hover{ border-bottom-color:var(--brand); }

.mj-scope .mj-produktinfo .pi-info-row{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px;
}
.mj-scope .mj-produktinfo .pi-info{
  background:var(--paper-2); border:1px solid var(--hairline); border-radius:14px;
  padding:24px 26px;
}
.mj-scope .mj-produktinfo .pi-info h2{
  font-family:var(--ff-display); font-weight:var(--display-weight);
  font-size:21px; line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 10px;
}
.mj-scope .mj-produktinfo .pi-info-body p{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0 0 10px; }
.mj-scope .mj-produktinfo .pi-info-body p:last-child{ margin-bottom:0; }
.mj-scope .mj-produktinfo .pi-info-body a{ color:var(--brand); }
@media (max-width:640px){
  .mj-scope .mj-produktinfo .pi-info-row{ grid-template-columns:1fr; }
}

/* ---- Mobile: utility bar must not overflow (real-device QA pending) ---- */
@media (max-width:760px){
  .mj-scope .utility-inner{ padding:7px 16px; gap:10px; font-size:10px; flex-wrap:wrap; justify-content:center; text-align:center; }
  .mj-scope .utility .group{ gap:10px; flex-wrap:wrap; justify-content:center; }
  .mj-scope .utility .group:last-child span:last-of-type{ display:none; }
}

/* ---- Focus-mode checkout (2026-06-03) ----
   Distraction-free: strip the utility bar, promo bar and the full nav (menu,
   search, cart, hamburger) on the checkout; keep only a centred logo. The theme's
   min-ck already removes the footer. */
body.woocommerce-checkout .mj-scope .utility,
body.woocommerce-checkout .mj-scope .promo-bar{ display:none !important; }
body.woocommerce-checkout .mj-scope .nav-links,
body.woocommerce-checkout .mj-scope .nav-utils,
body.woocommerce-checkout .mj-scope .mj-burger,
body.woocommerce-checkout .mj-scope .icon-btn,
body.woocommerce-checkout .mj-scope .cart-btn{ display:none !important; }
body.woocommerce-checkout .mj-scope .nav{ position:static !important; }
body.woocommerce-checkout .mj-scope .nav-inner{ grid-template-columns:1fr !important; justify-items:center; }
body.woocommerce-checkout .mj-scope .brand{ justify-self:center; }