/* ============ MARKETPLACE ============ */
.mp-hero{position:relative;overflow:hidden}
.mp-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 460px at 50% -20%,rgba(166,64,59,.07),transparent 62%);pointer-events:none}
.mp-hero .inner{position:relative;text-align:center;padding-top:88px;padding-bottom:60px;max-width:840px;margin:0 auto}
.mp-hero h1{font-size:clamp(44px,5.4vw,72px);font-weight:800;letter-spacing:-0.04em;line-height:1.02;margin-bottom:20px}
.mp-hero p{font-size:20px;color:var(--ink-2);max-width:42ch;margin:0 auto 36px;line-height:1.5}
/* .searchbar rules removed - the hero no longer has a search box */
/* .quick rules removed with the quick tabs */
/* .qbtn rules removed with the quick tabs */

/* featured horizontal cards */
.featured{display:grid;grid-template-columns:1fr;gap:18px}
.fcard{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px;box-shadow:var(--sh-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.fcard .fl{display:flex;gap:22px;align-items:center;min-width:0}
.fcard .ficon{width:60px;height:60px;border-radius:15px;display:grid;place-items:center;flex:none}
.fcard .cat{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.fcard h3{font-size:22px;font-weight:700;letter-spacing:-0.025em;margin:5px 0 6px}
.fcard .fdesc{font-size:14.5px;color:var(--ink-2);margin-bottom:12px;max-width:52ch}
.fmeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.fmeta .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.fmeta b{color:var(--ink-2);font-weight:600}
.fcard .fr{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none}
.fcard .price{font-size:28px;font-weight:800;letter-spacing:-0.03em}
.stars{color:var(--bronze);font-size:13px;letter-spacing:1px;white-space:nowrap}
.stars small{color:var(--ink-3);letter-spacing:0;margin-left:6px}

/* category cards */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.catcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 20px;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease);cursor:pointer}
.catcard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.catcard .ci{width:46px;height:46px;border-radius:13px;background:var(--bg-grey);display:grid;place-items:center;margin-bottom:16px;color:var(--red)}
.catcard .cn{font-size:16px;font-weight:650;letter-spacing:-0.015em}
.catcard .cc{font-size:13px;color:var(--ink-3);margin-top:3px}

/* sticky filter bar */
.filterbar{position:sticky;top:70px;z-index:40;background:rgba(246,247,249,.85);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
/* The search takes the free space between the two control groups, so the
   row stays one line on a wide screen and wraps sensibly when it cannot. */
.filterbar .fin{display:flex;align-items:center;gap:14px;padding:14px var(--pad);flex-wrap:wrap}
@media(max-width:1100px){.barsearch{flex:1 1 100%;order:3;margin:0}.fgroup{flex:1 1 auto;flex-wrap:wrap}.fgroup.right{justify-content:flex-start}}
/* ---- PHONE, fixed 30 Sep 2026 --------------------------------------------
   The 1100px rule above gives the search its own line but leaves BOTH control
   groups sharing one, which does not survive a phone.

   .sortsel select has no width, so it sizes to its content: "All industries
   (24)" at 14px semibold is roughly 193px once its 53px of padding is counted.
   Two of those is about 396px, against the 335px a 375px phone actually has
   after the gutter. Both groups were asking for that at once on the same line,
   so the four selects collided.

   Each group now takes a full row and the two selects inside it share it. The
   bar becomes three tidy rows: industry and level, region and sort, search.

   min-width:0 on .sortsel is the part that does the work. A flex item will not
   shrink below its content width without it, so the selects would go right on
   overflowing however the rows were arranged. width:100% on the select then
   makes it fill the half it has been given rather than staying content-sized.

   Order is deliberately NOT changed: the search keeps order:3 from above and
   stays last, exactly where it is on a wide screen. Moving it to the top on a
   phone is arguably better and is a one-line change, but it is a different
   decision from fixing a broken layout. */
@media(max-width:700px){
  .filterbar .fin{gap:10px}
  /* Each group gets its own row, so the four selects sit 2x2 rather than
     four-across. wrap, not nowrap: if a pair genuinely cannot share a row it
     should break onto two, not squeeze. */
  .fgroup{flex:1 1 100%;flex-wrap:wrap;gap:10px}
  /* CORRECTED, same evening. The first attempt was flex:1 1 0 with a 100%-wide
     select, which forced all four to identical halves. That truncated every
     label to "All ind...", "All lev...", "All reg..." - they all start with
     "All ", so equal widths made them indistinguishable and you could no
     longer tell what each one filtered.

     flex:0 1 auto keeps each select at its NATURAL width, so the labels read in
     full, and only shrinks one when the row genuinely runs out of room.
     min-width:0 is still what permits that shrink at all - without it a flex
     item refuses to go below its content and overflows instead, which was the
     original collision. */
  .sortsel{flex:0 1 auto;min-width:0}
  .sortsel select{max-width:100%}
}
/* Three zones on the bar: what the data is about (left), search (middle),
   how it is cut and ordered (right). The search takes the space between,
   which is what puts it in the middle without hard-coding a width. */
/* Both groups take an equal share of the leftover width - left aligns to the
   start, right to the end - so the search between them lands on the true
   centre of the bar no matter how wide the controls in each group are.
   Two controls a side, one in the middle. */
.fgroup{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0}
.fgroup.right{justify-content:flex-end}
/* .pill rules removed - categories are a select now */
/* The one search on this page. It used to be a small "filter" box duplicating a
   large hero box directly above it - same input, same effect, two places to
   type. Now it lives here, sized to sit level with the selects beside it. */
.barsearch{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:6px 6px 6px 15px;flex:0 1 560px;margin:0 auto;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.barsearch:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(166,64,59,.10)}
.barsearch svg{flex:none}
.barsearch input{flex:1;min-width:0;border:none;outline:none;font-family:inherit;font-size:14.5px;color:var(--ink);background:transparent}
.barsearch input::placeholder{color:var(--ink-4)}
.bs-go{flex:none;font-family:inherit;font-size:13.5px;font-weight:600;color:#fff;background:var(--red);border:none;border-radius:9px;padding:9px 18px;cursor:pointer;transition:background .16s var(--ease)}
.bs-go:hover{background:#8E332D}
.sortsel{position:relative}
.sortsel select{appearance:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:10px 38px 10px 15px;cursor:pointer}
.sortsel::after{content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);rotate:45deg;pointer-events:none;margin-top:-3px}
.result-count{font-size:13.5px;color:var(--ink-3);margin:22px 0 22px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);opacity:1}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--line-2)}
.pcard .ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pcard .picon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.pcard .qscore{font-size:11.5px;font-weight:600;color:#1F7A49;background:var(--green-soft);padding:5px 10px;border-radius:8px;white-space:nowrap}
.pcard .cat{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.pcard h3{font-size:18px;font-weight:700;letter-spacing:-0.02em;margin:5px 0 6px}
.pcard .pdesc{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:14px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.badge{font-size:11px;font-weight:600;color:var(--ink-2);background:var(--bg-grey);border:1px solid var(--line);padding:4px 9px;border-radius:7px}
.inside{background:var(--red-tint);border:1px solid var(--red-soft);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.inside .ih{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.03em;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.inside ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.inside li{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.inside li svg{color:var(--green);flex:none}
.inside .more{font-size:12px;color:var(--ink-3);margin-top:9px;font-weight:500}
.pmeta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-3);margin-bottom:16px;flex-wrap:wrap}
.pmeta .sep{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.pmeta b{color:var(--ink-2);font-weight:600}
.pfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}
.pfoot .price{font-size:22px;font-weight:800;letter-spacing:-0.03em}
.pfoot .view{font-size:13.5px;font-weight:600;color:var(--red)}
.pcard.hide{display:none}

/* recently updated timeline */
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
.tl-item{position:relative;padding:14px 0}
.tl-item::before{content:"";position:absolute;left:-24px;top:20px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--red)}
.tl-item.old::before{border-color:var(--line-2)}
.tl-row{display:flex;align-items:center;gap:16px}
.tl-when{font-size:12.5px;font-weight:600;color:var(--red);width:96px;flex:none}
.tl-item.old .tl-when{color:var(--ink-3)}
.tl-name{font-size:16px;font-weight:650;letter-spacing:-0.015em}
.tl-tag{margin-left:auto;font-size:12px;color:var(--ink-3)}

/* stats dark */
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);border-radius:var(--r-lg);overflow:hidden}
.statc{background:var(--dark);padding:34px 26px;text-align:center}
.statc .v{font-size:38px;font-weight:800;color:#fff;letter-spacing:-0.035em;font-variant-numeric:tabular-nums}
.statc .v .u{font-size:20px;color:var(--red-d);margin-left:2px}
.statc .l{font-size:13px;color:var(--dark-ink-2);margin-top:8px;font-weight:500}
@media(max-width:1080px){.stat-grid{grid-template-columns:repeat(2,1fr)}}

/* product detail preview */
.detail{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}
.dcol{display:grid;gap:22px}
.dpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden}
.dpanel .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.dpanel .dh .dt{font-size:14px;font-weight:650;letter-spacing:-0.01em}
.dpanel .dh .dtag{font-size:11.5px;font-weight:600;color:var(--red);background:var(--red-soft);padding:4px 9px;border-radius:7px}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{text-align:left;font-weight:600;color:var(--ink-3);padding:11px 22px;background:var(--bg-grey);border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase}
.dtable td{padding:11px 22px;border-bottom:1px solid var(--line);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dtable tr:last-child td{border-bottom:none}
.dtable td.mono{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.meta-list{padding:6px 0}
.meta-list .mr{display:flex;align-items:center;justify-content:space-between;padding:11px 22px;border-bottom:1px solid var(--line);font-size:13.5px}
.meta-list .mr:last-child{border-bottom:none}
.meta-list .mk{color:var(--ink-3)}
.meta-list .mv{color:var(--ink);font-weight:600}
.meta-list .mv.ok{color:var(--green)}
.code{background:#15171D;padding:18px 20px;font-family:var(--mono);font-size:12px;line-height:1.7;color:#C8CCD4;overflow-x:auto}
.code .k{color:var(--red-d)} .code .s{color:var(--green-d)} .code .n{color:var(--bronze-d)}
.dformats{display:flex;gap:8px;flex-wrap:wrap;padding:18px 22px}
.dhist{padding:8px 0}
.dhist .hr{display:flex;align-items:center;gap:12px;padding:10px 22px;font-size:13px}
.dhist .hd{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);width:82px;flex:none}
.dhist .hv{width:8px;height:8px;border-radius:50%;background:var(--bronze);flex:none}
.dhist .ht{color:var(--ink-2)}

/* trust */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trust{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--sh-sm)}
.trust .ti{width:44px;height:44px;border-radius:12px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;flex:none}
.trust .tn{font-size:15.5px;font-weight:650;letter-spacing:-0.015em}
.trust .td{font-size:13px;color:var(--ink-3);margin-top:2px}

/* cta */
.cta-band{text-align:center;background:linear-gradient(180deg,#fff,var(--bg-grey));border:1px solid var(--line);border-radius:var(--r-xl);padding:64px 40px}
.cta-band h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-0.035em;margin-bottom:14px}
.cta-band p{font-size:18px;color:var(--ink-2);max-width:46ch;margin:0 auto 30px}

@media(max-width:1080px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .fcard{grid-template-columns:1fr;align-items:flex-start}
  .fcard .fr{text-align:left;align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%}
  .pad-y{padding-top:72px;padding-bottom:72px}
}
@media(max-width:600px){
  :root{--pad:20px}
  .cats,.grid{grid-template-columns:1fr}
  .inside ul{grid-template-columns:1fr}
  .filterbar{top:70px}
}

/* Empty type state. Five of the six marketplace types have no products yet, so
   the nav and footer badge them Soon; this is the page behind that badge. A
   blank grid under a confident heading reads as broken rather than early. */
.mk-empty{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 30px;text-align:center}
.mk-empty p{font-size:15px;color:var(--ink-3);line-height:1.65;margin:0 0 10px}
.mk-empty p:last-child{margin-bottom:0;font-size:14px}
.mk-empty a{color:var(--red);font-weight:600}