/* =============================================================================
   Price ladder — rung selector, sticky mobile buy bar, upgrade card.

   Kept in its own sheet rather than appended to the 2,000-line style.css so the
   whole feature can be pulled by removing one <link>. Every rule is namespaced
   under .ek-tier* / .ek-upgrade* and nothing here restyles an existing class,
   so a product with no ladder renders exactly as it did before.

   Colours follow the storefront, not a new palette: #6e4ff5 (brand purple),
   #40c185 (buy green), #00a7d5 (accent).
   ========================================================================== */

.ek-tiers {
    display: block;
    margin: 0 0 20px;
    text-align: right;
}

.ek-tiers__title {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #2b3245;
    margin-bottom: 12px;
}

.ek-tiers__note {
    display: block;
    font-size: 12px;
    color: #8b95a8;
    line-height: 1.9;
    margin-top: 10px;
}

/* --- one rung ------------------------------------------------------------ */

.ek-tier {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 13px 14px;
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ek-tier:hover {
    border-color: #b9aef9;
}

.ek-tier.is-selected {
    border-color: #6e4ff5;
    border-width: 2px;
    padding: 12px 13px; /* keep the box the same size as the 1px state */
    background: #fbfaff;
    box-shadow: 0 4px 14px rgba(110, 79, 245, .12);
}

/* The native radio is replaced by .ek-tier__mark but stays in the DOM so the
   control remains keyboard-reachable and form-submittable. */
.ek-tier input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ek-tier__mark {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border: 2px solid #c8cfdb;
    border-radius: 50%;
    background: #fff;
    position: relative;
}

.ek-tier.is-selected .ek-tier__mark {
    border-color: #6e4ff5;
}

.ek-tier.is-selected .ek-tier__mark::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6e4ff5;
}

.ek-tier input[type="radio"]:focus-visible + .ek-tier__mark {
    outline: 2px solid #6e4ff5;
    outline-offset: 2px;
}

.ek-tier__body {
    flex: 1;
    min-width: 0;
}

.ek-tier__head {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.ek-tier__name {
    font-size: 14px;
    font-weight: bold;
    color: #222a3d;
    line-height: 1.8;
}

.ek-tier__badge {
    font-size: 10.5px;
    font-weight: bold;
    color: #fff;
    background: #40c185;
    border-radius: 99px;
    padding: 2px 9px;
    line-height: 1.9;
}

.ek-tier__tagline {
    display: block;
    font-size: 12px;
    color: #6d788c;
    line-height: 1.9;
    margin-top: 2px;
}

.ek-tier__includes {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.ek-tier__includes li {
    position: relative;
    padding-right: 17px;
    font-size: 12px;
    color: #4a5568;
    line-height: 2;
}

.ek-tier__includes li::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #40c185;
}

.ek-tier__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.ek-tier__amount {
    font-size: 19px;
    font-weight: bold;
    color: #6e4ff5;
    letter-spacing: -.3px;
}

.ek-tier__amount.is-free {
    color: #40c185;
}

.ek-tier__currency {
    font-size: 12px;
    color: #8b95a8;
}

.ek-tier__was {
    font-size: 12px;
    color: #a9b2c1;
}

.ek-tier__delta {
    font-size: 11.5px;
    color: #8b95a8;
    margin-right: auto;
}

/* --- sticky mobile buy bar ----------------------------------------------- */

.ek-buybar {
    display: none;
}

@media (max-width: 767px) {
    .ek-buybar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        padding: 9px 13px calc(9px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #e2e7ef;
        box-shadow: 0 -6px 20px rgba(15, 20, 35, .09);
    }

    .ek-buybar__price {
        flex: 1;
        min-width: 0;
        line-height: 1.4;
    }

    .ek-buybar__amount {
        display: block;
        font-size: 17px;
        font-weight: bold;
        color: #222a3d;
    }

    .ek-buybar__label {
        display: block;
        font-size: 11px;
        color: #8b95a8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ek-buybar__btn {
        flex: none;
        display: inline-block;
        padding: 12px 20px;
        border-radius: 8px;
        background: #40c185;
        color: #fff;
        font-size: 13.5px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

    .ek-buybar__btn:hover,
    .ek-buybar__btn:focus {
        color: #fff;
        opacity: .9;
        text-decoration: none;
    }

    /* The bar overlays the end of the page; give the footer room to clear it. */
    body.has-buybar {
        padding-bottom: 74px;
    }

    /* Two fixed things on the bottom edge of a phone is one too many, and the
       bar is the one the page exists for. The support FAB (style.css:2571) is
       pinned bottom-left with no z-index of its own, so the bar was already
       covering it — this only stops it peeking out from underneath. It is
       untouched on every other page and on desktop, and the page still says
       «پشتیبانی تمام وقت» and carries the channel link in the footer. */
    body.has-buybar a.support_telegram_static {
        display: none;
    }

    /* The nav drawer is z-index 1 (responsive.css:75) and this bar is 60, so an
       open menu had the bar cutting a bright stripe across its own dark
       overlay. */
    body.menu-is-open .ek-buybar {
        display: none;
    }

    /* The admin tools bar is fixed to the same edge (style.css:2544). Both
       belong on the page — an admin previewing it wants to see what a buyer
       sees AND reach their own tools — so they stack rather than fight. */
    body.has-admin-tools .ek-buybar {
        bottom: 70px;
        box-shadow: 0 -6px 20px rgba(15, 20, 35, .05);
    }

    body.has-buybar.has-admin-tools {
        padding-bottom: 144px;
    }
}

/* Narrow phones. The bar now carries every product, and «شروع آزمون بصورت
   آنلاین» is 19 characters — on a 320px screen the button at its normal size
   leaves the price too little room to stay on one line. */
@media (max-width: 359px) {
    .ek-buybar {
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .ek-buybar__btn {
        padding: 11px 13px;
        font-size: 12.5px;
    }

    .ek-buybar__amount {
        font-size: 15.5px;
    }
}

/* --- upgrade card (download + callback pages) ---------------------------- */

.ek-upgrade {
    border: 2px solid #40c185;
    border-radius: 12px;
    background: linear-gradient(180deg, #f4fdf9, #fff);
    padding: 18px 20px;
    margin: 18px 0;
    text-align: right;
}

.ek-upgrade__head {
    margin-bottom: 10px;
}

.ek-upgrade__eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: bold;
    color: #2f9e6f;
    letter-spacing: .3px;
}

.ek-upgrade__title {
    display: block;
    font-size: 16px;
    color: #1d2a24;
    margin-top: 3px;
    line-height: 1.8;
}

.ek-upgrade__tagline {
    display: block;
    font-size: 12.5px;
    color: #63736c;
    line-height: 1.9;
}

.ek-upgrade__list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.ek-upgrade__list li {
    position: relative;
    padding-right: 19px;
    font-size: 13px;
    color: #3f4d47;
    line-height: 2.1;
}

.ek-upgrade__list li::before {
    content: "";
    position: absolute;
    top: 11px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #40c185;
}

.ek-upgrade__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ek-upgrade__price b {
    font-size: 20px;
    font-weight: bold;
    color: #1d2a24;
}

.ek-upgrade__price span {
    font-size: 12px;
    color: #63736c;
    margin-right: 4px;
}

.ek-upgrade__btn {
    flex: 1;
    min-width: 190px;
    display: inline-block;
    padding: 13px 18px;
    border-radius: 8px;
    background: #40c185;
    color: #fff;
    font-size: 13.5px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.ek-upgrade__btn:hover,
.ek-upgrade__btn:focus {
    color: #fff;
    opacity: .9;
    text-decoration: none;
}

.ek-upgrade__note {
    display: block;
    font-size: 11.5px;
    color: #7d8b84;
    line-height: 1.9;
    margin-top: 10px;
}

/* --- factor page: what this rung includes -------------------------------- */

.ek-factor-tier {
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    background: #fbfaff;
    padding: 14px 16px;
    margin: 0 0 16px;
    text-align: right;
}

/* --- factor page: changing your mind about the rung ----------------------
   A segmented control, not a second copy of the product page's radio cards.
   By the time somebody is on the factor page the decision is made and the
   question is narrow — "did I pick the right one?" — so the chips carry only
   the name and what it costs, and the box below them keeps explaining the one
   that is selected. Anchors rather than inputs: the whole total reloads. */

.ek-factor-switch {
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px dashed #dfe4ec;
}

.ek-factor-switch__label {
    display: block;
    font-size: 11.5px;
    color: #8b95a8;
    margin-bottom: 8px;
}

.ek-factor-switch__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ek-factor-chip {
    flex: 1 1 auto;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    border: 1px solid #dfe4ec;
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.ek-factor-chip:hover,
.ek-factor-chip:focus {
    border-color: #7d6ce0;
    text-decoration: none;
}

.ek-factor-chip__name {
    font-size: 12.5px;
    font-weight: bold;
    color: #3f4759;
}

.ek-factor-chip__price {
    font-size: 11.5px;
    color: #8b95a8;
}

/* The selected rung is filled, not merely outlined: an outline alone reads as
   "hoverable" next to three other outlined chips. */
.ek-factor-chip.is-current {
    border-color: #4c3fb5;
    background: #f1effe;
    cursor: default;
}

.ek-factor-chip.is-current .ek-factor-chip__name {
    color: #4c3fb5;
}

.ek-factor-chip.is-current .ek-factor-chip__price {
    color: #6558c9;
}

/* Already paid for. Deliberately flat and unclickable — offering it as a
   choice would invite a second purchase of the same thing. */
.ek-factor-chip.is-owned {
    background: #f4f6f9;
    border-style: dashed;
    cursor: default;
}

.ek-factor-chip.is-owned .ek-factor-chip__name {
    color: #9aa3b2;
}

.ek-factor-chip.is-owned .ek-factor-chip__price {
    color: #2f9e6f;
}

@media (max-width: 480px) {
    /* Two per row on a phone: three chips in one line truncate the names, and
       the name is the only thing distinguishing them. */
    .ek-factor-chip {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
}

.ek-factor-tier__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.ek-factor-tier__name {
    font-size: 14px;
    font-weight: bold;
    color: #222a3d;
}

.ek-factor-tier__badge {
    font-size: 11px;
    font-weight: bold;
    color: #b45309;
    background: #fff4e2;
    border-radius: 99px;
    padding: 3px 10px;
}

.ek-factor-tier__list {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
}

.ek-factor-tier__list li {
    position: relative;
    padding-right: 17px;
    font-size: 12.5px;
    color: #4a5568;
    line-height: 2;
}

.ek-factor-tier__list li::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #6e4ff5;
}

.ek-factor-tier__note {
    display: block;
    font-size: 11.5px;
    color: #8b95a8;
    line-height: 1.9;
    margin-top: 9px;
}

/* --- user panel: which rung, and the way up ------------------------------ */

.ek-panel-tier {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 9px;
    border-radius: 99px;
    background: #f1effe;
    color: #4c3fb5;
    font-size: 11px;
    font-weight: bold;
    vertical-align: 2px;
}

.ek-panel-upgrade {
    display: inline-block;
    margin-right: 10px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid #40c185;
    color: #2f9e6f;
    font-size: 12.5px;
    font-weight: bold;
    text-decoration: none;
}

.ek-panel-upgrade:hover,
.ek-panel-upgrade:focus {
    background: #40c185;
    color: #fff;
    text-decoration: none;
}

/* The green of the "way up" link, restated as a flat chip: on the transactions
   table an upgrade is a fact about a past payment, not something to click. */
.ek-panel-tier--upgrade {
    background: #e6f7ef;
    color: #2f9e6f;
}

/* The climb, under the product title. Deliberately quiet — most buyers never
   see it, and the ones who do are checking a charge, not browsing. */
.ek-panel-history {
    margin: 6px 0 0;
    padding-right: 26px;
}

.ek-panel-history__line {
    display: block;
    font-size: 11.5px;
    color: #8b95a8;
    line-height: 2;
}

/* --- proof strip: the buying reasons, above the price -------------------- */

/* One panel, four columns, hairlines between them.

   It shipped as a 2×2 grid of separately-bordered tiles, which cost ~165px —
   more than the whole gap between the product title and the rung cards on a
   phone, so the strip pushed the decision it was written to support below the
   fold. Four columns of one row say the same four facts in ~90px.

   Flex rather than a 4-column grid because the strip carries between one and
   four chips: `flex: 1` divides whatever there is, while fixed columns would
   leave a two-chip product with two empty cells. */
.ek-proof {
    list-style: none;
    display: flex;
    align-items: stretch;
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid #e3e9f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 32, 52, .04);
    /* Clips the cell tint to the panel's own rounded corners; the cells carry
       no radius of their own, which is what makes the four read as one strip. */
    overflow: hidden;
}

.ek-proof__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 11px;
    text-align: center;
    background: linear-gradient(#fdfeff, #f6f9fc);
}

/* The divider is a border on the item, not a gap in the panel: a gap would let
   the page's white through and break the strip back into tiles. Logical side,
   because the page is RTL and the row therefore starts on the right. */
.ek-proof__item + .ek-proof__item {
    border-inline-start: 1px solid #e9edf4;
}

/* The evidence line. Fixed minimum height so a figure cell and a capability
   cell put their labels on the same baseline — otherwise the 26px green disc
   drops the tick's caption below the numbers' captions and the row reads
   ragged. */
.ek-proof__fact {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    max-width: 100%;
}

/* The one mark a chip can carry. A figure and a text value carry none — the
   number or the word IS the evidence — so this element exists only on a flag
   and a deny, where the mark is the entire answer. */
.ek-proof__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.ek-proof__item--flag .ek-proof__mark {
    background: #e6f7ef;
    color: #2f9e6f;
}

/* A denial is stated, not shouted. Grey rather than red: it is one honest line
   on a page trying to sell, and red beside a buy button reads as an error
   rather than as a specification. */
.ek-proof__item--deny .ek-proof__mark {
    background: #eef1f5;
    color: #8794a6;
}

.ek-proof__value {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.25;
    color: #1f2a3c;
    /* Digits of equal width, so «۳» and «۱۵» in neighbouring cells sit on the
       same optical centre. */
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A word is not a figure: at the numbers' size «PDF/Word» would not fit a 74px
   cell, and the ellipsis would trim the FRONT of it («…/Word») because an RTL
   cell trims the side the reader starts on. */
.ek-proof__item--text .ek-proof__value {
    font-size: 12.5px;
    line-height: 1.4;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    /* Last resort only, for a value longer than the cell. `anywhere` rather
       than `break-word` because only `anywhere` also shrinks the cell's
       min-content width, which is what keeps the four columns equal. */
    overflow-wrap: anywhere;
}

.ek-proof__label {
    font-size: 10.5px;
    line-height: 1.35;
    color: #6b7a90;
    /* Persian compounds joined by a ZWNJ («نمره‌گذاری») are longer than a 90px
       cell; break only when a word genuinely cannot fit. */
    overflow-wrap: break-word;
}

/* With no figure above it the label carries the whole claim, so it carries the
   weight too. */
.ek-proof__item--flag .ek-proof__label,
.ek-proof__item--deny .ek-proof__label {
    font-weight: bold;
    color: #33445c;
}

/* Said plainly, not sold. The caption is the claim either way, so it keeps the
   flag's weight; only the colour steps back. */
.ek-proof__item--deny .ek-proof__label {
    color: #75839a;
}

/* Small phones: the cells are ~75px there, so the padding goes before the type
   does. */
@media (max-width: 400px) {
    .ek-proof__item {
        padding: 9px 2px 10px;
    }

    .ek-proof__value {
        font-size: 16px;
    }

    /* A ~56px cell on a 320px phone is one step narrower than «PDF/Word» set at
       12.5px, and the overflow guard would then break it mid-word. */
    .ek-proof__item--text .ek-proof__value {
        font-size: 11.5px;
    }

    .ek-proof__label {
        font-size: 10px;
    }
}

/* --- an online test says its size in one line ---------------------------- */

/* «۵۸ سؤال · ۱۵ دقیقه», above the price, where a file product gets the proof
   strip.

   Not the strip, and not a smaller version of it: a test has exactly two
   figures worth printing before the button, and a bordered panel around two
   numbers — or, as it actually shipped, around ONE — makes a spec sheet out of
   a sentence. No border, no tint, no shadow: the price 20px below is the thing
   this card is built to show, and a boxed line above it competes for the same
   glance.

   Centred on the card, because the price and the button below it are, and a
   left-aligned line above two centred ones reads as a stray caption. */
.container.product-info aside .ek-testmeta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    /* Wider than it looks like it needs: this line and the price are the only
       two things above the fold that carry figures, and at 16px they read as
       one block with the price's own second line. */
    margin: 0 0 22px;
    padding: 0;
}

.container.product-info aside .ek-testmeta li {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    /* The sidebar's base list rule offsets every item by 15px and hangs an
       absolutely positioned marker outside it; both have to go, or the two
       facts sit off-centre with a purple square between them. */
    position: static;
    right: auto;
}

.container.product-info aside .ek-testmeta li::before {
    content: none;
}

/* A middot, not a hairline: with two items a divider rule would look like the
   start of a table. */
.container.product-info aside .ek-testmeta li + li::before {
    content: '·';
    margin: 0 8px;
    color: #ccd4e0;
    /* Undoes the base marker's absolute positioning, which would otherwise
       take the separator out of the line it separates. */
    position: static;
    width: auto;
    height: auto;
    background: none;
}

/* Emphasis inside the line, not against the price.

   It shipped at 16px bold in the price's own near-black, 16px above a 32px
   bold figure — near enough in weight and colour that the two read as one
   two-line price. The figures still have to lead their units, so the contrast
   stays; it is just spent inside this line rather than competing with the
   thing 22px below it. */
.ek-testmeta__value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #55627a;
    /* Same as the proof strip: equal-width digits keep «۸» and «۵۸» on one
       optical centre. */
    font-variant-numeric: tabular-nums;
}

.ek-testmeta__unit {
    font-size: 12px;
    color: #8894a6;
}

/* --- the sample interpretation, under the buy button --------------------- */

/* The second choice on a test page, and the only honest answer to "what do I
   actually get?" — so it is a button, directly under the buy button, rather
   than the 14px grey underlined line it was, sitting below the reassurance
   chips where a page keeps its small print.

   Outline where the buy button is filled: the pair has to read as one primary
   action and one secondary, and two filled bars of the same width read as two
   equal ones. Its own hairline border rather than the brand blue at full
   strength for the same reason — the border only becomes blue on hover, when
   the visitor has already chosen to look at it. */
.container.product-info aside .btn-sample-interpretation {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 12px 15px;
    border: 1px solid #dfe5f0;
    border-radius: 4px;
    background: #fff;
    color: #3a6cff;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.container.product-info aside .btn-sample-interpretation:hover,
.container.product-info aside .btn-sample-interpretation:focus {
    border-color: #3a6cff;
    background: #f3f6ff;
    color: #3a6cff;
    text-decoration: none;
}

/* --- the ladder is cumulative, said out loud ----------------------------- */

.ek-tier__carried {
    display: block;
    font-size: 11.5px;
    font-weight: bold;
    color: #2f9e6f;
    line-height: 1.9;
    margin-top: 8px;
}

.ek-tier__carried + .ek-tier__includes {
    margin-top: 3px;
}

/* --- price block --------------------------------------------------------- */

/* The legacy rule (style.css:998) sets 30px/bold on the wrapper and lets it
   cascade into whatever markup price_html() emitted; the sizes below are
   explicit so nothing depends on that inheritance, and the paddings replace the
   ones that used to reserve room for an absolutely-positioned price. */
.container.product-info aside .price.ek-price {
    font-size: inherit;
    font-weight: normal;
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e8ecf2;
}

.ek-price__now {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.3;
}

.ek-price__was {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Centred only in the sidebar box. price_html() also renders inside the failed
   payment card, where the surrounding block is left-aligned. */
.container.product-info aside .ek-price__now,
.container.product-info aside .ek-price__was {
    justify-content: center;
}

.ek-price__amount {
    font-size: 32px;
    font-weight: bold;
    color: #24303f;
    letter-spacing: -.5px;
}

.ek-price--free .ek-price__amount {
    color: #0ac487;
}

/* «تومان» is a unit, not part of the figure, so it does not compete with it. */
.ek-price__currency {
    font-size: 14px;
    font-weight: normal;
    color: #6b7a90;
}

.ek-price__old {
    font-size: 13px;
    color: #98a3b3;
    text-decoration: line-through;
    text-decoration-color: #c9d1dc;
}

/* Red rather than the brand green: green is the buy button 20px below, and a
   discount that looks like the button reads as part of it. */
.ek-price__save {
    font-size: 11.5px;
    font-weight: bold;
    line-height: 1.7;
    color: #d94848;
    background: #fdecea;
    border-radius: 999px;
    padding: 3px 9px;
}

/* --- reassurance chips, below the buy button ----------------------------- */

/* Two equal columns rather than flex-wrap: the four are interchangeable
   reassurances of the same weight, and wrapping sized each one by its own text,
   which read as four different things. Grid rows stretch, so the pair on a row
   is the same height even when one of them wraps to two lines. */
.container.product-info aside .list-notic.list-notic--compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.container.product-info aside .list-notic.list-notic--compact li {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    /* Floor, not a fixed height: a label long enough to wrap keeps the tile it
       is in the same size as the other three rather than growing its row. */
    min-height: 30px;
    padding: 5px 7px;
    border: 0;
    border-radius: 7px;
    background: #f4f6fa;
    color: #6b7a90;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    /* The base rule offsets each item by 15px and hangs its marker outside on
       `position:absolute`. Both have to be undone here, or the marker detaches
       from the chip and floats beside it. */
    position: static;
    right: auto;
}

/* No bullet. Centred text puts the marker wherever the label happens to end, so
   four labels of four different lengths gave four dots at four different
   positions — the one thing in a 2x2 grid that has to line up and did not.
   Aligning them to the start instead would fix the row but make a checklist out
   of what is deliberately the quietest block on the card, and the green tick it
   would borrow already means something more specific 200px above. `none`, not
   an empty string: the base rule (style.css:1005) hangs an absolutely
   positioned marker outside the item, and that one has to go too. */
.container.product-info aside .list-notic.list-notic--compact li::before {
    content: none;
}