/* Buyer procurement surfaces. The comparison data already existed in the API;
   this gives it a hierarchy a busy kitchen can scan instead of one text run. */
.procurement-offers{display:grid;gap:12px;margin:14px 0}
.procurement-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head money" "facts buy" "blocked blocked";align-items:start;gap:10px 18px;padding:16px;border:1px solid #e7e7e7;border-radius:18px;background:#fff}
.procurement-offer:has(.procurement-offer-photo){grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"photo head money" "photo facts buy" "photo blocked blocked"}
.procurement-offer-photo{grid-area:photo;width:96px;height:96px;object-fit:cover;border-radius:14px;background:#f2f2f2}
.procurement-offer-head{grid-area:head;min-width:0}
.procurement-offer-money{grid-area:money;text-align:right}
.procurement-offer-facts{grid-area:facts}
.procurement-offer-buy{grid-area:buy}
.procurement-offer-blocked{grid-area:blocked}
/* "Beste Wahl" has to read as chosen at a glance, not as a slightly darker line. */
.procurement-offer.is-best{border-color:#111;box-shadow:0 0 0 1px #111,0 8px 24px rgba(0,0,0,.07)}
.procurement-offer.is-blocked{background:#fafafa;border-style:dashed}
.procurement-offer-head strong{display:block;font:700 15px/1.3 var(--display)}
.procurement-offer-vendor{display:block;margin-top:3px;color:#777;font-size:12px}
.procurement-offer-price{white-space:nowrap}
.procurement-offer-price b{display:block;font:700 22px/1 var(--display)}
.procurement-offer-price small{display:block;margin-top:5px;color:#777;font-size:11px}
.procurement-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.procurement-tag{border:1px solid #d8d8d8;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;background:#fff;color:#444}
.procurement-tag.best{background:#111;border-color:#111;color:#fff}
.procurement-tag.price{background:#eef7ee;border-color:#cfe6cf;color:#295d2d}
.procurement-tag.speed{background:#eef2fb;border-color:#cfd9ee;color:#27406e}
.procurement-tag.relation{background:#fdf4e7;border-color:#efdcbe;color:#7a5310}
.procurement-tag.verified{background:#f2f2f2;border-color:#e0e0e0}
.procurement-tag.sponsored{background:#fff;border-style:dashed}
.procurement-offer-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.procurement-offer-facts div{padding:9px 11px;border-radius:12px;background:#f7f7f7;min-width:0}
.procurement-offer-facts small{display:block;color:#777;font-size:10px}
.procurement-offer-facts b{font-size:12px;overflow-wrap:anywhere}
.procurement-offer-buy{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.procurement-offer-order{display:flex;align-items:flex-end;gap:8px}
.procurement-offer-buy label{display:grid;gap:4px;font-size:11px;font-weight:700}
.procurement-offer-buy .input{width:76px;min-height:44px;text-align:center;font-variant-numeric:tabular-nums}
.procurement-offer-blocked{color:#8b211b;font-size:12px}
/* The approval step is announced before submitting, not discovered afterwards. */
.procurement-approval-notice{margin:14px 0 18px;padding:16px 18px;border:1px solid #e0e0e0;border-radius:18px;background:#f7f7f4}
.procurement-approval-notice strong{display:block;margin-bottom:9px;font:700 14px var(--display)}
.procurement-steps{margin:0;padding-left:18px;display:grid;gap:6px;color:#555;font-size:12px;line-height:1.5}
.procurement-steps li::marker{font-weight:700;color:#111}
.procurement-approval-notice p{margin-top:10px;color:#777;font-size:12px;line-height:1.5}
.procurement-status-note{margin:10px 0 14px;padding:13px 15px;border-radius:14px;background:#f5f5f0;color:#555;font-size:12px;line-height:1.5}
.procurement-status-note.waiting{background:#fff8e8;color:#76530c}
@media(max-width:640px){
  .procurement-offer{grid-template-columns:1fr;grid-template-areas:"head" "money" "facts" "buy" "blocked"}
  .procurement-offer:has(.procurement-offer-photo){grid-template-columns:64px minmax(0,1fr);grid-template-areas:"photo head" "money money" "facts facts" "buy buy" "blocked blocked"}
  .procurement-offer-photo{width:64px;height:64px}
  .procurement-offer-money{text-align:left}
  .procurement-offer-buy{align-items:stretch}
  .procurement-offer-order{align-items:stretch}
  .procurement-offer-order .btn{flex:1}
}

/* Sorting: the organic order stays the default, but a buyer who came to save
   money or to beat a delivery window can say so. */
.procurement-sort{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.procurement-sort-btn{border:1px solid #ddd;border-radius:999px;padding:7px 13px;min-height:36px;background:#fff;color:#444;font:600 12px/1 var(--display);cursor:pointer}
.procurement-sort-btn:hover{border-color:#bbb}
.procurement-sort-btn.is-active{background:#111;border-color:#111;color:#fff}
.procurement-sort-btn:focus-visible{outline:2px solid #111;outline-offset:2px}
/* The ranking disclosure is an obligation, not an opening paragraph. */
.procurement-note{margin:8px 0 0;color:#666;font-size:12px;line-height:1.5}
.procurement-note p{margin:0}
.procurement-note-quiet{margin-top:6px;color:#999;font-size:11px}
.procurement-details{margin-top:6px}
.procurement-details summary{cursor:pointer;color:#111;font-weight:600}
.procurement-details p{margin-top:7px;color:#666}
/* Reorder anchor: what this location last paid per base unit. */
.procurement-price-delta{display:inline-block;margin-top:7px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:normal}
.procurement-price-delta.down{background:#eef7ee;color:#295d2d}
.procurement-price-delta.up{background:#fdeceb;color:#8b211b}
.procurement-price-delta.same{background:#f2f2f2;color:#555}
/* The in-card secondary action; it used to float loose between cards. */
.procurement-offer-buy>.btn.outline{min-height:32px;padding:0 4px;border:0;background:none;color:#555;font-size:12px;font-weight:600;text-decoration:underline}
.procurement-offer-buy>.btn.outline:hover{color:#111}
/* A cart that hides money is the most common complaint in B2B ordering. */
.procurement-cart-group strong{display:block;font:700 15px/1.3 var(--display)}
.procurement-cart-lines{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.procurement-cart-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f0f0f0}
.procurement-cart-name{min-width:0;overflow-wrap:anywhere;font-size:13px}
.procurement-cart-qty{color:#777;font-size:12px;font-variant-numeric:tabular-nums}
.procurement-cart-money{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.procurement-cart-lines .btn.outline{min-height:32px;padding:0 4px;border:0;background:none;color:#8b211b;font-size:12px;font-weight:600;text-decoration:underline;justify-self:end}
.procurement-cart-sum{margin-top:12px;padding-top:11px;border-top:1px solid #e7e7e7;font-size:13px}
.procurement-cart-sum b{font:700 17px/1 var(--display)}
.procurement-cart-hint{margin-top:7px;color:#888;font-size:11px;line-height:1.5}
@media(max-width:640px){
  .procurement-cart-lines li{grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;row-gap:2px}
  .procurement-cart-name{grid-column:1/-1}
}

/* The item list answers "what do I have to order". Stock already on its way is
   shown because it is already subtracted from the need the buyer is asked to
   trust. */
.procurement-items{display:grid;gap:10px;margin:14px 0}
.procurement-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 16px;border:1px solid #e7e7e7;border-radius:16px;background:#fff}
.procurement-item.is-reorder{border-color:#e4d3ad;background:#fffdf8}
/* The recommended quantity is the biggest number on the card and had no label,
   so it read as a bare figure the buyer had to interpret. */
.procurement-item-need-label{display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a8a8a}
.procurement-item-main{min-width:0}
.procurement-item-main strong{display:block;font:700 15px/1.3 var(--display)}
.procurement-item-main .procurement-offer-facts{margin-top:9px}
.procurement-item-need{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;text-align:right;min-width:150px}
.procurement-item-need b{font:700 20px/1 var(--display);color:#7a5310;white-space:nowrap}
.procurement-item-need small{color:#777;font-size:11px;line-height:1.4}
.procurement-item.is-ok .procurement-item-need small{color:#295d2d}
@media(max-width:640px){
  .procurement-item{grid-template-columns:1fr}
  .procurement-item-need{align-items:stretch;text-align:left;min-width:0}
  .procurement-item-need .btn{width:100%}
}

/* base.css right-aligns .actions for modal footers. In this workspace they are
   in-page toolbars and belong with the left-aligned content they act on. */
.procurement-workspace .actions{justify-content:flex-start}
/* base.css zeroes heading margins. Inside this workspace the headings separate
   real sections, so they carry their own vertical rhythm. */
.procurement-workspace h1{margin-bottom:2px}
.procurement-workspace h2{margin:20px 0 4px}
.procurement-workspace h3{margin:24px 0 4px}
.procurement-workspace .actions{margin:14px 0 4px}
.procurement-sort{align-items:center}
.procurement-sort .procurement-note-quiet{margin:0 0 0 4px}

/* The supplier page: who they are, where they deliver, and how they have
   actually performed for this buyer. */
.procurement-vendor{padding:18px;border:1px solid #e7e7e7;border-radius:18px;background:#fff;margin:14px 0}
.procurement-vendor-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.procurement-vendor-head strong{display:block;font:700 18px/1.25 var(--display)}
.procurement-vendor-head .procurement-tags{margin-top:0}
.procurement-vendor-about{margin-top:10px;color:#555;font-size:13px;line-height:1.55;max-width:62ch}
.procurement-vendor .procurement-offer-facts{margin-top:14px}
.procurement-vendor-sub{margin:18px 0 6px;font:700 13px var(--display)}
.procurement-vendor-areas{margin:0;padding-left:18px;display:grid;gap:4px;color:#555;font-size:12px;line-height:1.5}
/* The supplier name on an offer card is the way into that page. */
.procurement-offer-vendor.is-link{padding:0;border:0;background:none;text-align:left;text-decoration:underline;cursor:pointer;font:inherit;color:#555;font-size:12px}
.procurement-offer-vendor.is-link:hover{color:#111}
.procurement-offer-vendor.is-link:focus-visible{outline:2px solid #111;outline-offset:2px}
/* The workspace sets overflow-wrap:anywhere, which breaks long German compounds
   mid-word with no hyphen ("Zahlungsbedingung|en"). Fact labels hyphenate. */
.procurement-offer-facts small{overflow-wrap:normal;hyphens:auto}

/* Readiness checklist. Open rows carry the weight; satisfied ones stay quiet so
   the eye lands on what still has to happen. */
.procurement-readiness{margin:18px 0;padding:18px;border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fbfaf7}
.procurement-readiness h3{margin:0 0 6px;font-size:15px;line-height:1.35}
.procurement-readiness>p{margin:0 0 16px;font-size:13px;color:var(--muted,#6f6f6f)}
/* The group heading carries who acts, so the row no longer repeats it. */
.procurement-readiness h4{margin:0 0 9px;font:700 11px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#8a8a8a}
.procurement-readiness h4+ul{margin-bottom:18px}
.procurement-readiness-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.procurement-readiness-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.procurement-readiness-list li span{width:18px;height:18px;margin-top:1px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1}
/* Open is the state that needs the eye: a filled ring, not the faint bullet the
   first version gave it while spending a checkmark on the rows already done. */
.procurement-readiness-list li.open span{border:2px solid #8a6a12;background:#fff8e8}
.procurement-readiness-list li.open strong{display:block;font-size:13px;font-weight:700;line-height:1.4}
.procurement-readiness-list li.open small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted,#6f6f6f)}
.procurement-readiness-list li.open .btn{margin-top:8px;min-height:36px;padding:0 14px;font-size:12px}
.procurement-readiness-list li.done{color:var(--muted,#6f6f6f)}
.procurement-readiness-list li.done span{background:#eceae4;color:#6f6f6f}
.procurement-readiness-list li.done strong{display:block;font-size:12px;font-weight:500;line-height:1.4}
.procurement-readiness-done{margin-top:2px;border-top:1px solid rgba(0,0,0,.08);padding-top:12px}
.procurement-readiness-done summary{cursor:pointer;font-size:12px;color:var(--muted,#6f6f6f)}
.procurement-readiness-done summary:focus-visible{outline:2px solid #111;outline-offset:2px}
.procurement-readiness-done ul{margin-top:12px}
@media(max-width:640px){.procurement-readiness{padding:15px}}