/* =============================================================================
   CO Print Press — Checkout & Orders (Phase 2D-1)
   ========================================================================== */

/* ---------- CHECKOUT PAGE -------------------------------------- */
.cpp-checkout { padding-top: var(--cpp-s4); max-width: 1200px; margin: 0 auto; }
.cpp-checkout__head { margin: var(--cpp-s4) 0 var(--cpp-s5); }
.cpp-checkout__title {
    font-family: var(--cpp-font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1; margin: 8px 0 var(--cpp-s2);
    font-weight: 800;
}
.cpp-checkout__title em {
    font-family: var(--cpp-font-script);
    font-style: normal; font-weight: 400; color: var(--cpp-magenta);
}
.cpp-checkout__sub { color: var(--cpp-ink-soft); font-size: 1.05rem; line-height: 1.5; margin: 0; }

.cpp-checkout__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--cpp-s4);
    align-items: start;
}
@media (max-width: 900px) {
    .cpp-checkout__layout { grid-template-columns: 1fr; }
}

.cpp-checkout__main { display: flex; flex-direction: column; gap: var(--cpp-s4); }
.cpp-checkout__section {
    background: var(--cpp-paper);
    border: 2px solid var(--cpp-ink);
    padding: var(--cpp-s4);
}
.cpp-checkout__h2 {
    font-family: var(--cpp-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--cpp-s3);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cpp-ink);
}

.cpp-checkout__address > * + * { margin-top: var(--cpp-s2); }

/* Per-item shipping rows */
.cpp-checkout__shipping-list { display: flex; flex-direction: column; gap: var(--cpp-s2); }
.cpp-checkout__shipping-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cpp-s3);
    padding: var(--cpp-s3);
    border: 1.5px solid var(--cpp-rule);
    background: var(--cpp-paper);
}
@media (max-width: 700px) {
    .cpp-checkout__shipping-row { grid-template-columns: 1fr; }
}
.cpp-checkout__shipping-item { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cpp-checkout__shipping-thumb { width: 50px; height: 50px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--cpp-rule); }
.cpp-checkout__shipping-thumb--placeholder {
    background: repeating-linear-gradient(45deg, var(--cpp-paper-2) 0, var(--cpp-paper-2) 4px, var(--cpp-paper) 4px, var(--cpp-paper) 8px);
}
.cpp-checkout__shipping-options { display: flex; flex-direction: column; gap: 4px; }
.cpp-checkout__shipping-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--cpp-rule);
    cursor: pointer;
    font-size: 14px;
}
.cpp-checkout__shipping-opt:hover { background: var(--cpp-paper-2); }
.cpp-checkout__shipping-opt input[type="radio"] { width: 16px; height: 16px; }
.cpp-checkout__shipping-opt strong { margin-left: auto; font-family: var(--cpp-font-mono); }

.cpp-checkout__shipping-addr {
    margin-top: var(--cpp-s3);
    padding-top: var(--cpp-s3);
    border-top: 1.5px dashed var(--cpp-rule);
}

.cpp-checkout__actions {
    display: flex;
    gap: var(--cpp-s2);
    flex-wrap: wrap;
    margin-top: var(--cpp-s3);
}

/* Sticky summary */
.cpp-checkout__summary {
    background: var(--cpp-ink);
    color: var(--cpp-paper);
    padding: var(--cpp-s4);
    border: 3px solid var(--cpp-ink);
    position: sticky;
    top: var(--cpp-s4);
}
.cpp-checkout__summary-title {
    font-family: var(--cpp-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--cpp-s3);
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255,250,240,0.2);
}
.cpp-checkout__summary-items { margin-bottom: var(--cpp-s3); }
.cpp-checkout__summary-line {
    display: flex; justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255,250,240,0.15);
    font-size: 13px;
    gap: 8px;
}
.cpp-checkout__summary-line-info { min-width: 0; }
.cpp-checkout__summary-line-info strong { display: block; }
.cpp-checkout__summary-line-info small { color: rgba(255,250,240,0.6); display: block; }

.cpp-checkout__summary-row {
    display: flex; justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}
.cpp-checkout__summary-row--saving { color: var(--cpp-yellow); }
.cpp-checkout__summary-row--total {
    font-family: var(--cpp-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    border-top: 2px solid rgba(255,250,240,0.2);
    margin-top: var(--cpp-s2);
    padding-top: var(--cpp-s2);
}
.cpp-checkout__summary-row--total strong { color: var(--cpp-yellow); font-size: 1.6rem; }
.cpp-checkout__summary-hint {
    margin-top: var(--cpp-s3);
    padding-top: var(--cpp-s2);
    border-top: 1px dashed rgba(255,250,240,0.15);
    font-size: 12px;
    color: rgba(255,250,240,0.6);
    text-align: center;
    font-style: italic;
}

/* ---------- ORDER CONFIRMATION + ACCOUNT ORDERS --------------- */
.cpp-orderdone { max-width: 800px; margin: var(--cpp-s4) auto; padding: var(--cpp-s4); }
.cpp-orderdone__card {
    background: var(--cpp-paper);
    border: 3px solid var(--cpp-ink);
    box-shadow: 6px 6px 0 var(--cpp-magenta);
    padding: var(--cpp-s5);
}
.cpp-orderdone__mark {
    display: inline-block;
    width: 56px; height: 56px;
    background: var(--cpp-yellow);
    border: 3px solid var(--cpp-ink);
    color: var(--cpp-ink);
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    font-weight: 800;
    margin-bottom: var(--cpp-s3);
}
.cpp-orderdone__title {
    font-family: var(--cpp-font-display);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 var(--cpp-s2);
}
.cpp-orderdone__title em {
    font-family: var(--cpp-font-script);
    font-style: normal; font-weight: 400; color: var(--cpp-magenta);
}
.cpp-orderdone__sub { color: var(--cpp-ink-soft); line-height: 1.5; margin: 0 0 var(--cpp-s4); }

.cpp-orderdone__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cpp-s3);
    background: var(--cpp-paper-2);
    padding: var(--cpp-s3);
    border: 1.5px solid var(--cpp-rule);
    margin-bottom: var(--cpp-s4);
}
.cpp-orderdone__meta-label {
    font-family: var(--cpp-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cpp-ink-soft);
    margin-bottom: 4px;
}
.cpp-orderdone__meta-value { font-family: var(--cpp-font-mono); font-size: 18px; font-weight: 700; }
.cpp-orderdone__meta-value--total { font-family: var(--cpp-font-display); font-size: 24px; }

.cpp-orderdone__h2 {
    font-family: var(--cpp-font-display);
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--cpp-s4) 0 var(--cpp-s2);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cpp-ink);
}
.cpp-orderdone__line {
    display: flex; justify-content: space-between;
    padding: var(--cpp-s2) 0;
    border-bottom: 1px solid var(--cpp-rule);
    gap: var(--cpp-s2);
}
.cpp-orderdone__line:last-child { border-bottom: 0; }
.cpp-orderdone__totals {
    margin-top: var(--cpp-s3);
    padding: var(--cpp-s3);
    background: var(--cpp-paper-2);
    border: 1.5px solid var(--cpp-rule);
}
.cpp-orderdone__totals-row { display: flex; justify-content: space-between; padding: 4px 0; }
.cpp-orderdone__totals-row--saving { color: var(--cpp-magenta); }
.cpp-orderdone__totals-row--total {
    font-family: var(--cpp-font-display);
    font-size: 1.3rem;
    font-weight: 800;
    border-top: 2px solid var(--cpp-ink);
    margin-top: var(--cpp-s2);
    padding-top: var(--cpp-s2);
}
.cpp-orderdone__actions {
    display: flex; gap: var(--cpp-s2); margin-top: var(--cpp-s4); flex-wrap: wrap;
}

/* ---------- ACCOUNT ORDERS LISTING ----------------------------- */
.cpp-account__orders { display: flex; flex-direction: column; gap: var(--cpp-s2); }
.cpp-account__order {
    display: block;
    padding: var(--cpp-s3);
    background: var(--cpp-paper);
    border: 1.5px solid var(--cpp-rule);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cpp-account__order:hover {
    border-color: var(--cpp-ink);
    box-shadow: 3px 3px 0 var(--cpp-yellow);
}
.cpp-account__order-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    margin-bottom: 6px;
}
.cpp-account__order-meta { display: flex; gap: var(--cpp-s3); flex-wrap: wrap; color: var(--cpp-ink-soft); font-size: 14px; }
.cpp-account__order-meta strong { margin-left: auto; color: var(--cpp-ink); font-family: var(--cpp-font-display); }
.cpp-account__order-status {
    font-family: var(--cpp-font-mono);
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--cpp-paper-2);
    border: 1px solid var(--cpp-rule);
}
.cpp-account__order-status--pending_payment { background: var(--cpp-yellow); border-color: var(--cpp-ink); }
.cpp-account__order-status--paid { background: var(--cpp-magenta); color: var(--cpp-paper); border-color: var(--cpp-magenta); }
.cpp-account__order-status--in_production { background: #4a90e2; color: var(--cpp-paper); border-color: #4a90e2; }
.cpp-account__order-status--shipped { background: #2ca15e; color: var(--cpp-paper); border-color: #2ca15e; }
.cpp-account__order-status--completed { background: var(--cpp-ink); color: var(--cpp-paper); border-color: var(--cpp-ink); }
.cpp-account__order-status--cancelled { background: var(--cpp-paper-2); color: var(--cpp-ink-soft); }