#algolia_results{position:absolute;top:0;visibility:visible;opacity:1;z-index:4;
/*background:#fff;border-bottom:1px solid #e0e0e0 */}
.suggestion-header{text-transform:uppercase;font-weight:600;padding-bottom:10px;color:#126283;padding-top:10px}

/*#brand-container .suggestion-header{padding-top:10px}*/

#products-container a{display:flex;text-decoration:none}#products-container img{width:60px;height:60px}#products-container .suggestion-item{padding-left:8px}#brand-container a,#categ-container a{text-decoration:none}.suggestion-item{color:#333}.suggestion-item em{color:#000;font-weight:600}.algoliaProdGrid:hover,.brandGrid:hover,.categGrid:hover{background:#f0f0f0}.algoliaProdGrid{border-top:1px solid #ece5e5}

.brand_search_col{
    background:#fff;
    border-radius: 0 0 0 6px;
}
.product_search_col{
    background:#fff;
    border-radius: 0 0 6px 0;
}
@media (max-width:768px){
    .search_display{
        flex-direction: column-reverse;
    }
}
/* center the 9-col results block without changing its width */
@media (min-width: 992px){
  #algolia_results .search_display{
    position: relative;
    transform: translateX(-4.1667%); /* shift left by 0.5 Bootstrap column */
  }
}
/* results panel scroll (desktop + mobile) */
#algolia_results .brand_search_col .suggestion-container,
#algolia_results .product_search_col .suggestion-container{
  overflow-y: auto;
}

/* desktop: cap height to viewport */
@media (min-width: 992px){
  #algolia_results .brand_search_col .suggestion-container,
  #algolia_results .product_search_col .suggestion-container{
    max-height: calc(100vh - 120px); /* JS will refine this exactly */
  }
}

/* mobile/tablet: stacked layout already; cap product column */
@media (max-width: 991.98px){
  #algolia_results .product_search_col .suggestion-container{
    max-height: calc(100vh - 140px);
  }
}
/* ===== Search dropdown polish (desktop + mobile) ===== */

/* no horizontal scrollbar anywhere in the panel */
#algolia_results .brand_search_col .suggestion-container,
#algolia_results .product_search_col .suggestion-container{
  overflow-y: auto;
  overflow-x: hidden;
}

/* shorter panel height */
@media (min-width: 992px){
  #algolia_results .brand_search_col .suggestion-container,
  #algolia_results .product_search_col .suggestion-container{
    max-height: calc(100vh - 400px); /* a bit less tall than before */
  }

  /* make the whole block slightly narrower & stay centered */
  #algolia_results .search_display{
    width: clamp(880px, 72vw, 1200px);  /* reduce width slightly, still responsive */
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-4.1667%);    /* keep the 2|9|1 grid centering compensation */
  }
}

/* mobile/tablet – keep capped, slightly shorter too */
@media (max-width: 991.98px){
  #algolia_results .product_search_col .suggestion-container{
    max-height: calc(100vh - 180px);
  }
}

/* clean dividers */
#algolia_results .brand_search_col .suggestion-container{
  border-right: 1px solid #e9ecef;      /* full-height vertical divider */
}
#algolia_results .product_search_col .suggestion-container .suggestion-item{
  border-bottom: 1px solid #f1f3f5;     /* tidy row separators */
}
#algolia_results .product_search_col .suggestion-container .suggestion-item:last-child{
  border-bottom: none;
}
/* Slightly reduce dropdown width on desktop (keep centering & layout) */
@media (min-width: 992px){
  #algolia_results .search_display{
    width: calc(100% - 32px) !important; /* ~16px inset on each side */
    /* existing transform:-4.1667% stays intact from previous rule */
  }
}
/* ==== Mobile results polish: brands on top (collapsed) & no stray gaps ==== */
@media (max-width: 991.98px){

  /* hide the side brands column; we'll show a mobile header instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* mobile brands collapsible */
  #algolia_results details.mob-brands{ 
    display:block; 
    border-bottom:1px solid #e9ecef;
    background:#fff;
  }
  #algolia_results details.mob-brands > summary{
    list-style:none;
    cursor:pointer;
    padding:10px 12px;
    font-weight:700;
    letter-spacing:.02em;
    position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands[open] > summary{ border-bottom:1px solid #e9ecef; }

  /* scrollable brand list inside the collapsible */
  #algolia_results details.mob-brands #brand-container{
    max-height:240px; overflow:auto; padding:8px 12px;
  }

  /* defensive: make sure the panel itself has no extra top gap */
  #algolia_results{ margin-top:0 !important; }
}
/* ===== Mobile overlay: full-height panel under the search bar ===== */
@media (max-width: 991.98px){
  /* lock page behind the overlay when open */
  body.no-scroll{ overflow: hidden !important; }

  /* the results container becomes a fixed overlay */
  #algolia_results{
    position: fixed;
    left: 0; right: 0;
    top: var(--algolia-top, 0px);             /* set by JS */
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    margin-top: 0 !important;
  }

  /* make the inner row span full width on mobile */
  #algolia_results .search_display{
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* we hide the side brands column; we'll render a collapsible header instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* collapsible BRANDS block that sits above products */
  #algolia_results details.mob-brands{
    display: block;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
  }
  #algolia_results details.mob-brands > summary{
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 700;
    letter-spacing: .02em;
    position: sticky; top: 0; z-index: 2;
    background: #fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }

  /* brand list inside the collapsible */
  #algolia_results details.mob-brands #brand-container{
    max-height: 240px; overflow: auto; padding: 8px 12px;
  }

  /* products panel takes the remainder of the overlay height (set by JS too) */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y: auto; overflow-x: hidden;
    max-height: 100%;
  }
}
@media (max-width: 991.98px){
  #algolia_results{
    position: fixed;
    left: 0; right: 0;
    top: var(--algolia-top, 0px);
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    margin-top: 0 !important;
  }
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
  }
}
/* ===== Mobile overlay, full height & collapsible brands ===== */
@media (max-width: 991.98px){
  body.no-scroll{ overflow: hidden !important; }

  #algolia_results{
    position: fixed;
    left: 0; right: 0;
    top: var(--algolia-top, 0px);
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    margin-top: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  #algolia_results .search_display{
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* old side brands hidden; we inject a collapsible instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* collapsible brands */
  #algolia_results details.mob-brands{ display:block; border-bottom:1px solid #e9ecef; background:#fff; }
  #algolia_results details.mob-brands > summary{
    list-style:none; cursor:pointer; font-weight:700; letter-spacing:.02em;
    padding:10px 12px; position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands #brand-container{ max-height:240px; overflow:auto; padding:8px 12px; }

  /* products panel scrolls; no horizontal bar */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
  }
}
/* ===== Mobile overlay: full-height panel + collapsible brands ===== */
@media (max-width: 991.98px){
  body.no-scroll{ overflow: hidden !important; }

  /* Overlay (fixed) sits directly under the search bar */
  #algolia_results{
    position: fixed;
    left: 0; right: 0;
    top: var(--algolia-top, 0px);                /* set by JS */
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    margin-top: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  /* Full width row; cancel desktop centering/transform on mobile */
  #algolia_results .search_display{
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Hide side brands column; we inject a collapsible instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* Collapsible brands header placed above products */
  #algolia_results details.mob-brands{ display:block; border-bottom:1px solid #e9ecef; background:#fff; }
  #algolia_results details.mob-brands > summary{
    list-style:none; cursor:pointer; font-weight:700; letter-spacing:.02em;
    padding:10px 12px; position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands #brand-container{ max-height:240px; overflow:auto; padding:8px 12px; }

  /* Products panel scrolls; no horizontal bar */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
  }
}
/* ===== MOBILE OVERLAY: full-height under the search bar + collapsible brands ===== */
@media (max-width: 991.98px){
  /* prevent the page behind from scrolling while overlay is open */
  body.no-scroll{ overflow: hidden !important; }

  /* overlay (fixed) sits directly under the search bar */
  #algolia_results{
    position: fixed;
    left: 0; right: 0;
    top: var(--algolia-top, 0px);                /* JS sets this exactly */
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    margin-top: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  /* full width row; cancel desktop centering on mobile */
  #algolia_results .search_display{
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* old side brands column hidden; we'll inject a collapsible instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* collapsible BRANDS header we insert above products */
  #algolia_results details.mob-brands{ display:block; border-bottom:1px solid #e9ecef; background:#fff; }
  #algolia_results details.mob-brands > summary{
    list-style:none; cursor:pointer; font-weight:700; letter-spacing:.02em;
    padding:10px 12px; position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands #brand-container{ max-height:240px; overflow:auto; padding:8px 12px; }

  /* products pane scrolls; kill horizontal bar */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
  }
}
/* ===== Mobile overlay: full-height under the search bar + stable scroll ===== */
@media (max-width: 991.98px){
  body.no-scroll{ overflow: hidden !important; }

  #algolia_results{
    position: fixed !important;             /* force over any earlier absolute */
    left: 0; right: 0;
    top: var(--algolia-top, 0px);           /* set by JS */
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    will-change: top, height;               /* reduces the “jump” on mobile chrome resize */
  }

  /* cancel desktop centering on mobile */
  #algolia_results .search_display{
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* hide the side brands column; we’ll inject a collapsible instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* collapsible brands (will be injected above products) */
  #algolia_results details.mob-brands{
    display:block;
    border-bottom:1px solid #e9ecef;
    background:#fff;
  }
  #algolia_results details.mob-brands > summary{
    list-style:none; cursor:pointer; font-weight:700; letter-spacing:.02em;
    padding:10px 12px; position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands #brand-container{
    max-height:240px; overflow:auto; padding:8px 12px;
    -webkit-overflow-scrolling: touch;      /* makes it scroll immediately on iOS */
  }

  /* products pane scrolls; kill horizontal bar; smooth touch scroll */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
    -webkit-overflow-scrolling: touch;      /* fixes “no scroll until touch” */
  }
}
@media (max-width: 991.98px){
  body.no-scroll{ overflow: hidden !important; }

  #algolia_results{
    position: fixed !important;
    left: 0; right: 0;
    top: var(--algolia-top, 0px);
    height: calc(100vh - var(--algolia-top, 0px));
    z-index: 1050;
    background: #fff;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    will-change: top, height;
  }

  #algolia_results .search_display{
    width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* hide side brands; we inject a collapsible instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* collapsible brands (above products) */
  #algolia_results details.mob-brands{
    display:block;
    border-bottom:1px solid #e9ecef;
    background:#fff;
  }
  #algolia_results details.mob-brands > summary{
    list-style:none; cursor:pointer; font-weight:700; letter-spacing:.02em;
    padding:10px 12px; position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands #brand-container{
    max-height:240px; overflow:auto; padding:8px 12px;
    -webkit-overflow-scrolling: touch;
  }

  /* products pane scrolls; no horizontal bar */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
    -webkit-overflow-scrolling: touch;
  }
}
/* --- MOBILE overlay fixes: full height, flush under bar, stable scroll --- */
@media (max-width: 991.98px){
  body.no-scroll{ overflow:hidden !important; }

  #algolia_results{
    position:fixed !important;        /* override any earlier absolute */
    left:0; right:0;
    top:var(--algolia-top,0px);       /* set from JS */
    height:calc(100vh - var(--algolia-top,0px));
    z-index:1050;
    background:#fff;
    margin:0 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    will-change:top,height;
  }

  /* cancel desktop centering on mobile */
  #algolia_results .search_display{
    width:100% !important;
    transform:none !important;
    margin:0 !important;
  }

  /* side brands hidden; we inject a collapsible instead */
  #algolia_results .brand_search_col{ display:none !important; }

  /* collapsible BRANDS placed above products */
  #algolia_results details.mob-brands{ display:block; border-bottom:1px solid #e9ecef; background:#fff; }
  #algolia_results details.mob-brands > summary{
    list-style:none; cursor:pointer; font-weight:700; letter-spacing:.02em;
    padding:10px 12px; position:sticky; top:0; z-index:2; background:#fff;
  }
  #algolia_results details.mob-brands > summary::-webkit-details-marker{ display:none; }
  #algolia_results details.mob-brands #brand-container{
    max-height:240px; overflow:auto; padding:8px 12px;
    -webkit-overflow-scrolling:touch;
  }

  /* products pane: its own scroll; no horizontal bar */
  #algolia_results .product_search_col .suggestion-container{
    overflow-y:auto; overflow-x:hidden; max-height:100%;
    -webkit-overflow-scrolling:touch;
  }
}
@media (max-width: 991.98px){
  /* Chevron indicator for the collapsible header */
  #algolia_results details.mob-brands > summary{
    display:flex; align-items:center; justify-content:space-between;
  }
  #algolia_results details.mob-brands > summary::after{
    content:""; width:10px; height:10px;
    border-right:2px solid #333; border-bottom:2px solid #333;
    transform: rotate(-45deg); transition: transform .2s ease;
    margin-left:8px;
  }
  #algolia_results details.mob-brands[open] > summary::after{
    transform: rotate(135deg);
  }
}
@media (max-width: 991.98px){
  /* inside the collapsible, hide the inner header to avoid "BRANDS" twice */
  #algolia_results details.mob-brands #brand-container .suggestion-header{
    display: none !important;
  }
}