/* ═══ Pink Friday: the campaign look ══════════════════════════════════════════

   Every rule is scoped to .pf-campaign on <body>, which _Layout adds only inside
   the dates BC holds. That is what lets the site go back to normal on 1 December
   with no release: the class stops being written and all of this stops applying.

   What goes black (the brief, page 19): top strip, hero, section bands, the
   countdown, the wheel, the progress bar and the footer band.

   What stays white, deliberately: product cards, product pages, cart, checkout,
   account, and every health, prescription and clinician page. People are reading
   prices and clinical advice on those, and a campaign skin over them costs
   legibility for no gain.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-campaign {
    --pf-pink: #E61B77;
    --pf-black: #140A10;
    --pf-yellow: #F5B21E;
    --pf-green: #62AE45;

    /* Brand pink on the campaign black is 4.43:1 — just under the 4.5:1
       minimum, and the strip sets it at 13-14px where that matters most. This
       lighter pink is 6.90:1 on the same black.
       Text on black uses this; fills, bars and chips keep brand pink, where
       contrast is not the question. */
    --pf-pink-text: #FF5FA8;
}

/* ── The top strip ──────────────────────────────────────────────────────────
   The site already has this bar and it is already CMS-driven. During the
   campaign it turns black and carries two lines that alternate, rather than
   gaining a second bar below the first. */
.pf-campaign .header-promo {
    background: var(--pf-black) !important;
    color: #fff;
}

.pf-campaign .header-promo p { color: #fff; }

.pf-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 12px;
    text-align: center;
    font: 500 13px/1.3 Inter, system-ui, sans-serif;
    color: #fff;
}

/* Both lines occupy the same space and cross-fade, so the bar never changes
   height and nothing below it moves every five seconds. */
.pf-strip-lines {
    position: relative;
    display: grid;
    min-width: 0;
}

/* The two lines take turns rather than overlapping. They share one grid cell, so
   a true cross-fade shows both texts at once — on a desktop one line each that
   reads as a dissolve, but on a phone, where each wraps to several lines of
   different lengths, it reads as garbled text for half a second.

   The incoming line waits for the outgoing one to finish: .22s out, then .22s
   in, which is the same .45s overall the bar had before. */
.pf-strip-line {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transition: opacity .22s ease;
    min-width: 0;
}

.pf-strip-line.is-on {
    opacity: 1;
    transition-delay: .22s;
}

/* With motion allowed, the lines roll: the outgoing one rises out with a soft blur, then
   the incoming one rises in from below. Still one after the other, never both at once. */
@media (prefers-reduced-motion: no-preference) {
    .pf-strip-lines { overflow: hidden; }
    .pf-strip-line {
        translate: 0 .9em;
        filter: blur(3px);
        transition: opacity .26s ease, translate .32s cubic-bezier(.2, .8, .2, 1), filter .26s ease;
    }
    .pf-strip-line.is-on { translate: none; filter: none; transition-delay: .24s; }
    .pf-strip-line.is-off { translate: 0 -.9em; transition-delay: 0s; }
}

/* The headline sentence, pink ahead of the rest of the line. This replaces the
   separate "PINK FRIDAY" chip that used to sit to its left: the copy already
   says Pink Friday, and the chip repeated it. */
.pf-strip-em {
    font-weight: 700;
    color: var(--pf-pink-text);
}

/* Still used by the footer band, which keeps the chip. */
.pf-strip-tag {
    font: 800 12px/1 Figtree, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pf-pink-text);
    white-space: nowrap;
}

@media (max-width: 575px) {
    .pf-strip { font-size: 12px; gap: 7px; }
    .pf-strip-tag { font-size: 10.5px; letter-spacing: .08em; }

    /* The lead sentence only. The full line is three sentences and ran to three
       wrapped lines on a phone, which made the fixed header about 196px tall and
       pushed every page down by that much. The lead carries the date, which is
       the part that has to be read; the rest stays on wider screens.

       A copy decision as much as a layout one, so it is one rule to undo. */
    .pf-strip-rest { display: none; }
}

/* ── Section bands ──────────────────────────────────────────────────────────
   The black header strip above a row of deal cards. The cards themselves stay
   white — only the band behind the heading changes.

   The deal rows already ship a heading row: an h2.section-heading beside an
   a.sec-viewall. The campaign bands those rows where they stand instead of
   adding a class to each component's markup, so no view is edited for the look
   and there is nothing to unpick on 1 December. Every selector below is under
   .pf-campaign, so outside the dates none of it applies. */
.pf-campaign .pf-band,
.pf-campaign .flash-sale-section .flash-sale-header > div:first-child,
.pf-campaign .offer-section .d-flex.justify-content-between.align-items-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--pf-black);
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 14px !important;
}

/* The flash row ships its heading and its countdown as two stacked blocks.
   Only the heading is banded: the brief's bar carries the title, the sticker
   and the link and nothing else, so the discount badge and the clock stay on
   their own row beneath it, where they read as information about the sale
   rather than as part of the campaign furniture. */
.pf-campaign .flash-sale-section .flash-sale-header > div:last-child {
    margin: 0 !important;
}

/* The pink wash and its rule belong to the ordinary flash sale. Under the
   campaign the deals sit on the page like every other row, as the brief has
   them — the black band is what marks the section now. */
.pf-campaign .flash-sale-section {
    background: transparent !important;
    border-top: 0 !important;
    padding-top: 24px !important;
}

/* The heading rows carry Bootstrap margin utilities (mb-0, mb-2, mb-3, mb-xl-4)
   that would otherwise push the text off-centre inside the band, so the margin
   is zeroed here rather than by editing each view. */
.pf-campaign .pf-band h2,
.pf-campaign .pf-band .section-heading,
.pf-campaign .flash-sale-section .flash-sale-header > div:first-child .section-heading,
.pf-campaign .offer-section .d-flex.justify-content-between.align-items-center .section-heading {
    margin: 0 !important;
    /* Pink, not white: the band's heading is the campaign's own colour against
       the black, with the sticker beside it. (_home-layout.css sets
       `.dawamain .section-heading` to #1f2937 with !important, so matching that
       weight is the only way to win it.) */
    font: 800 20px/1.2 "Figtree-Bold", Figtree, sans-serif !important;
    color: #fff !important;
    /* White letters edged in pink — the motion kit's prize treatment, scaled
       down. paint-order keeps the stroke behind the fill, so the letterforms
       stay their proper weight instead of thickening. */
    -webkit-text-stroke: 3px var(--pf-pink);
    paint-order: stroke fill;
}

/* The site's own "View All" is a white pill, set with !important on every
   property in _home-layout.css. On black it reads as a button competing with
   the cards, where the brief has a quiet pink text link — so each property has
   to be unset explicitly rather than merely restyled. */
.pf-campaign .pf-band .pf-band-link,
.pf-campaign .pf-band .sec-viewall,
.pf-campaign .flash-sale-section .flash-sale-header .sec-viewall,
.pf-campaign .offer-section .d-flex.justify-content-between.align-items-center .sec-viewall {
    margin-left: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--pf-pink-text) !important;
    font: 700 13px Inter, sans-serif !important;
    text-decoration: none;
    white-space: nowrap;
}

.pf-campaign .pf-band .sec-viewall:hover,
.pf-campaign .flash-sale-section .flash-sale-header .sec-viewall:hover,
.pf-campaign .offer-section .d-flex.justify-content-between.align-items-center .sec-viewall:hover {
    background: transparent !important;
    color: #fff !important;
    text-decoration: underline;
}

/* The campaign sticker the brief sets beside each deals heading. Injected by
   pf-campaign.js so no view carries campaign copy.

   The motion kit's sticker is edged in white for use on pale pages; on the
   black band the brief edges it dark instead, and sits it almost straight. */
.pf-campaign .pf-band .pf-sticker,
.pf-campaign .flash-sale-section .flash-sale-header .pf-sticker,
.pf-campaign .offer-section .pf-sticker {
    font-size: 13px;
    padding: 4px 12px;
    border-color: var(--pf-black);
    box-shadow: none;
    transform: rotate(-2deg);

    /* The band spaces its children apart, so a sticker added after the heading
       drifts to the middle of the bar. This keeps it beside the words it
       belongs to and lets the gap fall after it instead. */
    margin-right: auto;
}

/* "Usikose!" and "Haraka!" bounce: a hop, a squashed landing, a settle, then about three
   seconds still, and again. translate and scale, so the tilt above (a transform) stays. */
@media (prefers-reduced-motion: no-preference) {
    .pf-campaign .offer-section .pf-sticker,
    .pf-campaign .flash-sale-section .flash-sale-header .pf-sticker {
        transform-origin: 50% 100%;
        animation: pf-sticker-bounce 4s cubic-bezier(.28, .84, .42, 1) 1s infinite;
    }
}
@keyframes pf-sticker-bounce {
    0%   { translate: 0 0;     scale: 1 1; }
    4%   { translate: 0 0;     scale: 1.08 .92; }
    10%  { translate: 0 -12px; scale: .94 1.08; }
    16%  { translate: 0 0;     scale: 1.1 .9; }
    20%  { translate: 0 -4px;  scale: .98 1.02; }
    24%  { translate: 0 0;     scale: 1.02 .98; }
    28%, 100% { translate: 0 0; scale: 1 1; }
}

/* The offers row nests its heading in a wrapper div, where the flash row has
   the h2 as a direct child. Left as a block, that wrapper drops the injected
   sticker onto a second line under the heading, so it becomes a flex row of
   its own. min-width keeps it from stretching and stealing the bar, which
   would cost "View All" its right-hand anchor. */
.pf-campaign .offer-section .d-flex.justify-content-between.align-items-center > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── Countdown ──────────────────────────────────────────────────────────────
   Three tiles, slightly tilted, as the campaign's own styling has them. The
   seconds are deliberately absent: a figure that changes every second is a
   figure that never stops asking for attention. */
.pf-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--pf-black);
    color: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 18px 0;
}

.pf-countdown-copy {
    margin: 0;
    font: 500 14px/1.4 Inter, sans-serif;
    color: #F4E4EC;
    min-width: 0;
}

.pf-countdown-copy b { color: var(--pf-pink-text); font-weight: 800; }

/* "Pink Friday starts in" / "Ends in", rewritten in place by the script when
   the weekend arrives. */
/* Larger than it was: with the sentence taken off this card — it was repeating
   the strip word for word — this is the only wording left on it. */
.pf-countdown-label {
    align-self: center;
    margin-right: 6px;
    font: 800 15px Figtree, Inter, sans-serif;
    color: #fff;
    white-space: nowrap;
}

/* Centred, now there is no paragraph on the left for the clock to sit
   opposite. */
.pf-count-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
}

.pf-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 6px 12px;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .4);
    font: 700 11px Inter, sans-serif;
}

.pf-tile.pk { background: var(--pf-pink); color: #fff; transform: rotate(-4deg); }
.pf-tile.ye { background: var(--pf-yellow); color: var(--pf-black); transform: rotate(3deg); }
.pf-tile.wh { background: #fff; color: var(--pf-black); transform: rotate(-2deg); }

@media (max-width: 575px) {
    .pf-countdown { gap: 10px; padding: 12px 14px; }
    /* The tiles wrap among themselves as a last resort. Three of them plus
       their gaps fit a phone, but "27 days" is wider than "5 hrs" and the row
       must never be the thing that bursts the card. */
    .pf-count-row { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; }
    .pf-countdown-copy { width: 100%; font-size: 13px; }

    /* The label takes a line of its own on a phone.

       It is nowrap, so when it shared a line with the clock the two together
       came to more than the screen - and because the card centres its content,
       the excess was clipped at BOTH edges: "ink Friday starts in" on the left
       and the minutes tile on the right, with no way to scroll to either
       (Samsung A55). Full width forces the clock onto the next line, and
       normal wrapping removes the last way the text alone can overflow. */
    .pf-countdown-label {
        width: 100%;
        margin-right: 0;
        text-align: center;
        white-space: normal;
    }
}

/* ── Footer band ────────────────────────────────────────────────────────────*/
.pf-campaign .pf-footer-band {
    background: var(--pf-black);
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    font: 600 14px Inter, sans-serif;
}

.pf-campaign .pf-footer-band .pf-strip-tag { display: inline-block; margin-right: 8px; }

/* ── The add-to-cart button's own moment ────────────────────────────────────
   pf.addToCart puts .is-added on the button for 1.4 seconds. The motion kit
   styles every other state it sets but not this one, so without this the
   button sat still while the "+1" flew away from it.

   A brief pulse, not a label change: the button's text is written by the page
   in several different forms ("Add", "+ Add To Cart"), and rewriting it from
   the campaign would mean knowing all of them. */
.pf-campaign .is-added {
    animation: pf-added .5s cubic-bezier(.3, 1.5, .5, 1);
    position: relative;
}

@keyframes pf-added {
    0%   { transform: scale(1); }
    40%  { transform: scale(.94); }
    100% { transform: scale(1); }
}

.pf-campaign .is-added::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pf-pink);
    opacity: 0;
    pointer-events: none;
    animation: pf-added-wash .9s ease-out;
}

@keyframes pf-added-wash {
    0%   { opacity: .45; }
    100% { opacity: 0; }
}

/* Reduced motion gets the wash and no movement. */
.pf-reduce .pf-campaign .is-added,
.pf-campaign .pf-reduce .is-added {
    animation: none;
}

/* ── #5 The free delivery bar ───────────────────────────────────────────────
   Built by pf-campaign.js from BC's threshold and remaining figures, beneath
   the free-delivery sentence it already shows. The bar fills as the basket
   grows and the van rides across it; reaching the threshold plays once.

   Nothing here hardcodes the threshold — the width comes from BC's numbers, so
   the bar and the sentence can never disagree. */
.pf-campaign .pf-fd {
    position: relative;
    margin: 8px 0 2px;
}

/* The bar's own wording, used only on pages that do not already show BC's
   free-delivery sentence — the cart page, search and category. */
.pf-campaign .pf-fd-copy {
    display: block;
    margin-top: 6px;
    font: 600 12px Inter, sans-serif;
    color: #6b7280;
}

.pf-campaign .pf-fd-copy:empty { display: none; }

.pf-campaign .pf-fd-track {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 50px;
    background: rgba(230, 27, 119, .16);
    overflow: visible;
}

.pf-campaign .pf-fd-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--pf-pink), var(--pf-yellow));
    transition: width .6s cubic-bezier(.3, 1, .4, 1);
}

.pf-campaign .pf-fd-van {
    position: absolute;
    top: -9px;
    left: 0;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    transform: translateX(-50%);
    transition: left .9s cubic-bezier(.3, 1, .4, 1);
}

/* The moment it unlocks. */
.pf-campaign .pf-fd.is-unlocked .pf-fd-track {
    animation: pf-fd-pop .6s ease-out;
}

@keyframes pf-fd-pop {
    0%   { transform: scaleY(1); }
    40%  { transform: scaleY(2.1); }
    100% { transform: scaleY(1); }
}

/* Reduced motion: the bar is correct, it simply does not travel there. */
.pf-reduce .pf-campaign .pf-fd-fill,
.pf-reduce .pf-campaign .pf-fd-van,
.pf-campaign .pf-reduce .pf-fd-fill,
.pf-campaign .pf-reduce .pf-fd-van {
    transition: none;
}

/* ── Deal badges ────────────────────────────────────────────────────────────
   One deal badge per product, with "Back in stock" allowed beside it. BC
   decides which; these only give each one a look.

   These selectors carry no .pf-campaign prefix, but this stylesheet is only
   loaded inside the campaign window, so in practice badges appear only during
   a campaign. The markup renders whenever BC sends a badge, so if badges are
   ever wanted year-round — "Back in stock" is a plain fact about stock and is
   useful in any month — this block moves to a stylesheet that always loads,
   and nothing else has to change. */
.pf-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

/* Three sizes, as the design sheet sets them: the card, the product page and a
   banner. The card size is the default because it is far and away the most
   common — a grid of them on every search and category page. */
.pf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 50px;
    padding: 6px 13px;
    font: 700 12.5px/1.2 Inter, system-ui, sans-serif;
    white-space: nowrap;
}

.pf-badge--pdp {
    padding: 4px 12px;
    font-size: 13px;
}

.pf-badge--banner {
    padding: 6px 16px;
    font-size: 15px;
}

/* The bolt on Flash sale and the dot on Pink Friday deal. Decorative — the
   wording beside it already says which badge this is, so it is aria-hidden in
   the markup and never the only thing carrying the meaning. */
.pf-badge-glyph {
    font-style: normal;
    line-height: 1;
}

.pf-badge--pdp .pf-badge-glyph { font-size: 12px; }
.pf-badge--banner .pf-badge-glyph { font-size: 14px; }

/* Pink Friday deal: the campaign's own, so it carries the campaign's black,
   with the dot picked out in pink against the white wording. */
.pf-badge--pf {
    background: #140A10;
    color: #fff;
}

.pf-badge--pf .pf-badge-glyph {
    color: var(--pf-pink, #E61B77);
    font-size: 15px;
}

/* Flash sale: the row that runs out, in brand pink. */
.pf-badge--flash {
    background: #E61B77;
    color: #fff;
}

/* Deal all month: white, outlined in the campaign black. Quieter than the
   filled badges because it is the one that is not urgent — it runs all month —
   but the outline is the campaign's own dark, as the design draws it, not the
   pale hairline it had, which all but vanished against a white product photo. */
.pf-badge--month {
    background: #fff !important;
    color: #140A10 !important;
    border: 2px solid #140A10 !important;
}

.pf-badge--early {
    background: #F5B21E;
    color: #140A10;
}

/* PF-09: the gift badge. BC does not send this yet; the style is here so the
   badge, the filter option and the chip are all ready together. Green, because
   the other four are pink, black and yellow and a gift is a different kind of
   thing from a discount. */
.pf-badge--gift {
    background: #62AE45;
    color: #FFFFFF;
}

.pf-badge--stock {
    background: #62AE45;
    color: #fff;
}

/* ── The discount starburst ─────────────────────────────────────────────────
   On a badged card the discount becomes a yellow burst reading "-15%", as the
   campaign design has it. Only on a badged card: an ordinary offer keeps the
   tag the site has always shown, so nothing changes for products the campaign
   has not touched.

   The shape is a clip-path rather than an image, so it stays sharp at any size
   and costs no request. */
/* The site anchors .sale-badge to the card's top-left, which is where the deal
   badge now lives — left alone, the starburst lands on top of it and hides the
   badge's first word. On a badged card it moves to the right of the image, as
   the campaign design has it. */
/* Bottom-right of the image, as the design has it, and fully inside it: these
   cards put the product name straight under the image, so anything hanging
   below the image lands on the text.

   Anchored in pixels rather than percentages, because a percentage of the card
   moves with the title's line count. The numbers come from _product-card.css,
   not main.css — it overrides the image height with !important, so main.css's
   150/170px never applies and anchors derived from it sat too low:

     .img-box            margin-top 20px
     .product-img        max-height 140px   (desktop)
     .img-box            height 110px       (≤767.98px)

   So the image bottom is ~160px, or ~130px on a phone. */
/* The star is moved inside this box, so it has to be the positioning context.
   main.css already sets it, but _product-card.css rewrites the box wholesale
   and a later edit there could drop it without anyone connecting the two. */
.product-card .img-box {
    position: relative;
}

.product-card .sale-badge--pf {
    /* pf-campaign.js moves this inside .img-box, which is position:relative, so
       these are offsets from the image's own bottom-right corner and hold
       whatever height a row gives its images. The top/left offsets are cleared
       because the site's own .sale-badge rules set them. */
    top: auto !important;
    bottom: 2px !important;
    left: auto !important;
    right: 2px !important;

    /* These repeat .sale-badge--pf because _product-card.css sets them on
       `.product-card .sale-badge`, which is two classes to this rule's one.
       !important alone does not settle it — the more specific selector wins
       whatever the source order, so the badge stayed sized to its text and the
       star was squashed into a sliver. */
    display: grid !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: none !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
}

/* The image box is shorter on phones and tablets, and the star is smaller, so
   both change together. 130 − 46 − 6 keeps it inside with a small inset. */
@media (max-width: 767.98px) {
    /* Only the size changes on a phone — the corner it sits in is the image's
       own, so it needs no repositioning. */
    .product-card .sale-badge--pf {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        font-size: 12px !important;
    }
}

/* Every size property here needs !important. _product-card.css pins
   .product-card .sale-badge to display:inline-block with width:max-content and
   a max-width, all !important — so without matching that weight the element is
   sized to its text and the star gets squashed into a narrow box, which is
   exactly how it looked no matter what else was changed. */
.sale-badge--pf {
    display: grid !important;
    place-items: center;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* All three layers in one SVG: the grey star offset down and right, then
       the yellow star over it with a thin pink stroke.

       Drawn rather than built from clip-path and pseudo-elements, because the
       shadow has to sit OUTSIDE the star's own outline — and a clip-path cuts
       away everything outside it, pseudo-elements included. An SVG has no such
       boundary, and the stroke width is a number rather than the width of a
       gap between two shapes, so "thinner" is one digit. */
    background:
        url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<path d="M50.0 4.0L59.4 12.7L72.0 9.9L75.8 22.2L88.1 26.0L85.3 38.6L94.0 48.0L85.3 57.4L88.1 70.0L75.8 73.8L72.0 86.1L59.4 83.3L50.0 92.0L40.6 83.3L28.0 86.1L24.2 73.8L11.9 70.0L14.7 57.4L6.0 48.0L14.7 38.6L11.9 26.0L24.2 22.2L28.0 9.9L40.6 12.7Z" \
fill="%23c9ccd2" transform="translate(4.5,5)"/>\
<path d="M50.0 4.0L59.4 12.7L72.0 9.9L75.8 22.2L88.1 26.0L85.3 38.6L94.0 48.0L85.3 57.4L88.1 70.0L75.8 73.8L72.0 86.1L59.4 83.3L50.0 92.0L40.6 83.3L28.0 86.1L24.2 73.8L11.9 70.0L14.7 57.4L6.0 48.0L14.7 38.6L11.9 26.0L24.2 22.2L28.0 9.9L40.6 12.7Z" \
fill="%23F5B21E" stroke="%23E61B77" stroke-width="1.6" stroke-linejoin="round"/>\
</svg>') center / contain no-repeat !important;

    position: relative;
    color: #140A10 !important;
    font: 800 16px/1 Figtree, Inter, system-ui, sans-serif !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;

    /* Tilted, as the design draws it — the figure sits off the horizontal. */
    transform: rotate(-10deg);

    /* The star is painted, so nothing is cut away and nothing is filtered. */
    clip-path: none !important;
    filter: none !important;
}

/* Hover a card (mouse only): the yellow star spins once behind the figure, which stays
   still and readable. The star is split into two layers for this: the grey shadow stays
   put (spinning it would swing it round the star), the yellow star turns on top of it.
   Without hover, or with reduced motion, the one painted background above stays. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .product-card .sale-badge--pf { background: none !important; isolation: isolate; }
    .product-card .sale-badge--pf::before,
    .product-card .sale-badge--pf::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: center / contain no-repeat;
        pointer-events: none;
    }
    .product-card .sale-badge--pf::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50.0 4.0L59.4 12.7L72.0 9.9L75.8 22.2L88.1 26.0L85.3 38.6L94.0 48.0L85.3 57.4L88.1 70.0L75.8 73.8L72.0 86.1L59.4 83.3L50.0 92.0L40.6 83.3L28.0 86.1L24.2 73.8L11.9 70.0L14.7 57.4L6.0 48.0L14.7 38.6L11.9 26.0L24.2 22.2L28.0 9.9L40.6 12.7Z" fill="%23c9ccd2" transform="translate(4.5,5)"/></svg>');
    }
    .product-card .sale-badge--pf::after {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50.0 4.0L59.4 12.7L72.0 9.9L75.8 22.2L88.1 26.0L85.3 38.6L94.0 48.0L85.3 57.4L88.1 70.0L75.8 73.8L72.0 86.1L59.4 83.3L50.0 92.0L40.6 83.3L28.0 86.1L24.2 73.8L11.9 70.0L14.7 57.4L6.0 48.0L14.7 38.6L11.9 26.0L24.2 22.2L28.0 9.9L40.6 12.7Z" fill="%23F5B21E" stroke="%23E61B77" stroke-width="1.6" stroke-linejoin="round"/></svg>');
        transform-origin: 50% 48%;
    }
    .product-card:hover .sale-badge--pf::after {
        animation: pf-star-spin 1.1s cubic-bezier(.25, .8, .25, 1);
    }
}
@keyframes pf-star-spin {
    0% { rotate: 0turn; scale: 1; }
    40% { scale: 1.1; }
    100% { rotate: 1turn; scale: 1; }
}


@media (max-width: 575px) {
    /* Card starbursts are sized in the 767.98px block above, where the image
       box changes height; this one only covers anything outside a card. */
    .sale-badge--pf { width: 46px !important; height: 46px !important; min-width: 46px !important; font-size: 12px !important; }

    /* The badge is sized for a desktop card. On a phone the product image is a
       fraction of the width, and at full size the badge covered a third of it.
       Smaller text, tighter padding, closer to the corner. */
    .pf-badges {
        top: 8px;
        left: 8px;
        gap: 3px;
    }

    .pf-badge {
        font-size: 10.5px;
        padding: 4px 9px;
        gap: 4px;
    }

    .pf-badge--pf .pf-badge-glyph { font-size: 12px; }

    /* Two badges stacked would eat the image, so "Back in stock" gives way to
       the deal badge on a phone — the deal is the one that moves the sale. */
    .pf-badges .pf-badge--stock:not(:only-child) { display: none; }
}

/* On the product page every other corner is taken: the deal badge top-left,
   the share button top-right, and the gallery's "1 / 5" counter bottom-right —
   which the starburst was landing on top of. Bottom-left is the one corner
   free. Bigger than on a card, because the image is. */
/* Top-right, tucked under the share button — which sits at top:10 right:10 and
   is about 40px across, so this clears it. The gallery's "1 / 5" counter has
   the bottom-right corner, and the deal badge has the top-left. */
.pd-discount-badge.sale-badge--pf {
    top: 62px !important;
    bottom: auto !important;
    left: auto !important;
    right: 14px !important;
    width: 72px !important;
    height: 72px !important;
    font-size: 18px !important;
    letter-spacing: -0.02em;
}

/* The badge sits over the gallery image, which carries its own stacking. */
.pd-main-wrap .pf-badges {
    z-index: 10;
}

@media (max-width: 575px) {
    /* Beside the share button rather than under it. On a phone the gallery is
       short and its next/previous arrows sit at the vertical middle of the
       image, which is where the star landed when it was placed below — so it
       moves up onto the same row as the share button, to its left. The share
       button is about 40px wide at right:10, hence right:56. */
    .pd-discount-badge.sale-badge--pf {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        font-size: 12px !important;
        top: 10px !important;
        right: 56px !important;
    }

    /* The product page badge and its "Ends ..." line, at phone size. */
    .pf-pd-deal { gap: 6px; margin: 4px 0 8px; }
    .pf-pd-ends { font-size: 11px; }
}

/* On the product page the badge sits under the title, with the date the offer
   runs out beside it — the urgency the badge exists to create, said plainly. */
.pf-pd-deal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 10px;
}

.pf-pd-ends {
    font: 600 12px Inter, system-ui, sans-serif;
    color: #6b7280;
}

/* The card already has a discount badge top-right; these sit top-left and must
   not collide with the prescription badge, which uses the same corner. */
.product-card:has(.prescription-badge) .pf-badges {
    top: 40px;
}

/* ── The flash sale page hero ───────────────────────────────────────────────
   The page's own hero is a pink gradient. During the campaign it takes the
   campaign's black, like the section bands and the countdown card, so a
   customer arriving from "View all" does not cross into a differently dressed
   page. Outside the campaign this stylesheet is not loaded and the pink
   gradient is back, untouched. */
.pf-campaign .flash-hero {
    background: var(--pf-black) !important;
    position: relative;
    overflow: hidden;
}

/* The "⚡ Flash Sale" chip: the campaign's yellow, which is the colour this
   badge already carries on the cards. */
.pf-campaign .flash-hero-badge {
    background: var(--pf-yellow) !important;
    color: var(--pf-black) !important;
}

/* White filled, pink edged — the same treatment the section band headings
   carry, so the two read as one campaign. */
.pf-campaign .flash-hero-title {
    color: #fff !important;
    -webkit-text-stroke: 3px var(--pf-pink);
    paint-order: stroke fill;
}

.pf-campaign .flash-hero-discount,
.pf-campaign .flash-hero-count {
    color: #F4E4EC !important;
}

.pf-campaign .flash-countdown--hero .flash-cd-label {
    color: var(--pf-pink-text) !important;
}

/* The clock blocks become the campaign's tilted tiles, alternating pink,
   yellow and white as the countdown card does. */
.pf-campaign .flash-countdown--hero .flash-cd-block {
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .4);
    background: var(--pf-pink);
}

.pf-campaign .flash-countdown--hero .flash-cd-block:nth-child(3) {
    background: var(--pf-yellow);
    transform: rotate(3deg);
}

.pf-campaign .flash-countdown--hero .flash-cd-block:nth-child(5) {
    background: #fff;
    transform: rotate(-2deg);
}

.pf-campaign .flash-countdown--hero .flash-cd-block:first-child {
    transform: rotate(-4deg);
}

.pf-campaign .flash-countdown--hero .flash-cd-block:nth-child(3) .flash-cd-num,
.pf-campaign .flash-countdown--hero .flash-cd-block:nth-child(3) .flash-cd-unit,
.pf-campaign .flash-countdown--hero .flash-cd-block:nth-child(5) .flash-cd-num,
.pf-campaign .flash-countdown--hero .flash-cd-block:nth-child(5) .flash-cd-unit {
    color: var(--pf-black) !important;
}

.pf-campaign .flash-countdown--hero .flash-cd-block:first-child .flash-cd-num,
.pf-campaign .flash-countdown--hero .flash-cd-block:first-child .flash-cd-unit {
    color: #fff !important;
}

.pf-campaign .flash-countdown--hero .flash-cd-sep {
    color: #fff !important;
}

/* ── The offer filter ───────────────────────────────────────────────────────
   Each option shows the badge itself rather than describing it, so the filter
   and the cards read as the same vocabulary. The count beside it is of the
   products on this page, not the catalogue. */
.pf-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.pf-filter-row .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

/* Smaller than on a card: this is a list of options, not a mark on an image. */
.pf-filter-row .pf-badge {
    font-size: 11px;
    padding: 3px 10px;
}

.pf-filter-count {
    font: 500 12px Inter, system-ui, sans-serif;
    color: #6b7280;
}

/* ── What the campaign must not touch ───────────────────────────────────────
   Stated as rules rather than left to chance. A later band or hero added
   carelessly inside one of these is caught here rather than in review. */
.pf-campaign .cp,
.pf-campaign .is-checkout,
.pf-campaign .product-details,
.pf-health .pf-band,
.pf-health .pf-countdown {
    background: initial;
}

/* ── The free gift a spin prize adds ─────────────────────────────────────────
   BC puts this line on the cart at KES 0 while a Free Gift prize applies, and
   takes it off again when it stops applying. It is the prize's line, not the
   customer's: the quantity and delete controls are hidden because neither does
   anything — BC rebuilds the line on the next cart read whatever the browser
   did to it, and application.js drops it before submitting, so a "removal"
   would silently come back.

   Scoped to .pf-campaign like everything else here, so it needs no release to
   go away: outside the window no spin prize exists and no gift line is sent. */
.pf-campaign .cart-item--gift .change-quantity,
.pf-campaign .cart-item--gift .cart-delete,
.pf-campaign .cart-item--gift .cartRemove {
    display: none !important;
}

/* The row still needs to say how many, now that the stepper is gone. */
.pf-campaign .cart-item--gift .item-quantity::before {
    content: "Qty 1";
    font-size: 13px;
    color: #6b7280;
}


/* ── The page's offset under the fixed header ────────────────────────────────
   adjustMainPadding in themescripts.js owns padding-top: it measures the header
   and sets it with !important. This is the campaign's only part, and it is a
   stylesheet rule rather than a script so that nothing can clear it.

   main.css adds `.dawamain { margin-top: 50px !important }` below 1,200px. With
   the measured padding above it that margin is a second offset, and the two
   together left a band of empty space over the content. The padding is the one
   that tracks the header, so the margin goes. */
.pf-campaign .dawamain {
    margin-top: 0 !important;
}

/* ── PF-09: the offer chips ──────────────────────────────────────────────────
   A row of tappable deal types under the countdown, each opening the listing
   with that offer filter applied.

   Scrolls sideways on a phone rather than wrapping to a second line: the row is
   a shortcut, and a shortcut that pushes the page's first products below the
   fold has cost more than it saved. The scrollbar is hidden because the chips
   themselves show there is more to the right. */
.pf-campaign .pf-chips {
    display: flex;
    gap: 8px;
    margin: 12px 0 4px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pf-campaign .pf-chips::-webkit-scrollbar { display: none; }

.pf-campaign .pf-chip {
    flex: 0 0 auto;
    /* PF-09: 44px is the minimum tap target, and these were 30. Height set
       rather than padding alone so the number is the one being promised, and
       centred so the extra height does not read as a misaligned label. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #E61B77;
    background: #FFFFFF;
    color: #B01268 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.pf-campaign .pf-chip:hover,
.pf-campaign .pf-chip:focus-visible {
    background: #E61B77;
    color: #FFFFFF !important;
}

@media (max-width: 575px) {
    .pf-campaign .pf-chips {
        /* Full-bleed, so the row reads as something to scroll rather than a
           list that happens to be cut off at the container's edge. */
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .pf-campaign .pf-chip {
        /* Narrower sides to fit one more chip on screen, but the height stays:
           a phone is where the 44px minimum is the point. */
        font-size: 12.5px;
        padding: 0 14px;
    }
}

/* ── PF-05: the quiet state for the account's clinical tabs ─────────────────
   Set by pf-campaign.js when the Prescriptions or Consultations pill is open.
   Those are tabs inside /dashboard rather than pages, so the server cannot hold
   the strip back for them the way it does for the health pages. */
.pf-quiet {
    display: none !important;
}

/* ── PF-21: the offer a chip asked for, when nothing carries it ─────────────
   Reads as information about the list rather than as a warning: nothing has
   gone wrong, that offer simply is not running. */
.pf-offer-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #F3D4E4;
    background: #FDF4F8;
    color: #7A0F49;
    font: 600 14px Inter, sans-serif;
}

/* ── PF-23: the spin prize on this order ────────────────────────────────────
   In the checkout summary, above "Reduce what you pay". Not scoped to
   .pf-campaign: the element is in the checkout body rather than in a campaign
   partial, and pf-campaign.js only ever writes into it while the campaign is
   running. One gate, in the script, rather than two that can disagree. */
.pf-prize-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #F3D4E4;
    background: #FDF4F8;
    color: #7A0F49;
    font: 600 13px/1.4 Inter, sans-serif;
}

/* The apply button inside the prize note. Looks like the link it behaves as,
   because the note is a sentence and a filled button mid-sentence reads as a
   second call to action competing with Pay. */
.pf-prize-note .pf-prize-apply {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    color: #B01268;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}
.pf-prize-note .pf-prize-apply:hover,
.pf-prize-note .pf-prize-apply:focus-visible {
    color: #7A0F49;
}