coretex-dialog#searchBox[dialog-layout=light]{--dialogW:min(600px,100vw);--dialogMaxW:min(600px,100vw);& dialog{position:fixed !important;inset-block:0 !important;top:0 !important;bottom:0 !important;inset-inline-start:auto !important;inset-inline-end:0 !important;margin:0 !important;transform:none !important;height:100dvh !important;max-height:100dvh !important;width:var(--dialogW) !important;max-width:var(--dialogMaxW) !important}& dialog-wrapper{height:100% !important;margin:0 !important;top:0 !important;position:static !important}@media (max-width:777px){&{--dialogW:100%;--dialogMaxW:100%}}& *{scrollbar-width:none}& ::-webkit-scrollbar{display:none}& .search-header{position:relative;width:calc(100% + 4rem);margin-inline:-2rem;height:9.5rem;border-block-end:var(--globalBorder);flex-shrink:0}& .search-close-form{position:absolute;top:50%;right:3.5rem;left:auto;transform:translateY(-50%);margin:0;display:block}& .search-close{background:none;border:none;padding:0;margin:0;cursor:pointer;display:block;position:static}& .search-main{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}& search-engine,& predictive-search,& main-search{display:contents}& form.search{display:flex;flex-direction:column;min-height:0}& predictive-search[results="true"] form.search{flex:1}& .search-section{flex:1;min-height:0}& .search-title{padding: 2rem;margin:0;flex-shrink:0}& .search-icon-cell{display:none}& .search-input-stack{padding-block:1.5rem;margin-inline:var(--mardding,2rem);margin-block-start:1.5rem;flex-shrink:0}& .search-input-stack input[type=search]{font-size:1.8rem;border:none;outline:none;box-shadow:none;border-block-end:var(--globalBorder)}& .search-submit{display:flex;align-items:center;justify-content:center}& .reset__button{display:none !important}& #searchEmptyState{display:flex;flex-direction:column;flex:1;min-height:0;gap:2rem;}& #searchEmptyState>*{outline:none}& #predictive-search-results-groups-wrapper{}& :is(#predictive-search-queries.gs-title,.suggestedLinks .gs-title){text-align: left;border-block-end:none;padding:0;margin-block-end:.75rem;font-size:1.6rem;font-weight:400;text-transform:none;opacity:.6}& #predictive-search-results-queries-list li i{display:none}& #predictive-search-results-queries-list{padding:0 !important}& :is(.suggestedLinks a.button,.suggestion-link){all:unset;display:block;width:fit-content;text-decoration:underline;cursor:pointer;padding-block:.4rem;font-size:1.6rem}& mark{background:none;color:inherit;font-weight:inherit}& :is(.suggestedProducts,.o-products){width:100%;margin-block-start:auto;flex-shrink:0}& .o-products #predictive-search-results-products-list{width:100%}& :is(.suggestedProducts,.o-products) component-loader,& :is(.suggestedProducts,.o-products) hscroll-slider{display:block;width:100%}& :is(#predictive-search-products,.suggested_products_search){font-size:1.6rem;font-weight:700;opacity:1}& #predictive-search-option-search-keywords{display:none}& .hscroll-nav-wrap{position:relative;width:100%}& .hscroll-nav-wrap [hscroll-button-prev],& .hscroll-nav-wrap [hscroll-button-next]{position:absolute;top:50%;transform:translateY(-50%);width:3.2rem;height:3.2rem;border-radius:50%;background:none;box-shadow:none;display:flex;align-items:center;justify-content:center;z-index:2;padding:0}& .hscroll-nav-wrap [hscroll-button-prev]{left:.5rem}& .hscroll-nav-wrap [hscroll-button-next]{right:.5rem}& .hscroll-nav-wrap [hscroll-button-next] svg,& .hscroll-nav-wrap [hscroll-button-next] i,& .hscroll-nav-wrap [hscroll-button-next] path,& .hscroll-nav-wrap [hscroll-button-prev] svg,& .hscroll-nav-wrap [hscroll-button-prev] i,& .hscroll-nav-wrap [hscroll-button-prev] path{fill:var(--color,#111) !important;color:var(--color,#111) !important}& hscroll-slider:not([scrollable-left]) .hscroll-nav-wrap [hscroll-button-prev]{display:none}& hscroll-slider:not([scrollable-right]) .hscroll-nav-wrap [hscroll-button-next]{display:none}& #searchEmptyState .hscroll-nav-wrap [hscroll-button-next]{display:flex !important}& :is(.suggestedProducts,.o-products) product-card{outline:var(--globalBorder) !important}& :is(.suggestedProducts,.o-products) product-card .media{outline:none}}

/* Recommended products carousel: exactly 3 full cards on desktop, exactly 2 on
   mobile, no partial next card peeking, cards touching (no gap) with a single
   shared border between them — not separated by whitespace.

   Gap is set to var(--globalBorderWidth) (the theme's own border-thickness
   variable, ~1px) rather than 0: with true 0 gap two adjacent 1px outlines
   still each draw at the exact shared edge and can antialias into an
   uneven line depending on browser; matching the gap to the border width
   keeps the seam crisp and IS what makes it read as one border, not because
   the gap is invisible. The width formula subtracts that SAME variable so
   the two stay self-consistent and 3 cards still land exactly at the
   container edge with no 4th-card peek (see the math note further down for
   why the formula's gap value and the real applied gap must always match).

   Do not restore the 2rem/1rem gap from the earlier "less wide" pass — that
   combination (real gap + a full 4-sided outline per card) is what produced
   two visibly separate border lines with white space between them. Keep
   EITHER a real gap with no per-card outline (like the product-page default
   sliders), OR an outline with next-to-no gap (this). Do not mix the two.

   CRITICAL: the mobile ("-m") rule MUST stay inside a max-width media query.
   The grid element carries BOTH scroll-snap and scroll-snap-m classes at
   every viewport width, so an unscoped -m rule wins the cascade everywhere
   (source order beats the desktop rule even with matching !important). This
   has already regressed once when this file was edited elsewhere — don't
   drop this wrapper. */
#predictive-search-results-products-list x-grid.scroll-snap,
coretex-dialog#searchBox .suggestedProducts x-grid.scroll-snap{gap:var(--globalBorderWidth) !important}
#predictive-search-results-products-list x-grid.scroll-snap > *,
coretex-dialog#searchBox .suggestedProducts x-grid.scroll-snap > *{width:calc((100% - (2 * var(--globalBorderWidth))) / 3) !important}
@media (max-width: 777px) {
#predictive-search-results-products-list x-grid.scroll-snap-m,
coretex-dialog#searchBox .suggestedProducts x-grid.scroll-snap-m{gap:var(--globalBorderWidth) !important}
#predictive-search-results-products-list x-grid.scroll-snap-m > *,
coretex-dialog#searchBox .suggestedProducts x-grid.scroll-snap-m > *{width:calc((100% - var(--globalBorderWidth)) / 2) !important}
}

/* Grid-level border stays off: the base .product-grid class (s-sections.css)
   draws its own border-block-end along the bottom of the whole grid, which
   duplicates the last row of cards' own bottom border. The per-card outline
   above already frames every card on all 4 sides, so this one is redundant. */
#predictive-search-results-products-list x-grid.product-grid,
coretex-dialog#searchBox .suggestedProducts x-grid.product-grid{border-block-end:none !important}