/*
 * New design — menu layer (App\Support\NewDesign::menu, body.nd-menu).
 * The new menu design (the prototypes of Monday 13296464653). Look and motion only: js/menu.js keeps every
 * cart state, text and amount; js/new-design-menu.js only adds classes and overlays.
 * `:not(#\9)` lifts a rule to one id of weight so it beats the Sites' class rules
 * (never their !important). Brand = --primary (Branch/Site colour, masterNew).
 */
body.nd-menu {
  --nd-ink: #0d0d0d;
  --nd-muted: rgba(13, 13, 13, .55);
  --nd-panel: #fbf9f6;
  --nd-line: color-mix(in srgb, var(--primary) 14%, transparent);
  --nd-line-2: color-mix(in srgb, var(--primary) 8%, transparent);
  --nd-tint: color-mix(in srgb, var(--primary) 9%, transparent);
  --nd-tint-2: color-mix(in srgb, var(--primary) 17%, transparent);
  --nd-primary-hover: color-mix(in srgb, var(--primary) 78%, #000);
  --nd-e-soft: cubic-bezier(.16, 1, .3, 1);
  --nd-e-fill: cubic-bezier(.76, 0, .24, 1);
  --nd-e-out: cubic-bezier(.32, .72, 0, 1);
}

/* ───────────── Cart: panel and header ───────────── */
/* the panel and its buttons read as one card, as in the design */
body.nd-menu .menu_wrapper .cart .cart_content:not(#\9) {
  padding: 0;
  background: var(--nd-panel);
  border: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
  overflow: hidden;
}

body.nd-menu .menu_wrapper .cart .cart_content > h3:not(#\9) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 20px 22px 15px;
  border-bottom: 1px solid var(--nd-line);
  color: var(--primary);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.5px;
  text-align: start;
}

body.nd-menu .nd-cart-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

body.nd-menu .nd-cart-count.is-bump {
  animation: ndBump .45s var(--nd-e-soft);
}

/* ───────────── Cart: lines ───────────── */
body.nd-menu .menu_wrapper .cart .list:not(#\9) {
  padding: 0 0 4px;
  color: var(--nd-ink);
}

body.nd-menu .menu_wrapper .cart .list .wrapper:not(#\9) {
  margin: 0;
  padding: 8px 12px;
}

body.nd-menu .menu_wrapper .cart .list ul.items:not(#\9) {
  gap: 0;
  padding: 0;
}

/* every line a card: white, a hairline, 8px apart — no drop shadow */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li:not(#\9) {
  position: relative;
  margin: 0 0 8px;
  padding: 12px 10px;
  border: 1px solid rgba(13, 13, 13, .08);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  line-height: 1.25;
  transition: background .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li + li:not(#\9) {
  border-top: 1px solid rgba(13, 13, 13, .08);
}

/* a quiet row hover (the prototype's 8% of a dark brand reads like ~5% of a light one) */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li:hover:not(#\9) {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li.nd-line-new {
  animation: ndLineIn .4s var(--nd-e-soft), ndLineFlash .8s ease-out;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li > .d-flex {
  gap: 10px;
  align-items: flex-start;
}

/* edit — a round tinted button */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit:not(#\9) {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  margin: 10px 0 0;
  border-radius: 50%;
  background: var(--nd-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s var(--nd-e-soft), transform .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit svg {
  width: 13px;
  height: 13px;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit svg path {
  fill: currentColor;
  stroke: none;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit:hover:not(#\9) {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}

/* photo + quantity badge (shown from 2 up) */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .px-1:not(#\9) {
  position: relative;
  flex-shrink: 0;
  padding: 0 !important;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li img.img_product:not(#\9) {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  object-fit: cover;
  background: #efe8dd;
  display: block;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .px-1[data-nd-qty]::after {
  content: attr(data-nd-qty);
  position: absolute;
  top: -6px;
  inset-inline-start: -6px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid var(--nd-panel);
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

/* name, options, price */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .title:not(#\9) {
  min-width: 0;
  padding: 0 !important;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .title-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--nd-ink);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li ul.details:not(#\9) {
  padding: 3px 0 0;
  color: var(--nd-muted);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li ul.details li:not(#\9) {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 1.4;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li span.base-price:not(#\9) {
  display: block;
  margin-top: 5px;
  text-align: start;
  font-size: 14px;
  font-weight: 700;
  color: var(--nd-ink);
}

/* actions column: «+» above, trash under it */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .flex-column:not(#\9) {
  width: 27px;
  flex-shrink: 0;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.plus:not(#\9),
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.minus:not(#\9),
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove:not(#\9) {
  width: 27px;
  height: 27px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(13, 13, 13, .8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .3s var(--nd-e-soft), color .3s var(--nd-e-soft), transform .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.plus svg {
  width: 12px;
  height: 12px;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.plus svg path {
  fill: currentColor;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.plus:hover:not(#\9),
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.minus:hover:not(#\9) {
  background: var(--nd-tint-2);
  color: var(--nd-primary-hover);
  transform: translateY(-1px);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.plus:active:not(#\9),
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove:active:not(#\9),
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit:active:not(#\9) {
  transform: scale(.86);
  transition-duration: .1s;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .delete-btn-wrapper:not(#\9) {
  position: absolute;
  top: 42px;
  inset-inline-end: 8px;
}

/* the platform's «מחק» stays the accessible name; the eye sees a trash icon */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove:not(#\9) {
  font-size: 0;
  text-decoration: none;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li :is(a.remove, a.plus, a.edit)::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--nd-ico) center / contain no-repeat;
  mask: var(--nd-ico) center / contain no-repeat;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove { --nd-ico: var(--nd-ico-trash); }
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.plus { --nd-ico: var(--nd-ico-plus); }
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit { --nd-ico: var(--nd-ico-edit); }

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li :is(a.plus, a.edit) svg:not(#\9) {
  display: none;
}

/* delete reads as a destructive action */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove:hover:not(#\9) {
  background: rgba(180, 35, 24, .1);
  color: #b42318;
  transform: translateY(-1px);
}

body.nd-menu {
  --nd-ico-trash: url("/images/new-design/icons/menu/trash.svg");
  --nd-ico-plus: url("/images/new-design/icons/menu/plus.svg");
  --nd-ico-edit: url("/images/new-design/icons/menu/edit.svg");
  --nd-ico-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.7 12.4a1.6 1.6 0 0 0 1.6 1.3h9a1.6 1.6 0 0 0 1.6-1.2L22 8H6.1'/%3E%3C/svg%3E");
  --nd-ico-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --nd-ico-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --nd-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}

/* a deal's or a coupon's discount line: a slim tinted note, not a product card
   (the attribute outweighs the line rules on both widths) */
body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li[data-discount="true"]:not(#\9) {
  margin: 0 0 8px;
  padding: 8px 12px;
  border: none;
  border-radius: 12px;
  background: var(--nd-tint);
  box-shadow: none;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li[data-discount="true"] .title:not(#\9) {
  min-height: 0;
  padding: 0;
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li[data-discount="true"] .title-name:not(#\9) {
  font-size: 13px;
  font-weight: 700;
  color: var(--nd-primary-hover);
}

body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li[data-discount="true"] span.base-price:not(#\9) {
  height: auto;
  margin: 0;
  font-size: 13px;
}

/* empty cart */
body.nd-menu .nd-cart-empty {
  padding: 44px 20px;
  text-align: center;
}

body.nd-menu .nd-cart-empty::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  background: rgba(13, 13, 13, .4);
  opacity: .5;
  -webkit-mask: var(--nd-ico-cart) center / contain no-repeat;
  mask: var(--nd-ico-cart) center / contain no-repeat;
}

body.nd-menu .nd-cart-empty b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--nd-ink);
}

body.nd-menu .nd-cart-empty span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--nd-muted);
}

/* ───────────── Cart: totals ───────────── */
body.nd-menu .menu_wrapper .cart .list > :is(.subtotal, .discount, .coupon_discount, .shipment, .maam, .total):not(#\9),
body.nd-menu .menu_wrapper .cart .list .fees > .fee:not(#\9) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 22px;
  border: none;
  font-size: 14px;
  color: var(--nd-muted);
}

body.nd-menu .menu_wrapper .cart .list > .subtotal:not(#\9) {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--nd-line);
}

body.nd-menu .menu_wrapper .cart .list > :is(.subtotal, .discount, .coupon_discount, .shipment, .maam, .total) > span:not(#\9),
body.nd-menu .menu_wrapper .cart .list .fees > .fee > span:not(#\9) {
  float: none;
  font-weight: 700;
  color: var(--nd-ink);
  font-variant-numeric: tabular-nums;
}

body.nd-menu .menu_wrapper .cart .list > .total:not(#\9) {
  position: relative;
  margin: 8px 22px 0;
  padding: 12px 0 5px;
  border-top: 1px solid var(--nd-line);
  font-size: 19px;
  font-weight: 900;
  color: var(--nd-ink);
}

body.nd-menu .menu_wrapper .cart .list > .total > span:not(#\9) {
  font-weight: 900;
}

/* the rolling figure: an overlay <i> drawn over the platform's amount, which stays in place */
/* the cart's figures anchor their overlay; the phone bar is already fixed */
body.nd-menu .cart .nd-roll-host {
  position: relative;
}

body.nd-menu .nd-rolling {
  color: transparent !important;
}

body.nd-menu .nd-roll {
  position: absolute;
  inset-inline-end: 0;
  font-style: normal;
  font-weight: inherit;
  white-space: nowrap;
  color: var(--nd-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

body.nd-menu .open_cart .nd-roll {
  color: #fff;
  inset-inline-end: 18px;
}

body.nd-menu .nd-spring {
  display: inline-block;
  animation: ndSpring .42s cubic-bezier(.34, 1.8, .64, 1);
}

/* coupon / points cards: compact, the field and its button on one row */
body.nd-menu .menu_wrapper .cart .list :is(.checkout-coupon-card, .points_payment, .vc_points):not(#\9) {
  margin: 8px 16px 4px;
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid var(--nd-line);
}

body.nd-menu .menu_wrapper .cart .list .checkout-coupon-card:not(#\9) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
}

body.nd-menu .menu_wrapper .cart .list .checkout-coupon-card > :not(.form-control):not(.btn):not(#\9) {
  grid-column: 1 / -1;
}

body.nd-menu .menu_wrapper .cart .list .checkout-coupon-card__heading:not(#\9) {
  gap: 6px;
  margin: 0;
}

body.nd-menu .menu_wrapper .cart .list .checkout-coupon-card__icon:not(#\9) {
  width: 22px;
  height: 22px;
}

body.nd-menu .menu_wrapper .cart .list .checkout-coupon-card__title:not(#\9) {
  font-size: 16px;
  font-weight: 800;
}

body.nd-menu .menu_wrapper .cart .list .checkout-coupon-card__help:not(#\9) {
  margin: 2px 0 8px;
  font-size: 12.5px;
  color: var(--nd-muted);
}

body.nd-menu .menu_wrapper .cart .list :is(.checkout-coupon-card, .points_payment, .vc_points) .form-control:not(#\9) {
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c9c9c9;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  transition: border-color .3s var(--nd-e-soft), box-shadow .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .list :is(.checkout-coupon-card, .points_payment, .vc_points) .form-control:focus:not(#\9) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--nd-tint-2);
}

body.nd-menu .menu_wrapper .cart .list :is(.checkout-coupon-card, .points_payment, .vc_points) .btn:not(#\9) {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .3s var(--nd-e-soft), filter .3s var(--nd-e-soft), box-shadow .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .list :is(.points_payment, .vc_points) .btn:not(#\9) {
  width: 100%;
  margin-top: 8px;
}

body.nd-menu .menu_wrapper .cart .list :is(.checkout-coupon-card, .points_payment, .vc_points) .btn:hover:not(#\9) {
  filter: brightness(.92);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--primary) 80%, transparent);
}

body.nd-menu .menu_wrapper .cart .list :is(.checkout-coupon-card, .points_payment, .vc_points) .btn:active:not(#\9) {
  transform: scale(.96);
  transition-duration: .1s;
}

/* a coupon taken: the field turns to the brand and a «coupon applied» chip pops in under it */
body.nd-menu .menu_wrapper .cart .list .nd-coupon-ok .form-control:not(#\9) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, #fff);
  color: var(--nd-ink);
  opacity: 1;
}

body.nd-menu .nd-coupon-chip {
  display: none;
}

body.nd-menu .menu_wrapper .cart .list .nd-coupon-ok:is(.is-open, .nd-coupon-closing, :not(.is-collapsible)) .nd-coupon-chip:not(#\9) {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-block: 3px;
  padding-inline: 4px 10px;
  border-radius: 999px;
  background: var(--nd-tint);
  color: var(--nd-primary-hover);
  font-size: 12.5px;
  font-weight: 800;
}

body.nd-menu .nd-coupon-chip::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary) var(--nd-ico-check-white) center / 11px no-repeat;
}

body.nd-menu .nd-coupon-just .nd-coupon-chip {
  animation: ndChipIn .55s cubic-bezier(.34, 1.6, .64, 1);
}

body.nd-menu .nd-coupon-just .form-control {
  animation: ndOkRing .9s ease-out;
}

/* folded while applied: the heading carries the code with a check */
body.nd-menu .menu_wrapper .cart .list .nd-coupon-ok:not(.is-open):not(.nd-coupon-closing) .checkout-coupon-card__heading::after {
  content: "✓  " attr(data-nd-code);
  order: 1;
  margin-inline-start: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--nd-tint);
  color: var(--nd-primary-hover);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  animation: ndChipIn .45s cubic-bezier(.34, 1.6, .64, 1);
}

body.nd-menu .menu_wrapper .cart .list .nd-coupon-ok:not(.is-open):not(.nd-coupon-closing) .checkout-coupon-card__arrow {
  order: 2;
  margin-inline-start: 6px;
}

/* the discount line answers when its amount moves */
body.nd-menu .menu_wrapper .cart .list > .discount.nd-row-flash {
  border-radius: 8px;
  animation: ndRowFlash 1s ease-out;
}

/* the folding coupon card (coupon_collapsed): height eases, fields come in one after another.
   menu.js still only toggles .is-open; js/new-design-menu.js animates between the two heights. */
body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible:not(#\9) {
  overflow: hidden;
  transition: box-shadow .3s var(--nd-e-soft), border-color .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible:hover:not(#\9) {
  border-color: var(--nd-tint-2);
}

body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible.nd-coupon-anim > :not(.checkout-coupon-card__heading):not(.nd-coupon-chip):not(#\9) {
  display: block;
}

body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible .checkout-coupon-card__arrow {
  transition: transform .45s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible.is-open > :not(.checkout-coupon-card__heading) {
  animation: ndFieldIn .4s var(--nd-e-soft) both;
}

body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible.is-open > :nth-child(3) { animation-delay: .05s; }
body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible.is-open > :nth-child(n+4) { animation-delay: .1s; }

body.nd-menu .menu_wrapper .cart .checkout-coupon-card.is-collapsible.nd-coupon-closing > :not(.checkout-coupon-card__heading) {
  animation: ndFieldOut .22s ease-in both;
}

/* notes: fine print */
body.nd-menu .menu_wrapper .cart .notes:not(#\9) {
  padding: 12px 22px 14px;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(13, 13, 13, .45);
  text-align: start;
}

body.nd-menu .menu_wrapper .cart .notes::before {
  display: none;
}

/* ───────────── Cart: pay and clear ───────────── */
body.nd-menu .menu_wrapper .cart_controls:not(#\9) {
  align-items: center;
  gap: 10px;
  gap: 8px;
  padding: 2px 14px 14px;
  background: var(--nd-panel);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 34px 64px -44px rgba(0, 0, 0, .32);
}

body.nd-menu .menu_wrapper .cart_controls a.order:not(#\9) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .45s var(--nd-e-soft), box-shadow .45s var(--nd-e-soft), border-color .45s var(--nd-e-soft);
}

/* the darker fill sweeps in from the reading start */
body.nd-menu .menu_wrapper .cart_controls a.order::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nd-primary-hover);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .42s var(--nd-e-fill);
}

body.nd-menu.ltr .menu_wrapper .cart_controls a.order::before {
  transform-origin: left;
}

/* the arrow in a circle, pointing forward */
body.nd-menu .menu_wrapper .cart_controls a.order::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2) var(--nd-ico-arrow) center / 14px no-repeat;
  transition: transform .4s var(--nd-e-out);
}

body.nd-menu.ltr .menu_wrapper .cart_controls a.order::after {
  transform: scaleX(-1);
}

body.nd-menu .menu_wrapper .cart_controls a.order:hover:not(#\9) {
  color: #fff;
  border-color: var(--nd-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .35);
}

body.nd-menu .menu_wrapper .cart_controls a.order:hover::before {
  transform: scaleX(1);
}

body.nd-menu.rtl .menu_wrapper .cart_controls a.order:hover::after {
  transform: translateX(-3px);
}

body.nd-menu.ltr .menu_wrapper .cart_controls a.order:hover::after {
  transform: scaleX(-1) translateX(-3px);
}

body.nd-menu .menu_wrapper .cart_controls a.order:active:not(#\9) {
  transform: translateY(0) scale(.97);
}

/* the idle halo while the cart has lines. It keeps running under the pointer (stopping it
   there snapped the shadow); only the arrow's drift hands over to the hover nudge. */
body.nd-menu .menu_wrapper .cart_controls a.order.nd-nudge:not(#\9) {
  animation: ndPayGlow 2.6s linear infinite;
}

body.nd-menu.rtl .menu_wrapper .cart_controls a.order.nd-nudge:not(:hover)::after {
  animation: ndPayArrow 1.7s ease-in-out infinite;
}

body.nd-menu.ltr .menu_wrapper .cart_controls a.order.nd-nudge:not(:hover)::after {
  animation: ndPayArrowLtr 1.7s ease-in-out infinite;
}

/* the click: a short press-and-release before the platform opens its next step */
/* (the halo restarts after it from zero, so the hand-over is invisible) */
body.nd-menu .menu_wrapper .cart_controls a.order.nd-press:not(#\9) {
  animation: ndPress .32s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart_controls a.clear_cart:not(#\9) {
  flex-grow: 0;
  min-width: 46px;
  padding: 2px;
  border-radius: 12px;
  background: transparent;
  color: rgba(13, 13, 13, .8);
  fill: currentColor;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .35s var(--nd-e-soft), transform .35s var(--nd-e-soft);
}

/* the same bin as on the lines (the design's icon) instead of the platform's filled one */
body.nd-menu .menu_wrapper .cart_controls a.clear_cart svg:not(#\9) {
  display: none;
}

body.nd-menu .menu_wrapper .cart_controls a.clear_cart::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--nd-ico-trash) center / contain no-repeat;
  mask: var(--nd-ico-trash) center / contain no-repeat;
}

body.nd-menu .menu_wrapper .cart_controls a.clear_cart:hover:not(#\9) {
  color: var(--nd-primary-hover);
  fill: currentColor;
  transform: translateY(-2px);
}

body.nd-menu .menu_wrapper .cart_controls a.clear_cart:active:not(#\9) {
  transform: scale(.9);
}

/* the order type card above the cart */
body.nd-menu .menu_wrapper .cart .cart_order_info:not(#\9) {
  border-radius: 20px !important;
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--primary) 70%, transparent);
}

body.nd-menu .menu_wrapper .cart .cart_order_info a.edit {
  transition: transform .3s var(--nd-e-soft);
}

body.nd-menu .menu_wrapper .cart .cart_order_info a.edit:hover {
  transform: rotate(-12deg) scale(1.08);
}

/* ───────────── Desktop: the cart fits the screen ─────────────
   js/new-design-menu.js measures the room under the sticky cart's top and gives the lines
   what is left after the pinned parts (order card, heading, coupon, totals, fine print,
   buttons): the lines area grows with the order and shrinks to its minimum, then scrolls.
   If even that does not fit (a short screen with the coupon open), the middle of the card
   scrolls; nothing is clipped and the buttons stay on screen. */
@media (min-width: 768px) {
  body.nd-menu .menu_wrapper .cart > .wrapper:not(#\9) {
    display: flex;
    flex-direction: column;
    max-height: var(--nd-cart-max, calc(100vh - 170px));
    overflow: visible;
  }

  body.nd-menu .menu_wrapper .cart > .wrapper > *:not(#\9) {
    flex: none;
  }

  body.nd-menu .menu_wrapper .cart > .wrapper > .cart_content:not(#\9) {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

}

/* ───────────── The lines area (desktop and the phone sheet) ─────────────
   Its height comes from js/new-design-menu.js (--nd-lines-max). When there is more to
   scroll, the edges fade and a thumb in the side gutter says where the lines stand. */
body.nd-menu .menu_wrapper .cart .list > .wrapper:not(#\9) {
  position: relative;
  min-height: 0;
  max-height: var(--nd-lines-max, none);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.nd-menu .menu_wrapper .cart .list > .wrapper.nd-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), rgba(0, 0, 0, .15));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), rgba(0, 0, 0, .15));
}

body.nd-menu .menu_wrapper .cart .list > .wrapper.nd-less {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), #000 26px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), #000 26px);
}

body.nd-menu .menu_wrapper .cart .list > .wrapper.nd-more.nd-less {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), #000 26px, #000 calc(100% - 34px), rgba(0, 0, 0, .15));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .15), #000 26px, #000 calc(100% - 34px), rgba(0, 0, 0, .15));
}

/* the coupon card folds: the lines give or take its room in the same motion */
body.nd-menu .menu_wrapper .cart.nd-lines-ease .list > .wrapper:not(#\9) {
  transition: max-height .42s cubic-bezier(.16, 1, .3, 1);
}

/* too little room: the whole middle scrolls as one, the lines are plain content in it */
body.nd-menu .menu_wrapper .cart.nd-one-scroll .list > .wrapper:not(#\9) {
  overflow: visible;
  overscroll-behavior: auto;
  -webkit-mask-image: none;
  mask-image: none;
}

/* where the lines stand: a slim thumb in the side gutter, never over a line */
body.nd-menu .menu_wrapper .cart .list:not(#\9) {
  position: relative;
}

body.nd-menu .menu_wrapper .cart .list > .wrapper:not(#\9) {
  scrollbar-width: none;
}

body.nd-menu .menu_wrapper .cart .list > .wrapper::-webkit-scrollbar {
  display: none;
}

body.nd-menu .nd-scroll-thumb {
  position: absolute;
  top: 0;
  inset-inline-end: 3px;
  width: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 40%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--nd-e-soft);
}

body.nd-menu .nd-scroll-thumb.is-on {
  opacity: 1;
}

/* ───────────── Phone: bottom bar and the cart sheet ───────────── */
@media (max-width: 767px) {
  body.nd-menu .menu_wrapper ul.categories:not(#\9) {
    bottom: 0;
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body.nd-menu .menu_wrapper .open_cart:not(#\9) {
    z-index: 21;
    inset-inline: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45);
    font-weight: 700;
    text-decoration: none;
  }

  body.nd-menu .menu_wrapper .open_cart .count:not(:empty) {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.nd-menu .menu_wrapper .open_cart .price:not(#\9) {
    float: none;
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
  }

  body.nd-menu .menu_wrapper .open_cart.nd-nudge {
    animation: ndPayGlow 2.6s linear infinite;
  }

  /* ── the cart: a sheet from the bottom. menu.js shows it with an inline display:block,
     so the column layout lives one level in, on the panel (.cart > .wrapper). ── */
  body.nd-menu .menu_wrapper .cart:not(#\9) {
    top: auto;
    max-height: calc(100dvh - 12px);
    padding: 0;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: var(--nd-panel);
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .45);
    overscroll-behavior: contain;
  }

  body.nd-menu .menu_wrapper .cart.nd-sheet-in {
    animation: ndSheetIn .42s var(--nd-e-out);
  }

  body.nd-menu .menu_wrapper .cart.nd-sheet-out {
    animation: ndSheetOut .3s var(--nd-e-fill) forwards;
  }

  body.nd-menu .menu_wrapper .cart.nd-sheet-drag {
    transition: none;
  }

  body.nd-menu .menu_wrapper .cart > .wrapper:not(#\9) {
    position: static;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 12px);
    overflow: hidden;
  }

  body.nd-menu .menu_wrapper .cart > .wrapper > *:not(#\9) {
    flex: none;
  }

  /* the middle scrolls only as a last resort (see the desktop note) */
  body.nd-menu .menu_wrapper .cart > .wrapper > .cart_content:not(#\9) {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* the handle */
  body.nd-menu .menu_wrapper .cart > .wrapper::before {
    content: "";
    flex: none;
    display: block;
    width: 42px;
    height: 5px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: rgba(13, 13, 13, .2);
  }

  body.nd-menu .menu_wrapper .cart .cart_content > h3:not(#\9) {
    padding: 6px 16px 8px;
    font-size: 20px;
  }

  /* the figures stay legible but give the lines their room */
  body.nd-menu .menu_wrapper .cart .list > :is(.subtotal, .discount, .coupon_discount, .shipment, .maam, .total):not(#\9),
  body.nd-menu .menu_wrapper .cart .list .fees > .fee:not(#\9) {
    padding: 2px 18px;
    font-size: 13.5px;
  }

  body.nd-menu .menu_wrapper .cart .list > .subtotal:not(#\9) {
    margin-top: 4px;
    padding-top: 10px;
  }

  body.nd-menu .menu_wrapper .cart .list > .total:not(#\9) {
    margin: 6px 18px 0;
    padding: 8px 0 2px;
    font-size: 18px;
  }

  body.nd-menu .menu_wrapper .cart .notes:not(#\9) {
    padding: 6px 18px 8px;
    font-size: 10.5px;
    line-height: 1.5;
  }

  body.nd-menu .menu_wrapper .cart .cart_content > p:not(.notes):not(#\9) {
    margin: 0;
  }

  body.nd-menu .menu_wrapper .cart .list > .wrapper:not(#\9) {
    padding: 6px 12px 4px;
  }

  /* ── lines as cards: photo, name, options, price at the bottom; delete · add · edit
     gathered in one corner on the price's row (the prototype's touch anatomy) ── */
  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li:not(#\9) {
    --act: 36px;
    --act-gap: 6px;
    --act-inset: 12px;
    margin: 0 0 8px;
    padding: var(--act-inset);
    border-radius: 16px;
    background: #fff;
  }


  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li > .d-flex:not(#\9) {
    gap: 12px;
    align-items: stretch;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .px-1:not(#\9) {
    align-self: center;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li img.img_product:not(#\9) {
    width: 76px;
    height: 76px;
    border-radius: 13px;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .px-1[data-nd-qty]::after {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-width: 2.5px;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .title:not(#\9) {
    display: flex;
    flex-direction: column;
    min-height: calc(var(--act) + 40px);
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .title-name:not(#\9) {
    font-size: 15.5px;
    line-height: 1.3;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li ul.details li:not(#\9) {
    font-size: 12.5px;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li span.base-price:not(#\9) {
    margin-top: auto;
    height: var(--act);
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 900;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit:not(#\9),
  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .flex-column:not(#\9),
  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .delete-btn-wrapper:not(#\9) {
    position: absolute;
    top: auto;
    bottom: var(--act-inset);
    margin: 0;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .delete-btn-wrapper:not(#\9) {
    inset-inline-end: var(--act-inset);
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li .flex-column:not(#\9) {
    width: var(--act);
    inset-inline-end: calc(var(--act-inset) + var(--act) + var(--act-gap));
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit:not(#\9) {
    inset-inline-end: calc(var(--act-inset) + 2 * (var(--act) + var(--act-gap)));
  }

  /* one circle for all three (the platform pins «+» to 25px wide); the circle keeps the
     theme's tint, the icon says the action: delete red, add the theme, edit neutral */
  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li :is(a.edit, a.plus, a.remove):not(#\9) {
    flex: 0 0 var(--act);
    width: var(--act);
    height: var(--act);
    border-radius: 50%;
    background: var(--nd-tint);
    color: var(--nd-primary-hover);
  }

  /* the platform's Bootstrap .mb-1 (4px, !important) lifts «+» and edit above the bin */
  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li :is(a.edit, a.plus, a.minus):not(#\9) {
    margin: 0 !important;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove:not(#\9) {
    color: #b42318;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.edit:not(#\9) {
    color: #3d3d3d;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li :is(a.remove, a.plus, a.edit)::before {
    width: 16px;
    height: 16px;
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li :is(a.edit, a.plus, a.remove):active:not(#\9) {
    transform: scale(.86);
  }

  body.nd-menu .menu_wrapper .cart .list :is(ul.items, ul.nd-ghosts) > li a.remove:active:not(#\9) {
    background: rgba(180, 35, 24, .12);
    color: #b42318;
  }

  /* ── the order type card: a compact accordion — the type up front, the details on demand.
     menu.js still swaps its two links and the .more block; the script eases the height. ── */
  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none:not(#\9) {
    position: relative;
    margin: 4px 12px 8px !important;
    padding: 10px 14px 12px !important;
    border-radius: 18px !important;
    overflow: hidden;
    transition: box-shadow .3s var(--nd-e-soft);
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none > p:first-child:not(#\9) {
    margin: 0 !important;
    padding: 0 !important;
    padding-inline-end: 92px !important;
    border: 0 !important;
    font-size: 12px;
    opacity: .85;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none a.edit:not(#\9) {
    position: absolute;
    top: 10px;
    right: auto;
    left: auto;
    inset-inline-end: 56px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .22) !important;
    color: #fff;
    display: grid;
    place-items: center;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none a.edit i {
    color: #fff;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .open_cart_order_info:not(#\9) {
    padding: 2px 0 0;
    padding-inline-end: 92px;
    text-align: start !important;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .open_cart_order_info br {
    display: none;
  }

  /* both chevrons sit in the same corner circle, so the swap reads as one turning arrow */
  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none :is(.open_cart_order_info, .close_cart_order_info) i:not(#\9) {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    font-size: 13px;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .close_cart_order_info i {
    animation: ndChevUp .4s var(--nd-e-soft);
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .open_cart_order_info i {
    animation: ndChevDown .4s var(--nd-e-soft);
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .more:not(#\9) {
    padding-top: 4px;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .more > .close_cart_order_info:not(#\9) {
    position: static;
    height: 0;
    animation: none;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .more > *:not(#\9) {
    padding: 0 !important;
    font-size: 14px;
    animation: ndFieldIn .4s var(--nd-e-soft) both;
  }

  body.nd-menu .menu_wrapper .cart .cart_order_info.d-md-none .more > p:first-child:not(#\9) {
    font-size: 17px;
    font-weight: 800;
  }

  /* ── the buttons: a docked row at the bottom of the sheet, never floating over content ── */
  body.nd-menu .menu_wrapper .cart_controls:not(#\9) {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--nd-line);
    border-radius: 0;
    background: var(--nd-panel);
    box-shadow: 0 -12px 24px -20px rgba(0, 0, 0, .4);
  }

  /* back (pointing back, at the reading start) · clear · pay (forward, at the end) */
  body.nd-menu .menu_wrapper .cart_controls :is(a.menu, a.clear_cart):not(#\9) {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-width: 0;
    max-height: none;
    align-self: center;
    padding: 0;
    border-radius: 50%;
    background: var(--nd-tint);
  }

  body.nd-menu .menu_wrapper .cart_controls a.menu:not(#\9) {
    order: 1;
    background: var(--nd-tint);
    color: var(--nd-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s var(--nd-e-soft), background .3s var(--nd-e-soft);
  }

  body.nd-menu .menu_wrapper .cart_controls a.menu svg:not(#\9) {
    width: 20px;
  }

  /* the platform draws «back» as a right-pointing arrow (Hebrew reading); LTR points it left */
  body.nd-menu.ltr .menu_wrapper .cart_controls a.menu svg:not(#\9) {
    transform: scaleX(-1);
  }

  /* the prototype's bin has no caption; «ריקון סל» stays its accessible name */
  body.nd-menu .menu_wrapper .cart_controls a.clear_cart:not(#\9) {
    order: 2;
    justify-content: center;
    gap: 0;
    color: #b42318;
    font-size: 0;
  }

  body.nd-menu .menu_wrapper .cart_controls a.clear_cart::before {
    width: 19px;
    height: 19px;
  }

  body.nd-menu .menu_wrapper .cart_controls a.order:not(#\9) {
    order: 3;
    flex: 1 1 auto;
    height: 48px;
    align-self: center;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
  }

  body.nd-menu .menu_wrapper .cart_controls a.order::after {
    width: 26px;
    height: 26px;
  }

  body.nd-menu .menu_wrapper .cart_controls :is(a.menu, a.clear_cart):active:not(#\9) {
    transform: scale(.9);
  }

  /* the dimmed menu behind the open sheet */
  body.nd-menu.nd-cart-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(13, 13, 13, .45);
    animation: ndFade .3s ease-out;
  }

  body.nd-menu.nd-cart-open {
    overflow: hidden;
    cursor: pointer;
  }
}

/* the cleared lines drift toward the reading end */
body.nd-menu.rtl .nd-ghosts {
  --nd-ghost-x: -18px;
}

/* less motion asked for: everything lands at once, nothing loops */
@media (prefers-reduced-motion: reduce) {
  body.nd-menu .menu_wrapper :is(.cart, .open_cart),
  body.nd-menu .menu_wrapper :is(.cart, .open_cart) *,
  body.nd-menu .menu_wrapper :is(.cart, .open_cart)::before,
  body.nd-menu .menu_wrapper :is(.cart, .open_cart) *::before,
  body.nd-menu .menu_wrapper :is(.cart, .open_cart) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ───────────── Keyframes ───────────── */
@keyframes ndChevUp {
  from { transform: rotate(180deg); }
  to { transform: none; }
}

@keyframes ndChevDown {
  from { transform: rotate(-180deg); }
  to { transform: none; }
}

@keyframes ndGhostOut {
  to { opacity: 0; transform: translateX(var(--nd-ghost-x, 18px)) scale(.97); }
}

/* the halo: it fades IN from nothing, eases outward and is fully gone before the loop
   restarts — no frame where a solid ring pops back to the edge — while the glow under
   the button breathes with it on the same curve */
@keyframes ndPayGlow {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent),
                0 8px 22px -10px color-mix(in srgb, var(--primary) 45%, transparent);
    animation-timing-function: cubic-bezier(.45, 0, .55, 1);
  }
  22% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 26%, transparent),
                0 12px 28px -8px color-mix(in srgb, var(--primary) 60%, transparent);
    animation-timing-function: cubic-bezier(.25, .6, .4, 1);
  }
  100% {
    box-shadow: 0 0 0 16px color-mix(in srgb, var(--primary) 0%, transparent),
                0 8px 22px -10px color-mix(in srgb, var(--primary) 45%, transparent);
  }
}

@keyframes ndPayArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

@keyframes ndPayArrowLtr {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50% { transform: scaleX(-1) translateX(-5px); }
}

@keyframes ndPress {
  0% { transform: scale(1); }
  35% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@keyframes ndSpring {
  0% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

@keyframes ndBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes ndLineIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes ndLineFlash {
  0% { background: color-mix(in srgb, var(--primary) 9%, transparent); }
  100% { background: transparent; }
}

@keyframes ndSheetIn {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes ndSheetOut {
  from { transform: translateY(var(--nd-drag, 0px)); }
  to { transform: translateY(100%); }
}

@keyframes ndChipIn {
  from { opacity: 0; transform: translateY(4px) scale(.85); }
  to { opacity: 1; transform: none; }
}

@keyframes ndOkRing {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent); }
}

@keyframes ndRowFlash {
  0% { background: color-mix(in srgb, var(--primary) 16%, transparent); }
  100% { background: transparent; }
}

@keyframes ndFieldIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ndFieldOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes ndFade {
  from { opacity: 0; }
  to { opacity: 1; }
}