@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    --accent:    #C8511A;
    --accent-dk: #A03D10;
    --accent-lt: #FBEEE6;
    --pill-bg:   #2C1A0E;
    --ink:       #1C0F06;
    --sand:      #FBF5EE;
    --mist:      #F4EDE4;
    --border:    #E8D9CC;
    --muted:     #8C6650;
    --serif:     'DM Serif Display', Georgia, serif;
    --sans:      'DM Sans', system-ui, sans-serif;
    --carton:    #10b981;
    --carton-lt: #ecfdf5;
}

.cart-page { font-family: var(--sans); padding-bottom: 160px; }

/* ── Alerts ── */
.cart-page .alert {
    border-radius: 12px; border: none; font-size: 13px;
    font-family: var(--sans); font-weight: 500; padding: 10px 14px;
}
.cart-page .alert-info    { background: #e8f0ff; color: #2255cc; }
.cart-page .alert-success { background: #e8f5ee; color: #1a7a42; }
.cart-page .alert-warning { background: #fff8e8; color: #9a6b00; }
.cart-page .alert-danger  { background: #fce8ed; color: var(--accent-dk); }

/* ── Section label ── */
.cart-section-label {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 10px;
}

/* ── Select-all bar ── */
.cart-select-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; background: #fff; border-radius: 13px;
    border: 1px solid var(--border); padding: 10px 14px; margin-bottom: 12px;
}
.cart-select-bar-left { display: flex; align-items: center; gap: 9px; }
.cart-select-bar-right { display: flex; align-items: center; gap: 8px; }

/* ── Custom checkbox ── */
.cart-cb-wrap {
    display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
}
.cart-cb {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    border: 2px solid var(--border); background: #fff;
    cursor: pointer; transition: all .15s; position: relative;
}
.cart-cb:checked {
    background: var(--accent); border-color: var(--accent);
}
.cart-cb:checked::after {
    content: '';
    position: absolute; top: 3px; left: 6px;
    width: 5px; height: 9px;
    border: 2px solid #fff; border-top: none; border-left: none;
    transform: rotate(45deg);
}
.cart-cb:indeterminate {
    background: var(--accent-lt); border-color: var(--accent);
}
.cart-cb:indeterminate::after {
    content: '';
    position: absolute; top: 7px; left: 3px;
    width: 10px; height: 2px; background: var(--accent); border-radius: 1px;
}
.cart-cb-label {
    font-size: 13px; font-weight: 700; color: var(--ink);
}
.cart-cb-sub {
    font-size: 11px; color: var(--muted); font-weight: 500;
}

/* Bulk delete link */
.cart-bulk-delete-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; color: #b91c1c;
    background: #fce8ed; border: 1px solid #fca5a5;
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    transition: all .13s; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.cart-bulk-delete-btn:disabled { opacity: .35; pointer-events: none; }
.cart-bulk-delete-btn:not(:disabled):hover {
    background: #b91c1c; color: #fff; border-color: #b91c1c;
}

/* ── Product group ── */
.cart-product-group {
    background: #fff; border-radius: 16px;
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 10px rgba(26,10,6,.05);
    margin-bottom: 12px; overflow: hidden;
    opacity: 0; transform: translateY(8px);
    animation: cartItemIn .32s ease forwards;
    transition: border-color .18s, box-shadow .18s, opacity .2s;
}
.cart-product-group.is-checked {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200,81,26,.09);
}
.cart-product-group.is-unchecked { opacity: .55; }

@keyframes cartItemIn { to { opacity:1; transform:translateY(0); } }
.cart-product-group:nth-child(1) { animation-delay:.04s }
.cart-product-group:nth-child(2) { animation-delay:.09s }
.cart-product-group:nth-child(3) { animation-delay:.13s }
.cart-product-group:nth-child(n+4) { animation-delay:.17s }

/* Group header */
.cart-group-header {
    padding: 11px 13px 10px;
    border-bottom: 1px solid var(--mist);
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 10px;
}
.cart-group-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.cart-group-cb {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    border: 2px solid var(--border); background: #fff;
    cursor: pointer; transition: all .15s; position: relative; margin-top: 2px;
}
.cart-group-cb:checked { background: var(--accent); border-color: var(--accent); }
.cart-group-cb:checked::after {
    content: '';
    position: absolute; top: 3px; left: 6px;
    width: 5px; height: 9px;
    border: 2px solid #fff; border-top: none; border-left: none;
    transform: rotate(45deg);
}
.cart-group-name {
    font-family: var(--serif); font-size: 14.5px; font-weight: 700;
    color: var(--ink); text-decoration: none; line-height: 1.25;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-group-name:hover { color: var(--accent); }
.cart-group-mode {
    flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; padding: 2px 9px; border-radius: 99px;
    white-space: nowrap; align-self: center; transition: background .2s, color .2s;
}
.cart-group-mode.retail  { background: var(--accent-lt); color: var(--accent); }
.cart-group-mode.bulk    { background: var(--accent);    color: #fff; }
.cart-group-mode.carton  { background: var(--carton);    color: #fff; }

/* Tier progress */
.cart-bulk-progress { margin-top: 8px; }
.cart-bulk-bar-track { height: 4px; background: var(--mist); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.cart-bulk-bar-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(to right, var(--accent), #e07a3a);
    transition: width .4s cubic-bezier(.34,.85,.64,1);
}
.cart-bulk-bar-fill.carton-fill { background: linear-gradient(to right, var(--carton), #34d399); }
.cart-bulk-bar-hint { font-size: 10.5px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.cart-bulk-bar-hint strong { color: var(--accent); font-weight: 700; }
.cart-bulk-bar-hint strong.carton-clr { color: var(--carton); }

/* ── Item row ── */
.cart-item-row {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 13px; border-bottom: 1px solid var(--mist);
}
.cart-item-row:last-child { border-bottom: none; }
.cart-item-thumb {
    flex: 0 0 62px; width: 62px; height: 62px;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); flex-shrink: 0; background: var(--mist);
}
.cart-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.cart-item-row:hover .cart-item-thumb img { transform:scale(1.06); }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-variant { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price-line { display:flex; align-items:baseline; gap:5px; margin-bottom:6px; }
.cart-item-unit { font-size:10.5px; color:var(--muted); font-weight:500; }
.cart-item-line-total { font-family:var(--serif); font-size:14px; color:var(--accent); transition:color .2s; }
.cart-item-line-total.carton-price { color:var(--carton); }
.cart-item-controls { display:flex; align-items:center; gap:9px; }
.cart-qty-group {
    width:92px; display:flex; align-items:center;
    background:var(--mist); border-radius:9px;
    overflow:hidden; border:1px solid var(--border);
}
.cart-qty-group .btn {
    width:26px; height:28px; padding:0; background:transparent; border:none;
    color:var(--ink); font-size:14px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; cursor:pointer; transition:background .12s,color .12s;
    -webkit-tap-highlight-color:transparent; border-radius:0; line-height:1; box-sizing:border-box;
}
.cart-qty-group .btn:hover { background:var(--border); color:var(--accent); }
.cart-qty-group .btn:disabled { opacity:.35; cursor:not-allowed; }
.cart-qty-group .form-control {
    flex:1; min-width:0; height:28px; border:none;
    border-left:1px solid var(--border); border-right:1px solid var(--border);
    background:#fff; text-align:center;
    font-family:var(--sans); font-size:13px; font-weight:700;
    color:var(--ink); padding:0; box-shadow:none !important;
    border-radius:0; box-sizing:border-box;
}
.cart-qty-group .form-control:focus { outline:none; }
.cart-qty-group .form-control::-webkit-outer-spin-button,
.cart-qty-group .form-control::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cart-qty-group .form-control[type=number] { -moz-appearance:textfield; }
.cart-remove-btn {
    width:28px; height:28px; border-radius:7px; flex-shrink:0;
    background:var(--mist); border:1px solid var(--border);
    color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; transition:all .12s; -webkit-tap-highlight-color:transparent;
}
.cart-remove-btn:hover { background:#fce8ed; border-color:#fca5a5; color:#b91c1c; }

/* ── Summary ── */
.cart-summary-card {
    background:#fff; border-radius:16px;
    border:1px solid var(--border);
    box-shadow:0 2px 10px rgba(26,10,6,.05);
    padding:15px; margin-top:6px;
}
.cart-summary-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; font-size:13px; color:var(--ink);
}
.cart-summary-row .label { color:var(--muted); font-weight:500; }
.cart-summary-row .value { font-weight:700; color:var(--ink); }
.cart-summary-row.total .label { font-weight:700; font-size:14px; color:var(--ink); }
.cart-summary-row.total .value { font-family:var(--serif); font-size:20px; font-weight:700; color:var(--accent); }
.cart-summary-divider { border:none; border-top:1px dashed var(--border); margin:4px 0; }
.cart-summary-note { font-size:11.5px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:5px; }

/* ── Empty state ── */
.cart-empty { text-align:center; padding:52px 20px; }
.cart-empty-icon { width:72px; height:72px; border-radius:20px; background:var(--mist); margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:30px; }
.cart-empty-title { font-family:var(--serif); font-size:22px; color:var(--ink); margin-bottom:7px; }
.cart-empty-sub   { font-size:13px; color:var(--muted); margin-bottom:20px; }
.cart-empty-actions { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.cart-empty-btn {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--pill-bg); color:#fff;
    font-size:12.5px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; padding:11px 22px; border-radius:99px;
    text-decoration:none; transition:background .15s;
}
.cart-empty-btn:hover { background:var(--accent); color:#fff; }

/* ── Fixed footer ── */
.footer.fixed { display:none !important; }
.cart-checkout-footer {
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(251,245,238,.97); backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border); box-shadow:0 -4px 20px rgba(26,10,6,.08);
    z-index:9999;
    padding:0;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:transform;
}
.cart-checkout-inner-wrap {
    padding:10px 0;
    padding-bottom:env(safe-area-inset-bottom, 0px);
}
.cart-checkout-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cart-footer-left { min-width:0; }
.cart-footer-price-label { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:1px; }
.cart-footer-price-amount { font-family:var(--serif); font-size:20px; font-weight:700; color:var(--ink); line-height:1; }
.cart-footer-sub { font-size:10px; color:var(--muted); font-weight:500; margin-top:1px; min-height:14px; }
.cart-footer-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.cart-home-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:transparent; color:var(--muted);
    font-family:var(--sans); font-size:12px; font-weight:700;
    padding:10px 14px; border-radius:11px;
    border:1.5px solid var(--border); text-decoration:none;
    transition:all .15s; -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.cart-home-btn:hover { border-color:var(--accent); color:var(--accent); }
.cart-checkout-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent); color:#fff; border:none;
    font-family:var(--sans); font-size:13.5px; font-weight:800;
    letter-spacing:.03em; padding:12px 22px; border-radius:13px;
    text-decoration:none; cursor:pointer; flex-shrink:0;
    transition:background .15s, transform .15s; -webkit-tap-highlight-color:transparent;
    white-space:nowrap;
}
.cart-checkout-btn:hover  { background:var(--accent-dk); color:#fff; transform:translateY(-1px); }
.cart-checkout-btn:active { transform:scale(.97); }
.cart-checkout-btn.disabled { opacity:.45; pointer-events:none; transform:none; }

@media (max-width:420px) {
    .cart-item-row { flex-wrap:wrap; }
    .cart-item-controls { width:100%; justify-content:flex-end; }
}