* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #151a1e;
    color: #f5f5f7;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.order-top {
    position: relative;
    min-height: 104px;
    padding: 18px 30px 12px;
    display: grid;
    place-items: start center;
}

.brand img { height: 66px; display: block; }

.back-link,
.secondary-action,
.primary-action {
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.back-link { position: absolute; top: 22px; right: 30px; min-height: 36px; padding: 0 12px; background: rgba(255,255,255,0.1); font-size: 13px; }
.secondary-action { background: #77818a; }
.primary-action { background: #22c55e; }

.back-link:hover, .secondary-action:hover, .primary-action:hover { transform: translateY(-2px); filter: brightness(1.06); }
.back-link:active, .secondary-action:active, .primary-action:active { transform: scale(0.97); }
.primary-action:disabled { cursor: default; opacity: 0.45; transform: none; }

.order-layout {
    width: min(900px, 100%);
    margin: 0 auto;
    flex: 1;
    padding: 8px 30px 82px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 70px;
    align-content: center;
}

h1, h2 { color: #fff; font-size: 22px; }
h1 { margin-bottom: 20px; }
h2 { margin-bottom: 18px; }

.page-message {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(239,68,68,0.14);
    color: #fca5a5;
    font-size: 13px;
}

.cart-items { display: grid; gap: 12px; }

.cart-item {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    max-width: 460px;
    padding: 10px;
    border: 1px solid #4a5661;
    border-radius: 5px;
    background: #2d353d;
}

.cart-image {
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 3px;
    background: #101315 center / cover no-repeat;
}

.cart-info { min-width: 0; }
.cart-info strong, .cart-info span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cart-info strong { color: #fff; font-size: 14px; }
.cart-info span { margin-top: 4px; color: #9be05a; font-size: 13px; }

.quantity-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.quantity-row button, .remove-button {
    border: 0;
    color: #fff;
    background: #1e252b;
    cursor: pointer;
}
.quantity-row button { width: 25px; height: 25px; border-radius: 50%; font-size: 16px; font-weight: 900; }
.quantity-row button:disabled { cursor: default; opacity: 0.35; }
.quantity-row span { min-width: 26px; color: #fff; text-align: center; font-size: 14px; }
.remove-button { align-self: start; padding: 4px 2px; color: #ff7373; background: transparent; font: inherit; font-size: 12px; }

.order-lines { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.order-line { display: flex; justify-content: space-between; gap: 16px; color: #fff; font-size: 13px; }
.order-line span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-line strong { color: #9be05a; white-space: nowrap; }

.order-total { display: flex; justify-content: space-between; margin: 14px 0; color: #ff6b6b; font-weight: 900; }
.minimum-order { margin: -7px 0 14px; color: #b8c0c7; font-size: 12px; text-align: right; }
.summary-column { align-self: start; }
.summary-column .secondary-action, .summary-column .primary-action { width: 100%; margin-top: 10px; }

.empty-cart { max-width: 460px; padding: 42px 14px; border: 1px dashed rgba(255,255,255,0.14); border-radius: 6px; color: #b8c0c7; text-align: center; }
.legal-footer { padding: 20px 14px 28px; text-align: center; }
.legal-footer a { color: #aab4bd; font-size: 13px; text-decoration: none; }
.legal-footer a:hover { color: #86efac; text-decoration: underline; }

@media (max-width: 760px) {
    .order-top { min-height: 76px; padding: 12px 14px 10px; }
    .brand img { height: 46px; }
    .back-link { top: 16px; right: 14px; min-height: 32px; padding: 0 9px; font-size: 12px; }
    .order-layout { grid-template-columns: 1fr; gap: 32px; padding: 28px 14px 44px; align-content: start; }
    .cart-item { max-width: none; grid-template-columns: 72px minmax(0, 1fr) auto; }
    .summary-column { width: 100%; }
}