/* Bag page. Tokens and fonts come from shop.css; widths match the header and footer. */
/* A short bag still keeps the footer at the bottom of the window. */
body.bag-page { display: flex; flex-direction: column; min-height: 100vh; }
body.bag-page > main { flex: 1 0 auto; }
.bag { width: calc(100% - 112px); max-width: 1320px; margin: 0 auto; padding: 24px 0 0; }
.bag-title { margin: 0 0 28px; color: var(--shop-ink); font: 500 30px/1.15 var(--shop-sans); letter-spacing: -.02em; }
.bag-status { margin: 0; padding: 32px 0 56px; color: var(--shop-muted); font: 400 15px/1.6 var(--shop-body); }
.bag-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(40px, 4.5vw, 64px);
  align-items: start;
}

.bag-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--shop-rule); }
.bag-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--shop-rule);
}
.bag-item-image {
  display: block;
  width: 120px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--shop-rule);
  border-radius: 8px;
  background: var(--shop-photo);
  transition: border-color .2s;
}
.bag-item-image:hover { border-color: var(--shop-rule-2); }
.bag-item-image img { display: block; width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.bag-item-info { min-width: 0; }
.bag-item-title { color: var(--shop-ink); font: 500 18px/1.3 var(--shop-sans); letter-spacing: -.01em; }
.bag-item-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.bag-item-options { margin: 4px 0 0; color: var(--shop-muted); font: 400 13px/1.5 var(--shop-body); }
.bag-item-note { margin: 6px 0 0; color: var(--shop-error); font: 400 13px/1.5 var(--shop-body); }
.bag-item-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.bag-qty { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--shop-rule-2); border-radius: 8px; }
.bag-qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--shop-ink);
}
.bag-qty button svg { width: 16px; height: 16px; }
.bag-qty button:hover:not(:disabled) { background: var(--shop-control); }
.bag-qty button:disabled { color: #a3b0bb; cursor: not-allowed; }
.bag-qty-value { min-width: 28px; color: var(--shop-ink); font: 500 14px/1 var(--shop-sans); text-align: center; }
.bag-remove {
  position: relative;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--shop-ink-2);
  font: 500 13px/1.4 var(--shop-sans);
}
.bag-remove:hover { color: var(--shop-ink); }
/* A taller tap area without changing the underlined look. */
.bag-remove::after { content: ""; position: absolute; inset: -12px -6px; }
.bag-item-price { margin: 0; color: var(--shop-ink); font: 500 16px/1.3 var(--shop-sans); text-align: right; white-space: nowrap; }
.bag-item.is-unavailable .bag-item-image img { opacity: .5; }
.bag-item.is-unavailable .bag-item-price { color: var(--shop-muted); text-decoration: line-through; }

/* Summary panel: hairline panel like the contact form, navy checkout like Add to Bag. */
.bag-summary { padding: 28px; border: 1px solid var(--shop-rule); border-radius: 8px; }
.bag-summary h2 { margin: 0 0 20px; color: var(--shop-ink); font: 500 22px/1.2 var(--shop-sans); letter-spacing: -.01em; }
.bag-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--shop-rule);
  border-bottom: 1px solid var(--shop-rule);
  color: var(--shop-ink);
  font: 500 16px/1.3 var(--shop-sans);
}
.bag-note { margin: 12px 0 0; color: var(--shop-muted); font: 400 13px/1.5 var(--shop-body); }
.bag-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 24px 0 0;
  border: 0;
  border-radius: 8px;
  background: var(--shop-ink);
  color: var(--shop-paper);
  font: 500 16px/1 var(--shop-sans);
  letter-spacing: .01em;
  transition: background .2s;
}
.bag-checkout:hover:not(:disabled) { background: #163b62; }
.bag-checkout:disabled { background: var(--shop-control); color: var(--shop-muted); cursor: not-allowed; }
.bag-done { margin-top: 16px; }
.bag-clear {
  position: relative;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--shop-ink);
  font: 500 13px/1.5 var(--shop-sans);
}
.bag-clear::after { content: ""; position: absolute; inset: -12px -6px; }

.bag-empty { padding: 8px 0 56px; }
.bag-empty p { margin: 0 0 24px; color: var(--shop-ink-2); font: 400 16px/1.6 var(--shop-body); }
.bag-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 48px;
  padding: 0 28px;
  border-radius: 8px;
  background: var(--shop-ink);
  color: var(--shop-paper);
  font: 500 15px/1 var(--shop-sans);
  transition: background .2s;
}
.bag-shop:hover { background: #163b62; }

@media (max-width: 1199px) {
  .bag { width: calc(100% - 64px); }
}
@media (max-width: 900px) {
  .bag-layout { grid-template-columns: 1fr; gap: 32px; }
  .bag-title { font-size: 26px; margin-bottom: 20px; }
}
@media (max-width: 600px) {
  .bag { width: calc(100% - 40px); padding-top: 12px; }
  .bag-item { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .bag-item-image { width: 88px; }
  .bag-item-price { grid-column: 2; text-align: left; }
  .bag-item-title { font-size: 16px; }
  .bag-summary { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bag-item-image, .bag-checkout, .bag-shop { transition: none; }
}