/* Search page: the live filter window as a two-column page (filters left,
   the order summary right, sticky), as in the developer's search layout.
   The live stylesheet is in the `legacy` layer, so the page mode needs no
   !important to undo the window's fixed overlay. */
.search-page .search-head{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s4) var(--s8);align-items:end;padding-top:var(--s8)}
.search-page .search-back{grid-column:1/-1}
.search-page .search-back svg{transform:rotate(180deg)}
.search-page .search-title h1{font-size:var(--text-page);line-height:var(--lh-page)}
.search-page .search-title p{margin:var(--s2) 0 0;max-width:60ch}
.search-page .search-body{padding-block:var(--s8) var(--s12)}
.search-page .search-help{padding-bottom:var(--s16)}
/* the country field (base.css .select-wrap is not loaded on this page) */
.search-country{display:grid;gap:var(--s2);min-width:0}
.search-country label{font-weight:500;font-size:var(--text-label)}
.search-country .select-wrap{position:relative;min-width:0}
.search-country select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:var(--control-size);margin:0;
  padding:var(--s3) var(--s12) var(--s3) var(--s4);border:var(--rule) solid var(--control-rule);border-radius:var(--radius-control);
  background:var(--surface);color:var(--carbon);font:400 var(--text-body)/1.25 var(--font-body)}
.search-country .select-wrap svg{position:absolute;right:var(--s4);top:50%;width:var(--s4);height:var(--s4);transform:translateY(-50%);
  pointer-events:none;fill:none;stroke:currentColor;stroke-width:2}
@media(hover:hover){.search-country select:hover{border-color:var(--carbon)}}
.search-page .search-back,.search-page .search-help a{color:var(--carbon)}

#filterModal.page-mode{position:static;inset:auto;display:block;background:none;padding:0;opacity:1;visibility:visible;z-index:auto;overflow:visible;backdrop-filter:none}
#filterModal.page-mode .modal{position:static;transform:none;max-width:none;width:100%;max-height:none;height:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8);align-items:start;background:none;border:0;box-shadow:none;overflow:visible;margin:0}
#filterModal.page-mode .modal__header{display:none}
#filterModal.page-mode .modal__body{min-width:0;grid-column:1;grid-row:1;overflow:visible;max-height:none;padding:0;background:none}
#filterModal.page-mode .modal__footer{grid-column:2;grid-row:1;position:sticky;top:var(--s6);display:flex;flex-direction:column;
  align-items:stretch;gap:var(--s4);min-width:0;max-height:none;overflow:visible;padding:var(--s6);background:var(--surface);
  border:var(--rule) solid var(--border);border-radius:var(--radius-panel)}
#filterModal.page-mode .modal__footer::after{content:"";position:absolute;bottom:0;left:0;width:var(--panel-corner);height:var(--panel-corner);background:var(--lime);clip-path:polygon(0 0,100% 100%,0 100%)}
#filterModal.page-mode .estimate__count{font-size:var(--text-number);line-height:1.1}
#filterModal.page-mode .modal__footer-actions{display:flex;flex-direction:column;align-items:stretch;min-width:0;gap:var(--s3)}
#filterModal.page-mode .modal__footer-actions .btn{width:100%;min-width:0;max-width:100%;white-space:normal}
/* the "first rows on us" offer: text above its (secondary) action in the narrow panel */
#filterModal.page-mode .signup-gate{flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s4);text-align:left;
  background:var(--selection);border:var(--rule) solid var(--border);border-radius:var(--radius-control)}
#filterModal.page-mode .signup-gate__text{font-size:var(--text-label);font-weight:400;color:var(--carbon)}
@media(max-width:1023px){
  .search-page .search-head{grid-template-columns:minmax(0,1fr)}
  #filterModal.page-mode .modal{grid-template-columns:minmax(0,1fr)}
  /* Phone and tablet: a compact bar at the bottom of the screen with the count,
     the price and Order; the rest of the panel would cover the filters. */
  #filterModal.page-mode .modal__footer{grid-column:1;grid-row:2;position:sticky;bottom:0;top:auto;z-index:5;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4);
    border-radius:var(--radius-panel) var(--radius-panel) 0 0}
  #filterModal.page-mode .modal__footer .estimate{flex:1;min-width:0}
  #filterModal.page-mode .estimate__count{font-size:var(--text-section)}
  #filterModal.page-mode :is(.estimate__freshness,.filter-contact-box,#filterContactCta,#btnPreview,.filter-contact-cta){display:none}
  /* the free-rows offer keeps only its action, a full-width row under Order */
  #filterModal.page-mode .signup-gate{order:3;flex:1 1 100%;min-width:0;padding:0;background:none;border:0}
  #filterModal.page-mode .signup-gate__text{display:none}
  #filterModal.page-mode .signup-gate__btn{width:100%;min-height:var(--control-size-sm);font-size:var(--text-label)}
  #filterModal.page-mode .modal__footer-actions{flex:0 0 auto;flex-direction:row}
  #filterModal.page-mode .modal__footer-actions .btn{width:auto}
}

.search-page .search-start-hint{font-size:var(--text-label);color:var(--carbon);margin:var(--s1) 0 0}