/* 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;
}

/* ---------------------------------------------------------------------------
   Transition lookup (WEB-315)

   A sold-out box is where the customer learns they cannot have the part. The
   prompt lives inside that box because that is the moment it answers, and it
   is a link rather than a button: it offers a search, not a purchase, and a
   second primary button beside "Legg i handlekurv" would compete with it.
   --------------------------------------------------------------------------- */

.ds-transition-prompt {
  margin-top: 12px;
}

/* Inside the sold-out box, set off by a rule and a tint so it reads as the
   box's own answer to "so what now" rather than a note parked beside it. */
.ds-transition-prompt--inside {
  margin: 12px -12px -12px;
  padding: 12px;
  background: rgba(31, 41, 51, 0.035);
  border-top: 1px solid rgba(31, 41, 51, 0.1);
  border-radius: 0 0 8px 8px;
}

.ds-transition-prompt__text {
  margin: 0 0 8px;
  color: #3e4c59;
  font-size: 13px;
  line-height: 1.4;
}

/* The sold-out article's own price, on a card that offers a transition. The
   customer cannot buy at it, and it sits directly above alternatives that cost
   a fraction as much. */
.ds-transition-price-hidden {
  display: none;
}

/* Outlined, not filled. It has to look unmistakably clickable without
   competing with "Legg i handlekurv" on the cards that still have one. */
.ds-transition-prompt__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  color: #c8102e;
  font-size: 13.5px;
  white-space: nowrap;
  font-weight: 600;
  line-height: 1.2;
  background: #fff;
  border: 1.5px solid #c8102e;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.ds-transition-prompt__action:hover,
.ds-transition-prompt__action:focus-visible {
  color: #fff;
  background: #c8102e;
}

/* The dialog is built in JS and appended to <body>, so without these rules it
   renders as unstyled flow content at the foot of a very long page. */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 32, 0.55);
  overflow-y: auto;
}

.transition-dialog {
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 32, 0.28);
}

.transition-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7eb;
  font-size: 16px;
}

.transition-dialog__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #52606d;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.transition-dialog__close:hover {
  background: #f0f2f5;
  color: #1f2933;
}

.transition-dialog__body {
  padding: 8px 20px 20px;
  overflow-y: auto;
}

/* The supplier call takes five to six seconds. Say so plainly rather than
   leaving the customer looking at an empty box. */
.transition-dialog__loading,
.transition-dialog__empty {
  margin: 0;
  padding: 16px 0;
  color: #52606d;
  font-size: 14px;
}

.transition-dialog__done {
  margin: 0;
  padding: 16px;
  background: #eef8f1;
  border: 1px solid #bfe3cc;
  border-radius: 8px;
  color: #1f2933;
  font-size: 14px;
  line-height: 1.6;
}

.transition-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.transition-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #eef1f4;
  font-size: 14px;
}

.transition-row:last-child {
  border-bottom: 0;
}

/* Reuses the tone variables, so an alternative carries the same meaning here
   as any other stock line on the site. */
.transition-row__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ds-stock-dot, #9aa4b2);
  box-shadow: inset 0 0 0 3px var(--ds-stock-ring, transparent);
}

.transition-row__main {
  flex: 1 1 auto;
  min-width: 0;
}

.transition-row__name {
  display: block;
  color: #1f2933;
}

.transition-row__desc {
  display: block;
  margin-top: 2px;
  color: #7b8794;
  font-size: 13px;
}

/* When the part lands in Norway - not when it reaches the supplier's shelf. */
.transition-row__promise {
  display: block;
  margin-top: 4px;
  color: #52606d;
  font-size: 13px;
}

.transition-row__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.transition-row__price {
  color: #1f2933;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.transition-row__price--unknown {
  color: #7b8794;
  font-size: 13px;
  font-weight: 500;
}

.transition-row__was {
  color: #7b8794;
  font-size: 12px;
  text-decoration: line-through;
  white-space: nowrap;
}

.transition-row__pick {
  padding: 7px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  background: #c8102e;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.transition-row__pick:hover {
  background: #96061f;
}

/* These are candidates, not confirmed fits. The note carries that caveat and
   must not be styled away into fine print that nobody reads. */
.transition-dialog__note {
  margin: 16px 0 0;
  padding: 12px;
  background: #f7f8fa;
  border-radius: 8px;
  color: #52606d;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 575px) {
  .transition-dialog__head,
  .transition-dialog__body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .transition-row {
    flex-wrap: wrap;
  }

  .transition-row__side {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    text-align: left;
  }
}

/* The cart line for a transition. The article shown is the sold-out one, so
   without this the customer sees no reason why they were allowed to buy it. */
.item--transition {
  margin-top: 6px;
  padding: 6px 10px;
  background: #fff6e5;
  border-left: 3px solid #f2994a;
  border-radius: 4px;
  color: #7a4b12;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* Shown instead of "Velg denne" when we have no confirmed price. Ordering it
   would be refused server-side, so the row points at the route that works. */
.transition-row__ask {
  color: #52606d;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* The quantity on a transition line cannot be raised - the supplier graded
   availability against the quantity we quoted. Silently ignoring a change the
   customer made would be worse than saying why it is fixed. */
.item--transition__hint {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  opacity: 0.85;
}

/* Shown when offers were left out of the shortlist. A trimmed list that says
   nothing reads as the whole answer. */
.transition-dialog__trimmed {
  margin: 0 0 4px;
  color: #7b8794;
  font-size: 12.5px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   What a belt drives (WEB-316)

   A V-ribbed belt category lists several belts with the same name and the same
   rib count, differing only in length. Which units the belt runs around is what
   actually separates them, and it decides whether the part fits the car.
   --------------------------------------------------------------------------- */

.ds-drives {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 10px;
}

.ds-drives__label {
  color: #7b8794;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ds-drives__unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  color: #1f2933;
  font-size: 13px;
  font-weight: 600;
  background: #eef1f4;
  border-radius: 999px;
  white-space: nowrap;
}

.ds-drives__unit i {
  color: #52606d;
  font-size: 12px;
}

/* Reads as part of the drives line, not as another driven unit. */
.ds-drives__note {
  color: #169b49;
  font-size: 12px;
  font-weight: 600;
}

/* An empty drives line beside an air-conditioning chip reads as "not for the
   compressor". Saying we do not know is the honest shape of that gap. */
.ds-drives__unknown {
  color: #7b8794;
  font-size: 12.5px;
  font-style: italic;
}

/* Cabin filter cleaning grades. Ranked colours, because the grades are ranked:
   the customer is choosing how much the filter takes out of the air. */
.ds-drives__unit--grade1 { background: #eef1f4; }
.ds-drives__unit--grade2 { background: #e6f0fb; }
.ds-drives__unit--grade3 { background: #e6f4ea; }

.ds-drives__unit--grade2 i { color: #2d6cb5; }
.ds-drives__unit--grade3 i { color: #169b49; }