/* EKCL Remove buttons styling */
#ekcl-compare-root .ekcl-header .ekcl-cell{position:relative}
.ekcl-drop{
  position:absolute; top:8px; right:8px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:12px; line-height:1; border-radius:999px;
  border:1px solid rgba(0,0,0,.1); background:#fff; color:#111; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.ekcl-drop svg{width:12px;height:12px}
.ekcl-drop:hover{background:#f8f8f8}
@media (max-width:640px){
  .ekcl-drop{top:6px; right:6px; padding:6px 8px; font-size:11px}
}

/* Make remove pill a bit more visible */
.ekcl-drop{ background:#fff; border:1px solid rgba(0,0,0,.15); box-shadow:0 6px 18px rgba(0,0,0,.12) }
.ekcl-drop:hover{ background:#fafafa }

/* Ensure header cells can anchor remove pill */
.ekcl-header .ekcl-cell.ekcl-title{ position: relative; }
.ekcl-header .ekcl-cell.ekcl-title .ekcl-drop{ background:#fff; border:1px solid rgba(0,0,0,.15); border-radius:999px; padding:6px 10px; display:inline-flex; gap:6px; align-items:center; box-shadow:0 6px 18px rgba(0,0,0,.12) }
.ekcl-header .ekcl-cell.ekcl-title .ekcl-drop svg{ width:12px; height:12px }

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