/* ==========================================================================
   My Account styling (classic WooCommerce templates)

   Wordt alleen geladen op is_account_page(). In tegenstelling tot Cart en
   Checkout is dit géén React/Blocks-content maar klassieke server-rendered
   PHP-templates, dus geen MutationObserver nodig.

   Aandachtspunten:
   - Selectors bevatten 'main' om Greyd's max-width: 1000px regel qua
     specificiteit te verslaan.
   - De breadcrumb-block draagt óók de kale class 'woocommerce'. De max-width
     geldt daarom voor alle wrappers, maar de grid-layout alleen voor de
     wrapper die de account-navigatie bevat (:has()).
   - WooCommerce clearfix pseudo-elements met display:table worden flex-items;
     overal uitschakelen waar flex of grid wordt toegepast.
   - Drie verschillende formulier-markups op deze pagina's:
     * adresformulier    p.form-row binnen __field-wrapper
     * accountdetails    p.form-row direct in de form, met div.clear + fieldset
     * checkout          React Blocks (zie checkout.css)
   ========================================================================== */

/* --- Layout: navigatie links, content rechts --- */
.woocommerce-account main .woocommerce {
    max-width: 100% !important;
}

.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    display: grid !important;
    grid-template-columns: 170px 1fr !important;
    gap: 20px !important;
    align-items: start !important;
}

.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
    display: none !important;
}

/* --- Notices --- */
.woocommerce-account .wc-block-components-notice-banner {
    margin-top: 0;
}

/* --- Accountnavigatie --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #0B1829;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #B46A55;
    text-shadow: 0 14px 20px rgba(11, 24, 41, 0.03);
}

/* --- Contentkolom --- */
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* ==========================================================================
   Dashboard
   Eigen template (templates/myaccount/dashboard.php): de drie links staan
   als opsomming onder elkaar i.p.v. in één zin.
   ========================================================================== */

.woocommerce-account .blossom-account-dashboard__intro {
    margin: 16px 0 8px !important;
}

.woocommerce-account .blossom-account-dashboard__links {
    list-style: disc !important;
    margin: 0 !important;
    padding: 0 0 0 20px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.woocommerce-account .blossom-account-dashboard__links li {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .blossom-account-dashboard__links li::marker {
    color: #B46A55;
}

/* ==========================================================================
   Bestellingen-overzicht
   ========================================================================== */

/* border-collapse: separate maakt border-radius en spacing per rij mogelijk */
.woocommerce-account .woocommerce-orders-table {
    width: 100%;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-orders-table thead th {
    border: none !important;
    background: transparent !important;
    padding: 0 20px 4px !important;
    text-align: left;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

/* Elke bestelling als los wit blok */
.woocommerce-account .woocommerce-orders-table tbody tr {
    background: rgba(255, 255, 255, 0.75);
}

.woocommerce-account .woocommerce-orders-table tbody th,
.woocommerce-account .woocommerce-orders-table tbody td {
    border: none !important;
    background: transparent !important;
    padding: 20px !important;
    vertical-align: middle;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.woocommerce-account .woocommerce-orders-table tbody tr > *:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.woocommerce-account .woocommerce-orders-table tbody tr > *:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.woocommerce-account .woocommerce-orders-table tbody a:not(.button) {
    color: #905544;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-orders-table tbody a:not(.button):hover,
.woocommerce-account .woocommerce-orders-table tbody a:not(.button):focus {
    color: #B46A55;
}

.woocommerce-account .woocommerce-orders-table .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.woocommerce-account .woocommerce-orders-table thead th.woocommerce-orders-table__header-order-actions,
.woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
    text-align: right !important;
}

/* ==========================================================================
   Bestelgegevens (view-order)
   ========================================================================== */

.woocommerce-account .woocommerce-customer-details,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-order-downloads {
    margin-block: 2em;
}

.woocommerce-account .woocommerce-order-details__title {
    color: #C28675;
    font-family: 'Bungee', cursive, sans-serif;
    font-size: 22px;
    margin: 0 0 20px !important;
}

/* Hele tabel als één wit blok, rijen gescheiden door een lijn */
.woocommerce-account .woocommerce-table--order-details {
    width: 100%;
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    overflow: hidden;
}

.woocommerce-account .woocommerce-table--order-details thead th {
    border: none !important;
    background: transparent !important;
    padding: 16px 20px !important;
    text-align: left;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.woocommerce-account .woocommerce-table--order-details tbody th,
.woocommerce-account .woocommerce-table--order-details tbody td,
.woocommerce-account .woocommerce-table--order-details tfoot th,
.woocommerce-account .woocommerce-table--order-details tfoot td {
    border: none !important;
    border-top: 1px solid rgba(11, 24, 41, 0.08) !important;
    background: transparent !important;
    padding: 16px 20px !important;
    vertical-align: top;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

.woocommerce-account .woocommerce-table--order-details .product-quantity {
    font-weight: 700;
    color: inherit;
}

.woocommerce-account .woocommerce-table--order-details a:not(.button) {
    color: #905544;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-table--order-details a:not(.button):hover,
.woocommerce-account .woocommerce-table--order-details a:not(.button):focus {
    color: #B46A55;
}

.woocommerce-account .woocommerce-table--order-details .woocommerce-Price-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* --- Betaalinstructies (Mollie) ---
   Overschrijft WooCommerce notice-styling: gekleurde bovenrand, grijze
   achtergrond en de padding-left die ruimte maakte voor het icoon. */
.woocommerce-account section.mollie-instructions.woocommerce-info {
    background: rgba(255, 255, 255, 0.75) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin: 12px 0 0 !important;
    color: #68707A !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.woocommerce-account section.mollie-instructions.woocommerce-info::before,
.woocommerce-account section.mollie-instructions.woocommerce-info::after {
    content: none !important;
    display: none !important;
}

.woocommerce-account section.mollie-instructions.woocommerce-info p {
    margin: 0 !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.woocommerce-account section.mollie-instructions.woocommerce-info strong {
    color: #0B1829;
    font-weight: 700;
}

/* ==========================================================================
   Factuur- en verzendadres op de order-details pagina
   col2-set gebruikt floats met width 48%; vervangen door grid.
   ========================================================================== */

.woocommerce-account .woocommerce-columns--addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 32px 0 0 !important;
}

.woocommerce-account .woocommerce-columns--addresses::before,
.woocommerce-account .woocommerce-columns--addresses::after {
    display: none !important;
}

.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-column__title {
    color: #C28675;
    font-family: 'Bungee', cursive, sans-serif;
    font-size: 22px;
    margin: 0 0 20px !important;
}

.woocommerce-account .woocommerce-columns--addresses address {
    background: rgba(255, 255, 255, 0.75);
    border: none !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 0 !important;
    height: 100%;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-columns--addresses address p {
    margin: 12px 0 0 !important;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* --- Extra velden (Huisnummer, Levering op werkdagen) ---
   Inline label + waarde. Bewust géén grid: die zou de waarde naar de
   rechterrand duwen i.p.v. direct achter het label. */
.woocommerce-account .wc-block-components-additional-fields-list {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    display: block;
}

.woocommerce-account .wc-block-components-additional-fields-list dt {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    opacity: 0.7;
}

.woocommerce-account .wc-block-components-additional-fields-list dt::after {
    content: ": ";
}

.woocommerce-account .wc-block-components-additional-fields-list dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
}

/* Forceert een regelafbreking na elke waarde, zodat elk paar op een
   eigen regel staat terwijl dt en dd inline naast elkaar blijven. */
.woocommerce-account .wc-block-components-additional-fields-list dd::after {
    content: "";
    display: block;
}

/* ==========================================================================
   Adressen-overzicht (edit-address)
   Andere markup dan de order-details pagina: .woocommerce-Addresses
   i.p.v. .woocommerce-columns--addresses.
   ========================================================================== */

.woocommerce-account .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0 0 !important;
}

.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
    display: none !important;
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Titel + bewerk-link op één rij */
.woocommerce-account .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* WooCommerce clearfix wordt hier een flex-item en duwt de titel
   naar rechts; uitschakelen. */
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
    content: none !important;
    display: none !important;
}

.woocommerce-account .woocommerce-Address-title h2 {
    color: #C28675;
    font-family: 'Bungee', cursive, sans-serif;
    font-size: 22px;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-Address-title a.edit {
    flex-shrink: 0;
    color: #905544;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.woocommerce-account .woocommerce-Address-title a.edit:hover,
.woocommerce-account .woocommerce-Address-title a.edit:focus {
    color: #B46A55;
}

.woocommerce-account .woocommerce-Address address {
    background: rgba(255, 255, 255, 0.75);
    border: none !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 0 !important;
    height: auto;
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.6;
}

.woocommerce-account .woocommerce-Address address strong {
    font-weight: 700;
    opacity: 0.7;
}

/* Intro-tekst boven de adressen. WooCommerce zet hier geen class op,
   vandaar de :first-of-type selector. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
    color: #68707A;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 !important;
}

/* ==========================================================================
   Adresformulier (edit-address/facturatie + /verzending)
   Klassieke markup met float-based form-row-first / form-row-last,
   vervangen door grid.
   ========================================================================== */

.woocommerce-account .woocommerce-address-fields > h2,
.woocommerce-account form .woocommerce-address-fields ~ h2,
.woocommerce-account .woocommerce-MyAccount-content form > h2 {
    color: #C28675;
    font-family: 'Bungee', cursive, sans-serif;
    font-size: 22px;
    margin: 0 0 24px !important;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper::before,
.woocommerce-account .woocommerce-address-fields__field-wrapper::after {
    content: none !important;
    display: none !important;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row::before,
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row::after {
    content: none !important;
    display: none !important;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first {
    grid-column: 1 / 2;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last {
    grid-column: 2 / 3;
}

/* ==========================================================================
   Accountdetails (edit-account)
   form-rows staan direct in de form, met div.clear ertussen en een
   fieldset voor de wachtwoordvelden.
   ========================================================================== */

.woocommerce-account .woocommerce-EditAccountForm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.woocommerce-account .woocommerce-EditAccountForm::before,
.woocommerce-account .woocommerce-EditAccountForm::after {
    content: none !important;
    display: none !important;
}

/* Clear-divs zijn overbodig binnen een grid */
.woocommerce-account .woocommerce-EditAccountForm > .clear {
    display: none !important;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row,
.woocommerce-account .woocommerce-EditAccountForm > fieldset,
.woocommerce-account .woocommerce-EditAccountForm > p {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 1 / -1;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row::before,
.woocommerce-account .woocommerce-EditAccountForm > .form-row::after {
    content: none !important;
    display: none !important;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row-first {
    grid-column: 1 / 2;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
    grid-column: 2 / 3;
}

/* Fieldset zonder eigen omkadering; alleen de legend blijft als kop */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    display: grid;
    gap: 20px;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
    color: #C28675;
    font-family: 'Bungee', cursive, sans-serif;
    font-size: 18px;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    width: auto;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .form-row {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description,
.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description em {
    display: block;
    margin: 6px 0 0;
    color: #68707A;
    font-size: 13px;
    font-style: normal;
    line-height: 1.4;
}

.woocommerce-account .woocommerce-EditAccountForm .password-input {
    display: block;
    position: relative;
    width: 100%;
}

.woocommerce-account .woocommerce-EditAccountForm .password-input .show-password-input {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
}

/* ==========================================================================
   Gedeelde formulierstijl (adresformulier + accountdetails)
   Visueel gelijk aan de checkout, maar met classic-markup selectors.
   ========================================================================== */

.woocommerce-account .woocommerce-address-fields .form-row > label,
.woocommerce-account .woocommerce-EditAccountForm .form-row > label {
    display: block;
    margin: 0 0 4px !important;
    color: #0B1829 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

.woocommerce-account .woocommerce-address-fields .form-row .required,
.woocommerce-account .woocommerce-EditAccountForm .form-row .required {
    color: #A85054;
    text-decoration: none;
    border: none;
}

.woocommerce-account .woocommerce-address-fields .form-row .optional,
.woocommerce-account .woocommerce-EditAccountForm .form-row .optional {
    color: #68707A;
    font-weight: 400;
}

.woocommerce-account .woocommerce-address-fields .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.woocommerce-account .woocommerce-address-fields .form-row input[type=text],
.woocommerce-account .woocommerce-address-fields .form-row input[type=email],
.woocommerce-account .woocommerce-address-fields .form-row input[type=tel],
.woocommerce-account .woocommerce-address-fields .form-row input[type=number],
.woocommerce-account .woocommerce-address-fields .form-row input[type=password],
.woocommerce-account .woocommerce-address-fields .form-row input[type=url],
.woocommerce-account .woocommerce-address-fields .form-row select,
.woocommerce-account .woocommerce-address-fields .form-row textarea,
.woocommerce-account .woocommerce-EditAccountForm .form-row input[type=text],
.woocommerce-account .woocommerce-EditAccountForm .form-row input[type=email],
.woocommerce-account .woocommerce-EditAccountForm .form-row input[type=tel],
.woocommerce-account .woocommerce-EditAccountForm .form-row input[type=password] {
    width: 100%;
    border-radius: 8px !important;
    background: #FFF !important;
    box-shadow: 0 4px 24px 0 rgba(188, 188, 188, 0.15) !important;
    border: 1px solid #FFF !important;
    padding: 12px 14px !important;
    color: #0B1829;
    font-size: 15px;
    line-height: 1.4;
}

/* Ruimte vrijhouden voor de wachtwoord-toggle knop */
.woocommerce-account .woocommerce-EditAccountForm .password-input input[type=password] {
    padding-right: 44px !important;
}

.woocommerce-account .woocommerce-address-fields .form-row input::placeholder,
.woocommerce-account .woocommerce-address-fields .form-row textarea::placeholder,
.woocommerce-account .woocommerce-EditAccountForm .form-row input::placeholder {
    color: #CBCBCB !important;
    opacity: 1;
    font-size: 12px !important;
}

/* Select2 (land/regio) dezelfde veldstijl geven */
.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single {
    height: auto !important;
    border-radius: 8px !important;
    background: #FFF !important;
    box-shadow: 0 4px 24px 0 rgba(188, 188, 188, 0.15) !important;
    border: 1px solid #FFF !important;
    padding: 12px 14px !important;
}

.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.4 !important;
    color: #0B1829;
    font-size: 15px;
}

.woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
}

/* Checkbox-rij (Verzenden Levering op werkdagen) */
.woocommerce-account .woocommerce-address-fields .form-row label.checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #0B1829 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.woocommerce-account .woocommerce-address-fields .form-row input[type=checkbox] {
    width: auto;
    margin: 0;
}

.woocommerce-account .woocommerce-address-fields > p:last-child {
    margin: 24px 0 0 !important;
}

.woocommerce-account .woocommerce-EditAccountForm > p:last-child {
    margin: 4px 0 0 !important;
}

/* ==========================================================================
   Uitgelogd: Login + Registreren (#customer_login) en Wachtwoord vergeten
   (.woocommerce-ResetPassword). Zelfde veld- en labelstijl als de
   accountformulieren hierboven. WooCommerce zet standaard een grijze rand,
   padding en radius op form.login / form.register; die halen we weg zodat
   de witte velden direct op de achtergrond staan, net als in de checkout.
   ========================================================================== */

/* --- Layout: twee kolommen via grid i.p.v. WooCommerce floats --- */
.woocommerce-account main #customer_login {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.woocommerce-account main #customer_login::before,
.woocommerce-account main #customer_login::after {
    display: none !important;
}

.woocommerce-account main #customer_login > .u-column1,
.woocommerce-account main #customer_login > .u-column2 {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* --- Koppen Login / Registreren --- */
.woocommerce-account main #customer_login h2 {
    margin: 0 !important;
    color: #C28675 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
}

/* --- Formulier-container: WooCommerce-rand weg --- */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register,
.woocommerce-account form.woocommerce-ResetPassword {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 24px 0 0 !important;
}

.woocommerce-account #customer_login .form-row,
.woocommerce-account .woocommerce-ResetPassword .form-row {
    margin: 0 0 16px !important;
    padding: 0 !important;
}

/* --- Labels --- */
.woocommerce-account #customer_login .form-row > label,
.woocommerce-account .woocommerce-ResetPassword .form-row > label {
    display: block;
    margin: 0 0 4px !important;
    color: #0B1829 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

.woocommerce-account #customer_login .form-row .required,
.woocommerce-account .woocommerce-ResetPassword .form-row .required {
    color: #A85054;
    text-decoration: none;
    border: none;
}

/* --- Velden --- */
.woocommerce-account #customer_login .form-row input[type=text],
.woocommerce-account #customer_login .form-row input[type=email],
.woocommerce-account #customer_login .form-row input[type=password],
.woocommerce-account .woocommerce-ResetPassword .form-row input[type=text],
.woocommerce-account .woocommerce-ResetPassword .form-row input[type=email],
.woocommerce-account .woocommerce-ResetPassword .form-row input[type=password] {
    width: 100%;
    border-radius: 8px !important;
    background: #FFF !important;
    box-shadow: 0 4px 24px 0 rgba(188, 188, 188, 0.15) !important;
    border: 1px solid #FFF !important;
    padding: 12px 14px !important;
    color: #0B1829;
    font-size: 15px;
    line-height: 1.4;
}

.woocommerce-account #customer_login .form-row input:focus,
.woocommerce-account .woocommerce-ResetPassword .form-row input:focus {
    border-color: #B46A55 !important;
    outline: none;
}

/* --- Wachtwoord-toggle --- */
.woocommerce-account #customer_login .password-input,
.woocommerce-account .woocommerce-ResetPassword .password-input {
    display: block;
    position: relative;
    width: 100%;
}

.woocommerce-account #customer_login .password-input input[type=password],
.woocommerce-account #customer_login .password-input input[type=text],
.woocommerce-account .woocommerce-ResetPassword .password-input input {
    padding-right: 44px !important;
}

.woocommerce-account #customer_login .password-input .show-password-input,
.woocommerce-account .woocommerce-ResetPassword .password-input .show-password-input {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
}

/* --- Login-rij: knop + Onthouden op één lijn --- */
.woocommerce-account #customer_login form.login .form-row:has(.woocommerce-form-login__submit) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 24px !important;
}

.woocommerce-account #customer_login form.login .form-row:has(.woocommerce-form-login__submit)::before,
.woocommerce-account #customer_login form.login .form-row:has(.woocommerce-form-login__submit)::after {
    display: none !important;
}

.woocommerce-account #customer_login .woocommerce-form-login__submit {
    order: -1;
    float: none !important;
    margin: 0 !important;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    color: #0B1829;
    font-size: 13px;
    font-weight: 600;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme input[type=checkbox] {
    margin: 0;
}

/* --- Losse teksten en links --- */
.woocommerce-account #customer_login form.register > p:not(.form-row),
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p,
.woocommerce-account .woocommerce-ResetPassword > p:first-child {
    margin: 0 0 16px !important;
    color: #68707A;
    font-size: 13px;
    line-height: 1.5;
}

.woocommerce-account #customer_login .woocommerce-LostPassword,
.woocommerce-account #customer_login .lost_password {
    margin: 16px 0 0 !important;
}

.woocommerce-account #customer_login .lost_password a,
.woocommerce-account #customer_login .woocommerce-privacy-policy-text a {
    color: #905544;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.woocommerce-account #customer_login .lost_password a:hover,
.woocommerce-account #customer_login .woocommerce-privacy-policy-text a:hover {
    color: #B46A55;
}

.woocommerce-account #customer_login .lost_password a {
    font-size: 13px;
}

/* Privacybeleid-link even groot als de tekst eromheen (Greyd vergroot links) */
.woocommerce-account #customer_login .woocommerce-privacy-policy-text a {
    font-size: inherit !important;
    line-height: inherit !important;
}

.woocommerce-account #customer_login form.register .woocommerce-form-register__submit {
    margin: 8px 0 0 !important;
}

/* ==========================================================================
   Responsive
   Het adressen-overzicht stapelt eerder (1045px) dan de rest (781px),
   omdat de twee adreskaarten naast elkaar daar al te smal worden.
   ========================================================================== */

@media (max-width: 1045px) {

    .woocommerce-account .woocommerce-Addresses {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 781px) {

    .woocommerce-account main #customer_login {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* --- Bestellingen-overzicht als losse blokken ---
       border-spacing werkt niet meer zodra de rij display:block krijgt,
       dus spacing via margin. */
    .woocommerce-account .woocommerce-orders-table {
        border-spacing: 0 !important;
    }

    .woocommerce-account .woocommerce-orders-table thead {
        display: none !important;
    }

    .woocommerce-account .woocommerce-orders-table tbody tr {
        display: block;
        border-radius: 12px !important;
        padding: 12px 0;
        margin: 0 0 16px !important;
    }

    .woocommerce-account .woocommerce-orders-table tbody tr:last-child {
        margin-bottom: 0 !important;
    }

    /* Bewust géén flex: de Totaal-cel bevat naast de prijs ook een losse
       tekstnode ("voor 1 item"), die als eigen flex-item de prijs naar het
       midden zou duwen. Label daarom absoluut gepositioneerd. */
    .woocommerce-account .woocommerce-orders-table tbody th,
    .woocommerce-account .woocommerce-orders-table tbody td {
        display: block !important;
        position: relative;
        padding: 8px 20px 8px 110px !important;
        text-align: right !important;
        border-radius: 0 !important;
    }

    .woocommerce-account .woocommerce-orders-table tbody th::before,
    .woocommerce-account .woocommerce-orders-table tbody td::before {
        content: attr(data-title) ":" !important;
        position: absolute;
        left: 20px;
        top: 8px;
        color: #68707A;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        opacity: 0.7;
        text-align: left;
    }

    .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
        padding: 12px 20px 4px !important;
        text-align: left !important;
    }

    .woocommerce-account .woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before {
        content: none !important;
    }

    /* --- Compactere padding --- */
    .woocommerce-account .woocommerce-table--order-details thead th,
    .woocommerce-account .woocommerce-table--order-details tbody th,
    .woocommerce-account .woocommerce-table--order-details tbody td,
    .woocommerce-account .woocommerce-table--order-details tfoot th,
    .woocommerce-account .woocommerce-table--order-details tfoot td {
        padding: 12px 16px !important;
    }

    .woocommerce-account section.mollie-instructions.woocommerce-info {
        padding: 12px 16px !important;
    }

    /* --- Adressen onder elkaar --- */
    .woocommerce-account .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .woocommerce-account .woocommerce-columns--addresses address,
    .woocommerce-account .woocommerce-Address address {
        padding: 16px !important;
    }

    /* --- Formulieren: alles onder elkaar --- */
    .woocommerce-account .woocommerce-address-fields__field-wrapper,
    .woocommerce-account .woocommerce-EditAccountForm {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first,
    .woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last,
    .woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
    .woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
        grid-column: 1 / -1;
    }

    .woocommerce-account .woocommerce-EditAccountForm fieldset {
        gap: 16px;
    }
}