/**
 * Surf News cart — deliberately scoped to /cart.
 */
:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) {
  --cart-ink: #17191b;
  --cart-muted: #62676c;
  --cart-rule: #d7d8d5;
  --cart-paper: #fff;
  --cart-wash: #f5f5f2;
  --cart-accent: var(--surf-accent, #8b0000);
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.surf-main--cart, .surf-main:has(.cart-form)) {
  padding-block: clamp(1.5rem, 3vw, 3rem) clamp(3rem, 6vw, 5.5rem);
  background: linear-gradient(180deg, #f1f1ed 0, #fafaf8 320px, #fff 100%);
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.surf-cart-shell, .surf-main > .surf-shell) {
  width: min(calc(100% - 40px), 1100px);
  margin-inline: auto;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .surf-layout:has(.cart-form) {
  display: block;
  width: min(calc(100% - 40px), 1100px);
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .surf-layout:has(.cart-form) .surf-layout__content {
  width: 100%;
  min-width: 0;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .surf-layout:has(.cart-form) .surf-layout__sidebar {
  display: none;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .surf-content-top {
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .surf-cart-content :is(.page-title, h1) {
  margin: 0 0 1.5rem;
  color: var(--cart-ink);
  font: 700 clamp(2.2rem, 5vw, 3.7rem)/1 var(--surf-serif, Georgia, serif);
  letter-spacing: -.04em;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .commerce-cart-form,
:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .views-form-commerce-cart-form-default,
:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .cart-form {
  margin: 0 0 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  overflow-x: auto;
  border: 1px solid var(--cart-rule);
  border-block-start: 4px solid var(--cart-ink);
  border-radius: 6px;
  background: var(--cart-paper);
  box-shadow: 0 14px 36px rgb(23 25 27 / 8%);
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  color: var(--cart-ink);
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) th {
  padding: .7rem .75rem;
  border-block-end: 2px solid var(--cart-ink);
  color: var(--cart-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-align: left;
  text-transform: uppercase;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td {
  padding: 1.15rem .75rem;
  border-block-end: 1px solid var(--cart-rule);
  vertical-align: middle;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td.views-field-purchased-entity,
:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td.views-field-title {
  min-width: 230px;
  font-family: var(--surf-serif, Georgia, serif);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) input[type="number"] {
  width: 76px;
  min-height: 44px;
  padding: .55rem;
  border: 1px solid #aeb4b9;
  border-radius: 4px;
  font: inherit;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .order-total-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 360px;
  margin-inline-start: auto;
  padding-block: .35rem;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .order-total-line__total {
  margin-block-start: .4rem;
  padding-block-start: .8rem;
  border-block-start: 2px solid var(--cart-ink);
  font-size: 1.2rem;
  font-weight: 900;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
  margin: 1.25rem 0 0;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.button, input[type="submit"], button) {
  min-height: 48px;
  padding: .75rem 1.25rem;
  border: 1px solid var(--cart-ink);
  border-radius: 4px;
  background: #fff;
  color: var(--cart-ink);
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.checkout-button, [data-drupal-selector*="checkout"], input[value="Checkout"]) {
  min-width: min(100%, 260px);
  border-color: var(--cart-accent);
  background: var(--cart-accent);
  color: #fff;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.delete-order-item, [data-drupal-selector*="remove-button"]) {
  border-color: #c8c8c4;
  color: #6c2424;
}

:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.button, input[type="submit"], button):hover,
:is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.button, input[type="submit"], button):focus-visible {
  filter: brightness(.93);
}

@media (max-width: 680px) {
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) :is(.surf-cart-shell, .surf-main > .surf-shell) {
    width: min(calc(100% - 24px), 1100px);
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .commerce-cart-form,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .views-form-commerce-cart-form-default,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .cart-form {
    padding: .85rem;
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) table,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) tbody,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) tr,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td {
    display: block;
    width: 100%;
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) tr {
    padding-block: .75rem;
    border-block-end: 1px solid var(--cart-rule);
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border: 0;
    text-align: right;
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td::before {
    color: var(--cart-muted);
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td.views-field-purchased-entity,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) td.views-field-title {
    display: block;
    min-width: 0;
    text-align: left;
  }

  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .form-actions,
  :is(.surf-site--cart, body.path-cart .surf-site, .surf-site:has(.cart-form)) .form-actions :is(.button, input[type="submit"], button) {
    width: 100%;
  }
}