/*
 * 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;
}

/* The selectable-row controls (site-count dropdown, full-layout rows) are
   <button> elements, so a theme or page builder can style them even where WE
   declare nothing — and hardening a declaration only helps for properties we
   actually set. Astra ships `button { padding: 15px 30px }`, Elementor styles
   `.elementor button`, and both commonly use !important.
 
   This neutralises the properties those controls never set for themselves, so
   an injected rule has nothing to land on. It sits BEFORE the specific rules
   further down the file: both carry !important, so source order breaks the tie
   and the later, more specific declarations still win where we do customise.
 
   `transform` is on the list because a hover-lift (`transform: translateY(-2px)`)
   is near-universal in button styling and would make a whole row jump. The
   chevron is a child <span>, not the button, so its own rotation is untouched. */
.cppt .cppt-dd__trigger,
.cppt .cppt-dd__trigger:hover,
.cppt .cppt-dd__trigger:focus,
.cppt .cppt-dd__trigger:active,
.cppt .cppt-dd__opt,
.cppt .cppt-dd__opt:hover,
.cppt .cppt-dd__opt:focus,
.cppt .cppt-dd__opt:active,
.cppt .cppt-full__row,
.cppt .cppt-full__row:hover,
.cppt .cppt-full__row:focus,
.cppt .cppt-full__row:active,
.cppt .cppt-full__dd-trigger,
.cppt .cppt-full__dd-trigger:hover,
.cppt .cppt-full__dd-trigger:focus,
.cppt .cppt-full__dd-trigger:active {
    box-shadow: none !important;
    transform: none !important;
    line-height: normal !important;
    min-height: 0 !important;
    max-height: none !important;
    background-image: none !important;
    text-shadow: none !important;
    float: none !important;
    position: relative;
}

/* Font size, stated for every interaction state of each control.
 
   Declaring it only on the base selector is a trap here: the base is (0,2,0)
   and anything naming :hover is (0,3,0), so a hover rule elsewhere silently
   wins and the text changes size under the cursor. Repeating it per state also
   closes the hole the neutraliser used to cover, so a theme's
   `button:hover { font-size: ... }` still cannot land. */
.cppt .cppt-dd__trigger,
.cppt .cppt-dd__trigger:hover,
.cppt .cppt-dd__trigger:focus,
.cppt .cppt-dd__trigger:active {
    font-size: 15px !important;
}
.cppt .cppt-dd__opt,
.cppt .cppt-dd__opt:hover,
.cppt .cppt-dd__opt:focus,
.cppt .cppt-dd__opt:active,
.cppt .cppt-full__row,
.cppt .cppt-full__row:hover,
.cppt .cppt-full__row:focus,
.cppt .cppt-full__row:active,
.cppt .cppt-full__dd-trigger,
.cppt .cppt-full__dd-trigger:hover,
.cppt .cppt-full__dd-trigger:focus,
.cppt .cppt-full__dd-trigger:active {
    font-size: 16px !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) {
    /* minmax(0, …), not a bare 1fr. `1fr` is shorthand for `minmax(auto, 1fr)`,
       and that `auto` floor is the track's min-content size — which the chips
       below make large, because each plugin name is `white-space: nowrap`. The
       column therefore refused to shrink past the widest plugin name and burst
       out of the card: at 320px the card measured 280px while this column
       measured 393px, pushing every chip's price off-screen and giving the
       whole PAGE 113px of horizontal scroll. The desktop rule above already
       uses minmax(0, 1fr) for the same reason; dropping it here undid that. */
    .cppt .cppt-promo__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.cppt .cppt-promo__left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Grid items default to min-width:auto, so the track being allowed to reach
       0 is not enough on its own — the item would still overflow it. This is
       what lets the heading, the nowrap CTA label and the price row stay inside
       the card instead of running past its right edge. */
    min-width: 0;
}

/* Right column distributes chips evenly to fill the column height */
.cppt .cppt-promo__right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    min-width: 0;             /* see .cppt-promo__left */
}
/* 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 */
    min-width: 0;             /* never let a long plugin name widen the chip */
}
.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 10px;
        gap: 8px;
    }
    /* Reclaim width for the name. At 320px the chip has ~216px of inner space;
       the 32px icon, two 10px gaps and a 64px reserved price block left under
       100px for the name, so every plugin ellipsised to "Events Sear…" — the
       chips name the products, so clipping them is the one thing they must not
       do. Trimming the icon and un-reserving the price gives the name ~128px. */
    .cppt .cppt-promo__plugin-icon {
        width: 24px;
        height: 24px;
    }
    /* The reserved width exists to stop 2-to-3 digit price swaps jiggling the
       column on desktop. The column is narrow here and the price sits hard
       right against the padding, so there is nothing to jiggle. */
    .cppt .cppt-promo__plugin-price-block {
        min-width: 0;
    }
    /* Wrap rather than ellipsise. Two lines of a readable name beat one line of
       a truncated one, and the chip simply grows — nothing else depends on its
       height now that flex is 0 0 auto. */
    .cppt .cppt-promo__plugin-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
}

/* ---------- 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;
}

/* Narrow screens: the yearly/lifetime toggle is the last thing still wider than
   a 320px card. "BUNDLE" + an 18px-padded two-option toggle measured 2px past
   the viewport, which is enough for the browser to give the whole page a
   horizontal scrollbar.
   
   This block sits AFTER the base rules above on purpose. Those use !important
   to survive theme resets, and a media query adds no specificity — so an
   override placed earlier in the file would lose the tie-break to them and
   silently do nothing. */
@media (max-width: 600px) {
    .cppt .cppt-toggle-row {
        /* Last-resort escape: if a translation makes the labels longer still,
           the toggle drops to its own line instead of overflowing again. */
        flex-wrap: wrap;
        gap: 8px;
    }
    .cppt .cppt-toggle__opt {
        padding: 9px 12px !important;
        font-size: 12px !important;
    }
}

/* ---------- 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;
}

/* =========================================================================
   FULL layout — product_layout="full" / bundle_layout="full"

   One card, the whole (licence x site tier) matrix as a flat list of rows.
   The row list replaces both the licence toggle and the site selector.

   Deliberately built on its own .cppt-full__* classes rather than reusing the
   selector ones. The pills and radio groups are `display:flex; flex-wrap:nowrap`
   with `flex: 1 1 0` children — built for an equal-share horizontal strip — and
   almost every property in them is !important to survive theme resets. Reusing
   them for a vertical list would crush six rows onto one line and leave no way
   to override it from a media query, which adds no specificity.
   ========================================================================= */

.cppt .cppt-card--full {
    /* Narrower than a 3-up grid cell: a single column of rows reads badly at
       full page width, and the reference design is a tall, narrow card.

       width:100% is load-bearing, not cosmetic. .cppt-cell is a column flex
       container, and an auto inline margin on a flex item DISABLES the default
       cross-axis stretch — so without an explicit width the card is sized
       shrink-to-fit by its content. Selecting a row changes that content (the
       label goes 500 -> 700 weight, the price gains or loses a digit), and the
       whole card visibly jumped on every click. Fixing the width makes the
       selection change only what is inside the card. */
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cppt .cppt-full__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* NOT .cppt-card__name — pricing.js overwrites that element with the licence
   title ("Annual License"), which would erase the product name on first click. */
.cppt .cppt-full__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cppt-text-muted);
}
.cppt .cppt-full__heading {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--cppt-text-dark);
}

/* ---------- The row list ---------- */

.cppt .cppt-full__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cppt .cppt-full__row {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    background: var(--cppt-card-bg) !important;
    border: 1.5px solid var(--cppt-card-border) !important;
    /* --cppt-radius, NOT --cppt-control-radius: that token is 10px on five
       themes but stays 999px on coolplugins, which would render these tall
       rows as stadium pills on that one brand. */
    border-radius: var(--cppt-radius) !important;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    font-family: inherit;
}
.cppt .cppt-full__row:hover {
    border-color: color-mix(in srgb, var(--cppt-focus) 45%, var(--cppt-card-border)) !important;
}
.cppt .cppt-full__row.is-active {
    border-color: var(--cppt-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cppt-focus) 16%, transparent) !important;
}
.cppt .cppt-full__row:focus-visible {
    outline: 2px solid var(--cppt-focus) !important;
    outline-offset: 2px !important;
}
.cppt .cppt-full__row:has(.cppt-full__native:focus-visible) {
    outline: 2px solid var(--cppt-focus) !important;
    outline-offset: 2px !important;
}

.cppt .cppt-full__row-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px !important;
    min-height: 56px !important;
}

/* The radio marker, drawn for every style so pills and the dropdown read the
   same as the native-radio variant. */
.cppt .cppt-full__row-inner::before {
    content: "";
    flex: 0 0 auto;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid color-mix(in srgb, var(--cppt-text-muted) 55%, transparent) !important;
    background: transparent !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cppt .cppt-full__row.is-active .cppt-full__row-inner::before {
    border-color: var(--cppt-focus) !important;
    background: var(--cppt-focus) !important;
    /* Inset ring makes the filled dot, with no extra element. */
    box-shadow: inset 0 0 0 4px var(--cppt-card-bg) !important;
}

.cppt .cppt-full__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--cppt-text-muted) !important;
}
.cppt .cppt-full__row.is-active .cppt-full__label {
    font-weight: 700 !important;
    color: var(--cppt-text-dark) !important;
}

/* Row badge. Uses the SAVE token pair, not --cppt-focus + --cppt-cta-text:
   white on the focus colour falls below 4.5:1 on coolformkit, locoaddon and
   coolplugins, and this sits inline at 11px where that matters. */
.cppt .cppt-full__row-badge {
    flex: 0 0 auto;
    padding: 3px 8px !important;
    border-radius: var(--cppt-radius-pill) !important;
    background: var(--cppt-save-bg) !important;
    color: var(--cppt-save-text) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    white-space: nowrap;
}

.cppt .cppt-full__prices {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin-left: auto !important;
}
.cppt .cppt-full__was {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--cppt-text-muted) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--cppt-strike-line);
}
.cppt .cppt-full__price {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--cppt-text-muted) !important;
    font-variant-numeric: tabular-nums;
    transition: color 0.18s ease;
}
.cppt .cppt-full__row.is-active .cppt-full__price {
    color: var(--cppt-focus) !important;
    font-weight: 800 !important;
}

/* Native radio: kept in the DOM for semantics and keyboard support, visually
   replaced by the ::before marker above. Not display:none — that removes it
   from the tab order and from the accessibility tree. */
.cppt .cppt-full__native {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.cppt label.cppt-full__row {
    position: relative;
}

/* ---------- Dropdown variant ---------- */
/* A native <select> cannot hold a price, a strike-through and a badge per
   option, so this is a disclosure button plus a listbox. */

.cppt .cppt-full__dd {
    position: relative;
}
.cppt .cppt-full__dd-trigger {
    display: flex;
    align-items: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--cppt-card-bg) !important;
    border: 1.5px solid var(--cppt-card-border) !important;
    border-radius: var(--cppt-radius) !important;
    cursor: pointer;
    font-family: inherit;
    text-align: left !important;
}
.cppt .cppt-full__dd-trigger:focus-visible {
    outline: 2px solid var(--cppt-focus) !important;
    outline-offset: 2px !important;
}
.cppt .cppt-full__dd.is-open .cppt-full__dd-trigger {
    border-color: var(--cppt-focus) !important;
}
/* The trigger mirrors the selected row, so it always shows the filled marker. */
.cppt .cppt-full__dd-trigger .cppt-full__row-inner::before {
    border-color: var(--cppt-focus) !important;
    background: var(--cppt-focus) !important;
    box-shadow: inset 0 0 0 4px var(--cppt-card-bg) !important;
}
.cppt .cppt-full__dd-trigger .cppt-full__label {
    font-weight: 700 !important;
    color: var(--cppt-text-dark) !important;
}
.cppt .cppt-full__dd-trigger .cppt-full__price {
    color: var(--cppt-focus) !important;
    font-weight: 800 !important;
}
.cppt .cppt-full__chev {
    flex: 0 0 auto;
    margin-right: 16px !important;
    color: var(--cppt-text-muted) !important;
    transition: transform 0.2s ease;
}
.cppt .cppt-full__dd.is-open .cppt-full__chev {
    transform: rotate(180deg) !important;
}

.cppt .cppt-full__dd-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px !important;
    background: var(--cppt-card-bg) !important;
    border: 1.5px solid var(--cppt-card-border) !important;
    border-radius: var(--cppt-radius) !important;
    box-shadow: var(--cppt-card-shadow-elevated) !important;
    /* Collapsed by default. max-height + opacity rather than display:none so
       the open/close actually animates. visibility keeps it out of the tab
       order while closed. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
}
.cppt .cppt-full__dd.is-open .cppt-full__dd-panel {
    max-height: 480px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.26s ease, opacity 0.2s ease, visibility 0s;
}

/* ---------- CTA + reassurance ---------- */

.cppt .cppt-card--full a.cppt-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 17px 22px;
    font-size: 17px;
    font-weight: 700;
    border-radius: var(--cppt-radius);
}
/* Load-bearing, not decorative. The rule above is specificity (0,3,1) — the
   same as `.cppt a.cppt-cta:hover` — and sits later in the file, so it wins the
   tie and would kill every theme's hover colour. Restating it here is what the
   promo layout had to do for exactly the same reason. */
.cppt .cppt-card--full a.cppt-cta:hover,
.cppt .cppt-card--full a.cppt-cta:focus {
    background: var(--cppt-cta-bg-hover, var(--cppt-focus));
    color: var(--cppt-cta-text-hover, var(--cppt-cta-text));
}

.cppt .cppt-full__points {
    margin: 0;
    padding-top: 2px;
    /* The base .cppt-points rule draws a divider above the list. In this layout
       the CTA already separates the list from everything above it, so the extra
       line read as a stray rule. */
    border-top: 0;
}

/* ---------- Dark card ---------- */

.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__row,
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-trigger,
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-panel {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__row.is-active {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* The marker's "hole" is punched with the CARD colour, so on a dark card it has
   to follow — inset white would draw a white dot on a dark row. */
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__row.is-active .cppt-full__row-inner::before,
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-trigger .cppt-full__row-inner::before {
    box-shadow: inset 0 0 0 4px var(--cppt-card-bg) !important;
}

/* ---------- Responsive ---------- */
/* Placed after every rule above: these override properties the base rules set,
   and a media query adds no specificity, so an earlier block would lose the
   tie-break and silently do nothing. */

@media (max-width: 600px) {
    .cppt .cppt-card--full {
        gap: 14px;
    }
    .cppt .cppt-full__heading {
        font-size: 22px;
    }
    .cppt .cppt-full__row-inner {
        /* Label and price stack: at 320px "Upto 25 Sites - Lifetime Updates"
           plus a price cannot share a line without the price being pushed off
           the card. The marker stays on the first line beside the label. */
        flex-wrap: wrap;
        padding: 13px 14px !important;
        gap: 8px;
        min-height: 0 !important;
    }
    .cppt .cppt-full__label {
        font-size: 15px !important;
        /* Beat the marker and price to the second line. */
        flex: 1 1 calc(100% - 30px);
    }
    .cppt .cppt-full__prices {
        margin-left: 30px !important;
    }
    .cppt .cppt-full__row-badge {
        order: 3;
        margin-left: auto !important;
    }
    .cppt .cppt-card--full a.cppt-cta {
        padding: 15px 18px;
        font-size: 16px;
    }
    .cppt .cppt-full__chev {
        margin-right: 12px !important;
    }
}

/* =========================================================================
   FULL layout — refinements
   Appended after the base block above on purpose: these override properties
   that block sets, and a media query / equal-specificity rule placed earlier
   would lose the tie-break.
   ========================================================================= */

/* ---------- Row badge: over the edge, not in the flow ---------- */
/* Inline it competed with the label and price and forced a second line. */
.cppt .cppt-full__row {
    position: relative;
}
.cppt .cppt-full__row-badge {
    position: absolute;
    top: -9px;
    right: 14px;
    z-index: 2;
    margin: 0 !important;
    padding: 2px 9px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    pointer-events: none;
}

/* =========================================================================
   PILLS vs RADIO — they were visually identical, which made the setting
   look broken. They now differ in the one thing a visitor reads first:
   RADIO keeps the classic circle marker; PILLS drop it for a tick that only
   appears once chosen, and lean on shape and fill instead.
   ========================================================================= */

/* ---------- Pills: stadium shape, tinted fill, tick on select ---------- */

.cppt .cppt-full--pills .cppt-full__row {
    /* The theme's button radius, matching the CTA below the list — not the
       stadium pill radius, which read as a different control family. */
    border-radius: var(--cppt-radius) !important;
    border-width: 1px !important;
}
.cppt .cppt-full--pills .cppt-full__row-inner {
    padding: 14px 20px !important;
    gap: 12px;
}
/* An empty circle when unchosen, same as the radio variant: without it there
   was nothing to show the row was selectable until it was already selected.
   The two styles differ in what SELECTION looks like, not in whether there is
   a marker — pills fill the circle with a tick and tint the whole row, radio
   fills it with a dot and leaves the row plain. */
.cppt .cppt-full--pills .cppt-full__row-inner::before {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid color-mix(in srgb, var(--cppt-text-muted) 55%, transparent) !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 1;
    transform: none !important;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.cppt .cppt-full--pills .cppt-full__row.is-active {
    background: color-mix(in srgb, var(--cppt-focus) 9%, var(--cppt-card-bg)) !important;
    border-width: 1.5px !important;
}
.cppt .cppt-full--pills .cppt-full__row.is-active .cppt-full__row-inner::before {
    border-color: var(--cppt-focus) !important;
    background: var(--cppt-focus) !important;
    box-shadow: none !important;
    /* White tick inside the filled circle — this is what distinguishes the
       pills variant from radio, which uses an inset ring to make a dot. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 6.3 4.5 9 10.2 2.9' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
/* The label keeps its place whether or not the tick is showing. */
.cppt .cppt-full--pills .cppt-full__label {
    margin-left: 0 !important;
}

/* ---------- Radio: the classic marker, square-ish rows ---------- */

.cppt .cppt-full--radio .cppt-full__row {
    border-radius: 10px !important;
}
.cppt .cppt-full--radio .cppt-full__row-inner::before {
    /* Explicitly restated: the pills rules above are the same specificity and
       would otherwise be decided purely by source order. */
    width: 20px !important;
    height: 20px !important;
    border: 2px solid color-mix(in srgb, var(--cppt-text-muted) 55%, transparent) !important;
    background: none !important;
    background-image: none !important;
    opacity: 1;
    transform: none !important;
}
.cppt .cppt-full--radio .cppt-full__row.is-active .cppt-full__row-inner::before {
    border-color: var(--cppt-focus) !important;
    background: var(--cppt-focus) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 4px var(--cppt-card-bg) !important;
}
.cppt .cppt-full--radio .cppt-full__row.is-active {
    background: var(--cppt-card-bg) !important;
}

/* ---------- Dropdown: price hard right, arrow readable ---------- */

/* row-inner must take the free space so margin-left:auto on the prices has
   somewhere to push them to; without this the price sat next to the label. */
.cppt .cppt-full__dd-trigger .cppt-full__row-inner {
    flex: 1 1 auto;
    min-width: 0;
}
.cppt .cppt-full__dd-trigger .cppt-full__prices,
.cppt .cppt-full__dd-panel .cppt-full__prices {
    margin-left: auto !important;
    padding-left: 12px !important;
}

/* The chevron was a thin muted glyph that read as decoration. Give it a
   surface so it reads as the control it is. */
.cppt .cppt-full__chev {
    width: 28px !important;
    height: 28px !important;
    padding: 6px !important;
    margin-right: 12px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--cppt-text-dark) 8%, transparent) !important;
    color: var(--cppt-text-dark) !important;
    stroke-width: 2.4;
}
.cppt .cppt-full__dd-trigger:hover .cppt-full__chev {
    background: color-mix(in srgb, var(--cppt-focus) 18%, transparent) !important;
    color: var(--cppt-focus) !important;
}
.cppt .cppt-full__dd.is-open .cppt-full__chev {
    background: var(--cppt-focus) !important;
    color: var(--cppt-cta-text) !important;
}
/* Rows inside the panel are plain — the panel itself is the raised surface. */
.cppt .cppt-full__dd-panel .cppt-full__row {
    border-color: transparent !important;
    box-shadow: none !important;
}
.cppt .cppt-full__dd-panel .cppt-full__row:hover {
    background: color-mix(in srgb, var(--cppt-focus) 7%, transparent) !important;
}

/* ---------- Dark card ---------- */

/* The panel is absolutely positioned and overlaps page content, so a
   translucent fill let that content show through and made the text unreadable.
   It needs an opaque surface of its own. */
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-panel {
    background: color-mix(in srgb, var(--cppt-card-bg) 92%, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-panel .cppt-full__row {
    background: transparent !important;
    border-color: transparent !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-panel .cppt-full__row:hover,
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-panel .cppt-full__row.is-active {
    background: rgba(255, 255, 255, 0.12) !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__chev {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark.cppt-full--pills .cppt-full__row.is-active {
    background: color-mix(in srgb, var(--cppt-focus) 28%, transparent) !important;
    border-color: var(--cppt-focus) !important;
}
/* The dark rule above punches an inset ring in the marker to make the RADIO
   dot. On pills the marker is a filled circle holding a white tick, and that
   ring was drawing a card-coloured disc straight over the tick — on dark that
   left an almost-black blob where the check should be. Pills must keep a solid
   fill here, so the ring is explicitly removed.
   Note the COMPOUND selector: cppt-card--bg-dark and cppt-full--pills are both
   on the card element itself, so a descendant combinator would never match. */
.cppt .cppt-card--full.cppt-card--bg-dark.cppt-full--pills .cppt-full__row.is-active .cppt-full__row-inner::before {
    box-shadow: none !important;
    border-color: var(--cppt-focus) !important;
    background-color: var(--cppt-focus) !important;
}
/* Unselected markers need more contrast against a dark surface than the muted
   text colour gives them. */
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__row-inner::before {
    border-color: rgba(255, 255, 255, 0.45) !important;
}
/* The marker's punched hole uses the card colour; inside the panel the row sits
   on the panel's lighter surface, so it has to match that instead. */
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__dd-panel .cppt-full__row.is-active .cppt-full__row-inner::before {
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--cppt-card-bg) 92%, #ffffff) !important;
}

/* =========================================================================
   Connected vs separated cards
   ========================================================================= */

/* Connected: the cards must butt together, so they fill the cell. The base
   rule's max-width + auto margins would centre each card inside its column and
   leave a visible gutter between them — the opposite of "connected". */
.cppt .cppt-cards--connected .cppt-card--full {
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
}
/* Restore the outer corners so the pair still reads as one rounded object. */
.cppt .cppt-cards--connected .cppt-cell:first-child .cppt-card--full {
    border-top-left-radius: var(--cppt-radius);
    border-bottom-left-radius: var(--cppt-radius);
}
.cppt .cppt-cards--connected .cppt-cell:last-child .cppt-card--full {
    border-top-right-radius: var(--cppt-radius);
    border-bottom-right-radius: var(--cppt-radius);
}
/* No doubled border down the seam. */
.cppt .cppt-cards--connected .cppt-cell:not(:first-child) .cppt-card--full {
    border-left: 0;
}

/* The focused card — the bundle when both are shown — is lifted and keeps all
   four corners, so it reads as sitting on top of the pair rather than in it. */
.cppt .cppt-cards--connected .cppt-card--full.cppt-card--focus {
    border-radius: var(--cppt-radius);
    border-left-width: 1px;
    border-color: var(--cppt-focus);
    box-shadow: var(--cppt-card-shadow-elevated);
    z-index: 2;
    position: relative;
}

/* Separated (the default): keep the card's own border, radius and the grid gap,
   and restate them so they cannot be inherited away by the connected rules. */
.cppt .cppt-cards:not(.cppt-cards--connected) .cppt-card--full {
    border-radius: var(--cppt-radius);
    border: 1px solid var(--cppt-card-border);
}
.cppt .cppt-cards:not(.cppt-cards--connected) .cppt-card--full.cppt-card--focus {
    border-color: var(--cppt-focus);
    box-shadow: var(--cppt-card-shadow-elevated);
}

/* ---------- Responsive ---------- */

@media (max-width: 782px) {
    /* Stacked: "connected" horizontally makes no sense once the cards are in
       one column, so give every card its own rounded frame back. */
    .cppt .cppt-cards--connected .cppt-card--full,
    .cppt .cppt-cards--connected .cppt-cell:first-child .cppt-card--full,
    .cppt .cppt-cards--connected .cppt-cell:last-child .cppt-card--full {
        border-radius: var(--cppt-radius);
        border-left-width: 1px;
        max-width: 560px;
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .cppt .cppt-full--pills .cppt-full__row-inner {
        padding: 13px 16px !important;
    }
    .cppt .cppt-full__row-badge {
        right: 10px;
        top: -8px;
    }
    .cppt .cppt-full__chev {
        width: 24px !important;
        height: 24px !important;
        padding: 5px !important;
        margin-right: 10px !important;
    }
}

/* =========================================================================
   Site-count dropdown — custom listbox
   Replaces the native <select>. The browser draws a native option list itself
   and it cannot carry a price or a styled chevron, so this is a disclosure
   button plus a listbox. The old .cppt-selector__label / __select rules are
   left in place for any third-party markup still using them.
   ========================================================================= */

.cppt .cppt-selector--dropdown {
    display: block;
}

.cppt .cppt-dd {
    position: relative;
}

.cppt .cppt-dd__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 11px 11px 16px !important;
    background: var(--cppt-control-bg) !important;
    border: 1px solid var(--cppt-card-border) !important;
    border-radius: var(--cppt-control-radius) !important;
    cursor: pointer;
    font-family: inherit;
    /* 15px, deliberately NOT the 16px used in the open panel. The trigger sits
       inside the card beside the licence toggle (13px) and the tagline (14px),
       so 16px would make it the loudest thing in the control area and start
       competing with the headline price. One step up is enough to read as the
       primary control. */
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--cppt-text-dark) !important;
    text-align: left !important;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.cppt .cppt-dd__trigger:hover,
.cppt .cppt-dd__trigger:focus {
    border-color: color-mix(in srgb, var(--cppt-focus) 45%, var(--cppt-card-border)) !important;
    /* An explicit hover background, for two reasons. It is the control's own
       feedback — a border tint alone is easy to miss on a busy page. And
       without a declaration here the hover state had nothing of ours in it, so
       a theme's `button:hover { background: … }` landed on it unopposed; on
       locoaddon.com that painted the control the theme's grey mid-interaction. */
    background: color-mix(in srgb, var(--cppt-focus) 7%, var(--cppt-control-bg)) !important;
    background-image: none !important;
    color: var(--cppt-text-dark) !important;
}
.cppt .cppt-dd.is-open .cppt-dd__trigger {
    background: color-mix(in srgb, var(--cppt-focus) 9%, var(--cppt-control-bg)) !important;
}
/* Dark cards: the tint above is mixed into a light control surface, which on a
   dark card would lighten it toward white. Lift it with white instead. */
.cppt .cppt-card--bg-dark .cppt-dd__trigger:hover,
.cppt .cppt-card--bg-dark .cppt-dd__trigger:focus,
.cppt .cppt-card--bg-dark .cppt-dd.is-open .cppt-dd__trigger {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}
.cppt .cppt-dd__trigger:focus-visible {
    outline: 2px solid var(--cppt-focus) !important;
    outline-offset: 2px !important;
}
.cppt .cppt-dd.is-open .cppt-dd__trigger {
    border-color: var(--cppt-focus) !important;
}

.cppt .cppt-dd__current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Same filled circular affordance the full layout uses, so the two dropdowns
   read as one control family rather than two unrelated widgets. */
.cppt .cppt-dd__chev {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: color-mix(in srgb, var(--cppt-text-dark) 8%, transparent) !important;
    color: var(--cppt-text-dark) !important;
    transition: transform 0.2s ease, background 0.18s ease, color 0.18s ease;
}
.cppt .cppt-dd__trigger:hover .cppt-dd__chev {
    background: color-mix(in srgb, var(--cppt-focus) 18%, transparent) !important;
    color: var(--cppt-focus) !important;
}
.cppt .cppt-dd.is-open .cppt-dd__chev {
    background: var(--cppt-focus) !important;
    color: var(--cppt-cta-text) !important;
    transform: rotate(180deg) !important;
}

.cppt .cppt-dd__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    /* gap, not margin-top on each option: a top margin would also push the
       FIRST option away from the panel's own padding, making the list sit
       off-centre inside its box. */
    gap: 3px;
    padding: 5px !important;
    background: var(--cppt-card-bg) !important;
    border: 1px solid var(--cppt-card-border) !important;
    border-radius: var(--cppt-radius) !important;
    box-shadow: var(--cppt-card-shadow-elevated) !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.2s ease, opacity 0.16s ease, visibility 0s linear 0.2s;
}
.cppt .cppt-dd.is-open .cppt-dd__panel {
    max-height: 320px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.24s ease, opacity 0.18s ease, visibility 0s;
}

.cppt .cppt-dd__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    margin: 0 !important;
    /* 14px vertical takes the row to ~49px, clearing the 44px minimum touch
       target. Horizontal matches it rather than staying at 12px: beside 16px
       text the tighter inset read as cramped on the right, where the price sits. */
    padding: 14px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: calc(var(--cppt-radius) - 4px) !important;
    cursor: pointer;
    font-family: inherit;
    /* 16px, matching the full layout's row label. The open panel is a focused
       decision with nothing competing for attention, so it can afford the size
       the collapsed trigger cannot. */
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--cppt-text-muted) !important;
    text-align: left !important;
    transition: background 0.14s ease, color 0.14s ease;
}
.cppt .cppt-dd__opt:hover {
    background: color-mix(in srgb, var(--cppt-focus) 8%, transparent) !important;
    color: var(--cppt-text-dark) !important;
}
.cppt .cppt-dd__opt.is-active {
    background: color-mix(in srgb, var(--cppt-focus) 12%, transparent) !important;
    color: var(--cppt-text-dark) !important;
    font-weight: 700 !important;
}
.cppt .cppt-dd__opt:focus-visible {
    outline: 2px solid var(--cppt-focus) !important;
    outline-offset: -2px !important;
}

.cppt .cppt-dd__opt-label {
    flex: 1 1 auto;
    min-width: 0;
}
/* Price lives only in the open list. It is a secondary cue for comparing tiers,
   so it stays smaller and lighter than the card's headline figure. */
.cppt .cppt-dd__opt-price {
    flex: 0 0 auto;
    margin-left: auto !important;
    /* One step below the 16px label: the price is a comparison cue, not the
       thing being chosen. */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cppt-text-muted) !important;
    font-variant-numeric: tabular-nums;
}
.cppt .cppt-dd__opt.is-active .cppt-dd__opt-price,
.cppt .cppt-dd__opt:hover .cppt-dd__opt-price {
    color: var(--cppt-focus) !important;
}

/* ---------- Dark cards ---------- */
/* The panel is absolutely positioned over page content, so it needs an opaque
   surface of its own rather than a translucent tint. */
.cppt .cppt-card--bg-dark .cppt-dd__panel {
    background: color-mix(in srgb, var(--cppt-card-bg) 92%, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
}
.cppt .cppt-card--bg-dark .cppt-dd__trigger {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}
.cppt .cppt-card--bg-dark .cppt-dd__chev {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}
.cppt .cppt-card--bg-dark .cppt-dd.is-open .cppt-dd__chev {
    background: var(--cppt-focus) !important;
    color: var(--cppt-cta-text) !important;
}
.cppt .cppt-card--bg-dark .cppt-dd__opt {
    color: rgba(255, 255, 255, 0.75) !important;
}
.cppt .cppt-card--bg-dark .cppt-dd__opt:hover,
.cppt .cppt-card--bg-dark .cppt-dd__opt.is-active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

@media (max-width: 600px) {
    .cppt .cppt-dd__trigger,
    .cppt .cppt-dd__trigger:hover,
    .cppt .cppt-dd__trigger:focus,
    .cppt .cppt-dd__trigger:active {
        padding: 11px 10px 11px 14px !important;
        /* Only one step down from desktop. Dropping to 13px here put the primary
           control a single pixel above the licence toggle (12px) and undid the
           point of enlarging it. */
        font-size: 14px !important;
    }
    .cppt .cppt-dd__chev {
        width: 24px !important;
        height: 24px !important;
    }
}

/* =========================================================================
   FULL layout — "View more pricing" fold
   Pills and radio list every licence x tier combination, which runs to 6-8
   rows. That pushed the CTA below the fold on a phone, so only the first few
   rows show and the rest sit behind one control.

   Dropdown is excluded: it is already a single collapsed row.
   ========================================================================= */

/* LOAD-BEARING. The `hidden` attribute maps to `display:none` in the UA
   stylesheet, which is the weakest origin there is — the base rules here set
   `display:block` on .cppt-full__row and `display:flex` on .cppt-full__more at
   (0,2,0), so both would stay visible with `hidden` set. Without this rule the
   whole fold silently does nothing. */
.cppt .cppt-full__row[hidden],
.cppt .cppt-full__more[hidden] {
    display: none !important;
}

.cppt .cppt-full__more {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
}
/* The rule the label sits in the middle of. Two flex-grown hairlines rather
   than a border on the container, so the gap under the label is real and the
   line never shows through it. */
.cppt .cppt-full__more::before,
.cppt .cppt-full__more::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 12px;
    background: var(--cppt-card-border);
}

/* A <button>, so every property a theme or Elementor sets on buttons is
   restated. Same reasoning and the same convention as the dropdown trigger:
   anything left undeclared is inherited from whatever the host site does to
   `button`, and a gradient-filled pill here reads as the primary CTA. */
.cppt .cppt-full__more-btn {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    background: var(--cppt-card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--cppt-card-border) !important;
    border-radius: var(--cppt-radius-pill) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--cppt-text-muted) !important;
    cursor: pointer !important;
    transform: none !important;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease !important;
    -webkit-appearance: none;
    appearance: none;
}
.cppt .cppt-full__more-btn:hover,
.cppt .cppt-full__more-btn:focus {
    background: color-mix(in srgb, var(--cppt-focus) 7%, var(--cppt-card-bg)) !important;
    border-color: color-mix(in srgb, var(--cppt-focus) 50%, var(--cppt-card-border)) !important;
    color: var(--cppt-focus) !important;
    box-shadow: none !important;
    transform: none !important;
}
.cppt .cppt-full__more-btn:focus-visible {
    outline: 2px solid var(--cppt-focus) !important;
    outline-offset: 2px !important;
}

.cppt .cppt-full__more-label {
    white-space: nowrap;
}
/* The count is the reason to click — "5 more" answers "more of what, how many"
   before the visitor commits to expanding. */
.cppt .cppt-full__more-count {
    padding: 1px 7px;
    border-radius: var(--cppt-radius-pill);
    background: color-mix(in srgb, var(--cppt-text-muted) 12%, transparent);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cppt .cppt-full__more-btn:hover .cppt-full__more-count,
.cppt .cppt-full__more-btn:focus .cppt-full__more-count {
    background: color-mix(in srgb, var(--cppt-focus) 15%, transparent);
}

.cppt .cppt-full__more-chev {
    flex: 0 0 auto;
    display: block;
    width: 14px;
    height: 14px;
    color: currentColor;
}

/* ---------- Dark card ---------- */

.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__more::before,
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__more::after {
    background: rgba(255, 255, 255, 0.16);
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__more-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.78) !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__more-btn:hover,
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__more-btn:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}
.cppt .cppt-card--full.cppt-card--bg-dark .cppt-full__more-count {
    background: rgba(255, 255, 255, 0.14);
}

/* ---------- Reduced motion ---------- */
/* Revealing five rows at once is a large layout shift; respect the preference
   by not animating the rows in. Nothing here animates them yet, so this only
   guards the hover transition. */
@media (prefers-reduced-motion: reduce) {
    .cppt .cppt-full__more-btn {
        transition: none !important;
    }
}

@media (max-width: 600px) {
    .cppt .cppt-full__more {
        gap: 10px;
    }
    .cppt .cppt-full__more-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}