/* ==========================================================================
   Direction 01 - "Tighten"
   Same palette, same components. Fixes density, alignment and hierarchy on
   the search results screen, and puts the price where people are looking.
   Scoped to body.d01, which direction01.js adds - so this file is inert
   unless that script loads.
   ========================================================================== */

/* --- layout: give the results column the room, map becomes a toggle ------ */
/* Desktop only. Below 901px the results page has its own mobile map view
   (toggleMobileMapView swaps the list for a full-width map), and hiding
   .results-right here would win over it and stop the map appearing at all. */
@media (min-width: 901px){
  body.d01 .results-layout{ grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap:24px; }
  body.d01.d01-map-off .results-layout{ grid-template-columns: minmax(0,1fr); }
  body.d01.d01-map-off .results-right{ display:none; }
}

body.d01 .section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
body.d01 .d01-map-toggle{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--teal);
}
body.d01 .d01-map-toggle:hover{ text-decoration:underline; }
body.d01 .d01-map-toggle:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:3px; }

/* --- filters: one row, one baseline, one control style ------------------- */
body.d01 .filters-bar{
  display:grid;
  grid-template-columns: 132px minmax(200px,1fr) 118px auto;
  gap:20px; align-items:start;
  padding:14px 16px; margin-bottom:16px;
}
body.d01 .filters-bar .filter-field,
body.d01 .filters-bar .sort-bar{
  display:flex; flex-direction:column; justify-content:flex-end;
  margin:0; text-align:left; min-width:0;
}
body.d01 .filters-bar label{
  display:block; margin:0 0 6px; line-height:1.2;
  font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
body.d01 .filters-bar select,
body.d01 .filters-bar .price-box-row input{
  width:100%; height:38px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:8px; background:var(--card);
  padding:0 10px; font:inherit; font-size:13px; color:var(--ink);
}
/* Every filter is label-then-control, so the four labels sit on one line and
   the four controls on the next. The range slider refines the two boxes, so it
   hangs below them instead of making this field taller than its neighbours. */
body.d01 .price-slider-field{ display:flex; flex-direction:column; }
body.d01 .price-slider-field label{ order:0; }
body.d01 .price-slider-field .price-box-row{
  order:1;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  gap:8px; align-items:center; margin:0;
}
body.d01 .price-slider-field .price-slider-track-wrap{ order:2; margin:12px 2px 2px; }
body.d01 .price-box-row span{ font-size:11px; color:var(--ink-soft); }

body.d01 .sort-group{ display:flex; gap:6px; }

/* Nothing in this column may exceed its grid track, or it slides under the map. */
body.d01 .filters-bar > *{ min-width:0; }

/* With the map open the results column loses about 40% of its width, and the
   four-across filter row no longer fits. Two columns, with the price field
   spanning both, keeps every control inside the column. */
body.d01:not(.d01-map-off) .filters-bar{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
body.d01:not(.d01-map-off) .price-slider-field{ grid-column:1 / -1; }
body.d01 .sort-btn{ height:38px; padding:0 16px; border-radius:8px; font-size:13px; }

/* --- the teal bar that looked like a button, and wasn't ------------------ */
body.d01 .trust-banner{ display:none; }

/* --- the card ----------------------------------------------------------- */
body.d01 .listing-card{ padding:14px; border-radius:12px; }
body.d01 .listing-header-row{ display:none; }

body.d01 .listing-main-row{
  display:grid;
  grid-template-columns: 108px minmax(0,1fr) 148px;
  gap:16px; align-items:center;
}
body.d01 .centre-thumb{ width:108px; height:80px; border-radius:8px; overflow:hidden; }
body.d01 .centre-thumb img{ width:100%; height:100%; object-fit:cover; }

body.d01 .listing-body{ min-width:0; display:flex; flex-direction:column; gap:7px; }
body.d01 .d01-title{
  font-family:var(--serif); font-size:18px; font-weight:600; line-height:1.15;
  color:var(--ink); cursor:pointer;
}
body.d01 .d01-title:hover{ color:var(--teal); }
body.d01 .listing-loc{
  display:flex; align-items:center; gap:5px 10px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-soft); margin:0;
}
body.d01 .d01-cqc{ display:inline-flex; align-items:center; gap:4px; color:var(--ink-soft); }
body.d01 .d01-cqc svg{ color:var(--teal); flex-shrink:0; }

body.d01 .scan-type-pills{ display:flex; gap:5px; flex-wrap:wrap; margin:0; }
body.d01 .scan-pill{
  background:var(--card); color:var(--teal); border:1px solid #BBD3DC;
  font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px;
}

body.d01 .d01-links{ display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; }
body.d01 .listing-details-toggle,
body.d01 .listing-included{
  font-size:12px; color:var(--ink-soft); background:none; border:0; padding:0;
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
body.d01 .listing-details-toggle:hover,
body.d01 .listing-included:hover{ color:var(--teal); }

/* price + action share the right column */
body.d01 .listing-cta{
  display:flex; flex-direction:column; align-items:stretch; gap:10px; margin:0;
}
body.d01 .d01-price{ text-align:right; }
body.d01 .d01-price .d01-price-lab{
  display:block; font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:1px;
}
body.d01 .d01-price .d01-price-amt{
  font-family:var(--serif); font-size:27px; line-height:1.05; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
body.d01 .listing-cta-btn{
  width:100%; border-radius:8px; padding:10px 16px; font-size:13px; font-weight:600;
}
/* Compare is a secondary action: it belongs with the other secondary links,
   not wedged between the price and the primary button. */
body.d01 .compare-check-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--ink-soft); margin:0; cursor:pointer;
}
body.d01 .compare-check-label:hover{ color:var(--teal); }

@media (max-width: 900px){
  body.d01 .filters-bar{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* The results header already carries its own "Show map" control at this
     width, so the one added to the section head would be a second copy. */
  body.d01 .d01-map-toggle{ display:none; }
  body.d01 .section-head{ flex-wrap:wrap; }
  /* From/To need the full row here, or a four-figure ceiling gets clipped. */
  body.d01 .price-slider-field{ grid-column:1 / -1; }
  body.d01 .listing-main-row{ grid-template-columns: 84px minmax(0,1fr); }
  body.d01 .centre-thumb{ width:84px; height:64px; }
  body.d01 .listing-cta{
    grid-column:1 / -1; flex-direction:row; align-items:center;
    justify-content:space-between; gap:12px;
  }
  body.d01 .d01-price{ text-align:left; }
  body.d01 .listing-cta-btn{ width:auto; }
  body.d01 .compare-check-label{ order:-1; }
}