/* ========================================================= Mijn account – Hestia stijl Ga uit van Hestia's eigen kleurvariabelen waar mogelijk. Pas de fallback-hexwaarden hieronder aan je Customizer- kleurenschema aan (Klant > Aanpassen > Kleuren in Hestia). ========================================================= */ :root { --ac-accent: var( --e-global-color-accent, #4a90d9 ); --ac-accent-bg: #eaf2fb; --ac-radius: 12px; --ac-border: #e5e5e5; --ac-surface: #ffffff; --ac-surface-muted: #f7f7f5; --ac-text-muted: #767676; } /* Algemene pagina-opzet */ .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation { background: transparent; } /* Knoppen/velden erven het lettertype NIET automatisch van (browser- standaard voor form-elementen), waardoor ze in de systeemfont (vaak Arial-achtig) tonen i.p.v. het lettertype dat in Hestia's Customizer is ingesteld. Breed toegepast op het hele "Mijn account"-gebied, ook op losse stukjes tekst van WooCommerce-core zelf (bv. hint-teksten onder formuliervelden) die anders niet meeliften met de rest van de pagina. */ .woocommerce-account, .woocommerce-account input, .woocommerce-account button, .woocommerce-account select, .woocommerce-account textarea, .woocommerce-account p, .woocommerce-account span, .woocommerce-account em, .woocommerce-account label, .woocommerce-account a, .woocommerce-account li { font-family: inherit !important; } /* Elke los knopje binnen "Mijn account" dat niet al onze eigen pil-stijl heeft (adres opslaan, account opslaan, paginering "Vorige/Volgende" bij bestellingen, enz.) valt anders terug op Hestia's algemene knopstijl (hoofdletters, forse padding, schaduw, en soms een rode/blauwe kleur afhankelijk van welke knop-variant het is) — vandaar de "rode vierkante knop". Eén brede, harde reset voor alle knoppen in dit hele gebied. */ .woocommerce-account a.button, .woocommerce-account button.button, .woocommerce-account input.button, .woocommerce-account button[type="submit"], .woocommerce-account .woocommerce-pagination a { display: inline-block !important; background: var(--ac-accent) !important; background-color: var(--ac-accent) !important; background-image: none !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 20px !important; box-shadow: none !important; text-transform: none !important; text-decoration: none !important; font-weight: 500 !important; font-size: 14px !important; line-height: 1.4 !important; } .woocommerce-account a.button:hover, .woocommerce-account button.button:hover, .woocommerce-account input.button:hover, .woocommerce-account button[type="submit"]:hover, .woocommerce-account .woocommerce-pagination a:hover { filter: brightness(0.92) !important; color: #fff !important; } /* WooCommerce-core toont standaard onder "Weergavenaam" al een hint-tekst ("Dit is hoe je naam wordt weergegeven in de accountsectie en in reviews") — nu overbodig en visueel niet passend naast onze eigen ac-privacy-note hierboven. #account_display_name_field is de stabiele, door WooCommerce zelf gegenereerde id van dat formulierveld. */ #account_display_name_field > span, #account_display_name_field em, #account_display_name_field small, #account_display_name_field .description { display: none !important; } /* ---------- Navigatie: kaart-grid met iconen ---------- */ .ac-account-nav__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 24px; } .ac-account-nav__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); text-decoration: none !important; color: inherit; font-size: 13px; font-weight: 500; transition: border-color .15s ease, transform .15s ease; } .ac-account-nav__item:hover { border-color: var(--ac-accent); transform: translateY(-2px); } .ac-account-nav__item i { font-size: 22px; color: var(--ac-accent); } .ac-account-nav__item.is-active { border-color: var(--ac-accent); background: var(--ac-accent-bg); } /* ---------- Welkomstblok bovenaan dashboard ---------- */ .ac-account-welcome { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ac-border); } .ac-account-welcome__name { margin: 0; font-size: 16px; font-weight: 600; } .ac-account-welcome__email { margin: 2px 0 0; font-size: 13px; color: var(--ac-text-muted); } /* ---------- Bestellingen als kaarten (alle schermformaten) ---------- */ /* In plaats van WooCommerce's proberen te reskinnen én los daarvan nog een aparte mobiele "shop_table_responsive"-modus te overrulen (twee verschillende gedragingen die steeds tegen onze CSS in bleven vechten), wordt de hele tabel nu structureel omgezet naar een kaart-grid — hetzelfde systeem op desktop én mobiel, alleen het aantal kolommen verandert. table/thead/tbody/tr/td worden allemaal losse blokken; elke wordt zelf een CSS-grid met de vaste, door WooCommerce zelf gegenereerde kolomklassen (woocommerce-orders-table__cell-order-*) als grid-areas. */ table.woocommerce-orders-table, table.woocommerce-orders-table tbody, table.woocommerce-orders-table tr, table.woocommerce-orders-table td, table.woocommerce-orders-table th { display: block !important; width: 100% !important; } table.woocommerce-orders-table thead { display: none !important; } table.woocommerce-orders-table { border-spacing: 0 !important; } table.woocommerce-orders-table tr { display: grid !important; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "number date date" "status status total" "actions actions wcpr"; gap: 6px 16px; align-items: center; background: var(--ac-surface) !important; border: 1px solid var(--ac-border) !important; border-radius: var(--ac-radius) !important; padding: 16px !important; margin: 0 0 14px !important; transition: border-color .15s ease; } table.woocommerce-orders-table tr:hover { border-color: var(--ac-accent) !important; } table.woocommerce-orders-table td, table.woocommerce-orders-table th { border: none !important; padding: 0 !important; text-align: left !important; color: inherit !important; background: none !important; font-family: inherit !important; } /* Kolomlabel (bv. "Datum") boven elke waarde, uit WooCommerce's eigen data-title-attribuut op elke cel — geen extra markup nodig. */ table.woocommerce-orders-table td::before, table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number::before { content: attr(data-title); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ac-text-muted); margin-bottom: 2px; } /* Het bestelnummer is een
(semantisch: rij-header), geen — vandaar zowel td als th hier meenemen. */ table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number, table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number { grid-area: number; font-weight: 600; } table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date { grid-area: date; } table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status { grid-area: status; } table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total { grid-area: total; text-align: right !important; } table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { grid-area: actions; margin-top: 8px !important; padding-top: 12px !important; border-top: 1px solid var(--ac-border) !important; } table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { content: none; } /* ---------- "Beoordeel"-kolom van woocommerce-photo-reviews ---------- */ /* Die plugin voegt een eigen kolom (wcpr_reviews) toe aan de bestellingen- tabel. Zonder eigen grid-area viel die cel buiten onze kaart-layout (los onderaan, met een kaal "REVIEWS"-label en een Hestia-roze knop). De cel krijgt nu een plek rechts naast de Acties-cel op dezelfde rij; de negatieve marge + extra padding overbruggen de kolom-gap zodat de scheidingslijn boven Acties + Beoordeel als één doorlopende lijn oogt. */ table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpr_reviews { grid-area: wcpr; margin-top: 8px !important; margin-left: -16px !important; padding-top: 12px !important; padding-left: 16px !important; border-top: 1px solid var(--ac-border) !important; text-align: right !important; } table.woocommerce-orders-table td.woocommerce-orders-table__cell-wcpr_reviews::before { content: none; } /* De "Beoordeel"-trigger is een (geen ), dus onze bestaande pil-reset voor a.button pakte 'm niet - vandaar de Hestia-roze knop. Zelfde neutrale pil als de andere actieknoppen, plus cursor:pointer omdat het (hover/tik-)gedrag van de plugin eraan hangt. */ table.woocommerce-orders-table .wcpr-rate-buttons-container span.woocommerce-button.button { display: inline-block; background: var(--ac-surface) !important; background-color: var(--ac-surface) !important; border: 1px solid var(--ac-border) !important; border-radius: 20px !important; padding: 6px 16px !important; margin: 2px 0 2px 6px; font-size: 12px !important; font-weight: 500; line-height: 1.4; text-transform: none !important; text-decoration: none !important; color: var(--ac-accent) !important; box-shadow: none !important; cursor: pointer; } table.woocommerce-orders-table .wcpr-rate-buttons-container:hover span.woocommerce-button.button { border-color: var(--ac-accent) !important; background: var(--ac-accent-bg) !important; } /* Het uitklap-paneeltje met één "Beoordeel "-link per artikel: zelfde kaartstijl als de rest (de losse links erin zijn a.button en krijgen de pil-stijl al via de bestaande brede reset hierboven). */ .wcpr-rate-buttons-container span.wcpr-rate-buttons { background: var(--ac-surface) !important; border: 1px solid var(--ac-border) !important; border-radius: var(--ac-radius) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); padding: 8px !important; } .wcpr-rate-buttons-container .wcpr-rate-button-container { gap: 4px; } @media (max-width: 480px) { table.woocommerce-orders-table tr { grid-template-columns: 1fr 1fr; grid-template-areas: "number date" "status total" "actions wcpr"; } } /* ---------- Nieuwsbrief-kaart (Simple Newsletter plugin) ---------- */ .ac-newsletter-card { display: flex; align-items: flex-start; gap: 14px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 18px; margin-bottom: 18px; } .ac-newsletter-card__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ac-accent-bg); display: flex; align-items: center; justify-content: center; } .ac-newsletter-card__icon i { font-size: 20px; color: var(--ac-accent); } .ac-newsletter-card__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; } .ac-newsletter-card__text { margin: 0; font-size: 13px; color: var(--ac-text-muted); } .ac-newsletter-card__cta { display: inline-block; margin-top: 10px; background: var(--ac-accent); color: #fff !important; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none !important; } .ac-newsletter-card__cta:hover { filter: brightness(0.92); } /* ---------- Kortingscodes-kaart (persoonlijke coupons) ---------- */ /* Zelfde kaart-taal als .ac-newsletter-card hierboven: icoon-cirkel links, inhoud rechts. Elke code is een rij met code-pil, waarde en einddatum; op smalle schermen stapelt de rij naar één kolom. */ .ac-coupon-card { display: flex; align-items: flex-start; gap: 14px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 18px; margin-bottom: 18px; } .ac-coupon-card__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ac-accent-bg); display: flex; align-items: center; justify-content: center; } .ac-coupon-card__icon i { font-size: 20px; color: var(--ac-accent); } .ac-coupon-card__body { flex: 1 1 auto; min-width: 0; } .ac-coupon-card__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; } .ac-coupon-card__list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .ac-coupon-row { background: var(--ac-surface-muted); border: 1px dashed var(--ac-border); border-radius: 8px; padding: 10px 14px; } .ac-coupon-row__main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; } /* De code-pil IS de kopieerknop: klikken kopieert de code. Het "Kopieer"- gedeelte (icoon + label) achter het gestippelde scheidingslijntje maakt expliciet zichtbaar dat dit kan. Bewust GEEN .button-class: zo blijft de knop buiten de brede "alle knoppen"-reset bovenaan dit bestand. Hoge specificiteit + !important zodat Hestia's button-styling niet alsnog wint. */ .woocommerce-account button.ac-coupon-copy { display: inline-flex; align-items: stretch; gap: 0; background: var(--ac-accent-bg) !important; background-image: none !important; border: 1px dashed var(--ac-accent) !important; border-radius: 8px !important; padding: 0 !important; margin: 0; overflow: hidden; line-height: 1.4; box-shadow: none !important; text-transform: none !important; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease; } .woocommerce-account button.ac-coupon-copy:hover { border-style: solid !important; box-shadow: 0 1px 6px rgba(0, 0, 0, .12) !important; } .ac-coupon-copy__code { display: inline-flex; align-items: center; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ac-accent); padding: 6px 12px; overflow-wrap: anywhere; } .ac-coupon-copy__hint { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-left: 1px dashed var(--ac-accent); background: var(--ac-surface); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ac-accent); transition: background-color .15s ease; } .woocommerce-account button.ac-coupon-copy:hover .ac-coupon-copy__hint { background: var(--ac-accent); color: #fff; } .ac-coupon-copy__hint i { font-size: 14px; } .ac-coupon-copy .ac-coupon-copy__icon-check { display: none; } .woocommerce-account button.ac-coupon-copy.is-copied { border-color: #2fa84f !important; border-style: solid !important; } .ac-coupon-copy.is-copied .ac-coupon-copy__hint { border-left-color: #2fa84f; background: #2fa84f; color: #fff; } .ac-coupon-copy.is-copied .ac-coupon-copy__code { color: #2fa84f; } .ac-coupon-copy.is-copied .ac-coupon-copy__icon-copy { display: none; } .ac-coupon-copy.is-copied .ac-coupon-copy__icon-check { display: inline; } .ac-coupon-row__value, .ac-coupon-row__expiry { display: flex; flex-direction: column; font-size: 13px; } .ac-coupon-row__label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ac-text-muted); } .ac-coupon-row__value strong, .ac-coupon-row__expiry strong { font-weight: 600; font-size: 13px; } .ac-coupon-row__desc { margin: 8px 0 0; font-size: 12px; color: var(--ac-text-muted); } @media (max-width: 480px) { .ac-coupon-row__main { flex-direction: column; align-items: flex-start; gap: 8px; } .woocommerce-account button.ac-coupon-copy { max-width: 100%; } .ac-coupon-copy__code { flex: 1 1 auto; min-width: 0; } } .woocommerce-orders-table__cell-order-status mark { background: var(--ac-accent-bg); color: var(--ac-accent); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 500; } /* Hestia stylet elke "a.button" binnen .woocommerce (dus ook Bekijken/ Betalen/Annuleren hier) met een hoofdlettertekst, blauwe achtergrond en schaduw — vandaar het "vierkante, felgekleurde knop"-effect. Alles expliciet resetten naar één neutrale pil-stijl, ongeacht welke actie. */ .woocommerce-orders-table__cell-order-actions .button, .woocommerce-orders-table__cell-order-actions a.button, table.woocommerce-orders-table a.button { display: inline-block; background: var(--ac-surface) !important; background-color: var(--ac-surface) !important; border: 1px solid var(--ac-border) !important; border-radius: 20px !important; padding: 6px 16px !important; margin: 2px 6px 2px 0; font-size: 12px !important; font-weight: 500; line-height: 1.4; text-transform: none !important; color: var(--ac-accent) !important; box-shadow: none !important; text-decoration: none !important; } .woocommerce-orders-table__cell-order-actions .button:hover, .woocommerce-orders-table__cell-order-actions a.button:hover, table.woocommerce-orders-table a.button:hover { border-color: var(--ac-accent) !important; background: var(--ac-accent-bg) !important; } /* ---------- Automatisch bijladen (orders-autoload.js) ---------- */ .ac-orders-autoload { height: 40px; margin: 4px 0 20px; } .ac-orders-autoload.is-loading::after { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto; border: 2px solid var(--ac-border); border-top-color: var(--ac-accent); border-radius: 50%; animation: ac-spin 0.7s linear infinite; } @keyframes ac-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ac-orders-autoload.is-loading::after { animation: none; } } table.woocommerce-orders-table tr.ac-orders-autoload__row { animation: ac-fade-in 0.25s ease; } @keyframes ac-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Downloads ---------- */ table.woocommerce-table--order-downloads td { padding: 12px 14px; } /* ---------- Adressen ---------- */ /* WooCommerce/Hestia geven de adres-wrapper (.u-columns.col2-set) en de kolommen (.u-column1.col-1 / .u-column2.col-2) een float + width:48%/ display:inline-block mee uit het oude 2-koloms layout. Dat botst met onderstaande grid en maakt de kaarten klein en scheef gecentreerd. Alles !important resetten zodat de grid daadwerkelijk de layout bepaalt. */ /* Brede selector-set: WooCommerce-versies verschillen in de exacte classes rond de adreskaarten (oudere versies: u-columns/col2-set/col-1/col-2; nieuwere: gewoon .woocommerce-Addresses.addresses met losse .woocommerce- Address kinderen). Alle varianten meenemen + zoveel mogelijk potentiële layout-boosdoeners (column-count, position, direction) preventief resetten, in plaats van te gokken welke variant hier actief is. */ .woocommerce-MyAccount-content .woocommerce-Addresses, .woocommerce-MyAccount-content .addresses, .woocommerce-Addresses, .addresses { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; column-span: all !important; position: static !important; direction: ltr !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; text-align: left !important; justify-content: stretch !important; margin: 0 0 20px !important; padding: 0 !important; } @media (max-width: 600px) { .woocommerce-MyAccount-content .woocommerce-Addresses, .woocommerce-MyAccount-content .addresses, .woocommerce-Addresses, .addresses { grid-template-columns: 1fr !important; } } .woocommerce-Addresses > *, .addresses > * { display: block !important; float: none !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; grid-column: auto !important; /* Veiligheidsnet: als door caching/specificiteit ergens tussentijds alleen deze regel laadt zonder de grid-regel hierboven, voorkomt border-box in elk geval dat de padding een eventuele oude 48%-breedte (float-layout) laat overlopen en de kaarten door elkaar laat schieten. */ box-sizing: border-box !important; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 20px; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; } .woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 14px; margin: 0; } .woocommerce-Address-title a { font-size: 12px; padding: 4px 10px; border: 1px solid var(--ac-border); border-radius: 20px; color: var(--ac-accent); text-decoration: none; } .woocommerce-Address-title a:hover { border-color: var(--ac-accent); background: var(--ac-accent-bg); } .woocommerce-Address address { font-style: normal; line-height: 1.7; margin: 0; } /* ---------- Formulieren-kaart (account bewerken, adres bewerken) ---------- */ .woocommerce-EditAccountForm, .woocommerce-address-fields { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 24px; max-width: 560px; } .woocommerce-EditAccountForm .form-row, .woocommerce-address-fields .form-row { margin-bottom: 16px; } .woocommerce-EditAccountForm label, .woocommerce-address-fields label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ac-text-muted); } .woocommerce-EditAccountForm fieldset { border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 18px; margin: 24px 0 0; } .woocommerce-EditAccountForm fieldset legend { font-size: 13px; font-weight: 600; padding: 0 6px; } .ac-info-note { display: flex; align-items: flex-start; gap: 8px; background: var(--ac-accent-bg); border-radius: 8px; padding: 10px 14px; margin: 0 0 18px; font-size: 12px; color: var(--ac-text-muted); } .ac-info-note i { color: var(--ac-accent); font-size: 15px; margin-top: 1px; } /* ---------- Meldingen (opgeslagen, fouten) ---------- */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-NoticeGroup .woocommerce-notice { background: var(--ac-surface) !important; border: 1px solid var(--ac-border) !important; border-left: 4px solid var(--ac-accent) !important; border-radius: var(--ac-radius) !important; padding: 14px 18px 14px 44px !important; } .woocommerce-error { border-left-color: #d9534f !important; } /* Succes-melding (bv. "Je afleveradres is opgeslagen.") duidelijk groen. */ .woocommerce-message { border-left-color: #1a9d54 !important; background: #edf9f1 !important; color: #14532d !important; } .woocommerce-message::before { color: #1a9d54 !important; } /* ---------- Formulieren (account bewerken, adres bewerken) ---------- */ /* Hestia's material-stijl ".woocommerce form .form-row input.input-text" (underline-inputs, border:0) is specifieker dan onderstaande selectors en wint anders altijd. Zelfde opbouw (.woocommerce + .form-row) gebruiken + !important op de bepalende eigenschappen om zeker te zijn. */ .woocommerce form .form-row input.input-text, .woocommerce-EditAccountForm input.input-text, .woocommerce-address-fields input.input-text, .woocommerce-address-fields select { border: 1px solid var(--ac-border) !important; border-radius: 8px !important; padding: 10px 12px !important; background: var(--ac-surface-muted) !important; background-image: none !important; } .woocommerce form .form-row input.input-text:focus, .woocommerce-EditAccountForm input.input-text:focus, .woocommerce-address-fields input.input-text:focus { border-color: var(--ac-accent) !important; outline: none; background: var(--ac-surface) !important; } .woocommerce-Button, button.woocommerce-Button { background: var(--ac-accent); border: none; border-radius: 8px; padding: 10px 18px; font-weight: 500; } .woocommerce-Button:hover { filter: brightness(0.92); } /* Avatar cirkel (fallback styling, gebruikt door ac_get_account_avatar_html) */ .ac-account-avatar { flex-shrink: 0; } /* ---------- Bestelling bekijken (klik op "Bekijken" bij een bestelling) ---------- */ /* Opgezocht in de daadwerkelijke WooCommerce-broncode (10.x) i.p.v. gegokt. De kale intro-zin ("Order #X was placed on Y...") vervangen we nu via de PHP-filter woocommerce_order_details_status door onze eigen 3 kaartjes (zie ac_render_order_overview_card() in account-customizations.php) — die geven we hier de kaart-stijl. order/order-details.php + order-details-customer.php gebruiken .woocommerce-table--order-details, .woocommerce-order-details__title en .woocommerce-column__title. */ .ac-order-overview { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; } .ac-order-overview__item { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 12px 16px; } .ac-order-overview__item i { font-size: 20px; color: var(--ac-accent); flex-shrink: 0; } .ac-order-overview__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ac-text-muted); } .ac-order-overview__item strong { display: block; font-size: 14px; font-weight: 600; } table.woocommerce-table--order-details { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); overflow: hidden; margin: 0 0 28px !important; } table.woocommerce-table--order-details th, table.woocommerce-table--order-details td { padding: 12px 16px !important; border: none !important; border-bottom: 1px solid var(--ac-border) !important; text-align: left !important; font-family: inherit !important; } table.woocommerce-table--order-details thead th { background: var(--ac-surface-muted) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ac-text-muted); } table.woocommerce-table--order-details tbody tr:hover { background: var(--ac-surface-muted); } /* Productfoto per artikel (via ac_add_product_thumbnail_to_order_item_name()). */ table.woocommerce-table--order-details td.woocommerce-table__product-name { display: flex !important; align-items: center; } .ac-order-item { display: flex; align-items: center; gap: 12px; min-width: 0; } .ac-order-item-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .ac-order-item-name { min-width: 0; overflow-wrap: anywhere; } table.woocommerce-table--order-details tbody tr:last-child td { border-bottom: none !important; } .product-quantity { display: inline-block; margin-left: 6px; padding: 1px 8px; background: var(--ac-accent-bg); color: var(--ac-accent); border-radius: 10px; font-size: 11px; font-weight: 600; } table.woocommerce-table--order-details tfoot th, table.woocommerce-table--order-details tfoot td { text-align: right !important; border-bottom: 1px solid var(--ac-border) !important; } table.woocommerce-table--order-details tfoot tr:last-child th, table.woocommerce-table--order-details tfoot tr:last-child td { border-bottom: none !important; font-weight: 700; font-size: 15px; } /* Zelfde Hestia-conflict als bij .ac-tracking-section__title hierboven: .woocommerce-MyAccount-content h2 stylet elke h2 gecentreerd/groot, specifieker dan een kale class-selector. */ .woocommerce-order-details__title, .woocommerce-column__title { font-size: 15px !important; font-weight: 600 !important; text-align: left !important; margin: 0 0 12px !important; } /* Op verzoek: "Bestelgegevens" (in tegenstelling tot de andere titels hierboven) wel gecentreerd. */ .woocommerce-order-details__title { text-align: center !important; } /* Actieknoppen (Betalen/Opnieuw bestellen/...) in de "Acties"-rij onderaan de artikelentabel gebruiken hier .order-actions-button i.p.v. de classes van de bestellingen-lijst — zelfde neutrale pil-stijl, hoge specificiteit + !important zodat dit wint van onze eigen brede "alle knoppen" reset. */ .woocommerce-account a.order-actions-button { display: inline-block !important; background: var(--ac-surface) !important; border: 1px solid var(--ac-border) !important; border-radius: 20px !important; padding: 6px 16px !important; margin: 2px 6px 2px 0 !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; color: var(--ac-accent) !important; box-shadow: none !important; } .woocommerce-account a.order-actions-button:hover { border-color: var(--ac-accent) !important; background: var(--ac-accent-bg) !important; } .order-actions--heading { vertical-align: top; padding-top: 12px !important; } /* De artikelen-tabel heeft (anders dan de bestellingen-lijst) geen ingebouwde WooCommerce-responsive-modus — zonder ingrijpen loopt hij op smalle schermen gewoon over. Op mobiel omzetten naar 1 regel per artikel met naam links, prijs rechts (een simpele, versie-onafhankelijke opzet die niet afhankelijk is van exacte kolomklassen). */ @media (max-width: 600px) { .ac-order-overview { gap: 8px; } .ac-order-overview__item { flex: 1 1 100%; padding: 10px 14px; } table.woocommerce-table--order-details, table.woocommerce-table--order-details thead, table.woocommerce-table--order-details tbody, table.woocommerce-table--order-details tfoot, table.woocommerce-table--order-details tr, table.woocommerce-table--order-details th, table.woocommerce-table--order-details td { display: block !important; width: 100% !important; } table.woocommerce-table--order-details thead { display: none !important; } table.woocommerce-table--order-details tbody tr { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 12px !important; padding: 12px 16px !important; } table.woocommerce-table--order-details tbody td { padding: 0 !important; border: none !important; width: auto !important; } table.woocommerce-table--order-details tbody td:first-child { flex: 1 1 auto; } table.woocommerce-table--order-details tbody td:last-child { flex: 0 0 auto; text-align: right !important; font-weight: 600; white-space: nowrap; } table.woocommerce-table--order-details tfoot tr { display: flex !important; justify-content: space-between !important; padding: 10px 16px !important; } table.woocommerce-table--order-details tfoot th, table.woocommerce-table--order-details tfoot td { padding: 0 !important; border: none !important; width: auto !important; } /* De "Acties"-rij (met Betalen/Opnieuw bestellen-knoppen) krijgt de knoppen anders half afgeknepen naast het label — op mobiel het label boven de knoppen zetten i.p.v. ernaast. */ table.woocommerce-table--order-details tfoot tr:has(.order-actions--heading) { flex-direction: column !important; align-items: flex-start !important; gap: 6px; } table.woocommerce-table--order-details tfoot tr:last-child { border-top: 1px solid var(--ac-border) !important; margin-top: 4px; padding-top: 14px !important; } } /* Echte structuur (opgezocht in WooCommerce's order-details-customer.php): .woocommerce-customer-details bevat een GENESTE wrapper
met daarin pas .woocommerce-column--billing-address (.col-1) en .woocommerce-column--shipping-address (.col-2). Alleen de buitenste sectie resetten (zoals we eerder deden) laat de oude WooCommerce/Hestia col2-set-opmaak (float:left/right; width:48%) op die geneste .col-1/ .col-2 intact — vandaar dat het verzendadres rechts bleef "zweven" nadat het factuuradres verborgen werd. Nu alle lagen resetten. */ .woocommerce-customer-details, .woocommerce-customer-details .woocommerce-columns--addresses { display: block !important; width: 100% !important; max-width: 100% !important; margin: 8px 0 0 !important; padding: 0 !important; } .woocommerce-customer-details .woocommerce-column--billing-address, .woocommerce-customer-details .woocommerce-column--shipping-address { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .woocommerce-customer-details address, .woocommerce-column--billing-address address, .woocommerce-column--shipping-address address { display: block; width: 100%; box-sizing: border-box; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 18px; font-style: normal; line-height: 1.7; margin: 0; } /* Op verzoek: bij "Bestelling bekijken" alleen het verzendadres tonen, niet het factuuradres. */ .woocommerce-customer-details .woocommerce-column--billing-address { display: none !important; } /* Adresblok onderaan "Bestelling bekijken": WooCommerce rendert hier twee varianten - (a) twee kolommen factuur+verzend (wanneer de bestelling een verzendadres nodig heeft; het factuuradres verbergen we hierboven al) of (b) alleen een kale "Billing address"-titel + adres, zonder kolom- wrappers. Die kale titel viel volledig uit de toon van de rest van de pagina. Alle interne titels verbergen en er op SECTIE-niveau één eigen "Afleveradres"-kop met kaartpin-icoon voor terugzetten - zelfde stijl als de andere sectietitels, en dezelfde kop voor beide varianten. Het pin- icoon is puur CSS (::after), omdat we hier geen -element kunnen toevoegen. */ .woocommerce-customer-details { position: relative !important; } .woocommerce-customer-details .woocommerce-column__title, .woocommerce-customer-details > .woocommerce-column__title { display: none !important; } .woocommerce-customer-details::before { content: "Afleveradres"; display: block; font-size: 13px; font-weight: 600; color: var(--ac-accent); margin: 0 0 10px; padding-left: 20px; } .woocommerce-customer-details::after { content: ""; position: absolute; top: 2px; left: 0; width: 14px; height: 14px; border: 2px solid var(--ac-accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); } /* De echte "Shipping address"-titel (WooCommerce's

) is leeggemaakt via ac_blank_woocommerce_strings() maar blijft als leeg element in de DOM staan — zonder dit collapsen laat dat een kaal gat vallen boven onze eigen ::before-label. */ .woocommerce-column__title:empty { display: none; } /* Contactgegevens (e-mail/telefoon) die we onder het afleveradres terugzetten nadat het factuuradres-blok verborgen is. Ze horen visueel BINNEN dezelfde kaart als het adres: als de adres-kaart gevolgd wordt door onze contactregel, maken we de onderkant van het adres plat en plakken we de contactregel eraan vast als onderste deel van diezelfde kaart. (De verborgen native e-mail/telefoon-

's ertussen staan op display:none en nemen dus geen ruimte in.) */ /* E-mail/telefoon staan nu BINNEN de adres-kaart (via de per-adres-hook woocommerce_order_details_after_customer_address), dus gewoon als tekstregel onderin het adres opmaken — geen eigen kader. */ .woocommerce-customer-details .ac-order-contact { margin: 12px 0 0 !important; padding: 0 !important; font-size: 14px; line-height: 1.8; color: #333; } .ac-order-contact__label { font-weight: 600; color: var(--ac-text-muted); margin-right: 4px; } /* De losse "Email:"-regel in het order-overzicht op de bedankt-pagina verbergen: het e-mailadres staat al in de afleveradres-kaart, en een lang adres brak die overzichtsrij lelijk op. */ .woocommerce-order-overview__email { display: none !important; } /* Bestelupdates / trackinginformatie onderaan */ .woocommerce-OrderUpdates { list-style: none !important; margin: 24px 0 0 !important; padding: 0 !important; } .woocommerce-OrderUpdate { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 14px 16px; margin-bottom: 10px; } .woocommerce-OrderUpdate-meta { margin: 0 0 4px; font-size: 11px; color: var(--ac-text-muted); } .woocommerce-OrderUpdate-description p { margin: 0; } /* ---------- Trackingblok (woo-advanced-shipment-tracking, eigen template-override) ---------- */ .ac-tracking-section { margin: 0 0 28px; } /* Hestia stylet elke

binnen de accountcontent gecentreerd en groot (.woocommerce-MyAccount-content h2), specifieker dan een kale class- selector — vandaar !important om dat te overrulen op onze eigen titels. */ .ac-tracking-section__title, h2.ac-tracking-section__title { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px; font-size: 15px !important; font-weight: 600 !important; text-align: left !important; margin: 0 0 12px !important; } .ac-tracking-section__title i { color: var(--ac-accent); font-size: 18px; flex-shrink: 0; } .ac-tracking-section__intro { font-size: 13px; color: var(--ac-text-muted); margin: -4px 0 14px; } .ac-tracking-empty { background: var(--ac-surface); border: 1px dashed var(--ac-border); border-radius: var(--ac-radius); padding: 16px; font-size: 13px; color: var(--ac-text-muted); margin: 0; } /* Kaart in 2 stukken: __top (icoon + info, altijd naast elkaar) en de CTA- knop eronder over de volle breedte — dat blijft op elk schermformaat overzichtelijk, i.p.v. alles in 1 flex-rij te proppen die op mobiel moest gaan wrappen (en dan lelijk/groot oogde). */ .ac-tracking-card { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 16px; margin-bottom: 12px; } .ac-tracking-card__top { display: flex; align-items: center; gap: 12px; } /* Vaste iconen-cirkel i.p.v. het logo van de vervoerder: niet elke vervoerder (bv. DHL) heeft een logo-afbeelding ingesteld in de tracking- plugin, wat een leeg/kapot vakje opleverde. Dit is altijd consistent. */ .ac-tracking-card__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--ac-accent-bg); display: flex; align-items: center; justify-content: center; } .ac-tracking-card__icon i { font-size: 18px; color: var(--ac-accent); } .ac-tracking-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .ac-tracking-card__provider { font-size: 14px; font-weight: 600; } .ac-tracking-card__number { font-size: 13px; color: var(--ac-text-muted); overflow-wrap: anywhere; } .ac-tracking-card__status { font-size: 12px; color: var(--ac-text-muted); margin-top: 4px; } .ac-tracking-card__status strong { color: inherit; } .ac-tracking-card__carrier-note { display: block; font-size: 12px; color: var(--ac-accent); margin-top: 4px; } .ac-tracking-card__cta { display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--ac-accent); color: #fff !important; border-radius: 8px; padding: 10px 18px; margin-top: 14px; font-size: 13px; font-weight: 500; text-decoration: none !important; } .ac-tracking-card__cta:hover { filter: brightness(0.92); } /* Vanaf hier past de knop prima naast de info i.p.v. eronder. */ @media (min-width: 480px) { .ac-tracking-card { display: flex; align-items: center; gap: 14px; } .ac-tracking-card__top { flex: 1 1 auto; min-width: 0; } .ac-tracking-card__cta { width: auto; flex-shrink: 0; margin-top: 0; white-space: nowrap; } } /* ---------- Betaalinformatie (BTCPay Server) ---------- */ /* Kale
met een

en een

waarbij de ruwe URL zelf de linktekst is (geen classes, geen knop) — vandaar het kale/"e-mail-achtige" uiterlijk. Zelfde kaartstijl als de rest + de link als knop, met ellipsis zodat de lange URL niet de layout breekt (de echte URL blijft gewoon de linktekst/href, alleen visueel afgekapt). */ .woocommerce-order-payment-status { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 18px; margin: 0 0 24px; } .woocommerce-order-payment-status-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; } .woocommerce-order-payment-status p { margin: 0 0 10px; font-size: 13px; color: var(--ac-text-muted); } .woocommerce-order-payment-status p:last-child { margin-bottom: 0; } .woocommerce-order-payment-status a { display: block; max-width: 100%; background: var(--ac-accent) !important; color: #fff !important; border-radius: 8px; padding: 10px 16px; margin-top: 4px; font-size: 13px; font-weight: 500; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .woocommerce-order-payment-status a:hover { filter: brightness(0.92); } /* Rijkere crypto-betaalstatus-kaart (via woocommerce-email-control's ec_get_btcpay_payment_status(), zie ac_render_btcpay_payment_status() in account-customizations.php) — vervangt de kale BTCPay-link hierboven wanneer die plugin actief is. */ .ac-crypto-status { background: var(--ac-surface); border: 1px solid var(--ac-border); border-left: 4px solid var(--ac-border); border-radius: var(--ac-radius); padding: 18px; margin: 0 0 24px; } .ac-crypto-status--confirmed { border-left-color: #2fa84f; } .ac-crypto-status--pending { border-left-color: #e8a33d; } .ac-crypto-status__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin: 0 0 8px; } .ac-crypto-status__title i { font-size: 18px; flex-shrink: 0; } .ac-crypto-status--confirmed .ac-crypto-status__title i { color: #2fa84f; } .ac-crypto-status--pending .ac-crypto-status__title i { color: #e8a33d; } .ac-crypto-status__text { font-size: 13px; color: var(--ac-text-muted); line-height: 1.6; } .ac-crypto-status__text p { margin: 0 0 8px; } .ac-crypto-status__text p:last-child { margin-bottom: 0; } .ac-crypto-status__rows { margin-top: 12px; border-top: 1px solid var(--ac-border); padding-top: 12px; } .ac-crypto-status__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 13px; } .ac-crypto-status__label { flex-shrink: 0; color: var(--ac-text-muted); } .ac-crypto-status__value { text-align: right; font-weight: 500; } .ac-crypto-status__value--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; word-break: break-all; font-size: 12px; font-weight: 400; } .ac-crypto-status__value a { color: var(--ac-accent); } .ac-crypto-status__cta { display: inline-block; margin-top: 14px; background: var(--ac-accent); color: #fff !important; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; text-decoration: none !important; } .ac-crypto-status__cta:hover { filter: brightness(0.92); } @media (max-width: 480px) { .ac-crypto-status__row { flex-direction: column; align-items: flex-start; gap: 2px; } .ac-crypto-status__value { text-align: left; } } /* ===================================================================== "Bedankt" / Bestelling ontvangen (order-received) + Bestelling bekijken Dezelfde kaart-opmaak als de rest van de account-pagina's. ===================================================================== */ .woocommerce-order { max-width: 860px; } /* De "Bedankt!"-melding als groene hero-kaart. */ p.woocommerce-thankyou-order-received, .woocommerce-order > .woocommerce-notice--success { display: block; background: #edf9f1 !important; border: 1px solid #bde9cd !important; border-left: 4px solid #1a9d54 !important; border-radius: var(--ac-radius) !important; padding: 18px 22px !important; font-size: 18px; font-weight: 600; color: #14532d; margin: 0 0 24px !important; } /* Order-overzicht (bestelnr / datum / totaal / betaalmethode) als kaart-rij. */ ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 28px !important; padding: 4px 2px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); } ul.woocommerce-order-overview li { flex: 1 1 0; min-width: 140px; margin: 0 !important; padding: 12px 20px !important; border: 0 !important; border-right: 1px solid var(--ac-border) !important; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--ac-text-muted); } ul.woocommerce-order-overview li:last-child { border-right: 0 !important; } ul.woocommerce-order-overview li strong { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; color: #222; text-transform: none; letter-spacing: 0; } /* Sectietitel "Order details" in de accentkleur, links uitgelijnd. */ .woocommerce-order .woocommerce-order-details__title { font-size: 15px !important; font-weight: 600 !important; color: var(--ac-accent) !important; text-align: left !important; margin: 6px 0 12px !important; } /* De order-detailtabel in een kaart. */ .woocommerce-order-details { background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 8px 22px 18px; margin-bottom: 26px; } .woocommerce-order-details table.woocommerce-table--order-details { margin: 0; border: 0; } .woocommerce-table--order-details th, .woocommerce-table--order-details td { border: 0 !important; border-bottom: 1px solid var(--ac-border) !important; padding: 12px 2px !important; background: transparent !important; } .woocommerce-table--order-details tfoot tr:last-child th, .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0 !important; font-weight: 700; color: #222; } @media (max-width: 560px) { ul.woocommerce-order-overview li { flex-basis: 50%; border-bottom: 1px solid var(--ac-border) !important; } } /* Voorkom dubbele contactregels. WooCommerce toont in de "kale" variant zelf al een e-mail/telefoon onder het adres; wij tonen onze eigen, consistent gestylede regel (ac_order_view_customer_contact) én verbergen daarom WooCommerce's versie, zodat het niet dubbel verschijnt op de bedankt-/bestelling-bekijken-pagina. */ .woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-customer-details .woocommerce-customer-details--email { display: none !important; }