/* Keep supplier delivery guidance inside product offer cards on every frontend surface. */
.stock-text {
  min-width: 0;
  flex-wrap: wrap;
}

.stock-text > .cart-box {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
}

.stock-text .ware__house.text-nowrap {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Legacy per-page selectors in style.scss reach 0,8,0 and 0,9,0 and win over
   everything in this file. Until those are removed (WEB-304), the few
   declarations that carry meaning are forced here. */
.stock-text.ds-stock-status {
  display: block;
  padding-top: 4px;
  margin-bottom: 8px;
  color: #1f2933;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none !important;
}

.stock__status.text-nowrap .ds-stock-status,
.stock-text.ds-stock-status .text-nowrap {
  white-space: normal !important;
}

.ds-stock-status__promise {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ds-stock-status__dot.in-stock,
.ds-stock-status__dot.in-stock2,
.ds-stock-status__dot.no-stock {
  display: inline-block;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  vertical-align: middle;
}

/* The indicator answers one question: can the customer trust the date next to
   it. A filled dot means the part exists and the date is a commitment. A ring
   means it has to be ordered in and the date is an estimate. Speed is already
   spelled out in the promise text, so colour does not repeat it.

   The colour is declared as a custom property and read once. A custom property
   resolves where it is declared and then inherits, so it does not compete with
   the legacy selectors that set .in-stock / .in-stock2 / .no-stock backgrounds
   at far higher specificity. */
.ds-stock-status {
  --ds-stock-dot: #9aa4b2;
  --ds-stock-ring: transparent;
}

/* Two dimensions, read together. Fill answers whether we hold the part, so the
   date is a commitment rather than an estimate. Colour answers how soon.

   The line sits where the customer's behaviour changes: same day or next day is
   "order now", several days is "plan around it". Barkaker and Norway are one
   day apart and share a green; the text already separates them precisely. */
.ds-stock-status--own,
.ds-stock-status--partner-no {
  --ds-stock-dot: #169b49;
}

/* In stock, but in the Netherlands. Filled, because we do have it - and amber,
   because three working days is not the same offer as today. These previously
   shared the green above, which made a same-day part and a Wednesday part read
   as equivalent at a glance. */
.ds-stock-status--partner-eu {
  --ds-stock-dot: #f2c94c;
}

/* Not stocked. Hollow, so it separates from confirmed stock by shape as well
   as hue - green against amber at 12px is the worst possible pairing for
   red-green colour blindness. */
.ds-stock-status--procurement {
  --ds-stock-dot: transparent;
  --ds-stock-ring: #f2994a;
}

.ds-stock-status--sold-out {
  --ds-stock-dot: #9aa4b2;
}

.ds-stock-status__dot {
  background: var(--ds-stock-dot) !important;
  box-shadow: inset 0 0 0 3px var(--ds-stock-ring);
}

.ds-stock-status__title {
  min-width: 0;
  color: #1f2933;
  font-size: 13px !important;
  font-weight: 600 !important;
  overflow-wrap: anywhere;
}

.ds-stock-status__reason {
  margin-top: 2px;
  padding-left: 16px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.ds-stock-status__express {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  margin-left: 16px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}

/* The badge sits on the row's top border rather than inside it, so it labels the
   whole offer instead of competing with the price for attention within it. */
.supplier-choice {
  position: relative;
}

/* The category page styles these rows as bordered cards in its own stylesheet.
   The article page separates them with <hr> instead, which leaves the badge
   floating with no edge to sit on, so give it the same card treatment there. */
.bildeler.articles .cat__prod label.supplier-choice {
  padding: 12px 12px;
  margin: 0 0 12px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
}

.bildeler.articles .cat__prod label.supplier-choice:has(.supplier-choice-badge) {
  margin-top: 22px;
  padding-top: 16px;
}

.bildeler.articles .cat__prod label.supplier-choice:has(input:checked) {
  background: #f5f6f7;
  border-color: #aeb4bb;
}

.bildeler.articles .cat__prod hr {
  display: none;
}

/* Clearance so the tab does not touch the row above. Only rows that carry one
   need it, otherwise the list gains uneven gaps. */
.supplier-choice:has(.supplier-choice-badge) {
  margin-top: 22px;
}

.supplier-choice-badge {
  position: absolute;
  top: -14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.supplier-choice-badge i {
  font-size: 12px;
}

/* Blue for speed, with the bolt carrying the only warm colour on the row so it
   catches the eye without the whole pill shouting. */
.supplier-choice-badge--fastest {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.supplier-choice-badge--fastest i {
  color: #e8a900;
}

/* Green for money saved. It never appears alongside --recommended, so the two
   sharing a family costs nothing. */
.supplier-choice-badge--cheapest {
  color: #0f6e56;
  background: #e1f5ee;
  border: 1px solid #9fe1cb;
}

/* Neutral on purpose. This replaces both of the above when there is no
   trade-off left, and a third colour would imply a fourth meaning. */
.supplier-choice-badge--recommended {
  color: #1f2933;
  background: #eef1f4;
  border: 1px solid #cbd2d9;
}

.supplier-choice.is-stock-unavailable {
  cursor: not-allowed;
  opacity: 0.55;
}