/* Niguro page CSS: commerce pages (built on the page kit in niguro.css; see dev/niguro-kit.md) */

/* =============================== */
/* Commerce hubs — market, offers, jobs, courses, funding (.ng-cm). Kit frame, hero and cards; here:
   the search bar with the create action, the list head with Sngine's filters as pill dropdowns,
   category chips (phones/tablets) or a side nav (1024px+), the card grids (products, offers,
   courses, funding), the job rows, the cart, orders and sales, and the pager. Tokens only. */
/* =============================== */

/* cards here are spaced by the kit's gaps, not by the main bar's card margin */
.ng-hubwrap.ng-cm .card { margin-bottom: 0; }

/* ------------------------------- */
/* the top bar: Sngine's search form (+ location on the market) and the create button */
/* ------------------------------- */
.ng-cm-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-cm-bar__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 0; }
.ng-cm-bar__form.has-loc .ng-cm-bar__field--q { grid-column: 1 / -1; }
.ng-cm-bar__field { position: relative; display: flex; align-items: center; min-width: 0; margin: 0; }
.ng-cm-bar__field > .ng-ico { position: absolute; left: 14px; z-index: 1; width: 18px; height: 18px; color: var(--ng-sub); pointer-events: none; }
.ng-cm-bar__field .form-control { width: 100%; padding-left: 42px; }
.ng-cm-bar .ng-pbtn { height: var(--ng-field-h); } /* as .ng-filterbar: matches the fields beside it */
/* funding: the list head and the create button on one card */
.ng-cm-bar--head { padding: 12px 12px 12px 16px; }
.ng-cm-bar--head .ng-cm-head { flex: 1; min-width: 0; margin: 0; }
.ng-cm-bar--head .ng-cm-bar__create { height: 38px; }
@media (min-width: 768px) {
  .ng-cm-bar { flex-direction: row; align-items: center; }
  .ng-cm-bar__form { flex: 1; min-width: 0; }
  .ng-cm-bar__form.has-loc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
  .ng-cm-bar__form.has-loc .ng-cm-bar__field--q { grid-column: auto; }
  .ng-cm-bar__create { flex: none; }
}

/* the tab bar's create button (cart, orders, sales): the label from 576px */
.ng-cm-tabbtn { width: 38px; padding: 0; }
.ng-cm-tabbtn > span { display: none; }
@media (min-width: 576px) { .ng-cm-tabbtn { width: auto; padding: 0 16px; } .ng-cm-tabbtn > span { display: inline; } }

/* ------------------------------- */
/* a section: head + content, 12px apart */
/* ------------------------------- */
.ng-cm-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ng-cm-sec > .ng-sechead { margin: 0 2px; }

/* the list head: title + count, a line under it, and the filters on the right */
.ng-cm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin: 0 2px; }
.ng-cm-head__title { min-width: 0; }
.ng-cm-head__title h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-cm-head__count {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--ng-fill); color: var(--ng-sub); font-size: 12.5px; font-weight: 700; letter-spacing: 0;
}
.ng-cm-head__sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ng-sub); }
.ng-cm-head__sub b { color: var(--ng-ink-strong); }
.ng-cm-head__sub a { font-weight: 600; color: var(--ng-brand); text-decoration: none; }
.ng-cm-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* pill dropdown triggers (sort, distance, country) and their menus */
.ng-cm-drop {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--ng-card); box-shadow: inset 0 0 0 1px var(--ng-line); color: var(--ng-ink-strong); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.ng-cm-drop:hover, .ng-cm-drop[aria-expanded="true"] { background: var(--ng-fill); }
.ng-cm-drop .ng-ico { width: 16px; height: 16px; color: var(--ng-sub); }
.ng-cm-drop .ng-cm-drop__caret { width: 14px; height: 14px; }
.ng-cm-drop__label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ng-cm-dmenu { min-width: 200px; }
.ng-cm-dmenu .dropdown-item { display: flex; align-items: center; min-height: 38px; font-size: 14px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-cm-dmenu .dropdown-item.active { color: #fff; }
.ng-cm-dmenu__scroll { max-height: 320px; overflow-y: auto; }
.ng-cm-distance { display: flex; flex-direction: column; gap: 10px; width: 260px; margin: 0; padding: 8px; }
.ng-cm-distance .form-label { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-cm-distance .form-range { accent-color: var(--ng-brand); }
.ng-cm-distance .input-group-text { border: 0; border-radius: 12px 0 0 12px; background: var(--ng-fill-2); color: var(--ng-sub); font-size: 13px; font-weight: 700; }

/* ------------------------------- */
/* categories: chips under 1024px, a side nav card from 1024px */
/* ------------------------------- */
.ng-cm-chips > a .ng-ico { width: var(--ng-chip-ico); height: var(--ng-chip-ico); /* [Chips: one size] */ }
.ng-cm-chips .ng-cm-cat__more { width: 14px; height: 14px; opacity: .7; }
.ng-cm-cats { display: none; }
@media (min-width: 1024px) {
  .ng-cm-chips { display: none; }
  .ng-cm-cats { display: block; }
}
.ng-cm-cats__nav { max-height: min(440px, calc(100vh - 360px)); min-height: 220px; overflow-y: auto; border-radius: 0 0 var(--ng-r) var(--ng-r); scrollbar-width: thin; }
.ng-cm-cats__nav a { min-height: 40px; gap: 10px; font-size: 14px; }
.ng-cm-cats__nav .ng-cm-cat__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-cm-cat__dot { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.ng-cm-cat__dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ng-line); }
.ng-cm-cats__nav a:hover .ng-cm-cat__dot::before { background: var(--ng-sub); }
.ng-cm-cats__nav a.active .ng-cm-cat__dot::before { background: var(--ng-brand); }
.ng-cm-cats__nav .ng-cm-cat__more { width: 16px; height: 16px; }

/* ------------------------------- */
/* card grids */
/* ------------------------------- */
.ng-cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ng-cm-min, 240px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ng-cm-grid--products { --ng-cm-min: 150px; }
@media (min-width: 768px) { .ng-cm-grid--products { --ng-cm-min: 180px; } }
.ng-cm-item { display: flex; min-width: 0; }

.ng-cm-card {
  container-type: inline-size; position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; overflow: hidden;
  border-radius: var(--ng-r); background: var(--ng-card); color: var(--ng-ink); text-decoration: none;
}
.ng-cm-card__media { position: relative; display: block; flex: none; aspect-ratio: var(--ng-cm-ratio, 16 / 10); overflow: hidden; background: var(--ng-fill); }
.ng-cm-card--product .ng-cm-card__media { --ng-cm-ratio: 1 / 1; }
.ng-cm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .3s ease; }
.ng-cm-card:hover .ng-cm-card__media img { scale: 1.04; }
.ng-cm-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 14px; }
@media (min-width: 768px) { .ng-cm-card__body { padding: 14px 16px 16px; } }
.ng-cm-card__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ng-ink-strong); text-decoration: none;
}
.ng-cm-card__title:hover { color: var(--ng-ink-strong); text-decoration: underline; }
.ng-cm-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ng-sub); }
.ng-cm-card__meta .ng-ico { flex: none; width: 14px; height: 14px; }
/* a meta group (icon + text): groups wrap to their own line on narrow cards, long text ellipsizes */
.ng-cm-m { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.ng-cm-m > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-cm-card__rate .ng-ico { color: hsl(42 90% 48%); }
.ng-cm-card__rate b { color: var(--ng-ink-strong); }
.ng-cm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ng-line); }
.ng-cm-card__meta + .ng-cm-card__foot, .ng-cm-fund + .ng-cm-card__foot { margin-top: auto; }
.ng-cm-card__cta { margin-top: 6px; }
.ng-cm-card--locked { padding: 8px; }

/* who posted it (seller, page, teacher, organiser) */
.ng-cm-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ng-ink); text-decoration: none; }
.ng-cm-who img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ng-cm-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-cm-who:hover { color: var(--ng-ink-strong); }
.ng-cm-who:hover span { text-decoration: underline; }

/* stock state, enrolled, "From" price */
.ng-cm-stock { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ng-sub); white-space: nowrap; }
.ng-cm-stock .ng-ico { width: 14px; height: 14px; }
.ng-cm-stock.is-in::before, .ng-cm-stock.is-out::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ng-cm-stock.is-in { color: var(--ng-brand); }
.ng-cm-stock.is-out { color: hsl(var(--destructive)); }
/* narrow cards (two-up on phones): "In stock" keeps its dot, the words stay for screen readers */
@container (max-width: 200px) {
  .ng-cm-stock.is-in { gap: 0; font-size: 0; }
  .ng-cm-card__body { padding: 10px 12px 12px; }
}
.ng-cm-from { flex: none; font-size: 12.5px; color: var(--ng-sub); white-space: nowrap; }
.ng-cm-from b { font-size: 14px; color: var(--ng-ink-strong); }

/* on the image: flags (top-left), promoted (top-right), the price (bottom-left) */
.ng-cm-card__flags { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.ng-cm-flag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 9px; border-radius: 999px;
  background: hsl(0 0% 0% / .55); color: #fff; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ng-cm-flag .ng-ico { flex: none; width: 13px; height: 13px; }
.ng-cm-flag--deal { height: 28px; padding: 0 11px; background: hsl(var(--destructive)); font-size: 13px; font-weight: 800; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ng-cm-flag--done { background: var(--ng-brand); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ng-cm-flag--promo { position: absolute; top: 10px; right: 10px; max-width: calc(100% - 20px); background: var(--ng-card); color: var(--ng-ink-strong); box-shadow: 0 2px 8px hsl(220 30% 10% / .18); }
.ng-cm-flag--promo .ng-ico { color: hsl(38 90% 45%); }
.ng-cm-card__flags:has(+ .ng-cm-flag--promo) { right: 110px; }
.ng-cm-price {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: inline-flex; align-items: center; height: 30px; padding: 0 11px;
  border-radius: 999px; background: var(--ng-card); color: var(--ng-ink-strong); font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px hsl(220 30% 10% / .18);
}
.ng-cm-price.is-free { background: var(--ng-brand); color: #fff; }

/* funding: raised of goal and the progress bar (brand) */
.ng-cm-fund { display: flex; flex-direction: column; gap: 7px; margin: 2px 0; }
.ng-cm-fund__nums { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ng-sub); }
.ng-cm-fund__nums b { font-size: 14.5px; color: var(--ng-ink-strong); }
.ng-cm-fund__nums .ng-cm-fund__pct { flex: none; font-size: 13px; color: var(--ng-brand); }
.ng-cm-fund__bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ng-fill); }
.ng-cm-fund__bar span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--ng-brand); }

/* funding: the grid and Sngine's "More Funding" loader (ajax.load_more prints __ng_commerce_funding.tpl too) */
.ng-cm-fundwrap { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------- */
/* jobs: rows on a list card (logo | title, who, tags | salary + Apply) */
/* ------------------------------- */
.ng-cm-job { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.ng-cm-job:hover { background: var(--ng-fill); }
.ng-cm-job__logo { display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 14px; background: var(--ng-fill); }
.ng-cm-job__logo img { width: 100%; height: 100%; object-fit: cover; }
.ng-cm-job .ng-lrow__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.ng-cm-job .ng-lrow__sub { display: flex; align-items: center; gap: 4px; }
.ng-cm-job__who { font-weight: 600; color: var(--ng-ink); text-decoration: none; }
.ng-cm-job__who:hover { color: var(--ng-ink-strong); text-decoration: underline; }
.ng-cm-job__fact { display: inline-flex; align-items: center; gap: 4px; }
.ng-cm-job__fact .ng-ico { width: 14px; height: 14px; }
.ng-cm-job__side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 0; border-top: 1px dashed var(--ng-line); }
.ng-cm-job__pay { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ng-cm-job__pay b { font-size: 14px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-cm-job__pay small { font-size: 12px; color: var(--ng-sub); }
.ng-cm-job__side .ng-pbtn { flex: none; }
.ng-cm-jobs { container-type: inline-size; }
@container (min-width: 640px) {
  .ng-cm-job { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .ng-cm-job__side { grid-column: auto; gap: 16px; padding: 0; border: 0; }
  .ng-cm-job__pay { align-items: flex-end; text-align: right; }
}
.ng-cm-job--locked { display: block; }

/* ------------------------------- */
/* the sidebar: the promo card, with the member's balance and links on its panel */
/* ------------------------------- */
.ng-cm-promo__panel { display: flex; flex-direction: column; gap: 10px; }
.ng-cm-promo__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ng-sub); }
.ng-cm-promo__row b { flex: none; font-size: 18px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-cm-promo__links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--ng-line); }
.ng-cm-promo__links a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ng-brand); text-decoration: none; }
.ng-cm-promo__links a:hover { text-decoration: underline; }
.ng-cm-promo__links .ng-ico { width: 16px; height: 16px; }

/* ------------------------------- */
/* the cart */
/* ------------------------------- */
.ng-cm-citem { grid-template-columns: auto minmax(0, 1fr); }
.ng-cm-citem__img { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: var(--ng-fill); }
.ng-cm-citem__img img { width: 100%; height: 100%; object-fit: cover; }
.ng-cm-citem .ng-lrow__title { white-space: normal; }
.ng-cm-citem__price { font-size: 14px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-cm-citem__acts { grid-column: 2; display: flex; align-items: center; gap: 8px; }
@media (min-width: 576px) {
  .ng-cm-citem { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ng-cm-citem__acts { grid-column: auto; }
}
.ng-cm-qty { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ng-sub); }
.ng-cm-qty .form-select { width: 84px; }
.ng-cm-iconbtn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 10px;
  background: var(--ng-fill); color: hsl(var(--destructive)); cursor: pointer;
}
.ng-cm-iconbtn:hover { background: var(--ng-fill-2); }
.ng-cm-iconbtn .ng-ico { width: 18px; height: 18px; }

/* checkout: shipping addresses, the total and Checkout */
.ng-cm-ship { display: flex; flex-direction: column; gap: 8px; }
.ng-cm-ship__opt { display: flex; align-items: flex-start; gap: 10px; min-height: 0; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--ng-fill); }
.ng-cm-ship__opt .form-check-input { flex: none; float: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--ng-line); background-color: var(--ng-card); }
.ng-cm-ship__opt .form-check-input:checked { border-color: var(--ng-brand); background-color: var(--ng-brand); }
.ng-cm-ship__opt .form-check-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.ng-cm-ship__opt .form-check-label b { font-size: 14px; color: var(--ng-ink-strong); }
.ng-cm-ship__opt .form-check-label small { font-size: 12.5px; line-height: 1.4; color: var(--ng-sub); }
.ng-cm-ship__opt:has(:checked) { background: hsl(var(--primary) / .08); box-shadow: inset 0 0 0 1.5px var(--ng-brand); }
.ng-cm-checkout .alert { margin-top: 10px; border: 0; border-radius: 12px; font-size: 13.5px; }
.ng-cm-total { margin: 14px 0 12px; }
.ng-cm-total b { font-size: 18px; }

/* your addresses (Sngine's _addresses.tpl) as small tiles */
.ng-cm-addrs .payment-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.ng-cm-addrs .payment-plan {
  display: flex; flex-direction: column; gap: 2px; width: auto; min-height: 0; margin: 0; padding: 14px; border: 0; border-radius: 14px;
  background: var(--ng-fill); color: var(--ng-sub); font-size: 13px; line-height: 1.45; text-align: left;
}
.ng-cm-addrs .payment-plan .text-xxlg { font-size: 15px !important; font-weight: 700; color: var(--ng-ink-strong); }
.ng-cm-addrs .payment-plan .btn { border: 0; }
.ng-cm-addrs .payment-plan .btn-light { background: var(--ng-card); }
.ng-cm-addrs .payment-plan.new {
  flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-height: 120px; cursor: pointer;
  background: none; box-shadow: inset 0 0 0 1.5px var(--ng-line); color: var(--ng-brand); font-weight: 700;
}
.ng-cm-addrs .payment-plan.new:hover { background: var(--ng-fill); }

/* ------------------------------- */
/* orders and sales */
/* ------------------------------- */
.ng-cm-stats { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ng-cm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ng-cm-stat { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-cm-stat > div { display: flex; flex-direction: column; min-width: 0; }
.ng-cm-stat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-cm-stat small { font-size: 13px; color: var(--ng-sub); }
.ng-cm-osearch { margin: 0; }
.ng-cm-osearch .form-control { width: 220px; min-height: 40px; }
@media (max-width: 575.98px) { .ng-cm-orders .ng-cm-head__tools, .ng-cm-osearch, .ng-cm-osearch .form-control { width: 100%; } }

/* Sngine's order cards (_order.tpl), kit style */
.ng-cm-olist { display: flex; flex-direction: column; gap: 16px; }
.ng-cm-olist > ul { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ng-cm-olist .card { margin: 0; overflow: hidden; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-cm-olist .card > .card-header { padding: 16px 18px !important; border-bottom: 1px solid var(--ng-line); background: var(--ng-fill); font-size: 13.5px; color: var(--ng-ink); }
.ng-cm-olist .card > .card-header .row { row-gap: 10px; align-items: center; }
.ng-cm-olist .card > .card-header strong { font-size: 12px; font-weight: 600; color: var(--ng-sub); }
.ng-cm-olist .card > .card-header .btn { margin: 2px 0; }
.ng-cm-olist .card > .card-body { padding: 18px; }
.ng-cm-olist .section-title { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-cm-olist .payment-plans { margin: 0; }
.ng-cm-olist .payment-plan { width: auto; margin: 0; padding: 14px; border: 0; border-radius: 14px; background: var(--ng-fill); text-align: left; font-size: 13px; color: var(--ng-sub); }
.ng-cm-olist .payment-plan .text-xlg { font-size: 15px !important; color: var(--ng-ink-strong); }
.ng-cm-olist .alert { border: 0; border-radius: 12px; }
/* an order's items: a compact row (photo 88px with the price, then the name, condition and qty) */
.ng-cm-olist .card.product { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px; overflow: hidden; border: 0; border-radius: 14px; background: var(--ng-fill); box-shadow: none; }
.ng-cm-olist .card.product .product-image { width: 88px; height: 88px; border-radius: 12px; }
.ng-cm-olist .card.product .product-price { left: 6px; bottom: 6px; padding: 4px 7px; border-radius: 999px; background: var(--ng-card); color: var(--ng-ink-strong); font-size: 11.5px; font-weight: 800; }
.ng-cm-olist .card.product .product-info { min-width: 0; padding: 0 !important; font-size: 13px; color: var(--ng-sub); }
.ng-cm-olist .card.product .product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; white-space: normal; word-break: normal; }
.ng-cm-olist .card.product .product-meta .title { font-size: 14.5px; color: var(--ng-ink-strong); text-decoration: none; }
.ng-cm-olist .card.product .product-info .mt20 { margin-top: 6px !important; }
.ng-cm-olist .see-more, .ng-cm-fundwrap .see-more {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; margin: 0; padding: 0 16px; border: 0; border-radius: 10px;
  background: var(--ng-card); color: var(--ng-ink-strong); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ng-cm-olist .see-more:hover, .ng-cm-fundwrap .see-more:hover { background: var(--ng-fill-2); }

/* ------------------------------- */
/* the pager (Sngine's class-pager markup) */
/* ------------------------------- */
.ng-cm-pager .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; padding: 0; }
.ng-cm-pager .pagination > li { margin: 0; }
.ng-cm-pager .page-link {
  display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px; border: 0 !important; border-radius: 10px !important;
  background: var(--ng-card); color: var(--ng-ink-strong); font-size: 14px; font-weight: 600; box-shadow: none !important;
}
.ng-cm-pager a.page-link:hover { background: var(--ng-fill); color: var(--ng-ink-strong); }
.ng-cm-pager .page-item.active .page-link { background: var(--ng-brand); color: #fff; }
.ng-cm-pager .page-item.previous.disabled { flex-basis: 100%; text-align: center; }
.ng-cm-pager .page-item.previous.disabled .page-link { display: inline; height: auto; padding: 0; background: none; color: var(--ng-sub); font-size: 12.5px; font-weight: 500; }

/* ------------------------------- */
/* Job Apply popup (ajax.job.apply.tpl, opened extra-large): a wide rectangle on desktop (user,
   2026-10-17) - your information + CV | your experience, the job's questions full width under them */
/* ------------------------------- */
.modal-dialog.modal-xl:has(.ng-japply) { max-width: min(980px, calc(100% - 32px)); }
.ng-japply .text-xlg { font-size: 15px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-japply .form-group { margin-bottom: 14px; }
.ng-japply__sec { min-width: 0; }
.ng-japply__sec + .ng-japply__sec { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ng-line); }
.ng-japply__qhead { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ng-line); }
@media (min-width: 992px) {
  .ng-japply__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .ng-japply__sec + .ng-japply__sec { margin-top: 0; padding-top: 0; padding-left: 28px; border-top: 0; border-left: 1px solid var(--ng-line); }
  .ng-japply__sec:first-child { padding-right: 28px; }
  .ng-japply textarea[name="work_description"] { min-height: 112px; }
}