/* ============================================================
   s6m-search — RS-parity light-mode visual system
   Single source of truth for tokens + components.
   All selectors scoped to .s6m-* to avoid bleeding into theme.
   ============================================================ */

:root {
  /* palette */
  --s6m-bg: #ffffff;
  --s6m-bg2: #f7f7f7;
  --s6m-ink: #111111;
  --s6m-muted: #777777;
  --s6m-line: #e5e5e5;
  --s6m-accent: #111111;
  --s6m-discount: #ef4444;
  --s6m-instock: #16a34a;
  --s6m-overlay: rgba(0, 0, 0, 0.5);
  --s6m-hover-bg: #fafafa;

  /* radii + shadow */
  --s6m-radius: 4px;
  --s6m-pill-radius: 999px;
  --s6m-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* z-indices — must sit above Shopify's privacy banner (z-index:2000000)
     and any storefront app embeds. The search experience is the topmost
     UI when active. */
  --s6m-z-overlay: 2000001;
  --s6m-z-input: 2000002;
  --s6m-z-dropdown: 2000003;

  /* typography */
  --s6m-font-display: var(--font-heading, Georgia, 'Times New Roman', serif);
  --s6m-font-body: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --s6m-text-xs: 11px;
  --s6m-text-sm: 13px;
  --s6m-text-md: 14px;
  --s6m-text-lg: 15px;
  --s6m-text-xl: 28px;

  /* motion */
  --s6m-transition: 200ms cubic-bezier(0.2, 0, 0.2, 1);

  /* header-search dimensions */
  --s6m-header-h: 80px;
  --s6m-header-search-w-idle: 305px;
  --s6m-header-search-w-focus: min(90vw, 1280px);
  --s6m-header-search-h-idle: 44px;
  --s6m-header-search-h-focus: 60px;
  --s6m-header-search-bg-idle: #f5f5f5;
  --s6m-header-search-bg-focus: #ffffff;
  --s6m-header-search-icon-size: 16px;
  --s6m-header-search-placeholder: #8a8a8a;

  /* results page */
  --s6m-sidebar-w: 280px;
  --s6m-grid-gap: 24px;
  --s6m-card-min: 240px;
}

/* ============================================================
   utilities
   ============================================================ */

.s6m-hidden { display: none !important; }
.s6m-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   HEADER SEARCH — idle inline rectangle, focus expands inline
   ============================================================ */

.s6m-header-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--s6m-header-search-w-idle);
  height: var(--s6m-header-search-h-idle);
  background: var(--s6m-header-search-bg-idle);
  border-radius: var(--s6m-radius);
  border: 0;
  padding: 0;
  margin: 0;
  z-index: var(--s6m-z-input);
  transition:
    width var(--s6m-transition),
    height var(--s6m-transition),
    background-color var(--s6m-transition);
  font-family: var(--s6m-font-body);
}

.s6m-header-search__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: var(--s6m-header-search-icon-size);
  height: var(--s6m-header-search-icon-size);
  color: var(--s6m-muted);
  pointer-events: none;
  transform: translateY(-50%) translateX(0);
  transition: transform var(--s6m-transition), left var(--s6m-transition), right var(--s6m-transition);
}

.s6m-header-search__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.s6m-header-search__input {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0 16px 0 40px;
  font-family: var(--s6m-font-body);
  font-size: var(--s6m-text-md);
  color: var(--s6m-ink);
  -webkit-appearance: none;
  appearance: none;
  transition: padding var(--s6m-transition);
}

.s6m-header-search__input::placeholder {
  color: var(--s6m-header-search-placeholder);
  font-weight: 400;
}

.s6m-header-search__input::-webkit-search-cancel-button { display: none; }

/* focused / expanded state */
.s6m-header-search--focused {
  width: var(--s6m-header-search-w-focus);
  height: var(--s6m-header-search-h-focus);
  background: var(--s6m-header-search-bg-focus);
  box-shadow: 0 1px 0 var(--s6m-line);
}

.s6m-header-search--focused .s6m-header-search__icon {
  /* slide from left to right inside the expanded input */
  left: auto;
  right: 18px;
}

.s6m-header-search--focused .s6m-header-search__input {
  padding: 0 48px 0 20px;
  font-size: var(--s6m-text-lg);
}

/* ============================================================
   OVERLAY — translucent dim under expanded input, anchored below header
   ============================================================ */

.s6m-overlay {
  position: fixed;
  inset: 0;
  top: var(--s6m-header-h);
  background: var(--s6m-overlay);
  z-index: var(--s6m-z-overlay);
  opacity: 0;
  pointer-events: none;
  /* Frosted-glass dim: the page stays visible but strongly blurred behind
     the open search. Blur is transitioned alongside opacity — backdrop-filter
     applies even at opacity:0, so without its own from→to values it would
     snap on before the fade. */
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity var(--s6m-transition),
    backdrop-filter var(--s6m-transition),
    -webkit-backdrop-filter var(--s6m-transition);
}

.s6m-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* When the header search is open, lock background scroll so the dropdown
   can never follow its anchor offscreen and hide Shopify's privacy banner
   (z-index 2,000,000) which would otherwise overpaint the bottom of the
   product results.
   BODY-FIXED lock, not overflow:hidden on <html> — the overflow clamp reset
   the scroll position to 0 on open, and that jump flipped Horizon's sticky
   header state machine (data-scroll-direction / data-sticky-state), whose
   re-render stole focus and self-collapsed the search ~1s after opening
   whenever the shopper had scrolled. activate() sets body.style.top to
   -scrollY so the page freezes exactly in place; collapse() restores it. */
body.s6m-header-search-open {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden;
  touch-action: none;
  /* Reserve the root scrollbar's width (set by activate()) so the page
     doesn't shift horizontally when the fixed body drops the scrollbar. */
  padding-right: var(--s6m-sbw, 0px) !important;
}

/* Pin the whole header section to the viewport while search is open. The
   revealed search row lives INSIDE Horizon's sticky header, which un-pins
   itself when scrolling down — without this rule the open search bar could
   sit off-screen (opened while scrolled / keyboard resize on phones):
   "the search bar was not even there to type into". Fixed = immune to the
   theme's sticky logic for the whole time search is open. */
html.s6m-header-search-open .header-section {
  position: fixed !important;
  /* Live offset captured at open (below the announcement bar at page top,
     0 when scrolled past it) — a hardcoded 0 covered the announce bar and
     visibly jumped the header on open. */
  top: var(--s6m-pin-top, 0px) !important;
  left: 0 !important;
  /* Match the scrollbar compensation on the locked body so header content
     stays column-aligned with the page behind the dim. */
  right: var(--s6m-sbw, 0px) !important;
  z-index: 300 !important;
}

body.s6m-header-search-open #shopify-pc__banner,
body.s6m-header-search-open shopify-privacy-banner {
  visibility: hidden !important;
}

/* Horizon's <header-component> ships with `contain: layout style` which
   traps any position:fixed descendant to the header's box instead of the
   viewport. Free it so the dropdown / overlay / mobile sheet measure
   against the real viewport. (Pinned by [[feedback_horizon_contain_layout_traps_fixed]].) */
header-component,
.shopify-section-group-header-group,
.shopify-section[id*='header'] {
  contain: none !important;
}

/* ============================================================
   PREDICTIVE DROPDOWN — two column, light, anchored under input
   ============================================================ */

.s6m-dropdown {
  /* Body-appended, JS sets exact top/left/width via getBoundingClientRect.
     Use position:fixed so the dropdown stays anchored on scroll. */
  position: fixed;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  background: var(--s6m-bg);
  border-radius: var(--s6m-radius);
  box-shadow: var(--s6m-shadow);
  z-index: var(--s6m-z-dropdown);
  display: none;
  font-family: var(--s6m-font-body);
  color: var(--s6m-ink);
}

.s6m-dropdown.is-open { display: block; }

.s6m-dropdown__grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 32px;
  padding: 24px;
  position: relative;
}

/* vertical 1px divider between columns */
.s6m-dropdown__grid::before {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 35%;
  width: 1px;
  background: var(--s6m-line);
  transform: translateX(-16px);
  pointer-events: none;
}

.s6m-dropdown__col { min-width: 0; }

.s6m-dropdown__col-label {
  font-size: var(--s6m-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s6m-muted);
  font-weight: 500;
  margin: 0 0 16px 0;
}

/* left column — popular searches as plain text links */
.s6m-dropdown__popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.s6m-dropdown__popular-link {
  display: block;
  color: var(--s6m-ink);
  font-size: var(--s6m-text-lg);
  line-height: 24px;
  font-weight: 400;
  text-decoration: none;
  padding: 4px 0;
  transition: color 120ms ease;
}

.s6m-dropdown__popular-link:hover,
.s6m-dropdown__popular-link:focus {
  text-decoration: underline;
  color: var(--s6m-ink);
}

/* RELEVANT CATEGORIES variant — RS-style ">" arrow on the right */
.s6m-dropdown__popular-link--arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.s6m-dropdown__popular-link--arrow::after {
  content: "›";
  color: var(--s6m-muted);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 120ms ease;
}
.s6m-dropdown__popular-link--arrow:hover::after,
.s6m-dropdown__popular-link--arrow:focus::after {
  transform: translateX(2px);
}

.s6m-dropdown__col-spacer {
  height: 20px;
}

/* right column — trending product rows */
.s6m-dropdown__products {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.s6m-dropdown__product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 8px;
  border-radius: var(--s6m-radius);
  text-decoration: none;
  color: var(--s6m-ink);
  transition: background-color 120ms ease;
}

.s6m-dropdown__product-row:hover { background: var(--s6m-hover-bg); }

.s6m-dropdown__product-thumb {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--s6m-radius);
  overflow: hidden;
  background: var(--s6m-bg2);
}

.s6m-dropdown__product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s6m-dropdown__product-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s6m-dropdown__product-title {
  font-size: var(--s6m-text-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--s6m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s6m-dropdown__product-price {
  font-size: var(--s6m-text-sm);
  color: var(--s6m-muted);
  font-weight: 400;
}

.s6m-dropdown__product-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* collection-first result — the "Shop <Artist> →" row above the products.
   Visually distinct (bordered, filled) so it reads as a shortcut, not a
   product. Sits at the top of the right column. */
.s6m-dropdown__collection {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--s6m-radius);
  border: 1px solid var(--s6m-line);
  background: var(--s6m-hover-bg);
  text-decoration: none;
  color: var(--s6m-ink);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.s6m-dropdown__collection:hover,
.s6m-dropdown__collection.is-active {
  background: var(--s6m-bg2);
  border-color: var(--s6m-ink);
}

.s6m-dropdown__collection-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s6m-dropdown__collection-kicker {
  font-size: var(--s6m-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s6m-accent);
}

.s6m-dropdown__collection-title {
  font-size: var(--s6m-text-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--s6m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s6m-dropdown__collection-count {
  flex: 0 0 auto;
  font-size: var(--s6m-text-sm);
  color: var(--s6m-muted);
  font-weight: 400;
}

.s6m-dropdown__collection-arrow {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--s6m-ink);
  transition: transform 120ms ease;
}

.s6m-dropdown__collection:hover .s6m-dropdown__collection-arrow,
.s6m-dropdown__collection.is-active .s6m-dropdown__collection-arrow {
  transform: translateX(3px);
}

/* ============================================================
   PILLS — discount + instock
   ============================================================ */

.s6m-discount-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--s6m-discount);
  color: #ffffff;
  font-family: var(--s6m-font-body);
  font-style: italic;
  font-size: var(--s6m-text-xs);
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--s6m-pill-radius);
  white-space: nowrap;
  letter-spacing: 0;
}

.s6m-instock-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--s6m-instock);
  border: 1px solid var(--s6m-instock);
  border-radius: var(--s6m-pill-radius);
  font-size: var(--s6m-text-xs);
  font-weight: 500;
  padding: 3px 9px;
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   RESULTS PAGE — hero row, sidebar + grid layout
   ============================================================ */

/* Defeat Horizon's `body.page-width-narrow` rule that caps every
   .shopify-section at ~736px. The s6m results page is a full-bleed surface;
   the user picked the narrow setting for product pages, not search.
   !important is necessary because Horizon's rule is also !important. */
.shopify-section:has(> .s6m-results-page),
.shopify-section > .s6m-results-page,
#shopify-section-s6m_search,
#shopify-section-template--search,
body.page-width-narrow .shopify-section:has(.s6m-results-page) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.s6m-results-page {
  /* width:100% + align-self:stretch defeat parent flex/grid shrink that was
     collapsing the section to its min-content (~736px). Without this the
     hero + sidebar + main grid all share the section's intrinsic width
     instead of the full content area. */
  width: 100% !important;
  align-self: stretch;
  background: var(--s6m-bg);
  color: var(--s6m-ink);
  font-family: var(--s6m-font-body);
  padding: 24px max(20px, 4vw) 64px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: var(--s6m-sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'hero hero'
    'sidebar main';
  column-gap: 32px;
  row-gap: 24px;
  box-sizing: border-box;
}

/* Landing mode (/search with no query — e.g. the mobile bottom-nav SEARCH
   tab): no filters exist, so collapse the sidebar column and center the
   landing content instead of leaving a dead rail on the left. */
.s6m-results-page.s6m-landing-mode {
  grid-template-columns: 1fr;
  grid-template-areas:
    'hero'
    'main';
}
.s6m-results-page.s6m-landing-mode .s6m-sidebar {
  display: none !important;
}

/* ---------- Search landing (/search with no query) ---------- */
.s6m-search-landing {
  max-width: 760px;
  margin: 4px auto 48px;
  width: 100%;
}
.s6m-landing-form {
  display: flex;
  align-items: center;
  height: 52px;
  border: 1.5px solid var(--s6m-ink);
  border-radius: 10px;
  overflow: hidden;
  background: var(--s6m-bg, #fff);
}
.s6m-landing-form__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 12px 0 16px;
  color: var(--s6m-muted);
}
.s6m-landing-form__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.s6m-landing-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--s6m-font-body);
  /* 16px floor keeps iOS from auto-zooming the viewport on focus. */
  font-size: 16px;
  color: var(--s6m-ink);
  -webkit-appearance: none;
  appearance: none;
}
.s6m-landing-form__input::-webkit-search-cancel-button { display: none; }
.s6m-landing-form__submit {
  flex: 0 0 auto;
  height: 100%;
  padding: 0 22px;
  border: 0;
  background: var(--s6m-ink, #111);
  color: var(--s6m-bg, #fff);
  font-family: var(--s6m-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.s6m-landing__label {
  margin: 28px 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s6m-muted);
}
.s6m-landing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.s6m-landing-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--s6m-line);
  border-radius: 999px;
  background: var(--s6m-bg2, #f6f6f6);
  color: var(--s6m-ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color var(--s6m-transition);
}
.s6m-landing-chip:hover { border-color: var(--s6m-ink); }
.s6m-landing-trending[hidden] { display: none; }

@media (max-width: 720px) {
  .s6m-search-landing { margin-top: 0; }
  .s6m-landing-form { height: 48px; }
  .s6m-landing-form__submit { padding: 0 16px; }
}

.s6m-results-page__hero {
  grid-area: hero;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--s6m-line);
}

.s6m-results-page__title {
  font-family: var(--s6m-font-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 400;
  color: var(--s6m-ink);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 22ch;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.s6m-results-page__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.s6m-results-page__count {
  font-size: var(--s6m-text-sm);
  color: var(--s6m-muted);
  margin-right: auto;
}

/* Mobile-only "Filter" button (opens the drawer). Hidden on desktop where
   the sidebar is always visible. */
.s6m-filter-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--s6m-bg);
  color: var(--s6m-ink);
  border: 1px solid var(--s6m-line);
  border-radius: var(--s6m-radius);
  padding: 9px 14px;
  font: 500 var(--s6m-text-sm)/1 var(--s6m-font-body);
  cursor: pointer;
}
.s6m-filter-toggle__icon { flex: 0 0 auto; }
.s6m-filter-toggle__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--s6m-ink);
  color: var(--s6m-bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* Drawer chrome — only visible when the sidebar is a bottom-sheet (mobile). */
.s6m-sidebar__head,
.s6m-sidebar__foot { display: none; }
.s6m-filter-backdrop { display: none; }

/* .s6m-sort is the actual rendered class (results-page.ts mainHeaderHtml).
   The dead .s6m-results-page__sort selector was never reached. */
.s6m-sort,
.s6m-results-page__sort {
  background: var(--s6m-bg);
  color: var(--s6m-ink);
  border: 1px solid var(--s6m-line);
  border-radius: var(--s6m-radius);
  padding: 8px 32px 8px 12px;
  font: 400 var(--s6m-text-sm)/1 var(--s6m-font-body);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  min-width: 180px;
}

.s6m-sort:focus,
.s6m-results-page__sort:focus { outline: 1px solid var(--s6m-ink); outline-offset: 1px; }

.s6m-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.s6m-sort-wrap__label {
  font-size: var(--s6m-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s6m-muted);
}

/* ============================================================
   SIDEBAR — sticky filter accordion
   ============================================================ */

.s6m-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: calc(var(--s6m-header-h) + 16px);
  align-self: start;
  background: var(--s6m-bg2);
  border-radius: var(--s6m-radius);
  padding: 24px;
  max-height: calc(100vh - var(--s6m-header-h) - 32px);
  overflow-y: auto;
}

.s6m-sidebar__section {
  border-bottom: 1px solid var(--s6m-line);
  padding: 12px 0;
}

.s6m-sidebar__section:last-child { border-bottom: 0; }

.s6m-sidebar__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  font-family: var(--s6m-font-body);
  font-size: var(--s6m-text-md);
  font-weight: 600;
  color: var(--s6m-ink);
  text-align: left;
}

.s6m-sidebar__section-head::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--s6m-muted);
  transition: transform var(--s6m-transition);
}

.s6m-sidebar__section[open] .s6m-sidebar__section-head::after {
  content: '−';
}

.s6m-sidebar__section-body {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s6m-sidebar__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--s6m-text-sm);
  color: var(--s6m-ink);
  cursor: pointer;
}

.s6m-sidebar__option input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--s6m-ink);
  margin: 0;
  cursor: pointer;
}

.s6m-sidebar__option-count { color: var(--s6m-muted); margin-left: auto; font-size: var(--s6m-text-xs); }

/* Accordion sections (native <details>) — replace the default disclosure
   triangle with a consistent +/− affordance. The section border/padding are
   already defined above (.s6m-sidebar__section). */
.s6m-sidebar__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font: 600 var(--s6m-text-md)/1 var(--s6m-font-body);
  color: var(--s6m-ink);
  cursor: pointer;
}
.s6m-sidebar__summary::-webkit-details-marker { display: none; }
.s6m-sidebar__summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--s6m-muted);
  line-height: 1;
}
.s6m-sidebar__section[open] > .s6m-sidebar__summary::after { content: '\2212'; }
.s6m-sidebar__body {
  padding: 2px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Dual-range price slider. The two native range inputs overlap on one track;
   pointer-events are disabled on the inputs and re-enabled on the thumbs so
   BOTH handles stay draggable. Previously unstyled → rendered as two stacked
   default sliders (the "double track" jank). */
.s6m-price__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--s6m-text-sm);
  color: var(--s6m-ink);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.s6m-price__track {
  position: relative;
  height: 4px;
  margin: 10px 10px 6px;
  background: var(--s6m-line);
  border-radius: 999px;
}
.s6m-price__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--s6m-ink);
  border-radius: 999px;
}
.s6m-price__track input[type='range'] {
  position: absolute;
  top: 50%;
  /* inset = thumb radius (18px thumb → 9px) so thumb centers map exactly to
     the 0–100% fill span. Mobile overrides both to match the 22px thumb. */
  left: -9px;
  width: calc(100% + 18px);
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.s6m-price__track input[type='range']::-webkit-slider-runnable-track {
  height: 20px;
  background: transparent;
  border: 0;
}
.s6m-price__track input[type='range']::-moz-range-track {
  height: 20px;
  background: transparent;
  border: 0;
}
.s6m-price__track input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--s6m-bg);
  border: 2px solid var(--s6m-ink);
  cursor: pointer;
  margin-top: 1px;
}
.s6m-price__track input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--s6m-bg);
  border: 2px solid var(--s6m-ink);
  cursor: pointer;
}
.s6m-price__track input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s6m-ink) 22%, transparent);
}
.s6m-price__track input[type='range']:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s6m-ink) 22%, transparent);
}

/* ============================================================
   MAIN — product grid
   ============================================================ */

.s6m-results-page__main { grid-area: main; min-width: 0; }

.s6m-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--s6m-card-min), 1fr));
  gap: var(--s6m-grid-gap);
}

/* Subtle staggered fade-up on hydrate. Reads as intentional motion design,
   not a blank-to-populated jolt. Respects prefers-reduced-motion. */
@keyframes s6mCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.s6m-grid > .s6m-card {
  animation: s6mCardIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.s6m-grid > .s6m-card:nth-child(1) { animation-delay: 0ms; }
.s6m-grid > .s6m-card:nth-child(2) { animation-delay: 40ms; }
.s6m-grid > .s6m-card:nth-child(3) { animation-delay: 80ms; }
.s6m-grid > .s6m-card:nth-child(4) { animation-delay: 120ms; }
.s6m-grid > .s6m-card:nth-child(n+5) { animation-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .s6m-grid > .s6m-card { animation: none; }
}

.s6m-card {
  display: flex;
  flex-direction: column;
  background: var(--s6m-bg);
  color: var(--s6m-ink);
  text-decoration: none;
  border-radius: var(--s6m-radius);
  overflow: hidden;
  transition: transform 200ms ease;
}

.s6m-card:hover { transform: translateY(-2px); }

.s6m-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--s6m-bg2);
  overflow: hidden;
}

.s6m-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
  display: block;
}

.s6m-card:hover .s6m-card__img img { transform: scale(1.03); }

.s6m-card__meta { padding: 10px 4px 4px; }

.s6m-card__vendor {
  font-size: var(--s6m-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s6m-muted);
  font-weight: 500;
}

.s6m-card__title {
  font-size: var(--s6m-text-md);
  font-weight: 500;
  line-height: 1.35;
  color: var(--s6m-ink);
  margin-top: 4px;
}

.s6m-card__price {
  font-size: var(--s6m-text-md);
  font-weight: 600;
  color: var(--s6m-ink);
  margin-top: 6px;
}

.s6m-card__was {
  color: var(--s6m-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 6px;
}

/* ============================================================
   PAGINATION — centered numbered buttons
   ============================================================ */

.s6m-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 48px;
}

.s6m-pagination__btn {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--s6m-bg);
  color: var(--s6m-ink);
  border: 1px solid var(--s6m-line);
  border-radius: var(--s6m-radius);
  font: 500 var(--s6m-text-sm)/1 var(--s6m-font-body);
  text-decoration: none;
  padding: 0 10px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.s6m-pagination__btn:hover {
  background: var(--s6m-bg2);
  border-color: var(--s6m-ink);
}

.s6m-pagination__btn--current {
  background: var(--s6m-ink);
  color: var(--s6m-bg);
  border-color: var(--s6m-ink);
}

.s6m-pagination__btn[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================================
   SKELETON — shimmer
   ============================================================ */

.s6m-skeleton {
  background: linear-gradient(90deg, var(--s6m-bg2) 0%, #efefef 50%, var(--s6m-bg2) 100%);
  background-size: 600px 100%;
  animation: s6m-shimmer 1.5s infinite linear;
  height: 100%;
  border-radius: var(--s6m-radius);
}

@keyframes s6m-shimmer {
  from { background-position: -600px 0; }
  to { background-position: 600px 0; }
}

/* ============================================================
   MOBILE — header search collapses to icon button + fullscreen sheet
   ============================================================ */

@media (max-width: 720px) {
  .s6m-header-search {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    justify-content: center;
  }

  .s6m-header-search__input { display: none; }

  .s6m-header-search__icon {
    position: static;
    transform: none;
    color: var(--s6m-ink);
    width: 20px;
    height: 20px;
  }

  /* The blurred dim overlay stays ON for mobile — the open search shows the
     page frosted behind the anchored panel instead of a full-page takeover.
     (The old fullscreen-sheet mode and its dead .s6m-mobile-sheet CSS were
     removed 2026-07-09.) */

  /* results page — filters become a slide-up drawer, products fill the page */
  .s6m-results-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      'hero'
      'main';
    column-gap: 0;
    padding: 16px 16px 48px;
  }

  /* header row: count on its own line, then [Filter] ........ [Sort].
     The Filter button appears only once real filters have rendered (the
     .s6m-has-filters gate), so it's never a dead control mid-load. */
  .s6m-results-page__header { gap: 10px; }
  .s6m-results-page__count { flex: 1 0 100%; order: -1; margin: 0; }
  .s6m-results-page.s6m-has-filters .s6m-filter-toggle { display: inline-flex; }
  .s6m-sort-wrap { margin-left: auto; }
  .s6m-sort { min-width: 0; }

  /* sidebar → bottom sheet. visibility:hidden while closed both hides the
     upward box-shadow (which would otherwise haze the page bottom) and pulls
     the off-screen sheet out of the tab order; it flips after the slide-out. */
  .s6m-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    margin: 0;
    padding: 0;
    border-radius: 16px 16px 0 0;
    background: var(--s6m-bg);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 260ms;
    will-change: transform;
  }
  .s6m-results-page.is-filters-open .s6m-sidebar {
    transform: translateY(0);
    visibility: visible;
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }

  .s6m-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--s6m-line);
    flex: 0 0 auto;
  }
  .s6m-sidebar__head-title { font: 600 17px/1 var(--s6m-font-body); }
  .s6m-filter-close {
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--s6m-muted);
    cursor: pointer;
    padding: 0 4px;
  }

  .s6m-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 18px;
  }

  .s6m-sidebar__foot {
    display: block;
    flex: 0 0 auto;
    /* 16px base so the CTA clears the home indicator even when the theme
       doesn't opt into viewport-fit=cover (env() then resolves to 0). */
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--s6m-line);
  }
  .s6m-filter-apply {
    width: 100%;
    background: var(--s6m-ink);
    color: var(--s6m-bg);
    border: 0;
    border-radius: var(--s6m-radius);
    padding: 14px;
    font: 600 var(--s6m-text-md)/1 var(--s6m-font-body);
    cursor: pointer;
  }

  .s6m-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .s6m-results-page.is-filters-open .s6m-filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Body-fixed lock (same pattern as the header-search lock) — iOS ignores
     bare overflow:hidden for touch scrolling. JS stores/restores scrollY. */
  body.s6m-filter-lock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: hidden;
    touch-action: none;
  }

  /* larger touch targets inside the sheet. `.s6m-sidebar` prefix raises
     specificity above the base `.s6m-checkbox` rule (which is defined later in
     source order, so an equal-specificity mobile rule would lose). */
  .s6m-sidebar__summary { padding: 16px 0; font-size: 16px; }
  .s6m-sidebar .s6m-checkbox { padding: 4px 0; font-size: 15px; }
  .s6m-price__track { height: 5px; }
  /* Bigger thumbs (radius 11) → widen the input inset to match so thumb
     centers still map to 0–100% of the fill; -1px margin recenters on the
     5px track. */
  .s6m-price__track input[type='range'] { left: -11px; width: calc(100% + 22px); }
  .s6m-price__track input[type='range']::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -1px; }
  .s6m-price__track input[type='range']::-moz-range-thumb { width: 22px; height: 22px; }

  .s6m-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .s6m-header-search,
  .s6m-header-search__icon,
  .s6m-header-search__input,
  .s6m-overlay,
  .s6m-dropdown,
  .s6m-dropdown__product-row,
  .s6m-dropdown__popular-link,
  .s6m-card,
  .s6m-card__img img,
  .s6m-pagination__btn,
  .s6m-sidebar,
  .s6m-filter-backdrop,
  .s6m-sidebar__section-head::after {
    transition: none !important;
    animation: none !important;
  }

  .s6m-skeleton {
    animation: none !important;
    background: var(--s6m-bg2);
  }
}


/* --- RS coexistence ------------------------------------------------------
 * Rapid Search app injects `rps-display-none` onto any header-search form
 * (it hides Shopify's native search). Our hijack form matches its selector
 * heuristic, so RS hides US too. Override with high specificity + !important.
 */
.s6m-header-search.s6m-header-search,
.s6m-header-search.rps-display-none {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.s6m-header-search.s6m-header-search .s6m-header-search__input,
.s6m-header-search.rps-display-none .s6m-header-search__input {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* `s6m-megamenu.css` (a prior-iteration asset still sitting in this theme's
 * /assets/) hides the dedicated search row AND tries to render the search
 * as a 36×36 icon inside `<header-actions>`. The icon-mode is BROKEN on
 * this storefront because Horizon's `<header-actions>` custom element
 * dispatches a SECOND synthetic click on itself in response to any child
 * click — which then opens Horizon's built-in <dialog id="search-modal">
 * and steals focus before our dropdown can mount. e.stopPropagation on the
 * input doesn't help (the second click is fresh, not a bubble).
 *
 * Workaround: don't fight HEADER-ACTIONS. Show the dedicated full-width
 * search row (which sits OUTSIDE the actions cluster) and hide the icon
 * version entirely. Users get a proper inline search bar between nav and
 * content — same pattern as Rapid Search's default install.
 *
 * Selectors stack `.header__row--s6m-search` ancestors / quadruple-class
 * repetition to claim higher specificity than the !important rules
 * shipped in s6m-megamenu.css.
 *
 * 2026-06-03 (icon-mode): the dedicated row is no longer an always-visible
 * bar — it's an overlay panel that slides down from below the header when
 * the icon is clicked. Keeps the storefront at a single header row at rest
 * (matches RS / Horizon native pattern) while still giving the full input
 * + dropdown when the user wants to search. */
/* Single-row mode: the dedicated row is hidden entirely. The bundle's
   anchored form still mounts inside it (so the anchor selector + dropdown
   plumbing keeps working), but the row is display:none so no extra height
   gets added below the nav. The visible search surface is the inline
   hijack form rendered into the six-srch-cell inside <header-actions>. */
.header__row--s6m-search.header__row--s6m-search.header__row--s6m-search.header__row--s6m-search {
  display: none !important;
}

/* Store-agnostic fallback: 6IX's theme provides a .six-srch-cell inside its
   customized <header-actions>, which is the visible search surface in
   single-row mode. A vanilla Horizon store (e.g. Sollie) has no such cell —
   without a fallback there would be NO visible search surface at all. When
   the page has no .six-srch-cell, un-hide the dedicated anchored row so the
   store gets the always-visible full-width bar (RS default-install pattern). */
body:not(:has(.six-srch-cell)) .header__row--s6m-search.header__row--s6m-search.header__row--s6m-search.header__row--s6m-search {
  display: block !important;
}

/* Icon-mode reveal (6IX Horizon, approved 2026-07-06): at rest the header
   shows only the search icon; activating search (icon click / hotkey adds
   html.s6m-header-search-open) reveals the dedicated full-width row so the
   dropdown anchors under a real, visible input — never a floating panel
   with nowhere to type. */
html.s6m-header-search-open .header__row--s6m-search.header__row--s6m-search.header__row--s6m-search.header__row--s6m-search {
  display: block !important;
}

/* The dedicated row needs its contents to take full width — Horizon's
   grid puts header__columns into 3 columns by default; for the search
   row, collapse to a single full-width slot so the search input spans. */
.header__row--s6m-search .header__columns {
  grid-template-columns: 1fr !important;
  width: 100%;
}

/* Single-row mode: hide every search-trigger surface EXCEPT the 6IX one
   inside .six-srch-cell. That includes Horizon's native <search-button>
   in the nav, and any hijack form the bundle inserts before/after a
   native button. Only the form rendered into the actions cluster
   should ever be visible. */
search-button.search-action.search-action {
  display: none !important;
}

/* Hide ALL hijack forms by default. The anchored form (mounted into the
   dedicated row, which is display:none) won't have a box anyway, but
   this prevents the bundle's hijack forms inserted next to native
   <search-button>s in the nav from leaking into view. */
form.s6m-header-search:not(.s6m-header-search--anchored):not(.six-srch-cell *) {
  display: none !important;
}

/* …and explicitly show the one in the actions cluster — as a bare search
   ICON at rest (matching the neighbouring account + cart icons), NOT a text
   field (approved 2026-07-13). Tapping the icon reveals the full-width search
   row + dropdown, which is the real typing surface. The input stays in the DOM
   but visually collapsed so the form-level tap handler (swallowAtForm) can
   still focus() it and open search. The --focused selectors are folded in so
   the icon never briefly expands during the focus→anchor hand-off. */
/* SPECIFICITY (0,5,1)+: this theme has served MIXED asset generations
   (Shopify's asset-version pointer for s6m-search.css lagged behind
   themeFilesUpsert on 2026-07-13, and the JS re-injects its own inline copy
   of whatever CSS it was built with, appended last). !important ties resolve
   by source order, so an older generation loaded later would resurrect the
   130px text field. Doubling the cell + tripling the form class outguns every
   prior generation's cell rule (max (0,3,1)) regardless of load order. */
.six-srch-cell.six-srch-cell form.s6m-header-search.s6m-header-search.s6m-header-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* 44×44 to MATCH the sibling account/cart action boxes exactly — the
     header-actions cluster stretches each cell to 44px tall on mobile, and a
     40px form top-aligned inside a 44px cell floated the magnifier 2px above
     the neighbouring icons (measured 63.6 vs 65.6 center-Y, user-reported
     2026-07-14). Equal boxes also even out the horizontal rhythm. */
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: none !important;
}
/* Belt-and-braces: center whatever the cell contains (the theme leaves the
   cell's flex alignment at `normal`, which top-pins fixed-height children). */
.six-srch-cell.six-srch-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Center the magnifying glass (the base rule pins it absolute:left:14px for
   the old text-field layout) and give it the weight + colour of the sibling
   header icons via currentColor. */
.six-srch-cell.six-srch-cell form.s6m-header-search.s6m-header-search.s6m-header-search .s6m-header-search__icon {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  pointer-events: none !important;
}
/* Collapse the input — no placeholder text, no box — while keeping it
   focusable (opacity, NOT display:none, so the icon tap can open search).
   Outguns the RS-coexistence rule that force-shows the input opaque AND any
   older-generation inline copy of it. */
.six-srch-cell.six-srch-cell form.s6m-header-search.s6m-header-search.s6m-header-search .s6m-header-search__input {
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The dropdown is portaled to <body> with inline-style left/width
   matching the (130px) form. That produces an unusably narrow panel
   that also overflows the viewport because the form sits at the right
   edge of the row. Override with !important so we beat the inline
   left/width values, and right-anchor with 16px padding from the
   viewport edge so the 2-column layout stays fully on-screen.
   Desktop-only — on mobile the rule at @media (max-width: 720px)
   below takes over and renders a full-screen overlay. */
@media (min-width: 721px) {
  body > .s6m-dropdown {
    left: auto !important;
    right: 16px !important;
    width: 640px !important;
    max-width: calc(100vw - 32px) !important;
  }
}
/* Mobile: anchored panel — NOT a full-page takeover. `top` stays whatever
   the portal JS computed (8px below the visible search row) so the input is
   always on screen; the panel floats over the blurred page with margins,
   and only left/width/right are re-pinned (they beat the JS inline values
   via !important, same specificity trick as the desktop rule above). */
@media (max-width: 720px) {
  body > .s6m-dropdown {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 250px);
    max-height: calc(100dvh - 250px);
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* --- Suppress Rapid Search on Horizon -----------------------------------
 * RS is configured for the Minimog live theme but its app block injects
 * search UI globally. On Horizon (draft) we run s6m-search instead, so hide
 * every RS UI surface (the floating CSB widget, the main results dropdown,
 * the autocomplete panel). RS uses BOTH hyphenated 'rps-' classes (newer)
 * AND underscored 'rps_' classes (older results panel).
 */
.rps-csb-form-container,
[class*="rps-csb"],
div[class*="_container_"][class*="_fixedPosition_"],
.rps_container,
[class*="rps_container"],
[class*="rps_left_column"],
[class*="rps_right_column"],
[class*="rps_keyword_block"],
[class*="rps_search_section"],
[class*="rps_results"],
[class^="rps_"],
[class*=" rps_"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Keep the s6m-dropdown product rows free of RS's highlight color injection */
.s6m-dropdown mark.rps-highlight,
.s6m-dropdown [class*="rps-highlight"] {
  all: unset;
  font: inherit;
  color: inherit;
  background: transparent;
}


/* --- Dedupe duplicate visible forms -------------------------------------
 * Must beat the RS-coexistence rule which also uses .s6m-header-search.s6m-header-search.
 * Triple-stack the class to win specificity.
 */
.s6m-header-search.s6m-header-search.s6m-header-search--duplicate,
.s6m-header-search--duplicate {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}


/* --- product-row inner-element styles (HTML uses __product-row__* chain) --- */
.s6m-dropdown__product-row__thumb {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--s6m-radius);
  overflow: hidden;
  background: var(--s6m-bg2);
}
.s6m-dropdown__product-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s6m-dropdown__product-row__thumb .s6m-discount-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--s6m-discount);
  color: #fff;
  border-radius: var(--s6m-pill-radius);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  font-style: italic;
}
.s6m-dropdown__product-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.s6m-dropdown__product-row__vendor {
  font-size: 11px;
  color: var(--s6m-muted);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
.s6m-dropdown__product-row__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--s6m-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s6m-dropdown__product-row__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.s6m-dropdown__product-row__price .s6m-card__price-sale {
  color: var(--s6m-discount);
  font-weight: 600;
  font-size: 14px;
}
.s6m-dropdown__product-row__price .s6m-card__price-was {
  color: var(--s6m-muted);
  text-decoration: line-through;
  font-size: 13px;
}
.s6m-dropdown__product-row__price .s6m-card__price-plain {
  color: var(--s6m-ink);
  font-size: 14px;
}
.s6m-dropdown__product-row__instock {
  flex: 0 0 auto;
  align-self: center;
  color: var(--s6m-instock);
  border: 1px solid var(--s6m-instock);
  border-radius: var(--s6m-pill-radius);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  background: transparent;
  margin-left: 8px;
  white-space: nowrap;
}

/* dropdownBadge:'trending' variant (shop.metafields.s6m_search.dropdown_badge)
   — social-proof tag in the store accent instead of stock status. */
.s6m-dropdown__product-row__trending {
  flex: 0 0 auto;
  align-self: center;
  color: var(--s6m-accent);
  border: 1px solid color-mix(in srgb, var(--s6m-accent) 45%, transparent);
  border-radius: var(--s6m-pill-radius);
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.5;
  background: transparent;
  margin-left: 8px;
  white-space: nowrap;
}

/* ============================================================
   HEADER SEARCH ANCHOR — dedicated full-width row, RS parity
   Theme injects `<div id="s6m-search-anchor">` inside its own
   header row. We render the form as a wide, centered RS-style
   input inside it.
   ============================================================ */

.s6m-search-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
}

/* Anchored form takes the full row width up to a comfortable max,
   overriding the default idle width baked into .s6m-header-search. */
.s6m-search-anchor .s6m-header-search,
.s6m-header-search.s6m-header-search--anchored {
  width: 100%;
  max-width: 600px;
  height: 44px;
  background: var(--s6m-header-search-bg-idle);
  border-radius: var(--s6m-radius);
  border: 1px solid var(--s6m-line);
  margin: 0 auto;
  box-shadow: none;
  transition:
    max-width var(--s6m-transition),
    height var(--s6m-transition),
    background-color var(--s6m-transition),
    border-color var(--s6m-transition),
    box-shadow var(--s6m-transition);
}

/* When the anchored form is focused, expand it RS-style: nearly full-width,
   taller, white fill, subtle bottom shadow. Beats the default
   .s6m-header-search--focused width by keeping it inside the anchor row. */
.s6m-header-search.s6m-header-search--anchored.s6m-header-search--focused {
  max-width: min(92vw, 1100px);
  height: 60px;
  background: var(--s6m-header-search-bg-focus);
  border-color: var(--s6m-ink);
  box-shadow: 0 1px 0 var(--s6m-line);
}

/* Force the anchored input to fill the wider container. */
.s6m-header-search.s6m-header-search--anchored .s6m-header-search__input {
  width: 100%;
  flex: 1 1 auto;
  font-size: var(--s6m-text-md);
}

.s6m-header-search.s6m-header-search--anchored.s6m-header-search--focused .s6m-header-search__input {
  font-size: var(--s6m-text-lg);
}

/* Mobile: shrink the anchor row padding and let the form stretch edge-to-edge. */
@media (max-width: 720px) {
  .s6m-search-anchor {
    padding: 6px 12px;
  }

  /* Override the mobile collapse-to-icon rule for the anchored variant —
     on the dedicated row we keep the full input visible. */
  .s6m-header-search.s6m-header-search--anchored {
    width: 100%;
    max-width: none;
    height: 40px;
    background: var(--s6m-header-search-bg-idle);
    justify-content: flex-start;
    padding: 0;
  }

  .s6m-header-search.s6m-header-search--anchored .s6m-header-search__input {
    display: block;
    padding: 0 16px 0 40px;
  }

  .s6m-header-search.s6m-header-search--anchored .s6m-header-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--s6m-header-search-icon-size);
    height: var(--s6m-header-search-icon-size);
  }
}

/* Defensive: Horizon wraps header-component in `contain: layout style`,
   which can trap fixed-position descendants. The anchor row itself doesn't
   need fixed positioning, but make sure overflow stays visible so the
   dropdown / focus expansion isn't clipped. */
.header__row--s6m-search {
  overflow: visible;
  contain: none;
}

/* ---------- Merchandised / pinned products ----------
   Subtle pill in the top-left corner of the card thumb when result.pinned
   is true. Worker pins via CONFIG['boosts'] (substring match on raw or
   canonical query, see src/lib/rank.ts selectBoostIds).
   Pinned products are still real products with real intent — keep the
   badge quiet so it reads as "featured by 6ix", not as an ad. */
.s6m-card,
.s6m-dropdown__product-row { position: relative; }

.s6m-card__pin {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s6m-fg, #fff);
  background: rgba(0, 0, 0, 0.78);
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
}

/* Featured + discounted: both pills target the same corner — stack the
   discount pill below the FEATURED chip instead of underneath it. */
.s6m-card:has(.s6m-card__pin) .s6m-discount-pill {
  top: 34px;
  left: 8px;
}

/* Compact (dropdown) row: badge collapses to a small dot since space is tight. */
.s6m-dropdown__product-row .s6m-card__pin {
  top: 6px;
  left: 6px;
  padding: 0;
  width: 6px;
  height: 6px;
  background: #111;
  border-radius: 50%;
  font-size: 0;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .s6m-card.is-pinned { animation-delay: 0ms !important; }
}

/* ---------- Did-you-mean row ----------
   Shown above results grid when worker corrected a typo (e.g. drdke → drake).
   Pattern matches RS / Google: bold the correction inline, give the user a
   visible link to revert to literal text. */
.s6m-dym {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  background: #f7f7f7;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.s6m-dym__primary { color: #111; }
.s6m-dym__secondary { color: #666; }
.s6m-dym__revert {
  color: #0066cc;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.s6m-dym__revert:hover { color: #004080; }

/* ---------- Filter checkbox rows + count badges + disabled state ---------- */
.s6m-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--s6m-text-sm);
  color: var(--s6m-ink);
}
.s6m-checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--s6m-ink);
  margin: 0;
  cursor: pointer;
}
.s6m-checkbox > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 auto;
}
.s6m-checkbox__count {
  color: #888;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.s6m-checkbox.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* ---------- Infinite scroll sentinel ----------
   Spacer that triggers IntersectionObserver to append next page. */
.s6m-results-page__sentinel {
  height: 1px;
  width: 100%;
  margin-top: 16px;
  /* Optional micro-loading spinner could go here later. */
}

/* ---------- Mobile dropdown full-screen takeover ----------
   Below 720px the dropdown becomes a fixed-position sheet covering the
   viewport. Larger touch targets, visible close affordance via the existing
   overlay tap-to-dismiss. */
@media (max-width: 720px) {
  /* (Panel geometry lives in the `body > .s6m-dropdown` mobile rule above —
     the old fullscreen takeover here was removed 2026-07-09.) */
  /* Tap-target sizing — apply 44px minimum height to interactive rows. */
  .s6m-dropdown__product-row {
    min-height: 64px;
    padding: 10px 12px;
  }
  .s6m-dropdown__popular-link {
    padding: 10px 14px;
    font-size: 15px;
  }
  /* Single-column layout — drop the 35%/65% two-column grid on phones.
     The markup uses .s6m-dropdown__grid (not __layout), so target that. */
  .s6m-dropdown__grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 16px !important;
  }
  /* The vertical divider is pinned at left:35% — meaningless in a single
     column, so remove it on phones. */
  .s6m-dropdown__grid::before { display: none !important; }
  /* Right-column label stays but reads as a section header above products. */
  .s6m-dropdown__col-label { font-size: 12px; }
}