/* The storefront has guest checkout only. Replace newsletter/account UI with help. */
html body .wf-account{grid-template-columns:auto!important}
html body .mj-reference-footer .mj-footer-help{align-items:flex-start!important}
html body .mj-reference-footer .mj-footer-help p{max-width:620px!important;margin:0 0 24px!important;font-size:13px!important;line-height:1.55!important}
html body .mj-reference-footer .mj-footer-help-button{display:inline-flex!important;min-width:150px!important;height:48px!important;padding:0 24px!important;align-items:center!important;justify-content:center!important;background:#000!important;color:#fff!important;font-size:12px!important;font-weight:700!important}

/* Information pages: remove legacy sidebar offsets and target-site positioning. */
html body.page-pages .wf-info-layout{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
html body.page-pages .wf-info-nav{display:none!important}
html body.page-pages .wf-info-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
html body.page-pages .mj-information-page{width:100%!important;max-width:1440px!important;margin:0 auto!important;padding:44px 40px 70px!important}
html body.page-pages .mj-information-page>.page-designer-reference{margin:0!important;padding:0!important}
html body.page-pages .mj-information-page img{max-width:100%!important;height:auto!important}
html body.page-pages .mj-information-page .about-title-wrapper{margin:0 0 40px!important;padding:0!important}
html body.page-pages .mj-information-page .editorial-module{margin:0 0 48px!important}
html body.page-pages .mj-information-page .customer-service--item{max-width:980px!important;margin:0 auto 34px!important}
html body.page-pages .mj-information-page .customer-service--item p{max-width:none!important}

/* Remove artificial empty rows and top offsets in cart/checkout. */
html body.page-cart .main-cart__right ul{height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
html body.page-cart .main-cart__right ul li{min-height:0!important}
html body.page-cart .main-cart_btns{margin-top:18px!important;padding-top:0!important;border-top:0!important}
html body.page-checkout .dk-checkout-shell{margin-top:0!important;padding-top:24px!important}
html body.page-checkout .dk-checkout-intro{margin:0 0 32px!important;padding:0!important;min-height:0!important;height:auto!important}
html body.page-checkout .main-checkout{margin-top:0!important}
html body.page-checkout .main-login__box,.main-login__on{display:none!important}

/* Product count remains visible even though the compact toolbar count is hidden. */
.page-category .wf-cat-heading>div{display:flex!important;align-items:baseline!important;gap:14px!important;min-width:0!important}
.page-category .wf-cat-heading .wf-cat-count{display:inline-block!important;color:#666!important;font-size:12px!important;font-weight:400!important;white-space:nowrap!important}
@media(max-width:767px){
 html body.page-pages .mj-information-page{padding:30px 16px 50px!important}
 .page-category .wf-cat-heading>div{display:block!important}
 .page-category .wf-cat-heading .wf-cat-count{margin-top:5px!important}
 html body.page-checkout .dk-checkout-shell{padding-top:16px!important}
}

/* Keep the category pill and sort row visually connected. */
.page-category .wf-cat-hierarchy{
 padding:10px 60px 6px!important;
}
.page-category .wf-cat-hierarchy-grid>section{
 margin:0!important;
}
.page-category .wf-cat-level2{
 margin:0!important;
}
.page-category .wf-cat-toolbar{
 min-height:46px!important;
}
@media(max-width:767px){
 .page-category .wf-cat-hierarchy{
  padding:8px 16px 6px!important;
 }
 .page-category .wf-cat-toolbar{
  min-height:50px!important;
 }
}

/* Do not vertically center a tall purchase form: it can push the product name
   underneath the header on shorter desktop viewports. */
@media(min-width:768px){
 html body.page-products .dk-buy{
  justify-content:flex-start!important;
  padding:clamp(42px,7vh,76px) 0 56px!important;
  overflow:visible!important;
 }
}

/* Header/menu and mobile category visibility fixes. */
.wf-mobile-menu .dk-menu-icon{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 width:22px!important;
 font-size:18px!important;
 line-height:1!important;
}
.wf-cart-link{
 position:relative!important;
}
@media(max-width:900px){
 body.menu-open{
  overflow:hidden!important;
 }
 .wf-mobile-menu{
  display:inline-flex!important;
  width:auto!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  align-items:center!important;
  flex-direction:row!important;
  gap:8px!important;
  color:#000!important;
  outline:0!important;
 }
 .wf-mobile-menu .mj-menu-label{
  display:inline-block!important;
 }
 .supra-header .wf-cart-link{
  display:inline-flex!important;
  width:30px!important;
  height:32px!important;
  align-items:center!important;
  justify-content:center!important;
 }
 .supra-header .wf-cart-link .supra-bag-icon,
 .page-index .supra-header .wf-cart-link .supra-bag-icon{
  display:block!important;
  border-color:#000!important;
 }
 .page-index .supra-header .wf-cart-link .supra-bag-icon:before{
  border-color:#000!important;
 }
 .supra-header .wf-cart-link b{
  top:-2px!important;
  right:-6px!important;
  background:#000!important;
  color:#fff!important;
 }
 .menu-open .supra-header .wf-cart-link .supra-bag-icon,
 .menu-open .supra-header .wf-cart-link .supra-bag-icon:before{
  border-color:#fff!important;
 }
 .menu-open .supra-header .wf-cart-link b{
  background:#fff!important;
  color:#000!important;
 }
 html body.menu-open .supra-header .wf-category-nav>.wf-shell{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  gap:26px 20px!important;
  align-content:start!important;
 }
 html body.menu-open .supra-header .wf-category-nav .wf-nav-item{
  display:block!important;
  grid-column:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
 }
 html body.menu-open .supra-header .wf-category-nav .wf-nav-item>a{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 11px!important;
  padding:0!important;
  color:#111!important;
  font-size:14px!important;
  line-height:1.25!important;
 }
 html body.menu-open .supra-header .wf-category-nav .mj-menu-children{
  display:flex!important;
  position:static!important;
  width:100%!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:7px!important;
 }
 html body.menu-open .supra-header .wf-category-nav .mj-menu-children a{
  color:#111!important;
  font-size:10px!important;
  line-height:1.3!important;
 }
 html body.menu-open .supra-header .wf-category-nav .wf-nav-item:first-child>a,
 html body.menu-open .supra-header .wf-category-nav .wf-nav-item:first-child .mj-menu-children a:first-child{
  color:#d6cf00!important;
 }
}

/* Show every child category without horizontal dragging on phones. */
@media(max-width:767px){
 .page-category .wf-cat-hierarchy{
  display:block!important;
  overflow:visible!important;
 }
 .page-category .wf-cat-hierarchy-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  width:100%!important;
  gap:8px!important;
  overflow:visible!important;
 }
 .page-category .wf-cat-hierarchy-grid>section{
  display:block!important;
  width:100%!important;
 }
 .page-category .wf-cat-level2{
  display:flex!important;
  width:100%!important;
  height:auto!important;
  min-height:42px!important;
  margin:0!important;
  padding:7px 10px!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  line-height:1.2!important;
 }
}
/* Mobile navigation polish: neutralize the legacy hamburger span rules. */
@media (max-width: 900px) {
  html body .supra-header .wf-mainbar {
    position: relative !important;
  }

  html body .supra-header .wf-brand.supra-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap !important;
    text-align: center !important;
    z-index: 1 !important;
  }

  html body .supra-header .mj-header-left,
  html body .supra-header .wf-account {
    position: relative !important;
    z-index: 2 !important;
  }

  html body .supra-header .wf-mobile-menu {
    gap: 6px !important;
  }

  html body .supra-header .wf-mobile-menu .mj-menu-label {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html body .supra-header .wf-mobile-menu .dk-menu-icon {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: inherit !important;
    font: normal 18px/1 Arial, sans-serif !important;
  }

  html body.menu-open .supra-header .wf-category-nav {
    box-sizing: border-box !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain !important;
  }
}

/* Keep the product copy clear of the mobile tab bar. */
@media (max-width: 767px) {
  html body.page-products .dk-tab-head {
    display: grid !important;
    grid-template-columns: 35% 65% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  html body.page-products .dk-tab-head > button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 7px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  html body.page-products .dk-description .mj-description > h2:first-child {
    display: none !important;
  }

  html body.page-products .dk-description .mj-description > p:first-of-type {
    margin-top: 0 !important;
  }

  html body.page-products .dk-tab-panel {
    overflow: visible !important;
  }

  html body.page-products .dk-description {
    padding-top: 26px !important;
  }

  html body.page-products .dk-description > div > .mj-description > :first-child {
    margin-top: 0 !important;
  }
}
/* Mobile header/menu final guard (must remain after legacy supra rules). */
@media (max-width: 900px) {
  body .supra-header button.wf-mobile-menu > span {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
  }

  body .supra-header button.wf-mobile-menu > .mj-menu-label {
    font: 700 12px/1 Arial, sans-serif !important;
  }

  body .supra-header button.wf-mobile-menu > .dk-menu-icon {
    position: relative !important;
    display: inline-block !important;
    width: 18px !important;
    height: 14px !important;
    flex: 0 0 18px !important;
    overflow: visible !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body .supra-header button.wf-mobile-menu > .dk-menu-icon::before,
  body .supra-header button.wf-mobile-menu > .dk-menu-icon::after {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    width: 18px !important;
    height: 2px !important;
    background: #111 !important;
    transform-origin: center !important;
  }

  body:not(.menu-open) .supra-header button.wf-mobile-menu > .dk-menu-icon::before {
    top: 1px !important;
    box-shadow: 0 5px 0 #111, 0 10px 0 #111 !important;
  }

  body:not(.menu-open) .supra-header button.wf-mobile-menu > .dk-menu-icon::after {
    display: none !important;
  }

  body.menu-open .supra-header button.wf-mobile-menu > .dk-menu-icon::before {
    background: #fff !important;
    box-shadow: none !important;
    transform: rotate(45deg) !important;
  }

  body.menu-open .supra-header button.wf-mobile-menu > .dk-menu-icon::after {
    display: block !important;
    background: #fff !important;
    transform: rotate(-45deg) !important;
  }

  body.menu-open .supra-header .wf-category-nav > .wf-shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
}