/**
 * Account sidebar nav — MUST load last (after Rokan custom_en.css).
 * Icon + label in one row on every customer-account tab.
 */

/* Figma track + typography (loads after custom_en / themes.css) */
html body.account .page-main.container,
html body[class*="customer-account"] .page-main.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Figma left inset (120px desktop) — title band + sidebar row stay aligned */
html body.account .columns.top,
html body[class*="customer-account"]:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) .columns.top,
html body.account:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) main.page-main > .page-title-wrapper,
html body[class*="customer-account"]:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) main.page-main > .page-title-wrapper,
html body.account:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) #maincontent > .page-title-wrapper,
html body[class*="customer-account"]:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) #maincontent > .page-title-wrapper,
html body.account .page-main > .columns.row,
html body[class*="customer-account"]:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) .page-main > .columns.row,
html body.account .page-main > .columns:not(.top),
html body[class*="customer-account"]:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) .page-main > .columns:not(.top) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--kitup-account-inset-x, clamp(16px, calc(12px + 6.25vw), 120px)) !important;
    padding-right: var(--kitup-account-gutter-x, 20px) !important;
    box-sizing: border-box !important;
}

html body.account .columns.top,
html body[class*="customer-account"] .columns.top {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
}

html body.account .columns.top:empty,
html body[class*="customer-account"] .columns.top:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body.account .columns.top .page-title-wrapper,
html body[class*="customer-account"] .columns.top .page-title-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

html body.account .page-main > .columns.row,
html body[class*="customer-account"] .page-main > .columns.row,
html body.account .page-main > .columns:not(.top),
html body[class*="customer-account"] .page-main > .columns:not(.top) {
    padding-top: 0 !important;
    padding-bottom: 56px !important;
    align-items: flex-start !important;
}

html body.account .column.main > .page-title-wrapper,
html body[class*="customer-account"]:not(.customer-account-login):not(.customer-account-create):not(.customer-account-forgotpassword) .column.main > .page-title-wrapper {
    display: none !important;
}

html body.account .columns.top .page-title-wrapper,
html body[class*="customer-account"] .columns.top .page-title-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

html body.account .page-title-wrapper .page-title,
html body.account .page-title-wrapper .page-title span,
html body[class*="customer-account"] .page-title-wrapper .page-title,
html body[class*="customer-account"] .page-title-wrapper .page-title span {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Bootstrap .row / .col-* gutters shift sidebar right of the H1 */
html body.account .page-main .columns.row,
html body[class*="customer-account"] .page-main .columns.row {
    margin-left: auto !important;
    margin-right: auto !important;
}

html body.account .page-main .columns.row > [class*="col-"],
html body[class*="customer-account"] .page-main .columns.row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body.account .sidebar-main-1,
html body.account .sidebar.sidebar-main,
html body[class*="customer-account"] .sidebar-main-1,
html body[class*="customer-account"] .sidebar.sidebar-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
}

html body.account .kitup-account-nav a.kitup-nav-link,
html body.account .kitup-account-nav strong.kitup-nav-link,
html body.customer-address-index .kitup-account-nav a.kitup-nav-link,
html body.customer-address-index .kitup-account-nav strong.kitup-nav-link,
html body[class*="customer-account"] .kitup-account-nav a.kitup-nav-link,
html body[class*="customer-account"] .kitup-account-nav strong.kitup-nav-link,
html body.account .columns .sidebar .kitup-account-nav .nav.items > .item > a.kitup-nav-link,
html body.account .columns .sidebar .kitup-account-nav .nav.items > .item > strong.kitup-nav-link,
html body.account .columns .sidebar .kitup-account-nav .nav.items > .nav.item > a.kitup-nav-link,
html body.account .columns .sidebar .kitup-account-nav .nav.items > .nav.item > strong.kitup-nav-link,
html body.customer-address-index .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .item > a.kitup-nav-link,
html body.customer-address-index .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .item > strong.kitup-nav-link,
html body.customer-address-index .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .nav.item > a.kitup-nav-link,
html body.customer-address-index .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .nav.item > strong.kitup-nav-link,
html body[class*="customer-account"] .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .item > a.kitup-nav-link,
html body[class*="customer-account"] .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .item > strong.kitup-nav-link,
html body[class*="customer-account"] .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .nav.item > a.kitup-nav-link,
html body[class*="customer-account"] .columns .sidebar .block:first-child .kitup-account-nav .nav.items > .nav.item > strong.kitup-nav-link,
html body[class*="customer-account"] .sidebar-main-1 .kitup-account-nav .nav.items > .nav.item > a.kitup-nav-link,
html body[class*="customer-account"] .sidebar-main-1 .kitup-account-nav .nav.items > .nav.item > strong.kitup-nav-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    line-height: 1.25 !important;
    font-family: var(--kitup-account-font, 'Montserrat', 'Poppins', ui-sans-serif, system-ui, sans-serif) !important;
    font-size: var(--kitup-account-nav-size, 15px) !important;
    font-weight: 300 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
}

html body[class*="customer-account"] .kitup-account-nav .kitup-nav-icon,
html body[class*="customer-account"] .kitup-account-nav .kitup-nav-link svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: block !important;
    margin: 0 !important;
}

html body[class*="customer-account"] .kitup-account-nav .kitup-nav-label {
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    line-height: 1.25 !important;
    font-family: var(--kitup-account-font, 'Montserrat', 'Poppins', ui-sans-serif, system-ui, sans-serif) !important;
    font-size: var(--kitup-account-nav-size, 15px) !important;
}

/* Universal type scale — beat custom_en / kitup-my-orders / themes.css */
html body.account .columns.top .page-title-wrapper .page-title,
html body.account .columns.top .page-title-wrapper .page-title span,
html body[class*="customer-account"] .columns.top .page-title-wrapper .page-title,
html body[class*="customer-account"] .columns.top .page-title-wrapper .page-title span,
html body.account .page-title-wrapper .page-title,
html body[class*="customer-account"] .page-title-wrapper .page-title,
html body.account .page-title-wrapper .page-title span,
html body[class*="customer-account"] .page-title-wrapper .page-title span {
    font-family: var(--kitup-account-font, 'Montserrat', 'Poppins', ui-sans-serif, system-ui, sans-serif) !important;
    font-size: var(--kitup-account-h1-size, 34px) !important;
    font-weight: 700 !important;
    color: var(--kitup-account-edit-heading, #4a5568) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}

html body[class*="customer-account"] .kitup-account-panel-title,
html body.account .kitup-account-panel-title,
html body[class*="customer-account"] .kitup-account-details-heading,
html body.customer-account-edit .kitup-account-details-heading,
html body[class*="customer-account"] .kitup-account-details-legend,
html body[class*="customer-account"] .kitup-account-details-legend span,
html body[class*="customer-account"] .kitup-saved-addresses-title,
html body[class*="customer-account"] .column.main .block .block-title strong:not(.kitup-account-nav__title strong) {
    font-family: var(--kitup-account-font, 'Montserrat', 'Poppins', ui-sans-serif, system-ui, sans-serif) !important;
    font-size: var(--kitup-account-panel-title-size, 18px) !important;
    font-weight: 700 !important;
    color: var(--kitup-account-edit-heading, #4a5568) !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

html body.account .kitup-account-nav__title strong,
html body[class*="customer-account"] .kitup-account-nav__title strong {
    font-family: var(--kitup-account-font, 'Montserrat', 'Poppins', ui-sans-serif, system-ui, sans-serif) !important;
    font-size: var(--kitup-account-sidebar-title-size, 18px) !important;
    font-weight: 700 !important;
}

/* Account edit field visuals: kitup-account-edit.css (loaded after this file) */

html body[class*="customer-account"] .kitup-account-nav .nav.item.current > a.kitup-nav-link,
html body[class*="customer-account"] .kitup-account-nav .nav.item.current > strong.kitup-nav-link {
    background: var(--kitup-account-sidebar-active, #00ffc4) !important;
    color: var(--kitup-account-sidebar-active-text, #000000) !important;
    font-weight: 300 !important;
}

html body[class*="customer-account"] .kitup-account-nav .nav.item.current .kitup-nav-icon,
html body[class*="customer-account"] .kitup-account-nav .nav.item.current .kitup-nav-link svg {
    color: #000000 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

html body[class*="customer-account"] .kitup-account-nav .kitup-nav-item--signout > a.kitup-nav-link {
    color: var(--kitup-account-sidebar-signout, #ffffff) !important;
}

html body[class*="customer-account"] .kitup-account-nav,
html body.account .kitup-account-nav {
    background: var(--kitup-account-sidebar-bg, #080e6e) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html body[class*="customer-account"] .columns .sidebar .block:first-child:not(.kitup-account-nav),
html body[class*="customer-account"] .sidebar .nav.items:not(.kitup-account-nav__list) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Login / register / forgot — inset on page-main only (beats custom_en title padding-left:0) */
html body.customer-account-login main.page-main.container,
html body.customer-account-create main.page-main.container,
html body.customer-account-forgotpassword main.page-main.container {
    padding: 24px 20px 56px clamp(16px, calc(12px + 6.25vw), 120px) !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
}

html body.customer-account-login main.page-main.container .columns,
html body.customer-account-login main.page-main > .columns,
html body.customer-account-login main.page-main > .columns.row,
html body.customer-account-create main.page-main.container .columns,
html body.customer-account-create main.page-main > .columns,
html body.customer-account-forgotpassword main.page-main.container .columns,
html body.customer-account-forgotpassword main.page-main > .columns,
html body.customer-account-login main.page-main.container > *,
html body.customer-account-create main.page-main.container > *,
html body.customer-account-forgotpassword main.page-main.container > *,
html body.customer-account-login .column.main,
html body.customer-account-create .column.main,
html body.customer-account-forgotpassword .column.main,
html body.customer-account-login .login-container,
html body.customer-account-create .login-container,
html body.customer-account-create .form.form-create-account {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

html body.customer-account-login .page-title-wrapper,
html body.customer-account-create .page-title-wrapper,
html body.customer-account-forgotpassword .page-title-wrapper {
    text-align: left !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
}