.sps {
  --sps-navy: #0b2942;
  --sps-blue: #075c93;
  --sps-blue-dark: #06466f;
  --sps-cyan: #0f80b8;
  --sps-green: #197044;
  --sps-amber: #8a5800;
  --sps-border: #d9e1e7;
  --sps-muted: #5d6974;
  --sps-pale: #f4f7f9;
  --sps-white: #fff;
  color: #17212a;
  margin: 0 auto;
  max-width: 1840px;
  min-height: 360px;
  position: relative;
  width: 100%;
}

.sps *,
.sps *::before,
.sps *::after,
.sps-header-results *,
.sps-header-results *::before,
.sps-header-results *::after {
  box-sizing: border-box;
}

.sps button,
.sps input,
.sps-header-results button {
  font: inherit;
}

.sps a,
.sps-header-results a {
  text-decoration: none;
}

.sps :focus-visible,
.fusion-header-wrapper form[data-seadan-search-bound="true"] :focus-visible,
.sps-header-results :focus-visible {
  outline: 3px solid rgba(15, 128, 184, 0.42);
  outline-offset: 2px;
}

.sps__status {
  background: #eaf4fa;
  border: 1px solid #b7d8e9;
  border-radius: 7px;
  color: var(--sps-navy);
  margin-bottom: 14px;
  padding: 12px 14px;
}

.sps__status[hidden] {
  display: none;
}

.sps__status.is-error {
  background: #fff0f0;
  border-color: #e5aaaa;
  color: #821f1f;
}

.sps__toolbar {
  align-items: stretch;
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.sps__search-form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.sps__sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.sps__search-input {
  background: var(--sps-white);
  border: 2px solid #b9c8d2;
  border-radius: 8px 0 0 8px;
  box-shadow: none;
  color: #17212a;
  flex: 1 1 auto;
  font-size: 16px;
  min-height: 50px;
  padding: 10px 15px;
  width: 100%;
}

.sps__search-input:focus {
  border-color: var(--sps-cyan);
  box-shadow: inset 0 0 0 1px var(--sps-cyan);
  outline: 0;
}

.sps__search-submit,
.sps__filter-button {
  background: var(--sps-blue);
  border: 0;
  color: var(--sps-white);
  cursor: pointer;
  font-weight: 700;
  min-height: 50px;
  padding: 0 18px;
}

.sps__search-submit {
  border-radius: 0 8px 8px 0;
}

.sps__search-submit:hover,
.sps__filter-button:hover {
  background: var(--sps-blue-dark);
}

.sps__filter-button {
  border-radius: 8px;
  display: none;
}

.sps__active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  min-height: 1px;
}

.sps__active-chip,
.sps__clear {
  border: 1px solid #c7dce8;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 9px;
}

.sps__active-chip {
  background: #e8f2f7;
  color: var(--sps-navy);
}

.sps__clear {
  background: #fff;
  color: var(--sps-blue);
}

.sps__layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(215px, 240px) minmax(0, 1fr);
}

.sps__filters {
  background: var(--sps-white);
  border: 1px solid var(--sps-border);
  border-radius: 9px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 15px;
  position: sticky;
  top: 20px;
}

.sps__filters-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.sps__filters-heading h2 {
  color: var(--sps-navy);
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

.sps__filter-close {
  background: transparent;
  border: 0;
  color: var(--sps-navy);
  cursor: pointer;
  display: none;
  font-size: 28px;
  line-height: 1;
}

.sps__facet {
  border-top: 1px solid var(--sps-border);
  margin-top: 13px;
  padding-top: 13px;
}

.sps__facet-title,
.sps__technical-heading h3 {
  color: var(--sps-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 9px;
}

.sps__facet-search {
  background: #fff;
  border: 1px solid #b9cbd8;
  border-radius: 5px;
  color: var(--sps-navy);
  font-size: 12px;
  margin: 0 0 9px;
  min-height: 34px;
  padding: 6px 8px;
  width: 100%;
}

.sps__facet-search:focus {
  border-color: var(--sps-blue);
  box-shadow: 0 0 0 2px rgba(0, 107, 166, 0.16);
  outline: 0;
}

.sps__facet-row {
  align-items: flex-start;
  color: #27343e;
  cursor: pointer;
  display: grid;
  font-size: 12px;
  gap: 6px;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  line-height: 1.35;
  margin: 0 0 7px;
}

/* Author layout rules override the browser's default [hidden] handling.
   Keep collapsed options absent from layout and keyboard navigation, including
   when Avada/global label styles or the mobile dialog use grid/flex display. */
body .sps .sps__facet .sps__facet-values > .sps__facet-row[hidden] {
  display: none !important;
}

.sps .sps__facet-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sps__facet-checkbox {
  margin: 1px 0 0;
}

.sps__facet-count {
  background: #edf2f5;
  border-radius: 999px;
  color: #53616c;
  font-size: 10px;
  min-width: 21px;
  padding: 2px 5px;
  text-align: center;
}

.sps__facet-more {
  background: transparent;
  border: 0;
  color: var(--sps-blue);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 0;
}

.sps__technical-heading {
  border-top: 1px solid var(--sps-border);
  margin-top: 16px;
  padding-top: 14px;
}

.sps__technical-heading[hidden] {
  display: none;
}

.sps__technical-heading p {
  color: var(--sps-muted);
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}

/* The mobile filter owner is a real modal in the browser top layer, outside
   Avada's page-content stacking context. Desktop keeps the original aside. */
dialog.sps__filter-dialog {
  background: var(--sps-white);
  border: 0;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  color: #17212a;
  font: 14px/1.4 Arial, sans-serif;
  height: 100vh;
  height: 100dvh;
  inset: 0 auto auto 0;
  margin: 0;
  max-height: 100vh;
  max-height: 100dvh;
  max-width: calc(100vw - 24px);
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  padding: 0;
  position: fixed;
  width: 340px;
}

dialog.sps__filter-dialog:not([open]) { display: none !important; }
dialog.sps__filter-dialog[open] { display: block; }
dialog.sps__filter-dialog::backdrop { background: rgba(10, 24, 36, 0.52); }

dialog.sps__filter-dialog > .sps__filters {
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  padding: 0;
  position: static;
}

.sps__filter-dialog .sps__filters-heading {
  background: var(--sps-white);
  border-bottom: 1px solid var(--sps-border);
  flex: 0 0 auto;
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px max(16px, env(safe-area-inset-left));
}

.sps__filter-dialog .sps__filter-close {
  display: block;
  flex: 0 0 44px;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 0;
}

.sps__filter-dialog .sps__filter-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 16px max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  /* Contain absolute screen-reader labels inside the actual scroller. */
  position: relative;
}

.sps__filter-dialog .sps__facet-row { align-items: center; font-size: 14px; min-height: 34px; }
.sps__filter-dialog .sps__facet-search { font-size: 16px; min-height: 44px; }
.sps__filter-dialog .sps__facet-more { min-height: 44px; }
body.sps-filters-open { overflow: hidden; }

.sps__results {
  container-name: seadan-results;
  container-type: inline-size;
  min-width: 0;
}

.sps__stats {
  color: var(--sps-muted);
  font-size: 13px;
  margin: 2px 0 10px;
}

.sps__hit-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

/* Native cards (SEADAN_SEARCH_NATIVE_CARDS). .sps__native only exists while the store's own
   product list stands in for .sps__hit-grid. The theme's classes on that list and on its
   cards do the layout. These rules only keep the plugin's own styling out of their way. */
.sps__native {
  /* .sps sets its own text colour. Inside the store's cards the theme's colour applies. */
  color: var(--body_typography-color, inherit);
  min-width: 0;
}

/* A hit that kept its light card (no product id, or its card failed on the server) sits in
   a list item of the theme's list and fills it. */
.sps__native .sps__light-item > .sps__card {
  height: 100%;
}

/* The stock badge the script puts on the store's card, above the price. */
.sps__native .product .sps__badge {
  margin: 0 0 6px;
}

.sps__card {
  background: var(--sps-white);
  border: 1px solid var(--sps-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(11, 41, 66, 0.05);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.sps .sps__card[hidden] {
  display: none !important;
}

.sps__card:hover,
.sps__card:focus-within {
  border-color: #aec8d7;
  box-shadow: 0 8px 24px rgba(11, 41, 66, 0.1);
  transform: translateY(-2px);
}

.sps__card-link {
  color: inherit !important;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  text-decoration: none !important;
}

.sps__image-box {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #edf1f4;
  display: flex;
  height: 154px;
  justify-content: center;
  overflow: hidden;
  padding: 11px;
  position: relative;
}

.sps__image {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.sps__image-fallback {
  color: #75818a;
  display: none;
  font-size: 12px;
}

.sps__image-box.is-missing {
  background: #f6f8fa;
}

.sps__image-box.is-missing .sps__image-fallback {
  display: block;
}

.sps__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 11px 11px 9px;
}

.sps__brand {
  color: var(--sps-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  min-height: 13px;
  text-transform: uppercase;
}

.sps__title {
  color: var(--sps-navy);
  display: -webkit-box;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.27 !important;
  margin: 0 0 8px;
  min-height: 4.95em;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-transform: none !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.sps__codes {
  background: var(--sps-pale);
  border-radius: 6px;
  color: #34424d;
  display: block;
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: 7px;
  padding: 6px 7px;
}

.sps__code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sps__code strong {
  color: var(--sps-navy);
}

.sps__category {
  color: var(--sps-muted);
  display: block;
  font-size: 10px;
  line-height: 1.35;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sps__badge {
  align-self: flex-start;
  border-radius: 999px;
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  margin-top: auto;
  padding: 6px 7px;
  text-transform: uppercase;
}

.sps__badge--stock,
.sps__badge--positive {
  background: #d4edda;
  color: #155724;
}

.sps__badge--backorder {
  background: #fff0d9;
  color: #8b5600;
}

.sps__badge--critical {
  background: #f8d7da;
  color: #721c24;
}

.sps__badge--warning {
  background: #fff3cd;
  color: #856404;
}

.sps__view {
  color: var(--sps-blue);
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
}

.sps__commerce {
  align-items: center;
  border-top: 1px solid #edf1f4;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: space-between;
  min-height: 46px;
  padding: 8px 10px;
}

.sps__commerce:empty {
  display: none;
}

.sps__price {
  color: var(--sps-navy);
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
}

.sps__price-value {
  font-size: 14px;
}

.sps__tax {
  color: var(--sps-muted);
  font-size: 9px;
  margin-top: 2px;
}

.sps__commerce-loading,
.sps__commerce-unavailable {
  color: var(--sps-muted);
  font-size: 10px;
}

.sps__login,
.sps__details,
.sps__add {
  background: var(--sps-blue) !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-height: 32px !important;
  padding: 8px 10px !important;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.sps__login:hover,
.sps__details:hover,
.sps__add:hover {
  background: var(--sps-blue-dark) !important;
  box-shadow: 0 4px 12px rgba(0, 98, 157, 0.2);
  transform: translateY(-1px);
}

.sps__add.loading {
  cursor: wait;
  opacity: 0.72;
}

.sps__add.sps__add--confirmed {
  background: #237a4b !important;
  cursor: default;
}

.sps__add:disabled {
  box-shadow: none;
  transform: none;
}

.sps__add.added::after,
.sps__add.sps__add--confirmed::after {
  content: none !important;
  display: none !important;
}

.sps__commerce > .added_to_cart.wc-forward {
  display: none !important;
}

/* The child header floats Avada's classic selector beside its mobile search.
   Product Search hides that duplicate search, so return the selector to flow;
   otherwise the first opened menu row overlaps the close target. */
@media only screen and (max-width: 800px) {
  body.page-product-search
  .fusion-header-v4
  .fusion-mobile-nav-holder
  > button.fusion-mobile-selector {
    float: none !important;
    margin: 0 0 0 auto !important;
  }
}

.sps__empty {
  background: var(--sps-pale);
  border: 1px solid var(--sps-border);
  border-radius: 9px;
  padding: 28px;
}

.sps__empty h2 {
  color: var(--sps-navy);
  font-size: 20px;
  margin: 0 0 7px;
}

.sps__empty p {
  color: var(--sps-muted);
  margin: 0;
}

.sps__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 22px;
}

.sps__page {
  background: #fff;
  border: 1px solid var(--sps-border);
  border-radius: 5px;
  color: var(--sps-blue);
  cursor: pointer;
  min-height: 34px;
  padding: 6px 10px;
}

.sps__page[aria-current="page"] {
  background: var(--sps-blue);
  border-color: var(--sps-blue);
  color: #fff;
}

.sps__page:disabled {
  cursor: default;
  opacity: 0.45;
}

/* On a plain listing the page numbers are links (a.sps__page). They have to look like the
   buttons in every state. What the theme gives a link and a button does not have: a colour of
   its own on hover, faded in over 0.2 s. And a button centres its label by itself. */
a.sps__page {
  text-align: center;
  transition: none;
}

a.sps__page:hover {
  color: var(--sps-blue);
}

a.sps__page[aria-current="page"]:hover {
  color: #fff;
}

@container seadan-results (min-width: 450px) {
  .sps__hit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container seadan-results (min-width: 680px) {
  .sps__hit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container seadan-results (min-width: 850px) {
  .sps__hit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container seadan-results (min-width: 1100px) {
  .sps__hit-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@container seadan-results (min-width: 1350px) {
  .sps__hit-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Brand colours: primary #1966af, accent #41aaf2. Border and corners follow the theme's
   form fields (its --form_border_color and --form_border_radius), so the panel matches the
   search box above it; the values after the comma are what staging had set. */
.sps-header-results {
  background: #fff;
  border: 1px solid var(--form_border_color, #d2d2d2);
  border-radius: var(--form_border_radius, 0);
  box-sizing: border-box;
  box-shadow: 0 14px 34px rgba(11, 41, 66, 0.2);
  color: #17212a;
  font: 14px/1.4 Arial, sans-serif;
  inset: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: fixed;
  z-index: 100050;
}

.sps-header-results[hidden] {
  display: none !important;
}

.sps-header-close {
  background: #fff;
  border: 0;
  border-top: 1px solid #edf1f4;
  color: #1966af;
  cursor: pointer;
  display: block;
  font: inherit;
  min-height: 44px;
  padding: 8px 12px;
  width: 100%;
}

.sps-header-hit {
  align-items: center;
  border-bottom: 1px solid #edf1f4;
  color: #17212a !important;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(0, 1fr);
  min-height: 70px;
  padding: 8px 10px;
}

.sps-header-hit:hover,
.sps-header-hit:focus-visible {
  background: #f2f7fa;
}

.sps-header-image {
  height: 52px;
  object-fit: contain;
  width: 52px;
}

.sps-header-copy {
  display: block;
  min-width: 0;
}

.sps-header-copy strong,
.sps-header-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sps-header-copy strong {
  color: #1966af;
  font-size: 14px;
  line-height: 1.25;
}

.sps-header-copy span {
  color: #5d6974;
  font-size: 12px;
  margin-top: 4px;
}

.sps-header-all,
.sps-header-empty {
  border: 0;
  display: block;
  font-size: 14px;
  font-weight: 700;
  padding: 12px;
  text-align: center;
  width: 100%;
}

.sps-header-empty {
  background: #fff;
  color: #17212a;
}

/* The one button of the panel: full width, primary colour, white text (5.9 to 1). */
.sps-header-all {
  background: #1966af;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  min-height: 44px;
}

/* Accent colour on hover and focus. White would be too faint on it (2.5 to 1), so the text
   turns dark (6.4 to 1). The dark ring sits inside the button: the panel clips what is outside. */
.sps-header-all:hover,
.sps-header-all:focus-visible {
  background: #41aaf2;
  color: #17212a;
}

.sps-header-all:focus-visible {
  outline: 3px solid #17212a;
  outline-offset: -3px;
}

/* Phones and tablets (800 px and under, the theme's small header). The script puts the panel
   in the page straight after the search form and sets this class. It is an ordinary block
   there: nothing fixed, nothing placed from measurements, so it stays under the box when the
   header sticks and the keyboard opens. The script sets max-height to the room above the
   keyboard; the 50vh below is for browsers that cannot tell it. */
.sps-header-results--inline {
  box-shadow: 0 6px 16px rgba(11, 41, 66, 0.16);
  clear: both;
  margin-top: 6px;
  max-height: 50vh;
  position: static;
  text-align: left;
  width: auto;
  z-index: auto;
}

.sps-header-results--inline .sps-header-hit {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 56px;
  padding: 6px 10px;
}

.sps-header-results--inline .sps-header-image {
  height: 40px;
  width: 40px;
}

/* Always in reach, however long the list is. */
.sps-header-results--inline .sps-header-all {
  border-top: 1px solid #edf1f4;
  bottom: 0;
  min-height: 44px;
  position: sticky;
}

@media (max-width: 960px) {
  .sps__filter-button { display: block; }
  .sps__layout { display: block; }
  .sps__filters { display: none; }
  /* Progressive fallback for browsers without showModal: ordinary in-page
     disclosure, never an overlay trapped below the theme header. */
  .sps.is-filter-inline .sps__filters {
    display: block;
    margin-bottom: 16px;
    max-height: none;
    overflow: visible;
    position: static;
  }
  .sps__filter-close {
    display: block;
    min-height: 44px;
    min-width: 44px;
  }
}

@media (max-width: 620px) {
  .sps__toolbar { flex-wrap: wrap; }
  .sps__search-form { flex-basis: 100%; }
  .sps__filter-button { min-height: 42px; width: 100%; }
  .sps__image-box { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .sps *, .sps *::before, .sps *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Opt-in category presentation only; global header and commerce are unchanged. */
body.sps-category-page #main .woocommerce-container > #content {
  float: none;
  margin-inline: 0 !important;
  width: 100% !important;
}

.sps-category-intro {
  border-bottom: 1px solid #d9e1e7;
  color: #0b2942;
  margin: 0 auto 24px;
  max-width: 1840px;
  padding: 0 0 20px;
}

.sps-category-intro .sps-category-intro__eyebrow {
  color: #075c93;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.sps-category-intro h1 {
  color: #0b2942;
  font-size: clamp(28px, 2.7vw, 42px);
  line-height: 1.15;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.sps-category-intro__description,
.sps-category-intro .sps-category-intro__hint {
  color: #5d6974;
  font-size: 15px;
  line-height: 1.6;
  max-width: 80ch;
}

.sps-category-intro__description:empty { display: none; }
.sps .sps__trade { margin: 16px 0 0; padding: 0; border: 0; }
.sps .sps__trade h3 { margin: 0 0 8px; font-size: 18px; }
.sps .sps__trade-note, .sps .sps__trade-message { font-size: 13px; line-height: 1.45; color: #536779; margin: 8px 0; }
.sps .sps__trade-inputs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-bottom: 10px; }
.sps .sps__trade-inputs label { min-width: 0; font-size: 13px; }
.sps .sps__trade-inputs input { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #bacddb; border-radius: 6px; font: inherit; background: #fff; color: #183346; }
.sps .sps__trade button { min-height: 44px; padding: 8px 12px; margin: 0 6px 0 0; border-radius: 6px; border: 1px solid #0a6090; font: inherit; font-size: 13px; cursor: pointer; }
.sps .sps__trade-apply { background: #0a6090; color: #fff; }
.sps .sps__trade-reset { background: #fff; color: #0a6090; }
.sps .sps__trade :focus-visible { outline: 2px solid #0a6090; outline-offset: 3px; }
.sps .sps__trade-message:empty { display: none; }
.sps .sps__trade-inputs input { font-size: 16px; }
.sps-category-intro .sps-category-intro__hint { margin: 0; }

@media (max-width: 620px) {
  .sps-category-intro { margin-bottom: 18px; padding-bottom: 16px; }
  .sps[data-mode="category"] .sps__filter-button { min-height: 44px; }
}


/* The committed Algolia archive owns filtering; native archives retain theirs.
   This is the observed child-theme filter-only wrapper, not the cart toolbar. */
body.sps-category-page .filter-btn {
  display: none !important;
}

/* The theme's archive widgets (the store's advertisements) on a page the plugin serves, below
   the results where the template prints them. The space goes under each picture and not under
   each widget: a widget that shows nothing then takes no room. */
.sps-archive-widgets {
  margin-top: 24px;
}

.sps-archive-widgets img {
  height: auto;
  margin-bottom: 16px;
  max-width: 100%;
}

/* The close control of the store's sidebar drawer (small screens) sits in that widget area.
   There is no drawer on this page: it goes the way of .filter-btn above. */
.sps-archive-widgets .trigger-sidebar {
  display: none !important;
}

/* A guard, for a wrapper that is not expected in this container. The store's own sidebar
   template prints <div id="wc-products-filters-widget-area"> around these widgets, and under
   800 px the store's stylesheet makes that wrapper its filter drawer: fixed off the right edge
   of the screen until the "Filter" button slides it in. The template of this plugin prints the
   widgets without it. Should it be inside this container all the same (a hook, a later change
   of the theme), the pictures would be off the screen for good, because that button is hidden
   on this page (above). So here the wrapper and the box in it are plain blocks, at every
   width. !important because the store's rules are by id and come later in the page. */
body.sps-category-page .sps-archive-widgets #wc-products-filters-widget-area,
body.sps-category-page .sps-archive-widgets #wc-products-filters-widget-area .widget-area-contents {
  background: none !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  width: auto !important;
  z-index: auto !important;
}

/* Wide screens: the script puts the widgets into the layout and marks the layout with this
   class. Then every item is placed by name: the widgets on top of the left column, the filter
   box under them, the results over both rows. The first row is as high as the widgets, the
   second takes the rest, so the filter box keeps to the screen in it as before. Without the
   class the layout is the two-item grid it was. */
.sps__layout--widgets {
  grid-template-rows: auto 1fr;
}

.sps__layout--widgets > .sps-archive-widgets {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.sps__layout--widgets > .sps__filters {
  grid-column: 1;
  grid-row: 2;
}

.sps__layout--widgets > .sps__results {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Match the existing Avada mobile-header breakpoint. Do not move or resize the
   accepted desktop search, and keep search on PDPs/native archives available. */
@media only screen and (max-width: 800px) {
  body.sps-category-page
  .fusion-header-v4
  .fusion-secondary-main-menu
  .fusion-secondary-menu-search.mobile {
    display: none !important;
  }

  /* Without the adjacent search, Avada's negative margin/float can put the
     menu toggle over its first open row. Return only this toggle to flow. */
  body.sps-category-page
  .fusion-header-v4
  .fusion-mobile-nav-holder
  > button.fusion-mobile-selector {
    float: none !important;
    margin: 0 0 0 auto !important;
  }
}