.customer-orders-page { min-height: 70vh; padding: clamp(1.5rem, 4vw, 4rem) 0; background: #f8f6f1; }
.customer-orders-shell { display: grid; gap: 1.25rem; max-width: 1050px; }
.orders-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden; border-radius: 1.4rem; color: #fff; background: radial-gradient(circle at 10% 20%, rgb(210 169 88 / 30%), transparent 20rem), linear-gradient(140deg, #242019, #58431e); }
.orders-hero__back { display: inline-block; margin-bottom: 1.8rem; color: #e5c98e; font-size: .8rem; }
.orders-hero__back::before { content: '←'; margin-left: .45rem; }
.orders-hero div > span { color: #d4b16e; font-size: .75rem; letter-spacing: .08em; }
.orders-hero h1 { margin: .4rem 0 .65rem; font-size: var(--text-heading-1); }
.orders-hero p { max-width: 36rem; margin: 0; color: rgb(255 255 255 / 68%); line-height: 1.9; }
.orders-hero__count { display: grid; min-width: 8rem; height: 8rem; place-content: center; border: 1px solid rgb(222 191 129 / 45%); border-radius: 50%; text-align: center; }
.orders-hero__count strong { font-size: 2rem; }
.orders-hero__count span { color: #d9c296 !important; font-size: .7rem !important; }

.orders-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; padding: .6rem; border: 1px solid #ebe4d8; border-radius: 0; background: #fff; }
.orders-filters a { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .8rem; border-radius: .7rem; color: #696155; font-size: .86rem; }
.orders-filters a.active { color: #fff; background: #72561e; }
.orders-filters strong { display: grid; min-width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 50%; background: rgb(138 106 40 / 12%); font-size: .7rem; }
.orders-filters a.active strong { background: rgb(255 255 255 / 18%); }

.orders-list { display: grid; gap: 1rem; }
.order-card { overflow: hidden; border: 1px solid #e8e0d3; border-radius: 1.15rem; background: #fff; box-shadow: 0 12px 36px rgb(66 48 17 / 5%); }
.order-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    padding: 1.3rem 1.5rem;
    border-bottom: 1px solid #f0eadf;
}
.order-card__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
    flex: 1 1 13rem;
}
.order-card__label,
.order-card__date {
    color: #80776a;
    font-size: .72rem;
    line-height: 1.4;
}
.order-card__number {
    display: block;
    max-width: 100%;
    color: #332b20;
    font-size: clamp(.95rem, 2.4vw, 1.08rem);
    font-weight: 700;
    line-height: 1.35;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}
.order-card__status-panel {
    display: grid;
    gap: .55rem;
    justify-items: end;
    flex: 0 1 auto;
    max-width: 100%;
}
.order-card__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.order-status, .order-payment-status { display: inline-flex; align-items: center; min-height: 1.85rem; padding: .35rem .7rem; border-radius: 999px; font-size: .7rem !important; line-height: 1.3; white-space: nowrap; }
.order-status--active { color: #745716 !important; background: #f5e9ca; }
.order-status--completed { color: #315e46 !important; background: #dfefe5; }
.order-status--canceled { color: #8b3e37 !important; background: #f5e1df; }
.order-payment-status { color: #554e43 !important; background: #eeeae3; }
.order-payment-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 1.85rem;
    padding: .35rem .75rem;
    border: 1px solid rgb(154 53 45 / 14%);
    border-radius: 999px;
    color: #9a352d;
    background: #fff3ef;
    font-size: .68rem;
    white-space: nowrap;
}
.order-payment-timer__label { color: #b04a3d; }
.order-payment-timer strong { font-size: .78rem; letter-spacing: .06em; }

.order-card__items-preview { display: flex; align-items: center; min-height: 5.5rem; padding: 1rem 1.5rem .3rem; }
.order-card__items-preview a, .order-card__more { display: grid; width: 4rem; height: 4rem; margin-left: -.6rem; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: .8rem; color: #9a7530; background: #f5f0e7; box-shadow: 0 4px 12px rgb(58 44 20 / 10%); }
.order-card__items-preview img { width: 100%; height: 100%; object-fit: cover; }
.order-card__more { margin-right: .5rem; border: 0; font-size: .8rem; }
.order-card__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 1rem 1.5rem 1.3rem; }
.order-card__summary div { display: grid; gap: .25rem; }
.order-card__summary span { color: #887f72; font-size: .7rem; }
.order-card__summary strong { overflow: hidden; color: #41392e; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }

.order-details { border-top: 1px solid #eee7db; }
.order-details summary { padding: 1rem 1.5rem; color: #795b21; font-size: .82rem; cursor: pointer; list-style-position: inside; }
.order-details__content { display: grid; gap: 1.2rem; padding: 0 1.5rem 1.5rem; }
.order-details h2 { margin: 0 0 .8rem; color: #342c21; font-size: 1rem; }
.order-delivery dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 0; }
.order-delivery dl > div { padding: .75rem; border-radius: .65rem; background: #f8f5ef; }
.order-delivery__address { grid-column: span 2; }
.order-delivery dt { color: #8a8175; font-size: .68rem; }
.order-delivery dd { margin: .2rem 0 0; color: #4b4338; font-size: .78rem; line-height: 1.7; }
.order-lines { display: grid; gap: .55rem; }
.order-line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .65rem; border: 1px solid #eee8dd; border-radius: .75rem; }
.order-line__image { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; overflow: hidden; border-radius: .55rem; color: #9b7733; background: #f4efe5; }
.order-line__image img { width: 100%; height: 100%; object-fit: cover; }
.order-line > div { display: grid; gap: .2rem; }
.order-line strong { color: #3d352a; font-size: .82rem; }
.order-line small { color: #8a8174; font-size: .68rem; }
.order-line > span { color: #72551c; font-size: .78rem; font-weight: 700; }
.order-totals { display: grid; gap: .45rem; max-width: 25rem; margin-right: auto; padding: 1rem; border-radius: .8rem; background: #f7f3eb; }
.order-totals div { display: flex; justify-content: space-between; gap: 1rem; color: #756c60; font-size: .75rem; }
.order-totals__payable { margin-top: .35rem; padding-top: .65rem; border-top: 1px solid #ded3c0; color: #4b3918 !important; font-size: .85rem !important; }
.order-card__actions { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid #eee7db; background: #fcfaf7; }
.order-cancel-note { margin: 0; color: #756c60; line-height: 1.9; }

@media (max-width: 680px) {
    .orders-hero__count { display: none; }
    .orders-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .order-card__header { flex-direction: column; align-items: stretch; }
    .order-card__identity { flex-basis: auto; }
    .order-card__status-panel { justify-items: start; }
    .order-card__badges { justify-content: flex-start; }
    .order-card__summary { grid-template-columns: 1fr; }
    .order-delivery dl { grid-template-columns: 1fr; }
    .order-delivery__address { grid-column: auto; }
    .order-line { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .order-line__image { width: 3.5rem; height: 3.5rem; }
    .order-line > span { grid-column: 2; }
    .order-card__actions { align-items: stretch; flex-direction: column; }
}