/*
 * TTF Account (ttf-account.php; docs/superpowers/specs/2026-10-26-my-account-revamp-design.md): My Account in the
 * shop's look 1 (white, thin lines, the shop's red for actions), as the car bar, the garage panel and the filters.
 *   frame: the menu as a sidebar from 992 px (the customer, the items with icons, Log out set apart), the page beside
 *     it under its title; below 992 px no sidebar: Overview's tiles are the menu (rows with a chevron) and every other
 *     page opens with "‹ My account";
 *   orders: one card each (number, date, badge, total; thumbnails, names, the state line; the main button, buttons,
 *     links), the actions in a column on the right on desktop, under the card's body on phones;
 *   an order: head with its actions, the progress card, the parcel card, items beside the summary from 1,200 px,
 *     addresses, help;
 *   forms (addresses, account details, payment methods, sign-in): WooCommerce's markup, labels above, 44 px fields,
 *     a red submit.
 * Phones: everything below 768 px (the owner's phone is about 600 px wide); tap targets 44 px with 8 px between them.
 * ttf-page-zoom.php sizes every h1-h3 through --ttf-h1/--ttf-h2/--ttf-h3 with !important: our headings set them.
 * Class prefix ttf-acct.
 */

body.ttf-acct-on {
    --acct-red: #D81D33;
    --acct-red-dark: #B8162B;
    --acct-red-soft: #FFF0F2;
    --acct-ink: #212529;
    --acct-ink-2: #495057;
    --acct-muted: #6C757D;
    --acct-faint: #868E96;
    --acct-line: #E9ECEF;
    --acct-line-2: #DEE2E6;
    --acct-field: #CED4DA;
    --acct-bg: #F8F9FA;
    --acct-chip: #F1F3F5;
}

/* ---- Frame ---------------------------------------------------------------------------------------------------- */
.ttf-acct {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 0 0 3rem;
    color: var(--acct-ink);
    font-family: 'Krub', sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
}
.ttf-acct *,
.ttf-acct *::before,
.ttf-acct *::after { box-sizing: border-box; }
.ttf-acct-icon { flex: none; display: block; }

.ttf-acct__side {
    position: sticky;
    top: 1rem;
    flex: 0 0 16.5rem;
    max-width: 16.5rem;
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.ttf-acct__who {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--acct-line);
}
.ttf-acct__avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--acct-red-soft);
    color: var(--acct-red-dark);
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.ttf-acct__who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ttf-acct__who-text strong,
.ttf-acct__who-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttf-acct__who-text strong { font-weight: 700; }
.ttf-acct__who-text small { color: var(--acct-muted); font-size: .8125rem; }
.ttf-acct__nav ul { margin: 0; padding: .375rem; list-style: none; }
.ttf-acct__nav li { margin: 0; padding: 0; border: 0; }
.ttf-acct__nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    color: var(--acct-ink);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}
.ttf-acct__nav a .ttf-acct-icon { color: var(--acct-faint); }
.ttf-acct__nav a:hover { background: var(--acct-bg); color: var(--acct-ink); }
.ttf-acct__nav .is-active a { background: var(--acct-red-soft); color: var(--acct-red-dark); }
.ttf-acct__nav .is-active a .ttf-acct-icon { color: var(--acct-red); }
.ttf-acct__nav .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: .375rem;
    padding-top: .375rem;
    border-top: 1px solid var(--acct-line);
}
.ttf-acct__nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--acct-muted); font-weight: 500; }

.ttf-acct__main { flex: 1 1 auto; min-width: 0; }
.ttf-acct__head { margin: 0 0 1.25rem; }
.ttf-acct .ttf-acct__title {
    --ttf-h1: 1.75rem;
    margin: 0;
    color: var(--acct-ink);
    font-family: inherit;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    text-transform: none;
}
.ttf-acct__lead { margin: .375rem 0 0; color: var(--acct-muted); }
.ttf-acct__lead strong { color: var(--acct-ink-2); font-weight: 600; }
.ttf-acct__lead a,
.ttf-acct-sec__more { color: var(--acct-red); font-weight: 700; text-decoration: none; }
.ttf-acct__lead a:hover,
.ttf-acct-sec__more:hover { color: var(--acct-red-dark); text-decoration: underline; text-underline-offset: 3px; }
.ttf-acct__back {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 2.25rem;
    margin: 0 0 .25rem -.25rem;
    padding: .25rem;
    color: var(--acct-ink-2);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}
.ttf-acct__back:hover { color: var(--acct-red); }
.ttf-acct__back--home { display: none; }

/* Notices inside the page (WooCommerce's, e.g. "Confirm your email address", or "Address changed successfully"). */
.ttf-acct .woocommerce-info,
.ttf-acct .woocommerce-message,
.ttf-acct .woocommerce-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0 0 1.25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--acct-line);
    border-left: 4px solid #1D5FB4;
    border-radius: 10px;
    background: #fff;
    color: var(--acct-ink);
    font-size: .9375rem;
    list-style: none;
}
.ttf-acct .woocommerce-message { border-left-color: #1C7C3A; }
.ttf-acct .woocommerce-error { border-left-color: var(--acct-red); }
.ttf-acct .woocommerce-info::before,
.ttf-acct .woocommerce-message::before,
.ttf-acct .woocommerce-error::before { display: none; }
.ttf-acct .woocommerce-info .button,
.ttf-acct .woocommerce-message .button {
    order: 2;
    min-height: 2.5rem;
    margin: 0;
    padding: .5rem 1rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
    background: #fff;
    color: var(--acct-ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
}
.ttf-acct .woocommerce-info .button:hover,
.ttf-acct .woocommerce-message .button:hover { border-color: var(--acct-ink); background: #fff; color: var(--acct-ink); }

/* ---- Pieces --------------------------------------------------------------------------------------------------- */
.ttf-acct-card {
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fff;
    padding: 1.25rem;
}
.ttf-acct .ttf-acct-card__title,
.ttf-acct .ttf-acct-sec__title {
    --ttf-h2: 1.0625rem;
    margin: 0 0 .75rem;
    color: var(--acct-ink);
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.3;
    text-transform: none;
}
.ttf-acct-card__count { color: var(--acct-muted); font-weight: 600; }
.ttf-acct-sec { margin: 0 0 1.75rem; }
.ttf-acct-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.ttf-acct .ttf-acct-sec__title { margin: 0; }
.ttf-acct-sec__more { display: inline-flex; align-items: center; gap: .125rem; }

.ttf-acct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 2.5rem;
    margin: 0;
    padding: .5rem 1rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: var(--acct-ink);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ttf-acct-btn:hover,
.ttf-acct-btn:focus { border-color: var(--acct-ink); background: #fff; color: var(--acct-ink); }
.ttf-acct-btn--main { border-color: var(--acct-red); background: var(--acct-red); color: #fff; }
.ttf-acct-btn--main:hover,
.ttf-acct-btn--main:focus { border-color: var(--acct-red-dark); background: var(--acct-red-dark); color: #fff; }
.ttf-acct-btn .ttf-acct-icon { width: 16px; height: 16px; }
.ttf-acct-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--acct-ink);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-color: var(--acct-field);
    text-underline-offset: 3px;
}
.ttf-acct-link:hover { color: var(--acct-red); text-decoration-color: currentColor; }
.ttf-acct-link .ttf-acct-icon { color: var(--acct-muted); }
.ttf-acct a:focus-visible,
.ttf-acct button:focus-visible,
.ttf-acct input:focus-visible,
.ttf-acct select:focus-visible { outline: 2px solid var(--acct-red); outline-offset: 2px; }

.ttf-acct-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 1.625rem;
    padding: 0 .625rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.ttf-acct-badge::before { content: ''; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }
.ttf-acct-badge--ok { background: #E7F5EC; color: #1C7C3A; }
.ttf-acct-badge--info { background: #E8F1FD; color: #1D5FB4; }
.ttf-acct-badge--wait { background: #FFF4E0; color: #965A00; }
.ttf-acct-badge--bad { background: #FDECEE; color: var(--acct-red-dark); }
.ttf-acct-badge--off { background: var(--acct-chip); color: var(--acct-ink-2); }

.ttf-acct-thumb {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--acct-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.ttf-acct-thumb img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.ttf-acct-thumb--more { background: var(--acct-chip); color: var(--acct-ink-2); font-size: .875rem; font-weight: 700; }

/* ---- Overview ------------------------------------------------------------------------------------------------- */
.ttf-acct__head--hello { margin-bottom: 1.5rem; }
.ttf-acct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ttf-acct-tile {
    display: flex;
    align-items: center;
    gap: .875rem;
    min-height: 4.5rem;
    padding: .875rem 1rem;
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fff;
    color: var(--acct-ink);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ttf-acct-tile:hover { border-color: var(--acct-line-2); box-shadow: 0 4px 14px rgba(33, 37, 41, .07); color: var(--acct-ink); }
.ttf-acct-tile__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--acct-chip);
    color: var(--acct-ink);
}
.ttf-acct-tile__icon--photo { overflow: hidden; }
.ttf-acct-tile__icon--photo img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.ttf-acct-tile__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.35; }
.ttf-acct-tile__text strong { font-weight: 700; }
.ttf-acct-tile__text small { overflow: hidden; color: var(--acct-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.ttf-acct-tile__go { flex: none; color: var(--acct-faint); }
.ttf-acct-tile--customer-logout { display: none; }

/* ---- Orders --------------------------------------------------------------------------------------------------- */
.ttf-acct-orders__count { margin: -.75rem 0 1rem; color: var(--acct-muted); }
.ttf-acct-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "body acts";
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.ttf-acct-order + .ttf-acct-order { margin-top: .875rem; }
.ttf-acct-order__head {
    grid-area: head;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1.125rem;
    border-bottom: 1px solid var(--acct-line);
    background: var(--acct-bg);
}
.ttf-acct-order__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .75rem; min-width: 0; }
.ttf-acct-order__number { color: var(--acct-ink); font-size: 1rem; font-weight: 800; text-decoration: none; }
.ttf-acct-order__number:hover { color: var(--acct-red); text-decoration: underline; text-underline-offset: 3px; }
.ttf-acct-order__date { color: var(--acct-muted); font-size: .875rem; }
.ttf-acct-order__sum { display: flex; align-items: center; gap: .75rem; }
.ttf-acct-order__total { font-weight: 800; white-space: nowrap; }
.ttf-acct-order__body { grid-area: body; display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1rem 1.125rem; }
.ttf-acct-order__thumbs { flex: none; display: flex; gap: .375rem; text-decoration: none; }
.ttf-acct-order__what { flex: 1 1 auto; min-width: 0; }
.ttf-acct-order__what p { margin: 0; }
.ttf-acct-order__name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ttf-acct-order__count { color: var(--acct-muted); font-size: .875rem; }
.ttf-acct .ttf-acct-order__state { margin-top: .375rem; font-size: .875rem; font-weight: 700; }
.ttf-acct-order__state--ok { color: #1C7C3A; }
.ttf-acct-order__state--info { color: #1D5FB4; }
.ttf-acct-order__state--wait { color: #965A00; }
.ttf-acct-order__state--bad { color: var(--acct-red-dark); }
.ttf-acct-order__state--off { color: var(--acct-ink-2); }
.ttf-acct-order__extra { font-size: .875rem; }
.ttf-acct-order__extra span { color: var(--acct-muted); }
.ttf-acct-order > .ttf-acct-acts { grid-area: acts; align-self: center; width: 13.5rem; padding: 1rem 1.125rem 1rem 0; }
.ttf-acct-acts__row { display: flex; flex-direction: column; gap: .5rem; }
.ttf-acct-acts__links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .625rem; }
.ttf-acct-acts__links .ttf-acct-link { min-height: 1.75rem; }
.ttf-acct-order .ttf-acct-acts__row:only-child { margin: 0; }

.ttf-acct-pages { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0; }
.ttf-acct-pages__at { color: var(--acct-muted); font-size: .875rem; }
.ttf-acct-pages__prev,
.ttf-acct-pages__next { min-width: 7.5rem; }
.ttf-acct-pages > :only-child,
.ttf-acct-pages__at:first-child { margin-right: auto; }

.ttf-acct-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1.25rem; text-align: center; }
.ttf-acct-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .25rem;
    border-radius: 50%;
    background: var(--acct-chip);
    color: var(--acct-ink-2);
}
.ttf-acct .ttf-acct-empty .ttf-acct-card__title { margin: 0; }
.ttf-acct-empty p { max-width: 26rem; margin: 0 0 .75rem; color: var(--acct-muted); }

/* ---- An order ------------------------------------------------------------------------------------------------- */
.ttf-acct-view__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; }
.ttf-acct-view__head .ttf-acct-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.ttf-acct-view__head .ttf-acct-acts__row { flex-direction: row; flex-wrap: wrap; }
.ttf-acct-view__head .ttf-acct-acts__links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin: 0; }
/* The withdrawal form, Art. 11a CRD: an outlined button on the order's page, never small print. */
.ttf-acct-view__head .ttf-acct-acts__links .ttf-withdraw {
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
    text-decoration: none;
}
.ttf-acct-view__head .ttf-acct-acts__links .ttf-withdraw:hover { border-color: var(--acct-ink); color: var(--acct-ink); }
.ttf-acct-view > * + * { margin-top: 1rem; }
.ttf-acct-view > .ttf-acct__head { margin-bottom: 1.5rem; }

.ttf-acct-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ttf-acct-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: 0; padding: 0 .5rem; text-align: center; }
.ttf-acct-step::before {
    content: '';
    position: absolute;
    top: .9375rem;
    right: 50%;
    left: -50%;
    height: 3px;
    background: var(--acct-line-2);
}
.ttf-acct-step:first-child::before { display: none; }
.ttf-acct-step--done::before,
.ttf-acct-step--now::before { background: #1C7C3A; }
.ttf-acct-step__dot {
    position: relative;
    z-index: 1; /* above the next step's line, which starts at this step's centre */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--acct-line-2);
    border-radius: 50%;
    background: #fff;
    color: #fff;
}
.ttf-acct-step--done .ttf-acct-step__dot { border-color: #1C7C3A; background: #1C7C3A; }
.ttf-acct-step--now .ttf-acct-step__dot { border-color: #1D5FB4; box-shadow: 0 0 0 4px #E8F1FD; }
.ttf-acct-step--now .ttf-acct-step__dot::after { content: ''; width: .625rem; height: .625rem; border-radius: 50%; background: #1D5FB4; }
.ttf-acct-step__label { font-weight: 700; }
.ttf-acct-step--next .ttf-acct-step__label { color: var(--acct-muted); font-weight: 600; }
.ttf-acct-step__date { color: var(--acct-muted); font-size: .8125rem; }
.ttf-acct .ttf-acct-steps__now { margin: 1rem 0 0; padding-top: .875rem; border-top: 1px solid var(--acct-line); font-weight: 700; text-align: center; }
.ttf-acct-view__state { margin: 0; font-weight: 700; }

.ttf-acct-notes ol { margin: 0; padding: 0; list-style: none; }
.ttf-acct-notes li + li { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--acct-line); }
.ttf-acct-notes time { display: block; color: var(--acct-muted); font-size: .8125rem; }
.ttf-acct-notes p { margin: .25rem 0 0; }

.ttf-acct-parcels__list { margin: 0; padding: 0; list-style: none; }
.ttf-acct-parcel { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0; }
.ttf-acct-parcel + .ttf-acct-parcel { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--acct-line); }
.ttf-acct-parcel__logo { flex: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--acct-line); border-radius: 8px; object-fit: contain; }
.ttf-acct-parcel__what { display: flex; flex: 1 1 14rem; flex-direction: column; min-width: 0; line-height: 1.4; }
.ttf-acct-parcel__what strong { font-weight: 700; }
.ttf-acct-parcel__what > span { color: var(--acct-muted); font-size: .875rem; }
.ttf-acct-parcel__no { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.ttf-acct-parcel__no code {
    padding: 0;
    background: none;
    color: var(--acct-ink);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.ttf-acct .ttf-acct-copy {
    min-height: 1.875rem;
    margin: 0;
    padding: .125rem .625rem;
    border: 1px solid var(--acct-field);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--acct-ink-2);
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.ttf-acct .ttf-acct-copy:hover { border-color: var(--acct-ink); background: #fff; color: var(--acct-ink); }

.ttf-acct-od__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.ttf-acct-od__list { margin: 0; padding: 0; list-style: none; }
.ttf-acct-item { display: flex; align-items: flex-start; gap: .875rem; margin: 0; padding: .875rem 0; border-top: 1px solid var(--acct-line); }
.ttf-acct-item:first-child { padding-top: 0; border-top: 0; }
.ttf-acct-item:last-child { padding-bottom: 0; }
.ttf-acct-item__img { flex: none; }
.ttf-acct-item__img a,
.ttf-acct-item__img > img { display: inline-flex; }
.ttf-acct-item__img img {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    border: 1px solid var(--acct-line);
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}
.ttf-acct-item__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: .125rem; min-width: 0; }
.ttf-acct-item__name { font-weight: 600; line-height: 1.4; }
.ttf-acct-item__name a { color: var(--acct-ink); text-decoration: none; }
.ttf-acct-item__name a:hover { color: var(--acct-red); text-decoration: underline; text-underline-offset: 3px; }
.ttf-acct-item__sku,
.ttf-acct-item__qty { color: var(--acct-muted); font-size: .8125rem; }
.ttf-acct-item__qty .product-quantity { color: var(--acct-ink-2); font-weight: 700; }
.ttf-acct-item .wc-item-meta { margin: .125rem 0 0; padding: 0; list-style: none; color: var(--acct-muted); font-size: .8125rem; }
.ttf-acct-item .wc-item-meta li { margin: 0; }
.ttf-acct-item .wc-item-meta p { display: inline; margin: 0; }
.ttf-acct-item__total { flex: none; font-weight: 700; text-align: right; white-space: nowrap; }
.ttf-acct-item__note { padding: .5rem .75rem; border-radius: 8px; background: var(--acct-bg); font-size: .875rem; list-style: none; }

.ttf-acct-totals { margin: 0; }
.ttf-acct-totals__row { display: flex; justify-content: space-between; gap: 1rem; padding: .4375rem 0; }
.ttf-acct-totals__row + .ttf-acct-totals__row { border-top: 1px solid var(--acct-line); }
.ttf-acct-totals dt { color: var(--acct-ink-2); font-weight: 500; }
.ttf-acct-totals dd { margin: 0; font-weight: 600; text-align: right; }
.ttf-acct-totals dd small,
.ttf-acct-totals dd .includes_tax,
.ttf-acct-totals dd .shipped_via { display: block; color: var(--acct-muted); font-size: .8125rem; font-weight: 500; }
.ttf-acct ins { background: none; text-decoration: none; }
.ttf-acct del { color: var(--acct-faint); font-weight: 500; }
.ttf-acct-totals__row--order_total { padding-top: .75rem; }
.ttf-acct-totals__row--order_total dt,
.ttf-acct-totals__row--order_total dd { color: var(--acct-ink); font-size: 1.0625rem; font-weight: 800; }
.ttf-acct-od__note { margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--acct-line); }
.ttf-acct .ttf-acct-od__note h3 { --ttf-h3: .875rem; margin: 0 0 .25rem; font-family: inherit; font-size: .875rem; font-weight: 700; text-transform: none; }
.ttf-acct-od__note p { margin: 0; color: var(--acct-ink-2); }

/* What other plugins print after the table: Order again (WooCommerce), the fitment guarantee (ttf-fitment-guarantee). */
.ttf-acct-od .order-again { margin: 1rem 0 0; }
.ttf-acct-od .order-again .button {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
    background: #fff;
    color: var(--acct-ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
}
.ttf-acct-od .order-again .button:hover { border-color: var(--acct-ink); background: #fff; color: var(--acct-ink); }
.ttf-acct-od .ttf-fitment-guarantee-order {
    margin: 1rem 0 0 !important; /* its own inline margin-bottom */
    padding: 1rem 1.25rem;
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fff;
}
.ttf-acct .ttf-fitment-guarantee-order h2 { --ttf-h2: 1.0625rem; margin: 0 0 .375rem; font-size: 1.0625rem; font-weight: 800; text-transform: none; }
.ttf-acct .ttf-fitment-guarantee-order p { margin: 0 0 .25rem; }

.ttf-acct-addrs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ttf-acct-addr address { margin: 0; color: var(--acct-ink-2); font-style: normal; line-height: 1.6; }
.ttf-acct-addr address p { margin: .25rem 0 0; }
.ttf-acct-addrs .woocommerce-customer-details--phone,
.ttf-acct-addrs .woocommerce-customer-details--email { margin: .25rem 0 0; }
.ttf-acct-addr__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .75rem; }
.ttf-acct .ttf-acct-addr__head .ttf-acct-card__title { margin: 0; }
.ttf-acct-addr__empty { color: var(--acct-muted); }
.ttf-acct-addr__intro { margin: -.75rem 0 1rem; }

.ttf-acct-help { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.ttf-acct-help__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--acct-chip);
    color: var(--acct-ink);
}
.ttf-acct-help__text { flex: 1 1 14rem; min-width: 0; }
.ttf-acct .ttf-acct-help .ttf-acct-card__title { margin: 0; }
.ttf-acct-help__text p { margin: .125rem 0 0; color: var(--acct-muted); font-size: .875rem; }
.ttf-acct-help__links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Forms: account details, an address, payment methods ------------------------------------------------------ */
/* An address form's own title repeats the page's (ttf_account_head prints it as the h1). */
.ttf-acct__main > form > h2:first-child { display: none; }
.ttf-acct .woocommerce-EditAccountForm,
.ttf-acct .woocommerce-address-fields,
.ttf-acct #add_payment_method {
    max-width: 44rem;
    padding: 1.5rem;
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    background: #fff;
}
.ttf-acct .woocommerce-address-fields__field-wrapper,
.ttf-acct .woocommerce-EditAccountForm { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.ttf-acct .woocommerce-EditAccountForm > *,
.ttf-acct .woocommerce-address-fields__field-wrapper > * { flex: 1 1 100%; }
.ttf-acct .woocommerce-EditAccountForm .clear { display: none; }
.ttf-acct .form-row {
    float: none;
    width: auto;
    margin: 0 0 1rem;
    padding: 0;
}
.ttf-acct .woocommerce-EditAccountForm > .form-row-first,
.ttf-acct .woocommerce-EditAccountForm > .form-row-last,
.ttf-acct .woocommerce-address-fields__field-wrapper > .form-row-first,
.ttf-acct .woocommerce-address-fields__field-wrapper > .form-row-last { flex: 1 1 calc(50% - .5rem); }
.ttf-acct .form-row label {
    display: block;
    margin: 0 0 .375rem;
    color: var(--acct-ink);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
}
/* A checkbox keeps its label beside it (e.g. WooPayments' "Save payment information" on Add payment method). */
.ttf-acct .form-row input[type="checkbox"] + label,
.ttf-acct .form-row label.woocommerce-form__label-for-checkbox,
.ttf-acct .form-row label.checkbox { display: inline; margin: 0 0 0 .375rem; font-weight: 500; }
.ttf-acct .form-row .required { color: var(--acct-red); text-decoration: none; }
.ttf-acct .form-row .optional { color: var(--acct-faint); font-weight: 500; }
.ttf-acct .form-row input.input-text,
.ttf-acct .form-row textarea,
.ttf-acct .form-row select,
.ttf-acct .woocommerce-EditAccountForm select {
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: .5rem .875rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
    background-color: #fff;
    box-shadow: none;
    color: var(--acct-ink);
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.4;
}
.ttf-acct .form-row input.input-text:focus,
.ttf-acct .form-row textarea:focus,
.ttf-acct .form-row select:focus { border-color: var(--acct-ink); outline: none; box-shadow: 0 0 0 3px rgba(216, 29, 51, .15); }
.ttf-acct .form-row .select2-container .select2-selection--single {
    height: 2.75rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
}
.ttf-acct .form-row .select2-container .select2-selection--single .select2-selection__rendered { padding-left: .875rem; color: var(--acct-ink); line-height: 2.625rem; }
.ttf-acct .form-row .select2-container .select2-selection--single .select2-selection__arrow { top: 0; height: 2.625rem; }
.ttf-acct .woocommerce-EditAccountForm fieldset {
    flex: 1 1 100%;
    margin: .5rem 0 1rem;
    padding: 1.25rem 1.25rem .25rem;
    border: 1px solid var(--acct-line);
    border-radius: 10px;
    background: var(--acct-bg);
}
.ttf-acct .woocommerce-EditAccountForm legend {
    float: left;
    width: 100%;
    margin: 0 0 .875rem;
    padding: 0;
    color: var(--acct-ink);
    font-size: 1rem;
    font-weight: 800;
}
.ttf-acct .woocommerce-EditAccountForm legend + * { clear: left; }
.ttf-acct #account_display_name_description,
.ttf-acct .woocommerce-EditAccountForm .description,
.ttf-acct .woocommerce-EditAccountForm em { display: block; margin-top: .375rem; color: var(--acct-muted); font-size: .8125rem; font-style: normal; }
.ttf-acct .woocommerce-EditAccountForm button[type="submit"],
.ttf-acct .woocommerce-address-fields button[type="submit"],
.ttf-acct #add_payment_method #place_order,
.ttf-acct .woocommerce-MyAccount-content > .button,
.ttf-acct .woocommerce-PaymentMethods ~ .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin: .25rem 0 0;
    padding: .625rem 1.5rem;
    border: 0;
    border-radius: 8px;
    background: var(--acct-red);
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.ttf-acct .woocommerce-EditAccountForm button[type="submit"]:hover,
.ttf-acct .woocommerce-address-fields button[type="submit"]:hover,
.ttf-acct #add_payment_method #place_order:hover,
.ttf-acct .woocommerce-MyAccount-content > .button:hover { background: var(--acct-red-dark); color: #fff; }
.ttf-acct .show-password-input { top: 50%; transform: translateY(-50%); }

/* Payment methods: WooCommerce's table as a card, its actions as quiet buttons. */
.ttf-acct .woocommerce-MyAccount-paymentMethods {
    width: 100%;
    margin: 0 0 1.25rem;
    border: 1px solid var(--acct-line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
}
.ttf-acct .woocommerce-MyAccount-paymentMethods th,
.ttf-acct .woocommerce-MyAccount-paymentMethods td { padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--acct-line); text-align: left; vertical-align: middle; }
.ttf-acct .woocommerce-MyAccount-paymentMethods thead th { background: var(--acct-bg); color: var(--acct-ink-2); font-size: .8125rem; font-weight: 700; }
.ttf-acct .woocommerce-MyAccount-paymentMethods tr:last-child td { border-bottom: 0; }
.ttf-acct .woocommerce-MyAccount-paymentMethods .button {
    min-height: 2.25rem;
    margin: .125rem .25rem .125rem 0;
    padding: .375rem .875rem;
    border: 1.5px solid var(--acct-field);
    border-radius: 8px;
    background: #fff;
    color: var(--acct-ink);
    font-size: .8125rem;
    font-weight: 700;
}
.ttf-acct .woocommerce-MyAccount-paymentMethods .button:hover { border-color: var(--acct-ink); background: #fff; color: var(--acct-ink); }
.ttf-acct #add_payment_method .payment_methods { margin: 0 0 1rem; padding: 0; list-style: none; }

/* ---- The sign-in page (partdo's form-login.php, signed out: no frame) --------------------------------------------- */
body.ttf-acct-on .woocommerce-form-login .woocommerce-form-login__submit,
body.ttf-acct-on .woocommerce-form-register .woocommerce-form-register__submit,
body.ttf-acct-on .woocommerce-ResetPassword .woocommerce-Button {
    min-height: 2.75rem;
    border: 0;
    border-radius: 8px;
    background: var(--acct-red);
    color: #fff;
    font-weight: 700;
}
body.ttf-acct-on .woocommerce-form-login .woocommerce-form-login__submit:hover,
body.ttf-acct-on .woocommerce-form-register .woocommerce-form-register__submit:hover,
body.ttf-acct-on .woocommerce-ResetPassword .woocommerce-Button:hover { background: var(--acct-red-dark); color: #fff; }

/* ---- From 1,200 px: an order's items beside its summary ---------------------------------------------------------- */
@media (min-width: 1200px) {
    .ttf-acct-od__grid { grid-template-columns: minmax(0, 1fr) 19rem; }
}

/* ---- Below 1,200 px (the theme's tablet header): narrower sidebar ------------------------------------------------ */
@media (max-width: 1199.98px) {
    .ttf-acct { gap: 1.75rem; }
    .ttf-acct__side { flex-basis: 15rem; max-width: 15rem; }
}

/* ---- Below 992 px: no sidebar; Overview's tiles are the menu; "‹ My account" on every other page ----------------- */
@media (max-width: 991.98px) {
    .ttf-acct { display: block; padding-bottom: 2rem; }
    .ttf-acct__side { display: none; }
    .ttf-acct__back--home { display: inline-flex; }
    .ttf-acct-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        border: 1px solid var(--acct-line);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }
    .ttf-acct-tile { min-height: 3.75rem; border: 0; border-radius: 0; }
    .ttf-acct-tile + .ttf-acct-tile { border-top: 1px solid var(--acct-line); }
    .ttf-acct-tile:hover { box-shadow: none; background: var(--acct-bg); }
    .ttf-acct-tile--customer-logout { display: flex; }
    .ttf-acct-tile--customer-logout .ttf-acct-tile__icon { background: none; color: var(--acct-muted); }
    .ttf-acct-tile--customer-logout .ttf-acct-tile__text strong { color: var(--acct-muted); font-weight: 600; }
}

/* ---- Phones (below 768 px; the page is zoomed to 95 % there, so 48 px targets show as 46) ----------------------- */
@media (max-width: 767.98px) {
    .ttf-acct { font-size: .9375rem; }
    .ttf-acct .ttf-acct__title { --ttf-h1: 1.375rem; font-size: 1.375rem; }
    .ttf-acct__head { margin-bottom: 1rem; }
    /* A 48 px tap area for "‹ My account" / "‹ Orders" without pushing the title down. */
    .ttf-acct__back { min-height: 3rem; margin: -.625rem 0 -.375rem -.25rem; }
    .ttf-acct-btn { min-height: 3rem; }
    .ttf-acct .ttf-acct-copy { min-height: 3rem; padding: .25rem 1rem; }
    .ttf-acct-card { padding: 1rem; }

    .ttf-acct-order { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "acts"; }
    .ttf-acct-order__head { padding: .625rem .875rem; }
    .ttf-acct-order__id { flex-direction: column; gap: 0; }
    .ttf-acct-order__sum { flex-direction: column; align-items: flex-end; gap: .25rem; }
    .ttf-acct-order__body { align-items: flex-start; flex-direction: column; gap: .625rem; padding: .875rem .875rem .75rem; }
    .ttf-acct-order__what { width: 100%; }
    /* One product: its picture beside its name (browsers without :has() keep it above). */
    .ttf-acct-order__body:has(> .ttf-acct-order__thumbs > .ttf-acct-thumb:only-child) { flex-direction: row; gap: .875rem; }
    .ttf-acct-order__body:has(> .ttf-acct-order__thumbs > .ttf-acct-thumb:only-child) .ttf-acct-order__what { width: auto; }
    .ttf-acct-order__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ttf-acct-order > .ttf-acct-acts { width: auto; align-self: stretch; padding: 0 .875rem .875rem; }
    .ttf-acct-acts__row { flex-direction: row; gap: .5rem; }
    .ttf-acct-acts__row .ttf-acct-btn { flex: 1 1 0; min-width: 0; min-height: 3rem; padding-right: .5rem; padding-left: .5rem; }
    .ttf-acct-acts__links { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .5rem; }
    .ttf-acct-acts__links .ttf-acct-link { min-height: 3rem; }

    .ttf-acct-view__head .ttf-acct-acts { flex-direction: column; align-items: stretch; gap: .5rem; }
    .ttf-acct-view__head .ttf-acct-acts__row { flex-wrap: nowrap; }
    .ttf-acct-view__head .ttf-acct-acts__links { gap: .5rem 1.25rem; }
    .ttf-acct-view__head .ttf-acct-acts__links .ttf-withdraw { flex: 1 1 100%; justify-content: center; min-height: 3rem; }
    .ttf-acct-step { padding: 0 .25rem; }
    .ttf-acct-step__label { font-size: .875rem; }
    .ttf-acct-step__date { font-size: .75rem; }
    .ttf-acct-parcel .ttf-acct-btn { flex: 1 1 100%; min-height: 3rem; }
    .ttf-acct-item__img img { width: 3.75rem; height: 3.75rem; }
    .ttf-acct-addrs__grid { grid-template-columns: minmax(0, 1fr); }
    .ttf-acct-help__links { flex: 1 1 100%; }
    .ttf-acct-help__links .ttf-acct-btn { flex: 1 1 auto; min-height: 3rem; }
    .ttf-acct-pages .ttf-acct-btn { min-height: 3rem; }

    .ttf-acct .woocommerce-EditAccountForm,
    .ttf-acct .woocommerce-address-fields,
    .ttf-acct #add_payment_method { padding: 1rem; }
    .ttf-acct .woocommerce-EditAccountForm > .form-row-first,
    .ttf-acct .woocommerce-EditAccountForm > .form-row-last,
    .ttf-acct .woocommerce-address-fields__field-wrapper > .form-row-first,
    .ttf-acct .woocommerce-address-fields__field-wrapper > .form-row-last { flex-basis: 100%; }
    .ttf-acct .woocommerce-EditAccountForm button[type="submit"],
    .ttf-acct .woocommerce-address-fields button[type="submit"] { width: 100%; min-height: 3rem; }
    .ttf-acct .form-row input.input-text,
    .ttf-acct .form-row select,
    .ttf-acct .woocommerce-EditAccountForm select { min-height: 3rem; }
    .ttf-acct .form-row .select2-container .select2-selection--single { height: 3rem; }
    .ttf-acct .form-row .select2-container .select2-selection--single .select2-selection__rendered { line-height: 2.875rem; }
    .ttf-acct .form-row .select2-container .select2-selection--single .select2-selection__arrow { height: 2.875rem; }
    .ttf-acct .woocommerce-MyAccount-paymentMethods thead { display: none; }
    .ttf-acct .woocommerce-MyAccount-paymentMethods tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--acct-line); }
    .ttf-acct .woocommerce-MyAccount-paymentMethods tr:last-child { border-bottom: 0; }
    .ttf-acct .woocommerce-MyAccount-paymentMethods td { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 1rem; border: 0; }
    .ttf-acct .woocommerce-MyAccount-paymentMethods td::before { content: attr(data-title); color: var(--acct-muted); font-weight: 600; }
}