@charset "UTF-8";
/* =========================================================
   CRAFTSMAN ACCOUNT SIDEBAR + NAVIGATION — NO CODE LABELS
   Full corrected replacement

   Purpose:
   1) Keep the account navigation as a LEFT SIDEBAR on desktop/tablet.
   2) Style it like the category selection list.
   3) Remove/hide ORD / RET / MSG code boxes.
   4) Only stack the nav above content on small phone widths.

   Paste this at the VERY BOTTOM of custom.css/custom.scss.
========================================================= */
/* =========================================================
   HARD LAYOUT FIX
   This is the important part that keeps the nav as a sidebar.
========================================================= */
body .container.main .ch-accountPage,
body .ch-accountPage {
  --ch-nav-orange: #f97316;
  --ch-nav-orange-dark: #c2410c;
  --ch-nav-black: #111827;
  --ch-nav-grey-900: #1f2937;
  --ch-nav-grey-800: #273241;
  --ch-nav-grey-700: #374151;
  --ch-nav-grey-600: #4b5563;
  --ch-nav-grey-500: #6b7280;
  --ch-nav-grey-300: #d1d5db;
  --ch-nav-grey-200: #e5e7eb;
  --ch-nav-grey-100: #f3f4f6;
  --ch-nav-grey-050: #f9fafb;
  --ch-nav-white: #ffffff;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important; }

body .container.main .ch-accountPage *,
body .ch-accountPage * {
  box-sizing: border-box !important; }

body .container.main .ch-accountPage .ch-accountShell,
body .ch-accountPage .ch-accountShell {
  display: grid !important;
  grid-template-columns: 272px minmax(0, 1fr) !important;
  grid-template-areas: "accountSide accountMain" !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important; }

body .container.main .ch-accountPage .ch-accountShell::before,
body .container.main .ch-accountPage .ch-accountShell::after,
body .ch-accountPage .ch-accountShell::before,
body .ch-accountPage .ch-accountShell::after {
  content: none !important;
  display: none !important; }

body .container.main .ch-accountPage .ch-accountShell__side,
body .ch-accountPage .ch-accountShell__side {
  grid-area: accountSide !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  position: sticky !important;
  top: 14px !important;
  align-self: start !important;
  z-index: 4 !important; }

body .container.main .ch-accountPage .ch-accountShell__main,
body .ch-accountPage .ch-accountShell__main {
  grid-area: accountMain !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 420px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  border: 1px solid var(--ch-nav-grey-300) !important;
  background: var(--ch-nav-white) !important;
  overflow: hidden !important; }

/* =========================================================
   ACCOUNT NAVIGATION — CATEGORY LIST STYLE
========================================================= */
body .container.main .ch-accountPage .ch-accountNav,
body .ch-accountPage .ch-accountNav {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ch-nav-grey-300) !important;
  border-radius: 0 !important;
  background: var(--ch-nav-white) !important;
  box-shadow: none !important;
  overflow: hidden !important; }

body .container.main .ch-accountPage .ch-accountNav__head,
body .ch-accountPage .ch-accountNav__head {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 10px 12px 11px 16px !important;
  border-bottom: 1px solid var(--ch-nav-grey-300) !important;
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.06), rgba(249, 250, 251, 0) 72%), var(--ch-nav-grey-050) !important; }

body .container.main .ch-accountPage .ch-accountNav__head::before,
body .ch-accountPage .ch-accountNav__head::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--ch-nav-orange) !important; }

body .container.main .ch-accountPage .ch-accountNav__eyebrow,
body .ch-accountPage .ch-accountNav__eyebrow {
  display: block !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: var(--ch-nav-grey-500) !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important; }

body .container.main .ch-accountPage .ch-accountNav__title,
body .ch-accountPage .ch-accountNav__title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ch-nav-black) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important; }

body .container.main .ch-accountPage .ch-accountNav__list,
body .ch-accountPage .ch-accountNav__list {
  display: block !important;
  width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ch-nav-white) !important; }

body .container.main .ch-accountPage .ch-accountNav__item,
body .ch-accountPage .ch-accountNav__item {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--ch-nav-grey-200) !important;
  background: var(--ch-nav-white) !important; }

body .container.main .ch-accountPage .ch-accountNav__item:last-child,
body .ch-accountPage .ch-accountNav__item:last-child {
  border-bottom: 0 !important; }

body .container.main .ch-accountPage .ch-accountNav__link,
body .ch-accountPage .ch-accountNav__link {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 10px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 10px 9px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ch-nav-grey-700) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important; }

body .container.main .ch-accountPage .ch-accountNav__link::before,
body .ch-accountPage .ch-accountNav__link::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: var(--ch-nav-orange) !important;
  transition: width .14s ease !important; }

body .container.main .ch-accountPage .ch-accountNav__link::after,
body .ch-accountPage .ch-accountNav__link::after {
  content: "" !important;
  position: relative !important;
  z-index: 1 !important;
  justify-self: end !important;
  width: 6px !important;
  height: 6px !important;
  border-top: 1px solid var(--ch-nav-grey-500) !important;
  border-right: 1px solid var(--ch-nav-grey-500) !important;
  transform: rotate(45deg) !important;
  opacity: .72 !important; }

/* Hide legacy ORD / RET / MSG code chips if the old markup is still present */
body .container.main .ch-accountPage .ch-accountNav__code,
body .ch-accountPage .ch-accountNav__code {
  display: none !important; }

body .container.main .ch-accountPage .ch-accountNav__text,
body .ch-accountPage .ch-accountNav__text {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important; }

body .container.main .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link,
body .container.main .ch-accountPage .ch-accountNav__link:focus,
body .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link,
body .ch-accountPage .ch-accountNav__link:focus {
  background: var(--ch-nav-grey-050) !important;
  color: var(--ch-nav-black) !important;
  outline: none !important; }

body .container.main .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link::before,
body .container.main .ch-accountPage .ch-accountNav__link:focus::before,
body .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link::before,
body .ch-accountPage .ch-accountNav__link:focus::before {
  width: 4px !important; }

body .container.main .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link::after,
body .container.main .ch-accountPage .ch-accountNav__link:focus::after,
body .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link::after,
body .ch-accountPage .ch-accountNav__link:focus::after {
  border-color: var(--ch-nav-orange-dark) !important;
  opacity: 1 !important; }

body .container.main .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link,
body .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link {
  background: rgba(249, 115, 22, 0.08) !important;
  color: var(--ch-nav-black) !important;
  font-weight: 900 !important; }

body .container.main .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link::before,
body .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link::before {
  width: 4px !important; }

body .container.main .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link::after,
body .container.main .ch-accountPage .ch-accountNav__link--current::after,
body .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link::after,
body .ch-accountPage .ch-accountNav__link--current::after {
  border-color: var(--ch-nav-orange-dark) !important;
  opacity: 1 !important; }

body .container.main .ch-accountPage .ch-accountNav__link--current,
body .ch-accountPage .ch-accountNav__link--current {
  cursor: default !important; }

/* =========================================================
   RESPONSIVE BEHAVIOUR
   Keep sidebar until actual phone width.
   The previous CSS switched too early and made it feel like the sidebar vanished.
========================================================= */
@media (max-width: 760px) {
  body .container.main .ch-accountPage,
  body .ch-accountPage {
    padding-left: 10px !important;
    padding-right: 10px !important; }
  body .container.main .ch-accountPage .ch-accountShell,
  body .ch-accountPage .ch-accountShell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "accountSide"
 "accountMain" !important;
    gap: 12px !important; }
  body .container.main .ch-accountPage .ch-accountShell__side,
  body .ch-accountPage .ch-accountShell__side {
    position: relative !important;
    top: auto !important; }
  body .container.main .ch-accountPage .ch-accountNav__link,
  body .ch-accountPage .ch-accountNav__link {
    min-height: 42px !important;
    grid-template-columns: minmax(0, 1fr) 10px !important;
    padding: 10px 10px 10px 16px !important; } }

/* =========================================================
   FALLBACK FOR OLD BIGCOMMERCE NAVBAR ACCOUNT MARKUP
   Safe to keep. Only applies if an older page still outputs:
   .navBar.navBar--account
========================================================= */
body .ch-accountPage .navBar.navBar--account {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden !important; }

body .ch-accountPage .navBar.navBar--account .navBar-section {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important; }

body .ch-accountPage .navBar.navBar--account .navBar-item {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #fff !important; }

body .ch-accountPage .navBar.navBar--account .navBar-action,
body .ch-accountPage .navBar.navBar--account .navBar-item.is-active {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 12px 9px 16px !important;
  color: #374151 !important;
  background: transparent !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  text-decoration: none !important; }

body .ch-accountPage .navBar.navBar--account .navBar-action::before,
body .ch-accountPage .navBar.navBar--account .navBar-item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background: #f97316 !important; }

body .ch-accountPage .navBar.navBar--account .navBar-item:hover .navBar-action::before,
body .ch-accountPage .navBar.navBar--account .navBar-item.is-active::before {
  width: 4px !important; }

body .ch-accountPage .navBar.navBar--account .navBar-item:hover .navBar-action,
body .ch-accountPage .navBar.navBar--account .navBar-item.is-active {
  background: rgba(249, 115, 22, 0.08) !important;
  color: #111827 !important; }