/**
 * Federated search layout + content-hit styles (AIS019).
 * Companion to federated.js. Kept out of styles.css so the prod-shared
 * stylesheet is untouched. Scoped under #algolia-federated-root (product
 * card refinements scoped to [data-fed-type="product"] within it).
 *
 * Visual spec: desgin/design_handoff_federated_search/README.md
 * (refined tokens; greens derive from --brand-accent). Tabs layout only —
 * the split layout was dropped by client decision 2026-07-10.
 */

#algolia-federated-root {
  --fed-accent: var(--brand-accent, #00693c);
  --fed-accent-dark: color-mix(in srgb, var(--brand-accent, #00693c) 80%, black);
  --fed-ink: #1c1e1d;
  --fed-secondary: #5b615d;
  --fed-body: #6b716c;
  --fed-muted: #9aa09b;
  --fed-card-border: #e6e8e6;
  --fed-inner-border: #eef0ee;
  --fed-divider: #f2f3f2;
  --fed-tabbar-border: #e2e4e2;
  --fed-pill-bg: #f3f5f3;
  --fed-pill-ink: #4b514c;
  --fed-dot-article: #3a63a8;
  --fed-dot-manual: #b4691f;
  --fed-dot-video: #0d8a7d;
  font-family: inherit;
  color: var(--fed-ink);
}

/* ---- search field (restyle of the InstantSearch searchBox) ---- */

.algolia-search-wrapper #algolia-searchbox .ais-SearchBox-form {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dcdedc;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.04);
}

.algolia-search-wrapper #algolia-searchbox .ais-SearchBox-submit {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
}

.algolia-search-wrapper #algolia-searchbox .ais-SearchBox-reset {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
}

.algolia-search-wrapper #algolia-searchbox .ais-SearchBox-input {
  font-size: 1.02rem;
  padding: 0.78rem 0.2rem 0.78rem 2.6rem;
  border: none;
  outline: none;
  background: transparent;
  color: #1c1e1d;
  box-shadow: none;
}

.algolia-search-wrapper #algolia-searchbox .ais-SearchBox-submitIcon {
  width: 19px;
  height: 19px;
  fill: var(--brand-accent, #00693c);
}

.algolia-search-wrapper #algolia-searchbox .ais-SearchBox-resetIcon {
  fill: #9aa09b;
}

/* ---- result summary line ---- */

#algolia-federated-root .fed-summary {
  margin: 1.1rem 0 0.35rem;
  font-size: 0.92rem;
  color: var(--fed-secondary);
}

#algolia-federated-root .fed-summary strong {
  font-weight: 600;
  color: var(--fed-ink);
}

#algolia-federated-root .fed-summary-muted {
  font-size: 0.82rem;
  color: var(--fed-muted);
}

/* ---- tab bar ---- */

#algolia-federated-root .fed-tabs {
  display: flex;
  border-bottom: 1px solid var(--fed-tabbar-border);
  margin: 0.9rem 0 1.6rem;
  flex-wrap: wrap;
}

#algolia-federated-root .fed-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.6rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b716c;
  cursor: pointer;
  transition: color 0.15s;
}

#algolia-federated-root .fed-tab:hover {
  color: #111;
}

#algolia-federated-root .fed-tab.is-active {
  color: var(--fed-accent);
  border-bottom-color: var(--fed-accent);
}

#algolia-federated-root .fed-count {
  font-weight: 500;
  font-size: 0.82em;
  color: var(--fed-muted);
}

#algolia-federated-root .fed-count.is-zero {
  opacity: 0.45;
}

/* ---- type dots ---- */

#algolia-federated-root .fed-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fed-accent);
  flex: none;
}

#algolia-federated-root .fed-badge .fed-dot {
  width: 6px;
  height: 6px;
}

#algolia-federated-root .fed-dot-article {
  background: var(--fed-dot-article);
}

#algolia-federated-root .fed-dot-manual {
  background: var(--fed-dot-manual);
}

#algolia-federated-root .fed-dot-video {
  background: var(--fed-dot-video);
}

#algolia-federated-root .fed-dot-product {
  background: var(--fed-accent);
}

/* ---- sections ---- */

#algolia-federated-root .fed-section {
  margin-bottom: 1rem;
}

/* Content sections are bordered cards; the products section is not (its
   hits are the cards). */
#algolia-federated-root .fed-section:not([data-fed-type="product"]) {
  background: #fff;
  border: 1px solid var(--fed-card-border);
  border-radius: 12px;
  padding: 1.05rem 1.1rem 1.15rem;
}

#algolia-federated-root .fed-section-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--fed-inner-border);
  margin-bottom: 0.35rem;
}

#algolia-federated-root .fed-section-header h2 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fed-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

#algolia-federated-root .fed-section[data-fed-type="product"] .fed-section-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

#algolia-federated-root .fed-section[data-fed-type="product"] .fed-section-header h2 {
  font-size: 1.02rem;
}

#algolia-federated-root .fed-section[data-fed-type="product"] .fed-section-header .fed-dot {
  display: none;
}

#algolia-federated-root .fed-section-header .fed-count {
  font-size: 0.8rem;
}

#algolia-federated-root .fed-viewall {
  appearance: none;
  background: none;
  border: none;
  margin-left: auto;
  color: var(--fed-accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

#algolia-federated-root .fed-pagination {
  margin-top: 0.9rem;
}

#algolia-federated-root .fed-section-empty {
  color: var(--fed-muted);
  font-size: 0.9rem;
  padding: 0.75rem 0 0.2rem;
}

/* ---- content hit rows ---- */

/* styles.css lays .ais-Hits-list out as a product grid — content
   sections are stacked rows instead (prototype layout) */
#algolia-federated-root .fed-section:not([data-fed-type="product"]) .ais-Hits-list {
  display: block;
}

#algolia-federated-root .fed-section:not([data-fed-type="product"]) .ais-Hits-item {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

#algolia-federated-root .fed-hit {
  display: flex;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fed-divider);
}

#algolia-federated-root .fed-hits .ais-Hits-item:last-child .fed-hit {
  border-bottom: none;
  padding-bottom: 0.2rem;
}

#algolia-federated-root .fed-hit-thumb img {
  width: 78px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--fed-divider);
}

#algolia-federated-root .fed-hit-thumb-video {
  position: relative;
}

#algolia-federated-root .fed-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#algolia-federated-root .fed-hit-body {
  flex: 1;
  min-width: 0;
}

/* Neutral badge pill + type dot (design handoff fix #2) */
#algolia-federated-root .fed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: var(--fed-pill-bg);
  color: var(--fed-pill-ink);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.13rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
}

#algolia-federated-root .fed-chip {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--fed-muted);
  border: 1px solid var(--fed-card-border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.35rem;
}

/* Rifle→parts strip — shown when a query matches a FitFinder make+model */
#algolia-federated-root .fed-riflematch {
  margin: 0.85rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid
    color-mix(in srgb, var(--brand-accent, #00693c) 35%, white);
  background: color-mix(in srgb, var(--brand-accent, #00693c) 5%, white);
  border-radius: 10px;
}
#algolia-federated-root .fed-riflematch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
#algolia-federated-root .fed-riflematch-title {
  font-size: 0.95rem;
  color: var(--fed-muted);
}
#algolia-federated-root .fed-riflematch-title strong {
  color: var(--brand-accent, #00693c);
}
#algolia-federated-root .fed-riflematch-open {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-accent, #00693c);
  text-decoration: none;
  white-space: nowrap;
}
#algolia-federated-root .fed-riflematch-head {
  margin-bottom: 0;
}

/* Fit Finder signpost — shown under the tabs when products come up empty */
#algolia-federated-root .fed-fitfinder-cta {
  display: block;
  margin: 0.85rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid
    color-mix(in srgb, var(--brand-accent, #00693c) 35%, white);
  background: color-mix(in srgb, var(--brand-accent, #00693c) 6%, white);
  border-radius: 10px;
  text-decoration: none;
}
#algolia-federated-root .fed-fitfinder-cta:hover {
  background: color-mix(in srgb, var(--brand-accent, #00693c) 12%, white);
}
#algolia-federated-root .fed-fitfinder-cta-title {
  display: block;
  font-weight: 600;
  color: var(--brand-accent, #00693c);
  margin-bottom: 0.2rem;
}
#algolia-federated-root .fed-fitfinder-cta-body {
  display: block;
  font-size: 0.85rem;
  color: var(--fed-muted);
}

#algolia-federated-root .fed-hit-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  line-height: 1.35;
}

#algolia-federated-root .fed-hit-title a {
  color: var(--fed-ink);
  text-decoration: none;
}

#algolia-federated-root .fed-hit-title a:hover {
  color: var(--fed-accent);
}

#algolia-federated-root .fed-hit-snippet {
  font-size: 0.81rem;
  color: var(--fed-body);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Keyword highlight — green mark, replaces the yellow */
#algolia-federated-root mark,
#algolia-federated-root .fed-hit-snippet mark,
#algolia-federated-root .fed-hit-title mark {
  background: color-mix(in srgb, var(--brand-accent, #00693c) 14%, transparent);
  color: var(--fed-accent-dark);
  padding: 0 0.12em;
  border-radius: 2px;
}

#algolia-federated-root .fed-hit-action {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fed-accent);
  text-decoration: none;
}

/* ---- product card refinements (federated pages only) ---- */

#algolia-federated-root [data-fed-type="product"] .ais-Hits-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* styles.css/satellite give .ais-Hits-item its own card chrome — the
   refined card lives on .hit, so the wrapper goes bare (fixes the
   card-within-a-card double border) */
#algolia-federated-root [data-fed-type="product"] .ais-Hits-item {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: block;
}

#algolia-federated-root [data-fed-type="product"] .ais-Hits-item > .hit {
  height: 100%;
}

#algolia-federated-root [data-fed-type="product"] .hit {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--fed-card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}

#algolia-federated-root [data-fed-type="product"] .hit:hover {
  border-color: #c9cdc9;
  box-shadow: 0 6px 20px rgba(20, 30, 20, 0.08);
}

#algolia-federated-root [data-fed-type="product"] .hit-image {
  position: relative;
  height: 170px;
  border-bottom: 1px solid var(--fed-inner-border);
}

#algolia-federated-root [data-fed-type="product"] .hit-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "Product" badge, CSS-only so core.js's template stays untouched */
#algolia-federated-root [data-fed-type="product"] .hit-image::before {
  content: "Product";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-block;
  background:
    radial-gradient(circle 3px at 11px 50%, var(--fed-accent) 98%, transparent),
    rgba(255, 255, 255, 0.92);
  border: 1px solid var(--fed-card-border);
  border-radius: 999px;
  padding: 0.14rem 0.55rem 0.14rem 19px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fed-pill-ink);
}

/* Card footer: price above the CTA button, both bottom-anchored */
#algolia-federated-root [data-fed-type="product"] .hit-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 0.95rem 1rem 1.1rem;
}

#algolia-federated-root [data-fed-type="product"] .hit-description {
  margin-bottom: 0.9rem;
}

#algolia-federated-root [data-fed-type="product"] .hit-title {
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fed-ink);
}

#algolia-federated-root [data-fed-type="product"] .hit-description {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--fed-body);
}

#algolia-federated-root [data-fed-type="product"] .hit-price {
  margin: auto 0 0.55rem;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--fed-accent);
}

#algolia-federated-root [data-fed-type="product"] .hit-link {
  background: var(--fed-accent);
  color: #fff;
  font-size: 0; /* swap core.js's "Learn More" for the prototype CTA */
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
}

#algolia-federated-root [data-fed-type="product"] .hit-link::after {
  content: "View product →";
  font-size: 0.82rem;
  white-space: nowrap;
}

#algolia-federated-root [data-fed-type="product"] .hit-link:hover {
  background: var(--fed-accent-dark);
}

/* ---- layout: tabs ---- */

#algolia-federated-root.fed-layout-tabs .fed-section {
  display: none;
}

#algolia-federated-root.fed-layout-tabs .fed-section.is-active {
  display: block;
}

#algolia-federated-root.fed-layout-tabs[data-fed-active-tab="__all"] .fed-section[data-empty="1"] {
  display: none;
}

#algolia-federated-root.fed-layout-tabs[data-fed-active-tab="__all"] .fed-pagination {
  display: none;
}

#algolia-federated-root.fed-layout-tabs:not([data-fed-active-tab="__all"])
  .fed-section.is-active
  .fed-viewall {
  display: none;
}

/* ---- responsive ---- */

@media (max-width: 768px) {
  #algolia-federated-root .fed-hit-thumb img {
    width: 72px;
    height: 54px;
  }
}