/* =========================================================
   Antivirus Compare - Mobile selector fix (ONLY THIS FILE)
   Goal: selector sits above RIGHT product, not overlapping.
   ========================================================= */

@media (max-width: 595px){

  /* 1) Parent: reference point + space for selector */
  section.tabs-grid.compare-products-with-toggle .we-col-10.dex{
    position: relative !important;
    padding-top: 84px !important; /* selector yüksekliğine göre: 84-110 arası oynar */
  }

  /* 2) Products: keep 2 cards side-by-side */
  section.tabs-grid.compare-products-with-toggle .we-col-10.dex > .we-col-two{
    width: 50% !important;
    box-sizing: border-box !important;
  }

  /* 3) Selector: absolute, but locked to RIGHT column area */
  section.tabs-grid.compare-products-with-toggle .we-col-10.dex > .we-col-two.select-box.for-mobile{
    display: block !important;
    position: absolute !important;

    /* right column box */
    right: 0 !important;
    left: 50% !important;
    width: 50% !important;

    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    z-index: 50 !important;
    min-height: auto !important;
  }

  /* 4) Make dropdown fill its box */
  section.tabs-grid.compare-products-with-toggle
  .we-col-10.dex > .we-col-two.select-box.for-mobile ul{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 5) Kill old global offsets that cause overlap */
  section.tabs-grid.compare-products-with-toggle .select-box{
    top: 0 !important; /* global -20px'i ez */
  }
}