/* ==========================================================================
   Naturalistico shopping cart — v3 design
   --------------------------------------------------------------------------
   Serves /{locale}/learn/cart (lms/learn/cart.blade.php) and the row partial
   lms/learn/cart_item.blade.php that HomeController@learn_addcart_card renders
   into the page over AJAX.

   Loaded AFTER lms/css/home_v3.css, which is what supplies the tokens
   (--sky/--ink/--line/--radius/--shadow…), the .wrap / .sec / .kicker /
   .sec-head / .btn / .card primitives, the .why grid and the whole .cc course
   card + .rail / .rail-band machinery used by the related-courses rail. This
   file only adds what the cart itself needs.

   Three rules this file lives by — the same three checkout_v3.css follows:

   1. EVERY selector is scoped under .nlp-cart, which sits on #page-content next
      to .nlp-page. The page runs inside lms/layouts/learn_school.blade.php
      (Bootstrap 3 + Nifty + front.css), so scoping buys (0,2,x) against the
      theme's (0,1,x) and there is no !important anywhere in this file.
      Where a home_v3.css rule at the same specificity has to be overridden,
      source order does it — this stylesheet is pushed after that one.

   2. The page's own prefix is ca-. Generic v3 names (.btn, .card, .kicker,
      .why, .rail) are deliberately reused so the cart reads as the same site
      as the homepage; anything cart-specific gets ca-.

   3. A large part of this file restyles LEGACY class names —
      .learn-checkout-cart-card-item, .learn-checkout-cart-section,
      .contain-cart-items, .delete_cart, .magic-checkbox, .cart-total-price,
      .apply-couponcode-button, .notification_label_part, .progress. They are
      kept because the cart's inline JS addresses them by those names AND
      because learn_addcart_card renders a server-side row partial that uses
      them. The redesign therefore reaches those names through CSS instead of
      renaming anything. Check the blade's script block before moving one.
   ========================================================================== */

/* ============ page-level tokens ============
   The cart inherits every colour token from .nlp-page; these are the two
   measurements only this page has. --ca-chrome is what the sticky summary
   parks under: the v3 header row plus the promo strip, both published by
   lms/js/header_v3.js (header_v3.css declares the fallbacks). */
.nlp-cart {
  --ca-chrome: calc(var(--nlp-head-h, 67px) + var(--nlp-promo-h, 0px) + 18px);
  --ca-radius-sm: 14px;
  background: var(--mist);
}

/* ============ theme neutralisers ============
   front.css and Nifty put a radius, a grey shadow and 20px of bottom margin on
   .card, pad .card-body, float .checkbox labels and give .row negative
   margins. Undone once here rather than fought in each component. */
.nlp-cart .card-body,
.nlp-cart .learn-checkout-cart-card-item .card-body { padding: 0; }
.nlp-cart .row { margin-left: 0; margin-right: 0; }
.nlp-cart .checkbox { margin: 0; padding: 0; }
.nlp-cart hr { border-top-color: var(--line); }

/* front.css centres the whole empty block (front.css:2584); the v3 layout is
   art beside copy, so the copy reads left-aligned. */
.nlp-cart .learn-checkout-empty-section { text-align: left; }

/* ============ masthead ============ */
.nlp-cart .ca-mast { padding: 40px 0 22px; }
.nlp-cart .ca-mast h1 { font-size: clamp(30px, 3.6vw, 42px); margin: 8px 0 0; }
.nlp-cart .ca-mast-sub {
  margin-top: 10px; font-size: 14.5px; color: var(--text-soft); max-width: 62ch;
}

/* ============ empty cart ============
   The one state a visitor actually reaches at this URL today: learn_cart()
   redirects to checkout the moment the cart holds anything. So it carries the
   page rather than being an aside — art on the left, the invitation and two
   real exits on the right. */
.nlp-cart .ca-empty-sec { padding-bottom: 8px; }
/* Narrower than the 1320px rail on purpose: the copy is one short paragraph and
   two buttons, and stretched across the full width the card read as mostly
   empty space with the text pinned to its left edge. */
.nlp-cart .ca-empty {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 30px; align-items: center; padding: 38px 42px;
  max-width: 1020px; margin: 0 auto;
}
/* NO backdrop behind the illustration, and that is not an oversight.
   lms/img/learn/empty-cart.png is NOT transparent — it is a white rectangle
   with the trolley printed on it. A tinted blob, a soft disc and a fading
   radial halo were each tried, and each one framed the PNG's white box rather
   than the trolley. On a white card the image has no visible edge at all,
   which is the reason the pre-v3 page could centre it on white and get away
   with it. Only swapping the asset for a cut-out would change this. */
.nlp-cart .ca-empty-art { display: grid; place-items: center; }
.nlp-cart .ca-empty-art img { max-width: 300px; }
.nlp-cart .ca-empty-copy h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 8px 0 12px; }
.nlp-cart .ca-empty-copy p { font-size: 15px; color: var(--text-soft); max-width: 52ch; }
/* trans('lms.explore_the_best_courses…') carries an <a> to the catalogue. */
.nlp-cart .ca-empty-copy p a { color: var(--sky-deep); font-weight: 600; }
.nlp-cart .ca-empty-copy p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nlp-cart .ca-empty-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ============ reassurance list ============
   Shared by the empty state and the foot of the summary. */
.nlp-cart .ca-trust { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.nlp-cart .ca-trust li {
  position: relative; padding-left: 25px; font-size: 13px; color: var(--text-soft);
}
.nlp-cart .ca-trust li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232EA194' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nlp-cart .ca-summary .ca-trust { margin-top: 18px; gap: 8px 18px; }

/* ============ step rail + progress ============
   The pre-v3 page showed a Bootstrap .progress bar sitting at a hardcoded 80%
   next to the words "Almost done", on a page where nothing had been filled in
   yet. The bar itself is kept — .learn-checkout-progress is the class the
   markup has always carried — but it is now the hairline under three named
   steps, and it reads one of three rather than 80% of nothing. Its width is a
   rule below, not an inline style. */
.nlp-cart .ca-steps { margin: 6px 0 26px; }
.nlp-cart .ca-steps-list {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.nlp-cart .ca-step {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-size: 13.5px; color: var(--text-soft);
}
.nlp-cart .ca-step-n {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--mist); color: var(--text-soft);
  font-family: 'Poppins', sans-serif; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nlp-cart .ca-step.is-now { border-color: var(--sky); background: var(--sky-tint); color: var(--sky-deep); font-weight: 600; }
.nlp-cart .ca-step.is-now .ca-step-n { background: var(--sky); color: #fff; }

.nlp-cart .progress {
  height: 6px; margin: 0; border-radius: 999px; overflow: hidden;
  background: var(--sky-line); box-shadow: none;
}
.nlp-cart .progress .learn-checkout-progress {
  display: block; width: 34%; height: 100%; border-radius: 999px; box-shadow: none;
  background: linear-gradient(90deg, var(--sky) 0%, var(--teal) 100%);
  /* Bootstrap's .progress-striped .progress-bar paints its own diagonal
     gradient over the background above, so it is switched off here rather
     than by dropping the class the markup has always carried. */
  background-image: linear-gradient(90deg, var(--sky) 0%, var(--teal) 100%);
  animation: none;
}
.nlp-cart .ca-prog-meta {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 8px; font-size: 12.5px; color: var(--text-soft);
}

/* ============ the two-column grid ============ */
.nlp-cart .ca-flow { padding-bottom: 20px; }
.nlp-cart .ca-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 26px; align-items: start;
}
.nlp-cart .ca-main { min-width: 0; }
.nlp-cart .ca-side { position: sticky; top: var(--ca-chrome); min-width: 0; }

/* ============ certificate offer ============
   The whole-cart "add the printed certificate to everything" upsell. Legacy
   name .learn-checkout-cart-certificate-section is kept; front.css styles it
   and the class is how the section is recognised in the markup. */
.nlp-cart .ca-cert {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 26px; align-items: center; padding: 24px 26px; margin-bottom: 16px;
  background: linear-gradient(180deg, #FBF6E8 0%, var(--white) 60%);
  border-color: #EFE2C2;
}
.nlp-cart .ca-cert-art img { border-radius: var(--ca-radius-sm); }
.nlp-cart .ca-cert .kicker { color: var(--orange-deep); }
.nlp-cart .ca-cert h2 { font-size: 21px; margin: 7px 0 8px; }
.nlp-cart .ca-cert-note { font-size: 13.5px; color: var(--text-soft); }
.nlp-cart .ca-cert-buy {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px;
  padding: 12px 15px; border: 1px solid #EFE2C2; border-radius: var(--ca-radius-sm);
  background: rgba(255,255,255,.75);
}
.nlp-cart .ca-cert-price { display: flex; align-items: baseline; gap: 9px; }
.nlp-cart .ca-cert-price del { color: var(--text-soft); font-size: 14.5px; }
.nlp-cart .ca-cert-price b {
  font-family: 'Fraunces', Georgia, serif; font-size: 23px; font-weight: 600; color: var(--ink);
}
.nlp-cart .ca-cert-buy .checkbox { margin-left: auto; }

/* ============ items ============ */
.nlp-cart .ca-items-head { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 12px; }
.nlp-cart .ca-items-head h2 { font-size: 20px; }
.nlp-cart .ca-items-head .ca-count { margin-left: auto; font-size: 13px; color: var(--text-soft); }
.nlp-cart .ca-items { display: flex; flex-direction: column; gap: 12px; }

/* One cart row. .learn-checkout-cart-card-item is the handle .delete_cart
   walks up to and the one the all-certificates handler looks inside, so it
   stays exactly where it was — it is only the .card next to it that is now a
   v3 surface. */
.nlp-cart .learn-checkout-cart-card-item {
  padding: 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.nlp-cart .learn-checkout-cart-card-item:hover { border-color: var(--sky-line); box-shadow: var(--shadow-lift); }
/* Every declaration below that looks redundant is undoing a front.css rule on
   the same legacy name: .learn-checkout-cart-item is a padded flex row
   (front.css:2756) that goes display:block under 768px, .learn-checkout-cart-left
   is a flex box with overflow-x:hidden (2779), .checkout-left-content is a
   space-between flex column with a 16px left margin (2836), and
   .learn-checkout-physical-certificate is absolutely positioned into the
   bottom-right corner of the row (2831). The grid below replaces all four, so
   each one is reset here rather than fought later. */
.nlp-cart .learn-checkout-cart-item {
  display: grid; position: static; padding: 0;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  grid-template-areas:
    "art body price"
    "art cert cert";
  gap: 6px 18px; align-items: start;
}
.nlp-cart .learn-checkout-cart-left { grid-area: art; display: block; overflow: visible; }
.nlp-cart .checkout-left-image {
  display: block; border-radius: var(--ca-radius-sm); overflow: hidden; background: var(--mist);
}
.nlp-cart .checkout-left-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; }
.nlp-cart .checkout-left-content {
  grid-area: body; min-width: 0; display: block; margin-left: 0; overflow: visible;
}
.nlp-cart .learn-checkout-course-title {
  font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1.24; margin: 1px 0 0;
  /* the legacy .text-overflow is a one-line ellipsis; two lines reads better
     at this width and the titles are long */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; white-space: normal;
}
.nlp-cart .ca-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin-top: 7px; font-size: 12.5px; color: var(--text-soft);
}
.nlp-cart .ca-row-meta .ca-cat { color: var(--sky-deep); font-weight: 600; }
.nlp-cart .ca-row-meta svg { width: 15px; height: 15px; opacity: .65; }
.nlp-cart .ca-row-fact { display: inline-flex; align-items: center; gap: 5px; }
.nlp-cart .ca-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.7;
}
.nlp-cart .ca-tag.best { background: #FBEFCF; color: var(--gold-deep); }
.nlp-cart .ca-tag.newc { background: var(--green-soft); color: var(--green-deep); }
.nlp-cart .ca-tag.enrolled { background: var(--sky-tint); color: var(--sky-deep); }

/* price + remove, top-right of the row */
.nlp-cart .learn-checkout-cart-right {
  grid-area: price; display: flex; align-items: center; gap: 12px;
  justify-content: flex-end; flex-wrap: wrap; position: static; margin-top: 0;
}
.nlp-cart .ca-row-prices { text-align: right; }
.nlp-cart .learn-checkout-cart-right-price {
  display: block; font-family: 'Fraunces', Georgia, serif;
  font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.2; white-space: nowrap;
}
.nlp-cart .ca-row-was { display: block; font-size: 13px; color: var(--text-soft); }
.nlp-cart .delete_cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--white); color: var(--text-soft);
  font-size: 13px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nlp-cart .delete_cart:hover { color: #C2453B; border-color: #F0C9C5; background: #FCEDEC; }
.nlp-cart .delete_cart svg { width: 15px; height: 15px; }

/* the per-course printed-certificate tick */
.nlp-cart .learn-checkout-physical-certificate {
  grid-area: cert; position: static; margin: 8px 0 0; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--ca-radius-sm); background: var(--mist);
}
.nlp-cart .learn-checkout-physical-certificate label {
  display: block; font-size: 13px; color: var(--ink); line-height: 1.5;
}
.nlp-cart .ca-cert-tip { color: var(--text-soft); cursor: help; }
.nlp-cart .ca-cert-tip svg { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }
/* nifty gives every non-empty magic label text-indent: 25px, which the helper
   icon inherits — the live markup cancelled it with an inline style= */
.nlp-cart .magic-checkbox + label .ca-cert-tip { text-indent: 0; }

/* Nifty's magic-checkbox: keep the mechanism, restyle the box and the tick. */
.nlp-cart .magic-checkbox + label::before {
  width: 19px; height: 19px; top: 50%; margin-top: -9.5px; left: 0;
  border: 1.5px solid #C7D5D5; border-radius: 5px; background: var(--white);
  box-shadow: none; transform: none; transition: border-color .15s ease, background .15s ease;
}
.nlp-cart .magic-checkbox + label:hover::before { border-color: var(--sky); }
.nlp-cart .magic-checkbox:checked + label::before { border-color: var(--sky); background: var(--sky); }
.nlp-cart .magic-checkbox:checked + label::after { top: 50%; margin-top: -6px; left: 6px; }
.nlp-cart .magic-checkbox:focus + label::before { box-shadow: 0 0 0 3px var(--sky-tint); }

/* ============ order summary ============
   .card is on this element on purpose: the coupon handler resolves its input
   and its message slot with $(this).closest('.card'). Do not drop it. */
.nlp-cart .ca-summary { padding: 24px 26px; }
.nlp-cart .ca-sum-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.nlp-cart .ca-sum-head h2 { font-size: 20px; }

.nlp-cart .ca-lines { display: flex; flex-direction: column; gap: 2px; }
.nlp-cart .ca-line {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14px; padding: 5px 0; color: var(--text);
}
.nlp-cart .ca-line > span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.nlp-cart .ca-line-off > span:last-child { color: var(--green-deep); }
.nlp-cart .show_discount_message:not(:empty) {
  margin-top: 2px; font-size: 12.5px; color: var(--green-deep);
}

/* ---------- coupon ---------- */
.nlp-cart .ca-coupon { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.nlp-cart .ca-coupon > label {
  display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: normal; float: none; width: auto; padding: 0;
}
.nlp-cart .ca-coupon-row { display: flex; gap: 8px; }
.nlp-cart .ca-coupon-row .form-control {
  flex: 1; min-width: 0; width: auto; height: auto; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--white);
  color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.5; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nlp-cart .ca-coupon-row .form-control::placeholder { color: #9AAAAF; }
.nlp-cart .ca-coupon-row .form-control:focus {
  border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-tint); outline: 0;
}
.nlp-cart .apply-couponcode-button { padding: 10px 18px; font-size: 13px; box-shadow: none; }
.nlp-cart .notification_label_part:not(:empty) { margin-top: 10px; }
.nlp-cart .notification_label_part .alert {
  margin: 0; padding: 10px 13px; border-radius: 11px; font-size: 13px; border: 0;
}
.nlp-cart .notification_label_part .alert-success { background: var(--green-soft); color: var(--green-deep); }
.nlp-cart .notification_label_part .alert-danger { background: #FCEDEC; color: #C2453B; }

/* ---------- total + checkout ---------- */
.nlp-cart .ca-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
}
.nlp-cart .ca-total > span:first-child {
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft);
}
.nlp-cart .ca-total .cart-total-price {
  font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 600;
  color: var(--ink); line-height: 1.1; white-space: nowrap;
}
.nlp-cart .go-checkout { width: 100%; margin-top: 16px; white-space: normal; text-align: center; }

/* the mobile-only collapse control; hidden until the grid stacks */
.nlp-cart .ca-sum-toggle { display: none; }

/* ============ guarantee band ============ */
.nlp-cart .ca-guarantee { background: var(--teal-tint); padding: 52px 0; margin-top: 34px; }
.nlp-cart .ca-guarantee-in {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: center;
}
.nlp-cart .ca-guarantee .kicker { color: var(--teal-deep); }
.nlp-cart .ca-guarantee h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 7px 0 10px; }
.nlp-cart .ca-guarantee p { font-size: 14.5px; color: var(--text-soft); max-width: 62ch; }

/* ============ why (Explore our Philosophy) ============
   .why-grid / .why come from home_v3.css; only the icon tile is this page's,
   because these six cards carry PNG icons rather than the homepage's inline
   SVGs. */
.nlp-cart .ca-why { padding-bottom: 20px; }
.nlp-cart .why .tile { background: var(--teal-tint); }
.nlp-cart .why .tile img { width: 26px; height: 26px; }

/* ============ related courses ============
   .rail-band / .rail / .cc are all home_v3.css; the rail is driven by
   js/home_v3.js, which this page loads. Nothing to add but the band's own
   breathing room. */
.nlp-cart .ca-related { padding-bottom: 40px; }

/* ============ responsive ============ */
@media (max-width: 1100px) {
  .nlp-cart .ca-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; }
  .nlp-cart .ca-empty { padding: 32px 30px; gap: 26px; }
}

@media (max-width: 991px) {
  /* One column. The summary stops being a rail and becomes a collapsed block
     between the items and the checkout button — expanded it would push the
     button off the screen on a phone. */
  .nlp-cart .ca-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nlp-cart .ca-side { position: static; }
  .nlp-cart .ca-summary { padding: 0; overflow: hidden; }

  .nlp-cart .ca-sum-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 15px 18px; border: 0; background: var(--white); text-align: left;
  }
  .nlp-cart .ca-sum-toggle-label {
    flex: 1; min-width: 0; font-family: 'Fraunces', Georgia, serif;
    font-size: 17px; font-weight: 600; color: var(--ink);
  }
  .nlp-cart .ca-sum-caret { color: var(--text-soft); transition: transform .2s ease; flex: 0 0 auto; }
  .nlp-cart .ca-sum-caret svg { width: 16px; height: 16px; }
  .nlp-cart .ca-sum-toggle[aria-expanded="true"] .ca-sum-caret { transform: rotate(180deg); }

  /* .ca-total and the button sit OUTSIDE .ca-sum-body so the price and the way
     forward are on screen in both states. */
  .nlp-cart .ca-sum-body { display: none; padding: 0 18px; }
  .nlp-cart .ca-sum-body.is-open { display: block; }
  .nlp-cart .ca-sum-head { display: none; }
  .nlp-cart .ca-total,
  .nlp-cart .go-checkout,
  .nlp-cart .ca-summary .ca-trust { margin-left: 18px; margin-right: 18px; }
  .nlp-cart .ca-summary .ca-trust { padding-bottom: 20px; }

  .nlp-cart .ca-empty,
  .nlp-cart .ca-cert,
  .nlp-cart .ca-guarantee-in { grid-template-columns: minmax(0, 1fr); }
  .nlp-cart .ca-empty-art img,
  .nlp-cart .ca-guarantee-art { max-width: 240px; margin-left: auto; margin-right: auto; }
  .nlp-cart .ca-cert-art img { max-width: 320px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  .nlp-cart .ca-mast { padding: 26px 0 16px; }
  .nlp-cart .ca-empty { padding: 24px 18px; border-radius: 16px; }
  .nlp-cart .ca-cert { padding: 20px 18px; }
  .nlp-cart .ca-cert-buy .checkbox { margin-left: 0; }
  .nlp-cart .learn-checkout-cart-card-item { padding: 13px; border-radius: 16px; }
  /* The cover shrinks and the price drops under the title: three columns do
     not survive a 360px screen without the title losing most of its width. */
  .nlp-cart .learn-checkout-cart-item {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "art body"
      "price price"
      "cert cert";
    gap: 4px 13px;
  }
  .nlp-cart .learn-checkout-cart-right { justify-content: flex-start; margin-top: 4px; }
  .nlp-cart .ca-row-prices { text-align: left; }
  .nlp-cart .learn-checkout-course-title { font-size: 16px; }
  .nlp-cart .learn-checkout-cart-right-price { font-size: 19px; }
  .nlp-cart .ca-total .cart-total-price { font-size: 26px; }
  .nlp-cart .ca-guarantee { padding: 38px 0; }
  .nlp-cart .ca-steps-list { gap: 6px; }
  .nlp-cart .ca-step { padding: 7px 12px 7px 8px; font-size: 12.5px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .nlp-cart *,
  .nlp-cart *::before,
  .nlp-cart *::after { transition-duration: .01ms; animation-duration: .01ms; }
}