/* ==========================================================================
   Mouldshop card content: the name on ONE line, everything under the image centred.
   Operator instruction, 2026-09-24: "we need to stabilise height of the card - the name
   can increase height when it has two or more lines ... always only one line - shortened
   with dots at the end. And content below image - centered".

   Both card surfaces, one declaration each (ruling 12, one card everywhere):
     grid   : .product-list > .grid > article
     slider : [id^="ComponentSliderProducts_"] .slider-container > li
   The card is the vendor page-5861 component stack: image, then
   `swift-v2_productheader` (h2), then `swift-v2_productprice`. No template is touched.

   ONE LINE. `nowrap` + `ellipsis` alone is not enough here: the name sits in a flex item
   (`flex-fill` in a `d-flex` container) inside a grid item (the article), and both default
   to `min-width: auto`, i.e. "never narrower than my content". A one-line name's content
   is the WHOLE name, so the column would widen instead of cutting. `contain: inline-size`
   on the name's column removes its content from the width calculation entirely; the card
   width then comes from the grid / swiffy track alone and the name is cut to it.
   The full name stays available: the stretched link carries it as visually-hidden text.
   ========================================================================== */

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  [data-dw-itemtype="swift-v2_productheader"] {
  contain: inline-size;
  min-width: 0;
}

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productheader {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CENTRED. Every column under the image; the image column is left alone. The price block is
   a flex column (`d-flex flex-column`), so its lines centre by `align-items`, not by
   `text-align`. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  [data-swift-gridcolumn]:not([data-dw-itemtype="swift-v2_productdefaultimage"]) {
  text-align: center;
}

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex {
  align-items: center;
}

/* PRICE LINE (operator, 2026-09-24): "remove this [excl. VAT], and the price higher 25%, and
   when it's discount - the price is next to each other - and old price grey and crossed".
   Corrected the same day against the operator's mockup: CURRENT price (bold), OLD price
   (grey, crossed), one line. The dot between them was removed on his instruction. Cards only; the PDP buy box keeps its label.

   The card's price block is the vendor VERTICAL layout: `d-flex flex-wrap flex-column`, the
   current price first, the old price `order-2`, the VAT label `order-3`. Those Bootstrap
   utilities are ALL `!important`, which is why the first version of this block (plain
   `flex-direction: row`) changed nothing. The row therefore needs `!important` too; it wins
   the tie on specificity. `order` is left to vendor: order-2 already puts the old price
   AFTER the current one, which is what the mockup shows.

   Grey = `--ms-price-old-ink`, a neutral grey (see the old-price rule below). The crossing line is
   vendor's `text-decoration-line-through`, kept. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: baseline !important;
  column-gap: .5rem;
}

/* excl. VAT - the vendor label is the flex column's only <small>. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex > small {
  display: none;
}

/* Both prices 15px (operator, 2026-09-25: "i meant both prices" - after "change to 15"). Was
   1.25em of the block's fs-6, i.e. 20px. rem, so nothing inherited scales it. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex .text-price {
  font-size: .9375rem;
}

/* THE PROMOTIONAL PRICE IS BLUE (operator, 2026-09-25: "the promotional price make blue"): the
   current price, only when an old (crossed) price sits beside it. Brand Blue 02 --ms-blue
   #6CB2DE. A price with no discount stays navy. CONTRAST: about 2.3:1 on white - below AA for
   15px bold text; by instruction, on the DEC-0070 list. Beats the slider's navy
   [id^="ComponentSliderProducts_"] .text-price by specificity. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex:has(> .text-decoration-line-through) > .text-price {
  color: var(--ms-blue, #6CB2DE);
}

/* The current price: bold. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex > .text-price {
  font-weight: 700;
}

/* The old price: GREY, crossed (vendor). Operator, 2026-09-24: "do you know what GREY
   means?" - the first build used --ms-muted-ink, which is a blue-grey (#55607a) and read as
   navy. This is a NEUTRAL grey, no hue, lightened by the operator from #767676 (AA) to
   the value below, which is under AA on white. Vendor's `opacity-75` is cancelled so the grey renders
   as declared rather than 25% lighter.
   DEC-0063: on a SCHEMED row the old price falls back to the row's own muted foreground,
   because a fixed grey cannot be guaranteed legible on a background we do not choose. */
:root {
  --ms-price-old-ink: #A6A6A6;   /* operator 2026-09-24: "lighter grey" - was #767676 (AA); this one is below AA 4.5:1 on white, by instruction */
}

[data-dw-colorscheme]:not([data-dw-colorscheme=""]):not([data-dw-colorscheme="default"]) {
  --ms-price-old-ink: var(--ms-muted-ink);
}

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex > .text-decoration-line-through {
  color: var(--ms-price-old-ink);
  opacity: 1 !important;
}

/* The NUMBER inside it too. The wrapper above is only the strike line's colour: the number is
   an inner `.text-price`, and on the slider `mouldshop-vendor-product-slider.css` paints every
   `.text-price` navy, so the first grey build greyed the LINE and left the number navy. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex > .text-decoration-line-through .text-price {
  color: var(--ms-price-old-ink);
}

/* THE STRIKE LINE THROUGH THE MIDDLE OF THE DIGITS (operator, 2026-09-25: "the line which crosses
   the old price isn't in the middle vertically"). He was right, and by how much is measurable:
   read off OUR roboto-latin.woff2 (unitsPerEm 2048), the font's strikeout sits at
   yStrikeoutPosition 512 + half of yStrikeoutSize 102 = 0.275em above the baseline, while a digit
   is capHeight 1456 tall, centre 0.355em. Vendor's line-through (Bootstrap
   .text-decoration-line-through, !important) therefore runs 0.08em BELOW the middle of the price -
   about 1.6px at the card's size. CSS cannot move a line-through.
   So the line is drawn as an UNDERLINE placed from the baseline: css-text-decor-4 - with
   text-underline-position:auto the zero position of text-underline-offset IS the alphabetic
   baseline, positive downward. Offset -0.38em = digit centre 0.355em + half the line; thickness
   0.05em = the font's own strike thickness. skip-ink:none, or the line would break around every
   glyph it crosses. Vendor's line-through on the wrapper is switched off here only (cards). */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex > .text-decoration-line-through {
  text-decoration: none !important;
}

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .item_swift-v2_productprice > .d-flex > .text-decoration-line-through .text-price {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: .05em;
  text-decoration-skip-ink: none;
  text-underline-position: auto;
  text-underline-offset: -.38em;
  /* 15px, as the current price (both at 15px, operator 2026-09-25). The line scales with it (em). */
  font-size: .9375rem;
}

/* DIVIDER under the stock / percentage band (operator, 2026-09-24: "divider between stock,
   percent - and name - width 2/3 of card width, color and style same as dividers between
   cards"; then, on seeing it on the name section: "add this divider as a bottom border for
   this section" - the .ms-markers band).
   The card-to-card rule's own declaration: 1px of --ms-card-rule. Drawn on the band's ::after at
   its bottom edge, centred. The band is inset --ms-marker-inset on each side, so 100% here is the
   card minus two insets. (It was a fraction of the card - 2/3, then 1/3 - and is now the
   band's own full width, by instruction.) No card
   without a band (no stock state, no discount) draws one. The name section is left exactly as
   it was: no divider on it and no extra padding (both removed).
   Then: "add padding bottom to this module with border bottom - and make this divider 1/3 of
   card width". The band gets --ms-card-band-pad-bottom under its content, so the line sits that
   far below the stock / percentage; the line is 1/3 of the card. */
:root {
  --ms-card-band-pad-bottom: .75rem;   /* 12px - no value given; one token to tune */
  --ms-card-band-bottom:     4px;      /* band's distance from the image's bottom edge: 20 -> 17 -> 8 (operator, "lower") -> 4 (operator, 2026-09-27: "move them all down by 50%") */
}

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .ms-markers {
  padding-bottom: var(--ms-card-band-pad-bottom);
  /* "reduce this position 15% lower" (operator, same day): the band's `bottom` was the full
     --ms-marker-inset (20px); 15% less put it at 17px. Then "lower - decrease bottom position",
     no value given: 8px, a token above. */
  bottom: var(--ms-card-band-bottom);
}

:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  .ms-markers::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;   /* "make this divider full width of this section" (operator, same day) - was 1/3 of the card */
  /* DOTTED (operator, 2026-09-24: "divider horizontal above the product name - change it to dotted
     line"). Was a 1px solid fill; now a 1px dotted top border in the same --ms-card-rule colour. */
  height: 0;
  border-top: 1px dotted var(--ms-card-rule);
  pointer-events: none;
}

/* The PRICE row has no top padding (operator, 2026-09-24: "price - remove top padding"). It was
   vendor's row spacing, `padding-block-start: var(--dw-row-space-top)` = .25rem
   (data-dw-row-space-top="1"). Selected by content - the section holding the price component -
   so the name row's spacing is untouched. */
:is(.product-list > .grid > article,
    [id^="ComponentSliderProducts_"] .slider-container > li)
  > section:has(.item_swift-v2_productprice) {
  padding-block-start: 0;
}