/* ============================================================================
   Matrix3D — My Account
   Split out of ui-polish.css by template. Sections kept in their original
   order and enqueued after m3d-ui-polish, so the cascade is unchanged.
   ========================================================================= */

/* ============================================================================
   24. MY ACCOUNT — signed-out layout
   theme.css gives `.woocommerce-account .woocommerce` a two-column grid
   (nav sidebar + content). That is right once signed in, but the signed-out
   page carries the same `woocommerce` class and has no navigation, so column
   one sat empty and shoved the login card against the right edge. Collapse to
   a single column and centre the card. Below 1024px theme.css already
   collapses the grid, so this changes nothing on mobile.
   ========================================================================= */

.woocommerce-account .woocommerce.ct-woo-unauthorized {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

/* Only a login card lives in here when signed out, so a full-width surface
   reads as an empty slab. Hug the card instead. The :has() guard keeps this
   off if WooCommerce registration is ever switched back on, since the
   login+register pair needs the full width. */
body.woocommerce-account:not(.logged-in)
    .m3d-account-surface:not(:has(.woocommerce-form-register)) {
    max-width: 560px;
    margin-inline: auto;
}

/* `width` is needed as well as `max-width`: a grid item with auto margins
   shrink-wraps to its content, which left the card narrower than the notice
   and footnote sitting above and below it. */
.woocommerce-account .ct-woo-unauthorized > .woocommerce-notices-wrapper,
.woocommerce-account .ct-woo-unauthorized > form.woocommerce-form-login,
.woocommerce-account .ct-woo-unauthorized > form.woocommerce-ResetPassword,
.woocommerce-account .m3d-account-newcustomer {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
}

/* Signed-out visitors have no register form, so tell them where accounts
   actually come from. */
.woocommerce-account .m3d-account-newcustomer {
    margin-block: 4px 0 !important;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--m3d-text-muted);
}

/* Own line, so the sentence never breaks mid-link. */
.woocommerce-account .m3d-account-newcustomer-link {
    display: block;
    margin-top: 2px;
    color: var(--m3d-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-account .m3d-account-newcustomer-link:hover,
.woocommerce-account .m3d-account-newcustomer-link:focus-visible {
    color: var(--m3d-green-hover);
}

/* The submit button had no styling of its own, so it rendered as a flat
   rectangle while every other primary action on the site is a green pill. */
.woocommerce-account .ct-woo-unauthorized form.woocommerce-form-login button[type="submit"],
.woocommerce-account .ct-woo-unauthorized form.woocommerce-ResetPassword button[type="submit"] {
    min-height: 50px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--m3d-green) 0%, #0f766e 100%);
    color: #fff;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease;
}

.woocommerce-account .ct-woo-unauthorized form.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-account .ct-woo-unauthorized form.woocommerce-ResetPassword button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(5, 150, 105, .28);
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-account .ct-woo-unauthorized button[type="submit"],
    .woocommerce-account .ct-woo-unauthorized button[type="submit"]:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================================
   25. MY ACCOUNT — signed-in views
   ========================================================================= */

/* --- 25a. Password reveal button ------------------------------------------
   Two rules fought over this button and both were wrong for it:

     * Blocksy pins it with `top: calc(var(--theme-form-field-height, 40px)/2 - 7px)`
       under `form:is(.login, .register, .edit-account, ...) [class*="password-input"]`,
       which only lands centred while the field is exactly 40px. The account
       form's inputs are ~55px.
     * theme.css:2620 styles *every* button in .woocommerce-MyAccount-content as
       a green pill — `padding: 0 20px !important` — and this is a <button>, so
       it inflated to a 40px-wide, 46px-tall pill.

   Net effect: the icon sat 16px below the field's centre and overhung its
   bottom edge. Blocksy's selector outranks a plain three-class one, and the
   padding is !important, so the reset has to be both more specific and
   important. Paint the mask muted by default and green on interaction — it is
   a utility control, not a call to action. */

.woocommerce-account .woocommerce-MyAccount-content form .password-input {
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-content form .password-input .show-password-input {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    inset-inline-end: 14px !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    /* theme.css paints the pill with a gradient background-image, which the
       mask then renders as the eye. Replace it with a flat colour. */
    background: var(--m3d-text-muted, #6b7280) !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    transition: background-color .18s ease;
}

/* The generic account-button hover applies `transform: translateY(-1px)`,
   which would drop the icon off centre on hover. */
.woocommerce-account .woocommerce-MyAccount-content form .password-input .show-password-input:hover,
.woocommerce-account .woocommerce-MyAccount-content form .password-input .show-password-input:focus-visible {
    transform: translateY(-50%) !important;
    background: var(--m3d-green, #007a0e) !important;
    filter: none !important;
}

/* --- 25b. Licence activation table ----------------------------------------
   Activation labels are unbroken 64-character hashes, which pushed the table's
   min-content width to ~979px inside a 754px card: the table escaped the card
   and the whole page scrolled sideways. `anywhere` rather than `break-word` is
   the load-bearing part — only `anywhere` lets the hash shrink min-content. */

/* Only the hash column may break. Applying `anywhere` to every cell squeezed
   the short columns until they broke mid-word too — "STATU/S", "Oth/er",
   "Del/ete" — so the rest stay on one line and the label absorbs the slack. */
.woocommerce-account .lmfwc-license-activations table td:first-child {
    overflow-wrap: anywhere;
}

.woocommerce-account .lmfwc-license-activations table th,
.woocommerce-account .lmfwc-license-activations table td:not(:first-child) {
    white-space: nowrap;
}

/* --- 25c. Saved items (wishlist) -------------------------------------------
   The markup here is ours (woocommerce/shopengine/wishlist.php), so this styles
   real classes rather than :nth-child guesses. Presented as a saved-items list
   in the same language as the rest of the shop.

   theme.css:2380 paints the header solid green with !important — a fair way to
   make a broken table visible, but a heavy slab beside the other account
   tables. Use the tinted header they all share. */

.woocommerce-account .woocommerce.ct-woo-account table.shopengine-wishlist thead {
    background: transparent !important;
}

.woocommerce-account table.shopengine-wishlist {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.woocommerce-account .woocommerce.ct-woo-account table.shopengine-wishlist thead th {
    background: linear-gradient(135deg, rgba(5, 150, 105, .10) 0%, rgba(13, 148, 136, .06) 100%) !important;
    color: var(--m3d-text) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0 !important;
}

.woocommerce-account table.shopengine-wishlist td {
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .07) !important;
    transition: background .16s ease;
}

.woocommerce-account table.shopengine-wishlist tbody tr:last-child td {
    border-bottom: 0 !important;
}

.woocommerce-account table.shopengine-wishlist tbody tr:hover td {
    background: rgba(5, 150, 105, .035);
}

/* Thumbnail and title share a line. The cell stays a table-cell — making it a
   flex container would drop it out of the table layout and break the columns. */
.woocommerce-account table.shopengine-wishlist .m3d-wl-thumb {
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 16px;
}

.woocommerce-account table.shopengine-wishlist .m3d-wl-thumb img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 14px;
    /* Inset ring rather than a border, so it never adds to the layout box. */
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08) inset,
                0 6px 16px rgba(15, 23, 42, .07);
}

.woocommerce-account table.shopengine-wishlist .m3d-wl-info {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 100px);
}

.woocommerce-account table.shopengine-wishlist .m3d-wl-cat {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--m3d-text-faint, #9ca3af);
}

/* Reads as text, behaves as a link on hover — the plugin's markup made every
   row look like a raw green link. */
.woocommerce-account table.shopengine-wishlist .m3d-wl-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--m3d-text);
    text-decoration: none;
    transition: color .16s ease;
}

.woocommerce-account table.shopengine-wishlist .m3d-wl-name:hover,
.woocommerce-account table.shopengine-wishlist .m3d-wl-name:focus-visible {
    color: var(--m3d-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-account table.shopengine-wishlist .m3d-wl-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--m3d-text);
    white-space: nowrap;
}

/* Sale rows carry <del> and <ins>; let the superseded price recede. */
.woocommerce-account table.shopengine-wishlist .m3d-wl-price del {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--m3d-text-faint, #9ca3af);
}

.woocommerce-account table.shopengine-wishlist .m3d-wl-price ins {
    background: none;
    color: var(--m3d-green);
    text-decoration: none;
}

/* Availability. The template resolves the stock slug to a real label, so this
   can be a status pill instead of the raw "outofstock" the plugin printed. */
.woocommerce-account .m3d-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.woocommerce-account .m3d-stock::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.woocommerce-account .m3d-stock--in {
    color: #046c3b;
    background: rgba(5, 150, 105, .12);
}

.woocommerce-account .m3d-stock--back {
    color: #92400e;
    background: rgba(217, 119, 6, .14);
}

.woocommerce-account .m3d-stock--out {
    color: #9f1239;
    background: rgba(200, 30, 30, .10);
}

/* Remove. theme.css:2620 styles every button inside .woocommerce-MyAccount-content
   as a green pill with `padding: 0 20px !important`, so this needs !important to
   stay a compact icon button. */
.woocommerce-account .woocommerce-MyAccount-content table.shopengine-wishlist .remove-from-wishlist {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 23, 42, .10) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--m3d-text-muted, #6b7280) !important;
    box-shadow: none !important;
    /* The button is empty; the glyph is drawn below so it is always centred. */
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.woocommerce-account .woocommerce-MyAccount-content table.shopengine-wishlist .remove-from-wishlist::before {
    content: "\00d7";
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.woocommerce-account .woocommerce-MyAccount-content table.shopengine-wishlist .remove-from-wishlist:hover,
.woocommerce-account .woocommerce-MyAccount-content table.shopengine-wishlist .remove-from-wishlist:focus-visible {
    border-color: var(--m3d-danger, #c81e1e) !important;
    background: var(--m3d-danger, #c81e1e) !important;
    color: #ffffff !important;
    transform: none !important;
    filter: none !important;
}

/* Empty state — the list used to render as a bare header row with no body. */
.woocommerce-account .m3d-wishlist-empty {
    padding: 44px 24px;
    text-align: center;
}

.woocommerce-account .m3d-wishlist-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(5, 150, 105, .10);
    color: var(--m3d-green);
}

.woocommerce-account .m3d-wishlist-empty-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--m3d-text);
}

.woocommerce-account .m3d-wishlist-empty-text {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--m3d-text-muted, #6b7280);
}

.woocommerce-account .woocommerce-MyAccount-content .m3d-wishlist-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--m3d-green) 0%, #0f766e 100%);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

/* Phone: stack each row as a card. Thumbnail and title on the first line,
   price and availability beneath, remove pinned to the top-right corner. */
@media (max-width: 782px) {
    .woocommerce-account table.shopengine-wishlist,
    .woocommerce-account table.shopengine-wishlist tbody {
        display: block;
        width: 100%;
    }

    .woocommerce-account table.shopengine-wishlist thead {
        display: none;
    }

    .woocommerce-account table.shopengine-wishlist tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        padding: 16px 58px 16px 14px;
        border-bottom: 1px solid rgba(15, 23, 42, .07);
    }

    .woocommerce-account table.shopengine-wishlist tr:last-child {
        border-bottom: 0;
    }

    .woocommerce-account table.shopengine-wishlist td {
        display: block;
        width: auto;
        padding: 0 !important;
        border: 0 !important;
    }

    /* The table is display:block here, so there is no column layout left to
       protect — the cell can be a flex row and put the title beside the image. */
    .woocommerce-account table.shopengine-wishlist .m3d-wl-product {
        flex: 1 1 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-thumb {
        flex: 0 0 auto;
        margin-inline-end: 0;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-thumb img {
        width: 64px;
        height: 64px;
        border-radius: 12px;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-info {
        display: block;
        min-width: 0;
        max-width: none;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-name {
        font-size: 14px;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-price {
        font-size: 14px;
    }

    /* Inline on the phone, where both prices share one line. */
    .woocommerce-account table.shopengine-wishlist .m3d-wl-price del {
        display: inline;
        margin-inline-end: 6px;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-price,
    .woocommerce-account table.shopengine-wishlist .m3d-wl-stock {
        flex: 0 0 auto;
    }

    .woocommerce-account table.shopengine-wishlist .m3d-wl-action {
        position: absolute;
        top: 14px;
        inset-inline-end: 14px;
    }
}

/* ============================================================================
   27. MY ACCOUNT — sidebar
   Blocksy draws the nav icons from its 'woo' icon font, one glyph per endpoint
   class, and falls back to a generic document glyph (\e902) for anything it
   does not know. It knows dashboard, orders, downloads, edit-address,
   edit-account and customer-logout — and looks for the wishlist under
   `ct-wish-list`, which is not the class ShopEngine produces. So License keys,
   Payment methods and Wishlist all rendered the *same* meaningless document
   icon. Give those three real icons, and tidy the list around them.
   ========================================================================= */

/* One panel, not two. theme.css styles .woocommerce-MyAccount-navigation as the
   card, but Blocksy wraps that in .ct-acount-nav together with the avatar block
   — so the welcome header sat outside the card with the menu in a second card
   below it. Promote the wrapper to the card and flatten the inner nav. If the
   wrapper is absent (Blocksy account customisations off) theme.css's own
   styling still applies untouched. */
.woocommerce-account .ct-acount-nav {
    position: sticky;
    top: 108px;
    align-self: start;
    padding: 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fbfcfc 0%, #f5f8f7 100%);
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
    /* Blocksy sets overflow:hidden, which would clip the sticky positioning. */
    overflow: visible;
}

.woocommerce-account .ct-acount-nav .woocommerce-MyAccount-navigation {
    position: static;
    top: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Below 1024px the account layout stacks, so the nav sits above the content
   rather than beside it — sticking it to the viewport then pins a 690px panel
   over the page as you scroll. theme.css already cancels this, but it targets
   .woocommerce-MyAccount-navigation, and the sticky now lives on Blocksy's
   .ct-acount-nav wrapper, so that override no longer reaches it. */
@media (max-width: 1024px) {
    .woocommerce-account .ct-acount-nav {
        position: static;
        top: auto;
    }
}

/* --- 27b. Phone: the menu becomes a chip strip ----------------------------
   Stacked, the nine-item list is a ~690px wall standing between the visitor
   and their own account — on a 844px screen you land on nothing but
   navigation. Lay it out as one horizontally scrolling row of chips instead,
   which drops it to about the height of a single button. */
@media (max-width: 782px) {
    .woocommerce-account .ct-acount-nav {
        padding: 12px 0 12px 14px;
    }

    .woocommerce-account .ct-acount-nav .ct-account-welcome {
        padding: 2px 14px 12px 0;
        margin-bottom: 10px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        /* Room for the active chip's shadow, and so the last chip clears the
           card edge. */
        padding: 6px 14px 6px 0;
        margin: -6px 0;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Fade the trailing edge instead of guillotining a chip — it reads as
           "there is more this way" rather than as a clipping bug. */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    /* theme.css:2783 stacks the account list on phones with
       `width: 100% !important`, which stretched each chip across the whole
       strip. Same specificity, later in the cascade, so !important wins. */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li + li {
        flex: 0 0 auto;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        scroll-snap-align: start;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        min-height: 42px;
        padding: 0 15px;
        border: 1px solid rgba(15, 23, 42, .09);
        border-radius: 999px;
        background: #ffffff;
        font-size: 13.5px;
        white-space: nowrap;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
        transform: none;
    }

    /* Everywhere else on the site the "current / primary" state is the green
       gradient pill — Browse shop, Add to cart, Save changes. Match it, so the
       section you are in reads the same way as every other active control. */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:hover {
        background: linear-gradient(135deg, var(--m3d-green) 0%, #0f766e 100%) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        font-weight: 700;
        box-shadow: 0 8px 18px rgba(5, 150, 105, .26);
    }

    /* Both icon systems follow the text colour — the woo font through `color`,
       our masked SVGs through `background-color: currentColor` — so the icon
       turns white with the label and needs nothing of its own. */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before {
        opacity: 1;
    }

    /* The accent bar reads as a left edge marker on a list row; on a pill it
       just clips the label. */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after {
        display: none;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
        width: 16px;
        height: 16px;
        margin-inline-end: 8px;
    }

    /* Log out was separated by a rule above it — meaningless in a row. */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0 !important;
        padding-top: 0;
        border-top: 0;
        margin-inline-start: 6px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        border-style: dashed;
        border-color: rgba(200, 30, 30, .28);
        color: var(--m3d-text-muted, #6b7280);
    }

    /* Welcome block: name as the heading it is, with the two shortcuts sized
       down to a mono eyebrow so they read as meta, not as menu items. */
    .woocommerce-account .ct-acount-nav .ct-account-user-box {
        font-size: 16px;
    }

    .woocommerce-account .ct-acount-nav .ct-account-user-box span {
        margin-top: 3px;
        font-family: var(--m3d-mono);
        font-size: 10.5px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}

/* Blocksy underlines every item; that was designed for a flush list, but the
   child theme spaces the items into rounded pills, so the rules read as stray
   dashes floating between them. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li:not(:last-child) a {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    position: relative;
    gap: 0;
    font-size: 14.5px;
}

/* The active item was a tint alone. Add an accent bar so the current section is
   obvious at a glance rather than by shade. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::after {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    top: 50%;
    width: 3px;
    height: 20px;
    border-radius: 999px;
    background: var(--m3d-green);
    transform: translateY(-50%);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    font-weight: 700;
}

/* Icons: size and colour the glyph consistently whether it comes from the woo
   font or from one of the masked replacements below. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 13px;
    opacity: .85;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before {
    opacity: 1;
}

/* The three endpoints Blocksy has no glyph for. Drawn as masked SVG in the same
   line style as the rest of the site's icons, painted with currentColor so they
   pick up the hover and active states for free. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--view-license-keys a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a::before,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist a::before {
    content: "";
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 19px 19px;
    mask-size: 19px 19px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--view-license-keys 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2'/%3E%3Cpath d='m17 6 3 3'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2'/%3E%3Cpath d='m17 6 3 3'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist 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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.2l7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21.2l7.8-7.7 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

/* Log out is a different kind of action from the rest of the list. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--m3d-text-muted, #6b7280);
    font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--m3d-danger, #c81e1e);
    background: rgba(200, 30, 30, .07);
}

/* Welcome block: avatar, display name, and the Account / Log out shortcuts. */
.woocommerce-account .ct-acount-nav .ct-account-welcome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* Pin the avatar's footprint so a slow or missing image cannot squeeze the
   name column and break the display name mid-word. */
.woocommerce-account .ct-acount-nav .ct-account-welcome > span {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
}

.woocommerce-account .ct-acount-nav .ct-account-welcome img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .08);
}

.woocommerce-account .ct-acount-nav .ct-account-user-box {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--m3d-text);
}

.woocommerce-account .ct-acount-nav .ct-account-user-box span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
}

.woocommerce-account .ct-acount-nav .ct-account-user-box a {
    color: var(--m3d-text-muted, #6b7280);
    text-decoration: none;
}

.woocommerce-account .ct-acount-nav .ct-account-user-box a:hover {
    color: var(--m3d-green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-account .ct-acount-nav .ct-account-user-box i {
    margin: 0 5px;
    font-style: normal;
    color: var(--m3d-text-faint, #9ca3af);
}

/* ============================================================================
   31. MY ACCOUNT — orders and downloads on a phone
   ========================================================================= */

/* --- 31c. Downloads on desktop: give the columns sensible proportions ------
   The filename button is nowrap, so the Download column claimed whatever width
   it needed and starved the others — the product name was wrapping over five
   lines in a ~75px column while a third of the table sat empty beside the
   button. Fix the proportions and let the button wrap inside its own column. */
.woocommerce-account .woocommerce-table--order-downloads {
    table-layout: fixed;
}

.woocommerce-account .woocommerce-table--order-downloads .download-product {
    width: 34%;
}

.woocommerce-account .woocommerce-table--order-downloads .download-remaining {
    width: 18%;
}

.woocommerce-account .woocommerce-table--order-downloads .download-expires {
    width: 16%;
}

.woocommerce-account .woocommerce-table--order-downloads .download-file {
    width: 32%;
}

/* "DOWNLOADS REMAINING" was breaking mid-word into DOWNLOA / DS / REMAININ / G.
   Let the header wrap between words only. */
.woocommerce-account .woocommerce-table--order-downloads thead th {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Filenames are long and arbitrary. Breaking one across three lines inside a
   pill looks broken; the product name beside it already says what the file is,
   so truncate instead and keep the full name available on hover. */
/* Two clamped lines is the readable middle: one line truncates to
   "Boar_Jaw_…" which says nothing, and unclamped wrapping ran a filename over
   three lines inside a pill. */
.woocommerce-account .woocommerce-table--order-downloads td.download-file .button {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 782px) {
    /* --- 31a. Orders: the label was landing on the value's line -------------
       theme.css draws the row labels with `content: attr(data-title)` and
       `display: block`, but WooCommerce's own small-screen sheet floats
       `td::before` left. A float takes the element out of flow, so the block
       never applies and the value wrapped alongside it — "DATE7 August 2026",
       "TOTAL€49,90". Unfloat it and the label sits on its own line as intended. */
    .woocommerce-account .shop_table.shop_table_responsive.my_account_orders tbody th[data-title]::before,
    .woocommerce-account .shop_table.shop_table_responsive.my_account_orders td[data-title]::before,
    .woocommerce-account .woocommerce-table--order-downloads td[data-title]::before {
        float: none !important;
        display: block !important;
        width: auto !important;
    }

    /* --- 31b. Downloads: give it the card treatment orders already has ------
       The downloads table is `shop_table_responsive order_details`, not
       `my_account_orders`, so theme.css's phone cards never reached it. Its
       headers were still hidden, leaving three purchases running together as
       one undivided list of label/value rows with no boundary between them. */
    .woocommerce-account .woocommerce-table--order-downloads,
    .woocommerce-account .woocommerce-table--order-downloads tbody {
        display: block;
        table-layout: auto;
        width: 100%;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .woocommerce-account .woocommerce-table--order-downloads thead {
        display: none;
    }

    .woocommerce-account .woocommerce-table--order-downloads tbody tr {
        display: block;
        margin-bottom: 16px;
        padding: 14px 12px;
        border-radius: 20px;
        border: 1px solid rgba(15, 23, 42, .08);
        background: linear-gradient(180deg, #ffffff 0%, #fbfcfc 100%);
        box-shadow: 0 14px 34px rgba(15, 23, 42, .05);
    }

    .woocommerce-account .woocommerce-table--order-downloads tbody tr:last-child {
        margin-bottom: 0;
    }

    .woocommerce-account .woocommerce-table--order-downloads td {
        display: block;
        width: auto !important;
        padding: 10px 0 !important;
        border: none !important;
        text-align: left !important;
    }

    .woocommerce-account .woocommerce-table--order-downloads td[data-title]::before {
        content: attr(data-title);
        margin-bottom: 6px;
        color: var(--m3d-text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

}