/* ==========================================================================
   Mouldshop card markers — TASK-0024. Skin for Custom/MouldshopCardMarkers.cshtml.

   INVARIANT 12 — THE PALETTE SWAP IS THIS ONE BLOCK.
   Every colour this packet needs is declared once, below, as a custom property with a
   PLACEHOLDER value. No rule further down contains a colour literal: they are all var().
   When the brand palette lands, edit the block and nothing else.

   The placeholders in force project-wide are light `#ffffff` and dark `#000000`, and those are
   used verbatim for foreground/background. The three stock-dot states have no project placeholder
   yet — a dot painted #000000 in all three states would be indistinguishable and could not be
   smoked at all — so each carries an obvious, deliberately unbranded stand-in. THESE ARE NOT
   BRAND COLOURS AND ARE NOT PROPOSALS. They exist so the three states are visually separable
   until the palette is set.
   ========================================================================== */

:root {
  /* --- placeholders: the whole palette surface of this packet --- */
  --ms-marker-fg:            #ffffff;  /* project placeholder, light */
  --ms-marker-bg:            #000000;  /* project placeholder, dark  */
  --ms-marker-sale-bg:       #000000;  /* project placeholder, dark  */
  --ms-marker-sale-fg:       #ffffff;  /* project placeholder, light */
  /* NEW: navy (operator, 2026-09-24: "new bg navy"). Brand Navy Blue 01, NOT --ms-ink: the
     badge is a chip on the product IMAGE, not on the row, and its text is white - --ms-ink turns
     white on a schemed row and would erase it. White on navy is about 13:1. */
  --ms-marker-new-bg:        var(--ms-navy, #0A2979);
  --ms-marker-new-fg:        #ffffff;  /* project placeholder, light */

  /* BESTSELLER — TASK-0117. From the brand palette (mouldshop.css), NOT a placeholder: it must
     read as distinct from NEW and SALE, which are both still the dark placeholder. Blue 02 on
     Dark Blue 04 is roughly 7:1, above WCAG AA for this 11px bold text. */
  --ms-marker-bestseller-bg: var(--ms-blue, #6CB2DE);
  /* White text (operator, 2026-09-24: "make blue badge text white"). Was Dark Blue 04 at about
     7:1; white on Blue 02 is about 2.3:1, BELOW WCAG AA for this 11px bold text - by instruction. */
  --ms-marker-bestseller-fg: var(--ms-white, #FFFFFF);

  /* stock dot — stand-ins, unbranded, replace with the palette's semantic colours */
  --ms-dot-in:               #1f8a4c;
  --ms-dot-incoming:         #c08a00;
  /* "out" now reads "2-3 days" (a03d7c9) and takes the Incoming amber (TASK-0125, DEC-0072
     point 5). Aliased to --ms-dot-incoming, not a copied hex, so the two cannot drift. The
     state stays "out"; the dot, the card label and the variant-table label all read this. */
  --ms-dot-out:              var(--ms-dot-incoming);
  --ms-dot-ring:             #ffffff;  /* project placeholder, light */

  /* --- non-colour tokens --- */
  --ms-marker-gap:           .35rem;
  --ms-marker-inset:         20px;   /* operator, 2026-09-06: badges take the same inset as the card content (--ms-card-content-pad) */
  /* Rounded "as same as in all buttons" (operator, 2026-09-24): the site's buttons (.ms-btn) are
     pills, --ms-buybox-radius = 999px. Read from that token, so the two cannot drift apart. */
  --ms-marker-radius:        var(--ms-buybox-radius, 999px);
  --ms-dot-size:             .625rem;
}

/* ONE BOTTOM BAND, not two independently positioned corners (TASK-0117). Any badge combination
   must render with nothing overlapping and nothing past the image edge, down to the phone 2-up
   card. Two absolute corners cannot promise that: they overlap as soon as their sum exceeds the
   width. So the band is a flex row pinned to the bottom, inset on three sides:
     - status (left) and commercial (right) are pushed apart by margin-left:auto on the latter;
     - wrap-reverse: when both do not fit on one line, the SECOND item (commercial) moves to a new
       line ABOVE, still right-aligned, and status keeps the bottom line;
     - inside status, the badges and the dot wrap onto further lines of their own.
   The band must not intercept clicks — the card is a stretched link and markers are inert. */
.ms-markers {
  position: absolute;
  left: var(--ms-marker-inset);
  right: var(--ms-marker-inset);
  bottom: calc(var(--ms-marker-inset) * .5);   /* 20 -> 10: "move them all down by 50%" (operator, 2026-09-27) */
  display: flex;
  flex-wrap: wrap-reverse;
  /* BASELINE, not flex-end (operator, 2026-09-24: "in stock - v align bottom"). With the large
     percentage, flex-end lined up the two BOXES, and the percentage's box runs well below its
     figures - so the small stock text sat visibly higher than the bottom of "-20%". Baseline
     puts the bottom of the stock words on the bottom of the percentage's figures. */
  align-items: baseline;
  gap: var(--ms-marker-gap);
  pointer-events: none;
  z-index: 2;
}

.ms-markers-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-marker-gap);
  min-width: 0;
  max-width: 100%;
}

/* One semantic slot per side, matching the reference: status left, commercial right. */
.ms-markers-slot--commercial { margin-left: auto; }

.ms-badge {
  display: inline-block;
  padding: .15rem .4rem;
  border-radius: var(--ms-marker-radius);
  font-family: var(--ms-font-head, "Montserrat", sans-serif);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-badge--new  { background: var(--ms-marker-new-bg);  color: var(--ms-marker-new-fg); }
.ms-badge--sale { background: var(--ms-marker-sale-bg); color: var(--ms-marker-sale-fg); }

/* THE PERCENTAGE IS NOT A BOX (operator, 2026-09-24: "Percentage - we need to remove bg from
   this badge, change font to thin or light, and twice as big - color navy"). No background, no
   padding, so the figure sits on the same inset as the other badges. Light (300) - Montserrat
   is a variable face, 100-900, so the weight is real rather than synthesised. Twice the badge
   size: .6875rem -> 1.375rem. Navy = --ms-ink (DEC-0063: follows the row's scheme). */
.ms-badge--sale {
  background: none;
  padding: 0;
  color: var(--ms-ink, #0A2979);
  font-size: 2.2rem;   /* operator, same day: "twice as much again" 1.375 -> 2.75rem, then "20% smaller" -> 2.2rem */
  font-weight: 300;
  line-height: 1;
}
.ms-badge--bestseller { background: var(--ms-marker-bestseller-bg); color: var(--ms-marker-bestseller-fg); }

/* The dot carries its meaning in aria-label/title, not in the colour alone. */
.ms-dot {
  display: inline-block;
  width: var(--ms-dot-size);
  height: var(--ms-dot-size);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ms-dot-ring);
  flex: 0 0 auto;
}

.ms-dot--in       { background: var(--ms-dot-in); }
.ms-dot--incoming { background: var(--ms-dot-incoming); }
.ms-dot--out      { background: var(--ms-dot-out); }

/* The price slot's FREE state. Same type scale as the price it replaces. */
.ms-price-free {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* NEW / BESTSELLER - TOP-LEFT of the image (operator, 2026-09-24: "new and best badge top left").
   Their own layer, same inset as the bottom band, wrapping onto further lines rather than
   running past the image edge. Inert to clicks, like the band. */
.ms-markers-top {
  position: absolute;
  top: calc(var(--ms-marker-inset) * 1.5);   /* 20 -> 30: "move them all down by 50%" (operator, 2026-09-27) */
  left: var(--ms-marker-inset);
  right: var(--ms-marker-inset);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ms-marker-gap);
  pointer-events: none;
  z-index: 2;
}

/* The top badges (operator, 2026-09-24): weight 700 -> 500, and wider sides for the pill ends -
   .4rem -> .65rem, about half the badge's height, so the rounded end clears the first and last
   letter. Top badges only; the percentage is not a box. */
.ms-markers-top .ms-badge {
  font-weight: 500;
  padding-inline: .65rem;
}

/* THE DOT'S LABEL - "as same as in the variant table" (operator, 2026-09-24). The table's
   construction, reused: dot, gap, then "<level> <label>" in tabular figures, the TEXT in the
   dot's own colour per state (TASK-0085 item 8), from the same three tokens so the two can
   never drift apart. Body face at the table's .9rem. */
/* INLINE-BLOCK, not inline-flex: the band aligns on BASELINE, and a flex box takes its baseline
   from its first item - the dot, which has no text - so the label would have been aligned by the
   dot's bottom edge. As an inline-block its baseline is the text's. The dot sits on the middle of
   the line, spaced by margin instead of gap. */
.ms-stock {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--ms-font-body);
  font-size: .9rem;
  line-height: 1.2;
}

.ms-stock-n { font-variant-numeric: tabular-nums; }

.ms-stock .ms-dot {
  margin-inline-end: .4rem;
  vertical-align: middle;
}

.ms-stock--in       .ms-stock-n { color: var(--ms-dot-in); }
.ms-stock--incoming .ms-stock-n { color: var(--ms-dot-incoming); }
.ms-stock--out      .ms-stock-n { color: var(--ms-dot-out); }

/* CAMPAIGN BADGE (TASK-0134; order reversed by the operator 2026-09-25). The live campaign's Badge
   text on its products' cards: its OWN LINE ABOVE NEW / BESTSELLER (the percentage stays bottom-right) (flex-basis 100% inside the wrapping top row), text
   only - no background, no padding, like the percentage. The badge type scale (.ms-badge:
   Montserrat .6875rem, uppercase, .04em) at weight 600; colour = --ms-marker-new-bg, the navy the
   NEW badge fills with. CONTRAST: navy #0A2979 on the white product-image ground is about 13:1
   (AA). On a dark photograph it would fall below AA - product images here are cut-outs on white. */
.ms-markers-top .ms-campaign-badge {
  flex-basis: 100%;
  font-family: var(--ms-font-head, "Montserrat", sans-serif);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ms-marker-new-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* THE CAPSULE TEXT ON THE OPTICAL MIDDLE (operator, 2026-09-25: "two capsule badges - the text is
   not aligned middle vertically"). NEW and BESTSELLER only. The text is all capitals, so its
   visual middle is the middle of the CAP HEIGHT - but a line box centres the font's ascent +
   descent, and the browser rounds each of those to whole pixels independently, so where the caps
   land is left to the renderer. Read off our montserrat-latin.woff2: upm 1000, ascent 968, descent
   251, capHeight 700.
   text-box trims the line box to exactly cap top .. baseline, so equal padding above and below IS
   the optical middle, whatever the renderer rounds. The pill keeps its height: it was
   1.2em line + 2 x .15rem; the trimmed box is .7em of caps, so each side takes
   (1.2em - .7em) / 2 + .15rem = .25em + .15rem (18px total at 11px, as before).
   Behind @supports: where text-box is not implemented, the badge stays exactly as it was. */
@supports (text-box: trim-both cap alphabetic) {
  .ms-markers-top :is(.ms-badge--new, .ms-badge--bestseller) {
    text-box: trim-both cap alphabetic;
    padding-block: calc(.25em + .15rem);
  }
}

/* 3D BADGE (TASK-0138) - an outline cube, TOP-RIGHT of the product image, on cards and the PDP gallery
   (operator, 2026-09-26: right corner, both surfaces). 8px from the top and right, as TASK-0138 set -
   the one marker off the 20px --ms-marker-inset, by spec.
   TASK-0154 / DEC-0096: 26 x 26 (was 44, -40%). The cube is an animated WebP <img> inside the slot
   (static SVG under reduced motion), so it moves with the card; the shared WebGL canvas is gone.
   Its colour (--ms-marker-new-bg, #0A2979) is BAKED INTO the image: a colour change is a re-render
   (scripts/3d-badge/render.sh), not a CSS edit. Sized here, so the slot holds its place before the
   image arrives: no layout shift. Inert: no pointer events, no hover. */
.ms-3d-badge {
  position: absolute;
  top: 20px;   /* 8 -> 12 ("move them all down by 50%") -> 18 ("cube down - by 50%") -> 27 ("one more time - 50% down") -> 20 ("25% up", 27 x .75 = 20.25), operator 2026-09-27; right stays 8 */
  right: 8px;
  /* 26 -> 31 ("make icon bigger 20%", operator 2026-09-27; 26 x 1.2 = 31.2). The WebP is 78px, so
     at 31 it is 2.5x - still above 2x; a re-render at 93px would restore a full 3x. */
  width: 31px;
  height: 31px;
  z-index: 2;
  pointer-events: none;
}

.ms-3d-badge picture,
.ms-3d-badge img {
  display: block;
  width: 100%;
  height: 100%;
}

/* THE BADGE AS A LINK (operator, 2026-09-27: "icons 3D on press - redirect to OC page"). When the
   OnlyCopy page exists the badge is an <a> (MouldshopCardMarkers.cshtml): it takes clicks again,
   above the card's stretched link (z-index 1) and beside the PDP gallery button. Focus ring for the
   keyboard; no other hover change. */
.ms-3d-badge--link {
  pointer-events: auto;
  cursor: pointer;
}
.ms-3d-badge--link:focus-visible {
  outline: 2px solid var(--ms-navy, #0A2979);
  outline-offset: 2px;
  border-radius: 4px;
}

/* THE TOP ROW STOPS SHORT OF THE 3D BADGE (operator, 2026-09-27, phone screenshot: "the text of
   campain name need to have padding to not intersects with icon, same badges we have on top").
   The badge is emitted just before .ms-markers-top in the same parent, so a sibling rule finds the
   cards that carry both; cards without the badge keep the 20px inset. The row's right edge moves
   to the badge's left edge plus one marker gap: 8px + badge width + .35rem. The campaign name's ellipsis
   then cuts before the cube, and NEW / BESTSELLER wrap before it. */
.ms-3d-badge ~ .ms-markers-top {
  right: calc(8px + 31px + var(--ms-marker-gap));   /* follows the badge width */
}