Mix & Match pricing banner

The Deals ad card is gone. Its spot now holds the Mix & Match price breaks: at the right-hand end of the banner on desktop, full width under the intro on tablet and mobile.

Buy 5+: £2.00 each
Buy 10+: £1.90 each
Buy 20+: £1.80 each

Desktop1440 px frame · 1024 px and up: right-hand end of the banner

Tablet820 px frame · 768–1023 px: full width under the intro

Mobile390 px frame · under 768 px: full width under the intro

Set in the theme's Proxima Nova. Links and search inside the frames are switched off.

Element code

HTML and CSS for the pricing box. Prices are in the three list rows. The last CSS block is only needed where the box replaces the ad card inside the collection banner.

<!-- Mix & Match pricing: element code
     HTML + CSS for the pricing box. Prices live in the three <li> rows.
     Colours use the theme's tokens where they exist, with fallbacks. -->

<aside class="mm-offer" aria-label="Mix and match pricing">
  <span class="mm-offer__badge">Mix &amp; Match Pricing</span>
  <ul class="mm-offer__tiers">
    <li class="mm-offer__tier"><span class="mm-offer__qty">Buy 5+</span><span class="mm-offer__sr">: </span><span class="mm-offer__price">&pound;2.00 <span class="mm-offer__unit">each</span></span></li>
    <li class="mm-offer__tier"><span class="mm-offer__qty">Buy 10+</span><span class="mm-offer__sr">: </span><span class="mm-offer__price">&pound;1.90 <span class="mm-offer__unit">each</span></span></li>
    <li class="mm-offer__tier"><span class="mm-offer__qty">Buy 20+</span><span class="mm-offer__sr">: </span><span class="mm-offer__price">&pound;1.80 <span class="mm-offer__unit">each</span></span></li>
  </ul>
</aside>

<style>
  .mm-offer {
    --mm-tint: #fdf0f7;
    --mm-stroke: #f5a3cf;
    --mm-pink: var(--badge-text-color-secondary, #dd2590);
    --mm-ground: var(--color-extra-grey-light, #fafafa); /* colour of the section behind the box */
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: 30px;
    padding: 22px 10px 10px;
    background: var(--mm-tint);
    border: 1.5px solid var(--mm-stroke);
    border-radius: 14px;
    box-shadow: 0 10px 22px -14px rgba(221, 37, 144, .5);
    color: var(--color-charcoal, #414651);
    font-family: inherit;
  }

  /* Pill notched into the top edge. The 5px transparent border is a halo
     (--mm-ground above the outline, box tint below) so the outline stops either side. */
  .mm-offer__badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    padding: 6px 14px;
    border: 5px solid transparent;
    border-radius: 999px;
    background:
      linear-gradient(var(--mm-pink), var(--mm-pink)) padding-box,
      linear-gradient(var(--mm-ground) 50%, var(--mm-tint) 50%) border-box;
    color: #fff;
    font-size: 12px; font-weight: 700; line-height: 14px; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap;
  }

  .mm-offer__tiers { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }

  .mm-offer__tier {
    display: flex; flex: 1 1 0; flex-direction: column; align-items: center;
    min-width: 0; padding: 8px 4px 9px;
    background: #fff; border: 1px solid #f9d2e6; border-radius: 10px;
    text-align: center; white-space: nowrap;
  }

  .mm-offer__qty   { font-size: 13px; font-weight: 700; line-height: 18px; letter-spacing: .03em; text-transform: uppercase; }
  .mm-offer__price { margin-top: 2px; font-size: 23px; font-weight: 700; line-height: 26px; letter-spacing: -.01em; color: var(--color-purple-light, #6700c2); font-variant-numeric: lining-nums tabular-nums; }
  .mm-offer__unit  { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: 0; color: var(--color-muted, #695b77); }

  .mm-offer__sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  @media screen and (min-width: 768px) {
    .mm-offer        { margin-top: 34px; padding: 24px 12px 12px; }
    .mm-offer__tier  { min-width: 104px; padding: 10px 14px; }
    .mm-offer__qty   { font-size: 14px; }
    .mm-offer__price { font-size: 26px; line-height: 30px; }
    .mm-offer__unit  { font-size: 13px; line-height: 16px; }
  }
  @media screen and (min-width: 1024px) {
    .mm-offer { width: max-content; max-width: 100%; }
  }

  /* Banner placement: only needed when the box replaces the ad card inside the
     collection banner (banner_collection_v2). Desktop: right-hand end. Tablet + mobile: full width under the intro. */
  .banner-collection-v2--container { flex-wrap: wrap; }
  .banner-collection-v2--content { flex: 1 1 auto; min-width: 0; }
  .banner-collection-v2--container > .mm-offer { flex: 1 1 100%; }
  @media screen and (min-width: 768px) {
    .banner-collection-v2--container { row-gap: 0; }
    .banner-collection-v2--description { max-width: 54rem; }
  }
  @media screen and (min-width: 1024px) {
    .banner-collection-v2--container { flex-wrap: nowrap; }
    /* top: 6px nudges down half the pill overhang so pill + box sit optically centred */
    .banner-collection-v2--container > .mm-offer { flex: none; top: 6px; margin: auto 0 auto auto; }
  }
</style>