aside.mc { width: min(400px, calc(100vw - 20px)) }

aside.mc .mc-head b { gap: 8px; min-width: 0 }
aside.mc .mc-head .mc-title { white-space: nowrap }

.mc-n, aside.mc .mc-n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 20px;
  display: grid; place-items: center;
  font: 800 11.5px/1 var(--font, Vazirmatn), sans-serif;
  font-variant-numeric: tabular-nums; font-size: calc(11.5px * var(--fz-badge, 1))}

.mc-count {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
  color: var(--muted);
  font: 700 11.5px/1.7 var(--font, Vazirmatn), sans-serif;
  font-variant-numeric: tabular-nums; font-size: calc(11.5px * var(--fz-nav, 1))}

aside.mc .mc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; row-gap: 7px; margin-top: 3px;
}
aside.mc .mc-price { margin-inline-start: auto; font-size: calc(12.5px * var(--fz-price, 1)); font-weight: 900; white-space: nowrap }

.mc-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.mc-calc { font: 600 10.5px/1.6 var(--font, Vazirmatn), sans-serif; color: var(--muted); white-space: nowrap; font-size: calc(10.5px * var(--fz-nav, 1))}
.mc-low  { font: 700 10.5px/1.6 var(--font, Vazirmatn), sans-serif; color: var(--pl-warn, var(--gold)); font-size: calc(10.5px * var(--fz-nav, 1))}

.mc-qty, aside.mc .mc-qty {
  display: inline-flex !important; align-items: center; flex: none;
  visibility: visible !important; opacity: 1 !important; overflow: hidden;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 10px;
}
.mc-qty button, aside.mc .mc-qty button {
  display: grid !important; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
  cursor: pointer; color: var(--ink);
  font: 900 17px/1 var(--font, Vazirmatn), sans-serif;
  transition: background .15s, color .15s; font-size: calc(17px * var(--fz-btn, 1))}
.mc-qty button:hover:not(:disabled), aside.mc .mc-qty button:hover:not(:disabled) {
  background: var(--pl-primary, var(--green)); color: var(--pl-on-primary, #fff);
}
.mc-qty button:disabled, aside.mc .mc-qty button:disabled {
  opacity: .32; cursor: not-allowed; background: transparent; color: var(--muted);
}
.mc-qty input, aside.mc .mc-qty input {
  width: 42px; height: 30px; border: 0; border-inline: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-align: center; outline: 0;
  font: 800 13.5px/1 var(--font, Vazirmatn), sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  -moz-appearance: textfield; font-size: calc(13.5px * var(--fz-form, 1))}
.mc-qty input::-webkit-outer-spin-button,
.mc-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.mc-qty input:focus-visible, aside.mc .mc-qty input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--pl-primary, var(--green));
}

aside.mc .mc-line.is-busy { opacity: .72 }

aside.mc .mc-sum { align-items: baseline; gap: 8px }
aside.mc .mc-sum small {
  font: 600 10.5px/1.6 var(--font, Vazirmatn), sans-serif; color: var(--muted);
  font-variant-numeric: tabular-nums; font-size: calc(10.5px * var(--fz-nav, 1))}

.sf-act .n, .sf-bottomnav .n {
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

@media (max-width: 400px) {
  aside.mc .mc-line { grid-template-columns: 44px 1fr 26px; gap: 8px }
  aside.mc .mc-thumb { width: 44px; height: 44px }
  aside.mc .mc-price { font-size: calc(12px * var(--fz-price, 1))}
}

@media (max-width: 560px) {
  aside.mc {
    max-height: min(78vh, calc(100vh - 90px)) !important;
    top: auto !important;
  }
  .mc-count { padding: 8px 13px; font-size: calc(12px * var(--fz-nav, 1))}
  .mc-qty button, aside.mc .mc-qty button { width: 36px; height: 36px; font-size: calc(19px * var(--fz-btn, 1))}
  .mc-qty input, aside.mc .mc-qty input { width: 48px; height: 36px; font-size: calc(15px * var(--fz-form, 1))}
  aside.mc .mc-row { row-gap: 9px; justify-content: flex-start; gap: 12px }
  aside.mc .mc-price { margin-inline-start: 0; font-size: calc(13px * var(--fz-price, 1))}
  .mc-calc, .mc-low { font-size: calc(11px * var(--fz-nav, 1))}
  aside.mc .mc-del { width: 30px; height: 30px; font-size: calc(14px * var(--fz-price, 1))}
  aside.mc .mc-del svg, aside.mc .mc-del .sf-i { width: 15px; height: 15px }
}

.v9qty input, .v9line input[name^="qty"] { font-variant-numeric: tabular-nums }

.v9cart-count {
  font: 700 11.5px/1.7 var(--font, Vazirmatn), sans-serif;
  color: var(--muted); font-variant-numeric: tabular-nums; font-size: calc(11.5px * var(--fz-base, 1))}
@media (max-width: 560px) { .v9cart-count { font-size: calc(11px * var(--fz-base, 1))} }