/* Cart line design — shared by the /cart page (#pc-cart) and the slide-out drawer
   (#pc-drawer-cart). Consumes the storefront-base --pc-* tokens. */

/* Layout wrapper: on the standalone page, center + constrain. In the drawer the
   drawer body handles width, and .pc-cart__foot sticks to the drawer bottom. */
/* The page's Breakdance Section provides the outer padding + centering; this keeps
   the cart a focused, narrow column within it (centered inside the section). */
#pc-cart { max-width: var(--pc-maxw); margin-left: auto; margin-right: auto; }

.pc-cart__items { display: flex; flex-direction: column; }

/* --- One cart line ---------------------------------------------------------- */
.pc-cartline {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--pc-space-3);
  padding: var(--pc-space-3) 0;
  border-bottom: 1px solid var(--pc-color-border);
  align-items: start;
}
.pc-cartline:first-child { padding-top: 0; }

.pc-cartline__thumb {
  display: block; width: 64px; height: 64px; border-radius: var(--pc-radius);
  overflow: hidden; background: #f4f3f5; border: 1px solid var(--pc-color-border);
  flex: none;
}
.pc-cartline__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cartline__thumb--empty { background: #f4f3f5; }

.pc-cartline__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-cartline__title {
  color: var(--pc-color-text); font-weight: 600; font-size: 15px;
  text-decoration: none; line-height: 1.3;
}
.pc-cartline__title:hover { color: var(--pc-color-text); text-decoration: underline; }
.pc-cartline__meta { color: var(--pc-color-muted); font-size: 13px; }
.pc-cartline__unit { color: var(--pc-color-muted); font-size: 13px; margin-top: 2px; }
.pc-cartline--unpriced .pc-cartline__unit { font-style: italic; }
.pc-cartline__unit-was { text-decoration: line-through; margin-right: 4px; opacity: 0.7; }

.pc-cartline__side {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--pc-space-2);
}
.pc-cartline__total { color: var(--pc-color-text); font-weight: 700; font-size: 15px; }

/* --- Quantity stepper ------------------------------------------------------- */
.pc-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--pc-color-border); border-radius: var(--pc-radius);
  overflow: hidden; background: #fff;
}
.pc-stepper__btn {
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  font-size: 17px; line-height: 1; color: var(--pc-color-text);
  display: flex; align-items: center; justify-content: center;
}
.pc-stepper__btn:hover { background: #f4f3f5; }
.pc-stepper__input {
  width: 42px; height: 30px; border: none; text-align: center;
  font-size: 14px; color: var(--pc-color-text);
  border-left: 1px solid var(--pc-color-border);
  border-right: 1px solid var(--pc-color-border);
  -moz-appearance: textfield;
}
.pc-stepper__input::-webkit-outer-spin-button,
.pc-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pc-cartline__remove {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--pc-color-muted); font-size: 12px; text-decoration: underline;
}
.pc-cartline__remove:hover { color: var(--pc-color-error); }

/* --- Footer (subtotal + checkout) ------------------------------------------- */
.pc-cart__foot { padding-top: var(--pc-space-4); }
.pc-cart__subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--pc-space-1);
}
.pc-cart__subtotal-label { color: var(--pc-color-text); font-weight: 600; font-size: 15px; }
.pc-cart__subtotal-value { color: var(--pc-color-text); font-weight: 700; font-size: 20px; }
.pc-cart__note { color: var(--pc-color-muted); font-size: 12px; margin: 0 0 var(--pc-space-3); }
.pc-cart__proceed { width: 100%; }

/* --- Empty state ------------------------------------------------------------ */
.pc-cart__empty { text-align: center; color: var(--pc-color-muted); padding: var(--pc-space-6) 0; }

/* --- Read-only order summary (checkout / confirmation) ---------------------- */
.pc-sumline {
  display: grid; grid-template-columns: 48px 1fr auto; gap: var(--pc-space-3);
  align-items: center; padding: var(--pc-space-3) 0;
  border-bottom: 1px solid var(--pc-color-border);
}
.pc-sumline:first-child { padding-top: 0; }
.pc-sumline__thumb {
  position: relative; width: 48px; height: 48px; border-radius: var(--pc-radius);
  overflow: visible; background: #f4f3f5; border: 1px solid var(--pc-color-border);
}
.pc-sumline__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--pc-radius); display: block; }
.pc-sumline__qtybubble {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--pc-color-muted); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.pc-sumline__main { min-width: 0; }
.pc-sumline__title { color: var(--pc-color-text); font-weight: 600; font-size: 14px; line-height: 1.3; }
.pc-sumline__meta { color: var(--pc-color-muted); font-size: 12px; }
.pc-sumline__qty { color: var(--pc-color-muted); font-size: 12px; }
.pc-sumline__total { color: var(--pc-color-text); font-weight: 700; font-size: 14px; white-space: nowrap; }
.pc-sum__subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: var(--pc-space-3); font-weight: 700; color: var(--pc-color-text); font-size: 15px;
}
/* Tax / Total rows appended to the summary once QBO computes them. */
.pc-sum__totalrow {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--pc-color-muted); font-size: 14px; margin-top: var(--pc-space-1);
}
.pc-sum__totalrow--total {
  color: var(--pc-color-text); font-weight: 700; font-size: 18px;
  margin-top: var(--pc-space-2); padding-top: var(--pc-space-2);
  border-top: 1px solid var(--pc-color-border);
}
/* Placeholder value ("Calculated at next step" / "—") until QBO returns the real
   figure — muted + italic so it reads as pending, not a real number. */
.pc-sum__totalval--pending { color: var(--pc-color-muted); font-weight: 400; font-style: italic; font-size: 13px; }

/* Transient cart notice (e.g. minimum-order snap). */
.pc-cart__notice { color: var(--pc-color-error); font-size: 13px; line-height: 1.4; margin-bottom: var(--pc-space-3); }