/*
 * CP Pricing Table — structural CSS.
 *
 * Defensive scoping rules:
 *   1. Every selector is rooted at `.cppt` so host-theme rules can't reach in.
 *   2. Compound selectors (`.cppt .cppt-x`) raise specificity above typical theme rules.
 *   3. The wrapper itself sets NO background / padding / margin — the user controls
 *      the outer container (Elementor section, block, group, etc.) themselves.
 *   4. Common host-theme leaks (link decoration, list bullets, header margins) are
 *      explicitly reset within `.cppt`.
 *   5. All colours / spacing / radius come from CSS custom properties so theme
 *      files only override the five spec tokens.
 */

.cppt {
    /* Spec tokens — theme-*.css overrides these */
    --cppt-focus: #27c2f3;
    --cppt-secondary: #0086b1;
    --cppt-bg-soft: transparent;   /* reserved token; not applied by default */
    --cppt-text-dark: #131413;
    --cppt-text-muted: #5a6b80;

    /* Structural tokens — themes may override individually */
    --cppt-card-bg: #ffffff;
    --cppt-card-border: rgba(15, 23, 42, 0.08);
    --cppt-card-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
    --cppt-card-shadow-elevated: 0 18px 40px rgba(15, 23, 42, 0.16);
    --cppt-radius: 14px;
    --cppt-radius-pill: 999px;
    --cppt-control-radius: var(--cppt-radius-pill); /* themes override to e.g. 10px */
    --cppt-strike: #4b5563;
    /* Discount chip — warm yellow, sitting above the price. Measured 7.28:1,
       and yellow reads as "deal" without competing with the brand accent used
       by the CTA. */
    --cppt-save-bg: #fde68a;
    --cppt-save-text: #78350f;
    /* Diagonal strike colour, separate from --cppt-strike (the struck TEXT) so
       the line can be red while the digits stay neutral grey. */
    --cppt-strike-line: rgb(205 0 0 / 70%);
    --cppt-price-size: 48px;
    --cppt-cta-text: #ffffff;
    /* CTA fill. Defaults to the brand accent; theme files override it per card
       background variant (see theme-*.css). Always a solid colour — the CTA is
       never an outline button. */
    --cppt-cta-bg: var(--cppt-focus);
    /* Hover pair. Defaults to the resting pair so a theme that defines neither
       still behaves; every shipped theme overrides both. */
    --cppt-cta-bg-hover: var(--cppt-cta-bg);
    --cppt-cta-text-hover: var(--cppt-cta-text);
    --cppt-divider: rgba(15, 23, 42, 0.08);
    --cppt-control-bg: rgba(15, 23, 42, 0.06);
    --cppt-control-text: var(--cppt-text-muted);
    /* Selected pill is a dark slab with light text — the strongest available
       contrast against the pale control track, so the current tier reads at a
       glance. Dark cards invert this (see .cppt-card--bg-dark). */
    --cppt-active-opt-bg: var(--cppt-text-dark);
    --cppt-active-opt-text: #ffffff;
    /* Hover wash for unselected pills: one step darker than the track itself,
       or it would be invisible sitting on top of it. */
    --cppt-opt-hover-bg: rgba(15, 23, 42, 0.1);
    /* Empty radio ring on unselected pills. */
    --cppt-opt-marker: rgba(15, 23, 42, 0.3);
    /* Reference for the dark card variant — captured here so the override
       inside .cppt-card--bg-dark doesn't shadow the bg colour itself. */
    --cppt-card-bg-dark-ref: var(--cppt-text-dark);

    /* No background / padding / margin — user controls outer container. */
    background: transparent;
    margin: 0;
    padding: 0;
    /* Breathing room when banner.js smooth-scrolls to the pricing wrapper on Apply */
    scroll-margin-top: 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cppt-text-dark);
    line-height: 1.5;
    text-align: left;
}

.cppt,
.cppt *,
.cppt *::before,
.cppt *::after {
    box-sizing: border-box;
}

/* Reset common host-theme leaks on plugin-owned elements */
.cppt p,
.cppt h1,
.cppt h2,
.cppt h3,
.cppt h4,
.cppt h5,
.cppt h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
}
.cppt a {
    text-decoration: none;
    background: transparent;
    border: 0;
}
.cppt a:focus,
.cppt a:hover {
    text-decoration: none;
}
.cppt ul,
.cppt ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cppt li {
    margin: 0;
    padding: 0;
}
.cppt img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}
.cppt button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-image: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: none;
    line-height: normal;
    border-radius: 0;
    white-space: normal;
    text-align: left;
}
.cppt input[type="radio"] {
    margin: 0;
}

/* Defensive overrides for sites whose theme or page builder (Elementor,
   Bricks, Astra, GeneratePress, etc.) injects aggressive `button { ... }` /
   `a { ... }` styles globally. Limited to the properties most commonly
   leaked — anything we customise per-button (padding, background, etc.)
   gets re-applied with !important on the specific rule below. */
.cppt button,
.cppt button:hover,
.cppt button:focus,
.cppt button:active,
.cppt a.cppt-cta,
.cppt a.cppt-cta:hover,
.cppt a.cppt-cta:focus,
.cppt a.cppt-cta:active,
.cppt a.cppt-cta:visited {
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    min-width: 0 !important;
    font-family: inherit !important;
}

/* ---------- Cards grid ---------- */

.cppt .cppt-cards {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin: 0;
    padding: 0;
}
@media (min-width: 640px) {
    .cppt .cppt-cards--2up,
    .cppt .cppt-cards--3up,
    .cppt .cppt-cards--4up { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .cppt .cppt-cards--3up { grid-template-columns: repeat(3, 1fr); }
    .cppt .cppt-cards--4up { grid-template-columns: repeat(4, 1fr); }
}

/* 45px of side padding suits a full-width or 2-up card, but a 3-up column at
   960px is only ~304px wide and a 4-up ~222px: 90px of that as padding leaves
   too little for a 48px price. Taper until the columns are wide enough.
   These are (0,3,0) so they beat the (0,2,0) base rule regardless of order. */
@media (min-width: 960px) and (max-width: 1199px) {
    .cppt .cppt-cards--3up .cppt-card {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (min-width: 960px) and (max-width: 1359px) {
    .cppt .cppt-cards--4up .cppt-card {
        padding-left: 26px;
        padding-right: 26px;
    }
}
@media (min-width: 1360px) {
    .cppt .cppt-cards--4up .cppt-card {
        padding-left: 34px;
        padding-right: 34px;
    }
}

/* ---------- Card ---------- */

.cppt .cppt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--cppt-card-bg);
    border: 2px solid var(--cppt-card-border);
    border-radius: var(--cppt-radius);
    padding: 35px 45px;
    box-shadow: var(--cppt-card-shadow);
    color: var(--cppt-text-dark);
    margin: 0;
}

/* Phones: same rhythm, less of it. Same (0,2,0) specificity as the rule above,
   so this MUST stay after it — a media query adds no weight of its own. */
@media (max-width: 639px) {
    .cppt .cppt-card {
        padding: 28px 22px;
    }
}

.cppt .cppt-card__badge {
    position: absolute;
    top: -14px;
    right: 16px;
    background: var(--cppt-focus);
    color: var(--cppt-cta-text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border-radius: var(--cppt-radius-pill);
    white-space: nowrap;
    line-height: 1;
}

.cppt .cppt-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.cppt .cppt-card__icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 0 0 4px;
    display: block;
    border-radius: 3px;
}
.cppt .cppt-card__name {
    font-size: 22px;
    font-weight: 700;
    color: var(--cppt-text-dark);
    line-height: 1.45;
}
.cppt .cppt-card__tagline {
    color: var(--cppt-text-muted);
    font-size: 14px;
    font-weight: 500;
    /* Breathing room before the price. The card's own 20px gap alone let the
       subtitle sit close enough to read as part of the price block. Beats
       widening the card gap, which would also push the points list away.
       (0,2,0) so it beats the `.cppt p` margin reset. */
    margin-bottom: 6px;
}

/* ---------- Price block ---------- */

.cppt .cppt-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
}

/* Two rows, hosting-page style: [63% OFF] + struck price on top, the real
   price large underneath. Opt-in via the modifier rather than changing the
   base rule, because the promo and static cards keep a single inline row and
   would otherwise stack. Rows are real elements, not flex-basis tricks, so
   each row owns its alignment: the chip centres against the struck digits,
   while the period sits on the big price's baseline. */
.cppt .cppt-price--stacked {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}
.cppt .cppt-price__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
}
.cppt .cppt-price__row--top {
    align-items: center;
}
/* Diagonal strike instead of a horizontal line-through.
 *
 * Drawn as a ::after overlay rather than a background on the element itself — a
 * background sits BEHIND the glyphs and would be chopped up by the digits.
 *
 * `to top right` = corner-to-corner, NOT a literal 45deg. That is deliberate:
 * a true 45deg line through a box only spans a horizontal distance equal to the
 * box HEIGHT, so on "$1,299" (~90px wide, ~25px tall) it would cross barely a
 * quarter of the price and leave the outer digits unstruck. Corner-to-corner
 * always crosses the whole number, which is the point of a struck price.
 * Swap `to top right` for `45deg` if the exact angle matters more than coverage.
 *
 * Stops are feathered by ~0.4px because hard gradient stops are not
 * antialiased and render as a visible staircase on a diagonal.
 */
.cppt .cppt-price__strike {
    position: relative;
    color: var(--cppt-strike);
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
}
.cppt .cppt-price__strike::after {
    content: "";
    position: absolute;
    /* Longhands as well as the shorthand: without `inset` support the box would
       collapse to zero and NO strike would draw at all, leaving two plain prices
       side by side with nothing marking the old one. */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
        to top right,
        transparent calc(50% - 1.75px),
        var(--cppt-strike-line) calc(50% - 1.25px),
        var(--cppt-strike-line) calc(50% + 1.25px),
        transparent calc(50% + 1.75px)
    );
}
.cppt .cppt-price__active {
    font-size: var(--cppt-price-size);
    font-weight: 800;
    color: var(--cppt-text-dark);
    line-height: 1;
}
.cppt .cppt-price__period {
    color: var(--cppt-text-muted);
    font-size: 14px;
    font-weight: 400;
}
.cppt .cppt-price__save {
    background: var(--cppt-save-bg);
    color: var(--cppt-save-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: var(--cppt-radius-pill);
    line-height: 1.2;
    white-space: nowrap;
}
/* "UP TO n% OFF" on the static bundle card. Sits inline after the price rather
   than being pushed to the far edge, so it reads as part of the price. */
.cppt .cppt-price__save--upto {
    margin-left: 4px;
    font-size: 12px;
}

/* ---------- CTA button ---------- */

.cppt a.cppt-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 26px;
    background: var(--cppt-cta-bg);
    color: var(--cppt-cta-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.01em;
    border-radius: var(--cppt-control-radius);
    border: 2px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    line-height: 1.2;
}
.cppt a.cppt-cta:visited {
    color: var(--cppt-cta-text);
    text-decoration: none;
}
/* No brightness filter here: themes now name an explicit hover colour, and a
   filter on top would shift it away from the value the theme asked for. */
.cppt a.cppt-cta:hover,
.cppt a.cppt-cta:focus {
    background: var(--cppt-cta-bg-hover);
    color: var(--cppt-cta-text-hover);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}
.cppt a.cppt-cta:active {
    transform: translateY(1px);
}
.cppt a.cppt-cta:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 3px;
}

/* ---------- "Extra discount — Apply Discount" inline pitch ----------
   Compact one-line nudge below the CTA on lifetime cards. Four layered hide
   conditions so the line only appears when it's actionable:
     1) hidden by default
     2) shown only on cards whose CURRENT license is "lifetime" (toggle-aware)
     3) shown only after <html class="cppt-banner-shown"> — banner.js sets
        this the first time the visitor actually SEES the banner (showOffer /
        showActive) and persists it in sessionStorage. pricing.js restores
        the class on every page load if the flag exists. Closing the banner
        via the X button does NOT remove the class — the line stays as a
        fallback path so the visitor can still apply.
     4) hidden once <html data-cppt-coupon-mode="extra"> — banner.js sets this
        after Apply; line vanishes the instant the discount is applied. */
.cppt .cppt-extra-discount {
    display: none;
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: var(--cppt-control-radius);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cppt-focus) 10%, transparent),
        color-mix(in srgb, var(--cppt-focus) 18%, transparent));
    border: 1px dashed color-mix(in srgb, var(--cppt-focus) 45%, transparent);
    font-size: 12px;
    color: var(--cppt-text-dark);
    line-height: 1.4;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    animation: cppt-extra-pulse 2.4s ease-in-out infinite;
}
html.cppt-banner-shown .cppt-card[data-cppt-current-license="lifetime"] .cppt-extra-discount {
    display: flex;
}
html[data-cppt-coupon-mode="extra"] .cppt-extra-discount {
    display: none !important;
}
.cppt .cppt-extra-discount__icon {
    display: inline-block;
    animation: cppt-extra-icon-bob 1.6s ease-in-out infinite;
}
.cppt .cppt-extra-discount__msg {
    color: var(--cppt-text-muted);
}
.cppt .cppt-extra-discount__btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--cppt-focus) !important;
    font: inherit;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    box-shadow: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
}
.cppt .cppt-extra-discount__btn:hover,
.cppt .cppt-extra-discount__btn:focus {
    background: transparent !important;
    color: var(--cppt-focus) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    filter: brightness(0.92);
}
.cppt .cppt-extra-discount__btn:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 2px;
    border-radius: 2px;
}
@keyframes cppt-extra-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cppt-focus) 35%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--cppt-focus) 0%, transparent); }
}
@keyframes cppt-extra-icon-bob {
    0%, 100% { transform: translateY(0)   rotate(-4deg); }
    50%      { transform: translateY(-2px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .cppt .cppt-extra-discount,
    .cppt .cppt-extra-discount__icon { animation: none; }
}

/* ---------- Feature points ---------- */

.cppt .cppt-points {
    padding-top: 16px;
    border-top: 1px solid var(--cppt-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cppt .cppt-points li {
    position: relative;
    padding-left: 26px;
    color: var(--cppt-text-muted);
    font-size: 14px;
    line-height: 1.4;
}
.cppt .cppt-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background-color: var(--cppt-focus);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/* ---------- Site-count selector ---------- */

.cppt .cppt-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Pills — full card width, options share it equally (3 options => 1/3 each).
   `flex: 1 1 0` with `min-width: 0` is what forces equal widths regardless of
   label length; without min-width:0 a long label ("25 Websites") would refuse
   to shrink below its content size and the tracks would drift out of step.
   nowrap is required: wrapping would give the last row full width. */
.cppt .cppt-selector--pills .cppt-selector__group {
    display: flex;
    padding: 4px;
    background: var(--cppt-control-bg);
    border-radius: var(--cppt-control-radius);
    gap: 2px;
    align-self: stretch;
    width: 100%;
    flex-wrap: nowrap;
}
.cppt .cppt-selector--pills .cppt-selector__opt {
    flex: 1 1 0;
    min-width: 0;
    text-align: center !important;
    /* justify-content was inert until this display:flex — a <button> is not a
       flex container by default and the centring came from text-align. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cppt .cppt-selector--pills .cppt-selector__opt {
    appearance: none;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    /* 10px, not 14px: at 3-up/960px a pill is only 72px wide and 28px of side
       padding left 44px for a 46px "25 Sites" label — it was being ellipsised
       before the tick existed. */
    padding: 8px 10px !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cppt-control-text);
    border-radius: var(--cppt-control-radius) !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
.cppt .cppt-selector--pills .cppt-selector__opt:hover:not(.is-active),
.cppt .cppt-selector--pills .cppt-selector__opt:focus:not(.is-active) {
    background: var(--cppt-opt-hover-bg) !important;
    background-image: none !important;
    color: var(--cppt-text-dark);
    box-shadow: none !important;
}
.cppt .cppt-selector--pills .cppt-selector__opt:hover:not(.is-active) .cppt-selector__opt-check {
    border-color: var(--cppt-text-dark);
}
.cppt .cppt-selector--pills .cppt-selector__opt.is-active,
.cppt .cppt-selector--pills .cppt-selector__opt.is-active:hover,
.cppt .cppt-selector--pills .cppt-selector__opt.is-active:focus {
    background: var(--cppt-active-opt-bg) !important;
    color: var(--cppt-active-opt-text) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}
.cppt .cppt-selector--pills .cppt-selector__opt:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 2px;
}

/* Selected-pill checkmark: label left, tick right.

   The tick is hidden by default and revealed only once the group is measurably
   wide enough to seat it without squeezing the label. Measured in Chrome, not
   estimated: "25 Sites" renders at 46px, so a pill needs 46 + 16 (padding) +
   4 (gap) + 12 (tick) = 78px. A 3-up card affords ~93px per pill at 1440 but
   only ~72px at 960, which is why the threshold exists at all. It depends on
   how many pills there are — cat 21 ships four tiers — so the count arrives as
   a --nX class from PHP.

   The thresholds are CONTENT-box widths: container-type: inline-size queries
   the container's content box, so the group's own 8px of padding is already
   excluded and must not be added again. Budget per pill is 82px (46 label +
   16 padding + 4 gap + 16 ring) plus ~8% headroom for longer translations, so
   n pills need 86n + 2(n-1).

   Container queries, not media queries: what matters is the width of this
   group, which depends on the card's column in the grid, not on the viewport.
   Browsers without @container support keep the tick hidden and the label
   centred — the pre-1.12.4 look, and the right fallback, since a tick that
   doesn't fit would truncate the label instead.

   Space for the tick is reserved on inactive pills too (visibility, not
   display), so selecting one never reflows the row. */
.cppt .cppt-selector--pills .cppt-selector__group {
    container-type: inline-size;
}
.cppt .cppt-selector--pills .cppt-selector__opt-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cppt .cppt-selector--pills .cppt-selector__opt-check {
    display: none;                 /* container query below turns it on */
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--cppt-opt-marker);
    background: transparent;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cppt .cppt-selector--pills .cppt-selector__opt-check svg {
    width: 9px;
    height: 9px;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
/* Selected: the ring fills with the pill's text colour and the tick is drawn
   in the pill's own dark background, so it reads as a punched-out check. */
.cppt .cppt-selector--pills .cppt-selector__opt.is-active .cppt-selector__opt-check {
    background: var(--cppt-active-opt-text);
    border-color: var(--cppt-active-opt-text);
    color: var(--cppt-active-opt-bg);
}
.cppt .cppt-selector--pills .cppt-selector__opt.is-active .cppt-selector__opt-check svg {
    opacity: 1;
    transform: none;
}

@container (min-width: 86px) {
    .cppt .cppt-selector--pills .cppt-selector__group--n1 .cppt-selector__opt {
        justify-content: space-between;
        text-align: left !important;
        /* Tighter than the 14px used without a tick — measured: the label is
           46px, so 8px sides leave the tick room in a 3-up card at 1440. */
        padding: 8px 8px !important;
        gap: 4px;
    }
    .cppt .cppt-selector--pills .cppt-selector__group--n1 .cppt-selector__opt-check { display: inline-flex; }
}
@container (min-width: 174px) {
    .cppt .cppt-selector--pills .cppt-selector__group--n2 .cppt-selector__opt {
        justify-content: space-between;
        text-align: left !important;
        /* Tighter than the 14px used without a tick — measured: the label is
           46px, so 8px sides leave the tick room in a 3-up card at 1440. */
        padding: 8px 8px !important;
        gap: 4px;
    }
    .cppt .cppt-selector--pills .cppt-selector__group--n2 .cppt-selector__opt-check { display: inline-flex; }
}
@container (min-width: 262px) {
    .cppt .cppt-selector--pills .cppt-selector__group--n3 .cppt-selector__opt {
        justify-content: space-between;
        text-align: left !important;
        /* Tighter than the 14px used without a tick — measured: the label is
           46px, so 8px sides leave the tick room in a 3-up card at 1440. */
        padding: 8px 8px !important;
        gap: 4px;
    }
    .cppt .cppt-selector--pills .cppt-selector__group--n3 .cppt-selector__opt-check { display: inline-flex; }
}
@container (min-width: 350px) {
    .cppt .cppt-selector--pills .cppt-selector__group--n4 .cppt-selector__opt {
        justify-content: space-between;
        text-align: left !important;
        /* Tighter than the 14px used without a tick — measured: the label is
           46px, so 8px sides leave the tick room in a 3-up card at 1440. */
        padding: 8px 8px !important;
        gap: 4px;
    }
    .cppt .cppt-selector--pills .cppt-selector__group--n4 .cppt-selector__opt-check { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
    .cppt .cppt-selector--pills .cppt-selector__opt-check { transition: none; }
}

/* Dropdown */
.cppt .cppt-selector--dropdown .cppt-selector__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--cppt-text-muted);
    text-transform: uppercase;
}
.cppt .cppt-selector--dropdown .cppt-selector__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--cppt-card-bg);
    border: 2px solid var(--cppt-card-border);
    border-radius: var(--cppt-control-radius);
    padding: 10px 36px 10px 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--cppt-text-dark);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    line-height: 1.4;
    height: auto;
}
/* :focus as well as :focus-visible. A <select> is a form control, and browsers
   do not reliably match :focus-visible when it is opened with the mouse — which
   left a mouse user with no indication the control was active. Outline only, to
   match every other focus state in this file; tinting the border as well reads
   as a double ring. */
.cppt .cppt-selector--dropdown .cppt-selector__select:focus,
.cppt .cppt-selector--dropdown .cppt-selector__select:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 2px;
}

/* (C) Native <option> styling. The open dropdown is drawn by the OS, so this is
   all the platform allows: Chrome/Edge and Firefox on desktop honour background
   and colour; Safari, iOS and Android ignore it entirely and show their native
   menu. Harmless everywhere — worth having for the browsers that do listen.
   Inherits the card tokens, so options invert correctly on dark cards. */
.cppt .cppt-selector--dropdown .cppt-selector__select option {
    background-color: var(--cppt-card-bg);
    color: var(--cppt-text-dark);
    font-weight: 600;
}
.cppt .cppt-selector--dropdown .cppt-selector__select option:checked {
    background-color: var(--cppt-focus);
    color: var(--cppt-cta-text);
}

/* (A) Customizable select — Chrome 135+. Opting into `appearance: base-select`
   moves the popup out of the OS and into the page, so it becomes fully
   styleable. Everything here is inside @supports, so any browser without it
   silently keeps the native dropdown styled by the block above — there is no
   fallback path to get wrong. */
@supports (appearance: base-select) {
    .cppt .cppt-selector--dropdown .cppt-selector__select,
    .cppt .cppt-selector--dropdown .cppt-selector__select::picker(select) {
        appearance: base-select;
    }

    /* base-select supplies its own arrow via ::picker-icon, so drop the
       hand-rolled SVG chevron or the card would show two. */
    .cppt .cppt-selector--dropdown .cppt-selector__select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 14px;
        background-image: none;
    }
    /* While the picker is open, focus moves INTO the popup, so the select stops
       matching :focus and its ring disappears — which reads as the focus state
       having been lost. :open keeps the control visibly active for as long as
       its list is showing. */
    .cppt .cppt-selector--dropdown .cppt-selector__select:open {
        outline: 2px solid var(--cppt-focus);
        outline-offset: 2px;
    }
    .cppt .cppt-selector--dropdown .cppt-selector__select::picker-icon {
        color: var(--cppt-text-muted);
        transition: transform 0.15s ease;
    }
    .cppt .cppt-selector--dropdown .cppt-selector__select:open::picker-icon {
        transform: rotate(180deg);
    }

    /* The popup itself — matched to the card surface. */
    .cppt .cppt-selector--dropdown .cppt-selector__select::picker(select) {
        background: var(--cppt-card-bg);
        border: 2px solid var(--cppt-card-border);
        border-radius: var(--cppt-radius);
        box-shadow: var(--cppt-card-shadow-elevated);
        padding: 6px;
        margin-top: 6px;
        min-width: anchor-size(width);
    }

    .cppt .cppt-selector--dropdown option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border-radius: var(--cppt-control-radius);
        font-size: 15px;
        font-weight: 600;
        color: var(--cppt-text-dark);
        background: transparent;
        cursor: pointer;
    }
    .cppt .cppt-selector--dropdown option:hover {
        background: var(--cppt-control-bg);
    }
    .cppt .cppt-selector--dropdown option:checked {
        background: var(--cppt-focus);
        color: var(--cppt-cta-text);
    }
    /* The filled selected row already reads as "chosen"; the default tick would
       add a second indicator and shift every label sideways. */
    .cppt .cppt-selector--dropdown option::checkmark {
        display: none;
    }
    /* The selected <option> is cloned into the button as <selectedcontent>, so
       without this reset the button inherits the option's row padding and grows. */
    .cppt .cppt-selector--dropdown selectedcontent {
        display: contents;
    }
}

/* Radio — same full-width equal-share treatment as the pills. */
.cppt .cppt-selector--radio .cppt-selector__group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 10px;
}
.cppt .cppt-selector--radio .cppt-selector__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--cppt-text-muted);
}
.cppt .cppt-selector--radio .cppt-selector__opt.is-active {
    color: var(--cppt-text-dark);
}
.cppt .cppt-selector--radio .cppt-selector__radio {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--cppt-card-border);
    border-radius: 50%;
    background: var(--cppt-card-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
    flex-shrink: 0;
}
.cppt .cppt-selector--radio .cppt-selector__radio:checked {
    border-color: var(--cppt-focus);
}
.cppt .cppt-selector--radio .cppt-selector__radio:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--cppt-focus);
}
.cppt .cppt-selector--radio .cppt-selector__radio:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 2px;
}

/* ---------- Cell: wraps each card (and optional outside toggle above it) ---------- */

.cppt .cppt-cell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.cppt .cppt-cell .cppt-card {
    flex: 1;
}
.cppt .cppt-cell--outside-toggle .cppt-toggle {
    align-self: center;
}

/* ---------- Connected cards: top & bottom aligned; focus card pops outside the row ---------- */

.cppt .cppt-cards--connected {
    gap: 0;
    align-items: stretch;
}
.cppt .cppt-cards--connected .cppt-cell {
    transition: box-shadow 0.2s ease;
}

/* Focus cell — push the whole cell 14px above + 14px below the row */
.cppt .cppt-cards--connected .cppt-cell--focus {
    margin-top: -14px;
    margin-bottom: -14px;
    z-index: 1;
    position: relative;
}

/* Focus card — elevated shadow + extra padding so the popped frame has breathing room */
.cppt .cppt-cards--connected .cppt-card.cppt-card--focus {
    padding-top: 42px;
    padding-bottom: 42px;
    box-shadow: var(--cppt-card-shadow-elevated);
    border-radius: var(--cppt-radius);
}

/* Non-focus cards keep only outer radius so the row reads as one strip */
.cppt .cppt-cards--connected .cppt-cell:not(:first-child) .cppt-card:not(.cppt-card--focus) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-width: 0;
}
.cppt .cppt-cards--connected .cppt-cell:not(:last-child) .cppt-card:not(.cppt-card--focus) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}

/* NOTE: connected rows used to give non-focus cards a transparent outline CTA,
   and forced every connected CTA to a dark fill on hover. Both are gone — the
   buy button is now always a solid, themed fill, and hover is the standard
   hover colour pair defined by the active theme. */

/* Connected rows now inherit the base CTA hover colours, so a card
   inside a connected strip looks identical to a standalone one. */

/* On mobile (single column) — undo the connected styling */
@media (max-width: 639px) {
    .cppt .cppt-cards--connected {
        gap: 24px;
    }
    .cppt .cppt-cards--connected .cppt-cell--focus {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* Below 639px the grid is single-column, so the "one flush strip" treatment
       has to be fully undone — each card becomes a standalone card again.
       
       The selectors here MUST mirror the connected rules above, including both
       :not() pseudo-classes. Those are (0,6,0); a plain
       `.cppt .cppt-cards--connected .cppt-card` is only (0,3,0), and media
       queries add no specificity — so the shorthand undo silently lost and left
       cards with a missing side border and two square corners.
       
       Longhands for the same reason: the connected rules set
       border-left-width / border-*-radius individually, and a losing shorthand
       cannot clear them. */
    .cppt .cppt-cards--connected .cppt-card,
    .cppt .cppt-cards--connected .cppt-cell:not(:first-child) .cppt-card:not(.cppt-card--focus),
    .cppt .cppt-cards--connected .cppt-cell:not(:last-child) .cppt-card:not(.cppt-card--focus) {
        border-top-left-radius: var(--cppt-radius);
        border-top-right-radius: var(--cppt-radius);
        border-bottom-left-radius: var(--cppt-radius);
        border-bottom-right-radius: var(--cppt-radius);
        /* 2px to match the standalone card — 1px made connected cards on mobile
           visibly thinner than every other card on the page. */
        border-left-width: 2px;
        border-right-width: 2px;
        border-top-width: 2px;
        border-bottom-width: 2px;
    }
    .cppt .cppt-cards--connected .cppt-card.cppt-card--focus {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

/* ---------- Card background variants (light | tinted | dark) ---------- */

/* Tinted: subtle wash from the theme's primary brand colour. Defaults to
   the theme's bg-soft token; themes whose bg-soft is dark (coolplugins)
   override --cppt-bg-tinted to a light variant so the surface stays readable. */
.cppt .cppt-card--bg-tinted {
    --cppt-card-bg: var(--cppt-bg-tinted, var(--cppt-bg-soft));
    /* Pure-white default chip (pale green pill + darker green text) gets lost
       inside coloured washes — flip to a solid vibrant green pill with white
       text so the savings figure stays legible across all six brand themes. */
    --cppt-save-bg: #fde68a;
    --cppt-save-text: #78350f;
}

/* Accent: subtle wash derived from the theme's secondary brand colour. Each
   theme file sets --cppt-bg-accent to a light tint of its --cppt-secondary. */
.cppt .cppt-card--bg-accent {
    --cppt-card-bg: var(--cppt-bg-accent, var(--cppt-bg-tinted, var(--cppt-bg-soft)));
    --cppt-save-bg: #fde68a;
    --cppt-save-text: #78350f;
}

/* Dark: full inversion. The reference token --cppt-card-bg-dark-ref is captured
   at the .cppt scope BEFORE --cppt-text-dark is redefined here, so the dark bg
   colour survives the override of --cppt-text-dark. */
.cppt .cppt-card--bg-dark {
    --cppt-card-bg: var(--cppt-card-bg-dark-ref);
    --cppt-card-border: rgba(255, 255, 255, 0.16);
    --cppt-divider: rgba(255, 255, 255, 0.12);
    --cppt-text-dark: #ffffff;
    --cppt-text-muted: rgba(255, 255, 255, 0.7);
    --cppt-strike: rgba(255, 255, 255, 0.66);
    --cppt-control-bg: rgba(255, 255, 255, 0.1);
    --cppt-control-text: rgba(255, 255, 255, 0.7);
    /* Inverted: a dark slab would vanish into a dark card, so the selected
       pill goes light here. --cppt-card-bg-dark-ref is the theme's dark colour
       captured before --cppt-text-dark was redefined to white above. */
    --cppt-active-opt-bg: #ffffff;
    --cppt-active-opt-text: var(--cppt-card-bg-dark-ref);
    --cppt-opt-hover-bg: rgba(255, 255, 255, 0.16);
    --cppt-opt-marker: rgba(255, 255, 255, 0.42);
    --cppt-save-bg: #fde68a;
    --cppt-save-text: #78350f;
    /* 205,0,0 only reaches 2.86:1 on a near-black card — lift it. */
    --cppt-strike-line: rgb(255 123 123 / 80%);
    --cppt-card-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    --cppt-card-shadow-elevated: 0 22px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07);

    /* Dot texture. Tokenised so a theme file can retint or resize it without
       restating the gradient. */
    --cppt-card-dot: rgba(255, 255, 255, 0.08);
    --cppt-card-dot-size: 20px;

    /* Longhand on purpose: .cppt-card sets `background: var(--cppt-card-bg)`
       as a shorthand, so writing `background:` here would drop the colour and
       leave dots on a transparent card. Setting only background-image keeps the
       shorthand's colour underneath and layers the pattern on top. The card's
       border-radius clips it, so no extra masking is needed. */
    background-image: radial-gradient(circle, var(--cppt-card-dot) 8%, transparent 8%);
    background-position: 0 0;
    background-size: var(--cppt-card-dot-size) var(--cppt-card-dot-size);
}

/* ---------- Bundle: included plugins list ---------- */

.cppt .cppt-bundle__includes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--cppt-divider);
    border-bottom: 1px solid var(--cppt-divider);
}
.cppt .cppt-bundle__plugin {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cppt-text-dark);
    line-height: 1.3;
}
.cppt .cppt-bundle__plugin-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    border-radius: 3px;
}
.cppt .cppt-bundle__plugin-name {
    font-weight: 500;
}

/* "after" — the same stacked list as `yes`, but rendered below the feature
   points with its own heading. Separated by a rule so it reads as a distinct
   section rather than a continuation of the points. The list itself inherits
   the base .cppt-bundle__includes rules, so only the wrapper needs styling;
   its own top border is suppressed to avoid doubling up with the wrapper's. */
.cppt .cppt-bundle__after {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--cppt-divider);
}
.cppt .cppt-bundle__after-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cppt-text-muted);
}
.cppt .cppt-bundle__includes--after {
    padding: 0;
    border-top: 0;
    border-bottom: 0;
}

/* ---------- Bundle includes: compact / inline / summary variants ----------
   Driven by bundle_includes="compact|inline|summary". Each variant only
   overrides layout on the shared .cppt-bundle__includes block above, so the
   two --cppt-divider rules and the 12px padding stay consistent across all
   styles and the card's vertical rhythm never shifts when an author switches.
   Dark / tinted / accent cards need no overrides here: every colour resolves
   through tokens that .cppt-card--bg-* already re-points. */

/* compact — same icons, same full names, reflowed into an auto-fill grid.
   minmax() is a self-collapsing breakpoint: a wide 2-up cell gets 2 columns,
   a narrow 4-up cell falls back to 1 with no media query to keep in sync. */
.cppt .cppt-bundle__includes--compact {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.cppt .cppt-bundle__includes--compact .cppt-bundle__plugin {
    align-items: flex-start;
    gap: 4px;
    font-size: 11.5px;
}
.cppt .cppt-bundle__includes--compact .cppt-bundle__plugin-icon {
    width: 14px;
    height: 14px;
    margin-top: 1px;
}
.cppt .cppt-bundle__includes--compact .cppt-bundle__plugin--primary .cppt-bundle__plugin-name {
    font-weight: 700;
    color: var(--cppt-focus);
}

/* inline — bordered pill chips that flow and wrap. The fill must be
   --cppt-control-bg, never --cppt-card-bg: the latter is re-pointed per bg
   variant, so a chip using it would vanish on dark cards. */
.cppt .cppt-bundle__includes--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.cppt .cppt-bundle__includes--inline .cppt-bundle__plugin {
    gap: 6px;
    padding: 3px 8px;
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    background: var(--cppt-control-bg);
    border: 1px solid var(--cppt-divider);
    border-radius: var(--cppt-radius-pill);
}
.cppt .cppt-bundle__includes--inline .cppt-bundle__plugin-icon {
    width: 16px;
    height: 16px;
}
.cppt .cppt-bundle__includes--inline .cppt-bundle__plugin--primary {
    border-color: var(--cppt-focus);
    background: color-mix(in srgb, var(--cppt-focus) 10%, var(--cppt-control-bg));
}
.cppt .cppt-bundle__includes--inline .cppt-bundle__plugin--primary .cppt-bundle__plugin-name {
    color: var(--cppt-focus);
}

/* Trailing "= 5 Plugins Bundle" total. Deliberately NOT a chip — no fill, no
   border — so it reads as the sum of the chips before it rather than another
   item in the set. */
.cppt .cppt-bundle__includes--inline .cppt-bundle__total {
    display: inline-flex;
    align-items: center;
    padding: 5px 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cppt-focus);
    white-space: nowrap;
}

/* Load-bearing, not cosmetic. At >=960px a 3-up card interior is ~336px and a
   4-up ~240px; an iconed chip holding a long plugin name is ~174px, so only one
   fits per row and the chips end up TALLER than the plain list they replace.
   Dropping the icon fits two per row. Below 960px those grids are already
   2-column, so the cards are wide enough to keep icons. */
@media (min-width: 960px) {
    .cppt .cppt-cards--3up .cppt-bundle__includes--inline .cppt-bundle__plugin-icon,
    .cppt .cppt-cards--4up .cppt-bundle__includes--inline .cppt-bundle__plugin-icon {
        display: none;
    }
}

/* summary — two lines, height independent of plugin count. The plugin name owns
   row 1; the count and the link share row 2, both left-aligned with the name. */
.cppt .cppt-bundle__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--cppt-divider);
    border-bottom: 1px solid var(--cppt-divider);
    font-size: 14px;
    line-height: 1.35;
    color: var(--cppt-text-dark);
}
/* Full-width basis is what forces the count + link onto the next row, without
   needing a wrapper element or a <br>. */
.cppt .cppt-bundle__summary-name {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.cppt .cppt-bundle__summary-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    border-radius: 3px;
}
.cppt .cppt-bundle__summary-count {
    color: var(--cppt-text-muted);
}

/* Text link, never a button — it must not compete with .cppt-cta, so it stays
   underlined text rather than gaining a fill. It uses --cppt-focus for contrast
   and sits in the normal flow (no margin-left:auto) so it left-aligns with the
   text above it. The `.cppt a.` prefix beats this file's own link resets. */
.cppt a.cppt-bundle__more-link {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--cppt-focus);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cppt a.cppt-bundle__more-link:hover,
.cppt a.cppt-bundle__more-link:focus {
    color: var(--cppt-focus);
    text-decoration: underline;
    filter: brightness(0.88);
}
.cppt a.cppt-bundle__more-link:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Bundle static layout (non-interactive teaser) ----------
   No selector, no toggle, no points — so the card is short. margin-top:auto on
   the price group pins the price + CTA to the card floor, keeping it aligned
   with the taller interactive cards beside it in a grid row. */

/* No margin-top:auto and no top rule — the price sits directly under the plugin
   list. Pinning it to the card floor opened a large gap between the two. */
.cppt .cppt-card--bundle-static .cppt-static__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cppt .cppt-card--bundle-static .cppt-static__caption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cppt-text-muted);
}
.cppt .cppt-card--bundle-static .cppt-static__amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/* Struck price + "up to" badge, on their own line between the caption and the
   figure. min-height is fixed rather than intrinsic so cards whose bundle has
   no strike (or no extra discount) still reserve the row and keep their big
   prices on the same baseline as their neighbours. */
.cppt .cppt-card--bundle-static .cppt-static__lead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 24px;
}
.cppt .cppt-card--bundle-static .cppt-static__main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
}
/* The lead row carries the context (caption, old price, discount), so the
   figure itself is free to be the largest thing on the card. */
.cppt .cppt-card--bundle-static .cppt-price__active {
    font-size: 52px;
    line-height: 1;
}
/* Sized to sit on the caption's line rather than tower over it. */
.cppt .cppt-card--bundle-static .cppt-static__lead .cppt-price__strike {
    font-size: 18px;
}
.cppt .cppt-card--bundle-static .cppt-static__lead .cppt-price__save--upto {
    margin-left: 0;
    font-size: 11px;
    padding: 3px 9px;
}

/* Corner savings badge, mirroring the promo card's tilted disc but anchored
   top-RIGHT. Colours reuse the per-theme CTA pair, which is already the most
   visible combination in each palette and is contrast-checked against all four
   card surfaces — so the badge stands off the card background on light, tinted,
   accent and dark alike without a per-variant rule. */
.cppt .cppt-card--bundle-static {
    --cppt-static-badge-bg: var(--cppt-cta-bg);
    --cppt-static-badge-text: var(--cppt-cta-text);
}
.cppt .cppt-card--bundle-static .cppt-static__save-badge {
    position: absolute;
    top: -28px;
    right: -18px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: var(--cppt-static-badge-bg);
    color: var(--cppt-static-badge-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Grown from 74px so "SAVE" over an amount fits at a readable size: after
       the 3px ring and 5px padding this leaves ~64px of usable width, enough
       for a four-figure saving at 15px. */
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
    padding: 5px;
    z-index: 2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    /* Ring in the card colour so the disc reads as sitting on top of the card. */
    border: 3px solid var(--cppt-card-bg);
    transform: rotate(12deg);
}
.cppt .cppt-card--bundle-static .cppt-static__save-badge-label {
    font-size: 11px;
    letter-spacing: 0.06em;
}
.cppt .cppt-card--bundle-static .cppt-static__save-badge-amount {
    font-size: 20px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* A bundle_badge override is arbitrary text with no amount beside it, so let
   it wrap to two lines the way "BUNDLE OFFER" used to. */
.cppt .cppt-card--bundle-static .cppt-static__save-badge-label:only-child {
    font-size: 10px;
    letter-spacing: 0.02em;
}

/* The disc deliberately overhangs the card, but until the viewport is wide
   enough for the theme to open a real side gutter the grid runs flush to the
   page edge and that overhang became horizontal page scroll. Measured: still
   overflowing at 1200px, clear at 1440px. Tuck it inside the card's own box
   below that. */
@media (max-width: 1399px) {
    .cppt .cppt-card--bundle-static .cppt-static__save-badge {
        top: -18px;
        right: 0;
    }
}

/* ---------- Bundle promo layout (wide 2-column hero) ---------- */

.cppt .cppt-card--bundle-promo {
    padding: 40px 36px 36px;
    position: relative;
    overflow: visible;        /* save badge sticks out the top */
    --cppt-promo-chip-bg: #ffffff;
    --cppt-promo-chip-text: #131413;
    --cppt-promo-chip-border: rgba(15, 23, 42, 0.06);
    --cppt-promo-chip-price-color: var(--cppt-focus);
    --cppt-promo-cta-bg: var(--cppt-focus);
    --cppt-promo-cta-text: var(--cppt-cta-text);
    --cppt-promo-save-bg: var(--cppt-card-bg-dark-ref, #131413);
    --cppt-promo-save-text: #ffffff;
}

.cppt .cppt-promo__layout {
    /* minmax(0,1fr) prevents either column from growing past its share when
       price digits change width on selector/toggle interaction */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 800px) {
    .cppt .cppt-promo__layout { grid-template-columns: 1fr; gap: 24px; }
}

.cppt .cppt-promo__left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Right column distributes chips evenly to fill the column height */
.cppt .cppt-promo__right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
}
/* Eyebrow above the per-plugin chips. Muted and uppercase so it labels the
   column without competing with the bundle name in the left column. */
.cppt .cppt-promo__right-title {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cppt-text-muted);
}

/* ---------- Save badge — outside the card top edge, slight tilt ---------- */
.cppt .cppt-promo__save-badge {
    position: absolute;
    top: -22px;
    left: 12px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cppt-promo-save-bg);
    color: var(--cppt-promo-save-text);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    padding: 6px;
    z-index: 2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    border: 3px solid var(--cppt-card-bg);
    transform: rotate(-15deg); /* 345deg → -15deg, slight counter-clockwise tilt */
}
/* Solid dark on every light/tinted/accent variant — flip to light on dark cards */
.cppt .cppt-card--bundle-promo.cppt-card--bg-dark .cppt-promo__save-badge {
    --cppt-promo-save-bg: #ffffff;
    --cppt-promo-save-text: var(--cppt-card-bg-dark-ref, #131413);
}

@media (max-width: 540px) {
    .cppt .cppt-promo__save-badge {
        position: static;
        align-self: flex-start;
        margin-bottom: 6px;
        border-width: 0;
    }
}

/* ---------- Left column: bigger title + price + CTA ---------- */
.cppt .cppt-card--bundle-promo .cppt-card__name {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.cppt .cppt-card--bundle-promo .cppt-card__tagline {
    font-size: 15px;
    max-width: 460px;
}

/* "Starting at" caption + strike + active + save chip, tabular nums so digit
   width is uniform across selector/toggle changes (no horizontal jiggle) */
.cppt .cppt-promo__pricing .cppt-price {
    gap: 2px 12px;
    align-items: baseline;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
/* The base chip no longer floats right (it leads the stacked block on product
   and bundle cards); the promo card's single-row layout still wants it there. */
.cppt .cppt-promo__pricing .cppt-price__save { margin-left: auto; }
.cppt .cppt-promo__pricing .cppt-price__strike { font-size: 22px; }
.cppt .cppt-promo__pricing .cppt-price__active {
    font-size: 36px;
    font-weight: 800;
    min-width: 88px;          /* prevents 2-digit ↔ 3-digit width shift */
}
.cppt .cppt-promo__pricing .cppt-price__period {
    font-size: 13px;
    font-weight: 600;
    color: var(--cppt-text-muted);
    align-self: flex-end;
    margin-bottom: 6px;
}
.cppt .cppt-promo__starting {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cppt-text-muted);
    text-transform: uppercase;
    width: 100%;
    order: -1;
}

/* Bigger CTA — "Get All Bundle — $X" */
.cppt .cppt-card--bundle-promo a.cppt-cta {
    --cppt-promo-cta-bg-hover: var(--cppt-cta-bg-hover);
    --cppt-promo-cta-text-hover: var(--cppt-cta-text-hover);
    background: var(--cppt-promo-cta-bg);
    color: var(--cppt-promo-cta-text);
    align-self: flex-start;
    padding: 16px 28px;
    gap: 10px;                  /* breathing room between cart icon and label */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: var(--cppt-control-radius);
    font-variant-numeric: tabular-nums;
}
.cppt .cppt-card--bundle-promo a.cppt-cta .cppt-cta__ico { flex-shrink: 0; display: block; }
.cppt .cppt-card--bundle-promo a.cppt-cta .cppt-cta__label { white-space: nowrap; }
/* This rule is load-bearing, not decorative: the base promo CTA selector above
   has the SAME specificity (0,3,1) as `.cppt a.cppt-cta:hover` and sits later in
   the file, so it wins the tie and the generic hover background never applies.
   Without restating background here, every theme's hover colour is dead on the
   promo layout. */
.cppt .cppt-card--bundle-promo a.cppt-cta:hover,
.cppt .cppt-card--bundle-promo a.cppt-cta:focus {
    background: var(--cppt-promo-cta-bg-hover);
    color: var(--cppt-promo-cta-text-hover);
}

/* ---------- Right column: full-width plugin strips ---------- */
.cppt .cppt-promo__plugin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--cppt-promo-chip-bg);
    color: var(--cppt-promo-chip-text);
    border: 1px solid var(--cppt-promo-chip-border);
    border-radius: var(--cppt-radius);
    /* !important on every text-decoration declaration in this block —
       Elementor / most themes inject `a { text-decoration: underline }` or
       `a:hover { text-decoration: underline }` globally and would otherwise
       paint a line under the chip text. */
    text-decoration: none !important;
    line-height: 1.2;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    flex: 1 1 0;              /* equal-share of right column height */
    min-height: 48px;         /* fits two-line name + sub-label comfortably */
}
.cppt .cppt-promo__plugin:hover,
.cppt .cppt-promo__plugin:focus,
.cppt .cppt-promo__plugin:visited {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
    color: var(--cppt-promo-chip-text);
    text-decoration: none !important;
    /* Subtle focus-tint of the border on hover — picks up each theme's
       --cppt-focus colour without changing the chip background, which keeps
       the lift feeling clean rather than busy. */
    border-color: color-mix(in srgb, var(--cppt-focus) 45%, var(--cppt-promo-chip-border));
}
/* Sub-label brightens slightly on hover so the secondary line reads more
   confidently when the visitor is paying attention to a particular chip. */
.cppt .cppt-promo__plugin:hover .cppt-promo__plugin-sub,
.cppt .cppt-promo__plugin:focus .cppt-promo__plugin-sub {
    color: color-mix(in srgb, var(--cppt-promo-chip-text) 85%, transparent);
}
/* Price tints to the brand focus colour on hover — eye goes to the savings */
.cppt .cppt-promo__plugin:hover .cppt-promo__plugin-price,
.cppt .cppt-promo__plugin:focus .cppt-promo__plugin-price {
    color: var(--cppt-focus);
}
.cppt .cppt-promo__plugin-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}
/* Stacks plugin-name on top of the sub-label */
.cppt .cppt-promo__plugin-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cppt .cppt-promo__plugin-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cppt .cppt-promo__plugin-sub {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--cppt-promo-chip-text) 60%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.cppt .cppt-promo__plugin-price-block {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
    min-width: 64px;
    justify-content: flex-end;
}
.cppt .cppt-promo__plugin-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--cppt-promo-chip-price-color);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease;
}
.cppt .cppt-promo__plugin-period {
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--cppt-promo-chip-price-color) 65%, transparent);
}

/* Dark-variant promo chips stay white so they pop on the dark surface, and
   the price colour shifts to dark so the chip reads as a clean white pill */
.cppt .cppt-card--bundle-promo.cppt-card--bg-dark {
    --cppt-promo-chip-bg: #ffffff;
    --cppt-promo-chip-text: #131413;
    --cppt-promo-chip-price-color: #131413;
    --cppt-promo-chip-border: transparent;
}

/* ---------- Bundle promo: responsive ----------
   The 800px rule above only collapses the two columns; nothing else scaled, so
   on a phone the card kept 36px side padding, a 32px title, a 36px price with a
   88px min-width, and a CTA label pinned to `nowrap` — which is what pushed the
   card into horizontal overflow. */

@media (max-width: 800px) {
    .cppt .cppt-card--bundle-promo {
        padding: 32px 24px 28px;
    }
    /* Full-width CTA once the columns stack — a left-aligned pill under a
       full-width block reads as unfinished. */
    .cppt .cppt-card--bundle-promo a.cppt-cta {
        align-self: stretch;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .cppt .cppt-card--bundle-promo {
        padding: 26px 18px 22px;
    }
    .cppt .cppt-card--bundle-promo .cppt-card__name {
        font-size: 24px;
    }
    .cppt .cppt-card--bundle-promo .cppt-card__tagline {
        font-size: 14px;
    }
    /* min-width existed to stop 2-to-3 digit price swaps jiggling the layout. At
       this width the price is on its own row, so the jiggle cannot happen and
       the reserved width only risks overflow. */
    .cppt .cppt-promo__pricing .cppt-price__active {
        font-size: 30px;
        min-width: 0;
    }
    .cppt .cppt-promo__pricing .cppt-price__strike {
        font-size: 18px;
    }
    /* The label is nowrap so the price never breaks away from the verb on
       desktop. On a 320px screen "Buy All Plugins - $100" cannot fit on one
       line, and nowrap turns that into horizontal page scroll. */
    .cppt .cppt-card--bundle-promo a.cppt-cta {
        padding: 14px 18px;
        font-size: 15px;
    }
    .cppt .cppt-card--bundle-promo a.cppt-cta .cppt-cta__label {
        white-space: normal;
    }
    /* Chips stop stretching to equal height once the right column is no longer
       beside a tall left column. */
    .cppt .cppt-promo__plugin {
        flex: 0 0 auto;
        padding: 8px 12px;
    }
}

/* ---------- License toggle (yearly ↔ lifetime) ---------- */

.cppt .cppt-toggle-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cppt .cppt-toggle-wrap--outside {
    align-items: center;
}

.cppt .cppt-toggle {
    display: inline-flex;
    padding: 4px;
    background: var(--cppt-control-bg);
    border-radius: var(--cppt-control-radius);
    gap: 2px;
    align-self: flex-start;
}
.cppt .cppt-toggle--outside {
    align-self: center;
}
.cppt .cppt-toggle__opt {
    appearance: none;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 9px 18px !important;
    margin: 0 !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cppt-control-text);
    border-radius: var(--cppt-control-radius) !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
/* Matches the site-count pills: hover washes an inactive option, and the
   selected one is a dark slab. Its label MUST use --cppt-active-opt-text, not
   --cppt-text-dark — the latter is the slab's own colour, which would render
   dark-on-dark. */
.cppt .cppt-toggle__opt:hover:not(.is-active),
.cppt .cppt-toggle__opt:focus:not(.is-active) {
    background: var(--cppt-opt-hover-bg) !important;
    background-image: none !important;
    color: var(--cppt-text-dark);
    box-shadow: none !important;
}
.cppt .cppt-toggle__opt.is-active,
.cppt .cppt-toggle__opt.is-active:hover,
.cppt .cppt-toggle__opt.is-active:focus {
    background: var(--cppt-active-opt-bg) !important;
    color: var(--cppt-active-opt-text) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
}

/* Inside-toggle header row: [LABEL]                [Annual | Lifetime] */
.cppt .cppt-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cppt .cppt-toggle-row__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cppt-text-muted);
    flex-shrink: 0;
}
.cppt .cppt-toggle-row .cppt-toggle {
    align-self: auto;
}
.cppt .cppt-toggle__opt:focus-visible {
    outline: 2px solid var(--cppt-focus);
    outline-offset: 2px;
}

/* ---------- Coupon-apply "blast" effect ---------- */

.cppt.cppt--blast {
    position: relative;
}
.cppt.cppt--blast::before {
    content: "";
    position: absolute;
    inset: -20px;
    pointer-events: none;
    border-radius: var(--cppt-radius);
    background: radial-gradient(circle at center,
        color-mix(in srgb, var(--cppt-focus) 35%, transparent),
        transparent 65%);
    animation: cppt-blast-flash 1.4s ease-out forwards;
    z-index: 5;
}
.cppt.cppt--blast .cppt-card {
    animation: cppt-blast-card 1.6s cubic-bezier(.16,1.36,.34,1) both;
}
.cppt.cppt--blast .cppt-price__active {
    animation: cppt-blast-price 1.6s cubic-bezier(.16,1.36,.34,1) both;
}
.cppt.cppt--blast .cppt-price__save {
    animation: cppt-blast-save 1.6s cubic-bezier(.16,1.36,.34,1) both;
}
.cppt.cppt--blast .cppt-card__badge {
    animation: cppt-blast-badge 1.4s cubic-bezier(.16,1.36,.34,1) both;
}

/* Sustained highlight while the number is tweening down (~1.5s) */
.cppt-price__active.cppt-price--animating {
    color: var(--cppt-focus);
    text-shadow: 0 4px 22px color-mix(in srgb, var(--cppt-focus) 55%, transparent);
}
.cppt-price__save.cppt-price--animating {
    /* Halo in the chip's own fill, not its text colour: --cppt-save-text is a
       dark amber now, which would draw as a hard border instead of a glow. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cppt-save-bg) 70%, transparent);
}

@keyframes cppt-blast-flash {
    0%   { opacity: 0; transform: scale(0.5); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.7); }
}
@keyframes cppt-blast-card {
    0%   { transform: scale(1);    box-shadow: var(--cppt-card-shadow); }
    25%  { transform: scale(1.04); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cppt-focus) 30%, transparent), var(--cppt-card-shadow-elevated); }
    55%  { transform: scale(1.02); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cppt-focus) 20%, transparent), var(--cppt-card-shadow-elevated); }
    100% { transform: scale(1);    box-shadow: var(--cppt-card-shadow); }
}
@keyframes cppt-blast-price {
    0%   { transform: scale(1)    translateY(0);    color: var(--cppt-text-dark); text-shadow: none; }
    25%  { transform: scale(1.28) translateY(-6px); color: var(--cppt-focus);     text-shadow: 0 6px 28px color-mix(in srgb, var(--cppt-focus) 60%, transparent); }
    55%  { transform: scale(1.12) translateY(-2px); color: var(--cppt-focus);     text-shadow: 0 3px 18px color-mix(in srgb, var(--cppt-focus) 40%, transparent); }
    100% { transform: scale(1)    translateY(0);    color: var(--cppt-text-dark); text-shadow: none; }
}
@keyframes cppt-blast-save {
    0%   { transform: scale(1)    rotate(0deg);  }
    20%  { transform: scale(1.35) rotate(-5deg); }
    45%  { transform: scale(1.15) rotate(4deg);  }
    70%  { transform: scale(1.05) rotate(-2deg); }
    100% { transform: scale(1)    rotate(0deg);  }
}
@keyframes cppt-blast-badge {
    0%   { transform: translateY(0)  scale(1);    }
    30%  { transform: translateY(-6px) scale(1.12); }
    60%  { transform: translateY(-2px) scale(1.05); }
    100% { transform: translateY(0)  scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    .cppt.cppt--blast::before,
    .cppt.cppt--blast .cppt-card,
    .cppt.cppt--blast .cppt-price__active,
    .cppt.cppt--blast .cppt-price__save,
    .cppt.cppt--blast .cppt-card__badge,
    .cppt-price__active.cppt-price--animating,
    .cppt-price__save.cppt-price--animating {
        animation: none;
        text-shadow: none;
        box-shadow: none;
    }
}

/* ---------- Placeholder (error / no-data notices) ---------- */

.cppt.cppt-placeholder {
    padding: 16px 20px;
    border-radius: var(--cppt-radius);
    background: var(--cppt-card-bg);
    border: 1px solid var(--cppt-card-border);
    color: var(--cppt-text-muted);
    font-size: 14px;
    line-height: 1.45;
}
.cppt.cppt-placeholder--error {
    border-color: var(--cppt-focus);
    border-style: dashed;
}