/**
* Kind Recards — Account & Auth patterns
* ----------------------------------------------------------------------------
* Page-level compositions for the login / register / address screens. Built
* entirely from the tokens + components layers; this file only arranges them.
*
* .kr-auth two-column layout (form | mascot illustration)
* .kr-auth--solo one-column variant (the login screen has no mascot)
* .kr-auth__choice stacked soft + navy buttons with a skip link
* .kr-account-form constrained account form column
* .kr-account-form__lost "wachtwoord vergeten" link under the password field
* .kr-account-notices WooCommerce notices, restyled on brand
* .kr-address-toolbar sort control row
* .kr-address-grid is provided by components.css
*
* Logged-in area (the "Mijn account" frame):
*
* .kr-account two-column frame (scalloped sidebar | endpoint content)
* .kr-account--solo one-column variant (the lost/reset-password step)
* .kr-account-nav the sidebar itself, on the .kr-scallop-card component
* .kr-account-dash the "Overzicht" landing view
* .kr-account-tiles quick-link cards into the other sections
* .kr-account-order most-recent-order panel / empty state
* .kr-account-endpoint wrapper for a themed endpoint view
* .kr-account-favorites the "Favorieten" wishlist view (shop tiles + grid)
* .kr-account-addresses the "Adressen" bezorgadresboek view
* .kr-account-kalender the "Mijn kalender" view (both sub-views)
* .kr-moment / .kr-moment-sheet one moment, as a tear-off calendar sheet
* .kr-account-wc-addresses the factuur-/afzenderadres links on "Gegevens"
*/
/* ---- Two-column auth layout (form left, illustration right) ------------ */
.kr-auth {
display: grid;
gap: var(--kr-space-7);
align-items: center;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding-block: var(--kr-section-gap);
}
@media (max-width: 860px) {
.kr-auth {
grid-template-columns: 1fr;
}
.kr-auth__aside {
order: -1; /* illustration above the form on small screens */
max-width: 360px;
margin-inline: auto;
}
}
/* Solo variant — the login screen is form-only (no mascot beside it). */
.kr-auth--solo {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.kr-auth__main {
max-width: 460px;
}
.kr-auth__title {
margin-bottom: var(--kr-space-5);
}
.kr-auth__aside {
display: flex;
justify-content: center;
}
.kr-auth__aside img {
width: 100%;
max-width: 420px;
height: auto;
}
/* ---- Login-or-register choice (two stacked buttons + skip link) -------- */
.kr-auth__choice {
display: flex;
flex-direction: column;
gap: var(--kr-space-4);
max-width: 360px;
}
.kr-auth__choice .kr-btn {
width: 100%;
}
.kr-auth__skip {
margin-top: var(--kr-space-2);
}
/* ---- Account form (register / login credentials) ----------------------- */
.kr-account-form {
max-width: 460px;
}
.kr-account-form .kr-field:last-of-type {
margin-bottom: var(--kr-space-5);
}
.kr-account-form__checks {
margin: var(--kr-space-4) 0 var(--kr-space-5);
}
.kr-account-form__actions {
display: flex;
flex-wrap: wrap;
gap: var(--kr-space-4);
align-items: center;
}
.kr-account-form__footer {
margin-top: var(--kr-space-5);
font-style: italic;
line-height: var(--kr-leading-snug);
}
/* "Oeps wachtwoord vergeten" — sits directly under the password input, so it
opts out of the .kr-field column stretch and hugs the left edge. */
.kr-account-form__lost {
align-self: flex-start;
margin-top: var(--kr-space-2);
font-size: var(--kr-text-sm);
}
/* ---- WooCommerce chrome inside the auth screens ------------------------ */
/* Notices (login failed, registration errors…). WooCommerce prints these via
woocommerce_before_customer_login_form.
This treatment used to live here as auth-only CSS. It has been promoted to
the shared notice component in components.css, which styles both
`.kr-notices` (cart, and any future surface) and `.kr-account-notices` —
one component, two wrappers. The markup here is unchanged; only the auth
column's own width tweak remains below. See the "Notices" block in
components.css for the colours, the leading glyph, and the notes on undoing
WooCommerce's default green chrome.
The only auth-specific override left: the login/register column is ~460px
wide, so its notices step down one size from the component default. */
.kr-account-notices .woocommerce-error,
.kr-account-notices .woocommerce-message,
.kr-account-notices .woocommerce-info,
.kr-account-notices .woocommerce-notice {
font-size: var(--kr-text-sm);
}
/* WooCommerce's show/hide password eye is injected next to the input by its
frontend script. Keep it inside the rounded field instead of floating over
the page, and give it a real focus ring. */
.kr-account-form .password-input {
position: relative;
display: block;
}
.kr-account-form .show-password-input {
position: absolute;
top: 50%;
right: var(--kr-space-3);
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0;
background: none;
color: var(--kr-primary);
cursor: pointer;
}
.kr-account-form .show-password-input::after {
content: "\1F441";
font-size: var(--kr-text-base);
line-height: 1;
}
.kr-account-form .show-password-input:focus-visible {
outline: 3px solid var(--kr-primary);
outline-offset: 2px;
border-radius: var(--kr-radius-xs);
}
/* WooCommerce's registration privacy-policy paragraph (hooked to
woocommerce_register_form at priority 20). Kept — it is a legal notice — but
dressed down to hint size so it does not compete with the consent boxes. */
.kr-account-form .woocommerce-privacy-policy-text {
margin: var(--kr-space-4) 0 0;
}
.kr-account-form .woocommerce-privacy-policy-text p {
margin: 0;
font-size: var(--kr-text-sm);
font-style: italic;
line-height: var(--kr-leading-snug);
color: var(--kr-text);
}
.kr-account-form .woocommerce-privacy-policy-text a {
color: var(--kr-primary);
text-decoration: underline;
}
/* Password strength meter (WooCommerce appends it after the field). */
.kr-account-form .woocommerce-password-strength,
.kr-account-form .woocommerce-password-hint {
display: block;
margin-top: var(--kr-space-1);
font-size: var(--kr-text-sm);
font-style: italic;
color: var(--kr-text);
}
.kr-account-form .woocommerce-password-strength.bad,
.kr-account-form .woocommerce-password-strength.short {
color: var(--kr-text);
font-style: normal;
}
.kr-account-form .woocommerce-password-strength.good,
.kr-account-form .woocommerce-password-strength.strong {
color: var(--kr-primary);
font-style: normal;
}
/* ---- Address book ------------------------------------------------------ */
.kr-address-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: var(--kr-space-5);
}
@media (max-width: 520px) {
.kr-address-toolbar {
justify-content: flex-start;
}
}
/* ========================================================================
* LOGGED-IN ACCOUNT AREA
*
* The frame prints WooCommerce's own My Account body, so the two grid columns
* are WooCommerce's own elements:
*
* nav.woocommerce-MyAccount-navigation → woocommerce/myaccount/navigation.php
* div.woocommerce-MyAccount-content → the endpoint's template
*
* They are PLACED explicitly rather than relying on source order, so a plugin
* that injects a third element via `woocommerce_before_account_navigation`
* cannot shove the sidebar out of column one.
* ======================================================================== */
.kr-account {
display: grid;
/* 18rem, not 17: the scalloped card now carries a run of bumps on its left
and right edges too, so its content sits one bump-radius further in on
each side. */
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
gap: var(--kr-space-7);
align-items: start;
padding-block: var(--kr-section-gap);
}
.kr-account > .woocommerce-MyAccount-navigation {
grid-column: 1;
}
.kr-account > .woocommerce-MyAccount-content {
grid-column: 2;
min-width: 0; /* let long tables scroll instead of stretching the grid */
}
/* Lost / reset password: WooCommerce renders it without a navigation. */
.kr-account--solo {
grid-template-columns: minmax(0, 1fr);
}
.kr-account--solo > * {
grid-column: 1;
}
/* Undo woocommerce-layout.css's 30% / 68% float pair, which is scoped to
`body.woocommerce-account` and therefore applies even without a .woocommerce
wrapper. The extra `.woocommerce-account` here only exists to outrank it. */
.woocommerce-account .kr-account > .woocommerce-MyAccount-navigation,
.woocommerce-account .kr-account > .woocommerce-MyAccount-content {
float: none;
width: auto;
}
@media (max-width: 900px) {
.kr-account {
grid-template-columns: minmax(0, 1fr);
gap: var(--kr-space-6);
}
.kr-account > .woocommerce-MyAccount-navigation,
.kr-account > .woocommerce-MyAccount-content {
grid-column: 1;
}
}
/* ---- The scalloped sidebar --------------------------------------------- */
.kr-account-nav {
/* The bumps already add a radius of inset on every side, so the padding on
top of them is one step smaller than a plain panel would use. */
--kr-scallop-padding: var(--kr-space-5);
position: sticky;
top: var(--kr-space-5);
}
/* "Mijn account". A , not a heading — it is the nav's accessible name and
the content column owns the page's
. Styled as the display title. */
.kr-account-nav__title {
margin: 0 0 var(--kr-space-5);
font-family: var(--kr-font-heading);
font-size: var(--kr-text-xl);
line-height: var(--kr-leading-tight);
color: var(--kr-heading);
}
.kr-account-nav__list {
display: flex;
flex-direction: column;
gap: var(--kr-space-4);
margin: 0;
padding: 0;
list-style: none;
}
.kr-account-nav__item {
margin: 0;
}
/* Navy on the pink tint = 12.4:1. The rule under the word is the active/hover
marker; its pseudo-element is exactly as wide as the inline-block label. */
.kr-account-nav__link {
position: relative;
display: inline-block;
font-family: var(--kr-font-body);
font-size: var(--kr-text-md);
line-height: var(--kr-leading-snug);
color: var(--kr-text);
padding-bottom: var(--kr-space-2);
transition: font-weight var(--kr-transition-fast);
}
.kr-account-nav__link::after {
position: absolute;
inset-inline: 0;
bottom: 0;
content: "";
block-size: var(--kr-space-1);
border-radius: var(--kr-radius-pill);
background: transparent;
transition: background var(--kr-transition-fast);
}
/* The global link hover turns text pink; pink on this tint is 2.6:1 and fails
at every size, so the sidebar keeps navy text and shows the pink rule
instead. Colour is never the only cue: the active item is also bold and
carries aria-current="page". */
.kr-account-nav__link:hover,
.kr-account-nav__link:focus {
color: var(--kr-text);
font-weight: var(--kr-weight-bold);
}
.kr-account-nav__link:hover::after,
.kr-account-nav__link:focus-visible::after {
background: var(--kr-accent);
}
.kr-account-nav__item.is-active > .kr-account-nav__link {
font-weight: var(--kr-weight-bold);
color: var(--kr-text);
}
.kr-account-nav__item.is-active > .kr-account-nav__link::after {
background: var(--kr-accent);
}
/* Visible keyboard focus. Navy clears 3:1 on the pink tint; the default pink
focus ring does not — same reasoning as the form fields in components.css. */
.kr-account-nav__link:focus-visible {
outline: 3px solid var(--kr-primary);
outline-offset: 3px;
border-radius: var(--kr-radius-xs);
}
@media (max-width: 900px) {
.kr-account-nav {
position: static;
/* The shared scallop needs room for its bumps. On a wrapped mobile nav,
the desktop-sized content inset added unnecessary blank height. */
--kr-scallop-padding: var(--kr-space-3);
}
.kr-account-nav__title {
margin-bottom: var(--kr-space-3);
}
.kr-account-nav__list {
flex-direction: row;
flex-wrap: wrap;
column-gap: var(--kr-space-5);
row-gap: var(--kr-space-2);
}
}
/* ---- Overzicht (the dashboard) ----------------------------------------- */
.kr-account-dash > * + * {
margin-top: var(--kr-space-6);
}
.kr-account-dash__title {
margin-bottom: var(--kr-space-3);
}
.kr-account-dash__lead {
max-width: 56ch;
margin: 0;
}
.kr-account-dash__heading {
margin-bottom: var(--kr-space-4);
}
/* ---- Most-recent-order panel ------------------------------------------- */
.kr-account-order__title {
margin-bottom: var(--kr-space-4);
}
.kr-account-order .kr-order-facts {
margin-bottom: var(--kr-space-5);
}
.kr-account-order p:last-child {
margin-bottom: 0;
}
/* ---- Quick-link tiles --------------------------------------------------- */
.kr-account-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
gap: var(--kr-space-4);
margin: 0;
padding: 0;
list-style: none;
}
.kr-account-tiles__item {
display: flex;
}
/* The .kr-panel shell (transparent, navy hairline) turned into a link. Navy on
cream is 13.8:1; the muted line is 5.0:1. */
.kr-account-tile {
display: flex;
flex-direction: column;
gap: var(--kr-space-1);
width: 100%;
padding: var(--kr-space-5);
color: var(--kr-text);
transition:
transform var(--kr-transition-fast),
background var(--kr-transition-fast);
}
.kr-account-tile:hover,
.kr-account-tile:focus-visible {
color: var(--kr-text);
background: var(--kr-section-pink);
transform: translateY(-2px);
}
.kr-account-tile__title {
font-family: var(--kr-font-heading);
font-size: var(--kr-text-lg);
line-height: var(--kr-leading-tight);
color: var(--kr-heading);
}
.kr-account-tile__meta {
font-size: var(--kr-text-sm);
font-weight: var(--kr-weight-semibold);
color: var(--kr-text);
}
.kr-account-tile__text {
font-size: var(--kr-text-sm);
font-style: italic;
line-height: var(--kr-leading-snug);
color: var(--kr-text);
}
/* ---- A themed endpoint view -------------------------------------------- */
.kr-account-endpoint > * + * {
margin-top: var(--kr-space-6);
}
/* ========================================================================
* "Favorieten" — the customer's own wishlist (/mijn-account/favorieten/)
*
* Composition only. The cards are the shop's `.kr-product-tile` inside the
* shop's `.kr-product-grid` (components.css), unchanged — that IS the design,
* and it is what makes the heart on each card work here too. What lives in this
* file is the page around them: the header's rhythm, room for the hearts that
* overhang the grid's edge, and the "you just un-hearted this" state.
* ======================================================================== */
.kr-account-favorites__header > h1 {
margin-bottom: var(--kr-space-2);
}
.kr-account-favorites__lead {
max-width: 52ch;
margin: 0;
}
/* The heart straddles each tile's bottom-right corner (-0.9rem), so the right
column needs that much clearance or it would sit on the column edge. */
.kr-account-favorites__grid {
padding-inline-end: 0.9rem;
}
/* Un-hearted without leaving the page. The card is marked, not removed: a
mis-click stays one click away from being undone (the heart is still live and
still on top), and the card is gone on the next load. The heart itself remains
the clear way back without muting the account copy. */
.kr-account-favorites .kr-product-tile.is-unfavourited > *:not(.kr-wishlist-heart) {
/* Keep copy navy after a heart is toggled; dimming/grayscale made every
label grey and contradicted the account area's text treatment. */
opacity: 1;
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.kr-account-favorites .kr-product-tile.is-unfavourited > *:not(.kr-wishlist-heart) {
transition: none;
}
}
/* Empty state — an invitation, not an apology (same shape as the address book's). */
.kr-account-favorites__empty {
padding: var(--kr-space-5) var(--kr-space-6);
}
.kr-account-favorites__empty > h2 {
margin-bottom: var(--kr-space-3);
}
.kr-account-favorites__empty p:last-child {
margin-bottom: 0;
}
/* ========================================================================
* "Adressen" — the bezorgadresboek (/mijn-account/edit-address/)
*
* Composition only. The rows are the modal's `.kr-address-option` component in
* its `--static` variant, the form is `.kr-panel` + `.kr-field`, the delete
* confirm is `.kr-inline-confirm` — all from components.css. What lives here is the
* page around them: the title-plus-action header, the form panel's rhythm and
* the empty state.
* ======================================================================== */
.kr-account-addresses__header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--kr-space-4);
}
.kr-account-addresses__intro {
min-width: 0;
}
.kr-account-addresses__intro > h1 {
margin-bottom: var(--kr-space-2);
}
.kr-account-addresses__lead {
max-width: 52ch;
margin: 0;
}
/* The header's action sits on the heading's baseline row, not below the lead. */
.kr-account-addresses__new {
flex: none;
margin-top: var(--kr-space-1);
}
/* Status line under the header and inside the form panel. Same role as
`.kr-modal__feedback`, but left-aligned: this is a page, not a centred
dialog. Muted grey on cream is 5.0:1; the error state is navy-weight pink
text at 4.8:1 on cream, the pair the design system already uses for
`.kr-modal__feedback.is-error`. */
.kr-account-addresses__feedback {
margin: 0;
font-size: var(--kr-text-sm);
font-style: italic;
color: var(--kr-text);
}
.kr-account-addresses__feedback:empty {
display: none;
}
.kr-account-addresses__feedback.is-error {
font-style: normal;
color: var(--kr-text);
}
/* The add/edit panel — revealed in place, never a dialog, and the full width of
the content column (same width as the address rows it sits above). */
.kr-account-addresses__form {
padding: var(--kr-space-5) var(--kr-space-6);
}
.kr-account-addresses__form[hidden] {
display: none;
}
.kr-account-addresses__form-title {
margin-bottom: var(--kr-space-4);
}
/* The fields, laid out across that width instead of in one narrow stack.
*
* Naam Naam Bedrijf Bedrijf
* Straat Straat Postcode Plaats
* Land
*
* Four equal columns on a wide account column, two when it gets tighter, one on
* a phone. `--wide` is the two-column span; everything else takes one. The
* `.kr-field` component itself is unchanged — it just becomes a grid item. */
.kr-account-addresses__fields {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: var(--kr-space-5);
row-gap: var(--kr-space-4);
}
.kr-account-addresses__field--wide {
grid-column: span 2;
}
.kr-account-addresses__fields .kr-field {
margin: 0;
}
@media (max-width: 1100px) {
.kr-account-addresses__fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.kr-account-addresses__fields {
grid-template-columns: minmax(0, 1fr);
}
.kr-account-addresses__field--wide {
grid-column: span 1;
}
}
.kr-account-addresses__form .kr-btn-row {
margin-top: var(--kr-space-5);
}
.kr-account-addresses__form .kr-account-addresses__feedback {
margin-top: var(--kr-space-3);
}
.kr-address-list[hidden],
.kr-account-addresses__empty[hidden] {
display: none;
}
/* Empty state — an invitation, not an apology. Full width, like the rows and
the form it replaces. */
.kr-account-addresses__empty {
padding: var(--kr-space-5) var(--kr-space-6);
}
.kr-account-addresses__empty h2 {
margin-bottom: var(--kr-space-2);
}
.kr-account-addresses__empty p:last-child {
margin-bottom: 0;
}
/* ========================================================================
* "Mijn kalender" — the customer's recurring moments (/mijn-account/kalender/)
*
* WHY THIS LIVES IN account.css AND NOT components.css. `.kr-moment-sheet` is a
* real component — artwork, overlay grid, its own tokens — but it has exactly one
* consumer, this endpoint, and the design puts it nowhere else. CLAUDE.md's rule
* is "grow the system, keep one-offs scoped", and account.css IS a layer of the
* system: the card is tokenised, BEM-named and demoed in the style guide like any
* component, it just sits in the account layer until a second surface wants it.
* Promoting it is then a move between files, not a rewrite.
*
* There is a cousin in components.css — `.kr-date-tile`, the cart's little
* tear-off day chooser. Same vocabulary (a sheet, a coloured header band, a date)
* at a different job and a different size: that one is a 60px radio control, this
* one is a 10rem content card built on the designer's SVG. They deliberately
* share the metaphor and nothing else.
*
* CONTRAST, every new pair:
* navy #00009C on the artwork's band #FFCAFD ...... 10.2:1 (the date)
* navy on the artwork's paper #FFFBF8 ............. 13.8:1 (name, note)
* muted #6A6A93 on that paper ...................... 5.0:1 (year, note)
* navy on the soft-pink button #FFCAFD ............ 10.2:1 (.kr-btn--soft)
* light-pink #FFCAFD on navy ....................... 10.2:1 (.kr-btn)
* muted #6A6A93 on the modal's #FFFBF8 ............. 5.0:1 (preview status)
* The mockup drew the date WHITE on the band — 1.4:1 there, and banned outright
* by CLAUDE.md. Navy instead; the band itself is untouched.
* ======================================================================== */
.kr-account-kalender__view[hidden] {
display: none;
}
/* ---- The shared header rhythm (both sub-views) -------------------------- */
.kr-account-kalender__title {
margin-bottom: var(--kr-space-3);
text-align: center;
}
.kr-account-kalender__header {
text-align: center;
}
/* "Eerst volgende moment: Verjaardag Lara" — breathing room before the
view-toggle buttons below it. */
.kr-account-kalender__next {
margin: 0 0 var(--kr-space-5);
font-size: var(--kr-text-md);
color: var(--kr-text);
}
.kr-account-kalender__next[hidden] {
display: none;
}
/* The hairline under the header. A real
: it separates the page's chrome
from its content, which is what an
is for. */
.kr-account-kalender__rule {
height: 0;
margin: 0;
border: 0;
border-top: 1px solid var(--kr-border);
}
/* ---- The two buttons under the title ----------------------------------- */
/* They used to be a toggle pair (`aria-pressed`, navy = the view you were on)
and carried a bespoke `.kr-account-kalender__tab` copy of the soft/navy pair.
MIJN KALENDER now opens the product dialog rather than switching views, so
they are simply a secondary and a primary action — which is exactly what
`.kr-btn--soft` and plain `.kr-btn` already say. The copy is gone; only the
rhythm below is this endpoint's own. */
.kr-account-kalender__actions {
margin-bottom: var(--kr-space-5);
}
/* ---- The month pill ---------------------------------------------------- */
.kr-account-kalender__filter {
display: flex;
justify-content: center;
margin-top: var(--kr-space-5);
}
/* The design's pill is WHITE with a navy outline, not the sort control's pink
fill — the only difference from `.kr-select-pill`, so it is a one-property
override rather than a second component. */
.kr-account-kalender__filter .kr-select-pill,
.kr-account-kalender__filter .kr-select-pill:focus {
background-color: var(--kr-surface);
font-size: var(--kr-text-base);
padding-block: 0.5em;
}
/* ---- Status line ------------------------------------------------------- */
/* Same role and same colours as `.kr-account-addresses__feedback`, centred
because this view is centred. Muted grey on cream is 5.0:1; the error state is
navy-weight pink text at 4.8:1 on cream. */
.kr-account-kalender__feedback {
margin: 0;
text-align: center;
font-size: var(--kr-text-sm);
font-style: italic;
color: var(--kr-text);
}
.kr-account-kalender__feedback:empty {
display: none;
}
.kr-account-kalender__feedback.is-error {
font-style: normal;
color: var(--kr-text);
}
/* ---- The grid of moments ----------------------------------------------- */
/* 13rem keeps the design's ~4-across on a normal laptop and never lets a sheet
get so small that "Bewerken · Verwijderen" has to stack under it. */
.kr-moment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: var(--kr-space-6) var(--kr-space-5);
margin: 0;
padding: 0;
list-style: none;
}
.kr-moment-grid[hidden] {
display: none;
}
.kr-moment {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--kr-space-3);
margin: 0;
}
.kr-moment[hidden] {
display: none;
}
.kr-moment__order {
width: 100%;
font-size: var(--kr-text-md);
}
.kr-moment__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--kr-space-2);
margin-top: var(--kr-space-2);
}
.kr-moment__actions[hidden] {
display: none;
}
.kr-moment__actions .kr-btn {
font-size: var(--kr-text-sm);
padding: 0.45em 0.9em;
}
/* These are secondary text actions, not a colour change: their pink rule is
the hover/focus cue while the label itself stays navy. */
.kr-moment__actions :is(.kr-pill, [data-kr-moment-edit], [data-kr-moment-delete]) {
position: relative;
color: var(--kr-text);
border-color: var(--kr-primary);
}
.kr-moment__actions :is(.kr-pill, [data-kr-moment-edit], [data-kr-moment-delete])::after {
position: absolute;
inset-inline: var(--kr-space-3);
bottom: var(--kr-space-1);
content: "";
block-size: var(--kr-space-1);
border-radius: var(--kr-radius-pill);
background: transparent;
}
.kr-moment__actions :is(.kr-pill, [data-kr-moment-edit], [data-kr-moment-delete]):hover,
.kr-moment__actions :is(.kr-pill, [data-kr-moment-edit], [data-kr-moment-delete]):focus-visible {
color: var(--kr-text);
border-color: var(--kr-primary);
}
.kr-moment__actions :is(.kr-pill, [data-kr-moment-edit], [data-kr-moment-delete]):hover::after,
.kr-moment__actions :is(.kr-pill, [data-kr-moment-edit], [data-kr-moment-delete]):focus-visible::after {
background: var(--kr-accent);
}
.kr-moment__confirm {
justify-content: center;
text-align: center;
gap: var(--kr-space-2);
}
/* Nothing in the chosen month — a line, not a panel: the grid above it may be
full, it is just this month that is quiet. */
.kr-account-kalender__month-empty {
margin: var(--kr-space-6) 0 0;
text-align: center;
font-style: italic;
color: var(--kr-text);
}
.kr-account-kalender__month-empty[hidden] {
display: none;
}
/* Nothing at all — an invitation, not an apology (same shape as the address
book's and the wishlist's). */
.kr-account-kalender__empty {
padding: var(--kr-space-5) var(--kr-space-6);
text-align: center;
}
.kr-account-kalender__empty[hidden] {
display: none;
}
.kr-account-kalender__empty h2 {
margin-bottom: var(--kr-space-2);
}
.kr-account-kalender__empty .kr-btn-row {
justify-content: center;
}
.kr-account-kalender__empty p:last-child {
margin-bottom: 0;
}
/* ========================================================================
* The sheet itself — the designer's SVG with the type laid over it
*
* `template-parts/components/moment-sheet-bg.php` supplies the artwork; the
* three token hexes it carried internally are mapped here so a palette change
* reaches the drawing:
*
* --kr-primary the outline and the two hooks
* --kr-color-cream the paper
* --kr-color-pink-deep the header band; --kr-color-white is the date text
*
* The card holds the artwork's own aspect ratio (724.25 × 991.16) instead of
* stretching to fit, so the wobbly hand-drawn outline never ovalises — the
* opposite call from `.kr-scallop-card`, whose silhouette is built to stretch.
* Everything on top is positioned as a PERCENTAGE of that box and sized in
* container units, so the type stays pinned to the same part of the drawing
* whatever the card measures.
* ======================================================================== */
.kr-moment-sheet {
--kr-moment-sheet-line: 30px; /* user units of the 724-wide viewBox */
position: relative;
container-type: inline-size;
width: 100%;
/* Capped: the artwork read too large at full column width. The cqw type
sizes inside scale down with it. */
max-width: 12rem;
margin-inline: auto;
aspect-ratio: 724.25 / 991.16;
margin-block: 0;
}
.kr-moment-sheet__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.kr-moment-sheet__paper {
fill: var(--kr-color-cream);
stroke: var(--kr-primary);
stroke-width: var(--kr-moment-sheet-line);
stroke-miterlimit: 10;
}
.kr-moment-sheet__outline {
fill: none;
stroke: var(--kr-primary);
stroke-width: var(--kr-moment-sheet-line);
stroke-miterlimit: 10;
}
.kr-moment-sheet__strip {
fill: var(--kr-color-pink-deep);
}
.kr-moment-sheet__hook {
fill: var(--kr-primary);
}
/* The date, over the deep-pink band. The band runs y 150 → 430 of 991.16 in
the artwork (15% → 43%); this sits inside it. WHITE on deep pink is 4.63:1,
which clears WCAG AA. */
.kr-moment-sheet__date {
position: absolute;
left: 12%;
right: 12%;
top: 20%;
height: 19%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
font-family: var(--kr-font-body);
font-weight: var(--kr-weight-bold);
font-size: var(--kr-text-md); /* fallback where container units are missing */
line-height: 1;
white-space: nowrap;
color: var(--kr-color-white);
}
/* The name, in the cream body: y 440 → 970 of 991.16 (44% → 98%). */
.kr-moment-sheet__body {
position: absolute;
left: 10%;
right: 10%;
top: 47%;
bottom: 8%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25em;
overflow: hidden;
text-align: center;
}
.kr-moment-sheet__label {
margin: 0;
font-family: var(--kr-font-body);
font-size: var(--kr-text-sm);
line-height: var(--kr-leading-snug);
color: var(--kr-text);
}
.kr-moment-sheet__label strong {
font-weight: var(--kr-weight-bold);
}
.kr-moment-sheet__meta,
.kr-moment-sheet__note {
margin: 0;
font-family: var(--kr-font-body);
font-size: var(--kr-text-xs);
line-height: var(--kr-leading-snug);
color: var(--kr-text);
}
/* A long note must not push the name out of the paper — two lines, then ellipsis. */
.kr-moment-sheet__note {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Type that scales WITH the sheet, so the layout above stays true at any size.
Guarded: browsers without container queries keep the rem sizes above. */
@supports (container-type: inline-size) {
.kr-moment-sheet__date {
font-size: 12cqw;
}
.kr-moment-sheet__label {
font-size: 8.5cqw;
}
.kr-moment-sheet__meta,
.kr-moment-sheet__note {
font-size: 6.5cqw;
}
}
/* ---- The "Nieuw moment" form ------------------------------------------- */
.kr-account-kalender__form-head {
position: relative;
}
/* The X. Same treatment as `.kr-modal__close`, but this is a page section and
not a dialog, so it is positioned against the header rather than a card. */
.kr-account-kalender__close {
position: absolute;
top: 0;
right: 0;
}
/* Naam + Datum on the left, Gelegenheid + Notitie on the right. */
.kr-account-kalender__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--kr-space-6);
row-gap: var(--kr-space-4);
margin-top: var(--kr-space-5);
}
.kr-account-kalender__col > .kr-field:last-child {
margin-bottom: 0;
}
/* Dag · Maand · Jaar — three small boxes on one row, as drawn. The month select
gets the widest share because a Dutch month name is up to nine letters. */
.kr-account-kalender__date-fields {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
gap: var(--kr-space-3);
}
.kr-account-kalender__date-fields .kr-input {
padding-inline: var(--kr-space-3);
}
/* The textarea fills the column beside the date row so the two sides balance. */
.kr-account-kalender__note textarea {
min-height: 10rem;
}
.kr-account-kalender__submit {
margin-top: var(--kr-space-6);
}
@media (max-width: 720px) {
.kr-account-kalender__cols {
grid-template-columns: minmax(0, 1fr);
}
.kr-account-kalender__note textarea {
min-height: 7rem;
}
}
/* ---- The product dialog ------------------------------------------------ */
/* Everything structural comes from `.kr-modal` / `.kr-modal--wide` in
components.css. This is the composition inside it: the customer's own
calendar on the left, the product that prints it on the right. A one-off on
purpose — nothing else in the shop sells a thing next to a live render of the
buyer's own copy of it. */
.kr-kalender-product {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--kr-space-6);
align-items: start;
}
/* The preview holds the printed page's proportions (216 × 303 mm) whether it is
showing the cover image or the PDF, so nothing jumps when the render lands. */
.kr-kalender-product__preview {
position: relative;
aspect-ratio: 216 / 303;
border-radius: var(--kr-radius-md);
overflow: hidden;
background: var(--kr-section-pink);
border: 1px solid var(--kr-border);
}
.kr-kalender-product__poster,
.kr-kalender-product__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.kr-kalender-product__poster {
object-fit: cover;
}
/* The poster stands in until the customer's own render arrives, then steps
aside — the PDF fills the same box. */
.kr-kalender-product__preview.is-ready .kr-kalender-product__poster {
opacity: 0;
}
.kr-kalender-product__preview.is-loading .kr-kalender-product__poster {
opacity: 0.45;
}
/* The line the render's progress is announced on, over the poster it replaces. */
.kr-kalender-product__preview-status {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: var(--kr-space-2) var(--kr-space-3);
text-align: center;
font-size: var(--kr-text-sm);
font-style: italic;
color: var(--kr-text);
background: rgba(255, 255, 255, 0.86);
}
.kr-kalender-product__preview-status:empty {
display: none;
}
.kr-kalender-product__preview-status.is-error {
color: var(--kr-text);
background: var(--kr-section-pink);
font-style: normal;
}
/* The dialog's title is centred by `.kr-modal__title`; here it heads a column
of product copy, so it lines up with it. */
.kr-kalender-product__title {
margin-bottom: var(--kr-space-2);
text-align: left;
}
.kr-kalender-product__price {
margin: 0 0 var(--kr-space-4);
font-weight: var(--kr-weight-bold);
color: var(--kr-text);
}
.kr-kalender-product__excerpt p {
margin: 0 0 var(--kr-space-4);
font-size: var(--kr-text-sm);
color: var(--kr-text);
}
.kr-kalender-product__count {
margin: 0;
color: var(--kr-text);
font-size: var(--kr-text-sm);
}
.kr-kalender-product__count strong {
font-weight: var(--kr-weight-bold);
}
.kr-kalender-product__info .kr-modal__actions {
justify-content: flex-start;
margin-top: var(--kr-space-5);
}
.kr-kalender-product__info .kr-modal__feedback {
text-align: left;
}
.kr-account :is(.kr-field__hint, .kr-modal__feedback),
.kr-account .kr-modal__feedback.is-error {
color: var(--kr-text);
}
/* One column on a phone, and the preview keeps its page shape without eating
the whole screen. */
@media (max-width: 40rem) {
.kr-kalender-product {
grid-template-columns: minmax(0, 1fr);
gap: var(--kr-space-5);
}
.kr-kalender-product__preview {
max-width: 15rem;
margin-inline: auto;
}
.kr-kalender-product__title {
text-align: center;
}
.kr-kalender-product__info .kr-modal__actions {
justify-content: center;
}
}
/* ---- "Gegevens": the factuur- / afzenderadres panel --------------------- */
.kr-account-wc-addresses {
margin-top: var(--kr-space-6);
max-width: 46rem;
padding: var(--kr-space-5);
}
.kr-account-wc-addresses__title {
margin-bottom: var(--kr-space-2);
}
.kr-account-wc-addresses__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--kr-space-4);
margin: var(--kr-space-4) 0 0;
padding: 0;
list-style: none;
}
.kr-account-wc-addresses__item {
display: flex;
flex-direction: column;
gap: var(--kr-space-1);
}
.kr-account-wc-addresses__link {
font-weight: var(--kr-weight-bold);
text-decoration: underline;
}
.kr-account-wc-addresses__value {
font-size: var(--kr-text-sm);
font-style: italic;
line-height: var(--kr-leading-snug);
color: var(--kr-text);
}
/* ========================================================================
* Guards for the endpoints that are still WooCommerce stock
*
* Bestellingen and Gegevens each get their own designed template in a later
* task. Until then they render WooCommerce's own markup inside the frame, and
* these few rules are the difference between "not designed yet" and "broken":
* readable tables, a sane address layout, a form column that isn't full-bleed.
* Nothing here tries to be the eventual design.
*
* Adressen is designed now (.kr-account-addresses above), but its two SUB-forms
* — /edit-address/facturatie/ and /edit-address/verzending/ — are still stock
* WooCommerce and keep leaning on the form rules below. The
* `.woocommerce-Addresses` block is core's billing/shipping column pair from
* `myaccount/my-address.php`; the theme overrides that template, so it only
* fires if something bypasses the override.
* ======================================================================== */
.woocommerce-MyAccount-content > h1,
.woocommerce-MyAccount-content > h2:first-child {
margin-top: 0;
}
/* Tables (orders, downloads). base.css already gives them the navy hairline;
this only adds the heading weight and lets a wide table scroll. */
.woocommerce-MyAccount-content .shop_table,
.woocommerce-MyAccount-content .woocommerce-orders-table {
font-family: var(--kr-font-body);
}
.woocommerce-MyAccount-content .shop_table th,
.woocommerce-MyAccount-content .woocommerce-orders-table th {
font-weight: var(--kr-weight-semibold);
color: var(--kr-heading);
}
.woocommerce-MyAccount-content .shop_table td .button {
margin-right: var(--kr-space-2);
}
/* Dashboard and stock WooCommerce actions follow the homepage CTA treatment:
navy with light-pink type at rest, a short inversion only while pressed.
This explicit visited rule prevents a clicked account link retaining a
browser/default link colour. Keyboard focus stays visible through base.css. */
.kr-account-dash :is(.kr-btn, .button),
.kr-account-dash :is(.kr-btn, .button):visited,
.kr-account-dash :is(.kr-btn, .button):hover,
.kr-account-dash :is(.kr-btn, .button):focus-visible {
color: var(--kr-btn-primary-text);
background: var(--kr-primary);
border-color: var(--kr-primary);
box-shadow: none;
transform: none;
}
.kr-account-dash :is(.kr-btn, .button):active {
color: var(--kr-primary);
background: var(--kr-btn-soft-bg);
border-color: var(--kr-btn-soft-bg);
}
/* WooCommerce's order confirmation action normally floats right in its notice.
On a narrow account column that float overlaps the confirmation copy. Keep
the action in normal flow and use the requested warm peach account panel. */
.woocommerce-account .kr-account .woocommerce-MyAccount-content :is(.woocommerce-message, .woocommerce-info) {
display: flow-root;
margin: 0 0 var(--kr-space-5);
padding: var(--kr-space-4) var(--kr-space-5);
border: 1px solid var(--kr-border);
border-radius: var(--kr-radius-md);
background: var(--kr-color-peach-pale) !important;
color: var(--kr-text) !important;
font-family: var(--kr-font-body);
line-height: var(--kr-leading-snug) !important;
}
.woocommerce-account .kr-account .woocommerce-MyAccount-content :is(.woocommerce-message, .woocommerce-info) .button {
float: none;
display: inline-flex;
margin: var(--kr-space-3) 0 0;
}
/* Stock WooCommerce endpoint copy inherits the account's navy text. */
.woocommerce-MyAccount-content {
color: var(--kr-text);
}
.kr-account a:not(.kr-btn):not(.kr-pill):not(.kr-account-nav__link):hover,
.kr-account a:not(.kr-btn):not(.kr-pill):not(.kr-account-nav__link):focus-visible {
color: var(--kr-text);
}
/* Address book. WooCommerce's `.u-columns` / `.col2-set` pair is laid out with
`float` + `width: 48%` from woocommerce-layout.css, whose selectors key off
`body.woocommerce-page` and therefore still fire without a `.woocommerce`
wrapper. Replaced with a grid; the body class is repeated in the selector
purely to outrank those rules. */
.woocommerce-account .kr-account .woocommerce-Addresses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--kr-space-5);
max-width: 46rem; /* same column width as the forms below */
}
.woocommerce-account .kr-account .woocommerce-Addresses > * {
float: none;
width: auto;
margin: 0;
}
/* WooCommerce's clearfix `::before` / `::after` on `.col2-set` become GRID
ITEMS the moment the container is a grid, and they take the first cell — the
two addresses end up one row down and one column across. They exist to clear
floats that are no longer there. */
.woocommerce-account .kr-account .woocommerce-Addresses::before,
.woocommerce-account .kr-account .woocommerce-Addresses::after {
display: none;
}
/* The title block is left as normal flow (heading, then the "Bewerken" link):
WooCommerce centres it via `.col2-set .title` in its own stylesheet, and its
link text is a translated string of unpredictable length, so a flex row would
only wrap unpredictably. */
.woocommerce-account .kr-account .woocommerce-Address-title {
display: block;
text-align: left;
margin-bottom: var(--kr-space-2);
}
.woocommerce-account .kr-account .woocommerce-Address-title h2,
.woocommerce-account .kr-account .woocommerce-Address-title h3 {
margin-bottom: var(--kr-space-2);
}
/* WooCommerce floats the "Bewerken" link to the right of the (centred) title. */
.woocommerce-account .kr-account .woocommerce-Address-title .edit {
float: none;
display: inline-block;
text-decoration: underline;
}
.woocommerce-MyAccount-content address {
font-style: normal;
line-height: var(--kr-leading-normal);
}
/* Forms (edit-address, edit-account). The fields themselves are already the
design-system controls — components.css styles the bare elements — so this is
just column width and row rhythm, mirroring the checkout guards. */
.woocommerce-MyAccount-content form {
max-width: 46rem;
}
.woocommerce-MyAccount-content .form-row,
.woocommerce-MyAccount-content .woocommerce-form-row {
display: flex;
flex-direction: column;
margin: 0 0 var(--kr-space-4);
padding: 0;
}
.woocommerce-MyAccount-content .woocommerce-input-wrapper {
display: block;
width: 100%;
}
.woocommerce-MyAccount-content fieldset {
margin: var(--kr-space-6) 0 var(--kr-space-4);
padding: 0;
border: 0;
border-top: 1px solid var(--kr-border);
padding-top: var(--kr-space-5);
}
.woocommerce-MyAccount-content fieldset legend {
padding: 0;
font-family: var(--kr-font-heading);
font-size: var(--kr-text-lg);
color: var(--kr-heading);
}
/* WooCommerce marks required fields with a red asterisk from its own palette. */
.woocommerce-MyAccount-content .required {
color: var(--kr-text);
text-decoration: none;
border: 0;
}
.woocommerce-MyAccount-content .woocommerce-pagination {
margin-top: var(--kr-space-5);
}