/* ------------------------------------------------
   1. GŁÓWNE KONTENERY
   ------------------------------------------------ */

   main.page-content .my-account-wrapper {
    margin: auto;
    max-inline-size: var(--layout-max-inline-size);
    padding-inline: var(--default-content-padding);
    }
   main.page-content .my-account-wrapper .woocommerce {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: var(--desktop-gap);
    }
    main.page-content .my-account-wrapper .woocommerce.login-form {
        grid-template-columns: 1fr;
    }
    @media all and (max-width: 1366px) {
        main.page-content .my-account-wrapper {
            width: var(--desktop-shop-content);
        }
    }
    @media all and (max-width: 767px) {
        main.page-content .my-account-wrapper .woocommerce {
            grid-template-columns: 1fr;
            gap: var(--tablet-gap);
        }
    }
   main.page-content .my-account-wrapper .woocommerce-account {
       /* Dodatkowy wrapper "Moje konto" */
   }
   
   /* ------------------------------------------------
      2. NAWIGACJA "MOJE KONTO"
      ------------------------------------------------ */
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation {
       /* Kontener nawigacji (menu linków) */
       position: relative;
   }
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation ul {
       /* Lista nawigacyjna */
       display: flex;
       flex-direction: column;
       gap: 0rem;
       position: sticky;
       top: 3rem;
   }
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation ul li {
       /* Element listy w menu "Moje konto" */
       font-weight: 600;
       transition: .4s;
       cursor: pointer;
   }
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation ul li a {
       /* Link w menu nawigacji */
       padding: 0.75em 1em;
       display: block;
       color: inherit;
   }

    main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation ul li:hover {
        background: var(--main-accent);
        color: #fff;
    }
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link.is-active {
       /* Aktualnie wybrany link (endpoint) */
       background: var(--main-accent);
       color: #fff;
   }
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link--dashboard,
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link--orders,
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link--downloads,
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link--edit-address,
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link--edit-account,
   main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation-link--customer-logout {
       /* 
        * Unikatowe klasy endpointów (dashboard, zamówienia, 
        * pliki do pobrania, adresy, konto, wylogowanie)
        */
   }
   
   /* ------------------------------------------------
      3. SEKCJA TREŚCI (CONTENT)
      ------------------------------------------------ */
   
   main.page-content .my-account-wrapper .woocommerce-MyAccount-content {
       /* Główny kontener z dynamiczną treścią (orders, addresses, itp.) */
       display: flex;
       flex-direction: column;
       gap: 2rem;
       max-block-size: 100%;
       overflow-x: auto;
   }
   
   /* 3.1. Zamówienia (orders) */
   main.page-content .my-account-wrapper .woocommerce-MyAccount-orders,
   main.page-content .my-account-wrapper .woocommerce-orders-table {
       /* Kontener (tabela) zamówień */
       
       & th {
            font-weight: var(--font-secondary-bold-weight);
            text-transform: uppercase;
            
            & span {
                font-weight: inherit;
            }
       }
   }
   
   main.page-content .my-account-wrapper .woocommerce-orders-table__header,
   main.page-content .my-account-wrapper .woocommerce-orders-table__cell {
       /* Komórki tabeli zamówień (naglówek & body) */
       
       padding: 1rem;
   }
   
   main.page-content .my-account-wrapper .woocommerce-orders-table__row.order {
       /* Pojedynczy wiersz w tabeli zamówień */
   }
   
   /* 3.2. Adresy (my-address) */
   main.page-content .my-account-wrapper .woocommerce-Addresses,
   main.page-content .my-account-wrapper .addresses {
       /* Kontener zbiorczy dla adresów (billing, shipping) */
       display: flex;
       justify-content: space-around;
       gap: 2rem;
   }
   
   main.page-content .my-account-wrapper .woocommerce-Address,
   main.page-content .my-account-wrapper .woocommerce-Address--billing,
   main.page-content .my-account-wrapper .woocommerce-Address--shipping {
       /* Pojedynczy blok adresu + warianty: rozliczeniowy i dostawy */
   }
   
   main.page-content .my-account-wrapper .woocommerce-Address-title h2,
   main.page-content .my-account-wrapper .title h2 {
       font-size: 1.65rem;
   }
   
   main.page-content .my-account-wrapper address {
       /* Znacznik <address> z danymi adresowymi */
       color: var(--text);
       font-size: 1rem;
       font-weight: 600;
       margin-top: 1rem;
       font-style: normal;
   }
   
   main.page-content .my-account-wrapper .woocommerce-Address .edit {
       /* Link / przycisk do edycji adresu */
       text-transform: uppercase;
       transition: .4s;
       font-weight: 600;
       color: var(--main-accent);
       transition: .4s;
   }
   main.page-content .my-account-wrapper .woocommerce-Address .edit:hover {
       color: var(--accent-red);
   } 
   main.page-content .my-account-wrapper .woocommerce-MyAccount-content p:not([class]) {
        text-align: center;
        margin-bottom: 1rem;
    }
   /* 3.3. Formularz edycji konta (edit-account) */
   main.page-content .my-account-wrapper form.edit-account {
       /* Główny formularz edycji danych konta */
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }

   main.page-content .my-account-wrapper .woocommerce-MyAccount-content h2 {
        font-size: 1.65rem;
        margin-bottom: 2rem;
    }
    main.page-content .my-account-wrapper .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    main.page-content .my-account-wrapper .woocommerce-MyAccount-content  .woocommerce-address-fields {
        display: flex;
        flex-direction: column;
        gap: var(--tablet-gap);
    }
   
   main.page-content .my-account-wrapper .woocommerce-form-row,
   main.page-content .my-account-wrapper .form-row {
       /* Pojedynczy wiersz formularza */
   }
   
   main.page-content .my-account-wrapper .woocommerce-form-row--first,
   main.page-content .my-account-wrapper .form-row-first {
       /* Pierwszy wiersz formularza */
   }
   
   main.page-content .my-account-wrapper .woocommerce-form-row--last,
   main.page-content .my-account-wrapper .form-row-last {
       /* Ostatni wiersz formularza */
   }
   
   main.page-content .my-account-wrapper .form-row-wide {
       /* Wiersz zajmujący całą szerokość */
       & + & {
            margin-block-start: 1rem;
       }
   }
   
   main.page-content .my-account-wrapper .woocommerce-Input,
   main.page-content .my-account-wrapper .woocommerce-Input--text,
   main.page-content .my-account-wrapper .input-text {
       /* Styl inputów tekstowych */
   }

    main.page-content .my-account-wrapper .woocommerce-Input:focus,
    main.page-content .my-account-wrapper .woocommerce-Input--text:focus,
    main.page-content .my-account-wrapper .input-text:focus,
    main.page-content .my-account-wrapper .form-wrapper form input:focus,
    main.page-content .my-account-wrapper .form-wrapper form textarea:focus,
    main.page-content .my-account-wrapper .woocommerce-Input:active,
    main.page-content .my-account-wrapper .woocommerce-Input--text:active,
    main.page-content .my-account-wrapper .input-text:active,
    main.page-content .my-account-wrapper .form-wrapper form input:active,
    main.page-content .my-account-wrapper .form-wrapper form textarea:active {
        border: 1px solid var(--main-accent);
        outline: none;
    }  
   
   main.page-content .my-account-wrapper .woocommerce-Button,
   main.page-content .my-account-wrapper .button {
        color: var(--main-accent);
        border: 1px solid currentColor;
        border-radius: var(--default-radius);
        text-transform: uppercase;
        /* padding: 8px 1.25rem; */
        /* font-size: 1rem; */
        width: fit-content;
        margin: auto;
        min-width: 200px;
        text-align: center;
        text-align: center;
        transition: transform 0.4s ease-in-out;
        will-change: transform;
        padding: 0.5em 1em;
        
        &:hover {
            background-color: var(--main-accent);
            color: var(--tlo-background);        
        }
   }
   
   /* 3.4. Metody płatności (payment-methods) */
   main.page-content .my-account-wrapper .woocommerce-table--payment-method,
   main.page-content .my-account-wrapper .payment_methods {
       /* Tabele zapisanych metod płatności */
   }
   
   /* 3.5. Pliki do pobrania (downloads) */
   main.page-content .my-account-wrapper .woocommerce-table--downloads,
   main.page-content .my-account-wrapper .downloads {
       /* Tabela z plikami do pobrania (produkty wirtualne) */
   }
   
   /* ------------------------------------------------
      4. KOMUNIKATY I ALERTY WOO
      ------------------------------------------------ */
   
   main.page-content .my-account-wrapper .woocommerce-error {
       /* Błędy (np. nieprawidłowe hasło) */
   }
   
   main.page-content .my-account-wrapper .woocommerce-message {
       /* Komunikat pozytywny (np. "Dane zapisane!") */
       text-align: center;
       font-weight: var(--font-secondary-bold-weight);
   }
   
   main.page-content .my-account-wrapper .woocommerce-info {
       /* Komunikat informacyjny (np. "Masz nowe powiadomienie") */
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 1.5rem;
       padding: 3rem;
   }

   main.page-content .my-account-wrapper span#account_display_name_description {
        color: #888;
        font-size: 0.85rem;
        font-weight: 600;
        font-style: normal;
        padding: 0.25em 0.5em;
        
        & > * {
            font-style: inherit;
        }
        
        
    }
    main.page-content .my-account-wrapper fieldset {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 2rem 0;
    }
    main.page-content .my-account-wrapper fieldset legend {
        font-size: 2rem;
        margin-block-end: 1rem;
    }
   
   /* ------------------------------------------------
      5. OSTATNIE SZLIFY / RWD / UTYLITARNE
      ------------------------------------------------ */
   
   /*
   @media (max-width: 768px) {
       main.page-content .my-account-wrapper .woocommerce-MyAccount-navigation ul {
           display: flex;
           flex-direction: column;
       }
   }
   */
   
   /*
      Możesz dopisać własne reguły mobilne,
      zmienne, fallbacki, itp.
   */
   
.woocommerce.login-form {

    .u-columns.col2-set {
        display: grid;
        gap: 5rem;

        & h2 {
            margin-block-end: 1em;
        }

        & .woocommerce-form-row {
            margin-block-end: 1rem;
        }

        & .woocommerce-form__label-for-checkbox {
            align-items: center;
            display: flex;
            gap: 0.5em;

            & > input {
                block-size: 1em;
                inline-size: 1em;
            }
        }

        & .woocommerce-button {
            font-size: 1rem;
            margin-block: 2em 1em;
        }

        & a {
            color: var(--main-accent);
            font-size: 1em;

            &:hover {
                text-decoration: underline;
            }
        }

        & .form-row {

            & > label {
                margin-block-end: 0.5em;
            }
        }

        @media (width > 48em) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}