/* ── BREADCRUMB ── */
.breadcrumb-bar { border-bottom: 1px solid var(--color-border); background: var(--color-bg-surface); }
.breadcrumb {
  max-width: var(--container-max); margin: 0 auto; padding: var(--space-3) var(--container-pad);
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-hint); flex-wrap: wrap;
}
.breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-sep { color: var(--color-border-strong); }
.breadcrumb-current { color: var(--color-text-primary); font-weight: 500; }

/* ── CONTAINER ── */
.cart-section .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── SECTION ── */
.cart-section { padding: var(--space-8) 0 var(--space-16); }

.page-title {
  font-size: var(--text-3xl); font-weight: 700; color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  display: flex; align-items: baseline; gap: var(--space-3);
}
.page-title-count {
  font-size: var(--text-base); font-weight: 400; color: var(--color-text-hint);
}

/* ── TWO-COLUMN LAYOUT ── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
  align-items: start;
}

/* ── ITEMS TABLE ── */
.cart-table {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.cart-table-head {
  display: grid;
  grid-template-columns: 1fr 96px 124px 100px 36px;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-text-hint);
}
.cart-table-head .col-price,
.cart-table-head .col-total { text-align: right; }
.cart-table-head .col-qty { text-align: center; }
.cart-table-head .col-remove { text-align: center; }

.cart-row {
  display: grid;
  grid-template-columns: 1fr 96px 124px 100px 36px;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  transition: background 0.15s;
}
.cart-row:last-child { border-bottom: none; }
.cart-row:hover { background: var(--color-bg-subtle); }
.cart-row.is-unavailable {
  background: var(--color-error-bg);
  box-shadow: inset 3px 0 0 var(--color-error);
}
.cart-row.is-unavailable:hover { background: var(--color-error-bg); }

.cart-row-error {
  margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--color-error);
}

.cart-product {
  display: flex; align-items: center; gap: var(--space-4); min-width: 0;
}
.cart-product-img {
  width: 80px; height: 80px; flex-shrink: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cart-product-info { min-width: 0; }
.cart-product-category {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-hint);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
}
.cart-product-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary);
  line-height: 1.3; margin-bottom: 2px;
}
.cart-product-name a { text-decoration: none; color: inherit; }
.cart-product-name a:hover { color: var(--color-primary); }
.cart-product-meta { font-size: var(--text-xs); color: var(--color-text-hint); }

.col-price { text-align: right; }
.item-price { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); }
.item-price-orig {
  font-size: var(--text-xs); color: var(--color-text-hint);
  text-decoration: line-through; display: block;
}

.col-qty { display: flex; justify-content: center; }
.qty-control {
  display: flex; align-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-bg-subtle); height: 36px;
}
.qty-btn {
  width: 32px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  font-size: var(--text-base); color: var(--color-text-secondary);
  transition: background 0.15s, color 0.15s; user-select: none;
}
.qty-btn:hover { background: var(--color-border); color: var(--color-primary); }
.qty-input {
  width: 44px; border: none;
  border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
  text-align: center; font-family: var(--font-primary);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary);
  background: transparent; outline: none; height: 36px;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.col-total { text-align: right; }
.item-total {
  font-size: var(--text-base); font-weight: 700; color: var(--color-price);
}
.item-total-promo { color: var(--color-accent); }

.col-remove { display: flex; justify-content: center; }
.remove-btn {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-hint); transition: all 0.15s;
}
.remove-btn:hover { border-color: #FECACA; background: #FEF2F2; color: var(--color-error); }

/* ── FREE SHIPPING PROGRESS BAR ── */
.shipping-progress-bar {
  margin-top: var(--space-5);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.shipping-progress-text {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3);
}
.shipping-progress-text svg { color: var(--color-accent); flex-shrink: 0; }
.shipping-progress-text strong { color: var(--color-text-primary); }
.shipping-progress-text.reached { color: var(--color-primary); font-weight: 600; }
.shipping-progress-text.reached svg { color: var(--color-primary); }
.progress-track {
  width: 100%; height: 8px;
  background: var(--color-bg-subtle); border-radius: var(--radius-full); overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--color-accent);
  border-radius: var(--radius-full); transition: width 0.4s ease;
}
.progress-fill.reached { background: var(--color-primary); }

/* ── COUPON ── */
.coupon-row {
  margin-top: var(--space-4);
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.coupon-input-wrap { position: relative; flex: 1; min-width: 150px; }
.coupon-input {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-sm);
  color: var(--color-text-primary); background: var(--color-bg-surface); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.coupon-input::placeholder { color: var(--color-text-hint); }
.coupon-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30,92,53,0.1); }
.coupon-input.applied { border-color: var(--color-success); background: #f0faf4; }
.coupon-input.error { border-color: var(--color-error); }
.coupon-input.error:focus { box-shadow: 0 0 0 3px rgba(185,28,28,0.1); }
.btn-coupon {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg-surface); font-family: var(--font-primary);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.btn-coupon:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-coupon:disabled { opacity: 0.55; cursor: not-allowed; }
.coupon-success {
  display: none; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--color-success); font-weight: 500;
}
.coupon-success.visible { display: flex; }
.coupon-success svg { width: 14px; height: 14px; flex-shrink: 0; }
.coupon-remove {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-hint); font-size: var(--text-xs);
  text-decoration: underline; padding: 0; font-family: var(--font-primary);
}
.coupon-remove:hover { color: var(--color-error); }
.coupon-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--color-error);
  display: flex; align-items: center; gap: var(--space-1);
}

/* ── EMPTY STATE ── */
.cart-empty {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center;
}
.cart-empty-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--color-bg-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-hint); opacity: 0.35;
}
.cart-empty-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text-primary); }
.cart-empty-desc { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 360px; line-height: 1.7; }
.btn-primary-lg {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-base); font-weight: 600;
  padding: var(--space-4) var(--space-8); cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.btn-primary-lg:hover { background: var(--color-primary-dark); }

/* ── ORDER SUMMARY ── */
.order-summary {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: sticky;
  top: var(--space-8);
}
.order-summary-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base); font-weight: 700; color: var(--color-text-primary);
}
.order-summary-body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

.summary-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
.summary-line .value { font-weight: 500; color: var(--color-text-primary); text-align: right; }
.summary-line .value.discount { color: var(--color-success); }
.summary-line .value.free { color: var(--color-success); font-weight: 600; }

.summary-divider { height: 1px; background: var(--color-border); margin: var(--space-2) 0; }

.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary);
  padding-top: var(--space-3); border-top: 2px solid var(--color-border-strong);
  margin-top: var(--space-2);
}
.summary-total .total-value { font-size: var(--text-2xl); color: var(--color-price); }

.summary-vat-note { font-size: var(--text-xs); color: var(--color-text-hint); text-align: right; margin-top: var(--space-1); }

.shipping-methods { margin-top: var(--space-2); }
.shipping-methods-label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--color-text-hint); margin-bottom: var(--space-3);
}
.shipping-method {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  cursor: pointer; margin-bottom: var(--space-2); transition: border-color 0.15s, background 0.15s;
}
.shipping-method:last-child { margin-bottom: 0; }
.shipping-method:hover { border-color: var(--color-border-strong); }
.shipping-method.selected { border-color: var(--color-primary); background: rgba(30,92,53,0.04); }
.shipping-method input[type="radio"] { accent-color: var(--color-primary); flex-shrink: 0; }
.shipping-method-name { font-size: var(--text-sm); font-weight: 500; flex: 1; }
.shipping-method-price { font-size: var(--text-sm); font-weight: 700; color: var(--color-price); }
.shipping-method-price.free-ship { color: var(--color-success); }

.order-summary-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-bg-subtle);
}

.btn-checkout {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md);
  font-family: var(--font-primary); font-size: var(--text-base); font-weight: 600;
  padding: var(--space-4); cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s; width: 100%;
}
.btn-checkout:hover { background: var(--color-primary-dark); }
.btn-checkout:active { transform: scale(0.99); }

.checkout-note {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-hint); text-align: center;
}
.checkout-note svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ── STICKY CHECKOUT BAR (mobile only) ── */
.cart-sticky-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  padding: var(--space-3);
  gap: var(--space-3);
  align-items: center;
}
.cart-sticky-bar.is-hidden { display: none !important; }
.cart-sticky-total {
  display: flex; flex-direction: column; line-height: 1.2;
  min-width: 0; flex-shrink: 0;
}
.cart-sticky-label {
  font-size: var(--text-xs); color: var(--color-text-hint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cart-sticky-value { font-size: var(--text-base); font-weight: 700; color: var(--color-price); }
.cart-sticky-bar .btn-checkout {
  padding: var(--space-3);
  flex: 1 1 0; width: auto; min-width: 0; min-height: 48px;
  white-space: nowrap; font-size: var(--text-sm);
}

/* ── RESPONSIVE: ≤1024px ── */
@media (max-width: 1024px) {
  .cart-section .container { padding: 0 var(--space-4); }
  .cart-section { padding: var(--space-6) 0 var(--space-12); }

  .page-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }

  .cart-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .cart-table-head { display: none; }

  .cart-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product remove"
      "price   price"
      "qty     total";
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) var(--space-5);
    align-items: center;
  }
  .cart-row .cart-product { grid-area: product; }
  .cart-row .col-price { grid-area: price; text-align: left; }
  .cart-row .col-qty { grid-area: qty; justify-content: flex-start; }
  .cart-row .col-total { grid-area: total; }
  .cart-row .col-remove { grid-area: remove; align-self: start; }

  .order-summary { position: static; }

  .cart-empty { padding: var(--space-12) var(--space-6); }
}

/* ── RESPONSIVE: ≤640px ── */
@media (max-width: 640px) {
  .cart-section { padding: var(--space-5) 0 var(--space-10); }
  .page-title { font-size: var(--text-xl); margin-bottom: var(--space-5); }

  .cart-product { gap: var(--space-3); }
  .cart-product-img { width: 64px; height: 64px; }
  .cart-product-name { font-size: var(--text-sm); }
  .cart-row { padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-3); }

  .qty-control { height: 44px; }
  .qty-btn { width: 40px; height: 44px; font-size: var(--text-lg); }
  .qty-input { width: 48px; height: 44px; }
  .remove-btn { width: 40px; height: 40px; }

  .item-total { font-size: var(--text-base); }

  .coupon-row { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .coupon-input-wrap { min-width: 0; width: 100%; }
  .btn-coupon { width: 100%; padding: var(--space-3); min-height: 44px; }
  .coupon-success { flex-wrap: wrap; }

  .order-summary-header { padding: var(--space-4) var(--space-5); }
  .order-summary-body { padding: var(--space-4) var(--space-5); }
  .order-summary-footer { padding: var(--space-4) var(--space-5); display: none; }
  .shipping-method { padding: var(--space-3); }

  body { padding-bottom: 88px; }
  .cart-sticky-bar:not(.is-hidden) { display: flex; }

  .cart-empty { padding: var(--space-10) var(--space-4); }
  .cart-empty-title { font-size: var(--text-lg); }
}