/* =====================================================================
   Ecom — Cart page (Day 7). Depends on tokens.css. No raw hex.
   ===================================================================== */
[x-cloak]{ display:none !important; }

.ecom-cart-page{ padding:24px 0 56px; }

.ecom-cart-title{
  display:flex; align-items:center; gap:10px;
  font-size:var(--ecom-fs-xl); font-weight:var(--ecom-fw-bold);
  color:var(--ecom-navy); margin:0 0 20px;
}
.ecom-cart-title i{ color:var(--ecom-orange); }
.ecom-cart-count{
  font-size:var(--ecom-fs-sm); font-weight:var(--ecom-fw-normal);
  color:var(--ecom-muted); margin-inline-start:6px;
}

/* EMPTY */
.ecom-cart-empty{
  text-align:center; padding:64px 20px; background:var(--ecom-surface);
  border:1px solid var(--ecom-border); border-radius:var(--ecom-radius);
}
.ecom-cart-empty i{ font-size:48px; color:var(--ecom-border); }
.ecom-cart-empty p{ color:var(--ecom-muted); margin:14px 0 20px; font-size:var(--ecom-fs-lg); }

/* GRID */
.ecom-cart-grid{
  display:grid; grid-template-columns:1fr 360px; gap:var(--ecom-gap);
  align-items:start;
}

/* LINES */
.ecom-cart-lines{
  background:var(--ecom-surface); border:1px solid var(--ecom-border);
  border-radius:var(--ecom-radius); overflow:hidden;
}
.ecom-cart-line{
  display:grid;
  grid-template-columns:88px 1fr auto auto 36px;
  gap:14px; align-items:center;
  padding:16px; border-bottom:1px solid var(--ecom-border);
}
.ecom-cart-line:last-of-type{ border-bottom:none; }
.ecom-cart-line.is-out{ opacity:.6; }

.ecom-cl-img{
  width:88px; height:88px; border-radius:var(--ecom-radius-sm);
  background:var(--ecom-surface-2); border:1px solid var(--ecom-border);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.ecom-cl-img img{ width:100%; height:100%; object-fit:contain; }

.ecom-cl-name{ font-weight:var(--ecom-fw-medium); color:var(--ecom-navy); font-size:var(--ecom-fs-base); }
.ecom-cl-pack{ font-size:var(--ecom-fs-sm); color:var(--ecom-muted); margin-top:2px; }
.ecom-cl-stock{ font-size:12px; margin-top:6px; font-weight:var(--ecom-fw-medium); }
.ecom-cl-stock.ok{ color:var(--ecom-success); }
.ecom-cl-stock.low{ color:var(--ecom-orange); }
.ecom-cl-stock.out{ color:var(--ecom-danger); }

/* QTY STEPPER */
.ecom-cl-qty{ display:flex; align-items:center; gap:0; }
.ecom-step{
  width:32px; height:32px; border:1px solid var(--ecom-border);
  background:var(--ecom-surface); color:var(--ecom-navy); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.ecom-step:first-child{ border-radius:var(--ecom-radius-sm) 0 0 var(--ecom-radius-sm); }
.ecom-step:last-child{ border-radius:0 var(--ecom-radius-sm) var(--ecom-radius-sm) 0; }
.ecom-step:disabled{ opacity:.4; cursor:not-allowed; }
.ecom-step:hover:not(:disabled){ background:var(--ecom-orange-soft); border-color:var(--ecom-orange); color:var(--ecom-orange); }
.ecom-step-val{
  width:44px; height:32px; text-align:center; border:1px solid var(--ecom-border);
  border-inline:none; font-size:var(--ecom-fs-sm); color:var(--ecom-navy);
  background:var(--ecom-surface); pointer-events:none;
}

/* PRICE */
.ecom-cl-price{ text-align:end; min-width:96px; }
.ecom-cl-unit{ font-size:12px; color:var(--ecom-muted); }
.ecom-cl-total{ font-size:var(--ecom-fs-base); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); margin-top:2px; }

.ecom-cl-remove{
  width:32px; height:32px; border:none; background:none; cursor:pointer;
  color:var(--ecom-muted); border-radius:var(--ecom-radius-sm);
}
.ecom-cl-remove:hover{ color:var(--ecom-danger); background:var(--ecom-surface-2); }

/* CART ACTIONS */
.ecom-cart-actions{
  display:flex; justify-content:space-between; gap:12px;
  padding:16px; background:var(--ecom-surface-2);
}

/* SUMMARY */
.ecom-cart-summary{
  background:var(--ecom-surface); border:1px solid var(--ecom-border);
  border-radius:var(--ecom-radius); padding:20px;
  position:sticky; top:88px;
}
.ecom-sum-block{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--ecom-border); }
.ecom-sum-h{ font-size:var(--ecom-fs-sm); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy); margin-bottom:10px; }

/* SPEED */
.ecom-speed-opts{ display:flex; flex-direction:column; gap:8px; }
.ecom-speed{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--ecom-border); border-radius:var(--ecom-radius-sm);
  cursor:pointer; font-size:var(--ecom-fs-sm); color:var(--ecom-ink);
  transition:border-color .15s, background .15s;
}
.ecom-speed input{ accent-color:var(--ecom-orange); }
.ecom-speed.on{ border-color:var(--ecom-orange); background:var(--ecom-orange-soft); color:var(--ecom-navy); font-weight:var(--ecom-fw-medium); }

/* SLOTS */
.ecom-slot-opts{ display:flex; flex-direction:column; gap:8px; }
.ecom-slot{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--ecom-border); border-radius:var(--ecom-radius-sm);
  cursor:pointer; font-size:var(--ecom-fs-sm); color:var(--ecom-ink);
}
.ecom-slot i{ color:var(--ecom-muted); }
.ecom-slot input{ accent-color:var(--ecom-orange); }
.ecom-slot.on{ border-color:var(--ecom-orange); background:var(--ecom-orange-soft); color:var(--ecom-navy); }
.ecom-slot.on i{ color:var(--ecom-orange); }

/* PROMO */
.ecom-promo-row{ display:flex; gap:8px; }
.ecom-promo-input{
  flex:1; height:38px; padding:0 12px; border:1px solid var(--ecom-border);
  border-radius:var(--ecom-radius-sm); font-size:var(--ecom-fs-sm);
  color:var(--ecom-navy);
}
.ecom-promo-msg{ font-size:12px; margin-top:8px; }
.ecom-promo-msg.ok{ color:var(--ecom-success); }
.ecom-promo-msg.fail{ color:var(--ecom-danger); }

/* TOTALS */
.ecom-sum-totals{ margin-bottom:16px; }
.ecom-sum-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--ecom-fs-sm); color:var(--ecom-ink); padding:6px 0;
}
.ecom-sum-row .minus{ color:var(--ecom-success); }
.ecom-sum-row .free{ color:var(--ecom-success); font-weight:var(--ecom-fw-bold); }
.ecom-sum-row.grand{
  border-top:1px solid var(--ecom-border); margin-top:6px; padding-top:12px;
  font-size:var(--ecom-fs-lg); font-weight:var(--ecom-fw-bold); color:var(--ecom-navy);
}

/* CHECKOUT BTN */
.ecom-checkout-btn{ width:100%; justify-content:center; gap:8px; }
.ecom-checkout-btn.disabled{ opacity:.5; pointer-events:none; }

/* RTL */
[dir="rtl"] .ecom-step:first-child{ border-radius:0 var(--ecom-radius-sm) var(--ecom-radius-sm) 0; }
[dir="rtl"] .ecom-step:last-child{ border-radius:var(--ecom-radius-sm) 0 0 var(--ecom-radius-sm); }

/* RESPONSIVE */
@media (max-width:880px){
  .ecom-cart-grid{ grid-template-columns:1fr; }
  .ecom-cart-summary{ position:static; }
  .ecom-cart-line{ grid-template-columns:64px 1fr auto; row-gap:10px; }
  .ecom-cl-img{ width:64px; height:64px; }
  .ecom-cl-qty{ grid-column:2; }
  .ecom-cl-price{ grid-column:3; }
  .ecom-cl-remove{ grid-column:3; grid-row:1; justify-self:end; }
}

/* SOL-style notes (Day 7 cart parity) */
.ecom-free-note{
  font-size:12px; color:var(--ecom-success); font-weight:var(--ecom-fw-medium);
  margin:4px 0 12px;
}
.ecom-min-note{
  text-align:center; font-size:12px; color:var(--ecom-muted);
  margin:10px 0 8px;
}
.ecom-min-note span{ color:var(--ecom-orange); font-weight:var(--ecom-fw-bold); }
.ecom-promo-row{ margin:8px 0; }
.ecom-sum-row.grand{ margin-top:8px; }

/* Applied promo chip (Day 7 fix) */
.ecom-promo-applied{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:8px 0; padding:8px 12px;
  background:var(--ecom-orange-soft); border:1px solid var(--ecom-orange);
  border-radius:var(--ecom-radius-sm);
}
.ecom-promo-chip{
  display:flex; align-items:center; gap:8px;
  font-size:var(--ecom-fs-sm); font-weight:var(--ecom-fw-bold);
  color:var(--ecom-navy); text-transform:uppercase;
}
.ecom-promo-chip i{ color:var(--ecom-orange); }
.ecom-promo-remove{
  width:26px; height:26px; border:none; background:none; cursor:pointer;
  color:var(--ecom-muted); border-radius:var(--ecom-radius-sm);
}
.ecom-promo-remove:hover{ color:var(--ecom-danger); background:var(--ecom-surface); }



/* =====================================================================
   Ecom — Add-to-cart feedback: toast, button states, header badge
   ===================================================================== */

/* Header cart badge */
.ecom-cart-badge{
  position:absolute; top:-6px; inset-inline-end:-8px;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--ecom-orange); color:#fff;
  font-size:11px; font-weight:var(--ecom-fw-bold); line-height:18px;
  text-align:center; border-radius:9px;
}

/* Button states */
.ecom-card__addbtn.is-loading{ opacity:.85; pointer-events:none; }
.ecom-card__addbtn.is-added{ background:var(--ecom-success) !important; border-color:var(--ecom-success) !important; color:#fff !important; }
.ecom-card__addbtn.is-error{ background:var(--ecom-danger) !important; border-color:var(--ecom-danger) !important; color:#fff !important; }

/* Toast */
.ecom-toast-host{
  position:fixed; z-index:9999; bottom:24px; inset-inline-end:24px;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.ecom-toast{
  display:flex; align-items:center; gap:10px;
  background:var(--ecom-navy); color:#fff;
  padding:12px 16px; border-radius:var(--ecom-radius);
  font-size:var(--ecom-fs-sm); box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; transform:translateY(12px); transition:opacity .2s, transform .2s;
  min-width:200px;
}
.ecom-toast.show{ opacity:1; transform:translateY(0); }
.ecom-toast.is-ok i{ color:var(--ecom-success); font-size:18px; }
.ecom-toast.is-error i{ color:#ff7a7a; font-size:18px; }

[dir="rtl"] .ecom-toast-host{ inset-inline-end:auto; inset-inline-start:24px; }