/* ==========================================
   KRUMPLD — MY ACCOUNT
   Extends the same design system already used
   on the order confirmation page (kp- classes):
   hairline borders, monochrome icons, one
   restrained orange accent, uppercase eyebrow
   labels. No template overrides — everything
   here targets WooCommerce's own generated
   markup and classes on body.woocommerce-account.
   ========================================== */

body.woocommerce-account {
    background: var(--kr-canvas); /* KRUMPLD MOD: was #fff. Per the locked site-wide decision,
        the header stays white (independent of this, already opaque on its own) while
        the page canvas becomes the same ivory used by About/Contact/Size Guide, so the
        Account ecosystem shares the site's editorial identity instead of reading as a
        separate all-white WooCommerce interface. Cards (.kp-order-card,
        .kp-address-card, .kp-account-card) all carry their own explicit white
        background already -- see the .kp-account-card fix just above -- so they read
        as deliberate white objects on the ivory canvas rather than blending into it. */
}

/* ==========================================
   PAGE TITLE
   ========================================== */

body.woocommerce-account .entry-content > h1,
body.woocommerce-account .woocommerce > h1 {
    font-size: 28px;
    font-weight: 500;
    color: var(--kr-ink);
    margin-bottom: 32px;
}

/* ==========================================
   LAYOUT
   ========================================== */

body.woocommerce-account .woocommerce-MyAccount-navigation {
    border: none;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    font-size: 14px;
    color: var(--kr-secondary);
    line-height: 1.7;
}

body.woocommerce-account .woocommerce-MyAccount-content > p {
    max-width: 640px;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--kr-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-MyAccount-content a:hover {
    opacity: 0.65;
}

/* ==========================================
   NAVIGATION — icon + label, hairline dividers
   ========================================== */

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link {
    border-bottom: 1px solid #eee;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link:last-child {
    border-bottom: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 4px;

    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--kr-secondary);
    text-decoration: none;

    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
    color: var(--kr-ink);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--kr-ink);
    font-weight: 600;
    border-left-color: var(--kr-ink); /* KRUMPLD MOD: was #f36b3d */
    padding-left: 12px;
}

/* Icon well — a small monochrome mask-image per nav item, colored via
   currentColor so hover/active states recolor it automatically. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
    content: "";
    display: block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5V8z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3C/svg%3E");
}

/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 768px) {
    body.woocommerce-account .entry-content > h1,
    body.woocommerce-account .woocommerce > h1 {
        font-size: 22px;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
        padding: 12px 4px;
    }
}

/* ==========================================
   ACCOUNT CARDS — component styles
   Copied exactly from confirmation-page.css
   (Thank You page) for visual continuity.
   Not previously loaded on account pages --
   confirmation-page.css is scoped to
   order-received/order-pay only, so these
   need their own copy here.
   ========================================== */

.kp-account-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kp-account-card {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    min-height: 84px;

    padding: 20px 24px;
    box-sizing: border-box;

    border: 1px solid #d9d6d0;
    border-radius: 10px;
    background: var(--kr-header); /* KRUMPLD MOD: was transparent, relying on the page itself being
        white. Now that the page canvas is ivory (#F0EDE8), this needs an explicit white
        background so the tile still reads as a deliberate white card, not a borderless
        shape blending into the page. */

    color: var(--kr-ink);
    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.kp-account-card:hover {
    border-color: var(--kr-ink);
    background: rgba(255, 255, 255, 0.18);
    color: var(--kr-ink);
}

.kp-account-card:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 3px;
}

.kp-account-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    color: var(--kr-ink);

    border: 0;

    font-size: 20px;
    line-height: 1;
}

.kp-account-icon svg {
    width: 24px;
    height: 24px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.kp-account-content {
    min-width: 0;
    flex: 1;
}

.kp-account-card-title {
    display: block;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--kr-ink);
    margin-bottom: 5px;
}

.kp-account-card-meta {
    display: block;

    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--kr-label);
}

.kp-account-arrow {
    flex: 0 0 auto;

    font-size: 20px;
    line-height: 1;

    color: var(--kr-ink);

    transition: transform 0.2s ease;
}

.kp-account-card:hover .kp-account-arrow {
    transform: translateX(3px);
}

/* ==========================================
   DASHBOARD — three-card layout
   ========================================== */

.kp-dashboard {
    padding: 8px 0 24px;
}

.kp-dashboard__eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--kr-label);
    margin: 0 0 12px;
}

.kp-dashboard__title {
    font-size: 26px;
    font-weight: 500;
    color: var(--kr-ink);
    margin: 0;
}

/*
 * Header row -- eyebrow/title on the left, the "Log out" link on the
 * right. Replaces the old logout tile (now removed from the cards
 * grid below): logout is a low-frequency action, so it is demoted to
 * a small muted text link rather than getting equal visual weight
 * with Orders/Claim/Profile.
 */
.kp-dashboard__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 32px;
}

.kp-dashboard__logout-link {
    flex: 0 0 auto;
    margin-top: 6px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-label);
    text-decoration: none;
    white-space: nowrap;
}

.kp-dashboard__logout-link:hover {
    color: var(--kr-ink);
}

.kp-dashboard__logout-link:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 3px;
}

.kp-dashboard__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
}

@media (max-width: 640px) {
    .kp-dashboard__title {
        font-size: 22px;
    }
}

/*
 * KRUMPLD MOD: square-tile layout (icon on top, stacked content, arrow
 * pinned to the top-right corner) starts at tablet width and up. Below
 * 768px, cards stay the original slender horizontal-row layout used on
 * phones -- that default lives outside any media query above this one.
 *
 * Grid column count is intentionally NOT set here -- it's set separately
 * per breakpoint below (2 columns for tablet, 3 for desktop-and-up),
 * since iPad Air (820px) and iPad Mini (768px) have enough width for
 * large square tiles but not enough to fit three per row without
 * cramming them -- confirmed by direct testing at those exact viewport
 * widths. Only three tiles remain (Orders / Claim an order / Profile)
 * now that Log out lives in the header row above.
 */
@media (min-width: 768px) {
    .kp-dashboard__cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 100%;
    }

    .kp-dashboard__cards .kp-account-card {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-height: 160px;
        padding: 28px;
        gap: 16px;
    }

    .kp-dashboard__cards .kp-account-icon {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .kp-dashboard__cards .kp-account-icon svg {
        width: 28px;
        height: 28px;
    }

    .kp-dashboard__cards .kp-account-content {
        width: 100%;
    }

    .kp-dashboard__cards .kp-account-card-title {
        font-size: 17px;
    }

    .kp-dashboard__cards .kp-account-arrow {
        position: absolute;
        top: 24px;
        right: 24px;
    }
}

/*
 * KRUMPLD MOD: previously forced 3 columns at 1024px+ when this
 * dashboard had exactly three tiles ("there's enough width for all
 * three tiles in a single row"). Now that Addresses is a fourth card,
 * that reasoning no longer applies - 4-across would cramp each
 * square tile at the same container width, and going back to the
 * inherited 768px rule's 2 columns gives a clean 2x2 grid instead,
 * which suits four square tiles better than either 4-across or a
 * lone 4th card wrapping alone onto its own row (the same awkward
 * "3-then-1" pattern already fixed on the mobile order-status
 * timeline elsewhere in this codebase - not something to reintroduce
 * here). No override needed at all now; removed rather than changed
 * to repeat(2, 1fr) explicitly, since that's already what the 768px
 * rule above sets - this breakpoint simply has nothing left to do.
 */

/* ==========================================
   ORDERS — CARD SYSTEM
   ========================================== */

.kp-orders-section {
    margin: 0 0 36px;
}

/*
 * KRUMPLD MOD: previously forced Orders' title into a bold sans-serif
 * treatment, different from every other account page. Removed as part
 * of standardizing all account page headlines on the same serif
 * (Cormorant) style - this override is no longer needed, and the
 * --title--orders modifier class in orders.php can stay in the markup
 * unused (harmless) or be removed there later; nothing here depends
 * on it existing.
 */

.kp-orders-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 9px;
    margin: 0 0 16px;
    border-bottom: 1px solid #d9d6d0;
}

.kp-orders-section__header h2 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kr-label);
}

.kp-orders-section__header > span {
    color: var(--kr-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.kp-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kp-order-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid #dedbd5;
    background: var(--kr-header);
    box-sizing: border-box;
}

.kp-order-card__main {
    min-width: 0;
}

/*
 * KRUMPLD MOD: bordered badge, not colored text -- per explicit
 * direction, no color-coding by status at all. Same border/text color
 * for every status, including cancelled and refunded.
 */
.kp-order-card__status {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 10px;
    border: 1px solid #111;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-ink);
}

.kp-order-card__number {
    display: block;
    margin: 0 0 2px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--kr-ink);
}

.kp-order-card__number a {
    color: inherit !important;
    text-decoration: none !important;
}

.kp-order-card__number a:hover {
    opacity: 0.75;
}

/*
 * Strikethrough on the order number itself -- cancelled status only,
 * per the reference mockup (refunded orders are NOT struck through).
 */
.kp-order-card__number--struck {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.kp-order-card__total {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--kr-ink);
    text-decoration: none !important;
}

.kp-order-card__total--struck {
    text-decoration: line-through !important;
    text-decoration-thickness: 2px;
}

.kp-order-card__date {
    display: block;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kr-ink);
}

/* Progress stepper -- restored, single color throughout (no status
   color-coding), matching the reference mockup exactly. */
.kp-order-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kp-order-progress__stage {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--kr-ink);
    font-size: 9px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kp-order-progress__dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid var(--kr-ink);
    background: transparent;
}

.kp-order-progress__stage.is-reached .kp-order-progress__dot {
    background: var(--kr-ink);
}

.kp-order-progress__line {
    height: 1px;
    flex: 1 1 auto;
    min-width: 12px;
    background: var(--kr-rule);
}

.kp-order-card__actions {
    display: flex;
    justify-content: flex-end;
}

/*
 * KRUMPLD MOD: all account-page buttons are solid black with white text,
 * no exceptions -- this used to be an outline/transparent "clear" button
 * (white fill, thin gray border, black text), which is exactly the
 * inconsistent look being removed sitewide. No separate --visited
 * treatment either: a "visited" button state doesn't carry real meaning
 * here, and having it differ from hover/base only added a third,
 * unrelated shade to what should be a single black.
 */
.kp-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid var(--kr-ink) !important;
    background: var(--kr-ink) !important;
    color: var(--kr-header) !important;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kp-order-button:hover,
.kp-order-button:focus {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: var(--kr-header) !important;
}

.kp-order-button:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 3px;
}

.kp-orders-pagination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}

.kp-orders-pagination a {
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .kp-order-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .kp-order-card__actions {
        justify-content: flex-start;
    }

    .kp-order-button {
        width: 100%;
    }

    /*
    | Was previously: flex-wrap: wrap + hide the connector line. That
    | let the four stages wrap onto whatever line count happened to
    | fit (3 then 1, in practice) - looked like a layout bug rather
    | than an intentional design, and lost the connecting line
    | entirely with nothing to replace it.
    |
    | Replaced with a genuine vertical timeline: switching the
    | container to flex-direction: column is enough on its own to
    | stack every stage/connector in the correct top-to-bottom order,
    | since the markup already alternates stage, line, stage, line...
    | in that exact sequence - no reordering needed, just a change of
    | axis. Only the connector's own dimensions need to change, from
    | a horizontal line between two side-by-side dots to a short
    | vertical one directly beneath each dot.
    */
    .kp-order-progress {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .kp-order-progress__stage {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .kp-order-progress__line {
        width: 1.5px;
        height: 16px;
        min-width: 0;
        flex: 0 0 auto;
        background: var(--kr-rule);
        margin-left: 4.25px;
    }
}

@media (max-width: 480px) {
    .kp-order-card {
        padding: 18px;
    }

    .kp-order-card__number {
        font-size: 23px;
    }
}

/* ==========================================
   DASHBOARD CARDS — underline fix (consolidated)
   Root cause: .kp-account-card's own base
   text-decoration: none had no !important and
   only 1-class specificity -- it was losing to
   body.woocommerce-account .woocommerce-MyAccount-content a
   (body + 2 classes + element), which sets the
   underline on the anchor itself, not the spans
   inside it. Fixed the same way this exact file
   already fixes the identical problem elsewhere
   (.kp-order-card__number a, .kp-order-button):
   target the actual link directly with !important,
   not its descendants.
   ========================================== */

.kp-account-card,
.kp-account-card:link,
.kp-account-card:visited,
.kp-account-card:hover,
.kp-account-card:focus,
.kp-account-card:active {
    text-decoration: none !important;
}

.kp-account-card-meta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kr-label);
    margin-bottom: 6px;
}

.kp-account-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--kr-ink);
    line-height: 1.3;
    margin-bottom: 0;
}
/* ==========================================
   VIEW ORDER — BACK TO ORDERS LINK
   Same eyebrow-label language as
   .kp-orders-section__header h2 and
   .kp-order-card__status: 10px, 600 weight,
   uppercase, wide tracking. #777 resting,
   #111 on hover — no new colors introduced.
   ========================================== */

.kp-order-back-link {
    margin-bottom: 20px;
}

.kp-order-back-link a {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kr-label);
    text-decoration: none;
    transition: color 0.15s ease;
}

/*
 * Specificity fix: body.woocommerce-account .woocommerce-MyAccount-content a
 * (above, in the PAGE TITLE / LAYOUT section) underlines all links inside
 * the account content area and outranks .kp-order-back-link a on its own
 * (2 classes + element vs. 1 class + element). This selector matches that
 * same nesting so it wins regardless of source order — not !important,
 * to keep it consistent with how the rest of this file resolves conflicts.
 *
 * Also overrides color here, not just text-decoration: that same broad
 * rule sets color: var(--kr-ink) by default and fades to 65% opacity on hover
 * (not an actual color change), which forces this link dark-by-default
 * with a lighter-on-hover fade — the opposite of the intended gray
 * default / dark hover defined below. This was a pre-existing conflict
 * on every page using .woocommerce-MyAccount-content (Orders, Profile),
 * not something introduced recently - it just had nothing to visibly
 * contrast against until the Claim Account page (which sits outside
 * this wrapper entirely) started rendering the same class correctly.
 */
body.woocommerce-account .woocommerce-MyAccount-content .kp-order-back-link a {
    text-decoration: none;
    color: var(--kr-label);
}

body.woocommerce-account .woocommerce-MyAccount-content .kp-order-back-link a:hover,
body.woocommerce-account .woocommerce-MyAccount-content .kp-order-back-link a:focus-visible {
    color: var(--kr-ink);
    opacity: 1;
}

.kp-order-back-link a:hover,
.kp-order-back-link a:focus-visible {
    color: var(--kr-ink);
}

/* ==========================================
   SHARED ACCOUNT PAGE HEADER
   Eyebrow + serif headline + subtitle, same
   component and exact values as
   .kr-signin-header in krumpld-signin.css --
   duplicated here (not shared via a single
   file) matching this codebase's established
   convention of per-stylesheet duplication
   over a cross-cutting shared file.
   ========================================== */

body.woocommerce-account .kr-account-header {
    text-align: center;
    margin-bottom: 40px;
}

body.woocommerce-account .kr-account-header__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kr-label);
    margin-bottom: 12px;
}

body.woocommerce-account .kr-account-header__title {
    font-family: var(--kr-font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--kr-ink);
    margin: 0 0 8px;
}

body.woocommerce-account .kr-account-header__subtitle {
    font-size: 14px;
    color: var(--kr-label);
    margin: 0;
}

/* ==========================================
   PROFILE PAGE (form-edit-account.php)
   Section headers mirror .kp-orders-section__header
   exactly (10px/600/uppercase/#777, hairline
   border). Inputs mirror the already-shipped
   .kr-registration__field convention (bordered
   box, #d9d6d0 border, #111 on focus) rather
   than inventing a third input style.
   ========================================== */

.kp-profile-form {
    max-width: 640px;
}

/* Two-column First/Last Name row, per the approved mockup. Collapses to a
   single column at the existing 768px mobile breakpoint (see MOBILE,
   further down this file), matching this file's convention of desktop-first
   base styles with a max-width override for mobile. */
.kp-profile-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
    margin: 0 0 20px;
}

/* The row itself now owns the trailing space before the next field
   (Display Name), matching every other .kp-profile-field's own 20px
   bottom margin -- so First/Last Name's own margin is zeroed here to
   avoid double-counting. */
.kp-profile-fields-row .kp-profile-field {
    margin-bottom: 0;
}

.kp-profile-section {
    margin-bottom: 40px;
}

.kp-profile-section__header {
    padding: 0 0 9px;
    margin: 0 0 20px;
    border-bottom: 1px solid #d9d6d0;
}

.kp-profile-section__header h2 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--kr-label);
}

.kp-profile-field {
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0 0 20px;
}

.kp-profile-field label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-label);
}

/*
 * KRUMPLD MOD: underline style, not a bordered box -- border-bottom only,
 * transparent background, no side/top border, reduced horizontal padding
 * since there's no box edge to pad away from. Only .kp-profile-input is
 * changed here; Registration and Claim Account still use the original
 * bordered-box input style and haven't been touched.
 *
 * Scoped under body.woocommerce-account .woocommerce-MyAccount-content,
 * same fix pattern as the back-link/Claim-it underline issues on this same
 * page: WooCommerce core's own generic input styling (e.g.
 * .woocommerce input[type="text"]) outranks a bare .kp-profile-input on
 * specificity, so the box persisted even after this rule was added. Not
 * !important, to stay consistent with how the rest of this file resolves
 * these conflicts.
 */
body.woocommerce-account .woocommerce-MyAccount-content .kp-profile-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 2px;
    font-size: 15px;
    border: none;
    border-bottom: 1px solid #d9d6d0;
    border-radius: 0;
    background: transparent;
    color: var(--kr-ink);
    font-family: inherit;
}

body.woocommerce-account .woocommerce-MyAccount-content .kp-profile-input:focus {
    outline: none;
    border-bottom-color: var(--kr-ink);
}

/*
 * No :focus-visible outline here on purpose -- outline draws a box around
 * all four sides of the element, which is exactly what "lines, not boxes"
 * is trying to avoid. Browsers apply :focus-visible to text inputs on
 * mouse click too (unlike buttons/links, where it's keyboard-only), so
 * this was drawing a full box on every click. The :focus rule above
 * (darkened underline) is the sole focus indicator now.
 */

/*
 * Password visibility toggle. Values mirror .kr-registration__input-wrap /
 * .kr-registration__toggle-password in registration.css exactly -- not
 * reused directly because that file only loads on is_page('register'),
 * never on the account page.
 */
.kp-profile-input-wrap {
    position: relative;
}

.kp-profile-input-wrap .kp-profile-input {
    padding-right: 32px;
}

.kp-profile-toggle-password {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: var(--kr-label);
    cursor: pointer;
}

.kp-profile-toggle-password:hover {
    color: var(--kr-ink);
}

.kp-profile-toggle-password:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 2px;
}

/*
 * Verified badge. Uses the existing neutral palette (#111/#d9d6d0) rather
 * than a semantic green -- this codebase has an open, unresolved question
 * about introducing new colors (see the Orders card palette discussion),
 * so a new color for this badge isn't introduced without that being
 * settled first.
 */
.kp-profile-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 3px 8px;
    border: 1px solid #d9d6d0;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kr-ink);
    vertical-align: middle;
}

/*
 * "Verify email" -- shown in place of the badge above when
 * krumpld_verified_email doesn't match the account's current email.
 * Matches .kp-profile-row__link's accent treatment (orange, the same
 * narrow accent already used for "Claim it" on this same page), since
 * this is a comparable primary action, not a muted secondary one.
 */
/*
 * KRUMPLD MOD: was the site's decorative accent orange (#f36b3d base,
 * #e85c2f -- a second, different orange -- on hover). Per the site-wide
 * decision to remove decorative orange everywhere except product color
 * swatches, this now matches the black/gray monochrome treatment used
 * by every other profile-page action.
 */
.kp-profile-verify-email-link {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--kr-ink);
    cursor: pointer;
}

.kp-profile-verify-email-link:hover {
    color: var(--kr-secondary);
}

.kp-profile-verify-email-link:disabled {
    opacity: 0.6;
    cursor: default;
}

.kp-profile-verify-email-link:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 2px;
}

/* "Change password" toggle -- same weight/size as the profile save button's
   surrounding text, not a hint-style muted link, since it's the primary way
   into this section. */
/*
 * KRUMPLD MOD: this is a real <button> element, not a link -- which
 * means it can pick up a native browser "activated" highlight (a solid
 * blue fill, most visible on click/tap) that author CSS doesn't touch
 * just by setting background/border/outline on our own selectors. The
 * -webkit-tap-highlight-color and -webkit-appearance/appearance resets
 * below explicitly kill that native fill; without them, the button can
 * still flash blue on click even though every rule we write here says
 * otherwise. Hover now sets an explicit gray text color instead of an
 * opacity dim, since opacity was the only signal here and gave no
 * guarantee about what shade it actually lands on.
 */
.kp-profile-toggle-password-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--kr-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.kp-profile-toggle-password-link:hover,
.kp-profile-toggle-password-link:active {
    background: none;
    color: var(--kr-secondary);
}

.kp-profile-toggle-password-link:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 3px;
}

.kp-profile-password-fields {
    margin-top: 20px;
}

.kp-profile-password-cancel-row {
    margin: -8px 0 0;
}

.kp-profile-cancel-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-label);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/*
 * The base rule above only resets background at rest - it doesn't
 * carry through to hover/active, where some browsers apply their own
 * native button highlight (a light blue background in Chrome) that
 * background: none alone, set only on the base state, doesn't fully
 * suppress. Explicitly re-asserting "no background" in every
 * interactive state closes that gap.
 */
.kp-profile-cancel-link:hover,
.kp-profile-cancel-link:active,
.kp-profile-cancel-link:focus {
    background: none;
    color: var(--kr-ink);
}

.kp-profile-cancel-link:focus-visible {
    outline: 2px solid var(--kr-ink);
    outline-offset: 2px;
}

.kp-profile-hint {
    font-size: 12px;
    color: var(--kr-label);
    line-height: 1.5;
    margin: 0;
}

/* Locked email display -- not an input, deliberately. */
.kp-profile-row {
    margin: 0 0 8px;
}

.kp-profile-row__label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-label);
    margin-bottom: 6px;
}

.kp-profile-row__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--kr-ink);
    margin: 0 0 6px;
}

.kp-profile-row__link {
    color: var(--kr-ink); /* KRUMPLD MOD: was #f36b3d -- matches .kp-profile-verify-email-link's
        already-completed monochrome fix; this sibling element was missed in that pass. */
    font-weight: 600;
}

.kp-profile-row__link:hover {
    color: var(--kr-secondary); /* KRUMPLD MOD: was #e85c2f (a second, different orange) -- matches
        .kp-profile-verify-email-link:hover exactly. */
}

/*
 * Same specificity issue as .kp-order-back-link (see PAGE TITLE / LAYOUT
 * section above): body.woocommerce-account .woocommerce-MyAccount-content a
 * underlines every link in this content area and outranks
 * .kp-profile-row__link alone. Matching that nesting here too, rather than
 * reaching for !important.
 */
body.woocommerce-account .woocommerce-MyAccount-content .kp-profile-row__link {
    text-decoration: none;
}

.kp-profile-submit-row {
    margin-top: 12px;
}

.kp-profile-save-button {
    display: inline-flex;
    justify-content: center;
    min-width: 160px;
}

/* Profile page mobile override — collapses the two-column First/Last Name
   row to a single column, matching this file's existing 768px breakpoint
   convention rather than introducing a new one. */
@media (max-width: 768px) {
    .kp-profile-fields-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
/* ==========================================
   ORDERS PAGE — EMPTY STATE
   KRUMPLD MOD: replaces WooCommerce's raw
   default "No order has been made yet." notice
   with a redesigned icon + headline + subtitle
   + single button state, matching this site's
   established light, minimalist visual
   language. No second "Track a Package" button
   -- confirmed no standalone tracking page or
   feature exists in this codebase (tracking
   actions are strictly per-order, tied to a
   real existing order's shipping integration),
   and a zero-orders screen has nothing to track
   anyway, so that button would be a dead link.
   ========================================== */

body.woocommerce-account .kp-orders-empty {
    text-align: center;
    max-width: 400px;
    margin: 64px auto;
}

body.woocommerce-account .kp-orders-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--kr-rule);
    color: var(--kr-label);
    margin-bottom: 20px;
}

body.woocommerce-account .kp-orders-empty h2 {
    font-family: var(--kr-font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--kr-ink);
    margin: 0 0 12px;
}

body.woocommerce-account .kp-orders-empty p {
    font-size: 14px;
    color: var(--kr-label);
    line-height: 1.6;
    margin: 0 0 28px;
}

body.woocommerce-account .kp-orders-empty__button {
    display: inline-block;
    background: var(--kr-ink) !important;
    color: var(--kr-header) !important;
    text-decoration: none !important;
    padding: 13px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

body.woocommerce-account .kp-orders-empty__button:hover,
body.woocommerce-account .kp-orders-empty__button:focus {
    background: #1a1a1a !important;
    color: var(--kr-header) !important;
}
/* ==========================================
   MY ADDRESSES PAGE
   Reuses .kp-order-card's established border/background
   language for consistency with Orders, and the same
   uppercase-gray-link treatment as .kp-order-back-link
   for the Edit/Add link.
   ========================================== */

.kp-address-intro {
    font-size: 14px;
    color: var(--kr-secondary);
    margin: 0 0 28px;
    max-width: 480px;
}

.kp-address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .kp-address-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kp-address-card {
    border: 1px solid #dedbd5;
    background: var(--kr-header);
    padding: 20px;
    box-sizing: border-box;
}

.kp-address-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ece7e1;
}

.kp-address-card__title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kr-ink);
}

.kp-address-card__edit {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kr-label);
    text-decoration: none;
    transition: color 0.15s ease;
}

.kp-address-card__edit:hover,
.kp-address-card__edit:focus-visible {
    color: var(--kr-ink);
}

.kp-address-card__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--kr-secondary);
    font-style: normal;
}

.kp-address-card__empty {
    color: var(--kr-label);
    font-style: italic;
}

/*
 * Same specificity fix as .kp-order-back-link (see PAGE TITLE / LAYOUT
 * section): body.woocommerce-account .woocommerce-MyAccount-content a
 * forces color:var(--kr-ink) by default and fades to 65% opacity on hover for
 * every link in the account content area, outranking .kp-address-card__edit
 * alone (2 classes + element vs. 1 class + element). Applying this
 * proactively - not after the fact - now that this exact conflict is
 * a known, understood pattern in this codebase rather than something
 * to rediscover from scratch on every new link added to this area.
 */
body.woocommerce-account .woocommerce-MyAccount-content .kp-address-card__edit {
    text-decoration: none;
    color: var(--kr-label);
}

body.woocommerce-account .woocommerce-MyAccount-content .kp-address-card__edit:hover,
body.woocommerce-account .woocommerce-MyAccount-content .kp-address-card__edit:focus-visible {
    color: var(--kr-ink);
    opacity: 1;
}

/* ==========================================
   EDIT ADDRESS (Billing/Shipping) — HEADING FIX
   -------------------------------------------------
   WooCommerce's own form-edit-address.php renders
   "Billing address" / "Shipping address" as a plain,
   unstyled <h2> with no class of its own - this
   restyles it to match every other account page's
   serif headline treatment, without touching the
   actual template (see inc/edit-address.php for the
   matching back-link, added the same low-risk way).

   Scoped to the real WooCommerce-generated body
   classes for this specific endpoint (confirmed via
   WooCommerce's own wc_body_class() function, which
   adds "woocommerce-{endpoint}" per active endpoint)
   rather than guessing a generic selector.
   ========================================== */
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content h2 {
    font-family: var(--kr-font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--kr-ink);
    margin: 0 0 24px;
}

/*
 * Labels and inputs on this page are WooCommerce's own native,
 * unclassed markup - form elements (input, label, select, textarea)
 * are a well-known browser exception to normal inheritance: they do
 * NOT inherit font-family from the page by default, unlike regular
 * text elements. Every other input on the site is fixed via a class
 * like .kp-profile-input (which sets font-family: inherit) - this
 * page has no such class to hook into, so nothing was ever telling
 * these specific elements to use the site's real font (Satoshi)
 * instead of silently falling back to the browser's system font
 * stack, which is exactly what showed up in devtools.
 */
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content label {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/*
 * Unifies font-size too, not just font-family: WooCommerce's native
 * <select> elements (Country/Region, State/Province) rendered at
 * 14px by default, while text <input> fields rendered at 17px - an
 * inconsistency baked into the browser's own default styling for
 * these two element types, not something either was deliberately
 * set to. 17px chosen as the shared value (matching what text inputs
 * already used) rather than 14px, for better readability while
 * filling out the form on smaller screens.
 */
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content input,
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content select,
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content textarea {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
}

/*
 * Country/Region and State/Province are enhanced by Select2 (a JS
 * library WooCommerce uses for these two fields), which completely
 * replaces the visible control with its own markup
 * (.select2-selection__rendered holds the actual visible text) and
 * hides the real <select> the rule above targets. Confirmed via
 * devtools: the real element on screen is
 * span.select2-selection__rendered, not the underlying <select> at
 * all - so it needs its own explicit rule; the one above can't reach
 * it no matter how it's written.
 */
body.woocommerce-account.woocommerce-edit-address .woocommerce-MyAccount-content .select2-selection__rendered {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 42px;
}

/*
 * Sizing/alignment for the new SVG arrow icon inside the View Details
 * button (replacing a plain Unicode character - see orders.php).
 * Color is NOT set here on purpose: the SVG uses stroke="currentColor",
 * which automatically picks up .kp-order-button's own text color
 * (white), so it stays correct automatically if the button's color
 * ever changes, rather than needing to be kept in sync by hand.
 */
.kp-order-button__icon {
    display: inline-flex;
    align-items: center;
}