/* Robey B2B - the parts with so many states that guessing goes wrong.
   Generated from bouw-tokens.py; uses the tokens from tokens.css.
   This is not a complete stylesheet: these are the places where the design is exact. */

/* ---------------------------------------------------------------- size cell
   Three layers: size label with info icon, stock line, input field.
   The indicator line above the field says what the size does; the fill says
   whether anything has been ordered. All combinations are below. */
.robey-cell { border-radius: var(--robey-radius-cell); overflow: hidden; box-shadow: var(--robey-shadow-cell); }
.robey-cell__head { background: var(--robey-color-gray-1); padding: 4px 6px; display: flex; align-items: center;
  justify-content: space-between; gap: 4px; font-size: var(--robey-text-14); font-weight: 700; line-height: 18px; }
.robey-cell__stock { background: var(--robey-color-gray-1); padding: 4px 6px; min-height: 26px;
  font-size: var(--robey-text-11); font-weight: 600; color: var(--robey-color-gray-6); line-height: 18px; }
.robey-cell__input { display: block; width: 100%; height: var(--robey-size-cell); text-align: center;
  font-size: var(--robey-text-14); font-family: inherit; border: 0; border-top: 2px solid; padding: 0;
  border-radius: 0; outline: none; color: var(--robey-color-black); }
.robey-cell__input::placeholder { color: var(--robey-color-gray-4); }

/* stock - empty, filled */
.robey-cell--stock .robey-cell__input { border-top-color: var(--robey-color-green); background: var(--robey-color-white); font-weight: 500; }
.robey-cell--stock.is-filled .robey-cell__input { background: var(--robey-color-green-tint); font-weight: 700; }
/* size sold out, will be backordered - the cell is tinted even when empty */
.robey-cell--backorder .robey-cell__input { border-top-color: var(--robey-color-orange); background: var(--robey-color-orange-tint); font-weight: 500; }
.robey-cell--backorder.is-filled .robey-cell__input { font-weight: 700; }
/* preorder - produced to order, so no stock figure */
.robey-cell--preorder .robey-cell__input { border-top-color: var(--robey-color-blue); background: var(--robey-color-white); font-weight: 500; }
.robey-cell--preorder.is-filled .robey-cell__input { background: var(--robey-color-blue-tint); font-weight: 700; }

/* ---------------------------------------------------------------- buttons
   Gold is reserved: only cart and checkout. Everything else is black, or
   white with a border. A second gold button on a page is a mistake. */
.robey-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--robey-size-button); padding: 0 24px; border-radius: var(--robey-radius-small);
  font-size: var(--robey-text-15); font-weight: 700; border: 0; cursor: pointer; font-family: inherit; }
.robey-button--gold { background: var(--robey-color-gold); color: var(--robey-color-white); }
.robey-button--gold:hover { background: var(--robey-color-gold-hover); }
.robey-button--black { background: var(--robey-color-black); color: var(--robey-color-white); }
.robey-button--outline { background: var(--robey-color-white); color: var(--robey-color-black);
  border: 1px solid var(--robey-color-gray-3); font-weight: 600; padding: 0 22px; }
.robey-button--outline:hover { border-color: var(--robey-color-black); }

/* ---------------------------------------------------------------- labels
   One label per photo, filled, bottom-left. Black is the neutral season
   label, red is outlet. A new label keeps that shape: a filled background
   with text at 4.5:1 or more, and never gold, which belongs to the cart.
   The photo background is gray-1, so a light fill disappears. */
.robey-label { position: absolute; left: 10px; bottom: 10px; font-size: var(--robey-text-11);
  font-weight: 700; padding: 3px 8px; border-radius: var(--robey-radius-small);
  background: var(--robey-color-black); color: var(--robey-color-white); }
.robey-label--outlet { background: var(--robey-color-red); }

/* ---------------------------------------------------------------- price
   Reduced: new price red, old price struck through in gray-5 next to it.
   With a price break between junior and senior sizes both are ranges. */
.robey-price { font-size: var(--robey-text-16); font-weight: 700; }
.robey-price--reduced { color: var(--robey-color-red); }
.robey-price__old { font-size: var(--robey-text-13); font-weight: 500; color: var(--robey-color-gray-5);
  text-decoration: line-through; margin-left: 8px; }
.robey-rrp { font-size: var(--robey-text-12); color: var(--robey-color-gray-6); }

/* ---------------------------------------------------------------- order type
   Dot plus name. Stock green, preorder blue, backorder orange. The same
   colours return in the indicator line of a cell and in the cart. */
.robey-dot { width: 9px; height: 9px; border-radius: var(--robey-radius-round); flex-shrink: 0; display: inline-block; }
.robey-dot--stock { background: var(--robey-color-green); }
.robey-dot--backorder { background: var(--robey-color-orange); }
.robey-dot--preorder { background: var(--robey-color-blue); }
.robey-cart-label { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px;
  border-radius: var(--robey-radius-small); font-size: var(--robey-text-13); font-weight: 600; }
.robey-cart-label--stock { background: var(--robey-color-green-tint); }
.robey-cart-label--preorder { background: var(--robey-color-blue-tint); }

/* ---------------------------------------------------------------- amounts
   Columns of figures align on tabular-nums; without it a total jumps under
   a subtotal. Notation: EUR 2.246,40 - space after the sign, dot as
   thousands separator, comma as decimal separator. */
.robey-amount { font-weight: 800; letter-spacing: var(--robey-amount-tracking); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- notices
   Two kinds, same box, different meaning. Yellow asks the dealer to correct
   something (a size over its maximum, a preorder product under fifteen
   pieces). Gray is an opportunity, not a correction: the amount still
   missing before shipping is free. Gray deliberately, because it carries no
   status: the status colours green, orange and blue say something about a
   size, and this says something about the order. It is gray-2 on the gray-1
   card, so it reads as an element without demanding attention; the padding
   is one pixel larger because there is no border. Never use yellow for an
   opportunity, and never give this label a status colour. */
.robey-notice { display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--robey-radius-small); font-size: var(--robey-text-12); font-weight: 400;
  line-height: 1.5; color: var(--robey-color-black); }
.robey-notice b { font-weight: 700; }
.robey-notice--correction { background: var(--robey-color-notice); border: 1px solid var(--robey-color-notice-border); }
.robey-notice--opportunity { background: var(--robey-color-gray-2); padding: 3px 9px; }

/* ---------------------------------------------------------------- tile photo
   Always 4:5 on gray-1, even if the source photo differs. Object-fit cover,
   never stretched. */
.robey-photo { width: 100%; aspect-ratio: 4 / 5; background: var(--robey-color-gray-1);
  position: relative; overflow: hidden; display: block; }
.robey-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }