/* ============================================================
   ETCHLY CART LINES — shared by cart.html AND order_confirm.html
   ------------------------------------------------------------
   One stylesheet for how an item is drawn, so the order page reads
   as the same cart one step on: same card, same picture frame,
   same type sizes, same price column. Change a line's look HERE,
   never in cart.css or order_confirm.css, or the two pages drift
   apart again (they did: 13px grey text vs 12.6px dark, a green
   inline price vs a blue price column, 104px product photos).
   Requires the palette variables both pages define inline
   (--card-bg, --card-border, --content-text, --accent, --light-muted).
   ============================================================ */

/* ── The line card ─────────────────────────────────────────── */
.cart-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    margin-bottom: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

/* Batch sample canvases and legacy thumbnails (not in a frame) */
.cart-item canvas,
.cart-item img.cart-thumbnail {
    object-fit: contain;
    border-radius: 6px;
    background: var(--light-panel);
    border: 1px solid var(--card-border);
    flex-shrink: 0;
}

/* ── ONE PICTURE FRAME FOR EVERY LINE ──────────────────────────
   Labels, shaped plates, personalised products and product photos all
   sit in the same fixed frame, so the text column starts at the same x
   on every row and every picture reads at one scale. 312x156 inside;
   both pages draw label canvases to exactly that box
   (PREVIEW_WIDTH / PREVIEW_MAX_HEIGHT). */
.cart-thumb {
    width: 330px; height: 174px; padding: 9px; box-sizing: border-box; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #f5f7f9; border: 1px solid var(--card-border, #e3e7eb); border-radius: 10px;
    overflow: hidden;
}
/* The frame is the panel — the canvas goes bare. auto + max on both axes
   keeps the canvas's own aspect and fits it to the frame at any width. */
.cart-item .cart-thumb canvas {
    border: 0 !important; background: transparent !important; border-radius: 0 !important;
    width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100%;
    margin: 0 !important;
}
/* Product photos: shown whole (never cropped); multiply melts a photo's own
   white background into the frame so it sits with the label previews. */
.cart-thumb img.cart-thumb-photo {
    width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
    border: 0; border-radius: 6px; background: transparent;
}
.cart-thumb-ph { font-size: 44px; opacity: .55; }
body.dark-mode .cart-thumb, body:not(.light-mode) .cart-thumb { background: #eef1f4; border-color: rgba(255,255,255,.12); }

/* ── Details column ───────────────────────────────────────── */
.cart-info { flex: 1 1 220px; min-width: 0; }
.cart-info p { margin: 4px 0; font-size: 0.9em; color: var(--content-text); }
.cart-info strong { color: var(--accent); }
.cart-info .ci-name { font-weight: 600; color: var(--content-text); }
/* "incl. $0.40 design premium" after the unit cost (templatePremiumOf). */
.cart-info .ci-prem { font-size: 11px; color: var(--light-muted); margin-left: 4px; }
body.dark-mode .cart-info p { color: var(--hi); }

/* ── Price column ─────────────────────────────────────────── */
.cart-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; flex: none; align-self: flex-start; }
.item-cost {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--accent);
    text-align: right;
    min-width: 70px;
}
.item-cost-sub { font-size: 11px; font-weight: 400; color: var(--light-muted); }

/* ── Quantity ─────────────────────────────────────────────── */
.qty-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.qty-control label { font-size: 0.9em; color: var(--light-muted); }
.qty-control input[type="number"] {
    width: 60px;
    padding: 5px 8px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--content-text);
    font-size: 0.9em;
    text-align: center;
}
/* Read-only quantity (order page): same place and size as the input. */
.qty-control .qty-value {
    min-width: 60px; padding: 5px 8px; box-sizing: border-box; text-align: center;
    border: 1px solid var(--card-border); border-radius: 6px; font-size: 0.9em;
    color: var(--content-text); background: var(--light-panel);
}

/* ── Phones ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cart-item { flex-wrap: wrap; align-items: flex-start; }
    .cart-thumb { width: 100%; height: 174px; }
    .cart-actions { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; align-self: auto; }
    .item-cost { text-align: left; }
}

/* Template discount on a cart / order line (a premium is never shown). */
.cart-info .ci-was { color: #9ca3af; font-weight: 400; margin-right: 2px; }
.cart-info .ci-disc { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; }