/*
 * Cart page (checkout/cart.twig, checkout/cart_empty.twig, extension/total/*.twig). Loaded only on the cart route.
 * Same look as stylesheet/checkout.css. Selectors carry two ids ("#checkout-cart #content") to outrank the Journal skin CSS,
 * which is inline (printed after this file) and uses !important on some cart buttons.
 */

#checkout-cart,
#error-not-found.checkout-cart-empty {
  --cc-accent: #2563eb;
  --cc-accent-hover: #1d4ed8;
  --cc-accent-soft: #eff6ff;
  --cc-accent-ring: rgba(37, 99, 235, .18);
  --cc-text: #111827;
  --cc-text-soft: #374151;
  --cc-muted: #6b7280;
  --cc-border: #e5e7eb;
  --cc-border-strong: #d1d5db;
  --cc-surface: #fff;
  --cc-surface-soft: #f8fafc;
  --cc-danger: #dc2626;
  --cc-danger-soft: #fef2f2;
  --cc-success: #059669;
  --cc-radius: 14px;
  --cc-radius-sm: 10px;
  --cc-sticky-top: 76px; /* Journal's desktop sticky menu bar (~56px) + breathing room */
}

/* ---------- Alerts (printed above the layout) ---------- */

#checkout-cart > .alert {
  margin-bottom: 20px;
  border-radius: var(--cc-radius-sm);
  font-size: 14px;
}

/* ---------- Layout ---------- */

#checkout-cart #content .cart-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 420px);
  gap: 28px;
  align-items: start;
  color: var(--cc-text);
}

#checkout-cart #content .cart-page > #shopping-cart,
#checkout-cart #content .cart-page > .cart-bottom {
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  flex-basis: auto;
}

/*
 * Breakpoints follow the space the cart actually gets (page width setting, left/right columns), not the viewport:
 * #content and the items card are size containers. Browsers without container queries get viewport fallbacks at the end.
 */
#checkout-cart #content {
  container: cart-content / inline-size;
}

/* side by side only where the item rows still have room for the product name */
@container cart-content (max-width: 1099px) {
  #checkout-cart #content .cart-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* ---------- Items card ---------- */

#checkout-cart #content #shopping-cart {
  container: cart-items / inline-size;
  position: static;
  padding: 8px 24px 4px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

#checkout-cart #content .cart-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 0;
}

#checkout-cart #content .cart-card-title {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cc-text);
  text-align: start;
}

#checkout-cart #content .cart-card-title::before,
#checkout-cart #content .cart-card-title::after {
  display: none;
}

#checkout-cart #content .cart-weight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--cc-surface-soft);
  border: 1px solid var(--cc-border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--cc-muted);
}

/*
 * Lines and the header row share one grid. Every cell has a fixed column, so a cell hidden by Journal's admin column
 * toggles (display:none) leaves its column empty instead of shifting the others.
 */
#checkout-cart #content .cart-lines-head,
#checkout-cart #content .cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 110px 140px 110px 36px;
  column-gap: 20px;
  align-items: center;
}

#checkout-cart #content .cart-lines-head > .td-name { grid-column: 1 / 3; }
#checkout-cart #content .cart-line > .td-image { grid-column: 1; }
#checkout-cart #content .cart-line > .td-name { grid-column: 2; }

#checkout-cart #content .cart-lines-head > .td-price,
#checkout-cart #content .cart-line > .td-price { grid-column: 3; }
#checkout-cart #content .cart-lines-head > .td-qty,
#checkout-cart #content .cart-line > .td-qty { grid-column: 4; }
#checkout-cart #content .cart-lines-head > .td-total,
#checkout-cart #content .cart-line > .td-total { grid-column: 5; }
#checkout-cart #content .cart-line > .td-remove { grid-column: 6; }

#checkout-cart #content .cart-lines-head {
  padding: 10px 0;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cc-muted);
}

#checkout-cart #content .cart-lines-head > .td-price,
#checkout-cart #content .cart-lines-head > .td-total {
  text-align: end;
}

#checkout-cart #content .cart-lines-head > .td-qty {
  text-align: center;
}

#checkout-cart #content .cart-line {
  min-height: 112px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cc-border);
  transition: opacity .2s ease;
}

#checkout-cart #content .cart-line:last-child {
  border-bottom: 0;
}

#checkout-cart #content .cart-line.out-of-stock {
  margin: 0 -24px;
  padding-inline: 24px;
  background: var(--cc-danger-soft);
}

#checkout-cart #content .cart-line > * {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
}

#checkout-cart #content .cart-line .td-image a,
#checkout-cart #content .cart-line .cart-line-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
}

#checkout-cart #content .cart-line .cart-line-icon {
  font-size: 30px;
  color: var(--cc-accent);
  background: var(--cc-accent-soft);
  border-color: transparent;
}

#checkout-cart #content .cart-line .td-image img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}

/* no display on .td-name / .stepper: Journal's cartPageNameVisibility / cartPageQuantityVisibility toggles set it */
#checkout-cart #content .cart-line .td-name {
  white-space: normal;
}

#checkout-cart #content .cart-line .cart-line-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

#checkout-cart #content .cart-line-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cc-text);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#checkout-cart #content a.cart-line-name:hover {
  color: var(--cc-accent);
}

#checkout-cart #content .cart-line .td-model,
#checkout-cart #content .cart-line-meta {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cc-muted);
}

#checkout-cart #content .cart-line-reward {
  color: var(--cc-success);
}

#checkout-cart #content .stock-indicator {
  font-weight: 700;
  color: var(--cc-danger);
}

#checkout-cart #content .cart-line .td-price {
  font-size: 14px;
  color: var(--cc-muted);
  text-align: end;
  white-space: nowrap;
}

#checkout-cart #content .cart-line .td-total {
  font-size: 16px;
  font-weight: 600;
  color: var(--cc-text);
  text-align: end;
  white-space: nowrap;
}

/* quantity: Journal stepper restyled like the checkout one */
#checkout-cart #content .cart-line .td-qty {
  display: flex;
  justify-content: center;
}

#checkout-cart #content .cart-line .stepper {
  --stepper-height: 38px;
  align-items: stretch;
  width: auto;
  max-width: none;
  height: 38px;
  overflow: hidden;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border-strong);
  border-radius: 8px;
}

#checkout-cart #content .cart-line .stepper button {
  /* Journal's "default" stepper layout pins the buttons absolutely to the right edge */
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 16px;
  color: var(--cc-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

#checkout-cart #content .cart-line .stepper button:hover {
  background: #f1f5f9;
  color: var(--cc-text);
}

#checkout-cart #content .cart-line .stepper input.form-control {
  width: 42px;
  max-width: none !important;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--cc-text) !important;
  text-align: center;
}

#checkout-cart #content .cart-line .stepper input.form-control:focus {
  outline: 0;
  background: var(--cc-accent-soft) !important;
}

/* quantities auto-submit; the update button only serves Enter / no-JS, so it is kept but visually hidden */
#checkout-cart #content .cart-line .btn-update.btn {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

#checkout-cart #content .cart-line-qty {
  font-weight: 600;
  color: var(--cc-muted);
}

#checkout-cart #content .cart-line .btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 17px;
  color: #9ca3af;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

#checkout-cart #content .cart-line .btn-remove:hover,
#checkout-cart #content .cart-line .btn-remove:focus-visible {
  background: var(--cc-danger-soft);
  color: var(--cc-danger);
  outline: 0;
}

/* while the cart form posts after a quantity change */
#checkout-cart #content #shopping-cart.is-updating .cart-lines {
  opacity: .5;
  pointer-events: none;
  cursor: progress;
}

/* narrower items card: smaller image and price/quantity/total columns */
@container cart-items (max-width: 819px) {
  #checkout-cart #content .cart-lines-head,
  #checkout-cart #content .cart-line {
    grid-template-columns: 72px minmax(160px, 1fr) 90px 124px 96px 36px;
    column-gap: 12px;
  }

  #checkout-cart #content .cart-line .td-image a,
  #checkout-cart #content .cart-line .cart-line-icon {
    width: 72px;
    height: 72px;
  }
}

/* narrow items card (phones): image | name + remove, then price, then quantity + total */
@container cart-items (max-width: 639px) {
  #checkout-cart #content .cart-lines-head {
    display: none;
  }

  #checkout-cart #content .cart-line {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
      "img name remove"
      "img price price"
      "img qty total";
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    min-height: 0;
  }

  #checkout-cart #content .cart-line > .td-image { grid-column: auto; grid-area: img; }
  #checkout-cart #content .cart-line > .td-name { grid-column: auto; grid-area: name; }
  #checkout-cart #content .cart-line > .td-price { grid-column: auto; grid-area: price; text-align: start; font-size: 13px; }
  #checkout-cart #content .cart-line > .td-qty { grid-column: auto; grid-area: qty; justify-content: flex-start; margin-top: 4px; }
  #checkout-cart #content .cart-line > .td-total { grid-column: auto; grid-area: total; align-self: center; margin-top: 4px; }
  #checkout-cart #content .cart-line > .td-remove { grid-column: auto; grid-area: remove; margin: -6px -8px 0 0; }

  #checkout-cart #content .cart-line .td-image a,
  #checkout-cart #content .cart-line .cart-line-icon {
    width: 72px;
    height: 72px;
  }

  #checkout-cart #content .cart-line-name {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  #checkout-cart #content #shopping-cart {
    padding: 4px 16px 0;
  }

  #checkout-cart #content .cart-line.out-of-stock {
    margin: 0 -16px;
    padding-inline: 16px;
  }
}

/* ---------- Summary ---------- */

#checkout-cart #content .cart-bottom {
  position: static;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

@container cart-content (min-width: 1100px) {
  #checkout-cart #content .cart-bottom {
    position: sticky;
    top: var(--cc-sticky-top);
    z-index: 2;
  }
}

#checkout-cart #content .cart-summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
}

#checkout-cart #content .cart-total {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#checkout-cart #content .cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--cc-muted);
}

#checkout-cart #content .cart-total-row .total-value {
  color: var(--cc-text);
  white-space: nowrap;
}

#checkout-cart #content .cart-total-row:last-child {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--cc-border);
  font-size: 16px;
  font-weight: 600;
  color: var(--cc-text);
}

#checkout-cart #content .cart-total-row:last-child .total-value {
  font-size: 22px;
  font-weight: 700;
}

#checkout-cart #content .cart-summary-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

#checkout-cart #content .cart-summary-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0 20px !important;
  border-radius: var(--cc-radius-sm) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#checkout-cart #content .cart-summary-buttons .btn-checkout {
  min-height: 54px;
  background: var(--cc-accent) !important;
  border: 1px solid var(--cc-accent) !important;
  color: #fff !important;
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px rgba(37, 99, 235, .25);
}

#checkout-cart #content .cart-summary-buttons .btn-checkout:hover,
#checkout-cart #content .cart-summary-buttons .btn-checkout:focus {
  background: var(--cc-accent-hover) !important;
  border-color: var(--cc-accent-hover) !important;
}

#checkout-cart #content .cart-summary-buttons .btn-checkout .fa {
  font-size: 14px;
  transition: transform .15s ease;
}

#checkout-cart #content .cart-summary-buttons .btn-checkout:hover .fa {
  transform: translateX(3px);
}

#checkout-cart #content .cart-summary-buttons .btn-continue {
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border-strong) !important;
  color: var(--cc-text) !important;
}

#checkout-cart #content .cart-summary-buttons .btn-continue:hover,
#checkout-cart #content .cart-summary-buttons .btn-continue:focus {
  background: var(--cc-surface-soft) !important;
  border-color: #9ca3af !important;
}

#checkout-cart #content .cart-pdf {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cc-muted);
  text-decoration: none;
}

#checkout-cart #content .cart-pdf:hover {
  color: var(--cc-accent);
}

/* ---------- Coupon / gift certificate / shipping estimate / reward panels ---------- */

#checkout-cart #content .cart-panels {
  margin: 0;
  padding: 16px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--cc-border);
  box-shadow: none;
}

/* no display here: Journal's cartPagePanelsTitleVisibility / TextVisibility toggles set it */
#checkout-cart #content .cart-panels .title {
  margin: 0 0 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cc-muted);
  text-align: start;
  white-space: normal;
}

#checkout-cart #content .cart-panels .title::before,
#checkout-cart #content .cart-panels .title::after {
  display: none;
}

#checkout-cart #content .cart-panels > p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--cc-muted);
}

#checkout-cart #content .cart-panels .panel-group {
  margin: 0;
}

#checkout-cart #content .cart-panels .panel {
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cc-border);
  border-radius: 0;
  box-shadow: none;
}

#checkout-cart #content .cart-panels .panel:last-child {
  border-bottom: 0;
}

#checkout-cart #content .cart-panels .panel-heading {
  padding: 0;
  background: none;
  border: 0;
}

#checkout-cart #content .cart-panels .panel-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
}

#checkout-cart #content .cart-panels .panel-title > a {
  position: relative;
  display: block;
  padding: 13px 28px 13px 0;
  color: var(--cc-text);
  text-decoration: none;
}

#checkout-cart #content .cart-panels .panel-title > a:hover {
  color: var(--cc-accent);
}

/* Journal's accordion icon (a::before) and the template's caret, replaced by the chevron below */
#checkout-cart #content .cart-panels .panel-title > a::before,
#checkout-cart #content .cart-panels .panel-title > a .fa {
  display: none;
}

/* chevron like the checkout toggles; points up while the panel is open (or always open per the admin setting) */
#checkout-cart #content .cart-panels .panel-title > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--cc-muted);
  border-bottom: 2px solid var(--cc-muted);
  transform: rotate(45deg);
  transition: transform .15s ease, margin-top .15s ease;
}

#checkout-cart #content .cart-panels .panel:has(.panel-collapse.in) .panel-title > a::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

#checkout-cart #content .cart-panels .panel-collapse > .panel-body,
#checkout-cart #content .cart-panels .panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0 0 16px;
  border: 0;
}

#checkout-cart #content .cart-panels .panel-body > p {
  margin: 0;
  font-size: 13px;
  color: var(--cc-muted);
}

#checkout-cart #content .cart-panels .control-label {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-text-soft);
  text-align: start;
}

#checkout-cart #content .cart-panels .input-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
}

#checkout-cart #content .cart-panels .input-group-btn {
  display: block;
  flex: none;
  width: auto;
}

#checkout-cart #content .cart-panels .input-group > .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

#checkout-cart #content .cart-panels .form-control {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px !important;
  background-color: var(--cc-surface) !important;
  border: 1px solid var(--cc-border-strong) !important;
  border-radius: var(--cc-radius-sm) !important;
  box-shadow: none;
  font-size: 15px !important;
  color: var(--cc-text);
}

#checkout-cart #content .cart-panels .form-control:focus {
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 3px var(--cc-accent-ring);
  outline: 0;
}

#checkout-cart #content .cart-panels .btn {
  min-height: 44px;
  margin: 0;
  padding: 0 18px !important;
  background: var(--cc-surface) !important;
  border: 1px solid var(--cc-border-strong) !important;
  border-radius: var(--cc-radius-sm) !important;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cc-text) !important;
  box-shadow: none;
  white-space: nowrap;
}

#checkout-cart #content .cart-panels .btn:hover,
#checkout-cart #content .cart-panels .btn:focus {
  background: var(--cc-surface-soft) !important;
  border-color: #9ca3af !important;
}

/* shipping estimate: stacked fields instead of Bootstrap's horizontal form */
#checkout-cart #content .cart-panels .form-horizontal .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
}

#checkout-cart #content .cart-panels .form-horizontal .form-group > [class*="col-"] {
  float: none;
  width: 100%;
  padding: 0;
}

#checkout-cart #content .cart-panels .form-horizontal .btn {
  width: 100%;
  margin-top: 4px;
}

#checkout-cart #content .cart-panels .text-danger {
  font-size: 12.5px;
  color: var(--cc-danger);
}

#checkout-cart #content .cart-panels .alert {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--cc-radius-sm);
  font-size: 13px;
}

/* ---------- Empty cart ---------- */

#error-not-found.checkout-cart-empty #content .cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 24px auto 40px;
  padding: 48px 24px;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  text-align: center;
}

#error-not-found.checkout-cart-empty #content .cart-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--cc-accent-soft);
  font-size: 32px;
  color: var(--cc-accent);
}

#error-not-found.checkout-cart-empty #content .cart-empty-text {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cc-text);
}

#error-not-found.checkout-cart-empty #content .cart-empty .btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 24px !important;
  background: var(--cc-accent) !important;
  border: 1px solid var(--cc-accent) !important;
  border-radius: var(--cc-radius-sm) !important;
  font-size: 15px;
  font-weight: 600;
  color: #fff !important;
}

#error-not-found.checkout-cart-empty #content .cart-empty .btn:hover {
  background: var(--cc-accent-hover) !important;
}

/* ---------- Fallback for browsers without container queries (viewport breakpoints) ---------- */

@supports not (container-type: inline-size) {
  @media (max-width: 1199px) {
    #checkout-cart #content .cart-page {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }
  }

  @media (min-width: 1200px) {
    #checkout-cart #content .cart-bottom {
      position: sticky;
      top: var(--cc-sticky-top);
      z-index: 2;
    }
  }

  @media (min-width: 768px) and (max-width: 1399px) {
    #checkout-cart #content .cart-lines-head,
    #checkout-cart #content .cart-line {
      grid-template-columns: 72px minmax(160px, 1fr) 90px 124px 96px 36px;
      column-gap: 12px;
    }

    #checkout-cart #content .cart-line .td-image a,
    #checkout-cart #content .cart-line .cart-line-icon {
      width: 72px;
      height: 72px;
    }
  }

  @media (max-width: 767px) {
    #checkout-cart #content .cart-lines-head {
      display: none;
    }

    #checkout-cart #content .cart-line {
      grid-template-columns: 72px minmax(0, 1fr) auto;
      grid-template-areas:
        "img name remove"
        "img price price"
        "img qty total";
      column-gap: 14px;
      row-gap: 6px;
      align-items: start;
      min-height: 0;
    }

    #checkout-cart #content .cart-line > .td-image { grid-column: auto; grid-area: img; }
    #checkout-cart #content .cart-line > .td-name { grid-column: auto; grid-area: name; }
    #checkout-cart #content .cart-line > .td-price { grid-column: auto; grid-area: price; text-align: start; font-size: 13px; }
    #checkout-cart #content .cart-line > .td-qty { grid-column: auto; grid-area: qty; justify-content: flex-start; margin-top: 4px; }
    #checkout-cart #content .cart-line > .td-total { grid-column: auto; grid-area: total; align-self: center; margin-top: 4px; }
    #checkout-cart #content .cart-line > .td-remove { grid-column: auto; grid-area: remove; margin: -6px -8px 0 0; }

    #checkout-cart #content .cart-line .td-image a,
    #checkout-cart #content .cart-line .cart-line-icon {
      width: 72px;
      height: 72px;
    }

    #checkout-cart #content .cart-line-name {
      font-size: 14px;
    }
  }
}