:root {
    /*! put your custom css here */
}

/* =====================================================================
   My Account — narrow the left navigation to 20%, content fills the rest.

   The nav/content split is set by Salesforce's managed My Account layout
   (<commerce_my_account-my-account-layout>), which exposes no width setting,
   and the custom sidebar just fills whatever the navigation region gives it —
   so this global override is the only lever. Everything is scoped under that
   layout's custom element, so Home / Checkout / login are untouched, and it
   automatically covers EVERY Capsa Account menu (Dashboard, Orders, Invoices,
   Quotes, Support cases, My Lists, Addresses, Profile) since they all share
   this one layout.

   Desktop only: on mobile the layout stacks to a single column, where a fixed
   20% width would squash the sidebar.
   ===================================================================== */
@media (min-width: 769px) {
    commerce_my_account-my-account-layout aside.navigation {
        flex: 0 0 20% !important;
        width: 20% !important;
        min-width: 20% !important;
        max-width: 20% !important;
        box-sizing: border-box;
    }

    /* Drop the navigation's right border (slds-border_right). Below where the blue
       sidebar gradient ends it was showing as a stray vertical line against white. */
    commerce_my_account-my-account-layout aside.navigation.slds-border_right {
        border-right: none !important;
    }

    commerce_my_account-my-account-layout div.content[data-f6-region] {
        flex: 1 1 0% !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box;
    }
}