/* Styling for markup that public/assets/js/cart.js renders directly (cart
   drawer lines, checkout summary lines, quantity steppers) — these classes
   are hardcoded inside cart.js's template strings, so they can't carry the
   _template's own classes. Re-themed with the _template's own CSS custom
   properties (see public/cdn/css/style.css) so it reads as one system. */

.cart-drawer { width: min(420px, 92vw) !important; }
.cart-empty { color: var(--neutral-500); }

.cart-item {
    display: flex; gap: 1rem; padding: 1rem 0;
    border-bottom: 1px solid var(--primary-sky-200);
}
.cart-item .cart-thumb {
    width: 72px; height: 72px; flex-shrink: 0;
    background: var(--neutral-25); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
}
.cart-item .cart-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cart-item .cart-info { flex: 1; }
.cart-item .cart-name { font-weight: 600; margin-bottom: .25rem; }
.cart-item .cart-meta { font-size: .8rem; color: var(--neutral-500); margin-bottom: .35rem; }
.cart-item .cart-price { color: var(--secondary-orange-600-primary); font-weight: 600; }
.cart-remove { background: none; border: none; color: #b00020; padding: 0; font-size: .85rem; }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--primary-sky-200); border-radius: 999px; overflow: hidden; }
.qty-stepper button { background: transparent; border: 0; width: 32px; height: 32px; color: var(--primary-sky-900); font-weight: 700; }
.qty-stepper button:hover { background: rgba(130, 150, 118, 0.12); color: var(--secondary-orange-600-primary); }
.qty-stepper .qty-value { min-width: 32px; text-align: center; font-weight: 600; padding: 0 .25rem; }
.qty-stepper-sm button { width: 26px; height: 26px; font-size: .9rem; }
.qty-stepper-sm .qty-value { min-width: 24px; font-size: .85rem; }

.summary-line { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--primary-sky-200); }
.summary-line:last-of-type { border-bottom: 0; }
.summary-line .sum-thumb {
    width: 56px; height: 56px; background: var(--neutral-25);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    padding: 4px; flex-shrink: 0;
    position: relative;
}
.summary-line .sum-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.summary-line .sum-thumb .sum-qty {
    position: absolute; top: -8px; right: -8px;
    background: var(--primary-sky-900); color: #fff;
    border-radius: 999px;
    width: 22px; height: 22px;
    font-size: .72rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.summary-line .sum-name { font-weight: 600; font-size: .9rem; }
.summary-line .sum-meta { font-size: .8rem; color: var(--neutral-500); }
.summary-line .sum-price { font-weight: 600; white-space: nowrap; }
.sum-remove {
    background: none; border: 0; color: var(--neutral-500);
    padding: 2px 6px; font-size: .85rem; line-height: 1;
}
.sum-remove:hover { color: #b00020; }