/* ============================================================
   NAZZA — Cart & Shop CSS
   ============================================================ */

/* CART */
.cart-page { padding: 100px 64px 120px; max-width: 1300px; margin: 0 auto; }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }

.cart-item {
  display: grid; grid-template-columns: 100px 1fr auto;
  gap: 24px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  align-items: start;
}
.cart-item-img img { width: 100px; height: 130px; object-fit: cover; display: block; }
.cart-img-ph {
  width: 100px; height: 130px; background: #111;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 40px; color: rgba(255,255,255,.06);
}
.cart-item-name { font-family: var(--serif); font-size: 20px; font-weight: 300; margin-bottom: 8px; }
.cart-item-meta { font-size: 11px; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.cart-measurements {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); padding: 10px 12px;
}
.cart-measurements span { font-size: 10px; color: rgba(255,255,255,.3); }
.cart-item-price { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--gold); margin-top: auto; }
.cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 4px; }
.qty-input {
  width: 60px; background: transparent; border: 1px solid rgba(255,255,255,.12);
  color: var(--white); text-align: center; padding: 8px;
  font-family: var(--sans); font-size: 13px; outline: none;
  transition: border-color .3s;
}
.qty-input:focus { border-color: var(--gold); }
.remove-btn {
  background: none; border: none; color: rgba(255,255,255,.2);
  font-size: 20px; cursor: pointer; transition: color .2s; line-height: 1;
}
.remove-btn:hover { color: rgba(255,80,80,.7); }

/* CART SUMMARY */
.summary-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); padding: 32px;
  position: sticky; top: 90px;
}
.summary-title { font-family: var(--serif); font-size: 22px; font-weight: 300; margin-bottom: 28px; }
.summary-rows { border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px; margin-bottom: 16px; }
.summary-row {
  display: flex; justify-content: space-between; font-size: 12px;
  color: rgba(255,255,255,.4); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.summary-note { font-size: 10px; color: rgba(201,169,110,.5); margin: 8px 0; }
.summary-total {
  display: flex; justify-content: space-between;
  font-family: var(--serif); font-size: 22px; font-weight: 300;
  padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px;
}
.discount-form { display: flex; border: 1px solid rgba(255,255,255,.1); margin-top: 20px; }
.discount-input {
  flex: 1; background: transparent; border: none; color: var(--white);
  padding: 12px 14px; font-family: var(--sans); font-size: 12px; outline: none;
  letter-spacing: 1px;
}
.discount-input::placeholder { color: rgba(255,255,255,.2); }
.discount-btn {
  background: transparent; border: none; border-left: 1px solid rgba(255,255,255,.1);
  color: var(--gold); font-family: var(--sans); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 500; padding: 0 16px; cursor: pointer;
  transition: background .3s;
}
.discount-btn:hover { background: rgba(201,169,110,.08); }

/* SHOP */
.shop-page { padding-bottom: 100px; }
.shop-grid-wrap { padding: 0 64px; }
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 24px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 32px;
}
.shop-count { font-size: 11px; color: rgba(255,255,255,.25); }
.shop-sort select {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: var(--white); padding: 8px 14px; font-family: var(--sans); font-size: 11px;
  letter-spacing: 1px; outline: none; cursor: pointer;
}
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 64px 24px; }
.filter-pill {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; padding: 6px 14px; cursor: pointer;
  text-decoration: none; transition: all .2s; display: inline-block;
}
.filter-pill:hover, .filter-pill.active {
  background: rgba(201,169,110,.1); border-color: var(--gold); color: var(--gold);
}

/* CHECKOUT */
.checkout-page { padding: 100px 64px 120px; max-width: 1100px; margin: 0 auto; }
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }
.checkout-section { margin-bottom: 40px; }
.checkout-section-title {
  font-family: var(--serif); font-size: 22px; font-weight: 300;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-field { display: flex; flex-direction: column; gap: 8px; }
.checkout-field.full { grid-column: 1 / -1; }
.checkout-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35); }
.checkout-input, .checkout-select, .checkout-textarea {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  color: var(--white); padding: 14px 16px; font-family: var(--sans);
  font-size: 13px; font-weight: 300; outline: none; transition: border-color .3s; width: 100%;
}
.checkout-input:focus, .checkout-select:focus { border-color: var(--gold); }
.checkout-select option { background: #1a1a1a; }
.checkout-textarea { resize: vertical; min-height: 80px; }

/* ORDER SUMMARY (checkout sidebar) */
.checkout-items { margin-bottom: 24px; }
.checkout-item {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.05); align-items: center;
}
.checkout-item-img { width: 64px; height: 80px; object-fit: cover; flex-shrink: 0; }
.checkout-item-ph {
  width: 64px; height: 80px; background: #111; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 24px; color: rgba(255,255,255,.06);
}
.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-name { font-size: 13px; font-weight: 400; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkout-item-meta { font-size: 10px; color: rgba(255,255,255,.3); }
.checkout-item-price { font-family: var(--serif); font-size: 16px; font-weight: 300; white-space: nowrap; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .cart-page, .checkout-page { padding: 80px 32px 80px; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .shop-grid-wrap, .filter-pills { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
  .cart-page, .checkout-page { padding: 60px 20px 60px; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 0; }
  .shop-grid-wrap, .filter-pills { padding-left: 20px; padding-right: 20px; }
  .checkout-grid { grid-template-columns: 1fr; }
}