/**
 * shop-cart.css — cart page + mini-cart drawer + cart-pill (P3.2).
 *
 * Nastavlja se na shop-tokens.css (--sh-*/--c-* varijable) + shop-components.css
 * (.sh-btn, .sh-badge). Sadrži i self-contained .sh-qty (jer shop-pdp.css nije
 * učitan na cart stranici). BEM `sh-cart*` / `sh-mini-cart*` namespace.
 */

/* ============================ Qty stepper (self-contained) ================= */
.sh-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  flex: 0 0 auto;
}
.sh-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 40px;
  border: 0;
  background: var(--sh-surface, #fff);
  color: var(--c-text);
  font-size: 15px;
  cursor: pointer;
}
.sh-qty__btn:hover { background: var(--c-bg-soft); }
.sh-qty__input {
  width: 46px;
  border: 0;
  border-inline: 1px solid var(--c-border);
  text-align: center;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.sh-qty__input::-webkit-outer-spin-button,
.sh-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sh-qty--sm .sh-qty__btn { width: 32px; min-height: 32px; font-size: 13px; }
.sh-qty--sm .sh-qty__input { width: 38px; font-size: 13px; }

/* ================================ Cart page =============================== */
.sh-cart { padding-block: var(--sh-space-6) var(--sh-space-8); }
.sh-cart__container { max-width: 1200px; margin-inline: auto; }

.sh-cart__breadcrumb { margin-bottom: var(--sh-space-3); font-size: 14px; }
.sh-cart__breadcrumb a { color: var(--c-muted); text-decoration: none; }
.sh-cart__breadcrumb a:hover { color: var(--c-blue); text-decoration: underline; }

.sh-cart__title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  margin: 0 0 var(--sh-space-5);
  color: var(--c-text);
}
.sh-cart__count { color: var(--c-muted); font-weight: 500; }

.sh-cart__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sh-space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .sh-cart__grid { grid-template-columns: minmax(0, 1fr) 360px; }
}

.sh-cart__section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--sh-space-4);
  color: var(--c-text);
}

/* --- Line items --- */
.sh-cart__lines { display: flex; flex-direction: column; gap: var(--sh-space-3); }

.sh-cart-item {
  display: grid;
  grid-template-columns: 96px 1fr auto auto auto;
  gap: var(--sh-space-4);
  align-items: center;
  padding: var(--sh-space-4);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--sh-surface, #fff);
}
.sh-cart-item.is-unavailable { opacity: .7; }
.sh-cart-item__media { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; background: var(--c-bg-soft); }
.sh-cart-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-cart-item__body { min-width: 0; }
.sh-cart-item__name { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.sh-cart-item__name a { color: var(--c-text); text-decoration: none; }
.sh-cart-item__name a:hover { color: var(--c-blue); }
.sh-cart-item__sku { font-size: 12px; color: var(--c-muted); margin: 0 0 6px; }
.sh-cart-item__stock { font-size: 12px; margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.sh-cart-item__stock--in  { color: var(--sh-success); }
.sh-cart-item__stock--low { color: var(--sh-warning); }
.sh-cart-item__stock--oos { color: var(--sh-danger); }
.sh-cart-item__price { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.sh-cart-item__line-total { font-size: 15px; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.sh-cart-item__unit { font-size: 12px; color: var(--c-muted); }
.sh-cart-item__remove {
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--c-muted); cursor: pointer;
}
.sh-cart-item__remove:hover { background: var(--sh-sale-bg); color: var(--sh-danger); }

@media (max-width: 640px) {
  .sh-cart-item {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas:
      "media body remove"
      "media qty  price";
    row-gap: var(--sh-space-3);
  }
  .sh-cart-item__media { grid-area: media; width: 72px; height: 72px; }
  .sh-cart-item__body { grid-area: body; }
  .sh-cart-item__qty { grid-area: qty; }
  .sh-cart-item__price { grid-area: price; }
  .sh-cart-item__remove { grid-area: remove; justify-self: end; }
}

/* --- Order summary --- */
.sh-cart__summary {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: var(--sh-space-5);
  background: var(--sh-surface, #fff);
  position: sticky;
  top: var(--sh-space-5);
}
.sh-cart__totals { margin: 0 0 var(--sh-space-4); display: flex; flex-direction: column; gap: var(--sh-space-2); }
.sh-cart__total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.sh-cart__total-row dt { margin: 0; color: var(--c-text); }
.sh-cart__total-row dd { margin: 0; font-variant-numeric: tabular-nums; }
.sh-cart__total-row--muted dt, .sh-cart__total-row--muted dd { color: var(--c-muted); }
.sh-cart__total-row--tax dt, .sh-cart__total-row--tax dd { color: var(--c-muted); font-size: 13px; }
.sh-cart__total-row--discount dd { color: var(--sh-success); }
.sh-cart__total-row--grand {
  margin-top: var(--sh-space-2);
  padding-top: var(--sh-space-3);
  border-top: 1px solid var(--c-border);
  font-size: 17px;
  font-weight: 700;
}
.sh-cart__total-row--grand small { font-weight: 500; color: var(--c-muted); font-size: 12px; }
.sh-cart__tax { display: contents; }

/* --- Coupon --- */
.sh-cart__coupon { margin: 0 0 var(--sh-space-4); }
.sh-cart__coupon-row { display: flex; gap: var(--sh-space-2); }
.sh-cart__coupon-input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font: inherit;
}
.sh-cart__coupon-input:focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 1px; }
.sh-cart__coupon-msg { margin-top: var(--sh-space-2); min-height: 20px; }
.sh-cart__coupon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--sh-radius-pill);
  background: var(--sh-success-bg); color: var(--sh-success);
  font-size: 13px; font-weight: 600;
}
.sh-cart__coupon-remove { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; }

.sh-cart__checkout { width: 100%; margin-bottom: var(--sh-space-4); }
.sh-cart__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sh-cart__trust li { font-size: 12px; color: var(--c-muted); display: flex; align-items: center; gap: 6px; }

/* --- Empty state --- */
.sh-cart__empty {
  text-align: center;
  padding: var(--sh-space-8) var(--sh-space-4);
  border: 1px dashed var(--c-border);
  border-radius: 16px;
}
.sh-cart__empty-icon { font-size: 44px; color: var(--c-muted); margin-bottom: var(--sh-space-3); }
.sh-cart__empty-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.sh-cart__empty-text { color: var(--c-muted); margin: 0 0 var(--sh-space-5); }

/* --- Cross-sell rail --- */
.sh-cart__crosssell { margin-top: var(--sh-space-8); }
.sh-cart__rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sh-space-4);
}

/* ============================== Cart pill ================================= */
.sh-cart-pill {
  position: fixed;
  top: 16px; right: 16px;
  z-index: var(--sh-z-header);
  width: 48px; height: 48px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--sh-surface, #fff);
  color: var(--c-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(10,23,51,.08);
}
.sh-cart-pill:hover { background: var(--c-bg-soft); }
.sh-cart-pill__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--sh-radius-pill);
  background: var(--c-blue, #2b5bd7); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

/* ============================ Mini-cart drawer =========================== */
.sh-mini-cart { position: fixed; inset: 0; z-index: var(--sh-z-drawer); }
.sh-mini-cart[hidden] { display: none; }
.sh-mini-cart__overlay {
  position: absolute; inset: 0;
  background: var(--sh-overlay);
  opacity: 0; transition: opacity var(--sh-dur) ease;
}
.sh-mini-cart.is-open .sh-mini-cart__overlay { opacity: 1; }

.sh-mini-cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--sh-surface, #fff);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--sh-dur-slow) cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 24px rgba(10,23,51,.15);
}
.sh-mini-cart.is-open .sh-mini-cart__panel { transform: translateX(0); }

.sh-mini-cart__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sh-space-4) var(--sh-space-5);
  border-bottom: 1px solid var(--c-border);
}
.sh-mini-cart__title { font-size: 16px; font-weight: 700; margin: 0; display: flex; gap: 6px; align-items: baseline; }
.sh-mini-cart__count { color: var(--c-muted); font-weight: 500; font-size: 14px; }
.sh-mini-cart__close {
  width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: var(--c-text); cursor: pointer;
}
.sh-mini-cart__close:hover { background: var(--c-bg-soft); }

.sh-mini-cart__shipbar { padding: var(--sh-space-3) var(--sh-space-5); border-bottom: 1px solid var(--c-border); }
.sh-mini-cart__shipbar-text { margin: 0 0 6px; font-size: 12px; color: var(--c-text); }
.sh-mini-cart__shipbar-track { height: 6px; border-radius: 999px; background: var(--c-bg-soft); overflow: hidden; }
.sh-mini-cart__shipbar-fill { display: block; height: 100%; background: var(--sh-success); width: 0; transition: width var(--sh-dur) ease; }

.sh-mini-cart__body { flex: 1 1 auto; overflow-y: auto; padding: var(--sh-space-4) var(--sh-space-5); }
.sh-mini-cart__empty { text-align: center; padding: var(--sh-space-7) var(--sh-space-4); color: var(--c-muted); }
.sh-mini-cart__empty-icon { font-size: 36px; margin-bottom: var(--sh-space-3); }
.sh-mini-cart__empty p { margin: 0 0 var(--sh-space-4); }

.sh-mini-cart-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sh-space-3);
  align-items: center;
  padding: var(--sh-space-3) 0;
  border-bottom: 1px solid var(--c-border);
}
.sh-mini-cart-item__media { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--c-bg-soft); }
.sh-mini-cart-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-mini-cart-item__name { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.sh-mini-cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sh-space-2); }
.sh-mini-cart-item__price { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-mini-cart-item__remove {
  width: 32px; height: 32px; border: 0; border-radius: 6px;
  background: transparent; color: var(--c-muted); cursor: pointer;
}
.sh-mini-cart-item__remove:hover { background: var(--sh-sale-bg); color: var(--sh-danger); }

.sh-mini-cart__footer { border-top: 1px solid var(--c-border); padding: var(--sh-space-4) var(--sh-space-5); }
.sh-mini-cart__subtotal { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 4px; }
.sh-mini-cart__subtotal strong { font-variant-numeric: tabular-nums; }
.sh-mini-cart__note { font-size: 12px; color: var(--c-muted); margin: 0 0 var(--sh-space-3); }
.sh-mini-cart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sh-space-2); }
.sh-mini-cart__actions .sh-btn { width: 100%; }

/* Body scroll lock while drawer is open. */
body.sh-noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sh-mini-cart__panel, .sh-mini-cart__overlay, .sh-mini-cart__shipbar-fill { transition: none; }
}