/* ==========================================================================
   QRBELL Store — Cart (spec §22, §62)
   --------------------------------------------------------------------------
   Loaded only by pages/cart.html. All selectors namespaced `.cart-*` under
   `.store-cart`.

   Desktop: item list + a sticky summary rail.
   Mobile:  single column with a sticky checkout bar carrying the total.
   ========================================================================== */

/* Thumbnail size steps with the viewport: compact on phones, a touch larger
   on tablets, full size once the two-column layout has room to spare. */
.store-cart { --cart-thumb: 72px; }

@media (min-width: 480px)  { .store-cart { --cart-thumb: 84px; } }
@media (min-width: 768px)  { .store-cart { --cart-thumb: 96px; } }
@media (min-width: 1200px) { .store-cart { --cart-thumb: 104px; } }


/* ==========================================================================
   PAGE HEAD
   ========================================================================== */

.cart-head { padding-block: var(--space-4); }

.cart-head__nav { min-height: 24px; }

.cart-head__title {
  margin: var(--space-3) 0 0;
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 768px) { .cart-head__title { font-size: 1.75rem; } }

.cart-head__count { color: var(--color-text-muted); font-weight: var(--weight-regular); font-size: var(--text-md); }


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-10);
  align-items: start;
}

@media (min-width: 992px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); }
}

@media (min-width: 1200px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}


/* ==========================================================================
   FREE-SHIPPING NUDGE
   A progress bar toward free delivery. Commercially the highest-value thing
   on the page after the items themselves.
   ========================================================================== */

.cart-nudge {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-subtle);
  border: 1px solid var(--qb-gold-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.cart-nudge--met { background: var(--color-success-soft); border-color: #BDE9D4; }

.cart-nudge__text { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.cart-nudge__text i { flex: 0 0 auto; }
.cart-nudge--met .cart-nudge__text { color: var(--color-success-strong); font-weight: var(--weight-semibold); }
.cart-nudge__text strong { font-weight: var(--weight-bold); }

.cart-nudge__track {
  height: 4px;
  background: rgba(7, 9, 28, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cart-nudge__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}
.cart-nudge--met .cart-nudge__bar { background: var(--color-success); }


/* ==========================================================================
   CART ITEM
   ========================================================================== */

.cart-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cart-item {
  display: grid;
  grid-template-columns: var(--cart-thumb) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  /* Pin both columns to the top: without this the grid stretches the square
     thumbnail to the height of the text column and object-fit crops it. */
  align-items: start;
}
.cart-item:last-child { border-bottom: 0; }

.cart-item.is-removing { opacity: 0.45; pointer-events: none; }

.cart-item__media {
  display: block;
  align-self: start;
  width: var(--cart-thumb);
  height: var(--cart-thumb);
  background: var(--qb-grey-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.cart-item__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cart-item__body { min-width: 0; }

.cart-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.cart-item__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}
.cart-item__name a { color: var(--color-text); }
.cart-item__name a:hover { color: var(--color-accent); text-decoration: none; }

.cart-item__price {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-extra);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-item__unit {
  display: block;
  color: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  text-align: right;
}

/* Variant, design and QR configuration — spec §22 wants all three summarised */
.cart-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.cart-item__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  background: var(--color-surface-alt);
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}
.cart-item__tag i { font-size: 0.9em; color: var(--color-text-faint); }

.cart-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}

.cart-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.cart-item__link:hover { color: var(--color-text); text-decoration: none; }
.cart-item__link--danger:hover { color: var(--color-danger-strong); }

/* Phones: keep the thumbnail + body side by side, tighten the padding, and let
   the name/price row wrap so a long price never squashes the title. */
@media (max-width: 479.98px) {
  .cart-item { gap: var(--space-3); padding: var(--space-3); }
  .cart-item__top { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .cart-item__price { text-align: left; }
  .cart-item__unit { text-align: left; }
  .cart-item__actions { gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
}


/* ==========================================================================
   SAVED FOR LATER
   ========================================================================== */

.cart-saved { margin-top: var(--space-8); }

.cart-saved__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   SUMMARY RAIL
   ========================================================================== */

.cart-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

@media (min-width: 992px) {
  .cart-summary {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--space-4));
  }
}

.cart-summary__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

/* -- Coupon -------------------------------------------------------------- */

.cart-coupon { display: flex; gap: var(--space-2); }
.cart-coupon .qb-input { min-height: 40px; text-transform: uppercase; }
.cart-coupon .qb-btn { flex: 0 0 auto; min-height: 40px; }

.cart-coupon__msg { margin-top: var(--space-2); font-size: var(--text-xs); }
.cart-coupon__msg--ok { color: var(--color-success-strong); }
.cart-coupon__msg--err { color: var(--color-danger-strong); }

/* Applied coupon reads as a removable token, not as an input value */
.cart-coupon__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-success-soft);
  border: 1px dashed var(--color-success);
  border-radius: var(--radius-xs);
}
.cart-coupon__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-success-strong);
}
.cart-coupon__saved { font-size: var(--text-2xs); color: var(--color-success-strong); }

/* Suggested codes so the field is not a guessing game in a prototype */
.cart-coupon__hints { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.cart-coupon__hint {
  padding: 2px var(--space-2);
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  cursor: pointer;
}
.cart-coupon__hint:hover { border-color: var(--color-accent); color: var(--color-accent); }

.cart-summary__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.cart-summary__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
}
.cart-summary__trust-item i { color: var(--color-success-strong); font-size: 0.95rem; }

/* The summary's checkout button is redundant on mobile — the sticky bar
   carries it — so it only appears once there is no sticky bar. */
@media (max-width: 991.98px) {
  .cart-summary__checkout { display: none; }
}


/* ==========================================================================
   RECOMMENDATIONS
   ========================================================================== */

.cart-cross { margin-top: var(--space-10); }

.cart-cross__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}