/* ============================================================
   BRICKENCY — cart.css
   Styles panier — portés depuis pages/cart.html
   (bloc <style> inline du design). Chargé sur la page panier.
   ============================================================ */

.cthead { background: var(--bg); border-bottom: 1px solid var(--line); padding: 32px 0 28px; }
.cthead .crumbs {
  display: flex; gap: 8px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .15em; color: var(--ink-mute); text-transform: uppercase;
  margin-bottom: 16px;
}
.cthead h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; letter-spacing: -.02em; line-height: 1;
  margin: 0;
}
.cthead h1 small {
  display: inline-block; font-family: var(--font-mono); font-size: 13px;
  font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); margin-left: 14px;
}
.cthead .acts { display: flex; gap: 10px; margin-top: 16px; align-items: center; }

.cart-layout {
  display: grid; grid-template-columns: 1fr 400px; gap: 32px;
  padding: 32px 0 80px;
}

/* CART TABLE */
.cart-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.cart-list-h {
  display: grid;
  grid-template-columns: 80px 1fr 130px 110px 140px 120px 36px;
  gap: 16px; align-items: center;
  padding: 14px 24px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cart-row {
  display: grid;
  grid-template-columns: 80px 1fr 130px 110px 140px 120px 36px;
  gap: 16px; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px;
}
.cart-row:last-child { border-bottom: 0; }
.cart-row .art {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, #fff, var(--bg-elev));
  border: 1px solid var(--line); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-row .art img { max-width: 85%; max-height: 85%; object-fit: contain; }
.cart-row .info b, .cart-row .info a { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.005em; color: var(--ink); }
.cart-row .info .meta { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cart-row .info .meta .brk-cart-color { display: inline-flex; align-items: center; gap: 6px; }
.cart-row .info .meta .brk-cart-color .sw { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); flex: 0 0 auto; }

.cart-row .stk {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px;
}
.cart-row .stk .ok { color: var(--ok); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.cart-row .stk .ok .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.cart-row .stk small { color: var(--ink-mute); letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }

.cart-row .qty {
  display: flex; align-items: center;
  border: 1px solid var(--line); background: var(--bg-elev); border-radius: var(--r-sm);
  height: 36px;
}
.cart-row .qty button { padding: 0 10px; color: var(--ink-2); font-size: 16px; cursor: pointer; }
.cart-row .qty input {
  width: 50px; text-align: center; border: 0; background: transparent; outline: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
}

.cart-row .unit { text-align: right; }
.cart-row .unit b { font-weight: 500; color: var(--ink); }

.cart-row .tot { text-align: right; }
.cart-row .tot b { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); }

.cart-row .rm {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-3);
  cursor: pointer;
}
.cart-row .rm:hover { color: var(--err); border-color: var(--err); }

/* Add a part row */
.cart-add {
  padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
}
.cart-add .field { flex: 1; background: #fff; }

/* Panier vide */
.cart-empty {
  background: #fff; border: 1px dashed var(--line-2); border-radius: var(--r-md);
  padding: 80px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.cart-empty h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; }
.cart-empty p { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); letter-spacing: .06em; }

/* RIGHT — order summary */
.osum {
  position: sticky; top: 16px; align-self: start;
  display: flex; flex-direction: column; gap: 16px;
}
.osum-box {
  background: var(--surface-dark); color: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
}
.osum-h {
  padding: 18px 22px;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: -.005em;
  border-bottom: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: baseline;
}
.osum-h small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-onDark-3); font-weight: 400; }
.osum-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.osum-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-onDark-2);
}
.osum-row b, .osum-row .amount { color: #fff; font-weight: 500; font-style: normal; }
.osum-row.discount b, .osum-row.discount .amount { color: var(--orange-2); }
.osum-row.subtle { color: var(--ink-onDark-3); font-size: 11px; }

.osum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-weight: 900;
  font-size: 38px; letter-spacing: -.01em; color: #fff;
  padding-top: 16px; border-top: 1px solid var(--line-dark); margin-top: 8px;
}
.osum-total .amount { color: #fff; }
.osum-total span.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-onDark-3); letter-spacing: .14em; font-weight: 500; }

.osum-cta { padding: 22px; border-top: 1px solid var(--line-dark); }
.osum-cta .btn { width: 100%; }
.osum-cta .trust { font-family: var(--font-mono); font-size: 10px; color: var(--ink-onDark-3); text-align: center; margin-top: 12px; letter-spacing: .14em; }

/* Shipping note */
.ship-calc {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px;
}
.ship-calc h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; }
.ship-calc .note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); line-height: 1.6; }

/* Promo code */
.promo {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px;
  display: flex; gap: 8px; align-items: center;
}
.promo input {
  flex: 1; height: 36px; border: 1px solid var(--line); background: #fff;
  padding: 0 12px; font-family: var(--font-mono); font-size: 12px; outline: none;
  border-radius: var(--r-sm); text-transform: uppercase;
}