:root{
  --ekcl-bg:#fff;
  --ekcl-muted:#666;
  --ekcl-border:#e5e7eb;
  --ekcl-label-bg:#f8fafc;
  --ekcl-radius:16px;
  --ekcl-pad:10px;
  --ekcl-cols:3; /* JS sets this to items length to prevent wrapping */
}
.ekcl-floating{position:fixed;right:16px;bottom:16px;z-index:9999}
.ekcl-floating-link{display:inline-block;padding:10px 14px;border-radius:999px;background:#111;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.ekcl-compare-page{max-width:100%;}
.ekcl-toolbar{position:relative;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.ekcl-toolbar button{border:1px solid var(--ekcl-border);background:#fff;padding:6px 10px;border-radius:12px;cursor:pointer;font-size:13px}
/* Share panel */
.ekcl-share-pop{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--ekcl-border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:8px;display:flex;gap:8px;z-index:1000;flex-wrap:wrap;max-width:min(100%,480px)}
.ekcl-share-pop a,.ekcl-share-pop button{border:1px solid var(--ekcl-border);background:#fff;padding:6px 10px;border-radius:10px;cursor:pointer;font-size:13px;text-decoration:none;color:#111;white-space:nowrap}

/* QR overlay */
.ekcl-qr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:10000}
.ekcl-qr-box{background:#fff;border-radius:16px;padding:16px 16px 10px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center}
.ekcl-qr-close{position:absolute;top:6px;right:8px;border:none;background:transparent;font-size:22px;cursor:pointer}
.ekcl-qr-img{width:240px;height:240px;display:block;margin:6px auto 8px;border-radius:8px;border:1px solid var(--ekcl-border)}
.ekcl-qr-caption{font-size:13px;color:#333}

/* Compare grid */
.ekcl-scroll{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
#ekcl-compare-root{min-width:calc(220px + (var(--ekcl-cols) * 240px));}
.ekcl-header,.ekcl-row{display:grid;grid-template-columns:220px repeat(var(--ekcl-cols), minmax(220px,1fr));gap:10px;border-bottom:1px solid var(--ekcl-border);padding:10px 0;align-items:start}
.ekcl-label{font-weight:700;position:sticky;left:0;background:var(--ekcl-label-bg);padding:var(--ekcl-pad);border-right:1px solid var(--ekcl-border);z-index:2}
.ekcl-cell{background:var(--ekcl-bg);padding:var(--ekcl-pad);border-radius:12px;border:1px solid var(--ekcl-border);overflow:hidden}
.ekcl-cell a{word-break:break-word;overflow-wrap:anywhere}
.ekcl-title{display:flex;flex-direction:column;gap:8px}
.ekcl-title img{width:100%;height:140px;object-fit:cover;border-radius:12px}
.ekcl-title a{word-break:break-word;overflow-wrap:anywhere}
.ekcl-titlelink{display:block;margin-top:6px;font-weight:600;word-break:break-word;overflow-wrap:anywhere}
.ekcl-empty{padding:24px;border:1px dashed var(--ekcl-border);border-radius:16px;text-align:center;margin:10px 0}
.ekcl-ico{margin-right:6px}
.ekcl-compare-btn{border:1px solid var(--ekcl-border);background:#fff;padding:6px 10px;border-radius:12px;cursor:pointer;font-size:13px}
.ekcl-compare-btn.ekcl-added{background:#16a34a;color:#fff;border-color:#16a34a}
.ekcl-hidden{display:none}

/* Website URL label — keep inside the box */
.ekcl-url{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mobile tweaks */
@media (max-width:768px){
  .ekcl-title img{height:130px}
}

/* Card mode + Edge-to-edge */
.ekcl-card-mode #ekcl-compare-root{min-width:0}
.ekcl-row[data-row="listing"]{display:none}
.ekcl-card-mode .ekcl-header{display:none}
.ekcl-card-mode .ekcl-row{display:block;border:none;padding:0;margin:0 0 14px}
.ekcl-card-mode .ekcl-row .ekcl-label{position:static;display:block;background:transparent;border:none;padding:0;margin:0 0 6px}
.ekcl-card-mode .ekcl-row .ekcl-cell{display:block;margin-bottom:6px}
.ekcl-card-mode .ekcl-row .ekcl-cell a{word-break:break-all}
.ekcl-card-mode .ekcl-row[data-row="listing"]{display:block}
.ekcl-card-mode .ekcl-row[data-row="listing"] .ekcl-cell{padding:0;border:none}
.ekcl-card-mode .ekcl-row[data-row="listing"] .ekcl-media{width:100%;height:180px;object-fit:cover;border-radius:14px}
.ekcl-card-mode .ekcl-row[data-row="listing"] .ekcl-titlelink{display:block;font-size:16px;margin-top:8px}

/* Edge-to-edge treatment */
.ekcl-card-mode.ekcl-edge .ekcl-scroll{padding:0}
.ekcl-card-mode.ekcl-edge .ekcl-row{margin:0 0 10px}
.ekcl-card-mode.ekcl-edge .ekcl-row .ekcl-cell{border-left:none;border-right:none;border-radius:0;padding-left:16px;padding-right:16px}
.rtl .ekcl-label{left:auto;right:0}


/* === EK Compare v1.3.1 — Mobile UI Enhancements (narrow first column) === */
@media (max-width:640px){
  .ekcl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* label col ~110px, item cols min 180px */
  .ekcl-row{grid-template-columns:110px repeat(var(--ekcl-cols), minmax(180px,1fr)) !important;gap:8px!important;}
  .ekcl-label{padding:6px 8px!important;font-size:12px!important;line-height:1.2;white-space:normal;word-break:break-word;border-right:1px dashed var(--ekcl-border);background:transparent;}
  .ekcl-cell{padding:8px!important;min-width:180px;word-break:break-word;}
  .ekcl-toolbar{gap:6px}.ekcl-toolbar button{padding:6px 8px;border-radius:10px;font-size:12px}
  /* Float button spacing */
  .ekcl-floating{right:12px;bottom:12px}
  .ekcl-floating-link{padding:10px 14px;border-radius:999px}
}


/* === EK Compare v1.3.1 — Mobile UI (alignment + sticky label overlay) === */
@media (max-width:640px){
  /* Make header and rows share the same grid so images align with columns */
  .ekcl-header{grid-template-columns:110px repeat(var(--ekcl-cols), minmax(180px,1fr)) !important; gap:8px!important;}
  .ekcl-row{grid-template-columns:110px repeat(var(--ekcl-cols), minmax(180px,1fr)) !important;}

  /* Keep the first column (labels/titles) above scrolled fields */
  .ekcl-header .ekcl-label,
  .ekcl-row .ekcl-label{
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ekcl-label-bg);
  }

  /* Ensure scrolled cells pass under the label column */
  .ekcl-cell{z-index:1; position:relative}

  /* Image sizing inside the title cells for consistent alignment */
  .ekcl-title{display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .ekcl-title img{display:block;width:100%;height:130px;object-fit:cover;border-radius:12px}
}


/* === EKCL Buttons — CSS-only uniform rectangle style (regen 20250915193949) === */
:root {
  --ekcl-primary: var(--rtcl-primary-color, #00c194);
  --ekcl-primary-600: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196));
  --ekcl-lite-primary: var(--rtcl-lite-primary-color, #eaf7f2);
  --ekcl-danger: #ef4444;
  --ekcl-danger-600: #dc2626;
  --ekcl-lite-danger: #fee2e2;
}
.ekcl-toolbar .ekcl-share,
.ekcl-toolbar .ekcl-add-more,
.ekcl-toolbar .ekcl-add-new,
.ekcl-toolbar .ekcl-print,
.ekcl-toolbar .ekcl-screenshot,
.ekcl-toolbar .ekcl-clear,
.ekcl-compare-btn,
.ekcl-floating-link {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  background: var(--ekcl-lite-primary) !important;
  color: var(--ekcl-primary) !important;
  border: 1px solid var(--ekcl-primary) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.ekcl-toolbar .ekcl-share:hover,
.ekcl-toolbar .ekcl-add-more:hover,
.ekcl-toolbar .ekcl-add-new:hover,
.ekcl-toolbar .ekcl-print:hover,
.ekcl-toolbar .ekcl-screenshot:hover,
.ekcl-compare-btn:hover,
.ekcl-floating-link:hover,
.ekcl-toolbar .ekcl-share:active,
.ekcl-toolbar .ekcl-add-more:active,
.ekcl-toolbar .ekcl-add-new:active,
.ekcl-toolbar .ekcl-print:active,
.ekcl-toolbar .ekcl-screenshot:active,
.ekcl-compare-btn:active,
.ekcl-floating-link:active,
.ekcl-toolbar .ekcl-share:focus-visible,
.ekcl-toolbar .ekcl-add-more:focus-visible,
.ekcl-toolbar .ekcl-add-new:focus-visible,
.ekcl-toolbar .ekcl-print:focus-visible,
.ekcl-toolbar .ekcl-screenshot:focus-visible,
.ekcl-compare-btn:focus-visible,
.ekcl-floating-link:focus-visible {
  background: var(--ekcl-primary) !important;
  color: #fff !important;
  border-color: var(--ekcl-primary-600) !important;
}
.ekcl-compare-btn.ekcl-added {
  background: var(--ekcl-primary) !important;
  color: #fff !important;
  border-color: var(--ekcl-primary-600) !important;
}
.ekcl-toolbar .ekcl-clear {
  background: var(--ekcl-lite-danger) !important;
  color: var(--ekcl-danger) !important;
  border-color: var(--ekcl-danger) !important;
}
.ekcl-toolbar .ekcl-clear:hover,
.ekcl-toolbar .ekcl-clear:active,
.ekcl-toolbar .ekcl-clear:focus-visible {
  background: var(--ekcl-danger) !important;
  color: #fff !important;
  border-color: var(--ekcl-danger-600) !important;
}



/* === Toolbar toggle buttons match 'Share' (20250915195051) === */
:root {
  --ekcl-primary: var(--rtcl-primary-color, #00c194);
  --ekcl-primary-600: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196));
  --ekcl-lite-primary: var(--rtcl-lite-primary-color, #eaf7f2);
}

.ekcl-toolbar .ekcl-toggle-empty,
.ekcl-toolbar .ekcl-toggle-view {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--ekcl-lite-primary) !important;
  color: var(--ekcl-primary) !important;
  border: 1px solid var(--ekcl-primary) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.ekcl-toolbar .ekcl-toggle-empty:hover,
.ekcl-toolbar .ekcl-toggle-view:hover,
.ekcl-toolbar .ekcl-toggle-empty:active,
.ekcl-toolbar .ekcl-toggle-view:active,
.ekcl-toolbar .ekcl-toggle-empty:focus-visible,
.ekcl-toolbar .ekcl-toggle-view:focus-visible {
  background: var(--ekcl-primary) !important;
  color: #fff !important;
  border-color: var(--ekcl-primary-600) !important;
}


/* === Toolbar buttons match 'Share' (r3 20250915195650) === */
:root {
  --ekcl-primary: var(--rtcl-primary-color, #00c194);
  --ekcl-primary-600: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196));
  --ekcl-lite-primary: var(--rtcl-lite-primary-color, #eaf7f2);
}

/* Style every toolbar control except Share & Clear All */
.ekcl-toolbar :is(button, a, .button, .btn):not(.ekcl-share):not(.ekcl-clear),
.ekcl-toolbar > :is(button, a, .button, .btn):not(.ekcl-share):not(.ekcl-clear),
.ekcl-toolbar .ekcl-toggle-empty,
.ekcl-toolbar .ekcl-toggle-view {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--ekcl-lite-primary) !important;
  color: var(--ekcl-primary) !important;
  border: 1px solid var(--ekcl-primary) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
/* Hover / focus / active to match Share */
.ekcl-toolbar :is(button, a, .button, .btn):not(.ekcl-share):not(.ekcl-clear):hover,
.ekcl-toolbar :is(button, a, .button, .btn):not(.ekcl-share):not(.ekcl-clear):active,
.ekcl-toolbar :is(button, a, .button, .btn):not(.ekcl-share):not(.ekcl-clear):focus-visible,
.ekcl-toolbar .ekcl-toggle-empty:hover,
.ekcl-toolbar .ekcl-toggle-empty:active,
.ekcl-toolbar .ekcl-toggle-empty:focus-visible,
.ekcl-toolbar .ekcl-toggle-view:hover,
.ekcl-toolbar .ekcl-toggle-view:active,
.ekcl-toolbar .ekcl-toggle-view:focus-visible {
  background: var(--ekcl-primary) !important;
  color: #fff !important;
  border-color: var(--ekcl-primary-600) !important;
}

/* Optional: filled look when a toggle is .is-active/.active */
.ekcl-toolbar .ekcl-toggle-view.is-active,
.ekcl-toolbar .ekcl-toggle-view.active,
.ekcl-toolbar .ekcl-toggle-empty.is-active,
.ekcl-toolbar .ekcl-toggle-empty.active {
  background: var(--ekcl-primary) !important;
  color: #fff !important;
  border-color: var(--ekcl-primary-600) !important;
}


/* === Toolbar new buttons follow Share style (20250915200403) === */
.ekcl-toolbar .ekcl-add-more,
.ekcl-toolbar .ekcl-add-new,
.ekcl-toolbar .ekcl-print,
.ekcl-toolbar .ekcl-screenshot {
  background: var(--rtcl-lite-primary-color, #eaf7f2) !important;
  color: var(--rtcl-primary-color, #00c194) !important;
  border: 1px solid var(--rtcl-primary-color, #00c194) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.ekcl-toolbar .ekcl-add-more:hover,
.ekcl-toolbar .ekcl-add-new:hover,
.ekcl-toolbar .ekcl-print:hover,
.ekcl-toolbar .ekcl-screenshot:hover {
  background: var(--rtcl-primary-color, #00c194) !important;
  color: #fff !important;
  border-color: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196)) !important;
}


/* === Functional buttons styling sync (20250915201103) === */
.ekcl-header .ekcl-cell .ekcl-drop{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--ekcl-danger, #ef4444);
  background:#fff;
  color:var(--ekcl-danger, #ef4444);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.ekcl-header .ekcl-cell .ekcl-drop:hover{
  background:var(--ekcl-danger, #ef4444);
  color:#fff;
  border-color:var(--ekcl-danger-600, #dc2626);
}

/* Back to comparison floater for multi-add */
.ekcl-back-to-compare{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: var(--rtcl-lite-primary-color, #eaf7f2);
  color: var(--rtcl-primary-color, #00c194);
  border: 1px solid var(--rtcl-primary-color, #00c194);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ekcl-back-to-compare:hover,
.ekcl-back-to-compare:active,
.ekcl-back-to-compare:focus-visible{
  background: var(--rtcl-primary-color, #00c194);
  color: #fff;
  border-color: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196));
}

/* AUTO-APPENDED (LIST VIEW BOTTOM ROW) */

/* === PATCH: List view card bottom row for Compare button (mobile) === */
@media (max-width: 768px){
  .ekcl-bottom-row{
    display:block !important;
    width:100% !important;
    margin-top: 8px !important;
  }
  /* Make the moved button full-width */
  .ekcl-bottom-row .ekcl-overlay-btn,
  .ekcl-bottom-row .ekcl-compare-btn,
  .ekcl-bottom-row .ekv9-btn,
  .ekcl-bottom-row a[class*="compare"]{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }
}

/* AUTO-APPENDED: GRID FULL-WIDTH MOBILE */

/* === PATCH: Grid view — make compare button full-width on mobile ================ */
@media (max-width: 768px){
  /* Generic listing card wrappers (Radius Directory/RTCL variants) */
  .rtcl-widget-listing-item .ekcl-overlay-btn,
  .rtcl-widget-listing-item .ekcl-compare-btn,
  .rtcl-widget-listing-item .ekv9-btn,
  .rtcl-widget-listing-item a[href*="compare"],
  .rtcl-listing-item .ekcl-overlay-btn,
  .rtcl-listing-item .ekcl-compare-btn,
  .rtcl-listing-item .ekv9-btn,
  .rtcl-listing-item a[href*="compare"],
  .listing-item .ekcl-overlay-btn,
  .listing-item .ekcl-compare-btn,
  .listing-item .ekv9-btn,
  .listing-item a[href*="compare"],
  .ekv9-card .ekcl-overlay-btn,
  .ekv9-card .ekcl-compare-btn,
  .ekv9-card .ekv9-btn,
  .ekv9-card a[href*="compare"]{
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    align-self: stretch !important;
  }
  /* If any overlay styles were positioning the button, neutralize on mobile */
  .rtcl-widget-listing-item .ekcl-overlay-btn,
  .rtcl-listing-item .ekcl-overlay-btn,
  .listing-item .ekcl-overlay-btn,
  .ekv9-card .ekcl-overlay-btn{
    position: static !important;
    right: auto !important;
    bottom: auto !important;
  }
}

/* AUTO-APPENDED: GRID BOTTOM ROW + DIVIDER */

/* === PATCH: GRID view — bottom row + tiny divider on mobile ==================== */
@media (max-width: 768px){
  .ekcl-bottom-divider{
    border-top: 1px solid var(--ekcl-border);
    margin-top: 8px;
    opacity: 0.75;
  }
  .ekcl-bottom-row{
    display:block !important;
    width:100% !important;
    margin-top: 8px !important;
  }
  /* Any compare button inside the bottom row becomes full width */
  .ekcl-bottom-row .ekcl-overlay-btn,
  .ekcl-bottom-row .ekcl-compare-btn,
  .ekcl-bottom-row .ekv9-btn,
  .ekcl-bottom-row a[href*="compare"]{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    align-self:stretch !important;
  }
  /* Neutralize overlay positioning on mobile */
  .rtcl-widget-listing-item .ekcl-overlay-btn,
  .rtcl-listing-item .ekcl-overlay-btn,
  .listing-item .ekcl-overlay-btn,
  .ekv9-card .ekcl-overlay-btn{
    position: static !important;
    right: auto !important;
    bottom: auto !important;
  }
}

/* AUTO-APPENDED: DESKTOP BELOW-PRICE ROBUST + FLOAT LINK KEEP */

/* === PATCH: Desktop/Laptop — put compare button below the price strip ========== */
@media (min-width: 992px){
  .ekcl-below-price-divider{ border-top:1px solid var(--ekcl-border); opacity:.8; margin-top:10px; }
  .ekcl-below-price-row{
    display:block; width:100%; margin-top:10px;
  }
  .ekcl-below-price-row .ekcl-overlay-btn,
  .ekcl-below-price-row .ekcl-compare-btn,
  .ekcl-below-price-row .ekv9-btn,
  .ekcl-below-price-row a[href*="compare"]{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    margin:0 !important;
    vertical-align:middle;
  }
}

/* SAFETY: keep the floating "Compare Now" link solid + icon, in case any override changed it */
a.ekcl-floating-link{
  display:inline-flex !important; align-items:center; gap:8px;
  background: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
  color: var(--rtcl-button-color, #ffffff) !important;
  border: 1px solid var(--rtcl-primary-color, #00c194) !important;
  border-radius: 12px !important; padding:10px 16px !important;
  font-weight:600 !important; text-decoration:none !important; fill: currentColor !important;
}
a.ekcl-floating-link:hover{ background: var(--rtcl-button-hover-bg-color, var(--ekcl-primary-600, #07c196)) !important; }
a.ekcl-floating-link::before{
  content:""; width:1em; height:1em; display:inline-block;
  --ekcl-compare-icon:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
<path d='M8 3h9a2 2 0 0 1 2 2v9h-2V5H8V3zM5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2zm0 2v9h9v-9H5z'/>\
</svg>");
  background-color: currentColor;
  -webkit-mask-image: var(--ekcl-compare-icon); mask-image: var(--ekcl-compare-icon);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

/* AUTO-APPENDED: CONSOLIDATED LIST+GRID DESKTOP FIX */

/* === CONSOLIDATED: Desktop/laptop placement below price for both list & grid === */
@media (min-width: 992px){
  .ekcl-below-price-divider{ border-top:1px solid var(--ekcl-border); opacity:.8; margin-top:10px; }
  .ekcl-below-price-row{ display:block; width:100%; margin-top:10px; }

  /* Ensure any previously overlay-positioned button behaves inline in the new row */
  .ekcl-below-price-row .ekcl-overlay-btn,
  .ekcl-below-price-row .ekcl-compare-btn,
  .ekcl-below-price-row .ekv9-btn,
  .ekcl-below-price-row a[href*="compare"]{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    margin:0 !important;
    vertical-align:middle;
  }

  /* In case themes add absolute buttons in right column, neutralize absolute positioning globally for desktop when inside our row */
  .rtcl-widget-listing-item .ekcl-overlay-btn,
  .rtcl-listing-item .ekcl-overlay-btn,
  .listing-item .ekcl-overlay-btn{
    /* only affect when already moved into our row (position reset happens above) */
  }
}

/* Keep floating Compare Now style intact (solid + icon) */
a.ekcl-floating-link{
  display:inline-flex !important; align-items:center; gap:8px;
  background: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194)) !important;
  color: var(--rtcl-button-color, #ffffff) !important;
  border: 1px solid var(--rtcl-primary-color, #00c194) !important;
  border-radius: 12px !important; padding:10px 16px !important;
  font-weight:600 !important; text-decoration:none !important; fill: currentColor !important;
}
a.ekcl-floating-link:hover{ background: var(--rtcl-button-hover-bg-color, var(--ekcl-primary-600, #07c196)) !important; }
a.ekcl-floating-link::before{
  content:""; width:1em; height:1em; display:inline-block;
  --ekcl-compare-icon:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'>\
<path d='M8 3h9a2 2 0 0 1 2 2v9h-2V5H8V3zM5 8h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2zm0 2v9h9v-9H5z'/>\
</svg>");
  background-color: currentColor;
  -webkit-mask-image: var(--ekcl-compare-icon); mask-image: var(--ekcl-compare-icon);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

/* AUTO-APPENDED: LIST VIEW BELOW PRICE (PRECISE) */

/* === LIST VIEW (desktop): place compare button into a new row BELOW price ====== */
@media (min-width: 992px){
  .rtcl-listing-card.listing-item.rtcl-listing-item .item-content .ekcl-below-price-divider{
    border-top:1px solid var(--ekcl-border);
    opacity:.8;
    margin-top:10px;
  }
  .rtcl-listing-card.listing-item.rtcl-listing-item .item-content .ekcl-below-price-row{
    display:block;
    width:100%;
    margin-top:10px;
  }
  .rtcl-listing-card.listing-item.rtcl-listing-item .item-content .ekcl-below-price-row .ekcl-compare-btn,
  .rtcl-listing-card.listing-item.rtcl-listing-item .item-content .ekcl-below-price-row .ekcl-overlay-btn,
  .rtcl-listing-card.listing-item.rtcl-listing-item .item-content .ekcl-below-price-row .ekv9-btn,
  .rtcl-listing-card.listing-item.rtcl-listing-item .item-content .ekcl-below-price-row a[href*="compare"]{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    margin:0 !important;
    vertical-align:middle;
  }
}


/* === EKCL UI PATCH — 2025-09-18 (v35 UI-ONLY) ===
   Goals:
   - Narrow, uniform "Add to Compare" button
   - Remove top/bottom extra spaces around the button
   - Keep button left-aligned in cards (grid & list)
   - Keep toolbar buttons right-aligned; make "Clear All" red text
   - Stick the compare button to the very bottom of the card for row alignment
*/

/* Make the card content a vertical flex container so footer row can stick to bottom */
.rtcl-listing-item .item-content,
.rtcl-widget-listing-item .item-content,
.listing-item.rtcl-listing-item .item-content{
  display: flex;
  flex-direction: column;
}

/* Footer row: no extra spacing; push to bottom */
.item-content .ekcl-after-divider-row{
  margin-top: auto !important;   /* stick to bottom */
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* left align */
  gap: 0;
}

/* Narrow, uniform button dimensions (inherit RTCL palette) */
.item-content .ekcl-after-divider-row .ekcl-compare-btn{
  height: 36px;
  line-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  margin: 0;
  background: var(--rtcl-lite-primary-color, #eaf7f2);
  color: var(--rtcl-primary-color, #00c194);
  border: 1px solid var(--rtcl-primary-color, #00c194);
  box-sizing: border-box;
}

/* When added */
.item-content .ekcl-after-divider-row .ekcl-compare-btn.ekcl-added{
  background: var(--rtcl-primary-color, #00c194);
  color: #fff;
  border-color: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196));
}

/* Remove any stray margins around overlay/injected buttons */
.rtcl-listing-item .ekcl-overlay-btn,
.rtcl-listing-item .ekcl-compare-btn,
.rtcl-widget-listing-item .ekcl-overlay-btn,
.rtcl-widget-listing-item .ekcl-compare-btn{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Toolbar remains right-aligned by default; make Clear All text red */
.ekcl-toolbar .ekcl-clear{
  color: var(--rtcl-danger-color, #dc2626) !important;
  border-color: var(--rtcl-danger-color, #dc2626) !important;
  background: transparent !important;
}

/* Small screens: keep the card button width auto (narrow), still aligned left */
@media (max-width: 768px){
  .item-content .ekcl-after-divider-row .ekcl-compare-btn{
    min-width: 0;
    max-width: 100%;
  }
}
/* === End UI PATCH 2025-09-18 === */



/* === EKCL UI PATCH — 2025-09-18 v2 (Match RTCL “Show Phone Number” style; no outline) ===
   - Filled button using RTCL button vars
   - No border/outline; subtle focus ring only
   - Hover/active states mirror RTCL
*/
:root{
  /* fallbacks only (theme vars take precedence if present) */
  --ekcl-btn-bg: var(--rtcl-button-bg-color, var(--rtcl-primary-color, #00c194));
  --ekcl-btn-text: var(--rtcl-button-text-color, #ffffff);
  --ekcl-btn-bg-hover: var(--rtcl-button-hover-bg-color, var(--rtcl-secondary-color, #07c196));
  --ekcl-btn-text-hover: var(--rtcl-button-hover-text-color, #ffffff);
  --ekcl-focus-ring: color-mix(in srgb, var(--rtcl-primary-color, #00c194) 40%, white);
}

/* Base style applied anywhere the button happens to render */
.ekcl-compare-btn{
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  border: none !important;              /* no outline */
  background: var(--ekcl-btn-bg) !important;
  color: var(--ekcl-btn-text) !important;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}

/* Preferred placement row (still left-aligned & bottom-stuck due to v1 patch) */
.item-content .ekcl-after-divider-row .ekcl-compare-btn{ min-width: 160px; }

/* Hover/active */
.ekcl-compare-btn:hover{ background: var(--ekcl-btn-bg-hover) !important; color: var(--ekcl-btn-text-hover) !important; }
.ekcl-compare-btn:active{ transform: translateY(1px); }

/* Focus – subtle focus ring similar to RTCL */
.ekcl-compare-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ekcl-focus-ring);
}

/* Added state — keep solid filled look */
.ekcl-compare-btn.ekcl-added{
  background: var(--ekcl-btn-bg-hover) !important;
  color: var(--ekcl-btn-text-hover) !important;
  border: none !important;
}

/* Keep toolbar Clear All emphasized in red */
.ekcl-toolbar .ekcl-clear{
  color: var(--rtcl-danger-color, #dc2626) !important;
  background: transparent !important;
  border: none !important;
}

/* Mobile width behavior: stay compact but allow full width if needed */
@media (max-width: 768px){
  .item-content .ekcl-after-divider-row .ekcl-compare-btn{ min-width: 0; width: auto; max-width: 100%; }
}
/* === End UI PATCH v2 === */



/* Replace Modal */
.ekcl-modal{ position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index:99999; }
.ekcl-modal.open{ display:flex; }
.ekcl-modal-content{ background:#fff; width:min(540px, 92vw); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); overflow:hidden; }
.ekcl-modal-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eee; }
.ekcl-modal-head h3{ margin:0; font-size:16px; }
.ekcl-modal-close{ background:none; border:none; font-size:20px; line-height:1; cursor:pointer; }
.ekcl-modal-body{ max-height:50vh; overflow:auto; padding:12px 16px; }
.ekcl-modal-list{ list-style:none; margin:0; padding:0; }
.ekcl-modal-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #f1f1f1; }
.ekcl-modal-list .ekcl-li-title{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.ekcl-modal-list .ekcl-replace{ background:var(--ekcl-btn-bg, var(--ekcl-btn-bg-color, #00c194)); color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
.ekcl-modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #eee; }
.ekcl-modal-foot .ekcl-cancel{ background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; cursor:pointer; }
/* Plain text warn (mixed categories) */
.ekcl-plain-warn{ margin:10px 0; font-size:14px; color:#b45309; background:#fff7ed; padding:8px 10px; border:1px solid #fed7aa; border-radius:8px; }


/* Big + sign for Add New Listing */



/* === List View Button Font Fix (force 16/24) === */
.rtcl-list-view .ekcl-compare-btn{
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  height: 40px !important;
  min-width: 160px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* Share submenu items for Screenshot/Print */
.ekcl-share-pop .ekcl-share-item{
  display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; cursor:pointer;
}
.ekcl-share-pop .ekcl-share-item:hover{ background: rgba(0,0,0,.04); }
.ekcl-share-pop .ekcl-ico{ display:inline-block; width:1em; height:1em; margin-right:8px; }


/* Big plus icon styling for toolbar buttons using <i class="fas fa-plus"> */
.ekcl-toolbar a i.fa-plus,
.ekcl-toolbar button i.fa-plus,
.ekcl-toolbar .ekcl-add-multi i.fa-plus,
.ekcl-toolbar .ekcl-add-new i.fa-plus{
  font-size:28px;
  line-height:1;
  font-weight:800;
  display:inline-block;
  margin-right:.35em;
  vertical-align:-2px;
  color: var(--ekcl-primary, var(--rtcl-primary-color, #00c194));
}

/* Toolbar: Add New Listing icon */
.ekcl-toolbar .ekcl-add-new i.fa-plus{
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--ekcl-primary, var(--rtcl-primary-color, #00c194));
}

/* Fix overlap: big + before "Add New Listing" without covering first letter */

/* Toolbar: Add New Listing inline icon */
.ekcl-toolbar .ekcl-add-new i.fa-plus{
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
  color: var(--ekcl-primary, var(--rtcl-primary-color, #00c194));
}

/* Unify Add to Compare / Added button typography */
.ekcl-compare-btn{
  font-size: 16px !important;
  line-height: 24px !important;
}

/* === HARD OVERRIDE: make Compare button outline-only to match RTCL phone reveal === */
:root body .ekcl-compare-btn,
:root body .ekcl-compare-btn.ekcl-added{
  /* Typography */
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: var(--rtcl-button-font-size, 16px) !important;
  font-weight: var(--rtcl-button-font-weight, 400) !important;
  text-transform: var(--rtcl-button-text-transform, none) !important;
  letter-spacing: var(--rtcl-button-letter-spacing, normal) !important;
  line-height: var(--rtcl-button-line-height, 24px) !important;

  /* Box */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--rtcl-button-padding-block, 8px) var(--rtcl-button-padding-inline, 14px) !important;
  min-height: var(--rtcl-button-height, 40px) !important;
  border-radius: var(--rtcl-button-radius, 12px) !important;
  box-sizing: border-box !important;

  /* Outline-only */
  background: transparent !important;
  background-image: none !important;
  color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  border: 1px solid var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  box-shadow: none !important;
}

/* Subtle hover/focus to mimic RTCL */
:root body .ekcl-compare-btn:hover,
:root body .ekcl-compare-btn:focus{
  background: rgba(0,0,0,0.02) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* === Color effects to mirror RTCL ghost/outline behaviour === */
:root{
  /* Fallback RGB for primary if theme doesn't expose one */
  --ekcl-primary-rgb: 0, 193, 148;
}
:root body .ekcl-compare-btn,
:root body .ekcl-compare-btn.ekcl-added{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover/Focus: soft tint like RTCL phone button */
:root body .ekcl-compare-btn:hover,
:root body .ekcl-compare-btn:focus{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), 0.08) !important;
  border-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Active/Pressed: slightly stronger tint */
:root body .ekcl-compare-btn:active{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), 0.14) !important;
  border-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
}

/* Keyboard focus ring */
:root body .ekcl-compare-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--ekcl-primary-rgb, 0,193,148), .18) !important;
}

/* Disabled states */
:root body .ekcl-compare-btn[disabled],
:root body .ekcl-compare-btn[aria-disabled="true"],
:root body .ekcl-compare-btn.is-disabled{
  background: transparent !important;
  color: rgba(var(--ekcl-primary-rgb, 0,193,148), .50) !important;
  border-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .35) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1 !important; /* keep crisp outline */
}

/* === Stateful color scheme for Compare (inactive = light; active = solid) === */
:root{
  --ekcl-primary-rgb: 0, 193, 148; /* fallback */
}

/* Inactive (default): light RTCL tint + primary outline + primary text */
:root body .ekcl-compare-btn{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), 0.08) !important;
  color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  border: 1px solid var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover: slightly stronger tint */
:root body .ekcl-compare-btn:hover,
:root body .ekcl-compare-btn:focus{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), 0.14) !important;
  outline: none !important;
}

/* Active state = .ekcl-added: SOLID fill with RTCL primary, white text */
:root body .ekcl-compare-btn.ekcl-added{
  background-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  color: #fff !important;
  border-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
}

/* Keep icon inside readable on solid fill */
:root body .ekcl-compare-btn.ekcl-added i{ color:#fff !important; fill:#fff !important; }

/* Focus ring for accessibility */
:root body .ekcl-compare-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--ekcl-primary-rgb, 0,193,148), .18) !important;
}

/* Disabled look */
:root body .ekcl-compare-btn[disabled],
:root body .ekcl-compare-btn[aria-disabled="true"],
:root body .ekcl-compare-btn.is-disabled{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .06) !important;
  color: rgba(var(--ekcl-primary-rgb, 0,193,148), .45) !important;
  border-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .35) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* === Toolbar buttons: apply same style/effects as Compare === */

/* Base variables */
:root{
  --ekcl-primary-rgb: 0,193,148; /* fallback for primary */
  --ekcl-danger-rgb: 220,38,38;  /* fallback for danger */
}

/* Toolbar primary group (exclude .ekcl-clear which is red) */
.ekcl-toolbar .ekcl-add-more-to-compare,
.ekcl-toolbar .ekcl-toggle-empty,
.ekcl-toolbar .ekcl-toggle-view{
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: var(--rtcl-button-font-size, 16px) !important;
  font-weight: var(--rtcl-button-font-weight, 400) !important;
  text-transform: var(--rtcl-button-text-transform, none) !important;
  letter-spacing: var(--rtcl-button-letter-spacing, normal) !important;
  line-height: var(--rtcl-button-line-height, 24px) !important;

  display:inline-flex !important; align-items:center; justify-content:center;
  padding: var(--rtcl-button-padding-block, 8px) var(--rtcl-button-padding-inline, 14px) !important;
  min-height: var(--rtcl-button-height, 40px) !important;
  border-radius: var(--rtcl-button-radius, 12px) !important;
  box-sizing: border-box;

  color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .08) !important;
  border: 1px solid var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  box-shadow:none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ekcl-toolbar .ekcl-add-more-to-compare:hover,
.ekcl-toolbar .ekcl-toggle-empty:hover,
.ekcl-toolbar .ekcl-toggle-view:hover,
.ekcl-toolbar .ekcl-add-more-to-compare:focus,
.ekcl-toolbar .ekcl-toggle-empty:focus,
.ekcl-toolbar .ekcl-toggle-view:focus{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .14) !important;
  outline:none !important;
}
/* ACTIVE states: make solid fill when toggled on */
.ekcl-toolbar .ekcl-toggle-empty[data-state="hide"],
.ekcl-toolbar .ekcl-toggle-view[data-view^="card"]{
  background-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  color:#fff !important;
  border-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
}
.ekcl-toolbar .ekcl-toggle-empty[data-state="hide"] i,
.ekcl-toolbar .ekcl-toggle-view[data-view^="card"] i{ color:#fff !important; fill:#fff !important; }

/* === Clear All: red scheme === */
.ekcl-toolbar .ekcl-clear{
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: var(--rtcl-button-font-size, 16px) !important;
  font-weight: var(--rtcl-button-font-weight, 400) !important;
  text-transform: var(--rtcl-button-text-transform, none) !important;
  letter-spacing: var(--rtcl-button-letter-spacing, normal) !important;
  line-height: var(--rtcl-button-line-height, 24px) !important;

  display:inline-flex !important; align-items:center; justify-content:center;
  padding: var(--rtcl-button-padding-block, 8px) var(--rtcl-button-padding-inline, 14px) !important;
  min-height: var(--rtcl-button-height, 40px) !important;
  border-radius: var(--rtcl-button-radius, 12px) !important;
  box-sizing: border-box;

  color: var(--rtcl-danger-color, #dc2626) !important;
  background-color: rgba(var(--ekcl-danger-rgb, 220,38,38), .08) !important;
  border: 1px solid var(--rtcl-danger-color, #dc2626) !important;
  box-shadow:none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ekcl-toolbar .ekcl-clear:hover,
.ekcl-toolbar .ekcl-clear:focus{
  background-color: rgba(var(--ekcl-danger-rgb, 220,38,38), .14) !important;
  outline:none !important;
}
/* Pressed visual */
.ekcl-toolbar .ekcl-clear:active{
  background-color: var(--rtcl-danger-color, #dc2626) !important;
  color:#fff !important;
  border-color: var(--rtcl-danger-color, #dc2626) !important;
}

/* === FORCE APPLY: Toolbar buttons & Compare Now floating link === */
:root body .ekcl-toolbar .ekcl-add-more-to-compare,
:root body .ekcl-toolbar .ekcl-toggle-empty,
:root body .ekcl-toolbar .ekcl-toggle-view,
:root body #ekcl-floating-compare a.ekcl-floating-link{
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: var(--rtcl-button-font-size, 16px) !important;
  font-weight: var(--rtcl-button-font-weight, 400) !important;
  text-transform: var(--rtcl-button-text-transform, none) !important;
  letter-spacing: var(--rtcl-button-letter-spacing, normal) !important;
  line-height: var(--rtcl-button-line-height, 24px) !important;

  display:inline-flex !important; align-items:center; justify-content:center;
  padding: var(--rtcl-button-padding-block, 8px) var(--rtcl-button-padding-inline, 14px) !important;
  min-height: var(--rtcl-button-height, 40px) !important;
  border-radius: var(--rtcl-button-radius, 12px) !important;
  box-sizing: border-box;

  color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .08) !important;
  border: 1px solid var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  box-shadow:none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
:root body .ekcl-toolbar .ekcl-add-more-to-compare:hover,
:root body .ekcl-toolbar .ekcl-toggle-empty:hover,
:root body .ekcl-toolbar .ekcl-toggle-view:hover,
:root body #ekcl-floating-compare a.ekcl-floating-link:hover,
:root body .ekcl-toolbar .ekcl-add-more-to-compare:focus,
:root body .ekcl-toolbar .ekcl-toggle-empty:focus,
:root body .ekcl-toolbar .ekcl-toggle-view:focus,
:root body #ekcl-floating-compare a.ekcl-floating-link:focus{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .14) !important;
  outline:none !important;
}
/* Active states: for toggle buttons */
:root body .ekcl-toolbar .ekcl-toggle-empty[data-state="hide"],
:root body .ekcl-toolbar .ekcl-toggle-view[data-view^="card"]{
  background-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  color:#fff !important;
  border-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
}
:root body .ekcl-toolbar .ekcl-toggle-empty[data-state="hide"] i,
:root body .ekcl-toolbar .ekcl-toggle-view[data-view^="card"] i{ color:#fff !important; fill:#fff !important; }

/* Clear All stays red (if present) */
:root body .ekcl-toolbar .ekcl-clear{
  color: var(--rtcl-danger-color, #dc2626) !important;
  background-color: rgba(var(--ekcl-danger-rgb, 220,38,38), .08) !important;
  border: 1px solid var(--rtcl-danger-color, #dc2626) !important;
}

/* === FIX: Unify toolbar font sizes & correct Compare Now color effects === */
:root{
  --ekcl-primary-rgb: 0,193,148;
  --ekcl-danger-rgb: 220,38,38;
}

/* 1) Toolbar buttons — force consistent typography (16/24) */
:root body .ekcl-toolbar .ekcl-add-more-to-compare,
:root body .ekcl-toolbar .ekcl-toggle-empty,
:root body .ekcl-toolbar .ekcl-toggle-view{
  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  text-transform: var(--rtcl-button-text-transform, none) !important;
  letter-spacing: normal !important;
}

/* 2) Compare Now (floating link) — outline + stateful colors */
:root body #ekcl-floating-compare a.ekcl-floating-link{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  box-sizing: border-box !important;

  font-family: var(--rt-body-font, Lato, sans-serif) !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  text-transform: var(--rtcl-button-text-transform, none) !important;
  letter-spacing: normal !important;

  min-height: var(--rtcl-button-height, 40px) !important;
  padding: var(--rtcl-button-padding-block, 8px) var(--rtcl-button-padding-inline, 14px) !important;
  border-radius: var(--rtcl-button-radius, 12px) !important;

  color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .08) !important;
  border: 1px solid var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  box-shadow: none !important;
  text-decoration: none !important;

  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
:root body #ekcl-floating-compare a.ekcl-floating-link:hover,
:root body #ekcl-floating-compare a.ekcl-floating-link:focus{
  background-color: rgba(var(--ekcl-primary-rgb, 0,193,148), .14) !important;
  outline: none !important;
}
:root body #ekcl-floating-compare a.ekcl-floating-link:active{
  background-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
  color: #fff !important;
  border-color: var(--rtcl-primary-color, var(--rtcl-primary, #00c194)) !important;
}
:root body #ekcl-floating-compare a.ekcl-floating-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--ekcl-primary-rgb, 0,193,148), .18) !important;
}

/* Keep Clear All red scheme intact (from earlier rules) */

/* === EKCL patch: Clear All hover only (solid red + white text) === */
.ekcl-toolbar .ekcl-clear:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}
.ekcl-toolbar .ekcl-clear:hover .ico {
  color: #ffffff !important;
}

/* === EKCL patch: Enlarge X remove button === */
.ekcl-remove {
  font-size: 24px !important;
  font-weight: bold;
  line-height: 1;
  width: auto;
  height: auto;
  padding: 2px 6px;
}

/* === EKCL patch: Header remove button icon-only & larger X === */
.ekcl-header .ekcl-drop span { 
  display: none !important; /* hide 'Remove' text */
}
.ekcl-header .ekcl-drop svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.5 !important;
}
/* Slightly increase clickable target without changing layout */
.ekcl-header .ekcl-drop { 
  padding: 6px !important;
}

/* === EKCL OPT1D: Check icon on "Added" compare buttons === */
.ekcl-compare-btn.ekcl-added::before,
button[data-ekcl-compare].ekcl-added::before {
  content: "✓";
  display: inline-block;
  margin-right: .4em;
  transform: translateY(-1px);
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1;
}
.ekcl-compare-btn.ekcl-added,
button[data-ekcl-compare].ekcl-added {
  display: inline-flex;
  align-items: center;
}