@charset "UTF-8";
/* =========================================================
   CRAFTSMAN ACCOUNT SHELL — HARD DESKTOP LAYOUT FIX
   Forces left nav + right content display
========================================================= */
body .container.main .ch-accountPage {
  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 .ch-accountShell {
  display: grid !important;
  grid-template-columns: 272px minmax(0, 1fr) !important;
  grid-template-areas: "accountNav 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 {
  content: none !important;
  display: none !important; }

body .container.main .ch-accountPage .ch-accountShell__side {
  grid-area: accountNav !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; }

body .container.main .ch-accountPage .ch-accountShell__main {
  grid-area: accountMain !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;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  overflow: hidden !important; }

body .container.main .ch-accountPage .ch-accountNav {
  width: 100% !important;
  max-width: none !important; }

/* Keep it stacked only on tablet/mobile */
@media (max-width: 980px) {
  body .container.main .ch-accountPage .ch-accountShell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "accountNav"
 "accountMain" !important; } }

/* =========================================================
   CRAFTSMAN ACCOUNT NAVIGATION
   Category-selection-list style

   Use for:
   templates/components/account/navigation.html

   Paste at the bottom of custom.css / custom.scss after the account page CSS.
   Targets the rewritten account nav:
   .ch-accountNav
========================================================= */
body .ch-accountPage .ch-accountShell__side {
  position: sticky !important;
  top: 14px !important;
  align-self: start !important;
  z-index: 4 !important; }

body .ch-accountPage .ch-accountNav {
  --ch-nav-orange: #f97316;
  --ch-nav-orange-dark: #c2410c;
  --ch-nav-black: #111827;
  --ch-nav-grey-900: #1f2937;
  --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;
  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 .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 .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 .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 .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 .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 .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 .ch-accountPage .ch-accountNav__item:last-child {
  border-bottom: 0 !important; }

body .ch-accountPage .ch-accountNav__link {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 10px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 7px 10px 7px 12px !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 .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 .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: .7 !important; }

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

body .ch-accountPage .ch-accountNav__code {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--ch-nav-grey-300) !important;
  border-radius: 0 !important;
  background: var(--ch-nav-grey-050) !important;
  color: var(--ch-nav-grey-700) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-align: center !important; }

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 .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 .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__link::before,
body .ch-accountPage .ch-accountNav__link:focus::before {
  width: 4px !important; }

body .ch-accountPage .ch-accountNav__item:hover .ch-accountNav__code,
body .ch-accountPage .ch-accountNav__link:focus .ch-accountNav__code {
  border-color: rgba(249, 115, 22, 0.6) !important;
  background: rgba(249, 115, 22, 0.08) !important;
  color: var(--ch-nav-orange-dark) !important; }

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 .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__link::before {
  width: 4px !important; }

body .ch-accountPage .ch-accountNav__item.is-active .ch-accountNav__code {
  border-color: var(--ch-nav-orange-dark) !important;
  background: var(--ch-nav-orange) !important;
  color: #fff !important; }

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

/* Optional compact footer panel under the nav if you add it later */
body .ch-accountPage .ch-accountNav__foot {
  display: block !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-top: 1px solid var(--ch-nav-grey-300) !important;
  background: var(--ch-nav-grey-050) !important;
  color: var(--ch-nav-grey-600) !important;
  font-size: 11px !important;
  line-height: 1.35 !important; }

/* Tablet: turn the nav into a neat 2-column selection list */
@media (max-width: 980px) {
  body .ch-accountPage .ch-accountShell__side {
    position: relative !important;
    top: auto !important; }
  body .ch-accountPage .ch-accountNav__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .ch-accountPage .ch-accountNav__item:nth-child(odd) {
    border-right: 1px solid var(--ch-nav-grey-200) !important; }
  body .ch-accountPage .ch-accountNav__item:nth-last-child(2):nth-child(odd) {
    border-bottom: 0 !important; } }

/* Phone: return to single column for clean touch targets */
@media (max-width: 560px) {
  body .ch-accountPage .ch-accountNav__head {
    padding: 10px 11px 10px 15px !important; }
  body .ch-accountPage .ch-accountNav__list {
    display: block !important; }
  body .ch-accountPage .ch-accountNav__item:nth-child(odd) {
    border-right: 0 !important; }
  body .ch-accountPage .ch-accountNav__link {
    min-height: 42px !important;
    grid-template-columns: 38px minmax(0, 1fr) 10px !important; } }

/* =========================================================
   FALLBACK
   Use this only if an older account page still outputs the
   original BigCommerce navBar classes instead of .ch-accountNav.
========================================================= */
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; }