.ckh-header,
.ckh-header * {
    box-sizing: border-box;
}

.ckh-header {
    --ckh-bg: #fff7ff;
    --ckh-surface: #ffffff;
    --ckh-text: #302f35;
    --ckh-muted: #77717c;
    --ckh-border: #eadff0;
    --ckh-purple: #7c5cff;
    --ckh-shadow: rgba(56, 36, 72, .13);
    --ckh-logo-h: 42px;
    --ckh-logo-h-mobile: 34px;
    /* Overlay, not a stacked section: the header is taken out of the page's normal flow and
       pinned to the very top of the document. Because it no longer reserves its own height,
       nothing pushes the first section of the page down and no gap/strip is left behind — the
       page's own background (different per page) runs all the way to the top, and the header
       floats on top of it. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
    background: transparent;
    color: var(--ckh-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Front page only
 * ----------------
 * The regular header remains transparent on every inner page.
 * On the WordPress front page, paint the requested Elementor-style radial
 * gradient behind the floating header card. Because the header is absolute,
 * this layer sits directly over the spacer and removes the white strip that
 * would otherwise show between the header and the first section.
 */
.ckh-header.ckh-front-page {
    background-color: transparent;
}

/* The spacer sits underneath the absolute header. Give it the same home-only
   gradient as a fallback for the first paint / resize frame so no white flash
   or 1px seam can appear while JavaScript synchronizes the measured height. */
.ckh-header-spacer.ckh-front-page-spacer {
    background-image: radial-gradient(at center center, #CCAFFD 0%, #FDEAFF82 47%);
    background-color: transparent;
}

/* Keep clear of the WordPress admin toolbar when logged in, matching WP's own offsets. */
body.admin-bar .ckh-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .ckh-header {
        top: 46px;
    }
}

.ckh-header a {
    text-decoration: none;
}

/* The header itself never paints a background — but Elementor still wraps the shortcode
   in its own section/container/column/widget markup. Neutralize every level of that wrapper
   (old Section/Column layout and the newer Flexbox Container layout): drop any background,
   any "position" that would turn it into the header's new containing block (which would trap
   the overlay inside that wrapper instead of the full page), and any overflow/height clipping. */
.elementor-location-header:has(.ckh-header),
.elementor-section:has(.ckh-header),
.elementor-container:has(.ckh-header),
.elementor-column:has(.ckh-header),
.elementor-widget-wrap:has(.ckh-header),
.elementor-widget:has(.ckh-header),
.elementor-widget-shortcode:has(.ckh-header),
.elementor-widget-container:has(.ckh-header),
.e-con:has(.ckh-header),
.e-con-inner:has(.ckh-header) {
    position: static !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reserves real document-flow space equal to the (absolutely positioned, out-of-flow) header's
   actual rendered height, so page content always starts right below the floating card on every
   page instead of hiding underneath it. header.js keeps this in sync with the header's real
   size (which can change with menu wrapping, logo size, admin bar, breakpoint, etc.). The
   fixed heights below are only a same-paint-frame fallback for before JS measures it. */
.ckh-header-spacer {
    display: block;
    width: 100%;
    height: 160px;
}

@media (max-width: 960px) {
    .ckh-header-spacer {
        height: 150px;
    }
}

/* ------------------------------------------------------------------
 * Desktop layout (1.1)
 * The outer box takes the margins as insets (padding), so the header is
 * always centered in whatever space is left: equal left/right margins keep it
 * perfectly centered at every screen width.
 * The white bar and the search tab below it are one shape; the drop-shadow on
 * the wrapper follows that combined outline, so there is no seam or gap.
 * ------------------------------------------------------------------ */
.ckh-desktop-outer {
    width: 100%;
    margin: 0;
    padding: var(--ckh-desktop-mt, 0) var(--ckh-desktop-mr, 0) var(--ckh-desktop-mb, 0) var(--ckh-desktop-ml, 0);
}

.ckh-desktop {
    --ckh-card: #ffffff;
    --ckh-radius: 18px;
    --ckh-fillet: 20px;
    position: relative;
    width: var(--ckh-desktop-width, 100%);
    max-width: var(--ckh-desktop-maxw, none);
    margin: 0 auto;
    filter: drop-shadow(0 12px 22px rgba(56, 36, 72, .12));
}

.ckh-desktop-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    min-height: var(--ckh-desktop-minh, 120px);
    padding: var(--ckh-desktop-pt, 14px) var(--ckh-desktop-pr, 16px) var(--ckh-desktop-pb, 14px) var(--ckh-desktop-pl, 22px);
    border-radius: var(--ckh-radius);
    background: var(--ckh-card);
}

.ckh-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ckh-text);
    font-size: 21px;
    font-weight: 700;
    white-space: nowrap;
}

.ckh-logo-image {
    display: block;
    width: auto;
    max-width: 260px;
    height: var(--ckh-logo-h, 42px);
    object-fit: contain;
}

.ckh-logo-mark {
    position: relative;
    width: 27px;
    height: 25px;
    flex: 0 0 27px;
}

.ckh-logo-mark i {
    position: absolute;
    left: 2px;
    width: 22px;
    height: 9px;
    border-radius: 3px;
    transform: rotate(-32deg) skewX(24deg);
    background: linear-gradient(135deg, #a184ff, #6752f3);
}

.ckh-logo-mark i:nth-child(1) { top: 1px; }
.ckh-logo-mark i:nth-child(2) { top: 8px; opacity: .75; }
.ckh-logo-mark i:nth-child(3) { top: 15px; opacity: .45; }

.ckh-desktop-menu,
.ckh-mobile-menu,
.ckh-desktop-menu ul,
.ckh-mobile-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ckh-desktop-nav {
    width: 100%;
}

.ckh-desktop-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 34px);
}

.ckh-desktop-menu > li {
    position: relative;
}

.ckh-desktop-menu > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ckh-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.ckh-desktop-menu > li > a:hover,
.ckh-desktop-menu > .current-menu-item > a,
.ckh-desktop-menu > .current-menu-ancestor > a {
    color: var(--ckh-purple);
}

.ckh-desktop-menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 30;
    display: none;
    min-width: 210px;
    padding: 8px;
    border: 1px solid var(--ckh-border);
    border-radius: 13px;
    background: var(--ckh-surface);
    box-shadow: 0 16px 34px var(--ckh-shadow);
    transform: translateX(-50%);
}

.ckh-desktop-menu li:hover > .sub-menu,
.ckh-desktop-menu li:focus-within > .sub-menu {
    display: block;
}

.ckh-desktop-menu .sub-menu a {
    display: block;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--ckh-text);
    font-size: 13px;
}

.ckh-desktop-menu .sub-menu a:hover {
    background: var(--ckh-bg);
    color: var(--ckh-purple);
}

.ckh-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 6px 0 14px;
    border: 1px solid var(--ckh-border);
    border-radius: 14px;
    background: var(--ckh-bg);
}

/* Search tab: attached to the bottom of the bar, same white, concave corners. */
.ckh-search-dock {
    position: relative;
    height: 60px; /* reserved space: 2px top + 44px field + 14px bottom */
}

.ckh-search-tab {
    position: absolute;
    top: -1px; /* overlap the bar by 1px so no hairline shows */
    left: 50%;
    z-index: 5;
    width: min(var(--ckh-search-w, 620px), calc(100% - 2 * var(--ckh-fillet) - 24px));
    padding: 3px 12px 14px;
    border-radius: 0 0 22px 22px;
    background: var(--ckh-card);
    transform: translateX(-50%);
    transition: width .32s cubic-bezier(.2, .8, .2, 1), padding .2s ease;
}

.ckh-search-tab::before,
.ckh-search-tab::after {
    content: "";
    position: absolute;
    top: 0;
    width: var(--ckh-fillet);
    height: var(--ckh-fillet);
    pointer-events: none;
}

.ckh-search-tab::before {
    left: calc(-1 * var(--ckh-fillet) + 1px);
    background: radial-gradient(circle at 0 100%, transparent calc(var(--ckh-fillet) - .5px), var(--ckh-card) var(--ckh-fillet));
}

.ckh-search-tab::after {
    right: calc(-1 * var(--ckh-fillet) + 1px);
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--ckh-fillet) - .5px), var(--ckh-card) var(--ckh-fillet));
}

.ckh-search-tab.is-open {
    width: min(var(--ckh-search-w-open, 860px), calc(100% - 2 * var(--ckh-fillet) - 24px));
    padding-bottom: 14px;
}

.ckh-search-desktop {
    position: relative;
    width: 100%;
    margin: 0;
}

/* ---- AJAX results (shared desktop + mobile) ---- */
.ckh-search-panel[hidden] {
    display: none !important;
}

.ckh-search-panel {
    position: relative;
}

.ckh-search-results {
    max-height: min(440px, 60vh);
    margin-top: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ckh-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--ckh-text);
    transition: background-color .15s ease, border-color .15s ease;
}

.ckh-result + .ckh-result {
    margin-top: 4px;
}

.ckh-result:hover,
.ckh-result:focus-visible,
.ckh-result.is-active {
    border-color: var(--ckh-border);
    background: var(--ckh-bg);
    outline: none;
}

.ckh-result-thumb {
    display: grid;
    flex: 0 0 56px;
    place-items: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--ckh-border);
    border-radius: 12px;
    background: #fff;
}

.ckh-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ckh-result-thumb svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--ckh-muted);
    stroke-width: 1.6;
}

.ckh-result-body {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.ckh-result-title {
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckh-result-price {
    color: var(--ckh-purple);
    font-size: 13.5px;
    font-weight: 700;
}

.ckh-result-meta {
    color: var(--ckh-muted);
    font-size: 12px;
}

.ckh-result-spark {
    flex: 0 0 96px;
    width: 96px;
    height: 34px;
    fill: none;
    stroke: var(--ckh-purple);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ckh-search-status {
    padding: 18px 10px;
    color: var(--ckh-muted);
    font-size: 13.5px;
    text-align: center;
}

.ckh-search-status.is-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 8px -2px 0;
    border: 2px solid var(--ckh-border);
    border-top-color: var(--ckh-purple);
    border-radius: 50%;
    animation: ckh-spin .7s linear infinite;
}

@keyframes ckh-spin {
    to { transform: rotate(360deg); }
}

/* ---- Product link preview (Chekly API) ---- */
.ckh-turnstile {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.ckh-turnstile[hidden],
.ckh-turnstile:empty {
    display: none;
}

.ckh-search-tab.is-preview .ckh-search-results,
.ckh-search-wrap.is-preview .ckh-search-results {
    max-height: min(620px, 72vh);
}

.ckh-pp {
    --ckh-tone: #7c5cff;
    --ckh-tone-soft: #f1ecff;
    padding: 14px;
    border: 1px solid var(--ckh-border);
    border-radius: 18px;
    background: #fff;
    color: var(--ckh-text);
    text-align: left;
}

/* Every color below can be changed in Settings → Chekly Header → "Price card & chart colors"
   (printed as --ckh-c-* variables on the header). */
.ckh-pp[data-tone="bad"]  { --ckh-tone: var(--ckh-c-bad, #e5484d); --ckh-tone-soft: var(--ckh-c-bad-soft, #fdeced); }
.ckh-pp[data-tone="mid"]  { --ckh-tone: var(--ckh-c-mid, #d97706); --ckh-tone-soft: var(--ckh-c-mid-soft, #fdf3e2); }
.ckh-pp[data-tone="good"] { --ckh-tone: var(--ckh-c-good, #16a34a); --ckh-tone-soft: var(--ckh-c-good-soft, #e8f7ee); }

.ckh-pp-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ckh-pp-thumb {
    display: grid;
    flex: 0 0 76px;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 6px;
    overflow: hidden;
    border: 1px solid var(--ckh-border);
    border-radius: 14px;
    background: #fff;
}

.ckh-pp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ckh-pp-thumb.is-empty {
    background: var(--ckh-bg);
}

.ckh-pp-info {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 4px;
}

.ckh-pp-retailer {
    color: var(--ckh-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ckh-header .ckh-pp-title {
    color: var(--ckh-text);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
}

.ckh-header .ckh-pp-title:hover {
    color: var(--ckh-purple);
}

.ckh-pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.ckh-pp-badge,
.ckh-pp-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.ckh-pp-badge {
    background: var(--ckh-tone-soft);
    color: var(--ckh-tone);
}

.ckh-pp-status {
    border: 1px solid var(--ckh-border);
    color: var(--ckh-muted);
}

.ckh-pp-score {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 3px;
}

.ckh-pp-ring-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
}

.ckh-pp-ring-wrap svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ckh-pp-ring-bg,
.ckh-pp-ring {
    fill: none;
    stroke-width: 4;
}

.ckh-pp-ring-bg {
    stroke: var(--ckh-tone-soft);
}

.ckh-pp-ring {
    stroke: var(--ckh-tone);
    stroke-linecap: round;
}

.ckh-pp-ring-wrap strong {
    position: relative;
    color: var(--ckh-tone);
    font-size: 17px;
    font-weight: 800;
}

.ckh-pp-score-label {
    color: var(--ckh-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ckh-pp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.ckh-pp-stat {
    display: grid;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--ckh-bg);
}

.ckh-pp-stat span {
    color: var(--ckh-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.ckh-pp-stat strong {
    font-size: 17px;
    font-weight: 800;
}

.ckh-pp-stat.is-current strong {
    color: var(--ckh-tone);
}

.ckh-pp-stats.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ckh-pp-stats.is-3 .ckh-pp-stat {
    padding: 9px 10px;
}

.ckh-pp-stat span,
.ckh-pp-stat strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ckh-pp-stat.is-lowest strong {
    color: var(--ckh-c-good, #16a34a);
}

.ckh-pp-message {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-left: 3px solid var(--ckh-tone);
    border-radius: 4px 10px 10px 4px;
    background: var(--ckh-tone-soft);
    color: var(--ckh-text);
    font-size: 13px;
    line-height: 1.45;
}

.ckh-pp-chart {
    position: relative;
    margin-top: 12px;
    padding: 4px 0 0;
    overflow: hidden;
    border: 1px solid var(--ckh-c-chart-border, var(--ckh-border));
    border-radius: 14px;
    background: var(--ckh-c-chart-bg, #fff);
    color: var(--ckh-c-line, var(--ckh-tone));
}

.ckh-pp-area-stop {
    stop-color: var(--ckh-c-area, currentColor);
}

.ckh-pp-plot {
    position: relative;
    height: 150px;
}

.ckh-pp-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ckh-pp-grid {
    stroke: var(--ckh-c-grid, #efe9f3);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.ckh-pp-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ckh-pp-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: var(--ckh-c-dot-fill, #fff);
    transform: translate(-50%, -50%);
}

.ckh-pp-dot.is-clear {
    width: 12px;
    height: 12px;
    border-width: 3px;
    box-shadow: 0 0 0 4px var(--ckh-tone-soft);
}

.ckh-pp-dot.is-clear,
.ckh-pp-tag {
    z-index: 3;
}

.ckh-pp-tag {
    position: absolute;
    padding: 2px 7px;
    border-radius: 7px;
    background: var(--ckh-c-tag-bg, var(--ckh-text));
    color: var(--ckh-c-tag-text, #fff);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, calc(-100% - 11px));
}

.ckh-pp-tag.is-end {
    transform: translate(calc(-100% + 12px), calc(-100% - 11px));
}

.ckh-pp-date.is-end {
    transform: translateX(calc(-100% + 14px));
}

.ckh-pp-axis {
    position: relative;
    height: 26px;
    border-top: 1px solid var(--ckh-c-grid, #f3eef6);
}

.ckh-pp-date {
    position: absolute;
    top: 6px;
    color: var(--ckh-c-date, var(--ckh-muted));
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* Frosted glass over the locked part of the history. */
.ckh-pp-glass {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 8px;
    border-right: 1px solid rgba(255, 255, 255, .9);
    background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(250, 246, 255, .7));
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ckh-c-glass, #faf6ff) 45%, rgba(255, 255, 255, .25)),
        color-mix(in srgb, var(--ckh-c-glass, #faf6ff) 72%, transparent));
    -webkit-backdrop-filter: blur(7px) saturate(1.2);
    backdrop-filter: blur(7px) saturate(1.2);
    color: var(--ckh-text);
}

.ckh-pp-unlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.ckh-pp-lock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--ckh-border);
    border-radius: 999px;
    background: var(--ckh-c-lock-bg, rgba(255, 255, 255, .92));
    box-shadow: 0 6px 16px rgba(56, 36, 72, .1);
    color: var(--ckh-c-lock-text, var(--ckh-text));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    transition: border-color .15s ease, color .15s ease;
}

.ckh-header a.ckh-pp-lock {
    color: var(--ckh-c-lock-text, var(--ckh-text));
}

.ckh-header a.ckh-pp-lock:hover {
    border-color: var(--ckh-purple);
    color: var(--ckh-purple);
}

.ckh-pp-glass.is-icon .ckh-pp-lock {
    padding: 8px;
}

.ckh-pp-glass.is-icon .ckh-pp-lock span {
    display: none;
}

.ckh-pp-lock span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckh-pp-lock svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* ---- "Full access" sentence + App Store / Google Play buttons ---- */
.ckh-pp-access[hidden] {
    display: none !important;
}

.ckh-pp-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

.ckh-header .ckh-pp-access-text {
    margin: 0;
    color: var(--ckh-c-access-text, var(--ckh-text));
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
}

.ckh-pp-stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.ckh-header .ckh-pp-store {
    display: inline-flex;
    border-radius: 9px;
    line-height: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ckh-header .ckh-pp-store:hover,
.ckh-header .ckh-pp-store:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 17, 52, .22);
}

.ckh-pp-store img {
    display: block;
    width: auto;
    max-width: none;
    height: 36px;
    border-radius: 9px;
}

/* Inside the glass: a slightly smaller row so it fits under the pill. */
.ckh-pp-access.is-in-chart .ckh-pp-store img {
    height: 34px;
}

/* Narrow charts: the same block sits right under the chart instead. */
.ckh-pp-access.is-below {
    margin-top: 8px;
    padding: 11px 12px;
    border: 1px solid var(--ckh-border);
    border-radius: 14px;
    background: linear-gradient(135deg, #faf6ff, #fff);
}

.ckh-pp-access.is-below .ckh-pp-store img {
    height: 34px;
}

/* ---- Error card (shows the API's own message) ---- */
.ckh-pp-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #f6d3d5;
    border-radius: 16px;
    background: #fff7f7;
    color: var(--ckh-text);
    text-align: left;
}

.ckh-pp-error-icon {
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fde4e5;
    color: #d93a40;
}

.ckh-pp-error-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ckh-header .ckh-pp-error-text {
    margin: 0;
    padding-top: 7px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* ---- Too many requests (429) / visitor blocked ---- */
.ckh-pp-limit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 20px 20px;
    overflow: hidden;
    border: 1px solid var(--ckh-border);
    border-radius: 20px;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(124, 92, 255, .13), rgba(124, 92, 255, 0) 70%),
        #fff;
    color: var(--ckh-text);
    text-align: center;
}

.ckh-pp-limit-art {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: linear-gradient(145deg, #8f73ff, #6347f0);
    box-shadow: 0 12px 26px rgba(99, 71, 240, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
}

.ckh-pp-limit-pulse {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(124, 92, 255, .28);
    border-radius: 50%;
    animation: ckh-limit-pulse 2.2s ease-out infinite;
}

.ckh-pp-limit-art svg {
    position: relative;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    animation: ckh-limit-flip 3.2s ease-in-out infinite;
}

.ckh-pp-limit-art .ckh-pp-limit-sand {
    fill: currentColor;
    stroke: none;
}

@keyframes ckh-limit-pulse {
    0%   { transform: scale(.88); opacity: 1; }
    100% { transform: scale(1.22); opacity: 0; }
}

@keyframes ckh-limit-flip {
    0%, 70%   { transform: rotate(0); }
    85%, 100% { transform: rotate(180deg); }
}

.ckh-pp-limit-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1ecff;
    color: #6347f0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ckh-header .ckh-pp-limit-message {
    max-width: 440px;
    margin: 0;
    color: var(--ckh-text);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.ckh-pp-limit-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--ckh-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ckh-muted);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ckh-pp-limit-timer svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ckh-pp-access.is-limit {
    width: 100%;
    gap: 10px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px dashed var(--ckh-border);
}

.ckh-pp-access.is-limit .ckh-pp-access-text {
    font-size: 13.5px;
}

.ckh-pp-access.is-limit .ckh-pp-store img {
    height: 40px;
}

@media (prefers-reduced-motion: reduce) {
    .ckh-pp-limit-pulse,
    .ckh-pp-limit-art svg {
        animation: none;
    }
}

.ckh-pp-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.ckh-header .ckh-pp-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    margin-left: auto;
    padding: 0 16px;
    border-radius: 12px;
    background: #000;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ckh-header .ckh-pp-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.ckh-pp-cta svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* "Also found at": other stores selling the same product (hidden when only one store sells it).
   .is-best = this store is already the cheapest, .is-cheaper = another store costs less. */
.ckh-pp-others {
    --ckh-save: var(--ckh-c-save, var(--ckh-c-good, #16a34a));
    --ckh-save-soft: var(--ckh-c-save-soft, var(--ckh-c-good-soft, #e8f7ee));
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ckh-border);
    border-radius: 14px;
    background: var(--ckh-bg);
}

.ckh-pp-others-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 0 2px 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--ckh-border);
}

.ckh-pp-others-title {
    color: var(--ckh-muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ckh-pp-others-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--ckh-save) 30%, transparent);
    border-radius: 999px;
    background: var(--ckh-save-soft);
    color: var(--ckh-save);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.ckh-pp-others-pill svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.ckh-header .ckh-pp-others-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ckh-header .ckh-pp-offer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 10px 9px 12px;
    border: 1px solid var(--ckh-border);
    border-radius: 11px;
    background: #fff;
    list-style: none;
}

.ckh-header .ckh-pp-offer::before,
.ckh-header .ckh-pp-offer::marker {
    content: none;
}

.ckh-pp-offer.is-cheapest {
    border-color: color-mix(in srgb, var(--ckh-save) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ckh-save) 18%, transparent);
}

.ckh-pp-offer-name {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.ckh-pp-offer-name strong {
    overflow: hidden;
    color: var(--ckh-text);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckh-pp-offer-save {
    color: var(--ckh-save);
    font-size: 11.5px;
    font-weight: 700;
}

.ckh-pp-offer-price {
    color: var(--ckh-text);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.ckh-header .ckh-pp-offer-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ckh-border);
    border-radius: 9px;
    background: var(--ckh-bg);
    color: var(--ckh-purple) !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease;
}

.ckh-header .ckh-pp-offer-view:hover,
.ckh-header .ckh-pp-offer-view:focus-visible {
    border-color: var(--ckh-purple);
    background: #fff;
    color: var(--ckh-purple) !important;
}

@media (max-width: 520px) {
    .ckh-pp {
        padding: 12px;
    }

    .ckh-pp-stats.is-3 {
        gap: 6px;
    }

    .ckh-pp-stats.is-3 .ckh-pp-stat {
        padding: 8px;
    }

    .ckh-pp-stats.is-3 .ckh-pp-stat strong {
        font-size: 15px;
    }

    .ckh-pp-others {
        padding: 10px;
    }

    .ckh-header .ckh-pp-offer {
        gap: 8px;
        padding: 8px 8px 8px 10px;
    }

    .ckh-pp-thumb {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
    }

    .ckh-pp-ring-wrap {
        width: 46px;
        height: 46px;
    }

    .ckh-pp-plot {
        height: 130px;
    }

    .ckh-header .ckh-pp-title {
        font-size: 13.5px;
    }

    .ckh-header .ckh-pp-cta {
        width: 100%;
        justify-content: center;
    }

    .ckh-pp-limit {
        padding: 22px 14px 16px;
    }

    .ckh-pp-access.is-limit .ckh-pp-store img {
        height: 36px;
    }
}

.ckh-search > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: var(--ckh-purple);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.ckh-search input {
    min-width: 0;
    flex: 1;
    height: 100%;
    padding: 0;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ckh-text);
    font: inherit;
    font-size: 14px;
}

.ckh-search input::placeholder {
    color: var(--ckh-muted);
}

.ckh-search button,
.ckh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 17px;
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* Colors come from Settings → Chekly Header → Colors. !important keeps the theme /
   Elementor global button styles (hover, focus, active) from repainting it. */
.ckh-header .ckh-search button[type="submit"] {
    border: 0 !important;
    background: var(--ckh-c-search-bg, var(--ckh-purple)) !important;
    color: var(--ckh-c-search-text, #fff) !important;
    cursor: pointer;
}

.ckh-header .ckh-search button[type="submit"]:hover,
.ckh-header .ckh-search button[type="submit"]:focus-visible,
.ckh-header .ckh-search button[type="submit"]:active {
    border: 0 !important;
    background: var(--ckh-c-search-hover-bg, #6a4bf0) !important;
    color: var(--ckh-c-search-hover-text, #fff) !important;
    outline: none;
}

.ckh-header .ckh-search button[type="submit"] span {
    color: inherit !important;
}

.ckh-search button:hover,
.ckh-button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(124, 92, 255, .25);
}

.ckh-actions,
.ckh-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ckh-button-outline {
    border: 1px solid var(--ckh-border);
    background: transparent;
    color: var(--ckh-text);
}

.ckh-button-logout {
    border: 1px solid #FF5757;
    background: #FF5757;
    color: #fff !important;
}

.ckh-button-logout:hover,
.ckh-button-logout:focus,
.ckh-button-logout:active,
.ckh-button-logout:visited {
    color: #fff !important;
}

.ckh-button-logout:hover {
    background: #ff4444;
    border-color: #ff4444;
}

.ckh-button-primary {
    border: 1px solid #000000;
    background: #000000;
    color: #fff !important;
}

.ckh-button-primary:hover,
.ckh-button-primary:focus,
.ckh-button-primary:active,
.ckh-button-primary:visited {
    color: #fff !important;
}

.ckh-button-primary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.ckh-mobile {
    display: none;
}

.ckh-menu-empty {
    display: block;
    color: #b42318;
    font-size: 13px;
    text-align: center;
}

@media (max-width: 960px) {
    .ckh-desktop-outer {
        display: none;
    }

    .ckh-mobile {
        display: block;
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 8px;
        border: 1px solid rgba(124, 92, 255, .09);
        border-radius: 17px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 10px 28px var(--ckh-shadow);
    }

    .ckh-mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        padding-left: 5px;
    }

    .ckh-mobile .ckh-logo {
        font-size: 18px;
    }

    .ckh-mobile .ckh-logo-image {
        max-width: 200px;
        height: var(--ckh-logo-h-mobile, 34px);
    }

    .ckh-mobile-actions .ckh-button {
        min-height: 35px;
        padding: 0 12px;
        font-size: 12px;
    }

    .ckh-menu-toggle,
    .ckh-menu-close {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: var(--ckh-text);
        cursor: pointer;
    }

    .ckh-menu-toggle svg,
    .ckh-menu-close svg,
    .ckh-search-mobile button svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .ckh-search-wrap {
        position: relative;
        margin-top: 8px;
    }

    .ckh-search-wrap .ckh-search-panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 60;
        padding: 6px;
        border: 1px solid var(--ckh-border);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 16px 34px var(--ckh-shadow);
    }

    .ckh-search-wrap .ckh-search-results {
        margin-top: 0;
        max-height: 60vh;
    }

    .ckh-search-wrap .ckh-result-spark {
        display: none;
    }

    .ckh-search-mobile {
        height: 43px;
        padding-left: 12px;
        border-radius: 12px;
    }

    .ckh-search-mobile input {
        font-size: 16px;
    }

    .ckh-search-mobile button {
        width: 34px;
        min-height: 34px;
        padding: 0;
        border-radius: 10px;
    }

    .ckh-drawer-layer[hidden] {
        display: none;
    }

    .ckh-drawer-layer {
        position: fixed;
        inset: 0;
        z-index: 999999;
    }

    .ckh-drawer-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0;
        transition: opacity .25s ease;
    }

    .ckh-drawer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 390px);
        padding: 20px 18px;
        overflow-y: auto;
        border-radius: 22px 0 0 22px;
        background: var(--ckh-surface);
        box-shadow: -18px 0 45px rgba(31, 18, 42, .2);
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    }

    .ckh-drawer-layer.is-open .ckh-drawer {
        transform: translateX(0);
    }


    .ckh-drawer-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .ckh-menu-close {
        border: 1px solid var(--ckh-border);
        border-radius: 50%;
        background: var(--ckh-bg);
    }

    .ckh-mobile-banner {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding: 14px;
        border-radius: 18px;
        background: linear-gradient(135deg, #f1e9fb, #fbebf3);
    }

    .ckh-mobile-banner-icon {
        display: inline-grid;
        flex: 0 0 44px;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: linear-gradient(135deg, #8b6bff, #6a4bf0);
    }

    .ckh-mobile-banner-icon svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
    }

    .ckh-mobile-banner-text {
        display: grid;
        flex: 1;
        min-width: 0;
        gap: 1px;
    }

    .ckh-mobile-banner-title {
        color: var(--ckh-purple);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
    }

    .ckh-mobile-banner-subtitle {
        color: var(--ckh-muted);
        font-size: 12.5px;
        font-weight: 500;
    }

    .ckh-mobile-banner-arrow {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        fill: none;
        stroke: var(--ckh-muted);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .ckh-mobile-menu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 10px;
    }

    .ckh-mobile-menu-grid li {
        width: 100%;
    }

    .ckh-mobile-menu-grid a {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        color: var(--ckh-text);
        font-size: 14.5px;
        font-weight: 650;
    }

    .ckh-mobile-menu-icon {
        display: inline-grid;
        flex: 0 0 38px;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: var(--ckh-bg);
    }

    .ckh-mobile-menu-icon svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: var(--ckh-purple);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .ckh-mobile-menu-grid a:hover .ckh-mobile-menu-label,
    .ckh-mobile-menu-grid .current-menu-item > a .ckh-mobile-menu-label {
        color: var(--ckh-purple);
    }

    .ckh-mobile-menu-grid a:hover .ckh-mobile-menu-icon,
    .ckh-mobile-menu-grid .current-menu-item > a .ckh-mobile-menu-icon {
        background: #ece3fc;
    }

    .ckh-drawer-actions {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: 9px;
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px solid var(--ckh-border);
    }

    .ckh-drawer-actions .ckh-button {
        width: 100%;
    }

    body.ckh-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 390px) {
    .ckh-mobile-actions .ckh-button {
        display: none;
    }

    .ckh-mobile .ckh-logo-image {
        max-width: 105px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ckh-drawer,
    .ckh-drawer-backdrop,
    .ckh-button,
    .ckh-search button,
    .ckh-search-tab {
        transition: none;
    }
}


/* Area outside the open mobile drawer: the site stays visible behind a light dim. */
@media (max-width: 960px) {
    .ckh-header .ckh-drawer-layer {
        background: transparent !important;
        background-image: none !important;
    }
    .ckh-header .ckh-drawer-layer > .ckh-drawer-backdrop,
    .ckh-header .ckh-drawer-layer > .ckh-drawer-backdrop:hover,
    .ckh-header .ckh-drawer-layer > .ckh-drawer-backdrop:focus,
    .ckh-header .ckh-drawer-layer > .ckh-drawer-backdrop:active {
        background: rgba(24, 16, 34, .28) !important;
        background-image: none !important;
        opacity: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        cursor: pointer;
        transition: opacity .25s ease;
    }
    .ckh-header .ckh-drawer-layer.is-open > .ckh-drawer-backdrop {
        opacity: 1 !important;
    }
    .ckh-header .ckh-drawer-backdrop::before,
    .ckh-header .ckh-drawer-backdrop::after {
        content: none !important;
    }
}

/* ------------------------------------------------------------------
 * Handle under the search box: hides / shows the results again without
 * a new search. Double chevron: up = results open, down = results hidden.
 * Desktop: a small tab growing out of the bottom of the search tab — same
 * white, concave corners, shares the header's shadow, so it reads as part
 * of the box. Mobile: the chevrons sit inside the field.
 * ------------------------------------------------------------------ */
.ckh-header .ckh-search-toggle[hidden] {
    display: none !important;
}

.ckh-header .ckh-search-toggle {
    position: absolute;
    z-index: 6;
    display: inline-grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ckh-purple) !important;
    line-height: 0;
    cursor: pointer;
}

.ckh-header .ckh-search-toggle svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.ckh-search-toggle .ckh-chev-big {
    stroke-width: 2.4;
}

.ckh-search-toggle .ckh-chev-small {
    stroke-width: 2;
    opacity: .45;
    transition: transform .25s ease, opacity .25s ease;
}

.ckh-header .ckh-search-toggle:hover .ckh-chev-small,
.ckh-header .ckh-search-toggle:focus-visible .ckh-chev-small {
    opacity: .8;
    transform: translateY(-1.5px);
}

.ckh-header .is-collapsed > .ckh-search-toggle svg {
    transform: rotate(180deg);
}

/* Desktop tab. */
.ckh-header .ckh-search-tab > .ckh-search-toggle {
    --ckh-handle-r: 12px;
    bottom: -20px;
    left: 50%;
    width: 62px;
    height: 21px;
    padding-bottom: 1px !important;
    border-radius: 0 0 16px 16px !important;
    background: var(--ckh-card) !important;
    transform: translateX(-50%);
}

.ckh-header .ckh-search-tab > .ckh-search-toggle::before,
.ckh-header .ckh-search-tab > .ckh-search-toggle::after {
    content: "";
    position: absolute;
    top: 0;
    width: var(--ckh-handle-r);
    height: var(--ckh-handle-r);
    pointer-events: none;
}

.ckh-header .ckh-search-tab > .ckh-search-toggle::before {
    left: calc(-1 * var(--ckh-handle-r) + 1px);
    background: radial-gradient(circle at 0 100%, transparent calc(var(--ckh-handle-r) - .5px), var(--ckh-card) var(--ckh-handle-r));
}

.ckh-header .ckh-search-tab > .ckh-search-toggle::after {
    right: calc(-1 * var(--ckh-handle-r) + 1px);
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--ckh-handle-r) - .5px), var(--ckh-card) var(--ckh-handle-r));
}

.ckh-header .ckh-search-tab > .ckh-search-toggle svg {
    width: 20px;
    height: 20px;
    margin-top: -3px;
}

/* Mobile: inside the field, next to the search arrow. */
@media (max-width: 960px) {
    .ckh-header .ckh-search-wrap > .ckh-search-toggle {
        top: 5.5px;
        right: 46px;
        width: 32px;
        height: 32px;
        border-radius: 10px !important;
    }

    .ckh-header .ckh-search-wrap > .ckh-search-toggle:hover {
        background: rgba(124, 92, 255, .08) !important;
    }

    .ckh-search-wrap.has-toggle .ckh-search-mobile input {
        margin-right: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ckh-header .ckh-search-toggle svg,
    .ckh-search-toggle .ckh-chev-small {
        transition: none;
    }
}