/* 1) Ayusin ang main container ng properties kapag GRID VIEW (layout=card) */
#gn-mf-kvcore-listings-shell .kv-properties-container.kv-layout-card {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;   /* alisin yung -15px row margin */
  margin-right: 0 !important;
  left: 0 !important;
}

/* 2) Siguraduhin na naka-full width lang ang column ng listings */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-column {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3) Alisin ang extra padding sa loob ng listings container */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Gawing 3 cards per row, nasa gitna, may pantay na space sa sides */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  width: 100%;
  max-width: 1240px;          /* lapad ng 3 cards, para may space sa gilid */
  margin: 20px auto 16px;     /* auto = equal left/right space (centered) */
}

/* 5) Cards bilang grid items – hayaan silang mag-fill ng column nang maayos */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2
  .kv-property {
  height: 100%;
}

/* 6) Itago nang tuluyan ang map column sa GRID VIEW */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-map-column {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 960px;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 640px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

#gn-mf-kvcore-listings-shell 
.kv-property-listings.kv-grid-columns-2 .kv-property {
  width: auto !important;
  max-width: none !important;
}

/* 1) Centered shell: ang grid dapat nasa gitna ng page */
#gn-mf-kvcore-listings-shell .kv-properties-container.kv-layout-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) I-center ang listings container sa loob ng column */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings-container {
  width: 100% !important;
  max-width: 1240px !important;     /* lapad ng grid block */
  margin-left: auto !important;      /* equal space left/right */
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Gawing 3 columns ang grid wrapper, full width ng container */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px !important;
  margin-bottom: 16px !important;
}

/* 4) Neutralize ang "2 per row" width sa cards (hayaan silang mag-follow sa grid) */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2
  .kv-property.kv-per-row-2 {
  width: auto !important;
  max-width: none !important;
}

/* 5) Gawing 100% ng grid cell ang mismong card box */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2
  .kv-property.kv-per-row-2
  .kv-box {
  width: 100% !important;
  max-width: none !important;
}

/* 6) Siguraduhin na wala talagang map column sa GRID VIEW */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-map-column {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tablet – 2 cards per row */
@media (max-width: 1024px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 960px !important;
  }
}

/* Mobile – 1 card per row, full width */
@media (max-width: 640px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}
.kv-map-grey-area-filters {
    display: none;
}