/*
 * Button Hover Effects — Codrops-style catalog
 * https://tympanus.net/Development/ButtonHoverStyles/
 *
 * Usage: add a modifier class `cb-hx-<name>` to any `.custom-button` or
 * `.pp-query-card__readmore`. The text is always wrapped as
 * `<span class="btn-txt"><span>TEXT</span></span>` — the `.btn-txt` class
 * is the animation target. Library icons (`<i class="bi">`, `<span>` with
 * mask-image), inline `<svg>`, and custom `<img>` sit alongside and do
 * NOT receive the slide animation — only custom `<img>` does.
 *
 * For query_loop readmore: the hover is triggered by `.pp-query-card:hover`
 * (card-wide hover), not by hovering the readmore span directly.
 *
 * The `::before` background is typically emitted inline from blade using the
 * configured `btnBg`; fallback here is `currentColor`.
 *
 * Available effects (22 total):
 *   Codrops-inspired (11):
 *     cb-hx-hyperion — text slide up + overlay peel (default, needs double span)
 *     cb-hx-pan      — overlay slides up
 *     cb-hx-mimas    — skewed overlay slides right
 *     cb-hx-pallene  — border-radius morph (rectangle → pill)
 *     cb-hx-telesto  — double triangle clips + text slide right
 *     cb-hx-calypso  — circle expand from top
 *     cb-hx-greip    — triangle clip-path from top-right to bottom-left
 *     cb-hx-dione    — inner bg shrink + outer border grow
 *     cb-hx-anthe    — arrow pentagonal clip-path
 *     cb-hx-pandora  — 3D push via offset box-shadow
 *     cb-hx-narvi    — drop clip-path from bottom
 *   B2B subtle (4):
 *     cb-hx-shine    — glossy highlight sweeps (premium)
 *     cb-hx-shift    — content slides right + trailing line (CTA)
 *     cb-hx-outline  — inset box-shadow grows (minimalist)
 *     cb-hx-underline — line grows from center (elegant)
 *   Modern interaction (6):
 *     cb-hx-press    — scale tactile feedback (works on :active too)
 *     cb-hx-lift     — translateY + shadow (premium CTA classic)
 *     cb-hx-glow     — outer halo (uses currentColor)
 *     cb-hx-iris     — circle radial expand from center
 *     cb-hx-sweep    — diagonal overlay sweep (top-left)
 *     cb-hx-echo     — staggered multi-shadow (brutalist-modern)
 */

/* ═══════════════════════════════════════════════════════
   COMMON BASE — applied to any button with a hover effect
   =══════════════════════════════════════════════════════ */
[class*="cb-hx-"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* All direct children render above the ::before overlay (icons + text wrapper) */
[class*="cb-hx-"] > i,
[class*="cb-hx-"] > img,
[class*="cb-hx-"] > svg,
[class*="cb-hx-"] > span {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════
   SHARED KEYFRAMES
   =══════════════════════════════════════════════════════ */
@keyframes cb-hx-up-initial {
    to { transform: translate3d(0, -105%, 0); }
}
@keyframes cb-hx-up-end {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: translate3d(0, 0, 0); }
}
@keyframes cb-hx-right-initial {
    to { transform: translate3d(105%, 0, 0); }
}
@keyframes cb-hx-right-end {
    from { transform: translate3d(-100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

/* ═══════════════════════════════════════════════════════
   HYPERION — text slide up + overlay peel
   =══════════════════════════════════════════════════════ */
.cb-hx-hyperion > span.btn-txt {
    display: inline-block;
    overflow: hidden;
}
.cb-hx-hyperion > span.btn-txt > span {
    display: block;
    position: relative;
    overflow: hidden;
}
.cb-hx-hyperion::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    transform-origin: 100% 50%;
    pointer-events: none;
}
.cb-hx-hyperion:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-hyperion::before {
    transform: scale3d(0, 1, 1);
    transform-origin: 0% 50%;
}
.cb-hx-hyperion:not(.pp-query-card__readmore):hover > span.btn-txt > span,
.cb-hx-hyperion:not(.pp-query-card__readmore):hover > img,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-hyperion > span.btn-txt > span,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-hyperion > img {
    animation: cb-hx-up-initial 0.2s forwards,
               cb-hx-up-end 0.2s forwards 0.2s;
}

/* ═══════════════════════════════════════════════════════
   PAN — overlay slides up on hover
   =══════════════════════════════════════════════════════ */
.cb-hx-pan::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    pointer-events: none;
}
.cb-hx-pan:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-pan::before {
    transform: translate3d(0, -100%, 0);
}

/* ═══════════════════════════════════════════════════════
   MIMAS — skewed overlay slides right
   =══════════════════════════════════════════════════════ */
.cb-hx-mimas::before {
    content: '';
    position: absolute;
    top: 0; left: -10%;
    width: 120%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    pointer-events: none;
}
.cb-hx-mimas:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-mimas::before {
    transform: skew(30deg) translate3d(100%, 0, 0);
}

/* ═══════════════════════════════════════════════════════
   PALLENE — border-radius morph (rectangle → pill)
   =══════════════════════════════════════════════════════ */
.cb-hx-pallene {
    transition: border-radius 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.cb-hx-pallene:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-pallene {
    border-radius: 9999px;
}

/* ═══════════════════════════════════════════════════════
   TELESTO — double triangle slides + text slide right
   =══════════════════════════════════════════════════════ */
.cb-hx-telesto > span.btn-txt {
    display: block;
    overflow: hidden;
}
.cb-hx-telesto > span.btn-txt > span {
    display: block;
    position: relative;
}
.cb-hx-telesto::before,
.cb-hx-telesto::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    pointer-events: none;
}
.cb-hx-telesto::before {
    width: 135%;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
    transform: translate3d(-100%, 0, 0);
}
.cb-hx-telesto::after {
    width: 105%;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.cb-hx-telesto:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-telesto::before {
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.cb-hx-telesto:not(.pp-query-card__readmore):hover::after,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-telesto::after {
    transform: translate3d(0, 0, 0);
    transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.cb-hx-telesto:not(.pp-query-card__readmore):hover > span.btn-txt > span,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-telesto > span.btn-txt > span {
    animation: cb-hx-right-initial 0.1s forwards,
               cb-hx-right-end 0.3s forwards 0.2s;
}

/* ═══════════════════════════════════════════════════════
   CALYPSO — circle expand from top
   =══════════════════════════════════════════════════════ */
.cb-hx-calypso::before {
    content: '';
    position: absolute;
    top: -110%; left: -10%;
    width: 120%; height: 0;
    padding-bottom: 120%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    border-radius: 50%;
    transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
    pointer-events: none;
}
.cb-hx-calypso:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-calypso::before {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════
   GREIP — triangle clip from top-right to bottom-left
   =══════════════════════════════════════════════════════ */
.cb-hx-greip > span.btn-txt {
    display: block;
    overflow: hidden;
}
.cb-hx-greip > span.btn-txt > span {
    display: block;
    position: relative;
}
.cb-hx-greip::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: clip-path 0.2s cubic-bezier(0.7, 0, 0.2, 1);
    pointer-events: none;
}
.cb-hx-greip:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-greip::before {
    transition-duration: 0.3s;
    clip-path: polygon(0 0, 100% 0, 0 0, 0% 100%);
}
.cb-hx-greip:not(.pp-query-card__readmore):hover > span.btn-txt > span,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-greip > span.btn-txt > span {
    animation: cb-hx-up-initial 0.2s forwards,
               cb-hx-up-end 0.2s forwards 0.2s;
}

/* ═══════════════════════════════════════════════════════
   DIONE — inner bg shrinks + outer border grows
   =══════════════════════════════════════════════════════ */
.cb-hx-dione > span.btn-txt {
    position: relative;
    z-index: 3;
    display: inline-block;
}
.cb-hx-dione::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.7, 1);
    pointer-events: none;
}
.cb-hx-dione:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-dione::before {
    transform: scale3d(0.9, 0.8, 1);
}
.cb-hx-dione::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 1px solid currentColor;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.2, 1, 0.7, 1);
    transform: scale3d(0.85, 0.65, 1);
    pointer-events: none;
    box-sizing: border-box;
}
.cb-hx-dione:not(.pp-query-card__readmore):hover::after,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-dione::after {
    transform: scale3d(1, 1, 1);
}

/* ═══════════════════════════════════════════════════════
   ANTHE — pentagonal arrow clip-path + text slide left
   =══════════════════════════════════════════════════════ */
.cb-hx-anthe > span.btn-txt {
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.8, 1);
}
.cb-hx-anthe::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
    transition: clip-path 0.4s cubic-bezier(0.2, 1, 0.8, 1);
    pointer-events: none;
}
.cb-hx-anthe:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-anthe::before {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.cb-hx-anthe:not(.pp-query-card__readmore):hover > span.btn-txt,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-anthe > span.btn-txt {
    transform: translate3d(-10px, 0, 0);
}

/* ═══════════════════════════════════════════════════════
   PANDORA — 3D push via offset box-shadow (respects user's padding/bg)
   =══════════════════════════════════════════════════════ */
.cb-hx-pandora {
    box-shadow: 4px 4px 0 0 currentColor;
    transition: box-shadow 0.3s cubic-bezier(0.7, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.cb-hx-pandora:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-pandora {
    box-shadow: 8px 8px 0 0 currentColor;
    transform: translate3d(-4px, -4px, 0);
}

/* ═══════════════════════════════════════════════════════
   NARVI — drop clip-path + text slide up
   =══════════════════════════════════════════════════════ */
.cb-hx-narvi {
    background: none !important;
}
.cb-hx-narvi > span.btn-txt {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.cb-hx-narvi > span.btn-txt > span {
    display: block;
    position: relative;
}
.cb-hx-narvi::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 85% 100%, 80% 100%, 75% 100%, 0 100%);
    transition: clip-path 0.3s cubic-bezier(0.7, 0, 0.2, 1);
    pointer-events: none;
}
.cb-hx-narvi:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-narvi::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 85% 100%, 86% 130%, 75% 100%, 0 100%);
}
.cb-hx-narvi:not(.pp-query-card__readmore):hover > span.btn-txt > span,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-narvi > span.btn-txt > span {
    animation: cb-hx-up-initial 0.15s forwards,
               cb-hx-up-end 0.15s forwards 0.15s;
}

/* ═══════════════════════════════════════════════════════
   SHINE — glossy highlight sweeps across (B2B premium)
   =══════════════════════════════════════════════════════ */
.cb-hx-shine::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,.25) 45%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,.25) 55%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
    transition: left .65s cubic-bezier(.25,.46,.45,.94);
}
.cb-hx-shine:not(.pp-query-card__readmore):hover::after,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-shine::after {
    left: 125%;
}

/* ═══════════════════════════════════════════════════════
   SHIFT — content slides right + subtle trailing line
   =══════════════════════════════════════════════════════ */
.cb-hx-shift > span.btn-txt,
.cb-hx-shift > i,
.cb-hx-shift > img,
.cb-hx-shift > svg {
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.cb-hx-shift::before {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 0; height: 2px;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    opacity: .6;
    transition: width .25s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
    transform: translateY(-50%);
}
.cb-hx-shift:not(.pp-query-card__readmore):hover > span.btn-txt,
.cb-hx-shift:not(.pp-query-card__readmore):hover > i,
.cb-hx-shift:not(.pp-query-card__readmore):hover > img,
.cb-hx-shift:not(.pp-query-card__readmore):hover > svg,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-shift > span.btn-txt,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-shift > i,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-shift > img,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-shift > svg {
    transform: translate3d(8px, 0, 0);
}
.cb-hx-shift:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-shift::before {
    width: 8px;
}

/* ═══════════════════════════════════════════════════════
   OUTLINE — inset box-shadow pulse (minimalist corporate)
   =══════════════════════════════════════════════════════ */
.cb-hx-outline {
    box-shadow: inset 0 0 0 0px currentColor;
    transition: box-shadow .3s cubic-bezier(.25,.46,.45,.94);
}
.cb-hx-outline:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-outline {
    box-shadow: inset 0 0 0 3px currentColor;
}

/* ═══════════════════════════════════════════════════════
   UNDERLINE — line grows from center (elegant, subtle)
   =══════════════════════════════════════════════════════ */
.cb-hx-underline::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: 2px;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 2;
    pointer-events: none;
    transform: translateX(-50%);
    transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.cb-hx-underline:not(.pp-query-card__readmore):hover::after,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-underline::after {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════
   PRESS — tactile scale (works as :active feedback on touch too)
   =══════════════════════════════════════════════════════ */
.cb-hx-press {
    transition: transform .15s cubic-bezier(.2, .7, .2, 1);
}
.cb-hx-press:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-press {
    transform: scale(1.02);
}
.cb-hx-press:not(.pp-query-card__readmore):active {
    transform: scale(.96);
    transition-duration: .08s;
}

/* ═══════════════════════════════════════════════════════
   LIFT — translateY + shadow grow (premium CTA classic)
   =══════════════════════════════════════════════════════ */
.cb-hx-lift {
    transition: transform .25s cubic-bezier(.2, .7, .2, 1),
                box-shadow .25s cubic-bezier(.2, .7, .2, 1);
}
.cb-hx-lift:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-lift {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
}

/* ═══════════════════════════════════════════════════════
   GLOW — outer halo (uses currentColor for the ring)
   =══════════════════════════════════════════════════════ */
.cb-hx-glow {
    transition: box-shadow .3s ease;
}
.cb-hx-glow:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-glow {
    box-shadow: 0 0 0 4px currentColor,
                0 0 16px 2px currentColor;
}

/* ═══════════════════════════════════════════════════════
   IRIS — circle radial expand from center
   =══════════════════════════════════════════════════════ */
.cb-hx-iris::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}
.cb-hx-iris:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-iris::before {
    transform: translate(-50%, -50%) scale(40);
}

/* ═══════════════════════════════════════════════════════
   SWEEP — diagonal overlay sweep from top-left
   =══════════════════════════════════════════════════════ */
.cb-hx-sweep::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 200%; height: 100%;
    background: var(--btn-overlay-bg, currentColor);
    z-index: 1;
    transform: translate3d(-100%, 0, 0) skewX(-25deg);
    transform-origin: top left;
    transition: transform .4s cubic-bezier(.7, 0, .2, 1);
    pointer-events: none;
}
.cb-hx-sweep:not(.pp-query-card__readmore):hover::before,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-sweep::before {
    transform: translate3d(0, 0, 0) skewX(-25deg);
}

/* ═══════════════════════════════════════════════════════
   ECHO — staggered multi-shadow (brutalist-modern stamp)
   =══════════════════════════════════════════════════════ */
.cb-hx-echo {
    transition: box-shadow .3s cubic-bezier(.2, .7, .2, 1),
                transform .3s cubic-bezier(.2, .7, .2, 1);
}
.cb-hx-echo:not(.pp-query-card__readmore):hover,
.pp-query-card:hover .pp-query-card__readmore.cb-hx-echo {
    transform: translate(-6px, 0);
    box-shadow: 4px 0 0 0 currentColor,
                8px 0 0 0 rgba(0, 0, 0, .35),
                12px 0 0 0 rgba(0, 0, 0, .15);
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — respect user preference
   =══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    [class*="cb-hx-"],
    [class*="cb-hx-"]::before,
    [class*="cb-hx-"]::after,
    [class*="cb-hx-"] > span,
    [class*="cb-hx-"] > span > span,
    [class*="cb-hx-"] > i,
    [class*="cb-hx-"] > img {
        animation: none !important;
        transition: background .15s, color .15s, border-color .15s !important;
    }
}

/* ═══════════════════════════════════════════════════════
   DISABLE BUTTON HOVER ON TOUCH — opt-in via site settings
   When body has `.no-btn-hover-mobile` and/or `.no-btn-hover-tablet`
   classes (set by layout from site settings), all hover effects on
   buttons are flattened on the matching viewport.
   =══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    body.no-btn-hover-mobile [class*="cb-hx-"],
    body.no-btn-hover-mobile [class*="cb-hx-"] > span,
    body.no-btn-hover-mobile [class*="cb-hx-"] > span > span,
    body.no-btn-hover-mobile [class*="cb-hx-"] > i,
    body.no-btn-hover-mobile [class*="cb-hx-"] > img {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    body.no-btn-hover-mobile [class*="cb-hx-"]::before,
    body.no-btn-hover-mobile [class*="cb-hx-"]::after {
        display: none !important;
    }
    /* Restore base look on :hover — even color/bg/border configured for hover
       must be ignored. Fallbacks (currentColor / transparent) apply if base
       vars weren't set (button without explicit colors). */
    body.no-btn-hover-mobile [class*="cb-hx-"]:hover {
        background: var(--btn-base-bg, transparent) !important;
        color: var(--btn-base-color, inherit) !important;
        border-color: var(--btn-base-border, currentColor) !important;
        box-shadow: none !important;
        transform: none !important;
        border-radius: inherit !important;
    }
    /* Card-hover trigger for query loop readmore */
    body.no-btn-hover-mobile .pp-query-card:hover .pp-query-card__readmore {
        background: var(--btn-base-bg, transparent) !important;
        color: var(--btn-base-color, inherit) !important;
        border-color: var(--btn-base-border, currentColor) !important;
    }
}

@media (min-width: 768px) and (max-width: 1280px) {
    body.no-btn-hover-tablet [class*="cb-hx-"],
    body.no-btn-hover-tablet [class*="cb-hx-"] > span,
    body.no-btn-hover-tablet [class*="cb-hx-"] > span > span,
    body.no-btn-hover-tablet [class*="cb-hx-"] > i,
    body.no-btn-hover-tablet [class*="cb-hx-"] > img {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    body.no-btn-hover-tablet [class*="cb-hx-"]::before,
    body.no-btn-hover-tablet [class*="cb-hx-"]::after {
        display: none !important;
    }
    body.no-btn-hover-tablet [class*="cb-hx-"]:hover {
        background: var(--btn-base-bg, transparent) !important;
        color: var(--btn-base-color, inherit) !important;
        border-color: var(--btn-base-border, currentColor) !important;
        box-shadow: none !important;
        transform: none !important;
        border-radius: inherit !important;
    }
    body.no-btn-hover-tablet .pp-query-card:hover .pp-query-card__readmore {
        background: var(--btn-base-bg, transparent) !important;
        color: var(--btn-base-color, inherit) !important;
        border-color: var(--btn-base-border, currentColor) !important;
    }
}