/* ── Shell: content only (the account menu now lives in the header „Mein Konto"
 *    dropdown — operator reopen pt.1 — so the space-hungry in-content sidebar is
 *    hidden and the content spans the full width). ──────────────────────────── */
.woocommerce-account .ct-acount-nav,
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none !important;
}
.woocommerce-account .woocommerce {
    display: block;
}
.woocommerce-MyAccount-content {
    min-width: 0;
    float: none;
    width: 100%;
    margin: 0;
}

.woocommerce-MyAccount-content a:not(.sd-btn) { color: var(--sd-link); }

.woocommerce-MyAccount-content .sd-help a:not([class]) { color: var(--sd-gold-dark); }

.woocommerce-account .sd-page-title { margin: 2px 0 4px; font-size: 1.5rem; }
.woocommerce-account .sd-page-intro { color: var(--sd-muted); margin: 0 0 18px; /* max-width: 62ch;*/ }

/* ── Cards ─────────────────────────────────────────────────────────────────
 * `.sd-card` itself is the global primitive (tokens.css); the endpoint wrapper
 * is aliased onto it here (no markup change needed). */
.woocommerce-MyAccount-content .tssd-account-endpoint {
    background: var(--sd-surface);
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-sm);
    padding: 18px 20px;
    margin: 0 0 18px;
}
.woocommerce-account .sd-card > h2,
.woocommerce-account .sd-card > h3 { margin-top: 0; }
.woocommerce-account .sd-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 0 -20px 14px;
    padding: 0 20px 10px;
    border-bottom: 1px solid var(--sd-line);
}

.woocommerce-account .sd-card__head h2,
.woocommerce-account .sd-card__head h3 {
    /* !important: the theme styles content headings with a higher-specificity rule
     * (auto side-margins + centered text + a short orange border under the word). */
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: var(--sd-fs-lg);
}

/* ── Grids ─────────────────────────────────────────────────────────────── */

.woocommerce-account .sd-grid { display: grid; gap: 16px; margin: 0 0 18px; }
.woocommerce-account .sd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce-account .sd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tssd-account-overview .sd-grid--2 { grid-template-columns: 1fr; }

.tssd-stat-tile {
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    padding: 14px 16px;
    text-align: center;
}
.tssd-stat-tile__value { font-size: 1.7rem; font-weight: 800; color: var(--sd-gold-dark); line-height: 1.1; display: block; }
.tssd-stat-tile__label { color: var(--sd-muted); font-size: var(--sd-fs-sm); margin-top: 2px; display: block; }

/* ── Definition / read-only list ───────────────────────────────────────── */
.woocommerce-account .sd-dl { margin: 0; }
.woocommerce-account .sd-dl div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--sd-line-soft); }
.woocommerce-account .sd-dl div:last-child { border-bottom: 0; }
.woocommerce-account .sd-dl dt { flex: 0 0 38%; color: var(--sd-muted); margin: 0; }
.woocommerce-account .sd-dl dd { margin: 0; font-weight: 600; }

.woocommerce-MyAccount-content table:not(.shop_table) {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
}
.woocommerce-MyAccount-content table:not(.shop_table) thead th {
    text-align: left;
    font-size: var(--sd-fs-xs);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--sd-muted);
    padding: 10px 12px;
    border-bottom: 2px solid var(--sd-line);
    background: var(--sd-surface-2);
}
.woocommerce-MyAccount-content table:not(.shop_table) tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--sd-line-soft);
    vertical-align: middle;
}

.woocommerce-account .sd-form__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ── Quick links (overview) ────────────────────────────────────────────── */
.tssd-quick-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.tssd-quick-link {
    display: block;
    text-align: center;
    padding: 12px 10px;
    border-radius: var(--sd-radius);
    border: 1px solid var(--sd-line);
    background: var(--sd-surface);
    box-shadow: var(--sd-shadow-sm);
    text-decoration: none;
    font-weight: 600;
}
.tssd-quick-link:hover { background: var(--sd-surface-2); }

/* ── Meine Sudoku table: inline delete form sits next to "Weiterspielen" ── */
.tssd-mysud__del { display: inline; margin: 0; }

.tssd-mysud-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.woocommerce-account .tssd-mysud.sd-table { font-size: .86rem; }
.woocommerce-account .tssd-mysud.sd-table thead th,
.woocommerce-account .tssd-mysud.sd-table tbody td { padding: 7px 8px; }
.woocommerce-account .tssd-mysud.sd-table thead th { white-space: normal; line-height: 1.15; }
.woocommerce-account .tssd-mysud .sd-btn--sm { padding: 5px 8px; font-size: var(--sd-fs-xs); }
/* Stack the two action buttons so the column stays narrow — both reachable
 * without horizontal scrolling, table fits the content column. */
.woocommerce-account .tssd-mysud .actions { white-space: normal; }
.woocommerce-account .tssd-mysud .tssd-mysud__continue,
.woocommerce-account .tssd-mysud .tssd-mysud__del .sd-btn { display: block; width: 100%; text-align: center; }
.woocommerce-account .tssd-mysud__del { display: block; margin: 6px 0 0; }
/* Keep the free-text note and date from widening the table; both may wrap so
 * the action column is never pushed off the content column. */
.woocommerce-account .tssd-mysud tbody td:nth-child(4) { max-width: 14ch; }
.woocommerce-account .tssd-mysud tbody td:nth-child(5) { max-width: 11ch; }
.tssd-mysud__notice--ok {
    border: 1px solid var(--sd-ok-line);
    background: var(--sd-ok-bg);
    border-left: 4px solid var(--sd-ok);
    border-radius: var(--sd-radius);
    padding: 10px 14px;
    margin: 0 0 14px;
}

/* ── Forms (endpoints + Woo edit-account share the look) ───────────────── */
.tssd-account-endpoint input[type="text"],
.tssd-account-endpoint input[type="email"],
.tssd-account-endpoint input[type="date"],
.tssd-account-endpoint input[type="password"],
.tssd-account-endpoint select,
.tssd-account-endpoint textarea,
.woocommerce-EditAccountForm input.input-text,
.woocommerce-EditAccountForm select,
.woocommerce-ResetPassword input.input-text {
    width: 100%;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    background: var(--sd-field-bg);
    color: var(--sd-text);
    font: inherit;
    padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s;
}
.tssd-account-endpoint input:focus,
.tssd-account-endpoint select:focus,
.tssd-account-endpoint textarea:focus,
.woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-EditAccountForm select:focus,
.woocommerce-ResetPassword input.input-text:focus {
    outline: none;
    border-color: var(--sd-gold);
    box-shadow: var(--sd-focus);
}
.woocommerce-account .woocommerce-EditAccountForm label { font-size: .88rem; font-weight: 600; }
.woocommerce-account .woocommerce-EditAccountForm .optional { color: var(--sd-muted); font-weight: 400; }
.woocommerce-account .woocommerce-EditAccountForm fieldset { border: 1px solid var(--sd-line); border-radius: var(--sd-radius); padding: 6px 16px 14px; margin: 8px 0 16px; }
.woocommerce-account .woocommerce-EditAccountForm legend { font-weight: 700; padding: 0 6px; }
.woocommerce-account .woocommerce-Button,
.woocommerce-account .tssd-player-profile__submit {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--sd-radius);
    border: 1px solid var(--sd-gold-line);
    background: var(--sd-gold);
    color: var(--sd-gold-ink);
    font-weight: var(--sd-btn-weight);
    cursor: pointer;
    text-decoration: none;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account .tssd-player-profile__submit:hover { background: var(--sd-gold-dark); color: var(--sd-gold-ink); }

.woocommerce-account .woocommerce-ResetPassword {
    max-width: 480px;
    background: var(--sd-surface-2);         /* = .tssd-auth box fill */
    border: 1px solid var(--sd-gold);        /* (1) gold border like Anmelden */
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-sm);
    padding: 18px 20px;
    margin: 0 0 18px;
    font-family: var(--sd-font);             /* (5) same typeface as Anmelden */
}

.woocommerce-account .woocommerce-ResetPassword .form-row-first,
.woocommerce-account .woocommerce-ResetPassword .form-row-last {
    float: none;
    width: 100%;
    margin: 0 0 12px;
}
/* (2) input corner = Anmelden (the small step, not the box radius) */
.woocommerce-account .woocommerce-ResetPassword input.input-text {
    border-radius: var(--sd-radius-sm);
    width: 100%;
    box-sizing: border-box;
}
.woocommerce-account .woocommerce-ResetPassword label {
    display: block;
    font-weight: 700;                        /* (5) same weight as Anmelden labels */
    margin-bottom: 4px;
}
/* Button = the Anmelden submit = .sd-btn--primary. Every visual property is
 * restated so nothing leaks in from the generic account-button rule or from the
 * Blocksy button styles; !important only where the child theme forces a radius. */
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--sd-gold-line);
    border-radius: var(--sd-radius)!important;  /* beats the child-theme
                                                .woocommerce button.button { border-radius: var(--sd-radius)!important} */
    background: var(--sd-gold);
    color: var(--sd-gold-ink);
    font-weight: var(--sd-btn-weight);
}
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button:hover,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button:focus {
    background: var(--sd-gold-dark);
    border-color: var(--sd-gold-line);
    color: var(--sd-gold-ink);
}

.tssd-account-extras {
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    padding: 6px 16px 14px;
    margin: 8px 0 16px;
}
.tssd-account-extras legend { font-weight: 700; padding: 0 6px; }

.woocommerce-account .woocommerce-Address-title {
    display: block;
}
.woocommerce-account .woocommerce-Address-title .edit {
    float: none;
    display: inline-block;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    .woocommerce-MyAccount-navigation { position: static; }
    .woocommerce-account .sd-grid--2,
    .woocommerce-account .sd-grid--3,
    .tssd-quick-links { grid-template-columns: 1fr; }
    .woocommerce-account .sd-table thead { display: none; }
    .woocommerce-account .sd-table tbody td { display: block; text-align: left; }
    .woocommerce-account .sd-table .actions { text-align: left; }

    .woocommerce-account .sd-table--compact tbody td { display: table-cell; }
    .woocommerce-account .sd-table--compact .num { text-align: right; }
    .woocommerce-account .sd-table--compact .actions { text-align: right; }
}

.tssd-reprint { max-width: 520px; }
.tssd-reprint__field { margin: 0 0 14px; }
.tssd-reprint__field label { display: block; font-weight: 700; margin-bottom: 4px; }
.tssd-reprint__field input[type="text"],
.tssd-reprint__field select {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--sd-field-line); border-radius: var(--sd-radius-sm); background: var(--sd-field-bg);
}
.tssd-reprint__field .description {
    display: block; margin-top: 4px; font-size: var(--sd-fs-sm); font-weight: 400; color: var(--sd-muted);
}
.tssd-reprint__field--check label { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.tssd-reprint__actions { margin: 16px 0 0; }
.tssd-reprint__submit {

    min-height: 40px; padding: 8px 14px; border: 1px solid var(--sd-gold-line);
    border-radius: var(--sd-radius); background: var(--sd-gold); color: var(--sd-gold-ink);
    font-weight: var(--sd-btn-weight); line-height: 1.2; cursor: pointer;
}
.tssd-reprint__submit:hover, .tssd-reprint__submit:focus { background: var(--sd-gold-dark); color: var(--sd-gold-ink); }
.tssd-reprint__notice { padding: 10px 12px; border-radius: var(--sd-radius); background: var(--sd-surface-2); border-left: 4px solid var(--sd-muted); }
.tssd-reprint__notice--err { background: var(--sd-warn-bg); border-left-color: var(--sd-warn); }

.tssd-booklet-reprint__list tbody td { font-size: var(--sd-fs-sm); }
/* Datum und Rest-Frist sind kurze, feste Angaben — sie duerfen nie umbrechen.
 * „Umfang" darf es weiterhin, damit die Tabelle auf schmalen Fenstern nachgibt. */
.tssd-booklet-reprint__when,
.tssd-booklet-reprint__left { white-space: nowrap; }

.tssd-booklet-reprint__what { width: 100%; max-width: 0; }
.tssd-booklet-reprint__name,
.tssd-booklet-reprint__size { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tssd-booklet-reprint__size { color: var(--sd-muted); }

.tssd-booklet-reprint__list .actions .sd-btn { white-space: nowrap; }
.tssd-booklet-reprint__list .actions .tssd-booklet-reprint__left { display: block; margin-top: 4px; color: var(--sd-muted); }
.tssd-booklet-reprint__more { margin-top: 12px; }
.tssd-booklet-reprint__more > summary { cursor: pointer; color: var(--sd-link); font-size: var(--sd-fs-sm); }
.tssd-booklet-reprint__more > .sd-table { margin-top: 8px; }

@media (max-width: 820px) {
    .woocommerce-account .tssd-booklet-reprint__list tbody tr {
        display: block;
        margin: 0 0 12px;
        border: 1px solid var(--sd-line);
        border-radius: var(--sd-radius);
        background: var(--sd-surface);
        overflow: hidden;
    }
    .woocommerce-account .tssd-booklet-reprint__list tbody tr:last-child { margin-bottom: 0; }
    .woocommerce-account .tssd-booklet-reprint__list tbody td { border: 0; padding: 8px 12px; }
    .woocommerce-account .tssd-booklet-reprint__list .tssd-booklet-reprint__when {
        background: var(--sd-surface-2);
        border-bottom: 1px solid var(--sd-line-soft);
        font-weight: 700;
    }
    .woocommerce-account .tssd-booklet-reprint__list .tssd-booklet-reprint__what { width: auto; max-width: none; }
    .woocommerce-account .tssd-booklet-reprint__list .tssd-booklet-reprint__name {
        white-space: normal; overflow-wrap: anywhere;
    }
    .woocommerce-account .tssd-booklet-reprint__list .actions { padding-top: 0; padding-bottom: 12px; }
}

.woocommerce-MyAccount-navigation-link--erneut-drucken .tssd-acct-label::before { content: "\1F194"; margin-right: .5em; }

.woocommerce-MyAccount-navigation a { display: block; }
.tssd-acct-desc { display: block; font-size: var(--sd-fs-sm); font-weight: 400; opacity: .75; margin-top: 1px; line-height: 1.3; }

html[data-theme="dark"] .woocommerce-account .sd-btn--ghost { background: #2a2e37; }
html[data-theme="dark"] .tssd-mysud__notice--ok { background: var(--sd-ok-bg); border-color: var(--sd-ok-line); }

.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td {
    -webkit-hyphens: auto;
    hyphens: auto;
}

.tssd-order-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.tssd-order-actions .sd-btn { white-space: nowrap; }
/* With two or three stacked buttons the rows grew taller — the order number (a <th>) sat
   at the top while every <td> is centred. */
.woocommerce-MyAccount-content .woocommerce-orders-table tbody th { vertical-align: middle; }
@media (max-width: 768px) {
    /* WooCommerce hides every <tbody> <th> in the stacked phone layout — and the order
       number IS one (scope="row"), so on a phone no order showed its number. Shown again
       in the same „Label: value" form as the other cells. */
    /* `table.` raises the specificity past the child theme's
       `.woocommerce table.shop_table th:first-child { padding-left: 14px }`, which loads later. */
    .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number {
        display: block;
        text-align: right;
        padding-left: 0; /* like the <td> rows below it */
    }
    .woocommerce-MyAccount-content .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number::before {
        content: attr(data-title) ": ";
        float: left;
        font-weight: 600;
    }
    /* Buttons at their own width on the right, clear of the „Aktionen:" label. */
    .tssd-order-actions { display: inline-flex; vertical-align: top; }
}

.tssd-order-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}
.tssd-order-status__icon { width: 1.4em; height: 1.4em; flex: none; }
.tssd-order-status--ok    { color: var(--sd-ok-ink); }
.tssd-order-status--busy  { color: var(--sd-gold-dark); }
.tssd-order-status--warn  { color: var(--sd-warn); }
.tssd-order-status--muted { color: var(--sd-muted); }
/* The word stays in the markup for screen readers; on wide tables only the icon shows
   (tooltip = title). Below 769 px WooCommerce stacks the table — there is room, so the
   word is shown next to the icon (no hover tooltips on a phone). */
.tssd-order-status__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 768px) {
    .tssd-order-status__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .tssd-order-status { cursor: default; }
}