.site-header {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.header-link,
.secondary-link {
    border: 1px solid #bfd1cb;
    border-radius: 10px;
    color: var(--brand-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    padding: 10px 14px;
    text-decoration: none;
}

/* 店舗名が長いとフレックスで圧縮され、「注文履歴」が1文字ずつ折り返して縦書きに見えます。 */
.header-link {
    flex-shrink: 0;
    white-space: nowrap;
}

.header-link:hover,
.secondary-link:hover {
    background: #edf7f4;
}

.secondary-link {
    margin-top: 16px;
}

.cancellation-note {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.error-state {
    border-color: #e8b6b0 !important;
    color: var(--accent) !important;
}

.history-page {
    min-height: 100vh;
}

.history-main {
    margin: 0 auto;
    max-width: 860px;
    padding: 28px 16px 100px;
}

.history-list {
    display: grid;
    gap: 16px;
}

.history-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(32, 48, 43, .08);
    padding: 20px;
}

.history-card-head,
.history-total,
.history-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.history-card h2 {
    font-size: 20px;
    margin: 3px 0;
}

.history-date,
.history-method {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.history-method {
    margin: 10px 0;
}

.order-status {
    background: #edf7f4;
    border-radius: 999px;
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 900;
    padding: 7px 10px;
}

.status-cancelled,
.status-refunded {
    background: #f3f1ee;
    color: #616965;
}

.history-items {
    border-block: 1px solid var(--line);
    list-style: none;
    margin: 14px 0;
    padding: 8px 0;
}

.history-items li {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 12px;
    justify-content: space-between;
    padding: 7px 0;
}

.history-total strong {
    font-size: 22px;
}

.history-actions {
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* 「詳細を見る」「明細書」「お支払いに進む」「キャンセル」の高さを44pxにそろえます（2026-10-15）。
   以前は 41px／52px／22px で、下端そろえの行の中で段違いでした。キャンセルは目立たせないよう文字のままにします。 */
.history-actions > .secondary-link,
.history-actions > .primary-button,
.history-actions > .text-button {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    justify-content: center;
    min-height: 44px;
    padding-bottom: 0;
    padding-top: 0;
}

.history-actions .secondary-link {
    margin-top: 0;
}

.history-empty {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 36px 22px;
    text-align: center;
}

.history-empty p {
    color: var(--muted);
    margin-bottom: 24px;
}

@media (max-width: 520px) {
    .header-link {
        padding: 9px 11px;
    }

    .history-main {
        padding-top: 16px;
    }

    .history-card {
        padding: 16px;
    }

    .history-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .history-actions > * {
        width: 100%;
    }
}

/* お店がご注文内容を変更した明細（036）。変更前の金額は取消線、理由はお店が選んだ定型の一言です。 */
.item-adjustment {
    color: var(--muted);
    display: block;
    font-size: 12px;
}

.item-before {
    color: var(--muted);
    font-weight: 400;
}

.history-items .is-cancelled,
.complete-items .is-cancelled {
    color: var(--muted);
}

.adjustment-note {
    color: var(--muted);
    font-size: 13px;
    margin: 8px 0 0;
}

/* ご返金の内容（2026-10-20）。お店で返した分もカードへ返した分も、いつ・いくら・どの方法で・状態を並べます。 */
.refund-summary {
    background: #f5f8f7;
    border-radius: 10px;
    margin: 8px 0 0;
    padding: 8px 12px;
}

.refund-summary-label {
    font-weight: 800;
    margin: 0 0 4px;
}

.refund-list {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.refund-list li {
    display: grid;
    font-size: 13px;
    gap: 2px;
}

.refund-when,
.refund-number,
.refund-cancelled {
    color: #5d6b67;
    font-size: 12px;
}

.refund-cancelled {
    margin: 6px 0 0;
}